/* ═══════════════════════════════════════════════════════════════════
   ARTIS v19 — STYLES
   Layout 3 colonnes + composants UI de base
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   RESET MINIMAL
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
   UTILITAIRES
   ───────────────────────────────────────────────────────────────── */
.display { font-family: var(--font-display); letter-spacing: -0.015em; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" on; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-soft { color: var(--ink-soft); }
.text-dim { color: var(--ink-dim); }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* ─────────────────────────────────────────────────────────────────
   SCROLLBARS DISCRÈTES
   ───────────────────────────────────────────────────────────────── */
.scroll, .scroll-y { overflow-y: auto; overflow-x: hidden; }
.scroll-x { overflow-x: auto; overflow-y: hidden; }
.scroll::-webkit-scrollbar, .scroll-y::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-track, .scroll-y::-webkit-scrollbar-track, .scroll-x::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.scroll::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ─────────────────────────────────────────────────────────────────
   LAYOUT 3 COLONNES
   ───────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* SIDEBAR GAUCHE */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* MAIN (centre) */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  position: sticky;
  top: 0;
  z-index: 10;
}

#view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* SCRATCH DROITE */
#scratch {
  width: var(--scratch-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--scratch-bg-start), var(--scratch-bg-end));
  border-left: 1px solid var(--paper-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* BACKDROP mobile */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  display: none;
}
.backdrop.show { display: block; }

/* ─────────────────────────────────────────────────────────────────
   SIDEBAR · INTERIEUR
   ───────────────────────────────────────────────────────────────── */
.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand .logo-mark {
  width: 32px;
  height: 32px;
  background: var(--c-forest);
  border-radius: var(--radius-md);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.sidebar-brand .name { font-size: var(--text-sm); font-weight: 700; }
.sidebar-brand .sub { font-size: 10px; color: var(--ink-dim); font-family: var(--font-mono); }

.sidebar-search {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.search-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  transition: border-color 0.15s;
}
.search-btn:hover { border-color: var(--ink-soft); }
.search-btn .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 5px;
  background: var(--sidebar-bg);
  border-radius: 3px;
  color: var(--ink-soft);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}
.nav-section {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-weight: 600;
}
.nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-section-add {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-section-add:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--hover-bg); color: var(--ink); }
.nav-item.active {
  background: var(--active-bg);
  color: var(--active-fg);
  font-weight: 600;
}
.nav-item.active .icon { color: var(--active-fg); }
.nav-item .icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item .label { flex: 1; }
.nav-item .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.nav-item.active .badge { color: var(--active-fg); opacity: 0.7; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sync-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  padding: 0 var(--space-2);
}
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-success);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.theme-toggle button {
  flex: 1;
  padding: 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle button:hover { background: var(--hover-bg); color: var(--ink); }
.theme-toggle button.active {
  background: var(--c-forest);
  color: white;
}
.theme-toggle button .icon { width: 12px; height: 12px; }

.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 100%;
  text-align: left;
  transition: border-color 0.15s;
}
.user-card:hover { border-color: var(--ink-soft); }
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-forest), var(--c-forest-light));
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: var(--text-xs); font-weight: 600; }
.user-role { font-size: 10px; color: var(--ink-dim); }

/* ─────────────────────────────────────────────────────────────────
   TOPBAR · INTERIEUR
   ───────────────────────────────────────────────────────────────── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.topbar-toggle {
  display: none;
  color: var(--ink-soft);
  padding: 4px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.breadcrumb .icon { width: 14px; height: 14px; color: var(--ink-soft); }
.breadcrumb .title { font-weight: 600; }
.breadcrumb .sep { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-xs); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
a.icon-btn { text-decoration: none; }
.icon-btn:hover { background: var(--hover-bg); color: var(--ink); }
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn .badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--c-danger);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────
   SCRATCH · INTERIEUR
   ───────────────────────────────────────────────────────────────── */
.scratch-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--paper-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scratch-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper-ink);
  letter-spacing: -0.01em;
}
.scratch-title .icon { width: 18px; height: 18px; color: var(--c-amber); }

.scratch-open-full {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--paper-ink);
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
[data-theme="dark"] .scratch-open-full { background: rgba(0, 0, 0, 0.2); }
.scratch-open-full:hover { background: var(--c-amber); color: white; transform: translateY(-1px); }
.scratch-open-full .icon { width: 11px; height: 11px; }
.scratch-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--paper-ink);
  outline: none;
  resize: none;
  font-family: var(--font-body);
  line-height: 1.5;
}
[data-theme="dark"] .scratch-textarea { background: rgba(0, 0, 0, 0.2); }
.scratch-textarea::placeholder { color: rgba(176, 125, 43, 0.5); }
.scratch-textarea:focus { border-color: var(--c-amber); }
[data-theme="dark"] .scratch-tool-btn:hover { background: rgba(0, 0, 0, 0.2); }
.scratch-tool-btn .icon { width: 14px; height: 14px; }

.scratch-save-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 6px 12px;
  background: var(--c-amber);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.scratch-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────
   VUE (zone centrale, placeholder pour les écrans)
   ───────────────────────────────────────────────────────────────── */
.view-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-12);
  text-align: center;
  color: var(--ink-dim);
}
.view-placeholder .icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  color: var(--ink-dim);
}
.view-placeholder h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.view-placeholder p {
  font-size: var(--text-sm);
  max-width: 480px;
  line-height: 1.6;
}
.view-placeholder .mono-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-top: var(--space-4);
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE · mobile + tablette
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-xl);
  }
  #sidebar.open { transform: translateX(0); }

  #scratch {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-xl);
  }
  #scratch.open { transform: translateX(0); }

  .topbar-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  #sidebar { width: 280px; }
  #scratch { width: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VUES · composants partagés
   ═══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.page {
  padding: var(--space-6) var(--space-8);
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .page { padding: var(--space-4); }
}

/* Page header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-header-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.page-header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-forest);
  flex-shrink: 0;
}
.page-header-icon svg { width: 22px; height: 22px; }
.page-header h1 {
  font-size: var(--text-3xl);
  margin: 0 0 4px;
  line-height: 1.15;
}
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0;
}
.page-header-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn .icon, .btn svg { width: 14px; height: 14px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--c-forest);
  color: white;
  border-color: var(--c-forest);
}
.btn-primary:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .btn-primary { background: var(--c-moss); color: var(--c-forest); border-color: var(--c-moss); }
[data-theme="dark"] .btn-primary:hover:not([disabled]) { background: #B0E3C7; }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-secondary:hover:not([disabled]) { border-color: var(--ink-soft); }
.btn-sm { padding: 6px 10px; font-size: var(--text-xs); }
.btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.btn-group .btn { border-radius: 0; border-right-width: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.btn-group .btn:last-child { border-right-width: 1px; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* Toolbar */
.toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.toolbar-search {
  position: relative;
  flex: 1;
}
.toolbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-dim);
}
.toolbar-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink);
  outline: none;
}
.toolbar-search-input:focus { border-color: var(--c-forest); }
.toolbar-search-input::placeholder { color: var(--ink-dim); }

/* Chips (filtres) */
.filter-chips {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.filter-chips-scroll::-webkit-scrollbar { height: 4px; }
.chip {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip-active {
  background: var(--c-forest);
  color: white;
  border-color: var(--c-forest);
}
[data-theme="dark"] .chip-active { background: var(--c-moss); color: var(--c-forest); border-color: var(--c-moss); }
.chip-light {
  background: transparent;
  border-color: transparent;
}
.chip-light:hover { background: var(--hover-bg); }

/* KPI pills */
.kpi-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.kpi-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}
.kpi-pill .kpi-icon { width: 14px; height: 14px; flex-shrink: 0; }
.kpi-pill .kpi-value {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--font-mono);
}
.kpi-pill .kpi-label { color: var(--ink-soft); }
.kpi-pill.variant-danger .kpi-icon, .kpi-pill.variant-danger .kpi-value { color: var(--c-danger); }
.kpi-pill.variant-warning .kpi-icon, .kpi-pill.variant-warning .kpi-value { color: var(--c-warning); }
.kpi-pill.variant-success .kpi-icon, .kpi-pill.variant-success .kpi-value { color: var(--c-success); }
.kpi-pill.variant-info .kpi-icon, .kpi-pill.variant-info .kpi-value { color: var(--c-info); }
.kpi-pill.variant-neutral .kpi-icon, .kpi-pill.variant-neutral .kpi-value { color: var(--ink); }

/* Grid 2 cols */
.grid-2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 900px) {
  .grid-2-cols { grid-template-columns: 1fr; }
}
.dashboard-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.dashboard-card .card-header h3 {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dashboard-card .card-icon { width: 14px; height: 14px; color: var(--c-forest); }
.card-empty {
  text-align: center;
  padding: var(--space-6) var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.card-empty .empty-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--space-2);
  color: var(--ink-dim);
}
.card-empty p { margin: 0 0 4px; }

/* Pilotis card (special) */
.pilotis-card {
  background: linear-gradient(135deg, #1B4332, #0A1F1A);
  border: none;
  color: white;
}
[data-theme="dark"] .pilotis-card {
  background: linear-gradient(135deg, #1B4332, #081610);
}
.pilotis-card .dashboard-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-moss);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.pilotis-card .dashboard-card-eyebrow svg { width: 14px; height: 14px; }
.pilotis-card .pilotis-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}
.pilotis-card .pilotis-practical {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}
.pilotis-next {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.pilotis-next:hover { background: rgba(255, 255, 255, 0.22); }
.pilotis-next svg { width: 12px; height: 12px; }
.pilotis-card .pilotis-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-moss);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  color: var(--ink-dim);
  stroke-width: 1.4;
}
.empty-state h2, .empty-state h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.empty-state p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.empty-state-compact {
  padding: var(--space-8) var(--space-4);
}
.empty-state-inline {
  padding: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

/* Coming soon */
.coming-soon {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--c-warning-bg);
  border: 1px solid var(--c-warning);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}
.coming-soon-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--c-warning);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.coming-soon-icon svg { width: 18px; height: 18px; }
.coming-soon-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--c-warning);
  margin-bottom: 2px;
}
.coming-soon-desc {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* Mono tag */
.mono-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  transition: color 0.15s;
}
.back-link:hover { color: var(--c-forest); }
.back-link svg { width: 14px; height: 14px; }

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab-active {
  color: var(--c-forest);
  border-bottom-color: var(--c-forest);
  font-weight: 600;
}
[data-theme="dark"] .tab-active { color: var(--c-moss); border-bottom-color: var(--c-moss); }
.tab-icon { width: 14px; height: 14px; }

.tab-content { padding-top: var(--space-2); }
.tab-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.tab-content-header h2 { font-size: var(--text-xl); }

/* ─── Annuaire layout ────────────────────────────────────────── */
.annuaire-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .annuaire-layout { grid-template-columns: 1fr; }
  .annuaire-detail { display: none; }
}
.annuaire-master {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.annuaire-master-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.annuaire-master-title h1 { font-size: var(--text-xl); margin-bottom: 2px; }
.annuaire-toolbar {
  padding: var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  /* v2.18.84 — Pas de overflow:hidden ici : on doit laisser apparaître la
     barre de défilement horizontale du child .filter-chips-scroll. */
}
.annuaire-toolbar .filter-chips-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* v2.18.84 — Indicateur visuel de scroll : fade à droite quand il y a du
     contenu masqué (mask CSS, dégradable proprement sur vieux navigateurs) */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}
.annuaire-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}
.societe-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease;
}
.societe-item:hover {
  background: var(--surface-2);
}
.societe-item.societe-item-active {
  background: var(--surface-2);
  font-weight: 500;
}
.societe-item-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim, var(--accent)));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.societe-item-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.annuaire-detail {
  background: var(--bg);
  overflow-y: auto;
  padding: var(--space-6);
}
.annuaire-detail-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--ink-soft);
}

/* Société header */
.societe-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.societe-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-lagoon), var(--c-forest));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  flex-shrink: 0;
}
.societe-header-info { flex: 1; min-width: 0; }
.societe-header-info h1 { font-size: var(--text-2xl); margin-bottom: 4px; }
.societe-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.societe-roles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.role-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-badge-neutral { background: var(--hover-bg); color: var(--ink-soft); }
.role-badge-success { background: var(--c-success-bg); color: var(--c-success); }
.societe-header-actions {
  display: flex;
  gap: 4px;
}

/* Section card */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.section-icon { width: 16px; height: 16px; color: var(--c-forest); flex-shrink: 0; margin-top: 2px; }
[data-theme="dark"] .section-icon { color: var(--c-moss); }
.section-header h3 {
  font-size: var(--text-sm);
  margin: 0;
}
.section-subtitle {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 4px 0 var(--space-3);
}

/* Palette picker */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}
.palette-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.palette-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.palette-option:hover {
  border-color: var(--c-forest);
  background: var(--surface-2);
}
.palette-option-active {
  border-color: var(--c-forest);
  box-shadow: 0 0 0 2px var(--c-forest) inset;
}
.palette-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.palette-swatch-3 {
  display: flex;
}
.palette-strip {
  flex: 1;
  height: 100%;
}
.palette-name { font-size: 12px; color: var(--ink); }

/* Button group */
.btn-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.btn-group .btn-sm {
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-group .btn-sm:hover { color: var(--ink); }
.btn-group .btn-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  flex: 0 0 160px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  padding-top: 2px;
}
.info-value { flex: 1; font-size: var(--text-sm); }
.info-grid-3 .info-row {
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-2) 0;
}
/* La dernière info-row de CHAQUE colonne (en grid, ce sont les rows 2 et 6) ne doit
   pas avoir de border. On reset puis on retire la bordure des items des 2 dernières
   lignes affichées (en 3 cols × 2 lignes = items 4, 5, 6). */
.info-grid-3 .info-row:nth-last-child(-n+3) { border-bottom: none; }
.info-grid-3 .info-label {
  flex: 0 0 90px;       /* plus compact en grille */
}
/* Sur mobile / petit écran : repli 2 colonnes puis 1 colonne */
@media (max-width: 900px) {
  .info-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .info-grid-3 .info-row:nth-last-child(-n+2) { border-bottom: none; }
  .info-grid-3 .info-row:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border-soft); }
}
@media (max-width: 600px) {
  .info-grid-3 { grid-template-columns: 1fr; }
  .info-grid-3 .info-row { border-bottom: 1px solid var(--border-soft); }
  .info-grid-3 .info-row:last-child { border-bottom: none; }
}

/* ─── Mon espace layout ──────────────────────────────────────── */
.mon-espace-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100%;
}
@media (max-width: 768px) {
  .mon-espace-layout { grid-template-columns: 1fr; }
  .subnav { border-right: none; border-bottom: 1px solid var(--border); }
}
.subnav {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
}
.subnav-header { padding: 0 var(--space-2) var(--space-4); }
.subnav-header h1 { font-size: var(--text-lg); margin-bottom: 2px; }
.subnav-group {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-weight: 600;
}
.subnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
  margin-bottom: 1px;
}
.subnav-item:hover { background: var(--hover-bg); color: var(--ink); }
.subnav-item-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.subnav-icon { width: 14px; height: 14px; flex-shrink: 0; }

.mon-espace-content {
  padding: var(--space-6) var(--space-8);
  max-width: 820px;
}
@media (max-width: 768px) {
  .mon-espace-content { padding: var(--space-4); }
}
.section-page-header { margin-bottom: var(--space-5); }
.section-page-header h2 { font-size: var(--text-2xl); margin-bottom: 4px; }
.section-page-subtitle { color: var(--ink-soft); font-size: var(--text-sm); }

/* Form inputs */
.form-grid { display: grid; gap: var(--space-3); }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.form-field { margin-bottom: var(--space-3); }
.form-field label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
.input {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink);
  outline: none;
  font-family: var(--font-body);
}
.input:focus { border-color: var(--c-forest); }
[data-theme="dark"] .input { background: var(--surface-elevated); }
.textarea-large {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink);
  outline: none;
  font-family: var(--font-body);
  resize: vertical;
  margin-bottom: var(--space-3);
}
.textarea-large:focus { border-color: var(--c-forest); }

/* Identite avatar block */
.identite-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.identite-avatar-block { text-align: center; }
.identite-fields { flex: 1; }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row-title { font-size: var(--text-sm); font-weight: 500; margin-bottom: 2px; }
.toggle-row-desc { font-size: var(--text-xs); color: var(--ink-soft); }
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
input:checked + .toggle-slider { background: var(--c-forest); }
[data-theme="dark"] input:checked + .toggle-slider { background: var(--c-moss); }
input:checked + .toggle-slider::before { transform: translateX(16px); }

/* Info box */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.info-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.info-box-warning {
  background: var(--c-warning-bg);
  color: var(--c-warning);
}
.info-box-info {
  background: var(--c-info-bg);
  color: var(--c-info);
}

/* Entreprise logo */
.entreprise-logo-row {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.entreprise-logo-block { text-align: center; }
.entreprise-logo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-dim);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.entreprise-logo-placeholder:hover { border-color: var(--c-forest); }
.entreprise-logo-placeholder svg { width: 24px; height: 24px; }
.entreprise-logo-placeholder span { font-size: 10px; }
.entreprise-fields { flex: 1; }

/* Member row */
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.member-row:last-child { border-bottom: none; }
.member-info { flex: 1; }
.member-name {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.member-meta {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

/* Arborescence cards */
.arborescence-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.arborescence-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.arborescence-card:hover { border-color: var(--c-forest); transform: translateY(-2px); }
.arborescence-card-default {
  background: var(--c-forest);
  color: white;
  border-color: var(--c-forest);
}
[data-theme="dark"] .arborescence-card-default {
  background: var(--c-moss);
  color: var(--c-forest);
}
.arborescence-card-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.arborescence-card-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-2);
  color: var(--c-moss);
}
.arborescence-card-default .arborescence-card-icon { color: var(--c-moss); }
[data-theme="dark"] .arborescence-card-default .arborescence-card-icon { color: var(--c-forest); }
.arborescence-card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}
.arborescence-card-meta {
  font-size: var(--text-xs);
  opacity: 0.7;
}
.arborescence-card-new .arborescence-card-icon { color: var(--ink-dim); margin-bottom: var(--space-1); }

/* Connexion row */
.connexion-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.connexion-row:last-child { border-bottom: none; }
.connexion-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.connexion-icon svg { width: 18px; height: 18px; color: var(--c-forest); }
[data-theme="dark"] .connexion-icon svg { color: var(--c-moss); }
.connexion-info { flex: 1; }
.connexion-name { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.connexion-desc { font-size: var(--text-xs); color: var(--ink-soft); margin-bottom: 4px; }
.connexion-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-success);
  display: inline-block;
}
.dot-success { background: var(--c-success); }
.dot-dim { background: var(--ink-dim); }

/* Reference list (normes, textes) */
.ref-list { display: flex; flex-direction: column; gap: var(--space-1); }
.ref-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.ref-row:hover { background: var(--hover-bg); }
.ref-row-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.ref-row-icon svg { width: 14px; height: 14px; }
.ref-row-name { font-size: var(--text-sm); font-weight: 500; }
.ref-row-desc { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }

/* Flex utility */
.flex-end {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}
.flex-end.gap-2 { gap: var(--space-2); }

/* Référentiel grid */
.referentiel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.referentiel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: block;
}
.referentiel-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-forest);
  box-shadow: var(--shadow-md);
}
.referentiel-card-flag {
  font-size: 28px;
  margin-bottom: var(--space-2);
  line-height: 1;
}
.referentiel-card-flag svg { width: 28px; height: 28px; color: var(--c-forest); }
[data-theme="dark"] .referentiel-card-flag svg { color: var(--c-moss); }
.referentiel-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 4px;
}
.referentiel-card-subtitle {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.referentiel-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.referentiel-card-meta {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  display: block;
}

/* Pilotis */
.pilotis-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--c-forest), #0A1F1A);
  border-radius: var(--radius-lg);
  color: white;
  margin-bottom: var(--space-5);
}
.pilotis-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pilotis-hero-icon svg { width: 28px; height: 28px; color: var(--c-moss); }
.pilotis-hero h2 { font-size: var(--text-xl); color: white; margin-bottom: 4px; }
.pilotis-hero p { color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); }

.pilotis-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.pilotis-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: var(--text-md);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  resize: vertical;
  min-height: 80px;
  margin-bottom: var(--space-3);
}
.pilotis-input::placeholder { color: var(--ink-dim); }
.pilotis-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pilotis-suggestions { margin-bottom: var(--space-5); }
.pilotis-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}
.pilotis-suggestion {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s;
}
.pilotis-suggestion:hover { border-color: var(--c-forest); }
.pilotis-suggestion-title { font-size: var(--text-sm); font-weight: 500; margin-bottom: 2px; }
.pilotis-suggestion-ref { font-size: 10px; color: var(--ink-dim); }
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Page 404 */
.page-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-12);
}
.page-404-content {
  text-align: center;
  max-width: 480px;
}
.page-404-num {
  font-size: 96px;
  font-weight: 600;
  color: var(--c-forest);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.04em;
}
[data-theme="dark"] .page-404-num { color: var(--c-moss); }
.page-404 h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.page-404 p { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.page-404-route { margin: var(--space-4) 0; }
.page-404-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
@media (max-width: 768px) {
  .agenda-week { grid-template-columns: 1fr; }
}

/* ─── Modal (générique) ─────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-4);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}
.modal-lg { max-width: 800px; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: var(--text-md); font-weight: 600; }
.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
}

/* Arbre import arborescence */
.import-tree {
  margin-top: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
.import-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
}
.import-tree-row:hover { background: var(--surface); }
.import-tree-name { flex: 1; color: var(--ink); }
.import-tree-suggest {
  color: var(--accent);
  font-size: 11px;
}

/* Arborescence actions (Mon espace > Arborescences) */
.arborescence-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.arborescence-actions .text-xs { width: 100%; }
.arborescence-actions code {
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ─── Module Réception ───────────────────────────────────────── */
.reception-phase { margin-bottom: var(--space-4); }
.reception-phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.reception-phase-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}
.reception-phase-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0;
}
.reception-phase-subtitle {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 2px 0 0;
}

.reception-step {
  padding: var(--space-3);
  border-left: 3px solid var(--accent-dim, var(--accent));
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.reception-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 11px;
  align-items: center;
}
.reception-step-article {
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.reception-step-actor {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.reception-step-delay {
  color: var(--ink-soft);
  font-style: italic;
}
.reception-step-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
}
.reception-step-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.reception-step-quote {
  font-size: var(--text-xs);
  font-style: italic;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}
.reception-step-watch {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-xs);
  padding: 8px 10px;
  background: rgba(220, 150, 60, 0.1);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.reception-step-watch svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: rgb(220, 150, 60); }

.reception-delays {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.reception-delays th,
.reception-delays td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.reception-delays th {
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
}
.reception-delays tr:hover td { background: var(--surface-2); }

/* ─── Module Agenda · grille semaine 24h ─────────────────────── */
.agenda-page { display: flex; flex-direction: column; height: 100%; }

.agenda-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.agenda-toolbar-left,
.agenda-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.agenda-toolbar-right { margin-left: auto; }

.agenda-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  height: 70vh;
  min-height: 500px;
}

.agenda-grid-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.agenda-grid-hour-col-header {
  border-right: 1px solid var(--border-soft);
}
.agenda-grid-day-header {
  padding: 8px;
  text-align: center;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid transparent;
}
.agenda-grid-day-header-today { border-bottom: 2px solid var(--accent); }
.agenda-grid-day-name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
}
.agenda-grid-day-num {
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
}
.agenda-grid-day-num-today {
  width: 28px;
  height: 28px;
  margin: 2px auto 0;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.agenda-grid-allday {
  display: grid;
  grid-template-columns: 60px 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  min-height: 40px;
  flex-shrink: 0;
}
.agenda-grid-allday-label {
  font-size: 10px;
  color: var(--ink-soft);
  padding: 8px;
  text-align: right;
  border-right: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.agenda-grid-allday-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.agenda-grid-allday-cell {
  border-right: 1px solid var(--border-soft);
}
.agenda-grid-allday-cell:last-child { border-right: none; }

.agenda-grid-body {
  flex: 1;
  overflow-y: auto;
}
.agenda-grid-hours {
  display: flex;
  flex-direction: column;
}
.agenda-grid-hour-row {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  height: 48px;
  border-bottom: 1px solid var(--border-soft);
}
.agenda-grid-hour-row-off {
  background: linear-gradient(to right, transparent 60px, rgba(0,0,0,0.025) 60px);
}
[data-theme="dark"] .agenda-grid-hour-row-off {
  background: linear-gradient(to right, transparent 60px, rgba(0,0,0,0.2) 60px);
}
.agenda-grid-hour-row-off .agenda-grid-hour-label {
  color: var(--ink-dim);
}
.agenda-grid-hour-label {
  font-size: 10px;
  color: var(--ink-soft);
  padding: 4px 8px 0;
  text-align: right;
  border-right: 1px solid var(--border-soft);
  font-family: var(--font-mono);
}
.agenda-grid-cell {
  border-right: 1px solid var(--border-soft);
  position: relative;
}
.agenda-grid-cell:last-child { border-right: none; }
.agenda-grid-cell-half {
  position: absolute;
  inset: 0 0 50% 0;
  border-bottom: 1px dashed var(--border-soft);
}

.agenda-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--ink-soft);
}
.agenda-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agenda-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* Mobile · vue jour-focus + minimap semaine (Maquette E) */
@media (max-width: 768px) {
  .agenda-grid-header { grid-template-columns: 40px repeat(7, 1fr); }
  .agenda-grid-allday { grid-template-columns: 40px 1fr; }
  .agenda-grid-hour-row { grid-template-columns: 40px repeat(7, 1fr); height: 40px; }
  .agenda-grid-day-name { font-size: 9px; }
  .agenda-grid-day-num { font-size: 13px; }
  .agenda-grid-hour-label { font-size: 9px; padding: 3px 4px 0; }
  .agenda-grid { height: 65vh; }
}

/* ─── Annuaire · hydratation 1.3 ─────────────────────────────── */
.annuaire-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.spin {
  animation: spin 1s linear infinite;
  width: 16px;
  height: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

a.societe-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
a.societe-item:hover { background: var(--surface-2); }

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}
.role-badge-neutral {
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.role-badge-sm { font-size: 10px; padding: 1px 6px; }

.role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Intervenants list dans onglet employés */
.intervenants-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
a.intervenant-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
a.intervenant-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.intervenant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.intervenant-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 20px;
}
.intervenant-body { flex: 1; min-width: 0; }
.intervenant-name { font-weight: 500; margin-bottom: 2px; }
.intervenant-fonction { margin-bottom: 4px; }
.intervenant-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.intervenant-detail-header {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}

/* ─── Référentiel · badge texte embarqué + actions Annuaire ─── */
.referentiel-card-badge {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 8px;
  font-size: 10px;
  background: var(--c-success-bg);
  color: var(--c-success);
  border-radius: var(--radius-full);
  font-weight: 500;
}

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

/* ─── Formulaires CRUD Annuaire 1.4 ──────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.form-section {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.form-section-title svg { width: 18px; height: 18px; color: var(--c-forest); }
.form-section-subtitle {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.form-field label {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-weight: 500;
}
.form-field .required {
  color: var(--c-coral);
  margin-left: 2px;
}
.form-hint {
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 2px;
}
.form-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns: 0.5fr 1fr 1fr 1.5fr; }
.form-field-span-2 { grid-column: span 2; }
@media (max-width: 640px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .form-field-span-2 { grid-column: span 1; }
}

.form-card .input,
.form-card textarea.input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.form-card .input:focus { border-color: var(--c-forest); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-card textarea.input { resize: vertical; min-height: 60px; }

/* Role picker */
.role-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.role-picker-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 6px;
}
.role-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.role-pick:hover { border-color: var(--c-forest-light); }
.role-pick input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--c-forest);
  cursor: pointer;
}
.role-pick:has(input:checked) {
  background: var(--c-forest);
  border-color: var(--c-forest);
  color: white;
}
.role-pick:has(input:checked) .role-pick-article { color: rgba(255,255,255,0.7); }
.role-pick-label { font-weight: 500; }
.role-pick-article {
  font-size: 10px;
  color: var(--ink-dim);
  padding: 1px 5px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.role-pick:has(input:checked) .role-pick-article {
  background: rgba(255,255,255,0.2);
}

/* Form actions footer */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.form-actions-right {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* Form errors */
.form-errors:empty { display: none; }
.form-error-box {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--c-danger-bg);
  border-left: 3px solid var(--c-danger);
  border-radius: var(--radius-md);
  color: var(--ink);
  margin: var(--space-3) 0;
}
.form-error-box svg { width: 18px; height: 18px; color: var(--c-danger); flex-shrink: 0; margin-top: 2px; }
.form-error-box ul { margin: 4px 0 0; padding-left: 18px; }
.form-error-box li { font-size: var(--text-sm); margin: 2px 0; }

/* Bouton danger */
.btn-danger {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.btn-danger:hover {
  background: var(--c-danger);
  color: white;
}

/* Header intervenant détail : actions à droite */
.intervenant-detail-info { flex: 1; min-width: 0; }
.intervenant-detail-actions { display: flex; gap: 6px; }

/* ─── Logo société · variante image (override quand image présente) ── */
.societe-item-logo.societe-item-logo-image,
.societe-logo.societe-logo-image {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px;
  overflow: hidden;
}
.societe-item-logo.societe-item-logo-image img,
.societe-logo.societe-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-md) - 2px);
}

/* ─── Logo uploader · zone d'upload dans formulaire ──────────── */
.logo-uploader {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
}
.logo-uploader-preview {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-uploader-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.logo-uploader-placeholder {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--c-forest);
  letter-spacing: 0.02em;
}
.logo-uploader-placeholder svg {
  width: 24px;
  height: 24px;
  color: var(--ink-soft);
}
.logo-uploader-actions {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.logo-uploader-actions .form-hint {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .logo-uploader { flex-direction: column; align-items: center; }
  .logo-uploader-actions { justify-content: center; }
}

/* ─── Annuaire master list · sections Récents + Toutes ──────── */
.annuaire-list-section {
  padding: var(--space-2) 0;
}
.annuaire-list-section + .annuaire-list-section {
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
.annuaire-list-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.annuaire-list-section-icon {
  width: 12px;
  height: 12px;
}
.annuaire-list-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.annuaire-list-section-recents .societe-item {
  background: var(--surface-2);
}
.annuaire-list-section-recents .societe-item:hover {
  background: var(--hover-bg);
}

/* ════════════════════════════════════════════════════════════════
 * MODULE AFFAIRES · Design 1 (carte horizontale 3 zones)
 * ════════════════════════════════════════════════════════════════ */

.affaires-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.affaire-card {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.affaire-card:hover {
  border-color: var(--c-forest-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ─── Zones (3 colonnes) ───────────────────────────────────── */
.affaire-zone {
  position: relative;
  padding: var(--space-3) var(--space-4);
  padding-left: 28px; /* place pour le handle de drag */
  border-right: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  min-height: 110px;
  cursor: grab;
  transition: background 0.15s;
}
.affaire-zone:last-child { border-right: none; }
.affaire-zone:active { cursor: grabbing; }

.affaire-zone-handle {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: var(--radius-sm);
}
.affaire-zone:hover .affaire-zone-handle {
  opacity: 0.5;
}
.affaire-zone-handle:hover {
  opacity: 1 !important;
  color: var(--c-forest);
  background: var(--surface-2);
}
.affaire-zone-handle svg {
  width: 14px;
  height: 14px;
}

.affaire-zone-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.affaire-zone-dragging {
  opacity: 0.4;
}
.affaire-zone-drop-target {
  background: var(--selected-bg);
  outline: 2px dashed var(--c-forest);
  outline-offset: -4px;
}

/* ─── Zone Identification ──────────────────────────────────── */
.affaire-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.affaire-card-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-forest), var(--c-forest-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.affaire-card-logo.affaire-card-logo-image {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px;
  overflow: hidden;
}
.affaire-card-logo.affaire-card-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-md) - 2px);
}
.affaire-card-titre {
  flex: 1;
  min-width: 0;
}
.affaire-card-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.affaire-card-moa {
  font-size: 11px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.affaire-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.badge-soft {
  font-size: 10px;
  padding: 2px 7px;
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: var(--radius-full);
}
.affaire-timeline-meta {
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* ─── Zone Échéances ───────────────────────────────────────── */
.affaire-zone-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.affaire-echeances-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.affaire-echeance {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.affaire-echeance-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.affaire-echeance-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.affaire-echeance-date {
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.echeance-date-normal { color: var(--ink-soft); }
.echeance-date-urgent {
  color: #B07D2B; /* ambre 600 */
  font-weight: 600;
}
.echeance-date-overdue {
  color: #B91C1C; /* rouge 700 */
  font-weight: 700;
}

/* ─── Responsive · stack vertical sous 900px ───────────────── */
@media (max-width: 900px) {
  .affaire-card {
    grid-template-columns: 1fr;
  }
  .affaire-zone {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    min-height: auto;
  }
  .affaire-zone:last-child { border-bottom: none; }
}

/* ─── Affaires · formulaire et détail ──────────────────────── */
.acteur-preview {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  min-height: 36px;
}
.acteur-preview-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-forest), var(--c-forest-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 10px;
  flex-shrink: 0;
}
.acteur-preview-logo.acteur-preview-logo-image {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px;
  overflow: hidden;
}
.acteur-preview-logo.acteur-preview-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.acteur-preview-info {
  flex: 1;
  min-width: 0;
}
.acteur-preview-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acteur-preview-meta {
  font-size: 10px;
  color: var(--ink-soft);
}

/* Détail affaire header */
.affaire-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.affaire-detail-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-forest), var(--c-forest-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}
.affaire-detail-logo.affaire-card-logo-image {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
  overflow: hidden;
}
.affaire-detail-logo.affaire-card-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-md) - 3px);
}
.affaire-detail-titre {
  flex: 1;
  min-width: 0;
}
.affaire-detail-titre h1 {
  margin: 0 0 4px;
  font-size: var(--text-2xl);
}
.affaire-detail-actions {
  display: flex;
  gap: 6px;
}

/* ─── Section card · header avec meta à droite ────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.section-header h3 { flex: 1; margin: 0; }
.section-header-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ─── Form section : marche MOE / marche travaux ─────────── */
.form-section-marche-moe { border-left: 3px solid var(--c-forest); padding-left: var(--space-3); }
.form-section-marche-travaux { border-left: 3px solid #B07D2B; padding-left: var(--space-3); }

/* ─── Tableaux phases MOE / tranches travaux ──────────────── */
.phases-moe-section, .tranches-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.phases-moe-header, .tranches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}
.phases-moe-actions, .tranches-actions {
  display: flex;
  gap: 6px;
}
.phases-moe-table-wrap, .tranches-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.phases-moe-table, .tranches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;   /* v2.18.10 — les colonnes respectent leurs largeurs */
}
.phases-moe-table thead, .tranches-table thead {
  background: var(--surface-2);
}
.phases-moe-table th, .tranches-table th {
  text-align: left;
  padding: 8px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phases-moe-table td, .tranches-table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.phases-moe-table tbody tr:last-child td,
.tranches-table tbody tr:last-child td {
  border-bottom: none;
}
.phases-moe-table tfoot td, .tranches-table tfoot td {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.input-sm {
  padding: 4px 8px;
  font-size: 13px;
  height: auto;
  min-height: 30px;
}

/* ─── Badges TF/TC ─────────────────────────────────────────── */
.badge-tf-tc {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}
.badge-tf-tc.tf { background: #E0F2E9; color: #1B4332; }
.badge-tf-tc.tc { background: #FAEEDA; color: #854F0B; }

/* ─── Badges statut ───────────────────────────────────────── */
.badge-statut {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.badge-statut.statut-en_cours { background: #E0F2E9; color: #1B4332; }
.badge-statut.statut-terminee { background: #E5E7EB; color: #374151; }
.badge-statut.statut-a_venir, .badge-statut.statut-non_affermie { background: var(--surface-2); color: var(--ink-soft); }
.badge-statut.statut-en_retard { background: #FEE2E2; color: #991B1B; }
.badge-statut.statut-suspendue, .badge-statut.statut-ajournee { background: #FEF3C7; color: #92400E; }
.badge-statut.statut-non_retenue, .badge-statut.statut-abandonnee { background: var(--surface-2); color: var(--ink-dim); }

/* ─── Tableau de données (générique, utilisé dans détail) ── */
.data-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead { background: var(--surface-2); }
.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--hover-bg); }

/* ─── Boutons icône (croix de retrait) ────────────────────── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-dim);
  transition: all 0.15s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon-danger:hover { background: #FEE2E2; color: #B91C1C; }
.btn-icon svg { width: 14px; height: 14px; }

/* ─── Cellule délai (2 inputs côte à côte) ──────────────────── */
/* v2.18.22 — règle .cell-delai unifiée plus bas (vers ligne 4156). */
.delai-sep {
  font-size: 10px;
  color: var(--ink-dim);
  font-weight: 500;
  margin: 0 1px;
}

/* ─── Ligne en retard (rouge subtil) ───────────────────────── */
.row-en-retard {
  background: rgba(185, 28, 28, 0.04);
}
.row-en-retard td { border-bottom-color: rgba(185, 28, 28, 0.15) !important; }

/* ─── Badge "retard" inline ────────────────────────────────── */
.badge-retard {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: var(--radius-full);
}

.text-warning { color: #B07D2B; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
 * AFFAIRES 2.3 · Corrections UI critiques
 * ════════════════════════════════════════════════════════════════ */

/* ─── Cellule délai REFONTE : labels visibles, inputs lisibles ─── */
/* v2.18.22 — règle .cell-delai unifiée plus bas (vers ligne 4156). */
.delai-sep {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 1px;
  user-select: none;
}

/* ─── Montant : input plus large, séparateur milliers ─────────── */
.cell-montant {
  padding: 4px 6px !important;
  min-width: 120px;
}

/* Format affiché (au blur) — la valeur réelle stockée reste numérique */
.input-formatted-montant {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ─── Tableau : largeurs revues ────────────────────────────────── */
.phases-moe-table input[type="date"],
.tranches-table input[type="date"] {
  font-size: 12px !important;
  padding: 4px 4px !important;
  min-width: 0;             /* v2.18.10 — laisse la cellule contrôler */
  width: 100%;              /* v2.18.10 — respecte la largeur de la cellule */
  box-sizing: border-box;
}

/* v2.18.10 — tous les inputs/selects des tables formulaire s'adaptent à leur colonne */
.phases-moe-table input.input-sm,
.tranches-table input.input-sm,
.phases-moe-table select.input-sm,
.tranches-table select.input-sm {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Sélecteurs plus aérés */
.phases-moe-table select.input-sm,
.tranches-table select.input-sm {
  padding: 4px 4px !important;
  font-size: 12px !important;
}

/* Police mono partout pour les chiffres */
.cell-delai input,
.cell-montant input {
  font-variant-numeric: tabular-nums;
}
.lots-section { margin-top: var(--space-2); }

/* ════════════════════════════════════════════════════════════════
 * AFFAIRES 2.4 · LOTS imbriqués + FIX INPUTS DÉLAI/MONTANT
 * ════════════════════════════════════════════════════════════════ */

/* ─── Section principale ────────────────────────────────────── */
.form-section-marche-travaux { border-left: 3px solid #B07D2B; padding-left: var(--space-3); }

/* ─── Empty state lots ─────────────────────────────────────── */
.empty-lots {
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-dim);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  margin: var(--space-2) 0;
}
.empty-lots p { margin: 0; }

/* ─── Panneau d'un lot ─────────────────────────────────────── */
.lot-panel {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.lot-panel-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lot-panel-type-badge svg { width: 12px; height: 12px; }
.lot-panel-type-tranches { background: #E0F2E9; color: #1B4332; }
.lot-panel-type-bons_commande { background: #DBEAFE; color: #1E40AF; }
.lot-panel-total {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ─── Content (tranches OU BC) ─────────────────────────────── */
.lot-content {
  padding: 10px 14px 14px;
  background: var(--surface);
}
.lot-content-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.lot-content-header > strong { font-size: 13px; }
.lot-content-actions {
  display: flex;
  gap: 6px;
}
.empty-tranche {
  padding: 16px;
  text-align: center;
  color: var(--ink-dim);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.col-date      { width: 130px; }
.col-date input { width: 125px !important; min-width: 125px !important; font-size: 12px !important; }
.col-delai     { width: 105px; }
.col-statut    { width: 130px; }
.col-statut select { width: 125px !important; min-width: 125px !important; }

/* v2.18.22 — règle .cell-delai unifiée plus bas (vers ligne 4156). */
.delai-input {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 4px 2px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box !important;  /* v2.18.17 — sinon 28px + border + padding = 34px réels */
}
.delai-input:focus {
  outline: 2px solid var(--c-forest);
  outline-offset: -1px;
  border-color: var(--c-forest);
}
.delai-sep {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 700;
  user-select: none;
  padding: 0;
}

/* ─── BC : cadre min/max ────────────────────────────────────── */
.bc-cadre {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.bc-cadre-field { display: flex; flex-direction: column; gap: 4px; }
.bc-cadre-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.bc-cadre-info { color: var(--ink-soft); }
.bc-engagement {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
}
.bc-cadre-detail {
  display: flex;
  gap: 24px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-size: 13px;
}

/* ─── Total marché travaux ──────────────────────────────────── */
.lots-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  font-size: 14px;
}
.lots-total > span { font-weight: 700; font-size: 16px; }

/* ─── Détail : carte par lot ────────────────────────────────── */
.lot-detail-card {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lot-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.lot-detail-code { font-family: var(--font-mono, monospace); font-size: 13px; }
.lot-detail-libelle { color: var(--ink); }
.lot-detail-spacer { flex: 1; }
.lot-detail-meta { color: var(--ink-soft); font-size: 12px; }

/* ─── Bouton extra-small ────────────────────────────────────── */
.btn-xs {
  padding: 3px 8px !important;
  font-size: 11px !important;
  gap: 3px !important;
}
.btn-xs svg { width: 11px !important; height: 11px !important; }
.lots-actions {
  display: flex;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════════
 * MODALE ÉVÉNEMENTS DE PHASE / TRANCHE / BC
 * ════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-body .form-field { margin-bottom: 14px; }
.modal-body .form-field:last-child { margin-bottom: 0; }
.modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.btn-danger {
  background: #DC2626;
  color: white;
  border: 1px solid #B91C1C;
}
.btn-danger:hover { background: #B91C1C; }

/* ════════════════════════════════════════════════════════════════
 * 2.6 · FIX DÉFINITIF inputs délai + structure phases par tranche
 * ════════════════════════════════════════════════════════════════ */

/* v2.18.22 — RÈGLE UNIQUE .cell-delai (les autres ont été supprimées plus haut).
   Contenu visé : [input mois 32] [sep m] [input jours 32] [sep j] [toggle cal/ouv 24]
   Total horizontal : 32 + 32 + 24 = 88 px de contrôles
                   + 3 gaps × 2 px = 6 px
                   + 2 séparateurs (~16 px)
                   + padding cellule 4×2 = 8 px
                   = 118 px max. Colonne Délai = 160 px → marge confortable de 42 px. */
.tranche-phase-row .cell-delai,
.lot-tranches-table td.cell-delai,
table .cell-delai {
  display: flex !important;
  align-items: center;
  gap: 2px;
  padding: 4px 4px !important;
  box-sizing: border-box;
  overflow: hidden;        /* sécurité : si malgré tout ça déborde, on coupe */
}

/* Inputs délai : largeur RÉELLE, flex-shrink 0 = ne se compressent jamais.
   v2.18.21 — Réduit de 38→32 px pour tenir dans une colonne Délai de 140 px
   avec le toggle calendaires/ouvrés (≈ 30 px). Sans ça, 2 inputs à 38 px
   débordaient sur la colonne « Fin prévue ». */
.tranche-phase-row .delai-input,
.cell-delai input.delai-input,
input.delai-input {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 28px !important;
  padding: 2px 4px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: ui-monospace, monospace !important;
  color: var(--ink, #1a1a1a) !important;
  background: white !important;
  border: 1px solid var(--border, #d1d5db) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
input.delai-input::-webkit-outer-spin-button,
input.delai-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.delai-input:focus {
  outline: 2px solid #2D6A4F !important;
  outline-offset: -1px !important;
  border-color: #2D6A4F !important;
  background: #F0FDF4 !important;
}
.delai-sep {
  font-size: 12px !important;
  color: var(--ink-soft, #6b7280) !important;
  font-weight: 700 !important;
  user-select: none;
  display: inline-block !important;
  min-width: 8px;
  text-align: center;
}

/* ─── PHASES DE TRANCHE : sous-tableau imbriqué ───────────── */
.tranche-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: white;
}
.tranche-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.tranche-card-header-input {
  height: 30px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  background: white !important;
  border: 1px solid var(--border, #d1d5db) !important;
  border-radius: 4px !important;
}
.tranche-card-code {
  width: 80px !important;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  text-align: center;
}
.tranche-card-libelle {
  flex: 1;
  min-width: 200px;
}
.tranche-card-montant {
  width: 140px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tranche-card-statut { width: 130px !important; }
.tranche-card-actions {
  display: flex;
  gap: 4px;
}

/* Sous-table des 4 phases */
.tranche-phases-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;   /* v2.18.13 — colonnes respectent leurs largeurs */
}
.tranche-phases-table thead {
  background: rgba(0, 0, 0, 0.02);
}
.tranche-phases-table th {
  padding: 6px 6px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tranche-phases-table td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  overflow: hidden;
}
/* v2.18.13 — les inputs/selects respectent la largeur de leur cellule */
.tranche-phases-table input[type="date"],
.tranche-phases-table input[type="text"],
.tranche-phases-table input.input-sm,
.tranche-phases-table select.input-sm,
.tranche-phases-table select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tranche-phases-table input[type="date"] {
  font-size: 12px !important;
  padding: 4px 4px !important;
}
.tranche-phases-table select.input-sm {
  padding: 4px 4px !important;
  font-size: 12px !important;
}
.tranche-phases-table tr:last-child td { border-bottom: none; }
.tranche-phase-row {
  transition: background 0.1s;
}
.tranche-phase-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Lots */
.lot-section { margin-bottom: 20px; }
.lot-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to right, #FEF3C7, #FFFBEB);
  border-left: 4px solid #F59E0B;
  border-radius: 4px;
  margin-bottom: 8px;
}
.lot-section-header-input {
  height: 28px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}
.lot-section-code {
  width: 90px !important;
  font-family: ui-monospace, monospace;
  font-weight: 700;
}
.lot-section-libelle { flex: 1; min-width: 200px; }

/* Toggle alloti */
.toggle-alloti {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-2, #f9fafb);
  border-radius: 6px;
  margin-bottom: 14px;
}
.toggle-alloti label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  margin: 0;
}

/* Timeline enrichie */
.timeline-rich {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1px;
  background: var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  max-height: 600px;
  overflow-y: auto;
}
.timeline-rich-label,
.timeline-rich-bar {
  background: white;
  padding: 6px 12px;
  font-size: 12px;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.timeline-rich-label {
  border-right: 1px solid var(--border, #e5e7eb);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-rich-label-phase { padding-left: 32px; color: var(--ink-soft, #6b7280); }
.timeline-rich-bar { position: relative; }
.timeline-rich-segment {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-rich-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #DC2626;
  z-index: 10;
}
.timeline-rich-today::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: #DC2626;
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════════
 * 2.7 · Phases tranche en array, libellés éditables, ajout/suppression
 * ════════════════════════════════════════════════════════════════ */

/* Libellé de phase éditable avec petit point coloré */
.tranche-phase-libelle-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tranche-phase-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  flex: 0 0 22px;
}
.tranche-phase-dot svg { width: 12px; height: 12px; }
.tranche-phase-libelle-input {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  height: 26px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  padding: 2px 6px !important;
}
.tranche-phase-libelle-input:hover,
.tranche-phase-libelle-input:focus {
  background: white !important;
  border-color: var(--border, #d1d5db) !important;
}

/* Ligne d'ajout de phase */
.tranche-phase-add-row td {
  background: rgba(0, 0, 0, 0.015);
  border-top: 1px dashed var(--border, #e5e7eb);
}
.btn-xs {
  font-size: 11px !important;
  padding: 3px 8px !important;
  height: 24px !important;
}

/* ════════════════════════════════════════════════════════════════
 * 2.8 · Resserrage spacing + couleurs MOE + lisibilité timeline
 * ════════════════════════════════════════════════════════════════ */

/* Resserrer les section-card et leurs marges */
.section-card { margin-bottom: 14px !important; padding: 12px 14px !important; }
.section-card + .section-card { margin-top: 0 !important; }
.section-header { margin-bottom: 8px !important; padding-bottom: 6px !important; }
.section-header h3 { font-size: 14px !important; }
.form-section { margin-bottom: 14px !important; padding: 12px 14px !important; }
.form-section + .form-section { margin-top: 0 !important; }
.form-field { margin-bottom: 4px !important; }
.form-field label { font-size: 11px !important; margin-bottom: 2px !important; }
.lots-section { padding-top: 8px !important; }
.lot-panel { margin-bottom: 10px !important; }
.lot-content { padding: 8px 0 !important; }
.lot-content-header { padding: 6px 0 !important; gap: 8px !important; }
.tranche-card { margin-bottom: 8px !important; }
.tranche-card-header { padding: 8px 10px !important; gap: 8px !important; }
.tranche-phases-table th { padding: 5px 4px !important; }
.tranche-phases-table td { padding: 5px 4px !important; }
.toggle-alloti { padding: 6px 12px !important; margin-bottom: 10px !important; }
.lots-total { padding: 10px 14px !important; margin-top: 10px !important; } /* pink (par défaut pour les missions custom) */

/* Timeline : groupe header (séparateur entre MOE et chaque lot) */
.timeline-rich-group-header {
  grid-column: 1 / -1;
  background: linear-gradient(to right, var(--accent-50, #F0FDF4), var(--accent-100, #ECFDF5));
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-700, #047857);
  border-bottom: 1px solid var(--border, #e5e7eb);
  border-top: 1px solid var(--border, #e5e7eb);
}
.timeline-rich-group-header-travaux {
  background: linear-gradient(to right, #FFFBEB, #FEF3C7);
  color: #92400E;
}

/* Texte du segment : si trop court, hors barre à droite */
.timeline-rich-segment {
  overflow: visible !important;
}
.timeline-rich-segment .segment-label-out {
  position: absolute;
  left: 100%;
  margin-left: 6px;
  white-space: nowrap;
  color: var(--ink, #1a1a1a);
  font-weight: 600;
  font-size: 10px;
  text-transform: lowercase;
}
.timeline-rich-segment .segment-label-in {
  display: block;
  padding: 0 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  font-weight: 700;
}

/* Alerte incohérence sur une ligne */
.row-incoherence {
  background: rgba(254, 226, 226, 0.4) !important;
}
.incoherence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

/* Drag handle (pour les missions MOE et phases tranche) */
.drag-handle {
  cursor: grab;
  color: var(--ink-soft, #9ca3af);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 3px;
}
.drag-handle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink, #1a1a1a);
}
.drag-handle:active { cursor: grabbing; }
.sortable-ghost {
  opacity: 0.4;
  background: var(--accent-100, #ECFDF5);
}
.sortable-chosen { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

/* Intervenants */
.intervenants-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.intervenants-table th {
  text-align: left; padding: 6px 10px; font-size: 10px; font-weight: 700;
  color: var(--ink-soft, #6b7280); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, #e5e7eb); background: rgba(0,0,0,0.02);
}
.intervenants-table td { padding: 5px 10px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
 * 2.9 · Texte lisible barres timeline + retard + toggle cal/ouvré
 * ════════════════════════════════════════════════════════════════ */

/* Texte sur barre : blanc avec ombre, lisible sur n'importe quelle couleur */
.timeline-rich-segment .segment-label-in {
  display: block;
  padding: 0 8px;
  color: white !important;
  font-weight: 700;
  font-size: 10px;
  text-transform: lowercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
               0 0 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px;
}
.timeline-rich-segment .segment-label-out {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  white-space: nowrap;
  color: var(--ink, #1a1a1a);
  font-weight: 600;
  font-size: 10px;
  text-transform: lowercase;
  z-index: 2;
}

/* Segment retard (rouge hachuré) */
.timeline-rich-segment-retard {
  background: repeating-linear-gradient(
    45deg,
    #DC2626 0,
    #DC2626 5px,
    #B91C1C 5px,
    #B91C1C 10px
  ) !important;
}
.timeline-rich-segment-retard .segment-label-out {
  color: #B91C1C !important;
  font-weight: 800;
}

/* Bouton toggle calendaire/ouvré dans la cellule délai */
.delai-mode-toggle {
  flex: 0 0 24px;
  width: 24px;
  height: 22px;
  margin-left: 2px;
  padding: 0 !important;
  font-size: 9px !important;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  border: 1px solid var(--border, #d1d5db) !important;
  border-radius: 3px;
  background: white;
  color: var(--ink-soft, #6b7280);
  cursor: pointer;
  transition: all 0.1s;
  box-sizing: border-box !important;  /* v2.18.17 */
}
.delai-mode-toggle.calendaires {
  background: #F3F4F6;
  color: #4B5563;
}
.delai-mode-toggle.ouvres {
  background: #FEF3C7;
  color: #92400E;
  border-color: #F59E0B !important;
}
.delai-mode-toggle:hover { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════════
 * 2.10 · Composition MOE + composition par lot
 * ════════════════════════════════════════════════════════════════ */
.composition-section {
  margin-top: 10px;
  padding: 10px;
  background: rgba(0,0,0,0.015);
  border-radius: 6px;
  border-left: 3px solid var(--accent-500, #10B981);
}
.composition-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.composition-header svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
 * 2.11 · Mini-timeline carte affaire + autres intervenants
 * ════════════════════════════════════════════════════════════════ */
.affaire-mini-timeline {
  position: relative;
  height: 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 7px;
  overflow: hidden;
  margin: 4px 0;
}
.affaire-mini-segment {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  opacity: 0.85;
  cursor: help;
}
.affaire-mini-segment:hover { opacity: 1; }
.affaire-mini-today {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #DC2626;
  z-index: 5;
}
.affaire-mini-today::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: #DC2626;
  border-radius: 50%;
}

/* Autres intervenants section */
.autres-intervenants-section {
  margin-top: 10px;
  padding: 10px;
  background: rgba(0,0,0,0.015);
  border-radius: 6px;
  border-left: 3px solid #6366F1;
}
.autres-intervenants-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.autres-intervenants-header svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
 * 2.12 · UNIFORMISATION mode sombre — fonds tableaux et cards
 * ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tranche-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .tranche-card-header { background: var(--surface-elevated) !important; border-color: var(--border) !important; }
[data-theme="dark"] .tranche-card-header-input { background: var(--bg) !important; border-color: var(--border) !important; color: var(--ink) !important; }
[data-theme="dark"] input.delai-input { background: var(--bg) !important; border-color: var(--border) !important; color: var(--ink) !important; }
[data-theme="dark"] input.delai-input:focus { background: var(--surface) !important; border-color: var(--accent-500, #2D6A4F) !important; }
[data-theme="dark"] .delai-mode-toggle { background: var(--surface-elevated) !important; border-color: var(--border) !important; color: var(--ink-soft) !important; }
[data-theme="dark"] .delai-mode-toggle.calendaires { background: var(--bg) !important; color: var(--ink-soft) !important; }
[data-theme="dark"] .delai-mode-toggle.ouvres { background: rgba(245, 158, 11, 0.15) !important; color: #FCD34D !important; border-color: #F59E0B !important; }
[data-theme="dark"] .tranche-phases-table thead { background: rgba(255, 255, 255, 0.03) !important; }
[data-theme="dark"] .tranche-phases-table td,
[data-theme="dark"] .tranche-phases-table th { border-color: var(--border) !important; color: var(--ink) !important; }
[data-theme="dark"] .tranche-phase-row:hover { background: rgba(255, 255, 255, 0.02) !important; }
[data-theme="dark"] .lot-section-header { background: linear-gradient(to right, rgba(245,158,11,0.15), rgba(245,158,11,0.05)) !important; border-left-color: #F59E0B !important; }
[data-theme="dark"] .lot-section-header-input { background: var(--bg) !important; border-color: var(--border) !important; color: var(--ink) !important; }
[data-theme="dark"] .toggle-alloti { background: var(--surface-elevated) !important; }
[data-theme="dark"] .toggle-alloti label { color: var(--ink) !important; }
[data-theme="dark"] .empty-tranche { background: var(--surface) !important; color: var(--ink-soft) !important; border-color: var(--border) !important; }
[data-theme="dark"] .lot-content { background: var(--surface) !important; }
[data-theme="dark"] .lot-panel { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .bc-cadre-detail { background: var(--surface-elevated) !important; color: var(--ink) !important; }
[data-theme="dark"] .lots-total { background: var(--surface-elevated) !important; color: var(--ink) !important; }
[data-theme="dark"] .phases-moe-table-wrap { background: var(--surface) !important; }
[data-theme="dark"] .phases-moe-table thead { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .phases-moe-table { color: var(--ink) !important; }
[data-theme="dark"] .phases-moe-table td,
[data-theme="dark"] .phases-moe-table th { border-color: var(--border) !important; }
[data-theme="dark"] .tranche-phase-libelle-input { color: var(--ink) !important; }
[data-theme="dark"] .tranche-phase-libelle-input:hover,
[data-theme="dark"] .tranche-phase-libelle-input:focus { background: var(--bg) !important; border-color: var(--border) !important; }
[data-theme="dark"] .composition-section,
[data-theme="dark"] .autres-intervenants-section { background: rgba(255,255,255,0.03) !important; }
[data-theme="dark"] .composition-lot-wrapper { background: rgba(255,255,255,0.02) !important; }
[data-theme="dark"] .timeline-rich-label-lot { background: rgba(245,158,11,0.18) !important; color: #FCD34D !important; }
[data-theme="dark"] .timeline-rich-label-moe { background: rgba(16,185,129,0.12) !important; }
[data-theme="dark"] .timeline-rich-label,
[data-theme="dark"] .timeline-rich-bar { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--border) !important; }
[data-theme="dark"] .timeline-rich-segment .segment-label-out { color: var(--ink) !important; }
[data-theme="dark"] .row-incoherence { background: rgba(220, 38, 38, 0.18) !important; }
[data-theme="dark"] .intervenants-table th { background: rgba(255,255,255,0.04) !important; color: var(--ink-soft) !important; }
[data-theme="dark"] .intervenants-table td { color: var(--ink) !important; }
[data-theme="dark"] .role-badge-titulaire    { background: rgba(34,197,94,0.18) !important; color: #86EFAC !important; }
[data-theme="dark"] .role-badge-mandataire   { background: rgba(59,130,246,0.18) !important; color: #93C5FD !important; }
[data-theme="dark"] .role-badge-co_traitant  { background: rgba(245,158,11,0.18) !important; color: #FCD34D !important; }
[data-theme="dark"] .role-badge-sous_traitant{ background: rgba(236,72,153,0.18) !important; color: #F9A8D4 !important; }
[data-theme="dark"] .role-badge-bet          { background: rgba(99,102,241,0.18) !important; color: #A5B4FC !important; }
[data-theme="dark"] .role-badge-autre        { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; }

/* ════════════════════════════════════════════════════════════════
 * 2.13 · Mode sombre + auto : surcharge des fonds via variables CSS
 * (Couvre les 3 modes : light / dark / auto avec préf. système)
 * ════════════════════════════════════════════════════════════════ */
.tranche-card,
.lot-content,
.lot-panel,
.lots-total,
.lot-content-header,
.lot-content-actions,
.empty-tranche,
.empty-lots,
.phases-moe-table-wrap,
.composition-section,
.autres-intervenants-section,
.composition-lot-wrapper,
.intervenants-table,
.bc-cadre-detail {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.toggle-alloti,
.tranche-card-header,
.tranche-phase-add-row td,
.bc-cadre,
.bc-cadre-field {
  background: var(--surface-elevated) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.tranche-phases-table {
  background: transparent !important;
}
.tranche-phases-table thead,
.intervenants-table thead {
  background: var(--surface-elevated) !important;
}
.tranche-phases-table thead th,
.intervenants-table thead th {
  color: var(--ink-soft) !important;
  border-color: var(--border) !important;
}
.tranche-phases-table td,
.tranche-phases-table th,
.intervenants-table td,
.intervenants-table th {
  border-color: var(--border) !important;
}
.tranche-phase-row:hover {
  background: var(--surface-elevated) !important;
}
.tranche-phase-libelle-input {
  color: var(--ink) !important;
}
.tranche-phase-libelle-input:hover,
.tranche-phase-libelle-input:focus {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.tranche-card-header-input,
.lot-section-header-input {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
input.delai-input {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
input.delai-input:focus {
  background: var(--surface) !important;
}
.delai-mode-toggle {
  background: var(--surface-elevated) !important;
  color: var(--ink-soft) !important;
  border-color: var(--border) !important;
}
.delai-mode-toggle.ouvres {
  background: rgba(245,158,11,0.18) !important;
  color: #B45309 !important;
  border-color: #F59E0B !important;
}
[data-theme="dark"] .delai-mode-toggle.ouvres,
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .delai-mode-toggle.ouvres {
    color: #FCD34D !important;
  }
}
.timeline-rich-label,
.timeline-rich-bar {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .timeline-rich-label-lot,
[data-theme="dark"] .timeline-rich-label-moe {
  color: #FCD34D !important;
}

/* Lot section header (bandeau ambre) — fond adapté */
.lot-section-header {
  background: rgba(245,158,11,0.10) !important;
  border-left: 4px solid #F59E0B !important;
  color: var(--ink) !important;
}

/* Phases MOE table */
.phases-moe-table {
  color: var(--ink) !important;
}
.phases-moe-table thead {
  background: var(--surface-elevated) !important;
}
.phases-moe-table td,
.phases-moe-table th {
  border-color: var(--border) !important;
}

/* Composition / autres intervenants : fond subtilement teinté */
.composition-section { border-left: 3px solid var(--accent-500, #10B981); }
.autres-intervenants-section { border-left: 3px solid #6366F1; }

/* Modale composition lot */
.modal-overlay { background: rgba(0,0,0,0.5); }
.modal-panel {
  background: var(--surface-elevated) !important;
  color: var(--ink) !important;
}
.modal-panel input, .modal-panel select {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* ════════════════════════════════════════════════════════════════
 * 2.13 · OS (Ordres de service)
 * ════════════════════════════════════════════════════════════════ */
.os-table { width: 100%; border-collapse: collapse; }
.os-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 8px 10px; text-align: left; }
.os-table td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.os-table tbody tr:hover { background: var(--surface-elevated); }

.badge-statut {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

[data-theme="dark"] .os-statut-brouillon          { color: #D1D5DB; }
[data-theme="dark"] .os-statut-signe_moe          { color: #A5B4FC; }
[data-theme="dark"] .os-statut-signe_moa          { color: #93C5FD; }
[data-theme="dark"] .os-statut-notifie            { color: #FCD34D; }
[data-theme="dark"] .os-statut-signe_titulaire    { color: #86EFAC; }
[data-theme="dark"] .os-statut-signe_avec_reserve { color: #F9A8D4; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 12px;
  padding: 6px 0;
}
.multi-check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.multi-check-row:hover { background: var(--surface-elevated); }
.multi-check-row input[type="checkbox"] { margin: 0; }

.os-modal h4 { margin: 14px 0 6px; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.os-modal textarea.input { font-family: var(--font-base); resize: vertical; min-height: 60px; }
.os-modal .os-file-zone input[type="file"] {
  background: var(--bg); color: var(--ink);
  border: 1px dashed var(--border-strong);
  border-radius: 6px; padding: 10px;
  width: 100%; cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
 * 2.14 · Composition lot inline + OS frise + OS détail phases
 * ════════════════════════════════════════════════════════════════ */

/* Composition lot inline */
.lot-composition-inline {
  margin: 8px 14px;
  padding: 10px 12px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid #6366F1;
  border-radius: 6px;
}
.lot-composition-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.lot-composition-header svg { width: 14px; height: 14px; }

/* Marqueurs OS sur la frise temporelle (jalons au-dessus des barres) */
.frise-os-marker {
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: help;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border: 1.5px solid var(--surface);
  margin-left: -9px;
}
.frise-os-marker svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}
.frise-os-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(139, 92, 246, 0.18);
  color: #6D28D9;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

/* Marqueurs d'événements de phase sur la frise (RAPPEL, AJOURNEMENT, PROLONGATION, FIN_PHASE)
   — positionnés DANS la barre (par rapport au segment), au-dessus du segment coloré.
   Les marqueurs OS (.frise-os-marker) restent au-dessus (top:-10px). */
.frise-evt-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: help;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  border: 1.5px solid var(--surface, #fff);
}
.frise-evt-marker svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.5;
}
/* Événement issu d'un OS : liseré pointillé pour le distinguer d'un événement saisi à la main */
.frise-evt-marker.from-os {
  border-style: dashed;
  border-width: 2px;
}

/* Barre horizontale de suspension : zone grisée sous le segment, sur toute la durée
   de la suspension (date_debut → date_fin, ou jusqu'à aujourd'hui si encore ouverte). */
.frise-evt-suspension {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: repeating-linear-gradient(
    45deg,
    rgba(176, 125, 43, 0.22),
    rgba(176, 125, 43, 0.22) 5px,
    rgba(176, 125, 43, 0.10) 5px,
    rgba(176, 125, 43, 0.10) 10px
  );
  border: 1px solid rgba(176, 125, 43, 0.55);
  border-radius: 3px;
  z-index: 3;
  cursor: help;
  pointer-events: auto;
}
[data-theme="dark"] .frise-evt-marker {
  border-color: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
[data-theme="dark"] .frise-evt-suspension {
  background: repeating-linear-gradient(
    45deg,
    rgba(212, 165, 80, 0.28),
    rgba(212, 165, 80, 0.28) 5px,
    rgba(212, 165, 80, 0.12) 5px,
    rgba(212, 165, 80, 0.12) 10px
  );
  border-color: rgba(212, 165, 80, 0.55);
}
[data-theme="dark"] .frise-os-count,
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .frise-os-count { color: #C4B5FD; }
}

/* ════════════════════════════════════════════════════════════════
 * 2.16 · Finance navigation par onglets + indicateur sauvegarde
 * ════════════════════════════════════════════════════════════════ */
.finance-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
  padding: 4px;
  background: var(--surface-elevated);
  border-radius: 8px;
}
.finance-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.15s;
}
.finance-tab:hover {
  background: var(--surface);
  color: var(--ink);
}
.finance-tab.active {
  background: var(--accent-500, #2D6A4F);
  color: white;
}
.finance-tab.active:hover { background: var(--accent-500, #2D6A4F); }
.finance-tab svg { width: 14px; height: 14px; }

/* Indicateur sauvegarde dans la section synthèse */
.save-indicator {
  font-size: 12px;
  font-weight: 500;
  transition: opacity 0.2s;
  min-width: 110px;
  text-align: right;
}
.save-indicator.saving { color: var(--ink-soft); }
.save-indicator.saved {
  color: #16A34A;
  animation: saveFade 1.8s ease-out;
}
.save-indicator.error {
  color: #DC2626;
  font-weight: 600;
}
@keyframes saveFade {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   v2.18 — Module Événements (refonte motif primaire)
   ════════════════════════════════════════════════════════════════ */

/* Sous-chapitre événement sous une phase / tranche / BC */
.evt-sub-tr > td { background: var(--surface-soft, #FAFAF7); }
[data-theme="dark"] .evt-sub-tr > td { background: rgba(255,255,255,0.025); }
.evt-li .btn-icon-xs {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  border: 0.5px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.evt-li .btn-icon-xs:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.evt-li .btn-icon-xs svg { width: 12px; height: 12px; }
.evt-li .btn-icon-danger:hover { color: #DC2626; border-color: #DC262655; }

/* Modale v2 — radio groups */
.modal-overlay-evt-v2 .evt-radio-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.modal-overlay-evt-v2 .evt-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.modal-overlay-evt-v2 .evt-radio:hover {
  background: var(--surface-soft);
  color: var(--ink);
}
.modal-overlay-evt-v2 .evt-radio input { display: none; }
.modal-overlay-evt-v2 .evt-radio.on {
  background: #E1F5EE;
  color: #0F6E56;
  border-color: #1D9E75;
  font-weight: 500;
}
[data-theme="dark"] .modal-overlay-evt-v2 .evt-radio.on {
  background: rgba(29, 158, 117, 0.18);
  color: #6CCBA8;
  border-color: #1D9E75;
}
.modal-overlay-evt-v2 .input-readonly {
  background: var(--surface-soft, #F5F5F0);
  color: var(--ink-soft);
}
[data-theme="dark"] .modal-overlay-evt-v2 .input-readonly {
  background: rgba(255,255,255,0.04);
}

/* Badge soft pour info latérale (ex. lien OS dans événement) */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--surface-soft, rgba(0,0,0,0.04));
  color: var(--ink-soft);
  font-size: 11px;
  border: 0.5px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════
   v2.18.1 — Module Événements refonte design (conforme mockup)
   ════════════════════════════════════════════════════════════════ */

/* Sous-bloc Événements ultra-compact en vue détail (LECTURE SEULE) */
.evt-sub-block {
  margin: 2px 16px 2px 16px;
  padding: 4px 10px;
  background: var(--surface-soft, rgba(0,0,0,0.025));
  border-left: 2px solid var(--border);
  border-radius: 3px;
  font-size: 11.5px;
}
[data-theme="dark"] .evt-sub-block {
  background: rgba(255,255,255,0.025);
}
.evt-sub-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.evt-sub-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.4;
}
.evt-sub-item + .evt-sub-item { border-top: 0.5px dashed var(--border); }
.evt-sub-pin {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.evt-sub-motif { font-weight: 500; color: var(--ink); }
.evt-sub-dest { color: var(--ink-soft); font-size: 11px; }
.evt-sub-dest::before { content: "— "; opacity: 0.6; }
.evt-sub-spacer { flex: 1; }
.evt-sub-period { color: var(--ink-soft); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evt-sub-os-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  background: rgba(29, 158, 117, 0.08);
  color: #0F6E56;
  border: 0.5px solid rgba(29, 158, 117, 0.3);
  white-space: nowrap;
}
.evt-sub-os-badge svg { width: 9px; height: 9px; }
[data-theme="dark"] .evt-sub-os-badge {
  background: rgba(29, 158, 117, 0.18);
  color: #6CCBA8;
  border-color: rgba(29, 158, 117, 0.4);
}

/* Badge ⚠ visible sur le header de tranche */
.tranche-card-header .badge-soft {
  background: rgba(176, 125, 43, 0.12);
  color: #8A5E18;
  border-color: rgba(176, 125, 43, 0.4);
  font-weight: 500;
}
[data-theme="dark"] .tranche-card-header .badge-soft {
  background: rgba(186, 117, 23, 0.25);
  color: #FAC775;
  border-color: rgba(186, 117, 23, 0.5);
}

/* Frise — événements colorés par motif */
.frise-evt-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 3;
  cursor: help;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.frise-evt-marker svg { width: 7px; height: 7px; stroke-width: 3; }
[data-theme="dark"] .frise-evt-marker { border-color: var(--surface-strong, #1F1F1F); }

.frise-evt-suspension {
  position: absolute;
  top: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    var(--evt-color, #B07D2B) 0,
    var(--evt-color, #B07D2B) 3px,
    transparent 3px,
    transparent 7px
  );
  background-color: color-mix(in srgb, var(--evt-color, #B07D2B) 12%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--evt-color, #B07D2B) 50%, transparent);
  border-radius: 2px;
  z-index: 2;
  pointer-events: auto;
  cursor: help;
}

/* Checkbox dans la modale événement (pour le motif AUTRE) */
.modal-overlay-evt-v2 .evt-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  padding: 6px 8px;
  background: var(--surface-soft);
  border-radius: 4px;
  border: 0.5px solid var(--border);
}
.modal-overlay-evt-v2 .evt-checkbox input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.2 — Section Événements dans Modifier (CRUD)
   ════════════════════════════════════════════════════════════════ */
.evt-edit-table {
  width: 100%;
  font-size: 12px;
}
.evt-edit-table th {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.evt-edit-table td {
  padding: 6px 8px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}
.evt-edit-table tr.evt-edit-group td {
  background: var(--surface-soft);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.evt-edit-table tr.evt-edit-group strong { color: var(--ink); font-weight: 600; }
.evt-edit-pin {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}
.evt-edit-os-linked {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  border-radius: 10px;
  background: rgba(29, 158, 117, 0.08);
  color: #0F6E56;
  border: 0.5px solid rgba(29, 158, 117, 0.3);
}
[data-theme="dark"] .evt-edit-os-linked {
  background: rgba(29, 158, 117, 0.18);
  color: #6CCBA8;
}
.btn-link-mini {
  background: transparent;
  border: 0.5px dashed var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-link-mini:hover {
  background: var(--surface);
  border-style: solid;
  color: var(--ink);
}

/* v2.18.3 — Badge groupement dans la table Événements de Modifier */
.evt-edit-grp-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: rgba(125, 75, 190, 0.10);
  color: #5B2E89;
  border: 0.5px solid rgba(125, 75, 190, 0.30);
  font-weight: 500;
}
[data-theme="dark"] .evt-edit-grp-badge {
  background: rgba(168, 122, 230, 0.18);
  color: #C9A4F3;
  border-color: rgba(168, 122, 230, 0.4);
}

/* ════════════════════════════════════════════════════════════════
   v2.18.4 — Frise : extension hachurée pour prolongations + modales draggables
   ════════════════════════════════════════════════════════════════ */

/* Extension hachurée bleue (prolongations/suspensions/intempéries) */
.timeline-rich-segment-extension {
  position: absolute;
  top: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(37, 99, 235, 0.55) 0,
    rgba(37, 99, 235, 0.55) 4px,
    transparent 4px,
    transparent 9px
  );
  background-color: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 2px;
  z-index: 1;
}
.timeline-rich-segment-extension .segment-label-out {
  color: #1E40AF;
  font-weight: 600;
  font-size: 10px;
  padding-left: 4px;
}
[data-theme="dark"] .timeline-rich-segment-extension {
  background-color: rgba(96, 165, 250, 0.22);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(96, 165, 250, 0.55) 0,
    rgba(96, 165, 250, 0.55) 4px,
    transparent 4px,
    transparent 9px
  );
  border-color: rgba(96, 165, 250, 0.5);
}
[data-theme="dark"] .timeline-rich-segment-extension .segment-label-out {
  color: #93C5FD;
}

/* Modales : header draggable */
.modal-header-draggable {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}
.modal-header-draggable::after {
  content: "⋮⋮";
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  opacity: 0.4;
  font-size: 12px;
  letter-spacing: -2px;
  pointer-events: none;
}
.modal-card {
  transition: transform 0.05s linear;
}

/* Champ readonly : style distinctif pour ne pas paraître éditable */
.input-readonly {
  background: var(--surface-soft) !important;
  color: var(--ink-soft) !important;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.4 — Bandes de durée d'événements sur la frise
   ════════════════════════════════════════════════════════════════ */
/* Bande pleine pour PROLONGATION / AJOURNEMENT-avec-durée / AUTRE-forcé.
   Positionnée au-dessus du segment principal, en hauteur réduite, pour
   visualiser clairement la durée de la prolongation. */
.frise-evt-bande {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 3px;
  opacity: 0.85;
  border: 1px solid rgba(0, 0, 0, 0.15);
  z-index: 2;
  cursor: help;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .frise-evt-bande {
  border-color: rgba(255, 255, 255, 0.2);
}
/* Style spécifique prolongation : barre pleine, opacité haute, contour net */
.frise-evt-bande-prolongation {
  opacity: 0.9;
}

/* v2.18.5 — Jalon ✓ pour fin réelle de phase sur la frise */
.timeline-rich-jalon-fin-reelle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 14px;
  margin-left: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: auto;
  cursor: help;
}
.timeline-rich-jalon-fin-reelle::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 6px;
  width: 2px;
  background: #0F6E56;
  border-radius: 1px;
}
.timeline-rich-jalon-fin-reelle .jalon-checkmark {
  position: relative;
  width: 14px;
  height: 14px;
  background: #0F6E56;
  color: #FFF;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  font-weight: 700;
  border: 1.5px solid #FFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="dark"] .timeline-rich-jalon-fin-reelle::before { background: #6CCBA8; }
[data-theme="dark"] .timeline-rich-jalon-fin-reelle .jalon-checkmark {
  background: #6CCBA8;
  color: #0F2E22;
  border-color: var(--surface-strong, #1F1F1F);
}

/* ════════════════════════════════════════════════════════════════
 * VÉRIFICATION DES CALCULS SITUATION (v2.18.23 - maquette A)
 * ════════════════════════════════════════════════════════════════ */

/* ─── Badge statut situation ─── */
.badge-sit-statut {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ─── Header de la vue vérif ─── */
.sit-verif {
  margin-bottom: 10px;
}
.sit-verif-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.sit-verif-h-left { flex: 1; min-width: 0; }
.sit-verif-h-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.sit-verif-h-sub   { font-size: 11.5px; color: var(--ink-soft); }
.sit-verif-h-right { flex-shrink: 0; }
.sit-verif-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}
.sit-verif-pill i { width: 14px; height: 14px; }
.sit-verif-pill.ok    { background: rgba(59, 109, 17, 0.12); color: #3B6D11; }
.sit-verif-pill.warn  { background: rgba(186, 117, 23, 0.14); color: #8B5306; }
.sit-verif-pill.error { background: rgba(163, 45, 45, 0.14); color: #A32D2D; }
[data-theme="dark"] .sit-verif-pill.ok    { background: rgba(96, 175, 36, 0.16); color: #B0D77A; }
[data-theme="dark"] .sit-verif-pill.warn  { background: rgba(239, 159, 39, 0.18); color: #F6BE6A; }
[data-theme="dark"] .sit-verif-pill.error { background: rgba(226, 75, 74, 0.18); color: #F09595; }

.sit-verif-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 8px 14px 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.sit-verif-kpis b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── Bandeau d'anomalies ─── */
.sit-verif-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 10px;
}
.sit-verif-banner i { flex-shrink: 0; width: 18px; height: 18px; }
.sit-verif-banner.warn  { background: rgba(239, 159, 39, 0.10); color: #8B5306; border-left: 3px solid #BA7517; }
.sit-verif-banner.error { background: rgba(226, 75, 74, 0.10); color: #A32D2D; border-left: 3px solid #A32D2D; }
[data-theme="dark"] .sit-verif-banner.warn  { background: rgba(239, 159, 39, 0.13); color: #F6BE6A; }
[data-theme="dark"] .sit-verif-banner.error { background: rgba(226, 75, 74, 0.14); color: #F09595; }

/* ─── Tableau dense ─── */
.sit-verif-table-wrap {
  overflow-x: auto;
  padding: 0 4px;
}
.sit-verif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sit-verif-table th {
  background: var(--surface-soft);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding: 6px 5px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}
.sit-verif-table th.l { text-align: left; }
.sit-verif-table th.c { text-align: center; }
.sit-verif-table td {
  padding: 5px 5px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  text-align: right;
  white-space: nowrap;
}
.sit-verif-table td.l { text-align: left; white-space: normal; }
.sit-verif-table td.c { text-align: center; }
.sit-verif-table tr.chap td {
  background: var(--surface-soft);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 6px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
}
.sit-verif-table tr.chap-total td {
  background: rgba(0, 0, 0, 0.02);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding: 4px 5px;
}
.sit-verif-table tr.grand-total td {
  background: var(--surface-soft);
  border-top: 2px solid var(--ink-soft);
  font-size: 12.5px;
  padding: 8px 5px;
}
[data-theme="dark"] .sit-verif-table tr.chap-total td { background: rgba(255, 255, 255, 0.03); }

/* Cellule cumul M-1 verrouillée (hachures) */
.sit-verif-table td.lock {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    rgba(0, 0, 0, 0.04) 4px 5px
  );
  color: var(--ink-soft);
}
[data-theme="dark"] .sit-verif-table td.lock {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    rgba(255, 255, 255, 0.04) 4px 5px
  );
}

/* Cellule de saisie cumul M */
.sit-verif-table td.cellinput {
  padding: 2px 4px;
}
.sit-cumul-input {
  width: 100%;
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  font-size: 11.5px;
  background: rgba(55, 138, 221, 0.08);
  color: var(--info, #185FA5);
  font-weight: 500;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.sit-cumul-input:focus {
  outline: none;
  background: rgba(55, 138, 221, 0.14);
  border-color: rgba(55, 138, 221, 0.4);
}
.sit-cumul-input:disabled {
  background: transparent;
  color: var(--ink-soft);
  cursor: not-allowed;
}
[data-theme="dark"] .sit-cumul-input {
  background: rgba(133, 183, 235, 0.10);
  color: #B5D4F4;
}
[data-theme="dark"] .sit-cumul-input:focus {
  background: rgba(133, 183, 235, 0.18);
  border-color: rgba(133, 183, 235, 0.5);
}

/* Cellules d'erreur sur montant cumul (uniquement DECREASING désormais) */
.sit-verif-table td.cellerr {
  background: rgba(226, 75, 74, 0.13);
  color: #A32D2D;
  font-weight: 600;
  cursor: help;
}
[data-theme="dark"] .sit-verif-table td.cellerr { background: rgba(226, 75, 74, 0.22); color: #F09595; }

/* Cellule % avancement : ambre > 80 %, rouge > 100 % */
.sit-verif-table td.pct-near {
  background: rgba(239, 159, 39, 0.14);
  color: #8B5306;
  font-weight: 600;
}
.sit-verif-table td.pct-over {
  background: rgba(226, 75, 74, 0.13);
  color: #A32D2D;
  font-weight: 600;
}
[data-theme="dark"] .sit-verif-table td.pct-near { background: rgba(239, 159, 39, 0.20); color: #F6BE6A; }
[data-theme="dark"] .sit-verif-table td.pct-over { background: rgba(226, 75, 74, 0.22); color: #F09595; }

/* ─── Barre d'actions en bas ─── */
.sit-verif-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.sit-act-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sit-act-danger {
  color: #A32D2D;
  border-color: rgba(163, 45, 45, 0.35);
}
.sit-act-danger:hover {
  background: rgba(226, 75, 74, 0.06);
}
[data-theme="dark"] .sit-act-danger {
  color: #F09595;
  border-color: rgba(240, 149, 149, 0.4);
}

/* Compactage colonnes : sur écran étroit on autorise le scroll horizontal */
@media (max-width: 1280px) {
  .sit-verif-table th, .sit-verif-table td { padding: 4px 3px; font-size: 11px; }
  .sit-verif-table th { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════
 * FRISE — Tranche conditionnelle non affermée (v2.18.25)
 * Affichée en "fantôme" pour distinguer de la TF et des TC affermées.
 * ════════════════════════════════════════════════════════════════ */

.timeline-rich-row-conditionnelle {
  opacity: 0.55;
}
.timeline-rich-row-conditionnelle .timeline-rich-segment {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    rgba(255, 255, 255, 0.18) 5px 6px
  );
}
.timeline-rich-tc-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(133, 79, 11, 0.18);
  color: #854F0B;
  margin-right: 4px;
  vertical-align: 1px;
}
[data-theme="dark"] .timeline-rich-tc-badge {
  background: rgba(250, 199, 117, 0.18);
  color: #FAC775;
}

/* ════════════════════════════════════════════════════════════════
 * ÉDITEUR DQE MARCHÉ (v2.18.26 — brique 6.2.1)
 * ════════════════════════════════════════════════════════════════ */

.dqe-editor {
  font-family: var(--font-sans);
}
.dqe-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border-color);
}
.dqe-h-titre {
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.dqe-h-titre strong { font-weight: 500; font-size: 14px; }

.dqe-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.06);
  color: var(--text-soft);
}
.dqe-pill.warn { background: rgba(239, 159, 39, 0.18); color: #8B5306; }
.dqe-pill.info { background: rgba(55, 138, 221, 0.15); color: #185FA5; }
[data-theme="dark"] .dqe-pill.warn { background: rgba(239, 159, 39, 0.20); color: #F6BE6A; }
[data-theme="dark"] .dqe-pill.info { background: rgba(133, 183, 235, 0.20); color: #85B7EB; }

.dqe-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 12px 14px 0;
  border-radius: 6px;
  font-size: 12px;
}
.dqe-banner.warn { background: rgba(239, 159, 39, 0.13); color: #8B5306; }
.dqe-banner.info { background: rgba(55, 138, 221, 0.13); color: #185FA5; }
[data-theme="dark"] .dqe-banner.warn { background: rgba(239, 159, 39, 0.22); color: #F6BE6A; }
[data-theme="dark"] .dqe-banner.info { background: rgba(133, 183, 235, 0.18); color: #85B7EB; }

.dqe-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px;
}
.dqe-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  font-size: 12px;
  border: 0.5px solid transparent;
}
[data-theme="dark"] .dqe-doc { background: rgba(255,255,255,0.04); }
.dqe-doc.ok {
  background: rgba(99, 153, 34, 0.10);
  color: #27500A;
}
[data-theme="dark"] .dqe-doc.ok { background: rgba(151, 196, 89, 0.13); color: #C0DD97; }
.dqe-doc.empty {
  color: var(--text-soft);
  cursor: pointer;
  border-style: dashed;
  border-color: rgba(0,0,0,0.20);
}
.dqe-doc.empty:hover { background: rgba(0,0,0,0.06); }
[data-theme="dark"] .dqe-doc.empty { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .dqe-doc.empty:hover { background: rgba(255,255,255,0.06); }
.dqe-doc-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dqe-doc-meta { color: var(--text-soft); font-size: 10.5px; }
.dqe-doc-x {
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--text-soft);
  border-radius: 3px;
}
.dqe-doc-x:hover { background: rgba(0,0,0,0.08); color: #A32D2D; }
[data-theme="dark"] .dqe-doc-x:hover { background: rgba(255,255,255,0.08); color: #F09595; }

.dqe-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}
.dqe-atter-select {
  font-size: 12px;
  padding: 4px 8px;
  max-width: 180px;
}
.dqe-soon {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(239, 159, 39, 0.20);
  color: #8B5306;
  vertical-align: 1px;
}
[data-theme="dark"] .dqe-soon { background: rgba(239, 159, 39, 0.25); color: #F6BE6A; }

.dqe-kpis {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 14px;
  font-size: 12px;
}
.dqe-kpis b { font-weight: 500; font-variant-numeric: tabular-nums; }
.dqe-delta-pos { color: #BA7517; font-weight: 500; }
.dqe-delta-neg { color: #3B6D11; font-weight: 500; }
[data-theme="dark"] .dqe-delta-pos { color: #EF9F27; }
[data-theme="dark"] .dqe-delta-neg { color: #97C459; }

.dqe-tbl-wrap {
  border-top: 0.5px solid var(--border-color);
  overflow-x: auto;
}
.dqe-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.dqe-tbl thead tr.dqe-group-h th {
  font-size: 10px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.04);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-bottom: 0.5px solid var(--border-color);
}
.dqe-tbl thead tr.dqe-group-h th.dqe-grp-marche {
  background: rgba(55, 138, 221, 0.10);
  color: #185FA5;
}
.dqe-tbl thead tr.dqe-group-h th.dqe-grp-atter {
  background: rgba(99, 153, 34, 0.10);
  color: #3B6D11;
}
[data-theme="dark"] .dqe-tbl thead tr.dqe-group-h th.dqe-grp-marche { background: rgba(133, 183, 235, 0.13); color: #85B7EB; }
[data-theme="dark"] .dqe-tbl thead tr.dqe-group-h th.dqe-grp-atter  { background: rgba(151, 196, 89, 0.13); color: #97C459; }
.dqe-tbl thead tr.dqe-cols-h th {
  background: rgba(0,0,0,0.03);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 5px 4px;
  text-align: right;
  border-bottom: 0.5px solid var(--border-color);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dqe-tbl thead tr.dqe-cols-h th.l { text-align: left; }
.dqe-tbl thead tr.dqe-cols-h th.c { text-align: center; }
[data-theme="dark"] .dqe-tbl thead tr.dqe-cols-h th { background: rgba(255,255,255,0.04); }

.dqe-tbl td {
  padding: 4px 4px;
  border-bottom: 0.5px solid var(--border-color);
  text-align: right;
}
.dqe-tbl td.l { text-align: left; }
.dqe-tbl td.c { text-align: center; }
.dqe-tbl td.r { text-align: right; }
.dqe-tbl tr.dqe-chap td {
  background: rgba(55, 138, 221, 0.10);
  padding: 0;
}
[data-theme="dark"] .dqe-tbl tr.dqe-chap td { background: rgba(133, 183, 235, 0.13); }
.dqe-chap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.dqe-chap-code {
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 6px;
  width: 64px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #185FA5;
  font-family: var(--font-sans);
}
.dqe-chap-libelle {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #185FA5;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  min-width: 0;
}
[data-theme="dark"] .dqe-chap-code,
[data-theme="dark"] .dqe-chap-libelle { color: #85B7EB; }
.dqe-chap-code:focus, .dqe-chap-libelle:focus {
  outline: none;
  background: rgba(255,255,255,0.7);
  border-color: rgba(55, 138, 221, 0.55);
}
[data-theme="dark"] .dqe-chap-code:focus,
[data-theme="dark"] .dqe-chap-libelle:focus {
  background: rgba(0,0,0,0.35);
  border-color: rgba(133, 183, 235, 0.55);
}
.dqe-chap-add-line {
  background: rgba(255,255,255,0.6);
  border: 0.5px solid rgba(55, 138, 221, 0.30);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  color: #185FA5;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
}
.dqe-chap-add-line i { width: 13px; height: 13px; }
.dqe-chap-add-line:hover { background: rgba(255,255,255,0.95); }
[data-theme="dark"] .dqe-chap-add-line {
  background: rgba(255,255,255,0.06);
  border-color: rgba(133, 183, 235, 0.30);
  color: #85B7EB;
}
[data-theme="dark"] .dqe-chap-add-line:hover { background: rgba(255,255,255,0.12); }

/* Sous-totaux de chapitre (v2.18.29) */
.dqe-tbl tr.dqe-chap-st td {
  background: rgba(0,0,0,0.025);
  font-size: 11px;
  padding: 5px 6px;
  border-bottom: 0.5px solid var(--border-color);
  color: var(--text-soft);
  font-weight: 500;
}
.dqe-tbl tr.dqe-chap-st td.l {
  text-align: right;
  padding-right: 14px;
  font-style: italic;
}
.dqe-tbl tr.dqe-chap-st td.mono {
  color: var(--text-primary);
  font-weight: 500;
}
[data-theme="dark"] .dqe-tbl tr.dqe-chap-st td { background: rgba(255,255,255,0.035); }

.dqe-inp {
  font-size: 11.5px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  width: 100%;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dqe-inp.right { text-align: right; }
.dqe-inp:focus {
  outline: none;
  background: rgba(55, 138, 221, 0.10);
  border-color: rgba(55, 138, 221, 0.45);
}
[data-theme="dark"] .dqe-inp:focus {
  background: rgba(133, 183, 235, 0.13);
  border-color: rgba(133, 183, 235, 0.50);
}
.dqe-inp.lock {
  background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0,0,0,0.04) 4px 5px);
  color: var(--text-soft);
  cursor: not-allowed;
}
[data-theme="dark"] .dqe-inp.lock {
  background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255,255,255,0.05) 4px 5px);
}

.dqe-cell-atter {
  background: rgba(99, 153, 34, 0.05);
}
[data-theme="dark"] .dqe-cell-atter {
  background: rgba(151, 196, 89, 0.06);
}

.dqe-flag td {
  background: rgba(239, 159, 39, 0.13) !important;
}
[data-theme="dark"] .dqe-flag td { background: rgba(239, 159, 39, 0.18) !important; }
.dqe-flag-ico {
  color: #BA7517;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 2px;
}
[data-theme="dark"] .dqe-flag-ico { color: #EF9F27; }

.dqe-row-actions { display: flex; gap: 2px; justify-content: center; }
.dqe-icon-btn {
  padding: 3px 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
  border-radius: 3px;
}
.dqe-icon-btn:hover { background: rgba(0,0,0,0.07); color: var(--text-primary); }
[data-theme="dark"] .dqe-icon-btn:hover { background: rgba(255,255,255,0.08); }

/* DQE toast de progression (v2.18.27) */
.dqe-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 14px;
  background: rgba(55, 138, 221, 0.12);
  color: #185FA5;
  border-radius: 6px;
  font-size: 12.5px;
}
[data-theme="dark"] .dqe-toast {
  background: rgba(133, 183, 235, 0.18);
  color: #85B7EB;
}
.dqe-toast .spin {
  animation: spin 1s linear infinite;
  width: 16px;
  height: 16px;
}
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* ════════════════════════════════════════════════════════════════
 * Modale d'import xlsx du DQE (v2.18.28)
 * ════════════════════════════════════════════════════════════════ */
.dqe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  font-family: var(--font-sans);
}
.dqe-modal {
  background: var(--bg-primary, #fff);
  border-radius: 10px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  border: 0.5px solid var(--border-color);
}
[data-theme="dark"] .dqe-modal { background: var(--bg-elevated, #1f1f1f); }

.dqe-modal-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--border-color);
}
.dqe-modal-h h3 {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  margin: 0;
}
.dqe-modal-h i[data-lucide] { width: 18px; height: 18px; color: var(--text-soft); }
.dqe-modal-close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-soft);
  border-radius: 4px;
}
.dqe-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
[data-theme="dark"] .dqe-modal-close:hover { background: rgba(255,255,255,0.08); }

.dqe-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.dqe-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dqe-modal-label {
  font-size: 12px;
  color: var(--text-soft);
  width: 100px;
  flex-shrink: 0;
}
.dqe-modal-row select, .dqe-modal-row input {
  font-size: 12px;
  padding: 5px 8px;
  border: 0.5px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}
[data-theme="dark"] .dqe-modal-row select,
[data-theme="dark"] .dqe-modal-row input { background: rgba(255,255,255,0.04); }
.dqe-modal-row select { min-width: 240px; max-width: 340px; }
.dqe-modal-meta {
  font-size: 11px;
  color: var(--text-soft);
  font-style: italic;
}

.dqe-modal-mapping {
  margin: 14px 0 12px;
  padding: 12px 14px 8px;
  border: 0.5px solid var(--border-color);
  border-radius: 6px;
}
.dqe-modal-mapping legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  padding: 0 6px;
  font-weight: 500;
}
.dqe-modal-mapgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.dqe-modal-mapgrid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
}
.dqe-modal-mapgrid select {
  flex: 1;
  font-size: 11.5px;
  padding: 4px 6px;
  border: 0.5px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}
[data-theme="dark"] .dqe-modal-mapgrid select { background: rgba(255,255,255,0.04); }
.dqe-modal-hint {
  font-size: 11px;
  color: var(--text-soft);
  margin: 8px 0 0;
  font-style: italic;
}

.dqe-modal-preview-wrap { margin-top: 12px; }
.dqe-modal-preview-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.dqe-modal-preview-h strong { font-size: 12.5px; font-weight: 500; }
.dqe-modal-preview-h span { font-size: 11px; color: var(--text-soft); }
.dqe-modal-preview {
  border: 0.5px solid var(--border-color);
  border-radius: 4px;
  overflow-x: auto;
  background: var(--bg-primary, #fff);
}
[data-theme="dark"] .dqe-modal-preview { background: rgba(255,255,255,0.02); }
.dqe-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dqe-modal-table th {
  background: rgba(0,0,0,0.04);
  padding: 6px 8px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 0.5px solid var(--border-color);
  vertical-align: top;
}
[data-theme="dark"] .dqe-modal-table th { background: rgba(255,255,255,0.05); }
.dqe-modal-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--text-tertiary, var(--text-soft));
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.dqe-modal-table td {
  padding: 4px 8px;
  border-bottom: 0.5px solid var(--border-color);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dqe-modal-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  margin: 0;
}

.dqe-modal-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 0.5px solid var(--border-color);
  background: rgba(0,0,0,0.02);
}
[data-theme="dark"] .dqe-modal-foot { background: rgba(255,255,255,0.03); }
.dqe-modal-foot [data-meta] { font-size: 12px; color: var(--text-soft); }
.dqe-modal-foot button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* v2.18.30 — Réglage du seuil d'alerte avancement dans la barre KPIs */
.sit-verif-seuil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-soft);
  padding: 2px 8px;
  border: 0.5px solid var(--border-color);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
  cursor: help;
}
[data-theme="dark"] .sit-verif-seuil { background: rgba(255,255,255,0.03); }
.sit-verif-seuil input {
  width: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 4px;
  border: 0.5px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.sit-verif-seuil input::-webkit-outer-spin-button,
.sit-verif-seuil input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[data-theme="dark"] .sit-verif-seuil input { background: rgba(255,255,255,0.04); }

/* v2.18.30 — Modale édition rapide par colonne */
.dqe-qedit-tbl-wrap {
  border: 0.5px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-primary, #fff);
}
[data-theme="dark"] .dqe-qedit-tbl-wrap { background: rgba(255,255,255,0.02); }
.dqe-qedit-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.dqe-qedit-tbl th {
  background: rgba(0,0,0,0.04);
  padding: 6px 8px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 0.5px solid var(--border-color);
  position: sticky;
  top: 0;
}
.dqe-qedit-tbl th.r { text-align: right; }
.dqe-qedit-tbl th.l { text-align: left; }
[data-theme="dark"] .dqe-qedit-tbl th { background: rgba(255,255,255,0.05); }
.dqe-qedit-tbl td {
  padding: 4px 8px;
  border-bottom: 0.5px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dqe-qedit-tbl td.l { text-align: left; }
.dqe-qedit-tbl td.r { text-align: right; }
.dqe-qedit-tbl tr.dqe-qedit-chap td {
  background: rgba(55, 138, 221, 0.10);
  font-size: 11px;
  font-weight: 500;
  color: #185FA5;
  padding: 6px 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .dqe-qedit-tbl tr.dqe-qedit-chap td {
  background: rgba(133, 183, 235, 0.13);
  color: #85B7EB;
}
.dqe-qedit-inp {
  width: 100%;
  font-size: 11.5px;
  padding: 3px 6px;
  border: 0.5px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-primary, #fff);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dqe-qedit-inp.right { text-align: right; }
.dqe-qedit-inp:focus {
  outline: none;
  background: rgba(55, 138, 221, 0.08);
  border-color: rgba(55, 138, 221, 0.55);
}
[data-theme="dark"] .dqe-qedit-inp { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .dqe-qedit-inp:focus { background: rgba(133, 183, 235, 0.13); border-color: rgba(133, 183, 235, 0.55); }

/* v2.18.31 — Aperçu valeurs parsées dans la modale d'import */
.dqe-modal-parsed {
  display: block;
  font-size: 9.5px;
  color: var(--text-soft);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.dqe-modal-suspect {
  background: rgba(239, 159, 39, 0.15) !important;
  border-left: 2px solid #BA7517;
}
.dqe-modal-suspect .dqe-modal-parsed {
  color: #BA7517;
  font-weight: 500;
}
[data-theme="dark"] .dqe-modal-suspect { background: rgba(239, 159, 39, 0.20) !important; }
[data-theme="dark"] .dqe-modal-suspect .dqe-modal-parsed { color: #EF9F27; }

/* v2.18.32 — Colonnes atterrissage dans la vue vérif situation */
.sit-verif-table th.sit-th-atter {
  background: rgba(99, 153, 34, 0.10);
  color: #3B6D11;
  border-left: 0.5px solid rgba(99, 153, 34, 0.40);
}
.sit-verif-table td.sit-td-atter {
  background: rgba(99, 153, 34, 0.04);
  border-left: 0.5px solid rgba(99, 153, 34, 0.18);
}
.sit-verif-table td.sit-td-atter + td.sit-td-atter { border-left: none; }
[data-theme="dark"] .sit-verif-table th.sit-th-atter {
  background: rgba(151, 196, 89, 0.13);
  color: #97C459;
  border-left-color: rgba(151, 196, 89, 0.40);
}
[data-theme="dark"] .sit-verif-table td.sit-td-atter {
  background: rgba(151, 196, 89, 0.05);
  border-left-color: rgba(151, 196, 89, 0.20);
}

/* v2.18.33 — Modale d'aperçu extraction PDF (S6.2.2a) */
.dqe-pdfprev-stats {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 12px;
  color: var(--text-soft);
  padding: 8px 10px;
  background: rgba(0,0,0,0.025);
  border-radius: 6px;
  margin-bottom: 10px;
}
.dqe-pdfprev-stats b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.dqe-pdfprev-flag-stat { color: #8B5306; }
.dqe-pdfprev-flag-stat b { color: #8B5306; }
[data-theme="dark"] .dqe-pdfprev-stats { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .dqe-pdfprev-flag-stat,
[data-theme="dark"] .dqe-pdfprev-flag-stat b { color: #F6BE6A; }

.dqe-pdfprev-warnings {
  padding: 10px 12px;
  background: rgba(55, 138, 221, 0.08);
  border-left: 3px solid rgba(55, 138, 221, 0.45);
  border-radius: 4px;
  font-size: 11.5px;
  color: #185FA5;
  margin-bottom: 10px;
}
.dqe-pdfprev-warnings strong { font-weight: 500; }
.dqe-pdfprev-warnings ul { margin: 6px 0 0 18px; padding: 0; }
.dqe-pdfprev-warnings li { margin: 2px 0; }
[data-theme="dark"] .dqe-pdfprev-warnings {
  background: rgba(133, 183, 235, 0.13);
  border-left-color: rgba(133, 183, 235, 0.50);
  color: #85B7EB;
}

.dqe-pdfprev-tbl-wrap {
  border: 0.5px solid var(--border-color);
  border-radius: 4px;
  overflow: auto;
  max-height: 50vh;
  background: var(--bg-primary, #fff);
}
[data-theme="dark"] .dqe-pdfprev-tbl-wrap { background: rgba(255,255,255,0.02); }
.dqe-pdfprev-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.dqe-pdfprev-tbl th {
  background: rgba(0,0,0,0.04);
  padding: 5px 6px;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-soft);
  border-bottom: 0.5px solid var(--border-color);
  position: sticky;
  top: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dqe-pdfprev-tbl th.r { text-align: right; }
.dqe-pdfprev-tbl th.c { text-align: center; }
.dqe-pdfprev-tbl th.l { text-align: left; }
[data-theme="dark"] .dqe-pdfprev-tbl th { background: rgba(255,255,255,0.05); }
.dqe-pdfprev-tbl td {
  padding: 2px 4px;
  border-bottom: 0.5px solid var(--border-color);
}
.dqe-pdfprev-tbl td.r { text-align: right; }
.dqe-pdfprev-tbl td.c { text-align: center; }
.dqe-pdfprev-tbl td.l { text-align: left; }

.dqe-pdfprev-tbl tr.dqe-pdfprev-chap td {
  background: rgba(55, 138, 221, 0.10);
  font-size: 11px;
  font-weight: 500;
  color: #185FA5;
  padding: 5px 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .dqe-pdfprev-tbl tr.dqe-pdfprev-chap td {
  background: rgba(133, 183, 235, 0.13);
  color: #85B7EB;
}

.dqe-pdfprev-tbl tr.dqe-pdfprev-flagged td {
  background: rgba(239, 159, 39, 0.10);
}
.dqe-pdfprev-tbl tr.dqe-pdfprev-flagged td.l:first-child {
  border-left: 2px solid #BA7517;
}
[data-theme="dark"] .dqe-pdfprev-tbl tr.dqe-pdfprev-flagged td {
  background: rgba(239, 159, 39, 0.16);
}

.dqe-pdfprev-inp {
  width: 100%;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.dqe-pdfprev-inp.right { text-align: right; }
.dqe-pdfprev-inp:focus {
  outline: none;
  background: var(--bg-primary, rgba(255,255,255,0.9));
  border-color: rgba(55, 138, 221, 0.55);
}
[data-theme="dark"] .dqe-pdfprev-inp:focus {
  background: rgba(0,0,0,0.4);
  border-color: rgba(133, 183, 235, 0.55);
}
.dqe-pdfprev-mt {
  color: var(--text-soft);
  font-weight: 500;
}

/* v2.18.34 — Groupes Marché / Situation / Atterrissage dans vérif sit */

/* Super-ligne d'en-têtes de groupes */
.sit-verif-table thead tr.sit-grp-header th {
  padding: 4px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  border-bottom: 0.5px solid var(--border-color);
}
.sit-verif-table th.sit-grp-empty {
  background: transparent;
  border-bottom: none;
}
.sit-verif-table th.sit-grp-marche {
  background: rgba(75, 90, 110, 0.06);
  color: #4B5A6E;
  text-align: center;
}
.sit-verif-table th.sit-grp-situation {
  background: rgba(55, 138, 221, 0.10);
  color: #185FA5;
  text-align: center;
}
.sit-verif-table th.sit-grp-atter {
  background: rgba(99, 153, 34, 0.12);
  color: #3B6D11;
  text-align: center;
}
[data-theme="dark"] .sit-verif-table th.sit-grp-marche { background: rgba(170, 195, 230, 0.08); color: #AAC3E6; }
[data-theme="dark"] .sit-verif-table th.sit-grp-situation { background: rgba(133, 183, 235, 0.15); color: #85B7EB; }
[data-theme="dark"] .sit-verif-table th.sit-grp-atter { background: rgba(151, 196, 89, 0.15); color: #97C459; }

/* Bordure verticale épaisse entre les groupes (sur cellule de début de chaque groupe) */
.sit-verif-table th.sit-grp-start,
.sit-verif-table td.sit-grp-start {
  border-left: 2px solid rgba(0,0,0,0.20);
}
[data-theme="dark"] .sit-verif-table th.sit-grp-start,
[data-theme="dark"] .sit-verif-table td.sit-grp-start {
  border-left-color: rgba(255,255,255,0.20);
}
/* Pas de border-left dans le super-header — sinon ça surimprime */
.sit-verif-table thead tr.sit-grp-header th { border-left: 0 !important; }
[data-theme="dark"] .sit-row-del:hover { color: #FF7878; background: rgba(255, 120, 120, 0.13); border-color: rgba(255, 120, 120, 0.35); }

/* v2.18.36 — Séparateur LÉGER entre les sous-groupes de Situation (M-1/M/Cumul) */
.sit-verif-table th.sit-grp-sub-start,
.sit-verif-table td.sit-grp-sub-start {
  border-left: 0.5px solid rgba(0,0,0,0.12);
}
[data-theme="dark"] .sit-verif-table th.sit-grp-sub-start,
[data-theme="dark"] .sit-verif-table td.sit-grp-sub-start {
  border-left-color: rgba(255,255,255,0.13);
}

/* v2.18.37 — Refonte mise en page éditeur DQE
   Problèmes corrigés sur retour Sébastien :
   - Montants tronqués qui débordent sur les icônes d'action
   - Espacement vertical trop généreux entre lignes
   - Bouton "+" dans titre de chapitre démesuré (svg sans width fixe)
*/

/* SVG des boutons : forcer la taille (sans cette règle, lucide.createIcons()
   produit un <svg> qui ignore les .dqe-icon-btn i {} ciblant l'élément <i>) */
.dqe-chap-add-line svg,
.dqe-icon-btn svg,
.sit-row-del svg { width: 13px; height: 13px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.dqe-chap-add-line { line-height: 1; }

/* Lignes plus compactes : padding td plus serré + alignement vertical */
.dqe-tbl td { padding: 3px 5px; vertical-align: middle; }
.dqe-tbl tr.dqe-chap td { padding: 0; }
.dqe-tbl tr.dqe-chap-st td { padding: 4px 6px; }
.dqe-tbl .dqe-inp { padding: 2px 5px; height: 22px; box-sizing: border-box; }

/* Cellule action : largeur fixe, séparation visuelle avec colonne Montant */
.dqe-tbl td:last-child {
  border-left: 0.5px solid rgba(0,0,0,0.08);
  text-align: center;
  padding: 2px 3px;
}
[data-theme="dark"] .dqe-tbl td:last-child { border-left-color: rgba(255,255,255,0.10); }

/* Colonne Montant : ne pas wrap (les chiffres restent sur une ligne) */
.dqe-tbl td[data-dqe-cell-mt-marche],
.dqe-tbl td[data-dqe-cell-mt-atter] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

/* Désignation : input qui se tronque proprement si trop long */
.dqe-tbl td.l .dqe-inp { text-overflow: ellipsis; }

/* Bouton + dans chapitre : compact, pas étiré */
.dqe-chap-add-line {
  flex-shrink: 0;
  width: auto;
  height: 22px;
  align-self: center;
  padding: 0 6px;
}

/* v2.18.38 — Cartes membres du groupement MOE */
.moe-membres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 4px 14px 14px;
}
.moe-membre-card {
  border: 0.5px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.moe-membre-card:hover {
  border-color: rgba(55, 138, 221, 0.40);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.moe-membre-mand {
  border-left: 2.5px solid #378ADD;
}
[data-theme="dark"] .moe-membre-mand { border-left-color: #85B7EB; }

.moe-membre-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.moe-membre-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--surface-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.moe-membre-icon img { width: 100%; height: 100%; object-fit: cover; }
.moe-membre-titre { flex: 1; min-width: 0; }
.moe-membre-nom {
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.moe-membre-role { font-size: 10.5px; }

.moe-membre-stats {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
  margin-bottom: 10px;
  align-items: baseline;
}
.moe-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.moe-stat-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.moe-stat-lab {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.moe-stat-mt {
  margin-left: auto;
  text-align: right;
}
.moe-stat-mt .moe-stat-val { font-size: 12.5px; }

.moe-membre-actions {
  display: flex;
  gap: 6px;
}
.moe-membre-actions .btn { flex: 1; justify-content: center; gap: 5px; }
.badge-count {
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(55, 138, 221, 0.20);
  color: #185FA5;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  margin-left: 3px;
}
[data-theme="dark"] .badge-count { background: rgba(133, 183, 235, 0.25); color: #85B7EB; }

/* v2.18.40 — Timeline : échelle dates + jalon affermissement + hauteur auto + impression */

/* Hauteur auto : virer le max-height/overflow si présent */
.frise-section .timeline-rich,
.frise-section .timeline-rich-fluid {
  max-height: none;
  overflow: visible;
}

/* Échelle de dates (row pleine largeur en haut) */
.frise-echelle {
  position: relative;
  height: 22px;
  border-bottom: 0.5px dashed var(--border-color, rgba(0,0,0,0.10));
  margin-bottom: 4px;
}
.frise-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 0.5px dotted rgba(0,0,0,0.08);
  pointer-events: none;
}
[data-theme="dark"] .frise-tick { border-left-color: rgba(255,255,255,0.10); }
.frise-tick-lbl {
  position: absolute;
  left: 3px;
  top: 1px;
  font-size: 9.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  pointer-events: none;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.frise-echelle-today {
  position: absolute;
  top: -2px;
  bottom: -1px;
  width: 1.5px;
  background: #DC2626;
  z-index: 5;
}
.frise-echelle-today span {
  position: absolute;
  top: -1px;
  left: 4px;
  background: #DC2626;
  color: #fff;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Jalon affermissement TC sur la timeline */
.frise-affermissement {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.20);
}
.frise-affermissement i { width: 9px; height: 9px; color: #fff; stroke-width: 3; }
.frise-affermissement-done    { background: #16A34A; }    /* affermie */
.frise-affermissement-overdue { background: #DC2626; animation: pulse-overdue 1.5s ease-in-out infinite; }    /* dépassée */
.frise-affermissement-warn    { background: #D97706; }    /* J-15 */
.frise-affermissement-norm    { background: #6B7280; }    /* normal */
@keyframes pulse-overdue {
  0%, 100% { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.20), 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50% { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.20), 0 0 0 4px rgba(220, 38, 38, 0); }
}

/* Bloc affermissement dans le formulaire Modifier (sous le header tranche) */
.tranche-affermissement-row {
  padding: 8px 12px;
  background: rgba(249, 246, 240, 0.55);
  border-bottom: 0.5px solid var(--border-color, rgba(0,0,0,0.08));
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
[data-theme="dark"] .tranche-affermissement-row { background: rgba(255,255,255,0.02); }
.tranche-affermissement-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tranche-affermissement-fields .form-field { min-width: 150px; }
.affermissement-alerte, .affermissement-info {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.affermissement-alerte i, .affermissement-info i { width: 13px; height: 13px; }
.affermissement-alerte-overdue {
  background: rgba(220, 38, 38, 0.10);
  color: #B91C1C;
  border: 0.5px solid rgba(220, 38, 38, 0.30);
  font-weight: 600;
}
.affermissement-alerte-warn {
  background: rgba(217, 119, 6, 0.10);
  color: #B25500;
  border: 0.5px solid rgba(217, 119, 6, 0.30);
  font-weight: 500;
}
.affermissement-info {
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink-soft);
}
.affermissement-info-done {
  background: rgba(22, 163, 74, 0.10);
  color: #166534;
  border: 0.5px solid rgba(22, 163, 74, 0.30);
}
[data-theme="dark"] .affermissement-alerte-overdue { color: #FCA5A5; background: rgba(220, 38, 38, 0.15); }
[data-theme="dark"] .affermissement-alerte-warn { color: #FDBA74; background: rgba(217, 119, 6, 0.15); }
[data-theme="dark"] .affermissement-info-done { color: #86EFAC; background: rgba(22, 163, 74, 0.15); }

/* Impression : masquer tout sauf la section frise */
@media print {
  body.print-frise-only > *:not(.frise-section),
  body.print-frise-only .header,
  body.print-frise-only .sidebar,
  body.print-frise-only .nav-tabs,
  body.print-frise-only .back-link,
  body.print-frise-only .affaire-detail-actions { display: none !important; }
  body.print-frise-only .page,
  body.print-frise-only .main,
  body.print-frise-only main { padding: 0 !important; margin: 0 !important; }
  body.print-frise-only .frise-section {
    box-shadow: none;
    border: 0.5px solid #999;
    page-break-inside: avoid;
    max-width: 100%;
    margin: 0;
  }
  body.print-frise-only [data-frise-print] { display: none !important; }
  @page { size: A3 landscape; margin: 10mm; }
}

/* v2.18.40 — Mini timeline carte portefeuille : 1 ligne par marché/lot/tranche */
.affaire-mini-timeline-grid {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 2px 8px;
  align-items: center;
  margin-bottom: 4px;
}
.affaire-mini-timeline-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.affaire-mini-timeline-row {
  position: relative;
  height: 9px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
}
[data-theme="dark"] .affaire-mini-timeline-row { background: rgba(255, 255, 255, 0.05); }
.affaire-mini-timeline-row .affaire-mini-segment {
  height: 100%;
}

/* v2.18.40 — Événements externes (chevauchant la phase mais pas attribués) */
.evt-sub-item-externe {
  opacity: 0.78;
  font-style: italic;
}
.evt-sub-externe-badge {
  font-size: 9.5px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-soft);
  padding: 1px 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  font-style: normal;
}
.evt-sub-externe-badge i { width: 9px; height: 9px; }
[data-theme="dark"] .evt-sub-externe-badge { background: rgba(255, 255, 255, 0.06); }
.os-officiel-table td.lbl {
  width: 32%;
  background: #F5F1E8;
  font-weight: 600;
  font-size: 10pt;
}
.os-officiel [contenteditable="true"]:focus {
  outline: 2px solid #378ADD;
  background: rgba(55, 138, 221, 0.05);
}

/* Impression OS officiel : masquer le reste */
@media print {
  body.print-os-only > *:not(.os-officiel-overlay),
  body.print-os-only .os-officiel-actions { display: none !important; }
  body.print-os-only .os-officiel-overlay {
    position: static;
    background: white;
    padding: 0;
    overflow: visible;
  }
  body.print-os-only .os-officiel-print-area {
    box-shadow: none;
    padding: 0;
    max-width: none;
  }
  @page { size: A4 portrait; margin: 15mm; }
}

/* v2.18.42 — Marqueurs trimestriels verticaux pointillés sur toute la frise */
.frise-trim-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 0.5px dashed rgba(0, 0, 0, 0.20);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .frise-trim-marker { border-left-color: rgba(255, 255, 255, 0.18); }
/* Sur les rows fantômes (TC non affermées), on rend les ticks plus discrets */
.timeline-rich-row-conditionnelle .frise-trim-marker { opacity: 0.5; }

/* v2.18.43 — Zone Modèle d'OS (.docx template) dans le form Modifier */
.template-os-current,
.template-os-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0.5px solid var(--border-color, rgba(0,0,0,0.10));
  border-radius: 5px;
  background: rgba(0,0,0,0.02);
}
[data-theme="dark"] .template-os-current,
[data-theme="dark"] .template-os-empty {
  background: rgba(255,255,255,0.03);
}
.template-os-current i[data-lucide="file-check"] {
  width: 16px; height: 16px;
  color: var(--c-success, #15803d);
  vertical-align: middle;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.44 — Bandeau actions affaire + module Analyse technique
   ════════════════════════════════════════════════════════════════ */

/* Bandeau d'actions V1 (3 boutons, extensible) */
.affaire-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px 0;
}
[data-theme="dark"] .affaire-action-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* ════════════════════════════════════════════════════════════════
   v2.18.52 — Module Suivi documentaire et délais (variante A × 3 onglets)
   Reproduction scrupuleuse de la maquette Excel de Sébastien.
   ════════════════════════════════════════════════════════════════ */

.page-suivi-doc { padding: 0; }
.suivi-doc-loading { padding: 40px; text-align: center; color: var(--ink-soft); }
.suivi-doc-loading .spin { width: 20px; height: 20px; animation: spin 1s linear infinite; }

.suivi-doc-header {
  padding: 12px 18px 6px;
}
.suivi-doc-header .back-link {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.suivi-doc-header .back-link:hover { color: var(--ink); }
.suivi-doc-header h1.display {
  font-size: 20px;
  margin: 0 0 2px;
  line-height: 1.15;
}
.suivi-doc-header .text-soft { font-size: 12px; color: var(--ink-soft); }

.suivi-doc-tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 0.5px solid var(--border);
  margin-top: 8px;
  overflow-x: auto;
}
.suivi-doc-tab {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
}
.suivi-doc-tab:hover { color: var(--ink); }
.suivi-doc-tab.active {
  color: var(--accent, #2563eb);
  border-bottom-color: var(--accent, #2563eb);
  font-weight: 500;
}

.suivi-doc-body {
  padding: 14px 18px;
}

.suivi-doc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.suivi-doc-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 0.5px dashed var(--border);
  border-radius: var(--border-radius-lg, 12px);
}
.suivi-doc-empty .empty-icon { width: 36px; height: 36px; color: var(--ink-soft); margin-bottom: 8px; }
.suivi-doc-empty h2 { font-size: 15px; font-weight: 500; margin: 4px 0 6px; }
.suivi-doc-empty p { font-size: 12.5px; max-width: 440px; margin: 0 auto 12px; line-height: 1.5; }

/* ───── Etat navette : sections + tableau Excel-fidèle ───── */
.navette-section {
  margin-bottom: 22px;
}
.navette-section-title {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.navette-section-count {
  font-size: 11px;
  background: var(--surface-alt, rgba(0,0,0,0.06));
  color: var(--ink-soft);
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.navette-table-wrap {
  border: 0.5px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  background: var(--surface);
}
.navette-table {
  border-collapse: collapse;
  font-size: 11px;
  min-width: 1900px;
  width: 100%;
}
.navette-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt, rgba(0,0,0,0.04));
  color: var(--ink-soft);
  text-align: left;
  padding: 6px 6px;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 0.5px solid var(--border);
  border-right: 0.5px solid var(--border);
  white-space: nowrap;
}
.navette-table tbody td {
  padding: 2px;
  border: 0.5px solid var(--border);
  vertical-align: top;
}
.navette-table .col-lot     { width: 70px;  }
.navette-table .col-num     { width: 80px;  }
.navette-table .col-design  { width: 160px; }
.navette-table .col-ref     { width: 110px; }
.navette-table .col-delai   { width: 140px; }
.navette-table .col-date    { width: 110px; }
.navette-table .col-ind     { width: 38px;  }
.navette-table .col-bord    { width: 70px;  }
.navette-table .col-statut  { width: 110px; }
.navette-table .col-obs     { width: 140px; }
.navette-table .col-retard  { width: 60px;  text-align: center; }
.navette-table .col-pen-app { width: 80px;  }
.navette-table .col-pen-regle { width: 150px; }
.navette-table .col-pen-mt  { width: 110px; text-align: right; }
.navette-table .col-prop    { width: 60px;  }
.navette-table .col-prop-mt { width: 100px; }
.navette-table .col-act     { width: 56px;  text-align: center; }

.navette-table .navette-empty {
  padding: 12px 14px;
  text-align: center;
  color: var(--ink-soft);
}
.navette-section-foot {
  margin-top: 6px;
  text-align: left;
}

/* Cellules input (inputs et displays) */
.cell-input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 3px;
  color: inherit;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.cell-input:hover { background: var(--surface-alt, rgba(0,0,0,0.03)); }
.cell-input:focus {
  background: var(--surface-alt, rgba(0,0,0,0.06));
  outline: 1px solid var(--accent, #2563eb);
}
.cell-input.cell-bold { font-weight: 500; }
.cell-input.cell-soft { color: var(--ink-soft); }
.cell-input.cell-center { text-align: center; }
.cell-input.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-input.cell-inline { display: inline-block; width: auto; }
.cell-display {
  padding: 4px 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.cell-display.cell-center { text-align: center; }
.cell-display.cell-money { text-align: right; }
.cell-meta {
  font-size: 9.5px;
  color: var(--ink-soft);
  padding: 0 6px 2px;
  font-style: italic;
  line-height: 1.3;
}
.cell-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 2px;
}

.text-dim { color: var(--ink-soft); }
.text-warning { color: #c2410c; }
[data-theme="dark"] .text-warning { color: #fb923c; }

/* Pills de statut visa (VSO/VAO/VR/VS) */
.cell-pill {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9.5px;
  border-radius: 4px;
  font-weight: 500;
  margin: 1px 6px 0;
  line-height: 1.3;
}
.cell-pill-success { background: #E1F5EE; color: #085041; }
.cell-pill-warning { background: #FAEEDA; color: #854F0B; }
.cell-pill-danger  { background: #FCEBEB; color: #791F1F; }
.cell-pill-neutral { background: var(--surface-alt, rgba(0,0,0,0.06)); color: var(--ink-soft); }
[data-theme="dark"] .cell-pill-success { background: rgba(45, 212, 191, 0.18); color: #5DCAA5; }
[data-theme="dark"] .cell-pill-warning { background: rgba(251, 146, 60, 0.18); color: #FAC775; }
[data-theme="dark"] .cell-pill-danger  { background: rgba(248, 113, 113, 0.18); color: #F09595; }

/* ───── Bordereau de visa : courrier WYSIWYG ───── */
.bordereau-selector {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.bordereau-selector select { min-width: 280px; }
.bordereau-doc {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 22px 26px;
  max-width: 880px;
}
.bordereau-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.bordereau-doc-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.bordereau-doc-moe { font-weight: 500; font-size: 14px; }
.bordereau-doc-title-block { text-align: right; }
.bordereau-doc-title {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
}
.bordereau-doc-date {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
}
.bordereau-doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.bordereau-doc-grid .cell-input { margin-bottom: 4px; }
.bordereau-doc-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.bordereau-dest-line {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 24px;
  gap: 4px;
  margin-bottom: 3px;
  align-items: center;
}
.bordereau-doc-legend {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 10px 0 8px;
  padding: 6px 10px;
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border-radius: 4px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.bordereau-doc-legend .cell-pill { margin: 0; }
.bordereau-lignes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.bordereau-lignes-table thead th {
  background: var(--surface-alt, rgba(0,0,0,0.04));
  color: var(--ink-soft);
  padding: 6px 8px;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 0.5px solid var(--border);
  text-align: left;
}
.bordereau-lignes-table tbody td {
  padding: 6px 8px;
  border: 0.5px solid var(--border);
}
.bordereau-lignes-table .cell-bold { font-weight: 500; }
.bordereau-lignes-table .cell-center { text-align: center; }
.bordereau-empty {
  text-align: center;
  padding: 12px;
  color: var(--ink-soft);
}
.bordereau-foot {
  margin-top: 6px;
}
.bordereau-doc-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ───── Essais et contrôles : 2 tableaux empilés ───── */
.essais-section {
  margin-bottom: 14px;
}
.essais-section-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
}
.essais-section-hint {
  font-size: 11px;
  margin-bottom: 8px;
}
.essais-table-wrap {
  border: 0.5px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  background: var(--surface);
}
.essais-table {
  border-collapse: collapse;
  font-size: 11.5px;
  width: 100%;
  min-width: 880px;
}
.essais-table thead th {
  background: var(--surface-alt, rgba(0,0,0,0.04));
  color: var(--ink-soft);
  padding: 6px;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 0.5px solid var(--border);
  border-right: 0.5px solid var(--border);
  text-align: left;
}
.essais-table tbody td {
  padding: 2px;
  border: 0.5px solid var(--border);
  vertical-align: top;
}
.essais-table .col-mat       { width: 130px; }
.essais-table .col-nat       { width: 170px; }
.essais-table .col-crit      { width: 160px; }
.essais-table .col-freq      { width: 130px; }
.essais-table .col-scope     { width: 110px; }
.essais-table .col-obs       { width: 130px; }
.essais-table .col-ouv       { width: 160px; }
.essais-table .col-date      { width: 110px; }
.essais-table .col-j         { width: 50px; text-align: center; }
.essais-table .col-res       { width: 100px; }
.essais-table .col-conf      { width: 70px; text-align: center; }
.essais-table .col-act-suiv  { width: 140px; }
.essais-table .col-act       { width: 36px; text-align: center; }
.essais-foot, .essais-empty {
  text-align: center;
  padding: 8px;
  background: var(--surface-alt, rgba(0,0,0,0.02));
}
.essais-mementum {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(37, 99, 235, 0.06);
  border-left: 2px solid var(--accent, #2563eb);
  border-radius: 4px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .essais-mementum {
  background: rgba(99, 175, 235, 0.10);
}

/* ───── Pénalités : cards ───── */
.penalites-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}
.penalite-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.penalite-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.penalite-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.penalite-code-input {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 7px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt, rgba(0,0,0,0.03));
  width: 80px;
}
.penalite-libelle-input {
  font-size: 13px;
  padding: 4px 7px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
}
.penalite-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.penalite-field { display: flex; flex-direction: column; gap: 2px; }
.penalite-field.penalite-field-wide { grid-column: 1 / -1; }
.penalite-field label {
  font-size: 9.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.penalite-field .input { font-size: 12px; padding: 4px 7px; }
.penalite-base-preview {
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .penalite-base-preview { background: rgba(255,255,255,0.04); }

/* Spin animation pour loading icon */
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   v2.18.54 — Aperçu / impression du suivi documentaire
   ════════════════════════════════════════════════════════════════ */

.suivi-doc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 10px;
}
.suivi-doc-toolbar-actions {
  display: flex;
  gap: 6px;
}

/* Overlay d'aperçu plein écran */
.print-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.print-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.print-preview-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.print-preview-actions {
  display: flex;
  gap: 6px;
}
.print-preview-content {
  flex: 1;
  background: #FFFFFF;
  color: #2C2C2A;
  border-radius: var(--radius-md);
  padding: 28px 32px;
  overflow-y: auto;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 11px;
  line-height: 1.5;
}

/* Document de travail (mise en page A4) */
.print-doc { max-width: 100%; }
.print-doc-header,
.print-bord-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid #B4B2A9;
}
.print-eyebrow {
  font-size: 9px;
  color: #888780;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.print-title {
  font-size: 17px;
  font-weight: 500;
  margin-top: 4px;
  color: #2C2C2A;
}
.print-meta {
  font-size: 10px;
  color: #5F5E5A;
  margin-top: 2px;
}
.print-header-right {
  text-align: right;
  font-size: 10px;
  color: #5F5E5A;
}

/* Sections + tableau */
.print-section {
  margin-bottom: 18px;
  page-break-inside: avoid;
}
.print-section-title {
  font-size: 12px;
  font-weight: 500;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.print-section-count {
  font-size: 11px;
  color: #2C2C2A;
  font-weight: 500;
  margin-left: 4px;
}
.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  color: #2C2C2A;
}
.print-table thead th {
  padding: 4px 6px;
  text-align: left;
  background: #F1EFE8;
  color: #5F5E5A;
  border: 0.5px solid #B4B2A9;
  font-weight: 500;
}
.print-table tbody td {
  padding: 3px 6px;
  border: 0.5px solid #D3D1C7;
  vertical-align: middle;
}
.print-merge { vertical-align: top; background: #FAF9F5; }
.print-bold { font-weight: 500; }
.print-soft { color: #5F5E5A; }

/* Bordereau de visa */
.print-bord-moe {
  font-weight: 500;
  font-size: 14px;
  margin-top: 4px;
  color: #2C2C2A;
}
.print-bord-title-block {
  text-align: right;
}
.print-bord-title {
  font-size: 19px;
  font-weight: 500;
  color: #2C2C2A;
}
.print-bord-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  font-size: 11px;
  margin-bottom: 14px;
}
.print-bord-legende {
  font-size: 10px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: #F1EFE8;
  border-radius: 4px;
  color: #5F5E5A;
}
.print-bord-signature {
  margin-top: 28px;
  text-align: right;
  font-size: 11px;
  font-weight: 500;
  color: #2C2C2A;
}

/* Mode impression : ne montrer que le contenu */
@media print {
  body * {
    visibility: hidden !important;
  }
  .print-preview-overlay,
  .print-preview-overlay * {
    visibility: visible !important;
  }
  .print-preview-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: white !important;
    padding: 0 !important;
  }
  .no-print {
    display: none !important;
  }
  .print-preview-content {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  @page {
    size: A4 landscape;
    margin: 12mm 10mm;
  }
}

/* v2.18.60 — Sections personnalisables : titre éditable + bouton supprimer */
.navette-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
}
.navette-section-title-input {
  flex: 0 1 auto;
  font-size: 16px;
  font-weight: 500;
  padding: 4px 8px;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  min-width: 280px;
}
.navette-section-title-input:hover,
.navette-section-title-input:focus {
  background: var(--surface-alt, rgba(0,0,0,0.03));
  border-color: var(--border);
  outline: none;
}
[data-theme="dark"] .navette-section-title-input:hover,
[data-theme="dark"] .navette-section-title-input:focus {
  background: rgba(255,255,255,0.05);
}
.navette-section-header .navette-section-count {
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 2px 8px;
  background: var(--surface-alt, rgba(0,0,0,0.04));
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.navette-section-rm {
  opacity: 0.4;
  transition: opacity 0.12s;
}
.navette-section-rm:not(:disabled):hover {
  opacity: 1;
}
.navette-section-rm:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

/* Bouton "Nouveau chapitre" en bas de l'État navette */
.navette-add-section {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 0.5px dashed var(--border);
  text-align: center;
}

/* v2.18.62 — Cellule Retard éditable avec auto/manuel */
.retard-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.retard-cell .cell-input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 50px;
}
.retard-cell .cell-input::placeholder {
  font-weight: 400;
  color: var(--ink-soft);
  opacity: 0.7;
}
.retard-reset {
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--accent);
  display: flex;
  align-items: center;
}
.retard-reset:hover {
  background: var(--surface-alt, rgba(0,0,0,0.05));
  border-color: var(--accent);
}
.retard-reset i {
  width: 12px;
  height: 12px;
}
.retard-auto-badge {
  font-size: 9px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.63 — Module CR de chantier (S3.1 scaffold)
   ════════════════════════════════════════════════════════════════ */

/* Liste des CR (par affaire ou globale) */
.page-cr-list { padding: 14px 18px; }
.affaire-subheader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 10px;
}
.affaire-subheader-title { flex: 1; }
.affaire-subheader-title h1 { margin: 0; font-size: 17px; }

.cr-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s, border-color 0.12s;
}
.cr-card:hover { background: var(--surface-alt, rgba(0,0,0,0.02)); border-color: var(--accent); }
.cr-card-num { font-weight: 500; font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cr-card-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.cr-card-meta { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cr-card-meta i { width: 11px; height: 11px; }
.cr-card-stats { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: 10px; color: var(--ink-soft); }
.cr-card-stat strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-card-stats .text-warning strong { color: #BA7517; }
.cr-card-statut { display: flex; align-items: center; }

.cr-statut-pill {
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cr-statut-success { background: #E1F5EE; color: #085041; }

/* Éditeur CR — layout 9 */
.page-cr-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
}
.cr-editor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cr-header-num {
  background: var(--accent);
  color: var(--accent-fg, white);
  padding: 3px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cr-header-title {
  flex: 1;
  background: transparent;
  border: 0.5px solid transparent;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  color: var(--ink);
}
.cr-header-title:hover, .cr-header-title:focus {
  border-color: var(--border);
  background: var(--surface-alt, rgba(0,0,0,0.03));
  outline: none;
}
.cr-header-dates { display: flex; gap: 12px; }
.cr-header-dates label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 9.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cr-header-dates label span { font-weight: 500; }
.cr-header-dates input {
  font-size: 11px;
  padding: 3px 6px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
}

.cr-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.cr-editor-left {
  width: 250px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--border);
  background: var(--surface-alt, #FAF9F5);
  overflow-y: auto;
  padding: 10px;
}
[data-theme="dark"] .cr-editor-left { background: rgba(255,255,255,0.02); }

.cr-sidebar-block { margin-bottom: 14px; }
.cr-sidebar-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cr-sidebar-title-meta { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }

.cr-sidebar-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  width: 100%;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
}
.cr-sidebar-section:hover {
  background: var(--surface);
  border-color: var(--border);
}
.cr-sidebar-section.active {
  background: #E1F5EE;
  color: #085041;
  font-weight: 500;
}
[data-theme="dark"] .cr-sidebar-section.active {
  background: rgba(93, 202, 165, 0.15);
  color: #5DCAA5;
}
.cr-sidebar-secnum {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 10px;
  min-width: 18px;
}
.cr-sidebar-section.active .cr-sidebar-secnum { color: #085041; font-weight: 500; }
.cr-sidebar-seclib { flex: 1; }
.cr-sidebar-badge {
  background: var(--border);
  color: var(--ink);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cr-sidebar-section.active .cr-sidebar-badge {
  background: #5DCAA5;
  color: white;
}
.cr-sidebar-drag {
  opacity: 0;
  cursor: grab;
  color: var(--ink-soft);
}
.cr-sidebar-section:hover .cr-sidebar-drag { opacity: 0.4; }
.cr-sidebar-drag:hover { opacity: 1 !important; }
.cr-sidebar-drag i { width: 12px; height: 12px; }

.cr-sidebar-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  margin-top: 4px;
  border: 0.5px dashed var(--border);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: inherit;
}
.cr-sidebar-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cr-sidebar-recap {
  padding-top: 10px;
  border-top: 0.5px dashed var(--border);
}
.cr-recap-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 4px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10.5px;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
}
.cr-recap-item:hover { background: var(--surface); }
.cr-recap-item.done { opacity: 0.5; }
.cr-recap-item.done .cr-recap-text { text-decoration: line-through; }
.cr-recap-checkbox {
  width: 13px;
  height: 13px;
  border: 0.5px solid var(--border);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-recap-checkbox.done {
  background: #5DCAA5;
  border-color: #0F6E56;
  color: white;
}
.cr-recap-checkbox.done i { width: 9px; height: 9px; }
.cr-recap-line1 { display: flex; align-items: center; gap: 4px; }
.cr-recap-code { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 9.5px; font-weight: 500; }

.cr-editor-right {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  background: var(--surface);
}
.cr-section-wrap { max-width: 1200px; }
.cr-section-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
}
.cr-section-h-num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
  min-width: 20px;
}
.cr-section-h-count {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 400;
  background: var(--surface-alt, rgba(0,0,0,0.04));
  padding: 2px 8px;
  border-radius: 10px;
}
.cr-section-add-rem { margin-left: auto; }

.cr-section-content { padding: 0; }
.cr-coming-soon p { margin: 6px 0; }
.cr-coming-soon p.text-xs { font-size: 11px; opacity: 0.7; }

.cr-loading i { display: inline-block; }
.spin { animation: spin 1.2s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   v2.18.66 — Module CR (S3.1 finalisé) :
   - Sections interactives (rename, indent, suppr, drag&drop)
   - Remarques 5 colonnes opérationnelles
   - Visibilité icônes renforcée
   ════════════════════════════════════════════════════════════════ */

/* Section wrap (groupe ligne + outils) */
.cr-sidebar-section-wrap {
  position: relative;
  margin-bottom: 2px;
  border-radius: 4px;
}
.cr-sidebar-section-wrap.dragging { opacity: 0.4; }
.cr-sidebar-section-wrap.drop-target {
  outline: 1.5px solid #5DCAA5;
  outline-offset: -1px;
  background: rgba(93, 202, 165, 0.08);
}
.cr-sidebar-section-wrap.active { background: #E1F5EE; }
[data-theme="dark"] .cr-sidebar-section-wrap.active { background: rgba(93, 202, 165, 0.18); }

/* Override : la ligne dans le wrap ne porte plus son propre fond actif */
.cr-sidebar-section-wrap .cr-sidebar-section {
  background: transparent !important;
  border-color: transparent !important;
}
.cr-sidebar-section-wrap.active .cr-sidebar-section { color: #085041; font-weight: 500; }
[data-theme="dark"] .cr-sidebar-section-wrap.active .cr-sidebar-section { color: #5DCAA5; }

/* Input libellé section éditable inline */
.cr-sidebar-seclib-input {
  flex: 1;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 11.5px;
  color: inherit;
  font-family: inherit;
  min-width: 0;
}
.cr-sidebar-seclib-input:hover { border-color: var(--border); background: var(--surface); }
.cr-sidebar-seclib-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

/* Boutons outils section (indent, supprimer) — visibles au hover */
.cr-sidebar-section-tools {
  display: none;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  gap: 2px;
  background: var(--surface);
  padding: 2px 3px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cr-sidebar-section-wrap:hover .cr-sidebar-section-tools { display: flex; }
.cr-sec-tool {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.cr-sec-tool i { width: 12px; height: 12px; }
.cr-sec-tool:hover { background: var(--surface-alt, rgba(0,0,0,0.06)); }
.cr-sec-tool:disabled { opacity: 0.3; cursor: not-allowed; }
.cr-sec-tool-danger { color: #A32D2D; }
.cr-sec-tool-danger:hover { background: rgba(163, 45, 45, 0.1); }

/* Drag handle plus visible */
.cr-sidebar-drag {
  color: var(--ink);
  opacity: 0.35;
  cursor: grab;
  flex-shrink: 0;
  margin-right: 2px;
}
.cr-sidebar-drag:hover { opacity: 1; }
.cr-sidebar-drag i { width: 12px; height: 12px; }

/* ────────────── REMARQUES (cards 5 colonnes) ────────────── */
.rem-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md, 6px);
  margin-bottom: 12px;
  overflow: hidden;
}

/* Header de remarque */
.rem-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface-alt, #F1EFE8);
  border-bottom: 0.5px solid var(--border);
}
[data-theme="dark"] .rem-head { background: rgba(255,255,255,0.04); }
.rem-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  padding: 2px 7px;
  border-radius: 3px;
  border: 0.5px solid var(--border);
}
.rem-lot-input {
  flex: 1;
  background: transparent;
  border: 0.5px solid transparent;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 3px;
  color: var(--ink-soft);
  font-family: inherit;
}
.rem-lot-input:hover, .rem-lot-input:focus {
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.rem-head-del {
  width: 24px;
  height: 24px;
  border: 0.5px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: #A32D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rem-head-del:hover {
  background: rgba(163, 45, 45, 0.1);
  border-color: rgba(163, 45, 45, 0.3);
}
.rem-head-del i { width: 13px; height: 13px; }

/* Ligne d'une AS — 5 colonnes */
.as-row {
  display: grid;
  grid-template-columns: 88px 1fr 1fr 110px 36px;
  gap: 8px;
  padding: 9px 10px;
  align-items: flex-start;
  border-bottom: 0.5px dashed var(--border);
  font-size: 11.5px;
}
.as-row:last-of-type { border-bottom: none; }

.as-col-date { font-size: 10px; line-height: 1.3; color: var(--ink-soft); }
.as-col-date input {
  font-size: 10px;
  padding: 2px 4px;
  width: 100%;
  border: 0.5px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-family: inherit;
  color: var(--ink);
  box-sizing: border-box;
}
.as-col-date input:hover, .as-col-date input:focus {
  border-color: var(--border);
  background: var(--surface);
  outline: none;
}
.as-col-date .as-ref {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-soft);
  margin-top: 3px;
  display: block;
}

.as-col-editor {
  background: transparent;
  padding: 4px 7px;
  border: 0.5px solid transparent;
  border-radius: 3px;
  color: var(--ink);
  min-height: 28px;
  font-size: 11.5px;
  line-height: 1.5;
  cursor: text;
  outline: none;
}
.as-col-editor:hover {
  border-color: var(--border);
  background: var(--surface-alt, rgba(0,0,0,0.02));
}
.as-col-editor:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.as-col-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-soft);
  font-style: italic;
  font-size: 10.5px;
  opacity: 0.6;
}

.as-col-state {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.as-pill {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 10px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 3 L4 6 L7 3' fill='none' stroke='currentColor' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  padding-right: 18px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
[data-theme="dark"] .as-grav-INFO        { background-color: rgba(24, 95, 165, 0.25); color: #88BBE3; }
[data-theme="dark"] .as-grav-POUR_ACTION { background-color: rgba(186, 117, 23, 0.28); color: #E0A968; }
[data-theme="dark"] .as-grav-RESERVE     { background-color: rgba(186, 117, 23, 0.35); color: #F0C788; }
[data-theme="dark"] .as-grav-BLOQUANT    { background-color: rgba(163, 45, 45, 0.3); color: #E0908F; }
[data-theme="dark"] .as-stat-OUVERT      { background-color: rgba(255,255,255,0.08); color: #C0BFB7; }
[data-theme="dark"] .as-stat-FAIT        { background-color: rgba(93, 202, 165, 0.22); color: #5DCAA5; }

/* Rail outils AS — visibilité renforcée */
.as-col-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.as-tool-btn {
  width: 26px;
  height: 26px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.as-tool-btn i { width: 13px; height: 13px; }
.as-tool-btn:hover:not(:disabled) {
  background: var(--surface-alt, #F1EFE8);
  border-color: var(--accent);
  color: var(--accent);
}
.as-tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.as-tool-danger { color: #A32D2D !important; }
.as-tool-danger:hover:not(:disabled) {
  background: rgba(163, 45, 45, 0.1) !important;
  border-color: #A32D2D !important;
}

/* Footer remarque : bouton ajouter AS */
.rem-add-as-row {
  padding: 6px 10px;
  background: var(--surface-alt, #FAF9F5);
  border-top: 0.5px dashed var(--border);
  text-align: center;
}
[data-theme="dark"] .rem-add-as-row { background: rgba(255,255,255,0.02); }
.rem-add-as-btn {
  background: transparent;
  border: 0.5px dashed var(--accent);
  color: var(--accent);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rem-add-as-btn:hover { background: rgba(15, 110, 86, 0.06); }
.rem-add-as-btn i { width: 12px; height: 12px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.67 — Numérotation auto sections + Toggle TODO + Récap filtrée
   ════════════════════════════════════════════════════════════════ */

/* Toggle TODO dans header remarque */
.rem-todo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rem-todo-toggle:hover { border-color: var(--accent); color: var(--accent); }
.rem-todo-toggle i { width: 12px; height: 12px; }
.rem-todo-toggle.on {
  background: #E1F5EE;
  border-color: #0F6E56;
  color: #085041;
}
[data-theme="dark"] .rem-todo-toggle.on {
  background: rgba(93, 202, 165, 0.18);
  border-color: #5DCAA5;
  color: #5DCAA5;
}

/* Card.is-todo : marquée discrètement */
.rem-card.is-todo {
  border-left: 2.5px solid #0F6E56;
}
[data-theme="dark"] .rem-card.is-todo { border-left-color: #5DCAA5; }

/* Placeholder visible et grisé pour input "Nouvelle section" */
.cr-sidebar-seclib-input::placeholder {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.7;
}
.cr-sidebar-seclib-input[readonly] {
  cursor: default;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.68 — TODO items insérés dans la remarque + breadcrumb section auto
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb auto dans le header de remarque (n° + titre section) */
.rem-breadcrumb {
  flex: 1;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 3px 8px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bloc TODOs en bas de la remarque */
.rem-todos-block {
  padding: 8px 10px;
  background: var(--surface-alt, #FAF9F5);
  border-top: 0.5px solid var(--border);
}
[data-theme="dark"] .rem-todos-block { background: rgba(255,255,255,0.02); }

.rem-todos-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.rem-todos-title i { width: 12px; height: 12px; }
.rem-todos-count {
  background: var(--border);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rem-todos-empty {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 3px 4px 6px;
}

.rem-todos-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}

.rem-todo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
}
.rem-todo-item:hover { background: var(--surface); }
.rem-todo-item.done .rem-todo-text {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.rem-todo-check {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 3px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.rem-todo-check:hover { background: var(--surface-alt, rgba(0,0,0,0.04)); }
.rem-todo-check i { width: 15px; height: 15px; }
.rem-todo-item.done .rem-todo-check { color: #0F6E56; }

.rem-todo-text {
  flex: 1;
  background: transparent;
  border: 0.5px solid transparent;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 11.5px;
  color: var(--ink);
  font-family: inherit;
}
.rem-todo-text:hover, .rem-todo-text:focus {
  border-color: var(--border);
  background: var(--surface);
  outline: none;
}
.rem-todo-text::placeholder { color: var(--ink-soft); font-style: italic; }

.rem-todo-del {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 0;
}
.rem-todo-item:hover .rem-todo-del { opacity: 1; }
.rem-todo-del:hover { background: rgba(163, 45, 45, 0.1); color: #A32D2D; }
.rem-todo-del i { width: 13px; height: 13px; }

.rem-todo-add-btn {
  background: transparent;
  border: 0.5px dashed var(--border);
  color: var(--ink-soft);
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rem-todo-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.rem-todo-add-btn i { width: 11px; height: 11px; }

/* Récap sidebar : items TODO */
.cr-recap-todo-text {
  font-size: 10.5px;
  margin-top: 1px;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}
.cr-recap-sec {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-soft);
  background: var(--border);
  padding: 0 4px;
  border-radius: 3px;
}
.cr-recap-checkbox i { width: 13px; height: 13px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.69 — Breadcrumb arborescence + Photos (upload, viewer, slider taille)
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb multi-segments dans header remarque */
.rem-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  overflow: hidden;
}
.rem-bc-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--ink-soft);
  max-width: 250px;
}
.rem-bc-seg.last {
  color: var(--ink);
  font-weight: 500;
  background: var(--surface-alt, #F1EFE8);
}
[data-theme="dark"] .rem-bc-seg.last { background: rgba(255,255,255,0.06); }
.rem-bc-code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}
.rem-bc-lib {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rem-bc-sep {
  color: var(--ink-soft);
  font-size: 12px;
  opacity: 0.5;
}

/* Bouton TODO dans rail AS */
.as-tool-todo {
  color: #0F6E56 !important;
  border-color: rgba(15, 110, 86, 0.3) !important;
}
.as-tool-todo:hover:not(:disabled) {
  background: #E1F5EE !important;
  border-color: #0F6E56 !important;
}
[data-theme="dark"] .as-tool-todo {
  color: #5DCAA5 !important;
  border-color: rgba(93, 202, 165, 0.3) !important;
}
[data-theme="dark"] .as-tool-todo:hover:not(:disabled) {
  background: rgba(93, 202, 165, 0.15) !important;
  border-color: #5DCAA5 !important;
}

/* Bandeau photos sous une AS */
.as-photos-bar {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding: 6px 12px 10px;
  flex-wrap: wrap;
}
.as-photo-thumb {
  position: relative;
  width: 90px;
  height: 68px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 0.5px solid var(--border);
  background: var(--surface-alt, #F1EFE8);
  transition: transform 0.12s, box-shadow 0.12s;
}
.as-photo-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.as-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-photo-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.as-photo-pct {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,0.65);
  color: white;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Photo viewer modal plein écran */
.photo-viewer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.photo-viewer {
  display: flex;
  flex: 1;
  background: #1a1a18;
  overflow: hidden;
}
.photo-viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  overflow: hidden;
}
.photo-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
.photo-viewer-side {
  width: 320px;
  background: var(--surface);
  border-left: 0.5px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow-y: auto;
}
.photo-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.photo-viewer-close:hover { background: var(--surface-alt, #F1EFE8); }
.photo-viewer-close i { width: 14px; height: 14px; }

.photo-viewer-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  margin-top: 24px;
}
.photo-viewer-nav button {
  width: 28px;
  height: 28px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.photo-viewer-nav button:hover:not(:disabled) { background: var(--surface-alt, #F1EFE8); }
.photo-viewer-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.photo-viewer-nav button i { width: 14px; height: 14px; }
.photo-viewer-nav span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.photo-viewer-section { display: flex; flex-direction: column; gap: 6px; }
.photo-viewer-section label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.photo-viewer-section textarea {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt, #FAF9F5);
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
}
.photo-viewer-section textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.photo-viewer-section input[type="range"] { width: 100%; accent-color: var(--accent); }
.photo-viewer-hint { font-size: 10px; color: var(--ink-soft); font-style: italic; }

.photo-viewer-rot { display: flex; gap: 4px; }
.photo-viewer-rot button {
  flex: 1;
  padding: 5px 6px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.photo-viewer-rot button:hover { background: var(--surface-alt, #F1EFE8); }
.photo-viewer-rot button.active {
  background: var(--accent);
  color: var(--accent-fg, white);
  border-color: var(--accent);
}

.photo-viewer-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
}
.photo-viewer-del {
  width: 100%;
  padding: 7px 10px;
  border: 0.5px solid #A32D2D;
  background: transparent;
  color: #A32D2D;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.photo-viewer-del:hover {
  background: rgba(163, 45, 45, 0.08);
}
.photo-viewer-del i { width: 13px; height: 13px; }

/* Mobile : panneau côté → en bas */
@media (max-width: 768px) {
  .photo-viewer { flex-direction: column; }
  .photo-viewer-side { width: 100%; max-height: 50vh; border-left: none; border-top: 0.5px solid var(--border); }
}

/* ════════════════════════════════════════════════════════════════
   v2.18.70 — TODOs au niveau AS (sous chaque ligne d'AS)
   ════════════════════════════════════════════════════════════════ */

.as-todos-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 12px 10px;
  padding: 8px 10px;
  background: rgba(15, 110, 86, 0.04);
  border: 0.5px solid rgba(15, 110, 86, 0.25);
  border-left: 2px solid #0F6E56;
  border-radius: 4px;
}
[data-theme="dark"] .as-todos-bar {
  background: rgba(93, 202, 165, 0.08);
  border-color: rgba(93, 202, 165, 0.25);
  border-left-color: #5DCAA5;
}
.as-todos-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 500;
  color: #0F6E56;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
[data-theme="dark"] .as-todos-label { color: #5DCAA5; }
.as-todos-label i { width: 11px; height: 11px; }
.as-todos-count {
  background: rgba(15, 110, 86, 0.18);
  color: #0F6E56;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .as-todos-count { background: rgba(93,202,165,0.22); color: #5DCAA5; }

/* Items TODO dans la zone AS : compact */
.as-todos-bar .rem-todo-item { padding: 2px 0; }
.as-todos-bar .rem-todo-item:hover { background: transparent; }
.as-todos-bar .rem-todo-text { font-size: 11px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.71 — TODOs enrichis (tag, responsable, date pour le)
   ════════════════════════════════════════════════════════════════ */

.rem-todo-content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rem-todo-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 6px;
}
.rem-todo-meta input {
  font-size: 10px;
  padding: 2px 6px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  height: 22px;
  box-sizing: border-box;
}
.rem-todo-meta input:hover { border-color: var(--accent); }
.rem-todo-meta input:focus { outline: none; border-color: var(--accent); }
.rem-todo-tag { width: 90px; }
.rem-todo-tag::placeholder { font-style: italic; opacity: 0.6; }
.rem-todo-resp { width: 130px; }
.rem-todo-resp::placeholder { font-style: italic; opacity: 0.6; }
.rem-todo-date { width: 130px; }
.rem-todo-date.overdue {
  background: rgba(163, 45, 45, 0.08);
  color: #A32D2D;
  border-color: rgba(163, 45, 45, 0.4);
  font-weight: 500;
}
[data-theme="dark"] .rem-todo-date.overdue {
  background: rgba(224, 144, 143, 0.12);
  color: #E0908F;
}

/* Récap : meta du TODO sous le texte */
.cr-recap-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 9px;
}
.cr-recap-tag {
  background: #EEEDFE;
  color: #534AB7;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 500;
}
[data-theme="dark"] .cr-recap-tag { background: rgba(83, 74, 183, 0.25); color: #8C81F2; }
.cr-recap-resp {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--ink-soft);
  padding: 1px 5px;
  border-radius: 6px;
}
.cr-recap-date {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--ink-soft);
  padding: 1px 5px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.cr-recap-date.overdue {
  background: rgba(163, 45, 45, 0.12);
  color: #A32D2D;
  border-color: rgba(163, 45, 45, 0.35);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.71 — Annotateur photo (fabric.js)
   ════════════════════════════════════════════════════════════════ */

.photo-annotator-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 8px;
}
#annot-canvas { display: block; }

/* Bouton "Annoter" dans le viewer (au-dessus du delete) */
.photo-viewer-annot {
  width: 100%;
  padding: 7px 10px;
  border: 0.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.photo-viewer-annot:hover { background: rgba(15, 110, 86, 0.08); }
.photo-viewer-annot i { width: 13px; height: 13px; }

/* Thumbnails : dot indicateur pour photos annotées */
.as-photo-thumb.has-annot::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #BA7517;
  border: 1.5px solid white;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.72 — Éditeur de photo en mode calques (rotation fine + scale indép.)
   ════════════════════════════════════════════════════════════════ */

.layer-editor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1100;
  display: flex;
}
.layer-editor {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.le-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
#le-canvas { box-shadow: 0 8px 32px rgba(0,0,0,0.5); border-radius: 4px; }

.le-side {
  width: 340px;
  background: var(--surface);
  border-left: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.le-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border);
  background: var(--surface-alt, #FAF9F5);
}
[data-theme="dark"] .le-side-head { background: rgba(255,255,255,0.02); }
.le-side-head h3 { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.le-close {
  width: 26px;
  height: 26px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.le-close:hover { background: var(--surface-alt, #F1EFE8); }
.le-close i { width: 13px; height: 13px; }

.le-section {
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--border);
}
.le-section-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.le-add-btn {
  width: 100%;
  padding: 8px 12px;
  border: 0.5px dashed var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.le-add-btn:hover { background: rgba(15, 110, 86, 0.08); }
.le-add-btn i { width: 14px; height: 14px; }

/* Liste des calques (panneau droit) */
.le-layer-list { display: flex; flex-direction: column; gap: 4px; }
.le-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 0.5px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  background: var(--surface);
}
.le-layer-item:hover { background: var(--surface-alt, #FAF9F5); }
.le-layer-item.active { border-color: var(--accent); background: rgba(15, 110, 86, 0.06); }
.le-layer-item.base { opacity: 0.85; }
.le-layer-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  border: 0.5px solid var(--border);
}
.le-layer-info { flex: 1; min-width: 0; }
.le-layer-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.le-layer-meta {
  font-size: 9.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Contrôles du calque actif */
.le-controls { display: flex; flex-direction: column; gap: 10px; }
.le-ctrl { display: flex; flex-direction: column; gap: 4px; }
.le-ctrl-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.le-ctrl-row { display: flex; gap: 6px; align-items: center; }
.le-ctrl-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.le-ctrl-row input[type="number"] {
  width: 60px;
  font-size: 11px;
  padding: 3px 5px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.le-ctrl input[type="range"] { width: 100%; accent-color: var(--accent); }
.le-ctrl-btn {
  border: 0.5px solid var(--border);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.le-ctrl-btn:hover { background: var(--surface-alt, #F1EFE8); }
.le-ctrl-btn i { width: 13px; height: 13px; }
.le-ctrl-danger { color: #A32D2D; border-color: rgba(163, 45, 45, 0.4); width: 100%; padding: 6px 10px; margin-top: 4px; }
.le-ctrl-danger:hover { background: rgba(163, 45, 45, 0.08); }

.le-side-foot {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 0.5px solid var(--border);
  display: flex;
  gap: 8px;
}
.le-btn {
  flex: 1;
  padding: 8px 14px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.le-btn:hover { background: var(--surface-alt, #F1EFE8); }
.le-btn-primary {
  background: var(--accent);
  color: var(--accent-fg, white);
  border-color: var(--accent);
  font-weight: 500;
}
.le-btn-primary:hover { background: #0A5A47; }
.le-btn i { width: 13px; height: 13px; }

/* Mobile : panneau côté → en bas */
@media (max-width: 900px) {
  .layer-editor { flex-direction: column; }
  .le-side { width: 100%; max-height: 50vh; border-left: none; border-top: 0.5px solid var(--border); }
}

/* ════════════════════════════════════════════════════════════════
   v2.18.73 — Import PDF dans l'éditeur calques + transparence du blanc
   ════════════════════════════════════════════════════════════════ */

/* Sélecteur de page PDF (multi-pages) */
.pdf-page-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdf-page-picker {
  background: var(--surface);
  border-radius: 8px;
  padding: 18px 22px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.pdf-page-picker header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pdf-page-picker header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.pdf-page-picker header button {
  border: 0.5px solid var(--border);
  background: var(--surface);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
}
.pdf-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.pdf-page-btn {
  padding: 12px 6px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pdf-page-btn:hover {
  border-color: var(--accent);
  background: rgba(15, 110, 86, 0.06);
  color: var(--accent);
}

/* Hint sous contrôle */
.le-ctrl-hint {
  font-size: 9.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}

/* Badge "PDF" sur le calque dans la liste */
.le-layer-item.is-pdf .le-layer-name::before {
  content: '📄';
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════
   v2.18.74 — Toggle Mode multiplier + algo amélioré key blanc
   ════════════════════════════════════════════════════════════════ */

.le-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--ink);
  width: 100%;
}
.le-toggle-btn:hover { border-color: var(--accent); }
.le-toggle-dot {
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.le-toggle-dot::after {
  content: '';
  position: absolute;
  top: 1.5px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.le-toggle-btn.on .le-toggle-dot { background: #0F6E56; }
.le-toggle-btn.on .le-toggle-dot::after { left: 15px; }
.le-toggle-label { font-weight: 500; }
.le-toggle-btn.on .le-toggle-label { color: #0F6E56; }

/* ════════════════════════════════════════════════════════════════
   v2.18.79 — Le CSS @media print a été DÉPLACÉ dans cr_print.js
   ════════════════════════════════════════════════════════════════
   Approche v76-v78 (@media print sur DOM live) abandonnée :
   - Thème dark cassait les var(--ink) → texte invisible
   - #app/#main/#view en flex+overflow:hidden clippaient le rendu
   - Conteneurs SPA cachés / SW cache compliquaient le debug
   La nouvelle approche : window.open() avec HTML+CSS dédié,
   construit from scratch dans cr_print.js. Garanti propre.
*/

/* ════════════════════════════════════════════════════════════════
   v2.18.80 — Page de garde du CR (S3.5)
   ════════════════════════════════════════════════════════════════ */

.pg-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 6px 24px;
}

/* ─── En-tête formel centré (style A) ─── */
.pg-head-formel {
  text-align: center;
  padding: 16px 12px 14px;
  border-bottom: 1.5px solid var(--accent, #0F6E56);
  background: linear-gradient(to bottom, rgba(15, 110, 86, 0.04), transparent);
  border-radius: 6px 6px 0 0;
}
.pg-h-eyebrow {
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 500;
}
.pg-h-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.pg-h-meta {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ─── Sections ─── */
.pg-section { display: flex; flex-direction: column; gap: 8px; }
.pg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pg-section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pg-section-title i { width: 14px; height: 14px; }
.pg-section-sub {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 11px;
}
.pg-section-actions { display: flex; gap: 4px; }

.pg-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.pg-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.pg-card-title i { width: 14px; height: 14px; }

.pg-empty {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 16px 12px;
  background: var(--surface-alt, rgba(0,0,0,0.02));
  border-radius: 4px;
}

.pg-mini-btn {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--ink);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.pg-mini-btn:hover { background: var(--surface-alt, rgba(0,0,0,0.04)); border-color: var(--accent, #0F6E56); }
.pg-mini-btn i { width: 11px; height: 11px; }
.pg-mini-btn.pg-danger { color: #A32D2D; border-color: rgba(163, 45, 45, 0.3); }
.pg-mini-btn.pg-danger:hover { background: rgba(163, 45, 45, 0.06); }

/* ─── Présences (cartes style B) ─── */
.pg-presences-list { display: flex; flex-direction: column; gap: 4px; }
.pg-presence-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  transition: background 0.1s;
}
.pg-presence-row:hover { background: var(--surface-alt, rgba(0,0,0,0.02)); }
.pg-presence-row.pending {
  background: rgba(186, 117, 23, 0.04);
  border-color: rgba(186, 117, 23, 0.25);
}
.pg-presence-row.ponctuel {
  border-color: rgba(83, 74, 183, 0.25);
  background: rgba(83, 74, 183, 0.03);
}

.pg-pres-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--avatar-color, #0F6E56);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
[data-theme="dark"] .pg-pres-role { color: #AFA9EC; }

.pg-pres-pending-badge {
  background: rgba(186, 117, 23, 0.15);
  color: #BA7517;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.pg-pres-ponctuel-badge {
  background: rgba(83, 74, 183, 0.15);
  color: #534AB7;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}
[data-theme="dark"] .pg-pres-ponctuel-badge { color: #AFA9EC; }
.pg-pres-toggle.active {
  background: var(--active-color, var(--accent));
  color: white;
  border-color: var(--active-color, var(--accent));
}

.pg-add-ponctuel {
  width: 100%;
  padding: 8px 12px;
  border: 0.5px dashed var(--border);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.pg-add-ponctuel:hover {
  border-color: var(--accent, #0F6E56);
  color: var(--accent, #0F6E56);
  border-style: solid;
}
.pg-add-ponctuel i { width: 12px; height: 12px; }

.pg-ponc-input {
  background: transparent;
  border: none;
  border-bottom: 0.5px dashed var(--border);
  padding: 1px 2px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}
.pg-ponc-input:focus { border-bottom-color: var(--accent, #0F6E56); border-bottom-style: solid; }
.pg-ponc-input-sm { font-size: 10.5px; color: var(--ink-soft); width: 80px; }

/* ─── Photos couverture ─── */
.pg-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.pg-photo-thumb {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 4px;
  border: 0.5px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}
.pg-photo-thumb:hover { border-color: var(--accent, #0F6E56); }
.pg-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pg-photo-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 9px;
  padding: 2px 4px;
  font-style: italic;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-photo-add {
  aspect-ratio: 4/3;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 9.5px;
  font-family: inherit;
}
.pg-photo-add:hover {
  border-color: var(--accent, #0F6E56);
  color: var(--accent, #0F6E56);
  background: rgba(15, 110, 86, 0.04);
}
.pg-photo-add i { width: 16px; height: 16px; }

/* ─── Observations ─── */
.pg-observations {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px;
  resize: vertical;
  line-height: 1.5;
}
.pg-observations:focus { outline: none; border-color: var(--accent, #0F6E56); }
.pg-observations::placeholder { color: var(--ink-dim); font-style: italic; }

/* v2.18.81 — Sommaire : zone de clic étendue à toute la ligne */
.cr-sidebar-section-wrap {
  cursor: pointer;
}
.cr-sidebar-section-wrap input,
.cr-sidebar-section-wrap button,
.cr-sidebar-section-wrap .cr-sidebar-drag {
  cursor: auto;
}
.cr-sidebar-section-wrap .cr-sidebar-drag { cursor: grab; }

/* ════════════════════════════════════════════════════════════════
   v2.18.81 — Page de garde refonte boutons (cycle P/A/E + conv)
   ════════════════════════════════════════════════════════════════ */

/* Refonte de la grid de ligne pour 3 cellules à droite : cycle + conv + (delete optionnel) */
.pg-presence-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
}

/* Bouton unique cycle d'état P/A/E */
.pg-pres-cycle {
  min-width: 72px;
  padding: 4px 10px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  text-align: center;
}
.pg-pres-cycle:hover { border-color: var(--ink-soft); }
.pg-pres-cycle.on {
  /* Le style.background est mis inline depuis JS selon l'état */
  font-weight: 600;
}

/* Bouton convocation prochaine (toggle) */
.pg-pres-conv {
  padding: 4px 8px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  font-size: 10.5px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pg-pres-conv:hover { border-color: #0C447C; color: #0C447C; }
.pg-pres-conv i { width: 12px; height: 12px; }
.pg-pres-conv.on {
  background: #0C447C;
  color: white;
  border-color: #0C447C;
  font-weight: 500;
}
[data-theme="dark"] .pg-pres-no-personne-tag { background: rgba(255,255,255,0.08); }
.pg-presence-row.no-personne { opacity: 0.92; }

/* ════════════════════════════════════════════════════════════════
   v2.18.84 — Carte CR cliquable (était <a>) + bouton supprimer
   ════════════════════════════════════════════════════════════════ */

.cr-card {
  position: relative;
  cursor: pointer;
  grid-template-columns: 80px 1fr auto auto 32px;
}
.cr-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cr-card-del {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  border: 0.5px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.cr-card:hover .cr-card-del { opacity: 1; }
.cr-card-del:hover {
  background: rgba(163, 45, 45, 0.08);
  color: #A32D2D;
  border-color: rgba(163, 45, 45, 0.3);
}
.cr-card-del:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.cr-card-del:disabled:hover {
  background: transparent;
  color: var(--ink-dim);
  border-color: transparent;
}
.cr-card-del i { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.85 — Volet administratif du CR (S3.2)
   ════════════════════════════════════════════════════════════════ */

.cradmin-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 6px 24px;
}

/* En-tête */
.cradmin-head {
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgba(15, 110, 86, 0.04), transparent);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #0F6E56);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cradmin-h-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cradmin-h-title i { width: 16px; height: 16px; }
.cradmin-h-date { font-size: 11px; color: var(--ink-soft); }
.cradmin-h-date strong { color: var(--ink); }

/* Sections */
.cradmin-section { display: flex; flex-direction: column; gap: 6px; }
.cradmin-sec-title {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cradmin-sec-title i { width: 13px; height: 13px; }
.cradmin-sec-title .th-sub {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 10.5px;
}

/* Tables */
.cradmin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.cradmin-table thead th {
  background: var(--surface-alt, rgba(0,0,0,0.02));
  text-align: left;
  font-weight: 500;
  padding: 5px 9px;
  color: var(--ink-soft);
  font-size: 10.5px;
  border-bottom: 0.5px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cradmin-table .th-sub {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-dim);
  font-weight: 400;
  font-size: 9.5px;
  margin-left: 4px;
}
.cradmin-table th.num, .cradmin-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cradmin-table tbody td {
  padding: 5px 9px;
  border-bottom: 0.5px dashed var(--border);
}
.cradmin-table tbody tr:last-child td { border-bottom: none; }
.cradmin-table tbody tr:hover { background: var(--surface-alt, rgba(0,0,0,0.02)); }

.cradmin-id-tbl th {
  width: 160px;
  background: transparent;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  font-size: 11px;
}

/* Empty states */
.cradmin-empty {
  padding: 12px 14px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-style: italic;
  background: var(--surface);
  border: 0.5px dashed var(--border);
  border-radius: 4px;
  text-align: center;
}
.cradmin-empty-sm { padding: 8px 12px; font-size: 11px; }

/* Lot bloc */
.cradmin-lot-bloc { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cradmin-lot-head {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 0 2px;
}

/* Statut pill */
.cradmin-statut-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(0,0,0,0.06);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cradmin-statut-pill.cradmin-statut-en_cours { background: rgba(15, 110, 86, 0.12); color: #0F6E56; }
.cradmin-statut-pill.cradmin-statut-terminee { background: rgba(83, 74, 183, 0.12); color: #534AB7; }
.cradmin-statut-pill.cradmin-statut-suspendue,
.cradmin-statut-pill.cradmin-statut-ajournee  { background: rgba(186, 117, 23, 0.12); color: #BA7517; }
.cradmin-statut-pill.cradmin-statut-abandonnee,
.cradmin-statut-pill.cradmin-statut-refuse    { background: rgba(163, 45, 45, 0.10); color: #A32D2D; }
.cradmin-statut-pill.cradmin-statut-emis,
.cradmin-statut-pill.cradmin-statut-notifie,
.cradmin-statut-pill.cradmin-statut-accepte   { background: rgba(15, 110, 86, 0.12); color: #0F6E56; }

[data-theme="dark"] .cradmin-statut-pill { background: rgba(255,255,255,0.06); }

/* Jours restants */
.cradmin-jr {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cradmin-jr-ok    { background: rgba(15, 110, 86, 0.10); color: #0F6E56; }
.cradmin-jr-today { background: rgba(186, 117, 23, 0.15); color: #BA7517; }
.cradmin-jr-late  { background: rgba(163, 45, 45, 0.12); color: #A32D2D; }
.cradmin-jr-done  { background: rgba(83, 74, 183, 0.10); color: #534AB7; font-style: italic; }

/* Barre de progression */
.cradmin-progress {
  position: relative;
  width: 100px;
  height: 16px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.cradmin-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #0F6E56, #1D9E75);
  transition: width 0.3s;
}
.cradmin-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
  color: white;
}
[data-theme="dark"] .cradmin-progress { background: rgba(255,255,255,0.08); }

/* OS delta */
.cradmin-table td.num.pos { color: #A32D2D; font-weight: 500; }
.cradmin-table td.num.neg { color: #0F6E56; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   v2.18.85 — Présents : nom, prénom, fonction, entreprise, rôle
   ════════════════════════════════════════════════════════════════ */

/* Structure ligne refondue : avatar | fields (2 lignes) | toggles */
.pg-presence-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
}
.pg-pres-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pg-pres-f-identity {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.pg-pres-f-nom {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.pg-pres-f-nom-empty {
  color: var(--ink-dim);
  font-style: italic;
  font-weight: 400;
}
.pg-pres-f-fonction {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.pg-pres-f-fonction:before { content: '·'; margin-right: 4px; color: var(--ink-dim); }
.pg-pres-f-affil {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--ink-soft);
}
.pg-pres-f-entreprise {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  color: var(--ink);
}
.pg-pres-f-entreprise i { width: 10px; height: 10px; opacity: 0.6; }
.pg-pres-f-role {
  color: #534AB7;
  background: rgba(83, 74, 183, 0.08);
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .pg-pres-f-role { color: #AFA9EC; background: rgba(175, 169, 236, 0.12); }

/* Inputs des ponctuels : compacts en ligne */
.pg-ponc-input-name {
  width: 90px;
  font-size: 11.5px;
  font-weight: 500;
}
.pg-ponc-input-sm { font-size: 10.5px; width: 130px; }
.pg-pres-fields input.pg-ponc-input { padding: 1px 4px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.87 — Sommaire avec scroll continu
   ════════════════════════════════════════════════════════════════ */

/* Espace entre les sections pour mieux les distinguer dans le scroll continu */
.cr-section-wrap {
  scroll-margin-top: 12px;
  padding: 18px 4px 28px;
  border-bottom: 0.5px dashed var(--border);
}
.cr-section-wrap:last-child { border-bottom: none; }
.cr-section-wrap:first-child { padding-top: 6px; }

/* Indication visuelle : la section dont l'utilisateur est en train de voir
   le contenu est highlightée dans le sommaire (mise en place par le scroll-spy) */
.cr-sidebar-section-wrap.active {
  background: rgba(15, 110, 86, 0.08);
  border-left: 2px solid var(--accent, #0F6E56);
}
[data-theme="dark"] .cr-sidebar-section-wrap.active {
  background: rgba(15, 110, 86, 0.18);
}

/* ════════════════════════════════════════════════════════════════
   v2.18.87 — Drag&drop présences (PG)
   ════════════════════════════════════════════════════════════════ */

/* Re-layout des rows : drag-handle + avatar + fields + cycle + conv (+ delete ponctuel) */
.pg-presence-row {
  display: grid;
  grid-template-columns: 16px 28px 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
}

.pg-pres-drag-handle {
  width: 16px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--ink-dim);
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s;
  touch-action: none;       /* v2.18.89 — empêche le scroll de prendre le contrôle sur tablette */
  user-select: none;
}
.pg-pres-drag-handle:hover { opacity: 1; color: var(--accent, #0F6E56); }
.pg-pres-drag-handle:active { cursor: grabbing; }
.pg-pres-drag-handle i,
.pg-pres-drag-handle svg {
  width: 12px; height: 14px;
  pointer-events: none;     /* v2.18.89 — l'icône ne doit pas intercepter le pointerdown */
}

/* Pendant le drag */
.pg-presence-row.pg-drag-source {
  opacity: 0.4;
}
.pg-presence-row.pg-drag-over {
  border-top: 2px solid var(--accent, #0F6E56);
  margin-top: -1px;
}
[data-theme="dark"] .reprise-rem-row:hover { background: rgba(255,255,255,0.04); }
.reprise-rem-row.closed { opacity: 0.55; }
[data-theme="dark"] .reprise-rem-badge { color: #AFA9EC; }
.reprise-modal-foot .btn { padding: 6px 14px; font-size: 12px; }
.reprise-modal-foot .btn i { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════
   v2.18.89 — Récap actions cliquables (checkbox + goto)
   ════════════════════════════════════════════════════════════════ */

.cr-recap-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
  align-items: start;
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 1px;
}
.cr-recap-item:hover { background: var(--surface, rgba(0,0,0,0.02)); }

.cr-recap-checkbox-btn {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  color: var(--ink-soft);
  transition: all 0.12s;
}
.cr-recap-checkbox-btn:hover {
  background: var(--accent, #0F6E56);
  color: white;
  border-color: var(--accent, #0F6E56);
}
.cr-recap-checkbox-btn i { width: 12px; height: 12px; }

.cr-recap-goto {
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  border-radius: 3px;
  width: 100%;
  color: inherit;
}
.cr-recap-goto:hover { background: rgba(15, 110, 86, 0.06); }
.cr-recap-goto:hover .cr-recap-code { color: var(--accent, #0F6E56); }

/* Flash highlight quand on arrive sur une remarque depuis le récap */
.rem-card-highlight {
  animation: remHighlight 1.6s ease-out;
}
@keyframes remHighlight {
  0%   { background: rgba(15, 110, 86, 0.18); box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.4); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

/* Afficher le FAB uniquement quand on scroll */
@media (max-width: 768px) {
}

/* ─── Responsive tablet ───────────────────────────────────── */
@media (max-width: 900px) {
}
@media (max-width: 700px) {
}
@keyframes carnetBlocFlash {
  0%   { background: rgba(15, 110, 86, 0.25); }
  100% { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════
   v2.18.91 — Retours mindmap (notifications, territoire, perso)
   ═══════════════════════════════════════════════════════════ */

/* Fréquence articles CCAG */
.notif-freq-choices {
  display: inline-flex;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.notif-freq-btn {
  padding: 6px 14px;
  background: var(--bg);
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-soft);
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
}
.notif-freq-btn + .notif-freq-btn { border-left: 0.5px solid var(--border); }
.notif-freq-btn:hover { background: rgba(0,0,0,0.03); }
.notif-freq-btn.active {
  background: var(--accent, #0F6E56);
  color: white;
  font-weight: 500;
}

/* Cadenas espace perso */
.perso-lock {
  font-size: 10px;
  opacity: 0.7;
  cursor: help;
  margin-left: 2px;
}

/* Widget Mes tâches (Accueil) — colonnes triables */
.todos-widget-groupby { display: flex; align-items: center; gap: 8px; }
.input-sm { padding: 4px 8px; font-size: 11.5px; }

.todos-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 8px;
}

.todos-column {
  background: rgba(0,0,0,0.02);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
[data-theme="dark"] .todos-column { background: rgba(255,255,255,0.02); }

.todos-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0 2px;
}
.todos-column-count {
  background: var(--accent, #0F6E56);
  color: white;
  font-size: 10px;
  padding: 0 6px;
  border-radius: 8px;
  line-height: 16px;
}

.todos-column-items { display: flex; flex-direction: column; gap: 5px; }

.todos-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 7px;
  align-items: start;
  padding: 7px 8px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.1s;
}
.todos-item:hover {
  border-color: var(--accent, #0F6E56);
  transform: translateX(1px);
}

.todos-item-check {
  width: 13px; height: 13px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
  margin-top: 2px;
}

.todos-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.todos-item-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.todos-item-meta { display: flex; align-items: center; gap: 6px; }
.todos-item-date {
  font-size: 10px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.todos-item-src {
  font-size: 9px;
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.todos-item-src.src-carnet { background: rgba(15,110,86,0.1); color: var(--accent, #0F6E56); }
.todos-item-src.src-cr { background: rgba(83,74,183,0.12); color: #534AB7; }
[data-theme="dark"] .todos-item-src.src-cr { color: #AFA9EC; }

/* Mobile : les 3 colonnes s'empilent */
@media (max-width: 700px) {
}

/* Carnet de l'affaire (extraction antichronologique) */
.ca-date-block {
  margin-bottom: 22px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.ca-date-header {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  border-bottom: 1.5px solid var(--accent, #0F6E56);
  display: inline-block;
  padding-bottom: 2px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.ca-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.ca-entry.ca-todo.done .ca-todo-text {
  text-decoration: line-through;
  color: var(--ink-dim);
}
.ca-quote { color: var(--accent, #0F6E56); }
.ca-src {
  font-size: 10.5px;
  color: var(--ink-dim);
  font-style: italic;
  text-decoration: none;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ca-src:hover { color: var(--accent, #0F6E56); text-decoration: underline; }
.ca-registre-group {
  border-left: 2px solid var(--accent, #0F6E56);
  padding-left: 10px;
  margin: 4px 0;
}
.ca-registre-src { text-align: right; }
.ca-registre-src .ca-src { max-width: none; }
.ca-image img {
  max-width: 260px;
  max-height: 180px;
  border-radius: 6px;
  border: 0.5px solid var(--border);
}
.ca-legende { font-size: 11px; color: var(--ink-soft); font-style: italic; }

/* En-tête : masquer l'ancienne règle 3 colonnes est inutile — le header garde
   var(--reg-c1) var(--reg-c2) var(--reg-c3) et les sous-rangées c2/c3 occupent
   1fr = le même espace restant → alignement conservé */

/* Mobile : sous-rangées empilées */
@media (max-width: 700px) {
}
.scratch-context-chip .icon { width: 11px; height: 11px; flex-shrink: 0; }

.scratch-save-todo {
  background: transparent !important;
  border: 0.5px solid var(--accent, #0F6E56) !important;
  color: var(--accent, #0F6E56) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scratch-save-todo .icon { width: 12px; height: 12px; }
.scratch-save-todo:hover { background: rgba(15,110,86,0.08) !important; }

.scratch-loading {
  padding: 24px 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-dim);
  font-style: italic;
}

.scratch-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--ink-soft);
}
.scratch-empty i { width: 26px; height: 26px; opacity: 0.3; margin-bottom: 8px; }
.scratch-empty p { font-size: 12px; margin: 4px 0; }
.scratch-empty-sub { font-size: 10.5px; color: var(--ink-dim); }

.scratch-day { padding: 8px 12px 4px; }
.scratch-day-header {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--accent, #0F6E56);
  border-bottom: 1px solid var(--accent, #0F6E56);
  display: inline-block;
  padding-bottom: 1px;
  margin-bottom: 6px;
  text-transform: capitalize;
}

.scratch-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
}
.scratch-entry:hover { background: rgba(0,0,0,0.03); }
[data-theme="dark"] .scratch-entry:hover { background: rgba(255,255,255,0.04); }
.scratch-entry-todo.done .scratch-entry-text {
  text-decoration: line-through;
  color: var(--ink-dim);
}
.scratch-entry-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.scratch-entry-img {
  max-width: 100%;
  max-height: 120px;
  border-radius: 5px;
  border: 0.5px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   v2.18.95 — Filiation tâche → sous-tâches dans les extractions
   (carnet de l'affaire + panneau latéral)
   ═══════════════════════════════════════════════════════════ */

.cah-ligne { display: flex; flex-direction: column; gap: 2px; }

.cah-group { padding: 2px 0; }
.cah-group + .cah-group { border-top: 0.5px dashed var(--border); margin-top: 2px; padding-top: 4px; }

.cah-des-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cah-num {
  font-size: 12px;
  color: var(--accent, #0F6E56);
  flex-shrink: 0;
  min-width: 15px;
  opacity: 0.85;
}

.cah-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  min-width: 0;
  flex: 1;
}
.cah-des .cah-text { font-weight: 500; }
.cah-bullet { color: var(--ink-soft); font-size: 11px; flex-shrink: 0; }
.cah-text { flex: 1; min-width: 0; word-break: break-word; }
.cah-todo.done .cah-text {
  text-decoration: line-through;
  color: var(--ink-dim);
  font-weight: 400;
}

/* Sous-tâches : indentées sous leur désignation avec guide vertical */
.cah-children {
  margin-left: 21px;
  padding-left: 10px;
  border-left: 1.5px solid rgba(15, 110, 86, 0.25);
  display: flex;
  flex-direction: column;
}
.cah-sub { font-size: 12px; }

/* Actions non liées */
.cah-orphans { opacity: 0.92; }

/* Dans le panneau latéral, le groupe registre est cliquable vers la source */
.scratch-registre {
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
}
.scratch-registre:hover { background: rgba(0,0,0,0.02); }
[data-theme="dark"] .scratch-registre:hover { background: rgba(255,255,255,0.03); }

/* ═══════════════════════════════════════════════════════════
   v2.18.96 — Annotations Sébastien (captures iPad 23/07)
   ═══════════════════════════════════════════════════════════ */

/* ── Panneau latéral redimensionnable ── */
#scratch { position: relative; }
.scratch-resizer-handle {
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
}
.scratch-resizer-handle::after {
  content: '';
  position: absolute;
  left: 3px; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.12s;
}
.scratch-resizer-handle:hover::after,
.scratch-resizer-handle:active::after { background: var(--accent, #0F6E56); }
.scratch-textarea { min-height: 54px; }
.scratch-empty { padding: 14px 14px; text-align: left; }
.scratch-empty i { display: none; }
.scratch-empty p { font-size: 11.5px; margin: 2px 0; }
.scratch-day { padding: 6px 10px 2px; }

/* Toast de confirmation d'enregistrement */
.scratch-toast {
  margin: 6px 10px;
  padding: 6px 10px;
  background: rgba(15, 110, 86, 0.12);
  color: var(--accent, #0F6E56);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  animation: scratchToastIn 0.2s ease-out;
}
@keyframes scratchToastIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Citations : métadonnées (affaire + tags) */
.cit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-left: 17px;
  flex-wrap: wrap;
}
.cit-meta select, .cit-meta input {
  border: 0.5px dashed var(--border);
  background: transparent;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: inherit;
  outline: none;
  max-width: 180px;
}
.cit-meta select:hover, .cit-meta input:focus { border-color: var(--accent, #0F6E56); border-style: solid; }
.cit-tag-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cit-tag-rm { border:none; background:transparent; cursor:pointer; color:inherit; opacity:0.6; padding:0 2px; font-size: 12px; }
.cit-tag-rm:hover { opacity: 1; }
.agenda-task-row.late { border-left: 3px solid #A32D2D; }
.agenda-task-row.today { border-left: 3px solid var(--accent, #0F6E56); }
.agenda-task-row.late .agenda-task-date { color: #A32D2D; }
.agenda-task-row.today .agenda-task-date { color: var(--accent, #0F6E56); }
.agenda-task-aff {
  font-size: 10px;
  font-weight: 500;
  background: rgba(15,110,86,0.1);
  color: var(--accent, #0F6E56);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.agenda-task-src {
  font-size: 9px;
  text-transform: uppercase;
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}
.agenda-task-src.src-carnet { background: rgba(15,110,86,0.1); color: var(--accent, #0F6E56); }
.agenda-task-src.src-cr { background: rgba(83,74,183,0.12); color: #534AB7; }

/* Panneau : champs détaillés (mêmes colonnes que le registre) */
.scratch-extra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}
.scratch-extra-input {
  border: 0.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface, #fff);
  font-size: 11.5px;
  padding: 5px 8px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}
.scratch-extra-input:focus { border-color: var(--accent, #0F6E56); }
.scratch-extra-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}
.scratch-extra-date input[type="date"] {
  border: 0.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface, #fff);
  font-size: 11px;
  padding: 3px 6px;
  color: var(--ink);
  font-family: inherit;
}
.scratch-src-badge {
  font-size: 9px;
  text-transform: uppercase;
  background: rgba(83,74,183,0.12);
  color: #534AB7;
  padding: 0 5px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
  font-weight: 500;
}
[data-theme="dark"] .scratch-eche-row:hover { background: rgba(255,255,255,0.04); }
.scratch-eche-row.late { border-left: 2px solid #A32D2D; }
.scratch-eche-row.today { border-left: 2px solid var(--accent, #0F6E56); }
.scratch-eche-row.late .scratch-eche-date { color: #A32D2D; }
.scratch-day-header.late { color: #A32D2D; border-bottom-color: #A32D2D; }
[data-theme="dark"] .scratch-biblio-row:hover { background: rgba(255,255,255,0.04); }
.scratch-biblio-row .icon { width: 13px; height: 13px; color: var(--ink-soft); flex-shrink: 0; }
.scratch-biblio-row.main { background: rgba(15,110,86,0.05); }
.cal-cell.head { font-size: 9.5px; color: var(--ink-dim); cursor: default; aspect-ratio: auto; padding: 2px 0; }
.cal-cell.empty { cursor: default; }
.cal-cell:not(.head):not(.empty):hover { background: rgba(0,0,0,0.05); }
.cal-cell.today { outline: 1.5px solid var(--accent, #0F6E56); }
.cal-cell.sel { background: var(--accent, #0F6E56); color: white; }
.cal-cell.sel .cal-dot { background: white; }
@keyframes blocFlash {
  0% { background: rgba(15,110,86,0.18); }
  100% { background: transparent; }
}

/* v2.18.98b — Chips d'échéances dans la bande « Toute la journée » */
.agenda-grid-allday-cell {
  min-height: 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 3px;
}
.agenda-allday-chip {
  display: block;
  font-size: 10px;
  line-height: 1.35;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2.5px solid transparent;
  transition: transform 0.1s;
}
.agenda-allday-chip:hover { transform: translateX(1px); }
.agenda-allday-chip b { font-weight: 600; }
.agenda-allday-chip.src-carnet {
  background: rgba(15,110,86,0.1);
  border-left-color: var(--accent, #0F6E56);
  color: var(--accent, #0F6E56);
}
.agenda-allday-chip.src-cr {
  background: rgba(83,74,183,0.1);
  border-left-color: #534AB7;
  color: #534AB7;
}
.agenda-allday-chip.late {
  background: rgba(163,45,45,0.1);
  border-left-color: #A32D2D;
  color: #A32D2D;
}
[data-theme="dark"] .agenda-allday-chip.src-carnet { color: #7FD4BC; }
[data-theme="dark"] .agenda-allday-chip.src-cr { color: #AFA9EC; }
[data-theme="dark"] .agenda-allday-chip.late { color: #E89B9B; }

/* ═══════════════════════════════════════════════════════════
   v2.19.0 — Agenda fonctionnel + workflow réalisation CR + select panneau
   ═══════════════════════════════════════════════════════════ */

/* Événements dans la grille */
.agenda-grid-cell { position: relative; cursor: pointer; }
.agenda-grid-cell:hover { background: rgba(15,110,86,0.03); }
.agenda-event {
  position: absolute;
  left: 2px; right: 2px;
  background: color-mix(in srgb, var(--evt-color) 14%, transparent);
  border-left: 3px solid var(--evt-color);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.agenda-event:hover { filter: brightness(0.96); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.agenda-event-time { font-weight: 600; color: var(--evt-color); font-variant-numeric: tabular-nums; }
.agenda-event-title { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agenda-modal-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 10px; }

/* Vue mois */
.agenda-month {
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.agenda-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 0.5px solid var(--border);
}
.agenda-month-head span {
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}
.agenda-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.agenda-month-cell {
  min-height: 92px;
  border-right: 0.5px solid var(--border-soft, var(--border));
  border-bottom: 0.5px solid var(--border-soft, var(--border));
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.agenda-month-cell:hover { background: rgba(15,110,86,0.03); }
.agenda-month-cell.today { background: rgba(15,110,86,0.06); }
.agenda-month-cell.empty { cursor: default; background: rgba(0,0,0,0.015); }
.agenda-month-num { font-size: 11px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.agenda-month-cell.today .agenda-month-num { color: var(--accent, #0F6E56); font-weight: 700; }
.agenda-month-evt {
  font-size: 9.5px;
  padding: 1px 4px;
  border-radius: 3px;
  border-left: 2px solid var(--evt-color);
  background: color-mix(in srgb, var(--evt-color) 12%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-month-task {
  font-size: 9.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(15,110,86,0.1);
  color: var(--accent, #0F6E56);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-month-task.late { background: rgba(163,45,45,0.1); color: #A32D2D; }
.agenda-month-more { font-size: 9px; color: var(--ink-dim); }

/* Bandeau « Réalisée au registre » dans le CR */
.rem-todo-reg-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  margin: 4px 0 0;
  background: rgba(15,110,86,0.08);
  border: 0.5px dashed var(--accent, #0F6E56);
  border-radius: 6px;
  font-size: 11.5px;
}
.rem-todo-reg-txt { flex: 1; color: var(--accent, #0F6E56); font-weight: 500; }
.rem-todo-reg-btn {
  border: 0.5px solid var(--border);
  background: var(--surface, #fff);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-soft);
}
.rem-todo-reg-btn:hover { border-color: var(--ink-soft); }
.rem-todo-reg-btn.confirm {
  background: var(--accent, #0F6E56);
  border-color: var(--accent, #0F6E56);
  color: white;
  font-weight: 500;
}
.rem-todo-reg-btn.confirm:hover { filter: brightness(1.1); }
.scratch-layout-select {
  width: 100%;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface, #fff);
  font-size: 11.5px;
  padding: 5px 8px;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}
.scratch-layout-select:focus { outline: none; border-color: var(--accent, #0F6E56); }

/* Contrôles du panneau (mise en page + thème) */
.scratch-carnet-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 2px;
}

/* Sous-tâches dans le widget Accueil */
.todos-chk { align-self: flex-start; margin-top: 2px; flex-shrink: 0; }
.todos-item { text-decoration: none; }
.todos-item.done .todos-item-text, .todos-sub.done .todos-sub-text { text-decoration: line-through; color: var(--ink-dim); }
.todos-item-text { text-decoration: none; color: inherit; }
.todos-item-text:hover { color: var(--accent, #0F6E56); }
.todos-sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1.5px solid rgba(15,110,86,0.25);
  font-size: 11.5px;
}
.todos-sub-text { flex: 1; min-width: 0; color: var(--ink); }

/* Bouton Apparence : UNE ligne */
.ap-open-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ap-open-btn .icon, .ap-open-btn svg { flex-shrink: 0; }

/* Agenda : événements superposables + drag */
.agenda-event { touch-action: none; user-select: none; }
.agenda-event.dragging { opacity: 0.75; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,0.25); pointer-events: none; }
.agenda-grid-cell.drop-target { background: rgba(15,110,86,0.12) !important; }

/* Modal synchro */
.ag-sync-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.ag-sync-body .input { width: 100%; }
.ag-sync-note { font-size: 10.5px; color: var(--ink-dim); line-height: 1.5; margin: 0; }
.ag-sync-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* v2.19.7 — Meilleur agenda : now-line, quick add, comptes, mois draggable */
.agenda-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #E24B4A;
  z-index: 5;
  pointer-events: none;
}
.agenda-now-dot {
  position: absolute;
  left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E24B4A;
}
.agenda-grid-cell.is-today { background: rgba(15,110,86,0.025); }
.ag-quick {
  flex: 1;
  min-width: 160px;
  max-width: 420px;
  font-size: 12px;
  border-radius: 8px;
}
.ag-acc-list { display: flex; flex-direction: column; gap: 4px; }
.ag-acc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
}
.ag-acc-label { font-weight: 500; color: var(--ink); flex-shrink: 0; }
.ag-acc-url { color: var(--ink-dim); font-size: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-month-evt { cursor: grab; touch-action: none; user-select: none; }
.agenda-month-evt.dragging { opacity: 0.75; box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
.agenda-month-cell.drop-target { background: rgba(15,110,86,0.14) !important; }

/* v2.19.8 — semaines, week-ends, planning, couleurs, rappels */
.agenda-wnum-head { font-size: 9px; color: var(--accent, #0F6E56); font-weight: 600; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.agenda-wnum { font-size: 8.5px; color: var(--accent, #0F6E56); font-weight: 600; opacity: 0.75; }
.agenda-grid-day-header.weekend .agenda-grid-day-name { color: var(--ink-dim); }
.agenda-month-cell.weekend { background: rgba(0,0,0,0.025); }
[data-theme="dark"] .agenda-month-cell.weekend { background: rgba(255,255,255,0.03); }
.ag-check-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); align-self: end; padding-bottom: 8px; }
.ag-color-row { display: flex; gap: 6px; }
.ag-color-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); cursor: pointer; padding: 0; }
.ag-color-dot.sel { outline: 2px solid var(--accent, #0F6E56); outline-offset: 2px; }
.agenda-list { max-width: 780px; }
.agenda-list-day { margin-bottom: 14px; }
.agenda-list-day-head { font-size: 12.5px; font-weight: 600; color: var(--ink); text-transform: capitalize; border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; }
.agenda-list-day-head.today { color: var(--accent, #0F6E56); border-bottom-color: var(--accent, #0F6E56); }
.agenda-list-row { display: flex; align-items: baseline; gap: 9px; padding: 4px 6px; font-size: 12.5px; border-radius: 5px; cursor: pointer; text-decoration: none; color: var(--ink); }
.agenda-list-row:hover { background: rgba(0,0,0,0.035); }
[data-theme="dark"] .agenda-list-row:hover { background: rgba(255,255,255,0.05); }
.agenda-list-time { font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 88px; flex-shrink: 0; }
.agenda-list-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.agenda-list-title { flex: 1; min-width: 0; }

/* Planning v2 : contrôles */
.agenda-list-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }

/* v2.19.10 — Notes manuscrites (stylet) */
.ink-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
}
.ink-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg, #F4F4F1);
  flex-wrap: wrap;
}
.ink-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.ink-tools { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.ink-btn {
  width: 30px; height: 30px;
  border: 0.5px solid var(--border-strong);
  background: var(--surface, #fff);
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.ink-btn.active { border-color: var(--accent, #0F6E56); color: var(--accent, #0F6E56); background: rgba(15,110,86,0.07); }
.ink-color {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.ink-color.active { outline: 2px solid var(--accent, #0F6E56); outline-offset: 2px; }
.ink-actions { display: flex; gap: 6px; }
.ink-canvas {
  flex: 1;
  touch-action: none;
  cursor: crosshair;
  background: var(--surface, #fff)
    repeating-linear-gradient(transparent, transparent 31px, rgba(15,110,86,0.07) 31px, rgba(15,110,86,0.07) 32px);
}