/* ============================================================
   YIELDING · styles.css
   Esthétique papier, sienne accent, Fraunces / Geist / Geist Mono.
   ============================================================ */

:root {
  --paper: #EFEAE0;
  --paper-2: #F5F1E8;
  --paper-3: #F8F4EB;
  --ink: #15131A;
  --ink-2: #3A3640;
  --ink-3: #6A6470;
  --mist: #B5AB95;
  --hairline: rgba(21,19,26,0.10);
  --hairline-2: rgba(21,19,26,0.05);
  --sienna: #BD4F1C;
  --sienna-soft: rgba(189,79,28,0.10);
  --moss: #5C6E3F;
  --red: #C03030;
  --grid-dot: rgba(21,19,26,0.14);

  --cat-capture: #BD4F1C;
  --cat-process: #4A5D7E;
  --cat-work:    #15131A;
  --cat-biz:     #5C6E3F;
  --cat-admin:   #6A6470;
  --cat-meta:    #8A6E50;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --topbar-h: 48px;
  --dock-h: 60px;
  --sidebar-w: 220px;
}

/* ============================================================
   DARK MODE — toggle via body.dark
   Inversion des valeurs sémantiques. Identité (sienna, moss, red,
   catégories) inchangée pour préserver la cohérence visuelle.
   ============================================================ */
body.dark {
  --paper:   #15131A;   /* fond principal sombre */
  --paper-2: #1E1B24;   /* surface secondaire */
  --paper-3: #26222E;   /* surface tertiaire (modals, cards) */
  --ink:     #F0EBE0;   /* texte principal — papier clair sur sombre */
  --ink-2:   #C5BFB0;   /* texte secondaire */
  --ink-3:   #8A8478;   /* texte muet */
  --mist:    #4A4555;
  --hairline:   rgba(240,235,224,0.10);
  --hairline-2: rgba(240,235,224,0.05);
  --sienna-soft: rgba(189,79,28,0.18);   /* plus visible sur sombre */
  --grid-dot:    rgba(240,235,224,0.14);
}
/* Cas particuliers : inputs et selects en dark */
body.dark input,
body.dark textarea,
body.dark select {
  background: var(--paper-3);
  color: var(--ink);
  border-color: rgba(240,235,224,0.12);
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: var(--ink-3); }
/* Bouton fab + bouton primary : sienna reste sienna en dark */
body.dark .btn--primary { background: var(--sienna); color: #F0EBE0; }
body.dark .btn--primary:hover { background: #D26225; }
/* Carte/badge dark : adapter ombrages */
body.dark .kpi-card,
body.dark .stat-mini,
body.dark .ckp-block,
body.dark .gov-check,
body.dark .gov-metric,
body.dark .intake-card,
body.dark .onb-card {
  background: var(--paper-2);
  border-color: rgba(240,235,224,0.08);
}
/* Modal en dark : fond + close button */
body.dark .auth-modal { background: rgba(0,0,0,0.65); }
body.dark .am-close { background: var(--paper-2); border-color: rgba(240,235,224,0.15); }
/* Bandeau santé dots conservent leurs couleurs sémantiques */
body.dark .ckp-health-dot--ok    { color: #6FBF80; }
body.dark .ckp-health-dot--warn  { color: #D8794A; }
/* Tableaux dark */
body.dark .detail-table th,
body.dark .gt-cell--head,
body.dark .ic-extract th {
  color: var(--ink-3);
  background: var(--paper-3);
}
body.dark .detail-table tr,
body.dark .ic-extract tr { border-color: var(--hairline); }
/* Overlay drop concierge : moins clinquant en dark */
body.dark .global-drop-overlay { background: rgba(189,79,28,0.08); }
body.dark .gdo-inner { background: var(--paper-2); }
/* Cockpit health bar dark */
body.dark .ckp-health { background: var(--paper-2); border-color: rgba(240,235,224,0.08); }
/* Nav left dark */
body.dark .topbar,
body.dark .sidebar,
body.dark .basic-left,
body.dark .basic-right { background: var(--paper-2); border-color: var(--hairline); }
/* Onboarding banner dark — gradient subtil */
body.dark .onb-banner {
  background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
}
body.dark .onb-card--primary { background: var(--ink); color: var(--paper); }
body.dark .onb-card--primary:hover { background: var(--sienna); }
/* Section gouvernance benefits noir → reste noir mais aligné */
body.dark .benefits { background: #0A0810; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }
input::placeholder, textarea::placeholder { color: var(--mist); font-style: italic; }
em, i { font-family: var(--font-display); font-style: italic; }

::selection { background: var(--sienna-soft); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
  z-index: 30;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.brand-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  font-style: italic;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.canvas-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
}
.cs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  transition: background 120ms ease;
}
.cs-trigger:hover { background: var(--paper-3); }
.cs-trigger[aria-expanded="true"] { background: var(--paper-3); }
.cs-arrow { font-size: 10px; color: var(--ink-3); }
.cs-stats {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cs-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(21,19,26,0.08);
  padding: 4px;
  z-index: 40;
}
.cs-menu[hidden] { display: none; }
.cs-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  text-align: left;
  transition: background 120ms ease;
}
.cs-item:hover { background: var(--paper-3); }
.cs-item .cs-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent;
  flex: 0 0 6px;
}
.cs-item.is-current .cs-dot { background: var(--sienna); }
.cs-item-name { font-size: 13px; }
.cs-item-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}
.cs-sep { height: 1px; background: var(--hairline); margin: 4px 4px; }
.cs-action {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.cs-action:hover { background: var(--paper-3); }
.cs-action--primary { color: var(--sienna); }
.cs-action--danger { color: var(--red); }
.cs-action[disabled] { opacity: 0.4; cursor: not-allowed; }

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}
.icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.icon-btn--primary { color: var(--ink); }
.icon-btn--primary:hover { color: var(--sienna); }

/* ============================================================
   LAYOUT (grid: canvas + sidebar)
   ============================================================ */
.layout {
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--dock-h);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
}

.canvas-wrap {
  position: relative;
  overflow: auto;
  background-color: var(--paper-3);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

.canvas {
  position: relative;
  width: 4000px;
  height: 2800px;
  pointer-events: none;
}
.canvas .module { pointer-events: auto; }

.connections-layer {
  position: absolute;
  inset: 0;
  width: 4000px;
  height: 2800px;
  pointer-events: none;
  overflow: visible;
}
.connections-layer .conn {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
  opacity: 0.55;
  pointer-events: stroke;
  cursor: pointer;
  transition: opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease;
}
.connections-layer .conn:hover { opacity: 1; stroke: var(--sienna); stroke-width: 1.75; }
.pending-link {
  fill: none;
  stroke: var(--sienna);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: 0.85;
  pointer-events: none;
}
.pending-link[hidden] { display: none; }
.mod-active-bar[hidden] { display: none; }
.mod-badge[hidden] { display: none; }

.canvas-empty {
  position: absolute;
  top: 80px; left: 80px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--mist);
  font-size: 14px;
  pointer-events: none;
}
.canvas-empty[hidden] { display: none; }
.ce-mark { font-family: var(--font-display); font-size: 20px; }
.ce-text em { color: var(--ink-3); }

/* ============================================================
   SIDEBAR ARCHIVE
   ============================================================ */
.archive-sidebar {
  background: var(--paper-2);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.archive-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--hairline-2);
}
.archive-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.archive-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-3);
}
.archive-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 6px 12px;
}
.archive-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  text-align: center;
  font-size: 12px;
  padding: 24px 12px;
}
.archive-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  transition: background 120ms ease;
}
.archive-item:hover { background: var(--paper-3); }
.ai-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sienna);
  font-size: 13px;
  text-align: right;
}
.ai-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-restore {
  width: 22px; height: 22px;
  border-radius: 4px;
  color: var(--ink-3);
  font-size: 12px;
}
.ai-restore:hover { background: var(--paper-2); color: var(--sienna); }

/* ============================================================
   DOCK (bottom)
   ============================================================ */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--dock-h);
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 20;
}
.dock-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.dock-scroll {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scrollbar-width: thin;
}
.dock-scroll::-webkit-scrollbar { height: 6px; }
.dock-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; }
.dock-group {
  display: flex; align-items: center; gap: 6px;
  padding-right: 8px;
  border-right: 1px solid var(--hairline-2);
}
.dock-group:last-child { border-right: 0; }
.dock-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: grab;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  flex: 0 0 auto;
}
.dock-item:hover { background: var(--paper); border-color: var(--ink-3); }
.dock-item:active { cursor: grabbing; transform: scale(0.97); }
.di-cat-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex: 0 0 5px;
}
.di-mark {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}
.di-name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   MODULE
   ============================================================ */
.module {
  position: absolute;
  width: 220px;
  min-height: 60px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(21,19,26,0.04);
  user-select: none;
  cursor: grab;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.module > .mod-head,
.module > .mod-body { overflow: hidden; }
.module:hover { box-shadow: 0 4px 12px rgba(21,19,26,0.07); }
.module.is-dragging { cursor: grabbing; box-shadow: 0 10px 28px rgba(21,19,26,0.14); z-index: 10; }
.module.is-connected { border-color: rgba(189,79,28,0.35); }

.mod-active-bar {
  height: 2px;
  background: var(--sienna);
  border-radius: 10px 10px 0 0;
}

.mod-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--hairline-2);
}
.mod-title {
  display: inline-flex; align-items: center; gap: 8px;
}
.mod-cat-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.mod-mark {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}
.mod-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mod-close {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink-3);
  transition: background 120ms ease, color 120ms ease;
}
.mod-close:hover { background: var(--paper-3); color: var(--red); }

.mod-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sienna);
  background: var(--sienna-soft);
  border-left: 2px solid var(--sienna);
  padding: 5px 8px;
}

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

.mod-row {
  display: flex; align-items: center; gap: 8px;
}
.mod-field {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1;
}
.mod-flabel {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mod-input,
.mod-input[contenteditable="true"] {
  font-size: 13px;
  color: var(--ink);
  padding: 3px 4px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  min-height: 18px;
  outline: none;
  width: 100%;
}
.mod-input:hover,
.mod-input[contenteditable="true"]:hover { background: var(--paper-3); }
.mod-input:focus,
.mod-input[contenteditable="true"]:focus { background: var(--paper); border-color: var(--hairline); }
.mod-input--mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.mod-input--title { font-family: var(--font-display); font-size: 14px; font-weight: 500; }
.mod-input--big { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
textarea.mod-input { resize: vertical; min-height: 50px; font-family: var(--font-body); }
select.mod-input { cursor: pointer; appearance: none; padding-right: 18px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }

.mod-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
}
.mod-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mist); }
.mod-pill[data-state="ok"] .dot { background: var(--moss); }
.mod-pill[data-state="warn"] .dot { background: var(--sienna); }
.mod-pill[data-state="bad"] .dot { background: var(--red); }

.mod-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mod-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--ink-3); }
.mod-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mod-btn--primary:hover { background: var(--sienna); border-color: var(--sienna); }
.mod-btn--danger { color: var(--red); }
.mod-btn--ghost { background: transparent; border-color: transparent; }

.mod-more {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 2px 4px;
  border-radius: 4px;
}
.mod-more:hover { color: var(--sienna); background: var(--paper-3); }

.mod-details {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--hairline-2);
  overflow: hidden;
  transition: max-height 200ms ease;
}
.mod-details[hidden] { display: none; }

.mod-list {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.mod-list-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 3px 4px;
  border-radius: 4px;
}
.mod-list-row:hover { background: var(--paper-3); }
.mod-list-row .ml-num {
  font-family: var(--font-display); font-style: italic; color: var(--sienna); text-align: right;
}
.mod-list-row .ml-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mod-drop {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--hairline);
  background: var(--paper-3);
  border-radius: 6px;
  padding: 14px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.mod-drop:hover { color: var(--ink-3); border-color: var(--ink-3); }
.mod-drop.is-over { border-color: var(--sienna); color: var(--sienna); }

.mod-thumb {
  width: 100%;
  max-height: 110px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.mod-progress {
  height: 4px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.mod-progress > i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
  transition: width 200ms ease;
}

.mod-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
}
.mod-slider::-webkit-slider-runnable-track { height: 2px; background: var(--hairline); border-radius: 2px; }
.mod-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink);
  margin-top: -5px;
  cursor: pointer;
}
.mod-slider::-moz-range-track { height: 2px; background: var(--hairline); border-radius: 2px; }
.mod-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; cursor: pointer; }

.mod-kpi {
  display: flex; align-items: baseline; gap: 6px;
}
.mod-kpi-value {
  font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 500;
}
.mod-kpi-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}

.mod-spark {
  width: 100%;
  height: 40px;
  display: block;
}

/* Handles (4 sides) */
.handle {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-3);
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease, border-color 100ms ease, transform 100ms ease;
  cursor: crosshair;
  z-index: 2;
}
.module:hover .handle { opacity: 1; }
.handle:hover { background: var(--sienna); border-color: var(--sienna); transform: scale(1.15); }
.handle.is-active { opacity: 1; background: var(--sienna); border-color: var(--sienna); }
.handle.h-t { top: -7px; left: calc(50% - 6px); }
.handle.h-r { right: -7px; top: calc(50% - 6px); }
.handle.h-b { bottom: -7px; left: calc(50% - 6px); }
.handle.h-l { left: -7px; top: calc(50% - 6px); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--dock-h) + 16px);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(21,19,26,0.18);
  z-index: 50;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast[hidden] { display: none; }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.toast--warn    { background: #6b4a17; }
.toast--success { background: #2d5e35; }
.toast--error   { background: var(--red); }
.toast--actions {
  padding: 10px 16px;
  display: inline-flex; align-items: center; gap: 12px;
  border-radius: 12px;
  text-transform: none; letter-spacing: 0.01em;
  font-family: var(--font-display); font-size: 13px;
}
.toast--actions .t-msg { color: var(--paper); }
.toast--actions .t-action {
  background: rgba(255,255,255,0.12);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 120ms ease;
}
.toast--actions .t-action:hover { background: rgba(255,255,255,0.2); }

/* Cascade panel — chaîne d'effets d'une action */
.cascade-panel {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(21,19,26,0.18);
  padding: 16px 16px 12px;
  z-index: 48;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.cascade-panel.is-visible { opacity: 1; transform: translateY(0); }
.cp-close {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 14px;
  cursor: pointer;
}
.cp-close:hover { color: var(--ink); }
.cp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cp-icon { color: var(--sienna); font-size: 16px; }
.cp-title {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--ink);
}
.cp-steps { list-style: none; margin: 0; padding: 0; }
.cp-step { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--hairline-2); }
.cp-step:first-child { border-top: 0; }
.cp-step-icon {
  flex: 0 0 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  border-radius: 4px;
  color: var(--sienna);
  font-size: 11px;
  border: 1px solid var(--hairline-2);
}
.cp-step-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cp-step-label { font-size: 13px; color: var(--ink); }
.cp-step-detail { font-size: 11px; color: var(--ink-3); font-style: italic; }
.cp-step-link {
  margin-top: 4px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--sienna);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 2px 0;
}
.cp-step-link:hover { text-decoration: underline; }

/* Badges numériques dynamiques (nav sidebar) */
.ni-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  margin-left: 6px;
}
.ni-count--warn { background: rgba(186, 116, 73, 0.12); color: var(--sienna); border-color: rgba(186, 116, 73, 0.3); }
.ni-count--red  { background: rgba(192, 48, 48, 0.08); color: var(--red); border-color: rgba(192, 48, 48, 0.3); }
.ni-count--info { background: rgba(76, 159, 91, 0.08); color: #4c9f5b; border-color: rgba(76, 159, 91, 0.3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --sidebar-w: 0px;
    --dock-h: 52px;
  }
  .layout { grid-template-columns: 1fr; }
  .archive-sidebar { display: none; }
  .cs-stats { display: none; }
  .brand-word { display: none; }
  .dock-label { display: none; }
  .di-name { display: none; }
  .topbar { padding: 0 10px; }
  .dock { padding: 0 10px; }
}

.layout.archive-hidden {
  grid-template-columns: 1fr;
}
.layout.archive-hidden .archive-sidebar { display: none; }


/* ============================================================
   VUES — switch exclusif Basic / Crafts
   ============================================================ */
.view { display: contents; }
.view[hidden] { display: none !important; }

/* Retour Basic bouton dans la topbar Crafts */
.brand--crafts { display: flex; align-items: center; gap: 10px; }
.back-to-basic {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.back-to-basic:hover {
  color: var(--sienna);
  border-color: var(--sienna);
  background: var(--paper-2);
}
.brand-suffix {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-3);
  font-size: 14px;
  margin-left: 2px;
}

/* ============================================================
   BASIC — variables et grid global
   ============================================================ */
:root {
  --basic-topbar-h: 48px;
  --basic-left-w: 232px;
  --basic-right-w: 280px;
  --basic-right-collapsed-w: 36px;
}

.view--basic {
  width: 100%; height: 100%;
}

.basic-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--basic-topbar-h);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
  align-items: center;
  padding: 0 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
  z-index: 30;
  gap: 16px;
}

.basic-brand-zone { display: flex; align-items: center; gap: 16px; min-width: 0; }
.company-switcher { position: relative; }
.company-switcher .cs-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}
.company-switcher .cs-trigger:hover { border-color: var(--ink-3); }
.company-switcher .cs-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher .cs-arrow { color: var(--ink-3); font-size: 10px; }
.company-switcher .cs-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow: auto;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(21,19,26,0.10);
  padding: 4px;
  z-index: 40;
}
.company-switcher .cs-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.company-switcher .cs-item:hover { background: var(--paper-3); }
.company-switcher .cs-item.is-active .csi-dot { background: var(--sienna); }
.csi-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1px solid var(--mist);
  flex-shrink: 0;
}
.company-switcher .cs-item--action {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--sienna);
}
.company-switcher .cs-item--danger { color: var(--red); }
.company-switcher .cs-sep {
  height: 1px; background: var(--hairline); margin: 4px 6px;
}

.basic-brain-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
.brain-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sienna);
  box-shadow: 0 0 0 3px var(--sienna-soft);
}
.brain-label {
  font-family: var(--font-display);
  font-style: italic;
}
.brain-stats {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.basic-topbar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; position: relative; }
.basic-topbar-actions .new-wrap { position: relative; }
.basic-topbar-actions .new-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(21,19,26,0.10);
  padding: 4px;
  z-index: 40;
}
.basic-topbar-actions .new-menu button {
  display: block; width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  text-align: left;
  color: var(--ink);
}
.basic-topbar-actions .new-menu button:hover { background: var(--paper-3); color: var(--sienna); }

/* ============================================================
   BASIC — main grid
   ============================================================ */
.basic-main {
  position: fixed;
  inset: var(--basic-topbar-h) 0 0 0;
  display: grid;
  grid-template-columns: var(--basic-left-w) 1fr var(--basic-right-w);
  height: calc(100vh - var(--basic-topbar-h));
  background: var(--paper);
}

/* ============================================================
   BASIC — sidebar gauche : navigation modules
   ============================================================ */
.basic-left {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border-right: 1px solid var(--hairline);
  overflow: hidden;
}
.left-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 8px;
}
.left-foot {
  border-top: 1px solid var(--hairline);
  padding: 8px;
  background: var(--paper-2);
}

.nav-section { padding: 6px 0; }
.nav-section + .nav-section { border-top: 1px solid var(--hairline-2); }

.nav-section-title {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  transition: color 120ms ease;
}
.nav-section-title:hover { color: var(--ink-2); }
.nav-section .nss-arrow { font-size: 10px; opacity: 0.7; }
.nav-section.is-collapsed .nav-items { display: none; }

.nav-items {
  list-style: none;
  margin: 0;
  padding: 2px 6px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: left;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.nav-item:hover { background: var(--paper-3); color: var(--ink); }
.nav-item.is-active {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 500;
}
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--sienna);
  border-radius: 2px;
}

.ni-badge {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  margin-left: 8px;
}
.ni-badge--mvp { color: var(--sienna); border-color: var(--sienna-soft); background: var(--sienna-soft); }
.ni-badge--bient\00f4t,
.ni-badge--bientt {
  color: var(--mist);
  border-color: var(--hairline);
}
.ni-badge--visionia { color: var(--sienna); border-color: var(--sienna-soft); background: var(--sienna-soft); }
.ni-badge--cerveau  { color: var(--sienna); border-color: var(--sienna-soft); background: var(--sienna-soft); }
.ni-badge--premium  { color: var(--ink-3); border-color: var(--hairline); }

/* User chip en bas */
.user-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  text-align: left;
}
.user-chip:hover { border-color: var(--ink-3); }
.user-avatar {
  width: 28px; height: 28px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 14px;
}
.user-name { flex: 1; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-arrow { color: var(--ink-3); font-size: 10px; }

/* ============================================================
   BASIC — zone centrale
   ============================================================ */
.basic-center {
  position: relative;
  overflow: auto;
  background: var(--paper-3);
  background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
}

.page {
  min-height: 100%;
  padding: 32px 40px;
  display: flex; flex-direction: column;
}
.page-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 4px;
  color: var(--ink);
}
.page-sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}
.page-stub {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 16px;
}
.ps-mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--sienna);
  margin-bottom: 12px;
}
.page--accueil .page-stub { flex-direction: column; gap: 4px; }
.ps-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); margin: 0; }
.ps-sub { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: 14px; }

/* ============================================================
   BASIC — sidebar droite (contextuelle, repliable)
   ============================================================ */
.basic-right {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border-left: 1px solid var(--hairline);
  transition: width 200ms ease;
  overflow: hidden;
  width: var(--basic-right-w);
}
.basic-main { transition: grid-template-columns 200ms ease; }
.basic-main:has(.basic-right.is-collapsed) {
  grid-template-columns: var(--basic-left-w) 1fr var(--basic-right-collapsed-w);
}
.basic-right.is-collapsed { width: var(--basic-right-collapsed-w); }
.basic-right.is-collapsed .right-content { display: none; }

.right-toggle {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 12px;
  z-index: 2;
}
.right-toggle:hover { color: var(--sienna); border-color: var(--sienna); }
.right-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.right-head { margin-bottom: 12px; }
.rh-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.right-stub p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 14px;
}

/* ============================================================
   BASIC — page Accueil : Scan → Analyse → Archivage
   ============================================================ */
.basic-center .accueil {
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: 0;
}

/* Flow banner */
.flow-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
}
.flow-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 120ms ease;
}
.step-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--mist);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.flow-step.is-current .step-dot {
  background: var(--sienna);
  border-color: var(--sienna);
}
.flow-step.is-current .step-dot::after { content: '·'; color: var(--paper-2); }
.flow-step.is-done .step-dot {
  background: var(--moss);
  border-color: var(--moss);
}
.flow-step.is-done .step-dot::after { content: '✓'; color: var(--paper-2); font-size: 9px; font-weight: 600; }
.step-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-3);
}
.flow-step.is-current .step-label { color: var(--ink); }
.flow-step.is-done .step-label { color: var(--ink-2); }
.flow-arrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 16px;
}

/* Work zone — la zone centrale qui change selon l'étape */
.work-zone {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  min-height: 0;
}

/* Drop zone (étape Scan) */
.drop-zone {
  width: min(720px, 90%);
  min-height: 320px;
  padding: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: var(--paper-2);
  border: 2px dashed var(--mist);
  border-radius: 10px;
  text-align: center;
  transition: background 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.is-hover, .drop-zone:focus-visible {
  background: var(--paper-3);
  border-color: var(--sienna);
  outline: 0;
}
.dz-mark {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--ink-3);
}
.dz-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-2);
}
.dz-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* Scan preview (étape Analyse) */
.scan-preview {
  width: min(820px, 100%);
  display: flex; flex-direction: column;
  gap: 16px;
}
.sp-image {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.sp-image img {
  max-width: 100%;
  max-height: 48vh;
  display: block;
  border-radius: 6px;
}
.sp-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.sp-filename {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-analyzing {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2);
  font-family: var(--font-display);
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--sienna);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Archive confirm (étape Archivage) */
.archive-confirm {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}
.ac-image {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px;
}
.ac-image img {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.ac-fiche {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.ac-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
}
.ac-desc {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
}
.ac-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.ac-sugg {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--sienna-soft);
  border-left: 2px solid var(--sienna);
  border-radius: 0 6px 6px 0;
}
.ac-sugg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
}
.ac-sugg p {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-2);
}
.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Boutons primaires Basic */
.btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn--primary { background: var(--sienna); color: var(--paper-2); }
.btn--primary:hover { background: #A04417; }
.btn--moss { background: var(--moss); color: var(--paper-2); }
.btn--moss:hover { background: #4A5B33; }
.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--hairline);
}
.btn--ghost:hover {
  background: var(--paper-3);
  border-color: var(--ink-3);
}

/* Pellicule */
.pellicule {
  display: flex; align-items: center; gap: 12px;
  height: 92px;
  padding: 0 16px;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.pel-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.pel-scroll {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  padding: 8px 0;
}
.pel-add {
  width: 70px; height: 70px;
  flex-shrink: 0;
  border: 1px dashed var(--mist);
  border-radius: 6px;
  background: var(--paper-3);
  color: var(--ink-3);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 120ms ease, color 120ms ease;
}
.pel-add:hover { border-color: var(--sienna); color: var(--sienna); }
.pel-item {
  width: 70px; height: 70px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  transition: border-color 120ms ease, transform 120ms ease;
}
.pel-item:hover { border-color: var(--sienna); transform: translateY(-1px); }
.pel-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pel-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 13px;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(21, 19, 26, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  padding: 32px;
}
.lb-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 32px; height: 32px;
  font-size: 22px;
  color: var(--paper-2);
  background: transparent;
  border: 1px solid rgba(245, 241, 232, 0.3);
  border-radius: 50%;
}
.lb-close:hover { background: rgba(245, 241, 232, 0.1); }
.lb-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 16px;
  width: min(1100px, 100%);
  max-height: 88vh;
}
.lb-image {
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 241, 232, 0.04);
  border-radius: 8px;
  overflow: hidden;
}
.lb-image img {
  max-width: 100%; max-height: 88vh; display: block;
}
.lb-fiche {
  background: var(--paper-2);
  border-radius: 8px;
  padding: 18px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.lb-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
}
.lb-desc {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-meta {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ============================================================
   BASIC — pages onglets (patterns A / B / C)
   ============================================================ */

/* Page actions (search + add) — repris dans wireframe & utilitaire */
.page-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
}
.search-stub {
  flex: 1; max-width: 360px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.search-stub .ss-icon { color: var(--mist); font-size: 13px; }
.search-stub .ss-input {
  flex: 1; font-size: 13px; color: var(--ink); background: transparent;
}
.search-stub .ss-input::placeholder { color: var(--mist); font-style: italic; }
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.2);
}
.btn--sm { padding: 5px 10px; font-size: 12px; }

/* Pattern A — wireframe */
.ghost-table {
  margin-top: 20px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.gt-head { display: flex; background: var(--paper-3); border-bottom: 1px solid var(--hairline); }
.gt-cell--head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
}
.gt-body .gt-row {
  display: flex;
  border-bottom: 1px solid var(--hairline-2);
}
.gt-body .gt-row:last-child { border-bottom: 0; }
.gt-cell {
  flex: 1; padding: 14px;
}
.unit-eq {
  display: inline-block;
  margin-left: 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-family: var(--font-mono);
}

.machine-cost-box {
  border-color: rgba(198, 82, 29, 0.22);
  background: rgba(198, 82, 29, 0.04);
}
.machine-cost-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.machine-cost-result {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
}
.machine-cost-table {
  margin: 0;
}
.machine-ai-note {
  margin: 10px 0 0;
  color: var(--ink-2);
  line-height: 1.45;
}
.machine-material-box {
  border-color: rgba(0,199,190,.22);
  background: rgba(0,199,190,.045);
}
.machine-material-head,
.machine-material-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 90px 80px 72px 42px;
  gap: 8px;
  align-items: center;
}
.machine-material-head {
  margin-bottom: 6px;
  color: var(--ink-3);
  font: 800 10px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.machine-material-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.machine-material-row input {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 9px;
  font: 500 13px/1.2 var(--font-ui);
}
.machine-material-auto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-size: 12px;
}
body.apple-ui.dark .machine-material-box {
  background: rgba(0,199,190,.075);
  border-color: rgba(0,199,190,.22);
}
body.apple-ui.dark .machine-material-row input {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  color: #f5f5f7;
}
@media (max-width: 720px) {
  .machine-material-head { display: none; }
  .machine-material-row { grid-template-columns: 1fr 80px; }
}
.gt-bar {
  display: block;
  height: 8px;
  background: var(--hairline);
  border-radius: 4px;
}

.ghost-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.ghost-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.gc-bar {
  display: block;
  height: 8px;
  background: var(--hairline);
  border-radius: 4px;
}
.gc-bar--title { height: 14px; width: 75%; background: var(--ink-3); opacity: 0.25; }
.gc-bar--meta  { width: 40%; }
.gc-bar--text  { width: 90%; }

.conciergerie-stub {
  margin-top: 24px;
  padding: 24px;
  background: var(--paper-2);
  border-left: 2px solid var(--sienna);
  border-radius: 0 8px 8px 0;
}
.conc-quote {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.45;
}
.conc-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.coming-banner {
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px dashed var(--hairline);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.cb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Pattern B — promesse commerciale */
.page--promesse {
  padding: 48px 56px;
}
.hero {
  margin-bottom: 36px;
  max-width: 760px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}
.promise-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.promise-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 22px 20px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.pc-mark {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--sienna);
}
.pc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  margin: 0;
  color: var(--ink);
}
.pc-body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.promise-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}
.pf-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--sienna);
}

/* Pattern C — utilitaire */
.util-blocks {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.util-block {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px 18px;
}
.util-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--ink);
}
.util-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--mist);
  font-size: 13px;
  margin: 0;
}
.util-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.util-kpi {
  text-align: center;
  padding: 10px 6px;
  background: var(--paper-3);
  border-radius: 6px;
}
.uk-num {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink-3);
}
.uk-lab {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   BASIC — sidebar droite contextuelle
   ============================================================ */
.todo-cards {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.todo-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.todo-card:hover {
  border-color: var(--sienna);
  background: var(--paper-2);
}
.tc-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  min-width: 28px;
}
.tc-num.is-warn { color: var(--sienna); }
.tc-lab {
  font-size: 12px;
  color: var(--ink-2);
}

.conc-suggestion {
  padding: 12px 14px;
  background: var(--sienna-soft);
  border-left: 2px solid var(--sienna);
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
}
.cs-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
}
.conc-suggestion p {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}

/* Bandeau conciergerie permanent (sidebar droite) */
.conc-banner {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.cb-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.cb-icon { color: var(--sienna); font-size: 13px; }
.cb-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.cb-body { display: flex; flex-direction: column; gap: 8px; }
.cb-empty { font-family: var(--font-display); font-size: 12px; color: var(--ink-3); margin: 0; }
.cb-card {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 9px 11px;
}
.cb-card.cb-prio-1 { border-left-color: var(--red); }
.cb-card.cb-prio-2 { border-left-color: var(--sienna); }
.cb-card.cb-prio-3 { border-left-color: var(--ink-3); }
.cb-card-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 3px;
}
.cb-card-body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.cb-card-action {
  background: transparent;
  border: 0;
  color: var(--sienna);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.cb-card-action:hover { text-decoration: underline; }
.cb-card-actions {
  margin-top: 8px;
  display: flex; gap: 10px; align-items: center;
}
.cb-card-dismiss {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.cb-card-dismiss:hover { color: var(--ink-2); text-decoration: underline; }

.ctx-block {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.ctx-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
}
.ctx-desc {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.ctx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-sugg {
  margin-top: 4px;
  padding: 10px;
  background: var(--paper-2);
  border-radius: 6px;
}
.ctx-sugg-label, .ctx-coll-label, .ctx-lot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ctx-sugg p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.ctx-collection { display: flex; flex-direction: column; gap: 6px; }
.ctx-lot { display: flex; align-items: center; gap: 8px; }
.ctx-lot-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--sienna);
}
.ctx-back { margin-top: 6px; }

/* ============================================================
   ATLAS — Dashboard d'accueil (KPI + conciergerie + activité)
   ============================================================ */
.accueil--dashboard {
  padding: 24px 32px;
  display: flex; flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.dash-conciergerie {
  min-height: 48px;
}
.dc-zen {
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px dashed var(--hairline);
  border-radius: 8px;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 14px;
}
.dc-card {
  padding: 14px 18px;
  background: var(--sienna-soft);
  border-left: 3px solid var(--sienna);
  border-radius: 0 8px 8px 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.dc-card.dc-prio-moyenne { border-left-color: var(--moss); background: rgba(92,110,63,0.08); }
.dc-card.dc-prio-basse   { border-left-color: var(--mist); background: var(--paper-2); }
.dc-head { display: flex; gap: 10px; align-items: center; }
.dc-prio {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sienna);
  padding: 2px 6px;
  background: var(--paper);
  border-radius: 3px;
}
.dc-title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.dc-body { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.dc-loading { padding: 14px 18px; color: var(--mist); font-style: italic; }

/* KPI cards */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.kpi-card {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  line-height: 1.2;
  font-weight: 400;
}
.kpi-value.kpi-warn { color: var(--sienna); }
.kpi-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sienna);
}

/* Drop zone compacte + activité côte à côte */
.dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
}
@media (max-width: 900px) { .dash-row { grid-template-columns: 1fr; } }

.drop-zone--compact {
  min-height: 180px;
  padding: 28px 20px;
}

.dash-activity {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
}
.dash-block-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 500;
}
.activity-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.activity-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 13px;
}
.activity-list li:last-child { border-bottom: 0; }
.act-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--paper-3);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.act-label { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ============================================================
   ATLAS — Page Stock avec onglets internes + Gammes
   ============================================================ */
.stock-tabs {
  display: flex; gap: 4px;
  margin: 12px 0 8px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  width: fit-content;
}
.stock-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.stock-tab:hover { color: var(--ink); }
.stock-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(21,19,26,0.06);
}
.badge-low {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  background: var(--sienna-soft);
  color: var(--sienna);
  border-radius: 3px;
}

/* Gammes grid */
.gammes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.gamme-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--sienna);
  border-radius: 8px;
  padding: 14px 16px;
}
.gamme-name {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 500;
}
.gamme-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.gamme-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* ============================================================
   ATLAS — actions contextuelles post-scan
   ============================================================ */
.ac-actions--primary {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 8px;
  padding: 12px 14px;
  background: var(--sienna-soft);
  border-left: 2px solid var(--sienna);
  border-radius: 0 6px 6px 0;
}
.ac-actions--secondary {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.ac-extr {
  margin: 10px 0 4px;
  padding: 8px 12px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 12px;
}
.ac-extr summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ac-extr pre {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   ATLAS — pages spécialisées (conciergerie, compta, planning, inventaire)
   ============================================================ */

/* Conciergerie */
.conc-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-left: 3px solid var(--mist);
}
.conc-card.conc-prio-haute   { border-left-color: var(--sienna); }
.conc-card.conc-prio-moyenne { border-left-color: var(--moss); }
.conc-card.conc-prio-basse   { border-left-color: var(--mist); }
.conc-card-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 8px;
}
.conc-prio, .conc-type {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.conc-prio { color: var(--sienna); }
.conc-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--ink);
}
.conc-card-body {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 10px;
}

/* Comptabilité */
.compta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 900px) { .compta-grid { grid-template-columns: 1fr; } }
.compta-block {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 18px;
}
.compta-block h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.ec-card {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.ec-head { display: flex; gap: 10px; font-size: 11px; color: var(--ink-3); }
.ec-journal {
  font-family: var(--font-mono);
  background: var(--paper-3);
  padding: 1px 5px;
  border-radius: 3px;
}
.ec-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  margin: 3px 0;
}
.ec-lignes { font-size: 11px; color: var(--ink-3); }

/* Inventaire */
.inv-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.inv-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.inv-status {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-3);
}
.inv-status-en_cours { color: var(--sienna); background: var(--sienna-soft); }
.inv-status-cloture { color: var(--moss); }
.inv-meta {
  display: flex; gap: 14px;
  font-size: 12px;
  color: var(--ink-3);
}
.inv-actions { display: flex; gap: 8px; }

/* ============================================================
   BASIC — onboarding entreprise post-inscription
   ============================================================ */
.onb-options {
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.onb-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.onb-card:hover {
  border-color: var(--sienna);
  background: var(--paper-2);
}
.onb-card-mark {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--sienna);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.onb-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.onb-card-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.onb-progress {
  text-align: center;
  padding: 24px 16px;
}
.onb-progress .spinner {
  width: 26px; height: 26px;
  margin: 0 auto 12px;
}
.onb-progress-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.onb-success h2, .onb-failed h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ink);
}
.onb-success { padding: 8px 0; }
.onb-failed { padding: 8px 0; }

/* ============================================================
   BASIC — pages CRUD live + tables détail
   ============================================================ */
.page--live .live-table { margin-top: 20px; }
.custom-box-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.custom-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-2);
}
.custom-box-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--active-tab-color, #007aff);
  font: 800 10px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.custom-box-head h3 { margin: 0; color: var(--ink); font: 800 18px/1.15 var(--font-ui); }
.custom-box-head p,
.custom-box-empty,
.custom-box-panel--locked p { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; }
.custom-box-form { padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.custom-box-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px; }
.custom-box-grid label,
.custom-box-wide { display: grid; gap: 6px; }
.custom-box-grid span,
.custom-box-wide span {
  font: 800 10px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.custom-box-grid input,
.custom-box-grid select,
.custom-box-wide textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  padding: 9px 10px;
  font: 500 13px/1.35 var(--font-ui);
}
.custom-box-wide { margin-top: 10px; }
.custom-box-actions { display: flex; gap: 8px; margin-top: 10px; }
.custom-box-list { display: grid; gap: 8px; margin-top: 12px; }
.custom-box-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
}
.custom-box-item strong { color: var(--ink); }
.custom-box-item p { margin: 4px 0 6px; color: var(--ink-2); font-size: 13px; }
.custom-box-item span {
  color: var(--ink-3);
  font: 700 11px/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.restriction-switches,
.restriction-modules { display: grid; gap: 10px; }
.restriction-toggle,
.restriction-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
}
.restriction-toggle { justify-content: flex-start; }
.restriction-toggle input { width: 18px; height: 18px; }
.restriction-toggle span { display: grid; gap: 3px; }
.restriction-toggle strong,
.restriction-module-row span { color: var(--ink); }
.restriction-toggle em { color: var(--ink-3); font-size: 12px; }
.restriction-module-row select {
  min-width: 150px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 10px;
}
body.apple-ui.dark .custom-box-panel,
body.apple-ui.dark .custom-box-item,
body.apple-ui.dark .restriction-toggle,
body.apple-ui.dark .restriction-module-row {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}
body.apple-ui.dark .custom-box-grid input,
body.apple-ui.dark .custom-box-grid select,
body.apple-ui.dark .custom-box-wide textarea,
body.apple-ui.dark .restriction-module-row select {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  color: #f5f5f7;
}
@media (max-width: 980px) {
  .custom-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .custom-box-head,
  .custom-box-item,
  .restriction-module-row { flex-direction: column; align-items: stretch; }
  .custom-box-grid { grid-template-columns: 1fr; }
}
.gt-row.live-row { cursor: pointer; transition: background 100ms ease; }
.gt-row.live-row:hover { background: var(--paper-2); }
.live-cell {
  font-size: 13px;
  color: var(--ink-2);
  padding: 12px 14px !important;
}
.am-field select, .am-field textarea {
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  resize: vertical;
}
.am-field select:focus, .am-field textarea:focus { border-color: var(--sienna); outline: 0; }

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 4px;
}
.detail-table tr { border-bottom: 1px solid var(--hairline-2); }
.detail-table td { padding: 8px 10px; vertical-align: top; }
.detail-table td.label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 35%;
}

/* ============================================================
   BASIC — modal authentification
   ============================================================ */
.auth-modal {
  position: fixed; inset: 0;
  background: rgba(21, 19, 26, 0.55);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-modal .am-inner {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  width: min(440px, 100%);
  padding: 32px 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(21,19,26,0.25);
  /* Fix bug critique : modal qui débordait sans scroll, contenu et boutons inaccessibles */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.am-close {
  position: sticky; top: 0; float: right;
  margin-right: -8px; margin-top: -16px;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 18px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  z-index: 2;
  cursor: pointer;
}
.am-close:hover { color: var(--ink); border-color: var(--ink-3); }

.am-head { text-align: center; margin-bottom: 20px; }
.am-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--sienna); color: var(--paper);
  border-radius: 8px;
  font-family: var(--font-display); font-size: 22px;
  margin-bottom: 10px;
}
.am-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: 0.04em;
  margin: 0;
}
.am-sub {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-3); font-size: 13px;
  margin: 6px 0 0;
}

.am-tabs {
  display: flex; gap: 4px;
  background: var(--paper-3);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.am-tab {
  flex: 1;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-3);
  transition: all 120ms ease;
}
.am-tab:hover { color: var(--ink-2); }
.am-tab.is-active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21,19,26,0.05);
}

.am-form { display: flex; flex-direction: column; gap: 12px; }
.am-field { display: flex; flex-direction: column; gap: 5px; }
.am-field span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.am-field input {
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 120ms ease;
}
.am-field input:focus { border-color: var(--sienna); outline: 0; }
.am-relation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.am-relation-row .am-relation-filter {
  grid-column: 1 / -1;
  width: 100%;
}
.mission-status-select {
  min-height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 9px;
  font: inherit;
}
.am-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-3);
}
.am-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.am-info {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-2);
  font-size: 13px;
  margin: 0;
}
.am-err {
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid var(--red);
  background: rgba(192, 48, 48, 0.06);
  font-size: 12px;
  color: var(--red);
  border-radius: 0 4px 4px 0;
}

.icon-btn--search {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto !important;
  padding: 0 10px !important;
}
.ib-kbd {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--ink-3);
}

/* ============================================================
   PRODUIT — modal riche avec BOM + fabrication + prix conseillé
   ============================================================ */
.prod-tabs {
  display: flex; gap: 4px;
  background: var(--paper-3);
  padding: 4px; border-radius: 8px;
  margin: 0 0 16px;
  position: sticky;
  top: 42px;
  z-index: 3;
}
.pt-btn {
  flex: 1;
  padding: 7px 10px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 120ms ease;
}
.pt-btn:hover { color: var(--ink-2); }
.pt-btn.is-active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21,19,26,0.06);
}
.prod-panel { display: flex; flex-direction: column; gap: 12px; }
.prod-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px solid var(--hairline);
  position: sticky;
  bottom: -1px;
  background: var(--paper-2);
  z-index: 3;
}
.am-inner--product {
  width: min(880px, 100%) !important;
  max-width: 880px;
}

.bom-list {
  background: var(--paper-3);
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  padding: 10px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.bom-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 32px;
  gap: 8px;
  align-items: center;
}
.bom-row select, .bom-row input {
  padding: 6px 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-display);
}
.bom-cost-line {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.bom-cost {
  text-align: right;
  padding-top: 8px;
  color: var(--sienna);
  font-family: var(--font-display);
  font-size: 13px;
}

.prod-pricing-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  align-items: center;
  margin: 10px 0;
}
.pp-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.prod-pricing-card strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}
.pp-sep, .pp-arrow {
  text-align: center;
  color: var(--ink-3);
  font-size: 18px;
}
.pp-suggest strong { color: var(--sienna); font-size: 18px; }
.pp-now {
  grid-column: 1 / -1;
  font-style: italic;
  color: var(--ink-3);
  font-size: 11px;
  border-top: 1px dashed var(--hairline-2);
  padding-top: 8px;
}
#ppApply { margin-left: 6px; }

/* Wizard fabrication */
.fab-qty-row {
  display: flex; gap: 12px; align-items: flex-end;
  margin-bottom: 14px;
}
.fab-preview {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.fab-ok h3 { color: #4c9f5b; margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; }
.fab-warn h3 { color: var(--red); margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; }
.fab-table { font-size: 12px; width: 100%; }
.fab-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; }
.fab-table td { padding: 4px 8px; }
.fab-row-short td { color: var(--red); }
.fab-totals {
  display: flex; gap: 18px; justify-content: flex-end;
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
}
.fab-totals strong { color: var(--ink); font-size: 13px; }

/* Bloc galerie dans modal Client */
.cli-gallery {
  border: 1px solid rgba(186, 116, 73, 0.25);
  background: var(--sienna-soft);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 6px 0;
}
.cli-gallery legend {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
  padding: 0 6px;
}

/* ============================================================
   CUSTOM MODULES — Premium feature
   ============================================================ */
.page--custom-hub { display: flex; flex-direction: column; gap: 22px; }
.upsell {
  background: linear-gradient(135deg, var(--sienna-soft), var(--paper-2));
  border: 1px solid rgba(186, 116, 73, 0.3);
  border-radius: 14px;
  padding: 22px 26px;
  display: flex; gap: 20px; align-items: flex-start;
}
.upsell--ok {
  background: linear-gradient(135deg, rgba(76, 159, 91, 0.1), var(--paper-2));
  border-color: rgba(76, 159, 91, 0.3);
}
.upsell-mark {
  width: 48px; height: 48px;
  background: var(--sienna); color: var(--paper);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.upsell--ok .upsell-mark { background: #4c9f5b; }
.upsell-body { flex: 1; }
.upsell-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 18px; letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.upsell-body p {
  font-family: var(--font-display);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2);
  margin: 6px 0;
}
.upsell-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 12px;
}
.upsell-hint {
  font-family: var(--font-display); font-style: italic;
  font-size: 11px; color: var(--ink-3);
}

.cm-section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px; letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: var(--ink-2);
}

.cm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cm-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.cm-card:hover { border-color: var(--sienna); transform: translateY(-1px); }
.cm-card-head { display: flex; gap: 12px; align-items: center; }
.cm-card-icon {
  width: 36px; height: 36px;
  background: var(--paper-3);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cm-card-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px;
  margin: 0;
}
.cm-card-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3);
  margin: 2px 0 0;
}
.cm-card-desc {
  font-family: var(--font-display); font-size: 12.5px;
  color: var(--ink-3); font-style: italic;
  margin: 0;
  line-height: 1.4;
}
.cm-card-tag {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sienna);
  margin: 0;
}
.cm-card-actions {
  display: flex; gap: 6px; margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--hairline-2);
}

.cm-suggest {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
}
.cm-suggest h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 14px; letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--ink-2);
}
.cm-suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.cm-suggest-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer;
  text-align: left;
  transition: all 120ms ease;
}
.cm-suggest-card:hover {
  border-color: var(--sienna);
  background: var(--sienna-soft);
}
.cm-suggest-icon { font-size: 22px; }
.cm-suggest-name {
  font-family: var(--font-display); font-size: 14px;
  color: var(--ink);
}
.cm-suggest-prompt {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); font-style: italic;
  line-height: 1.4;
}

.nav-item--custom { padding-left: 18px !important; }
.nav-item--custom .ni-label { color: var(--ink-2); }

/* Ligne tableau cliquable (stock, etc.) */
.gt-row--clickable {
  cursor: pointer;
  transition: background 120ms ease;
}
.gt-row--clickable:hover {
  background: var(--paper-2);
}
.gt-row--clickable:focus {
  outline: 2px solid var(--sienna);
  outline-offset: -2px;
}
.btn--danger { color: var(--red); border-color: rgba(192,48,48,0.3); }
.btn--danger:hover { background: rgba(192,48,48,0.08); }

/* Photos produit dans modal */
.pp-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.photos-zone {
  background: var(--paper-3);
  border: 2px dashed var(--hairline);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
.photos-zone:hover, .photos-zone.is-hover {
  border-color: var(--sienna);
  background: var(--sienna-soft);
}
.photos-zone.is-loading { opacity: 0.7; pointer-events: none; }
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.photo-tile {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
}
.photo-tile.photo-tile--cover {
  border-color: var(--sienna);
  border-width: 2px;
}
.photo-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-cover-badge {
  position: absolute;
  top: 4px; left: 4px;
  background: var(--sienna);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.photo-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(21,19,26,0.8), transparent);
  padding: 6px;
  display: flex; gap: 3px; justify-content: center;
  opacity: 0;
  transition: opacity 140ms ease;
}
.photo-tile:hover .photo-actions { opacity: 1; }
.photo-actions .btn {
  padding: 2px 7px !important;
  font-size: 11px !important;
  background: rgba(255,255,255,0.9);
}

/* Mini-thumb dans la liste Stock */
.stock-thumb {
  width: 36px; height: 36px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  background: var(--paper-3);
}
.stock-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--ink-3);
}

/* Carrousel / galerie sur fiche produit */
.fiche-gallery {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px;
}
.fg-main {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}
.fg-main img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.fg-thumbs {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.fg-thumb {
  flex: 0 0 70px;
  width: 70px; height: 70px;
  background: var(--paper);
  border: 2px solid var(--hairline);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease;
}
.fg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-thumb.is-active { border-color: var(--sienna); }
.fg-thumb:hover { border-color: var(--sienna); }

/* Fiche détail devis / facture */
.gallery-net-banner {
  background: linear-gradient(135deg, var(--sienna-soft), var(--paper-2));
  border: 1px solid rgba(186, 116, 73, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gnb-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 4px;
}
.gnb-val {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.gnb-detail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
}
.doc-detail-body { padding: 4px 0 14px; }
.doc-lines-table { width: 100%; font-size: 13px; }
.doc-lines-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-3); }
.doc-lines-table td { padding: 6px 8px; vertical-align: top; }
.doc-lines-table tfoot td { border-top: 1px solid var(--hairline); padding-top: 8px; }
.al-right { text-align: right; }
.fiche-pill--brouillon { background: rgba(150,150,150,0.1); color: var(--ink-3); }

/* Page Photos — galerie + filtres catégories */
.page--photos { display: flex; flex-direction: column; gap: 14px; }
.photo-cats {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  background: var(--paper-3);
  border-radius: 8px;
}
.ph-cat {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 120ms ease;
}
.ph-cat:hover { color: var(--ink-2); }
.ph-cat.is-active { background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 3px rgba(21,19,26,0.05); }

.photo-drop {
  padding: 16px 18px;
  background: var(--paper-3);
  border: 2px dashed var(--hairline);
  border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
.photo-drop:hover, .photo-drop.is-hover {
  border-color: var(--sienna);
  background: var(--sienna-soft);
}
.photo-drop.is-loading { opacity: 0.7; pointer-events: none; }

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ph-tile {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}
.ph-tile:hover { border-color: var(--sienna); transform: translateY(-1px); }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(21,19,26,0.85), transparent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.ph-cat-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.85);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 3px;
}
.ph-cat-tag--produit         { background: rgba(186, 116, 73, 0.95); color: var(--paper); }
.ph-cat-tag--mission         { background: rgba(91, 109, 193, 0.95); color: var(--paper); }
.ph-cat-tag--suivi_chantier  { background: rgba(220, 160, 90, 0.95); color: var(--paper); }
.ph-cat-tag--realisation     { background: rgba(76, 159, 91, 0.95); color: var(--paper); }
.ph-cat-tag--inspiration     { background: rgba(150, 110, 180, 0.95); color: var(--paper); }
.ph-title { color: var(--paper); font-size: 11px; }

.ph-lb-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: start;
}
.ph-lb-img {
  background: var(--paper-3);
  border-radius: 8px;
  overflow: hidden;
}
.ph-lb-img img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; }
@media (max-width: 700px) {
  .ph-lb-grid { grid-template-columns: 1fr; }
}

/* Mes pages (custom pages) — hub + lecture + éditeur */
.cp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cp-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: border-color 120ms ease;
}
.cp-card:hover { border-color: var(--sienna); }
.cp-card-head { display: flex; gap: 12px; align-items: center; }
.cp-card-icon {
  width: 36px; height: 36px;
  background: var(--paper-3);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cp-card-title { font-family: var(--font-display); font-size: 15px; margin: 0; }
.cp-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin: 2px 0 0; }
.cp-card-desc { font-family: var(--font-display); font-style: italic; font-size: 12.5px; color: var(--ink-3); margin: 0; }
.cp-card-actions {
  display: flex; gap: 6px; margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--hairline-2);
}

.page--cpage { display: flex; flex-direction: column; gap: 18px; }
.cp-sections {
  display: flex; flex-direction: column;
  gap: 18px;
}
.cp-section {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px 18px;
}
.cp-section--divider {
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--hairline);
  padding: 0;
  height: 0;
  margin: 8px 0;
}
.cp-section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 16px; letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.cp-text {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.cp-text strong { font-weight: 600; }
.cp-text em { font-style: italic; }
.cp-text ul { margin: 6px 0 6px 18px; padding: 0; }
.cp-text p { margin: 8px 0; }
.cp-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sienna);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
}
.cp-link:hover { text-decoration: underline; }
.cp-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-check-item label {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-display); font-size: 14px;
  cursor: pointer;
}
.cp-check-item.is-done span { text-decoration: line-through; color: var(--ink-3); }

.cp-edit-sections { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ces-row {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px;
}
.ces-head {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 8px;
}
.ces-type {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--paper-2);
  color: var(--ink-3);
  padding: 2px 7px;
  border-radius: 4px;
}
.ces-head input[type="text"] {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
}
.ces-body input,
.ces-body textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-display);
  resize: vertical;
}
.ces-body input + input { margin-top: 6px; }
.cp-edit-add { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--hairline-2); }

/* Unités / lots dans modal stock */
.units-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.units-actions select {
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 12px;
  margin-left: auto;
}
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.unit-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.unit-card.unit-status-available  { border-left-color: #4c9f5b; }
.unit-card.unit-status-in_deposit { border-left-color: var(--sienna); }
.unit-card.unit-status-sold       { border-left-color: var(--ink-3); opacity: 0.85; }
.unit-card.unit-status-consumed,
.unit-card.unit-status-lost       { border-left-color: var(--red); opacity: 0.7; }
.unit-head { display: flex; justify-content: space-between; align-items: center; }
.unit-serial {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-weight: 600;
  word-break: break-all;
}
.unit-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--paper-3);
  color: var(--ink-3);
}
.unit-body { display: flex; flex-direction: column; gap: 2px; }
.unit-line { font-family: var(--font-display); font-size: 11.5px; color: var(--ink-2); }
.unit-lbl {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.unit-consumed { color: var(--red); }
.unit-notes { color: var(--ink-3); font-style: italic; }
.unit-actions {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-top: 6px; margin-top: auto;
  border-top: 1px solid var(--hairline-2);
}
.unit-actions .btn { padding: 3px 8px !important; font-size: 11px; }

/* ============================================================
   PROSPECTS — Agent Commercial
   ============================================================ */
.page--prospects { display: flex; flex-direction: column; gap: 14px; }
.page--prospects #prFilterScore,
.page--prospects #prFilterStatus {
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}
.prospects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.prospect-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 120ms ease;
}
.prospect-card:hover { border-color: var(--sienna); }
.prospect-card.pr-score--high   { border-left-color: #c63d3d; }
.prospect-card.pr-score--med    { border-left-color: var(--sienna); }
.prospect-card.pr-score--low    { border-left-color: var(--ink-3); }
.pc-head { display: flex; justify-content: space-between; align-items: center; }
.pc-score {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--paper-3);
  color: var(--ink);
}
.pr-score--high .pc-score { background: rgba(198, 61, 61, 0.12); color: #c63d3d; }
.pr-score--med  .pc-score { background: var(--sienna-soft); color: var(--sienna); }
.pc-status {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--paper-3); color: var(--ink-3);
}
.pc-status--won { background: rgba(46, 138, 78, 0.12); color: #2e8a4e; }
.pc-status--lost,
.pc-status--skipped { background: var(--paper-3); color: var(--ink-3); opacity: 0.7; }
.pc-domain {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; margin: 0;
  word-break: break-all;
}
.pc-name { font-family: var(--font-display); font-size: 13px; color: var(--ink-2); margin: 0; }
.pc-issues { display: flex; flex-direction: column; gap: 3px; }
.pc-issue {
  font-family: var(--font-display); font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.pc-issue--more { color: var(--ink-3); font-style: italic; }
.pc-contact { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.pc-c { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.pc-factory {
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--paper);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pc-factory-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sienna);
}
.pc-factory-note {
  margin: 0;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.35;
}
.pc-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pc-offer {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--paper-2);
}
.pc-offer:first-child {
  color: var(--sienna);
  border-color: rgba(198, 82, 29, 0.45);
  background: var(--sienna-soft);
}
.pc-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 8px; margin-top: auto;
  border-top: 1px solid var(--hairline-2);
}
.site-roadmap {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(var(--active-tab-rgb, 175,82,222),.18), transparent 34%),
    rgba(255,255,255,.72);
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
}
.site-roadmap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline-2);
}
.site-roadmap-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--active-tab-color, #af52de);
}
.site-roadmap h2 {
  margin: 0;
  font: 800 28px/1.05 var(--font-ui);
  color: var(--ink);
  letter-spacing: 0;
}
.site-roadmap p {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--ink-2);
  line-height: 1.45;
}
.site-roadmap-status,
.site-budget {
  flex: 0 0 auto;
}
.site-roadmap-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(var(--active-tab-rgb, 175,82,222),.14);
  color: var(--active-tab-color, #af52de);
  font: 800 11px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-budget {
  display: grid;
  gap: 6px;
  min-width: 240px;
}
.site-budget span {
  color: var(--active-tab-color, #af52de);
  font: 800 10px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-budget select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  padding: 10px 12px;
  font: 700 13px/1.2 var(--font-ui);
}
.site-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.site-roadmap-step {
  min-height: 190px;
  padding: 15px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.srs-num {
  color: var(--active-tab-color, #af52de);
  font: 800 12px/1 var(--font-mono);
}
.site-roadmap-step strong {
  color: var(--ink);
  font: 800 16px/1.2 var(--font-ui);
}
.site-roadmap-step p {
  margin: 0;
  font-size: 13px;
  flex: 1;
}
.site-budget-hint {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(var(--active-tab-rgb, 175,82,222),.13);
  color: var(--active-tab-color, #af52de);
  font: 800 11px/1 var(--font-display);
}
.site-roadmap-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-2);
  color: var(--ink-3);
  font-size: 13px;
}
body.apple-ui.dark .site-roadmap {
  background:
    radial-gradient(circle at top left, rgba(var(--active-tab-rgb, 175,82,222),.24), transparent 36%),
    rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 20px 54px rgba(0,0,0,.28);
}
body.apple-ui.dark .site-roadmap-step {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
body.apple-ui.dark .site-budget select {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  color: #f5f5f7;
}
@media (max-width: 1100px) {
  .site-roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .site-roadmap-head { flex-direction: column; }
  .site-roadmap-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INBOX — notifications + drafts à valider
   ============================================================ */
.page--inbox { display: flex; flex-direction: column; gap: 16px; }
.inbox-tabs {
  display: flex; gap: 4px;
  background: var(--paper-3);
  padding: 4px; border-radius: 8px;
}
.ib-tab {
  flex: 1;
  padding: 9px 12px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.ib-tab:hover { color: var(--ink-2); }
.ib-tab.is-active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21,19,26,0.06);
}
.ib-count {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--ink-2);
}
.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-item {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}
.inbox-item.inbox-prio-1 { border-left-color: var(--red); }
.inbox-item.inbox-prio-2 { border-left-color: var(--sienna); }
.inbox-item.inbox-prio-3 { border-left-color: var(--hairline); }
.inbox-item.is-unread { background: var(--paper); }
.inbox-item.is-read { opacity: 0.7; }
.ii-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-top: 8px;
}
.inbox-item.is-unread .ii-dot { background: var(--sienna); }
.inbox-item.inbox-prio-1.is-unread .ii-dot { background: var(--red); }
.ii-body { display: flex; flex-direction: column; gap: 4px; }
.ii-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ii-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--paper-3);
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.ii-title { font-family: var(--font-display); font-size: 14px; flex: 1; }
.ii-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.ii-text { font-family: var(--font-display); font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.ii-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* Drafts cards */
.drafts-list { display: flex; flex-direction: column; gap: 12px; }
.draft-card {
  background: var(--paper-2);
  border: 1px solid rgba(186, 116, 73, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
}
.dc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.dc-kind {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--sienna-soft); color: var(--sienna);
  padding: 2px 7px; border-radius: 4px;
}
.dc-title { font-family: var(--font-display); font-size: 14px; flex: 1; }
.dc-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.dc-row { display: flex; gap: 8px; font-size: 13px; margin: 2px 0; }
.dc-lbl {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  min-width: 50px;
}
.dc-body-wrap {
  margin: 10px 0;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
}
.dc-body-wrap summary {
  cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3);
  padding: 4px 0;
}
.dc-body-edit {
  width: 100%;
  min-height: 180px;
  margin-top: 8px;
  padding: 10px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.dc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dc-note { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--ink-3); margin-top: 8px; }

/* ============================================================
   DOCUMENTS — vue galerie + filtres
   ============================================================ */
.page--documents { display: flex; flex-direction: column; gap: 14px; }
#docsFilterType {
  padding: 7px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.doc-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 120ms ease;
}
.doc-card:hover { border-color: var(--sienna); }
.doc-thumb {
  display: block;
  background: var(--paper-3);
  height: 160px;
  overflow: hidden;
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--ink-3);
}
.doc-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.doc-title { font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.doc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-tag {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--paper-3); color: var(--ink-2);
  padding: 2px 6px; border-radius: 4px;
}
.doc-tag--alt { background: var(--sienna-soft); color: var(--sienna); }
.doc-desc { font-family: var(--font-display); font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.4; }
.doc-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.doc-note { font-family: var(--font-display); font-style: italic; font-size: 11px; color: var(--ink-3); margin: 0; }
.doc-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }

/* ============================================================
   ACTIVITY LOG — journal d'audit
   ============================================================ */
.page--activity { display: flex; flex-direction: column; gap: 18px; }
.al-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.al-stat {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.al-stat-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
}
.al-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.al-stat--warn { border-left: 3px solid var(--sienna); }
.al-stat--warn .al-stat-num { color: var(--sienna); }
.al-stat--err { border-left: 3px solid var(--red); }
.al-stat--err .al-stat-num { color: var(--red); }

.al-filters {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
}
.al-filter-row {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.al-filter-row .am-field { min-width: 140px; }
.al-filter-row select,
.al-filter-row input {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-display);
}

.al-timeline { display: flex; flex-direction: column; gap: 6px; }
.al-entry {
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  border-left: 3px solid var(--hairline);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
}
.al-entry.al-accent { border-left-color: #4c9f5b; }
.al-entry.al-warn   { border-left-color: var(--sienna); background: rgba(186,116,73,0.03); }
.al-entry.al-danger { border-left-color: var(--red); background: rgba(192,48,48,0.03); }
.al-dot {
  width: 28px; height: 28px;
  background: var(--paper-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--ink-2);
}
.al-entry.al-accent .al-dot { background: rgba(76,159,91,0.1); color: #4c9f5b; }
.al-entry.al-warn .al-dot   { background: rgba(186,116,73,0.1); color: var(--sienna); }
.al-entry.al-danger .al-dot { background: rgba(192,48,48,0.08); color: var(--red); }
.al-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-line1 {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.al-action {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--paper-3);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 4px;
}
.al-entity-tag,
.al-sev,
.al-src {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 2px 6px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--hairline);
}
.al-sev--info { color: var(--ink-3); }
.al-sev--warning { color: var(--sienna); border-color: rgba(186,116,73,0.3); }
.al-sev--error   { color: var(--red); border-color: rgba(192,48,48,0.3); }
.al-summary {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.al-meta-line {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}
.al-actor { color: var(--ink-2); }
.al-goto { margin-left: auto; }
.al-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.al-meta summary {
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px 0;
}
.al-meta pre {
  background: var(--ink);
  color: #c7e0c0;
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin-top: 4px;
  max-height: 220px;
  white-space: pre-wrap;
}

.al-pager {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  padding: 8px 0;
}
.al-pager-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .al-stats { grid-template-columns: repeat(2, 1fr); }
  .al-filter-row { flex-direction: column; }
  .al-filter-row .am-field { width: 100%; }
}

/* ============================================================
   RECHERCHE GLOBALE — palette Cmd+K
   ============================================================ */
.gs-modal {
  position: fixed; inset: 0;
  background: rgba(21, 19, 26, 0.4);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
  z-index: 200;
  animation: gsFade 140ms ease;
}
@keyframes gsFade {
  from { opacity: 0; } to { opacity: 1; }
}
.gs-inner {
  width: min(580px, calc(100% - 32px));
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(21, 19, 26, 0.3);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.gs-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.gs-input-icon {
  color: var(--ink-3); font-size: 18px;
}
.gs-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  outline: 0;
}
.gs-input::placeholder { color: var(--ink-3); }
.gs-input-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  background: var(--paper-3);
  padding: 3px 7px;
  border-radius: 4px;
}
.gs-results {
  overflow-y: auto;
  padding: 8px 0;
}
.gs-empty {
  padding: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-3);
  margin: 0;
}
.gs-section { padding: 6px 0; }
.gs-section-title {
  padding: 6px 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gs-item {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease;
}
.gs-item:hover { background: var(--paper-2); }
.gs-item-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}
.gs-item-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* ============================================================
   IMPORT / EXPORT
   ============================================================ */
.page--import { display: flex; flex-direction: column; gap: 24px; }
.imp-section {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 20px 22px;
}
.imp-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.imp-help {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-3);
  font-size: 13px;
  margin: 0 0 14px;
}
.imp-drop {
  padding: 28px 20px;
  background: var(--paper-3);
  border: 2px dashed var(--hairline);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: all 160ms ease;
}
.imp-drop:hover, .imp-drop.is-hover {
  border-color: var(--sienna);
  background: var(--sienna-soft);
}
.imp-drop .md-mark { width: 36px; height: 36px; font-size: 20px; }
.imp-loading { padding: 16px; text-align: center; color: var(--ink-3); }

.imp-preview {
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.imp-meta { display: flex; gap: 24px; flex-wrap: wrap; }
.imp-meta-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.imp-meta strong, .imp-meta select {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}
.imp-meta select {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 3px 8px;
}
.imp-mapping h3, .imp-samples h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.imp-map-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.imp-map-row {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 6px;
}
.imp-col {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 6px;
  background: var(--paper-3);
  border-radius: 4px;
}
.imp-arrow { text-align: center; color: var(--ink-3); }
.imp-map-row select {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 6px;
}
.imp-sample-code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--ink);
  color: #c7e0c0;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 220px;
  white-space: pre-wrap;
}
.imp-actions {
  display: flex; gap: 12px; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--hairline-2);
}
.imp-result {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-2);
}
.imp-remote {
  display: flex; gap: 8px;
}
.imp-remote .ss-input { flex: 1; }

@media (max-width: 700px) {
  .imp-map-grid { grid-template-columns: 1fr; }
}

/* Drop-zone universel sur les pages CRUD (Stock, Achat, Humain, etc.) */
.module-drop {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--paper-2);
  border: 1px dashed var(--hairline);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: all 160ms ease;
}
.module-drop:hover, .module-drop:focus { border-color: var(--sienna); background: var(--paper-3); }
.module-drop.is-hover {
  border-color: var(--sienna);
  background: var(--sienna-soft);
  transform: scale(1.005);
}
.module-drop.is-loading { opacity: 0.7; pointer-events: none; }
.md-mark {
  width: 32px; height: 32px;
  background: var(--sienna);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 18px;
}
.md-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}
.md-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .module-drop { flex-wrap: wrap; }
  .md-sub { width: 100%; padding-left: 46px; }
}

/* ============================================================
   CONCIERGE OMNIPRÉSENT — FAB + panel side
   ============================================================ */
.fab-concierge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sienna);
  color: var(--paper);
  border: 0;
  box-shadow: 0 6px 24px rgba(186, 116, 73, 0.4);
  cursor: pointer;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.fab-concierge:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 30px rgba(186, 116, 73, 0.55);
}
.fab-icon {
  display: block;
  animation: fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--paper);
}

.floating-concierge {
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 380px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 120px);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(21, 19, 26, 0.22);
  z-index: 99;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  overflow: hidden;
}
.floating-concierge.is-open {
  opacity: 1;
  transform: translateY(0);
}
.fc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}
.fc-icon {
  width: 30px; height: 30px;
  background: var(--sienna);
  color: var(--paper);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.fc-titles { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.fc-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; color: var(--ink);
}
.fc-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.fc-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 16px;
  cursor: pointer;
}
.fc-close:hover { color: var(--ink); }
.fc-thread {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 240px;
  max-height: 460px;
}
.fc-form {
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.fc-thumb-wrap {
  position: relative; align-self: flex-start;
}
.fc-thumb-wrap img {
  max-height: 60px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  display: block;
}
.fc-thumb-x {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.fc-input-row {
  display: flex; gap: 6px; align-items: flex-end;
}
.fc-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  resize: none;
  min-height: 36px;
  max-height: 160px;
  line-height: 1.4;
}
.fc-input:focus { outline: 0; border-color: var(--sienna); }
.fc-attach {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
}
.fc-send {
  padding: 0 12px !important;
  height: 36px;
  min-width: 40px;
}

/* Overlay drop image global */
.global-drop-overlay {
  position: fixed; inset: 0;
  background: rgba(186, 116, 73, 0.12);
  border: 4px dashed var(--sienna);
  z-index: 105;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  animation: gdoFade 180ms ease;
}
/* Garde-fou critique : l'attribut HTML [hidden] doit forcer display:none.
   Sans cette règle, le display:flex ci-dessus override hidden et l'overlay
   reste visible en permanence. */
.global-drop-overlay[hidden] { display: none !important; }
@keyframes gdoFade { from { opacity: 0; } to { opacity: 1; } }
.gdo-inner {
  background: var(--paper);
  border: 1px solid var(--sienna);
  border-radius: 16px;
  padding: 30px 40px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(21, 19, 26, 0.25);
}
.gdo-icon {
  font-size: 42px;
  color: var(--sienna);
}
.gdo-label {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.gdo-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--ink-3);
}

@media (max-width: 700px) {
  .floating-concierge { width: calc(100vw - 36px); right: 18px; bottom: 90px; }
  .fab-concierge { width: 50px; height: 50px; right: 14px; bottom: 14px; }
}

/* ============================================================
   CONCIERGE CHAT — central sur l'accueil
   ============================================================ */
.concierge-chat {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.concierge-chat.cc-dragover {
  border-color: var(--sienna);
  box-shadow: 0 0 0 3px rgba(186, 116, 73, 0.15);
}
.cc-head { display: flex; align-items: flex-start; gap: 12px; }
.cc-icon {
  width: 36px; height: 36px;
  background: var(--sienna); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 18px;
}
.cc-titles { flex: 1; }
.cc-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; letter-spacing: 0.02em; margin: 0;
}
.cc-sub {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-3); font-size: 13px; margin: 2px 0 0;
}
.cc-status {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sienna);
  padding: 4px 8px;
  background: var(--sienna-soft);
  border-radius: 999px;
  align-self: center;
}

.cc-thread {
  display: flex; flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.cc-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.cc-bubble p { margin: 0 0 4px; }
.cc-bubble p:last-child { margin: 0; }
.cc-bubble--user {
  align-self: flex-end;
  background: var(--sienna-soft);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.cc-bubble--assistant {
  align-self: flex-start;
  background: var(--paper-3);
  border: 1px solid var(--hairline-2);
  border-bottom-left-radius: 4px;
}
.cc-bubble--thinking {
  font-style: italic;
  color: var(--ink-3);
  animation: ccPulse 1.6s ease-in-out infinite;
}
@keyframes ccPulse {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}
.cc-bubble-img {
  display: block;
  margin-top: 8px;
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
}
.cc-hints {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13px;
  font-style: italic;
}
.cc-hints li { padding: 1px 0; }

.cc-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cc-action {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid #4c9f5b;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
}
.cc-action:hover { background: var(--paper-3); }
.cc-action--err { border-left-color: var(--red); }
.cc-action-mark { color: #4c9f5b; font-size: 13px; }
.cc-action--err .cc-action-mark { color: var(--red); }
.cc-action-label { flex: 1; font-family: var(--font-display); font-size: 13px; }
.cc-action-arrow { color: var(--sienna); }

.cc-form {
  display: flex; gap: 8px; align-items: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--hairline-2);
}
.cc-input-wrap { flex: 1; position: relative; display: flex; flex-direction: column; gap: 6px; }
.cc-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  resize: none;
  min-height: 40px;
  max-height: 160px;
  line-height: 1.4;
}
.cc-input:focus { outline: 0; border-color: var(--sienna); }
.cc-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  margin-top: 6px;
  padding: 4px 30px 4px 4px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.cc-thumb-label {
  max-width: min(260px, 65vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12px/1.2 var(--font-ui);
  color: currentColor;
}
.cc-thumb--fallback {
  padding-left: 10px;
  background: var(--paper-2);
}
.cc-thumb--fallback::before {
  content: "Image";
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(61, 129, 246, 0.14);
  color: var(--blue);
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-thumb-x {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
body.apple-ui.dark .cc-thumb {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  color: #f5f5f7;
}
body.apple-ui.dark .cc-thumb--fallback {
  background: rgba(255,255,255,.09);
}
body.apple-ui.dark .cc-thumb-x {
  background: #f5f5f7;
  color: #101014;
}

.company-config-form {
  display: grid;
  gap: 18px;
  max-width: 1180px;
}
.config-panel {
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 44px rgba(0,0,0,.06);
}
.config-panel h3 {
  margin: 0 0 14px;
  font: 700 16px/1.2 var(--font-ui);
  color: var(--ink);
}
.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}
.config-field {
  display: grid;
  gap: 7px;
}
.config-field--wide {
  margin-top: 14px;
}
.config-field span {
  font: 700 11px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.config-field input,
.config-field select,
.config-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  padding: 10px 12px;
  font: 500 14px/1.35 var(--font-ui);
}
.config-field textarea {
  resize: vertical;
}
.config-field input:focus,
.config-field select:focus,
.config-field textarea:focus {
  outline: 0;
  border-color: var(--active-tab-color, #007aff);
  box-shadow: 0 0 0 3px rgba(var(--active-tab-rgb, 0,122,255),.14);
}
body.apple-ui.dark .config-panel {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
body.apple-ui.dark .config-field input,
body.apple-ui.dark .config-field select,
body.apple-ui.dark .config-field textarea {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  color: #f5f5f7;
}
body.apple-ui.dark .config-field input::placeholder,
body.apple-ui.dark .config-field textarea::placeholder {
  color: rgba(245,245,247,.46);
}
@media (max-width: 780px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
}
.cc-attach {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: background 120ms ease;
}
.cc-attach:hover { background: var(--paper-2); }
.cc-send {
  padding: 10px 16px;
  height: 40px;
}
.cc-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 2px;
}
.cc-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 120ms ease;
}
.cc-chip:hover {
  background: var(--sienna-soft);
  color: var(--sienna);
  border-color: var(--sienna-soft);
}

@media (max-width: 700px) {
  .cc-bubble { max-width: 95%; }
  .concierge-chat { padding: 14px; }
}

/* Fiches détail enrichies */
.am-inner--detail { width: min(880px, 100%) !important; max-width: 880px; padding: 28px 24px; }
.fiche-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.fiche-title h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; letter-spacing: 0.02em; margin: 0;
}
.fiche-sub { font-family: var(--font-display); color: var(--ink-3); font-size: 13px; margin: 4px 0 0; }
.fiche-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 12px; }
.fiche-link { color: var(--ink-2); text-decoration: none; }
.fiche-link:hover { color: var(--sienna); }
.fiche-progress { font-family: var(--font-mono); color: var(--sienna); font-size: 14px; font-weight: 600; }
.fiche-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--paper-3); color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.fiche-badge--en_cours, .fiche-badge--accepte, .fiche-badge--payee, .fiche-badge--fidele { background: rgba(76, 159, 91, 0.1); color: #4c9f5b; border-color: rgba(76, 159, 91, 0.3); }
.fiche-badge--en_retard, .fiche-badge--refuse, .fiche-badge--perdu { background: rgba(192, 48, 48, 0.08); color: var(--red); border-color: rgba(192, 48, 48, 0.3); }
.fiche-badge--envoye, .fiche-badge--emise, .fiche-badge--prospect, .fiche-badge--en_attente { background: rgba(186, 116, 73, 0.12); color: var(--sienna); border-color: rgba(186, 116, 73, 0.3); }

.fiche-pill {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 10px; font-family: var(--font-mono);
  background: var(--paper-3); color: var(--ink-2); border: 1px solid var(--hairline);
}
.fiche-pill--accepte, .fiche-pill--payee { color: #4c9f5b; border-color: rgba(76, 159, 91, 0.3); }
.fiche-pill--refuse, .fiche-pill--perdu, .fiche-pill--en_retard { color: var(--red); border-color: rgba(192, 48, 48, 0.3); }
.fiche-pill--envoye, .fiche-pill--emise { color: var(--sienna); border-color: rgba(186, 116, 73, 0.3); }

.fiche-tabs {
  display: flex; gap: 6px;
  padding: 4px; background: var(--paper-3);
  border-radius: 8px; margin-bottom: 16px;
}
.ft-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all 120ms ease;
}
.ft-btn:hover { color: var(--ink-2); }
.ft-btn.is-active { background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 3px rgba(21,19,26,0.05); }

.fiche-body { min-height: 220px; max-height: 60vh; overflow-y: auto; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fiche-card {
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
}
.fiche-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}
.fiche-card--stats { background: var(--paper-2); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-mini {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--paper); border: 1px solid var(--hairline-2);
  border-radius: 6px;
}
.sm-val { font-family: var(--font-display); font-size: 18px; color: var(--ink); font-weight: 500; }
.sm-lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-mini--warn .sm-val { color: var(--red); }
.stat-mini--ok .sm-val { color: #4c9f5b; }

.mission-preflight {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mission-preflight-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.mission-preflight-head strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.mission-preflight-head p {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}
.mission-preflight--ok {
  border-color: rgba(76,159,91,0.42);
}
.mission-preflight--block {
  border-color: rgba(218,77,67,0.5);
}
.mission-preflight-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mission-preflight-chip {
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--paper);
}
.mission-preflight-chip--block {
  color: var(--red);
  border-color: rgba(218,77,67,0.35);
  background: rgba(218,77,67,0.08);
}
.mission-preflight-chip--warn {
  color: var(--sienna);
  border-color: rgba(193,88,31,0.35);
  background: rgba(193,88,31,0.08);
}
.mission-preflight-chip--ok {
  color: #4c9f5b;
  border-color: rgba(76,159,91,0.35);
  background: rgba(76,159,91,0.08);
}

.fiche-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid var(--hairline);
}
.fiche-note { font-family: var(--font-display); font-size: 11px; color: var(--ink-3); margin-top: 10px; }
.progress-bar {
  height: 12px; background: var(--paper-3); border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hairline);
}
.progress-bar-fill { height: 100%; background: var(--sienna); transition: width 200ms ease; }

/* Timeline d'activité par entité */
.timeline { display: flex; flex-direction: column; gap: 4px; }
.tl-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--hairline-2);
  position: relative;
}
.tl-row:last-child { border-bottom: 0; }
.tl-dot {
  width: 26px; height: 26px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ink-2);
}
.tl-row.tl-devis    .tl-dot { color: var(--sienna); border-color: rgba(186,116,73,0.3); background: var(--sienna-soft); }
.tl-row.tl-facture  .tl-dot { color: #4c9f5b; border-color: rgba(76,159,91,0.3); background: rgba(76,159,91,0.08); }
.tl-row.tl-mission  .tl-dot { color: #5b6dc1; border-color: rgba(91,109,193,0.3); background: rgba(91,109,193,0.08); }
.tl-row.tl-meta     .tl-dot { color: var(--ink-3); }
.tl-row.tl-accent   .tl-dot { box-shadow: 0 0 0 3px rgba(76,159,91,0.18); }
.tl-row.tl-danger   .tl-dot { color: var(--red); border-color: rgba(192,48,48,0.3); }
.tl-content { display: flex; flex-direction: column; gap: 2px; }
.tl-label { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.tl-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.tl-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .fiche-grid, .stats-grid { grid-template-columns: 1fr; }
  .fiche-head { flex-direction: column; }
  .fiche-meta { align-items: flex-start; }
}

/* Modal devis/facture multi-lignes */
.am-inner--wide { width: min(780px, 100%) !important; max-width: 780px; }
.am-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-lines { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--paper-3); border-radius: 8px; border: 1px solid var(--hairline); }
.dline { background: var(--paper); border: 1px solid var(--hairline-2); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.dline-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; align-items: end; }
.dline-row + .dline-row { grid-template-columns: 70px 80px 110px 90px 28px; }
.dline-del { padding: 2px 8px !important; align-self: end; height: 32px; }
.dline-totals { display: flex; gap: 18px; justify-content: flex-end; padding: 10px 6px 2px; font-size: 13px; color: var(--ink-2); }
.dt-cell strong { color: var(--ink); font-size: 14px; }
.dt-cell--ttc { color: var(--sienna); font-weight: 600; }
.dt-cell--ttc strong { color: var(--sienna); }
@media (max-width: 700px) {
  .am-row { grid-template-columns: 1fr; }
  .dline-row + .dline-row { grid-template-columns: 1fr 1fr; }
  .prod-tabs {
    overflow-x: auto;
    align-items: stretch;
  }
  .pt-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .prod-footer {
    flex-direction: column;
  }
  .bom-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BASIC — responsive
   ============================================================ */
@media (max-width: 1200px) {
  .basic-main { grid-template-columns: var(--basic-left-w) 1fr var(--basic-right-collapsed-w); }
  .basic-right { width: var(--basic-right-collapsed-w); }
  .basic-right .right-content { display: none; }
  .basic-right.is-open { width: var(--basic-right-w); }
  .basic-right.is-open .right-content { display: block; }
}
@media (max-width: 720px) {
  :root { --basic-left-w: 0; }
  .basic-main { grid-template-columns: 0 1fr 0; }
  .basic-left { display: none; }
  .basic-right { display: none; }
  .basic-brain-status { display: none; }
  .basic-topbar { grid-template-columns: 1fr auto; gap: 8px; padding: 0 10px; }
  .basic-brand-zone .brand-word { display: none; }
  .archive-confirm { grid-template-columns: 1fr; }
  .flow-banner { gap: 8px; padding: 10px 12px; }
  .lb-inner { grid-template-columns: 1fr; }
  .work-zone { padding: 16px; }
}

/* ============================================================
   GOUVERNANCE — Runtime monitoring (tier Sovereign)
   ============================================================ */
.page--governance { display: flex; flex-direction: column; gap: 24px; }
.page-head-badges { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.gov-section { display: flex; flex-direction: column; gap: 10px; }
.gov-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.gov-vetos-filters { display: flex; gap: 10px; align-items: end; }
.gov-h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px; font-weight: 500; margin: 0;
  color: var(--ink); letter-spacing: 0.01em;
}
.gov-sub-help { color: var(--ink-3); font-size: 13px; margin: 0 0 4px 0; }
.gov-sub-help code {
  background: var(--paper-3); padding: 1px 5px; border-radius: 3px;
  font-size: 12px;
}

/* Checks système */
.gov-checks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.gov-check {
  display: grid; grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 10px;
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 10px 12px;
}
.gov-check-dot { font-size: 16px; line-height: 1; text-align: center; }
.gov-check-label { font-weight: 500; color: var(--ink); font-size: 14px; }
.gov-check-detail { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.gov-check-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 500; padding: 2px 8px; border-radius: 4px;
  background: var(--paper-3); color: var(--ink-2);
}
.gov-check--ok .gov-check-dot { color: #2C8F4F; }
.gov-check--ok .gov-check-status { background: rgba(44,143,79,0.12); color: #2C8F4F; }
.gov-check--warn .gov-check-dot { color: var(--sienna); }
.gov-check--warn .gov-check-status { background: var(--sienna-soft); color: var(--sienna); }
.gov-check--err .gov-check-dot { color: var(--red); }
.gov-check--err .gov-check-status { background: rgba(192,48,48,0.12); color: var(--red); }
.gov-check--muted .gov-check-dot { color: var(--ink-3); }

/* Agents autonomes */
.gov-autonomous { display: flex; flex-direction: column; gap: 12px; }
.gov-auto-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.gov-auto-card {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid var(--ink-3);
  border-radius: 10px; padding: 14px 16px;
  display: grid; gap: 8px;
}
.gov-auto-card--ok { border-left-color: #2C8F4F; }
.gov-auto-card--err { border-left-color: var(--red); }
.gov-auto-kicker {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
}
.gov-auto-status {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 28px; line-height: 1; color: var(--ink);
}
.gov-auto-card p { margin: 0; color: var(--ink-3); font-size: 13px; }
.gov-auto-safe {
  color: #2C8F4F; font-size: 13px;
  background: rgba(44,143,79,0.10); border-radius: 6px; padding: 7px 9px;
}
.gov-auto-alert {
  color: var(--red); font-size: 13px;
  background: rgba(192,48,48,0.12); border-radius: 6px; padding: 7px 9px;
}
.gov-auto-next {
  display: grid; gap: 4px;
  background: rgba(var(--active-tab-rgb, 0,122,255),0.10);
  border: 1px solid rgba(var(--active-tab-rgb, 0,122,255),0.20);
  border-radius: 8px; padding: 9px 10px;
}
.gov-auto-next span { color: var(--ink-3); font-size: 13px; }
.gov-auto-recs { display: grid; gap: 8px; }
.gov-auto-rec {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 10px 12px;
}
.gov-auto-rec div { display: grid; gap: 2px; }
.gov-auto-rec em { color: var(--ink-3); font-size: 12px; }

/* ============================================================
   GAME MODE — carte isométrique ATLAS
   ============================================================ */
.page--game-mode { display: flex; flex-direction: column; gap: 24px; }
.gm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.gm-actions { flex-shrink: 0; }
.gm-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: stretch;
}
.gm-map {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 15%, rgba(100,210,255,0.16), transparent 30%),
    radial-gradient(circle at 78% 76%, rgba(175,82,222,0.18), transparent 35%),
    linear-gradient(145deg, rgba(8,22,26,0.96), rgba(16,12,25,0.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 24px 80px rgba(0,0,0,0.28);
}
.gm-grid {
  position: absolute;
  inset: -18%;
  transform: rotateX(58deg) rotateZ(-45deg) scale(1.2);
  transform-origin: center;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.32;
}
.gm-lane {
  position: absolute;
  height: 76px;
  width: 76%;
  left: 12%;
  top: 47%;
  transform: rotate(-24deg) skewX(36deg);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(var(--active-tab-rgb, 100,210,255),0.18), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
}
.gm-lane--b {
  top: 42%;
  width: 62%;
  left: 19%;
  transform: rotate(25deg) skewX(-34deg);
  opacity: 0.72;
}
.gm-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.gm-zone {
  position: absolute;
  width: 150px;
  height: 110px;
  display: grid;
  place-items: center;
  border: 0;
  color: #f5f5f7;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform: rotate(-18deg) skew(18deg);
  transform-origin: center;
}
.gm-zone:hover .gm-zone-label {
  border-color: rgba(255,255,255,0.28);
  background: rgba(20,20,26,0.88);
}
.gm-zone--warehouse { left: 10%; top: 31%; }
.gm-zone--workshop { left: 39%; top: 31%; }
.gm-zone--crew { right: 14%; top: 34%; }
.gm-zone--garage { left: 18%; bottom: 22%; }
.gm-zone--dispatch { left: 44%; bottom: 20%; }
.gm-zone--web { right: 15%; bottom: 22%; }
.gm-zone-building,
.gm-zone-props,
.gm-vehicle-mini {
  position: absolute;
  transform: skew(-18deg) rotate(18deg);
}
.gm-zone-building {
  width: 94px;
  height: 64px;
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 -18px 22px rgba(0,0,0,0.20), 0 18px 38px rgba(0,0,0,0.25);
}
.gm-zone-building::before {
  content: '';
  position: absolute;
  left: 12px;
  top: -22px;
  width: 70px;
  height: 34px;
  border-radius: 8px;
  transform: rotate(45deg) skew(-16deg, -16deg);
  background: rgba(255,255,255,0.30);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.gm-zone-building i {
  position: absolute;
  bottom: 10px;
  width: 12px;
  height: 22px;
  border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,0.18);
}
.gm-zone-building i:nth-child(1) { left: 17px; }
.gm-zone-building i:nth-child(2) { left: 40px; }
.gm-zone-building i:nth-child(3) { right: 17px; }
.gm-zone-building--warehouse { background: linear-gradient(145deg, rgba(48,176,199,0.34), rgba(255,255,255,0.06)); }
.gm-zone-building--workshop { background: linear-gradient(145deg, rgba(0,199,190,0.34), rgba(255,255,255,0.06)); }
.gm-zone-building--dispatch { background: linear-gradient(145deg, rgba(255,149,0,0.34), rgba(255,255,255,0.06)); }
.gm-zone-building--web { background: linear-gradient(145deg, rgba(175,82,222,0.34), rgba(255,255,255,0.06)); }
.gm-zone-props--stock {
  display: flex;
  gap: 4px;
  left: 74px;
  top: 57px;
}
.gm-zone-props--stock i {
  width: 21px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(145deg, #ffd60a, #bd6d12);
  box-shadow: 0 9px 16px rgba(0,0,0,0.23);
}
.gm-zone-props--machine {
  display: flex;
  gap: 8px;
  left: 42px;
  top: 50px;
}
.gm-zone-props--machine i {
  width: 20px;
  height: 34px;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(145deg, #64d2ff, #0a84ff);
  box-shadow: inset 0 -12px 12px rgba(0,0,0,0.18);
}
.gm-zone-props--machine i:nth-child(2) { height: 42px; margin-top: -8px; background: linear-gradient(145deg, #ff9f0a, #bf5a00); }
.gm-zone-props--machine i:nth-child(3) { background: linear-gradient(145deg, #30d158, #126b2d); }
.gm-zone-props--crew {
  display: flex;
  gap: 8px;
  left: 34px;
  top: 36px;
}
.gm-zone-props--crew i {
  width: 18px;
  height: 38px;
  border-radius: 999px 999px 7px 7px;
  background: linear-gradient(145deg, #bf5af2, #5e2d79);
  box-shadow: 0 10px 16px rgba(0,0,0,0.22);
}
.gm-zone-props--crew i:nth-child(2) { background: linear-gradient(145deg, #64d2ff, #1f5871); }
.gm-zone-props--crew i:nth-child(3) { background: linear-gradient(145deg, #30d158, #17672d); }
.gm-zone-props--crew i:nth-child(4) { background: linear-gradient(145deg, #ff9f0a, #8c4d05); }
.gm-vehicle-mini {
  left: 35px;
  top: 44px;
  width: 72px;
  height: 34px;
  border-radius: 12px 18px 8px 8px;
  background: linear-gradient(145deg, #0a84ff, #053f85);
  box-shadow: inset 0 -12px 14px rgba(0,0,0,0.20), 0 13px 20px rgba(0,0,0,0.25);
}
.gm-vehicle-mini::before,
.gm-vehicle-mini::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111;
  border: 3px solid rgba(255,255,255,0.34);
}
.gm-vehicle-mini::before { left: 11px; }
.gm-vehicle-mini::after { right: 11px; }
.gm-vehicle-mini i {
  position: absolute;
  left: 43px;
  top: 6px;
  width: 20px;
  height: 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.36);
}
.gm-vehicle-mini--b {
  left: 64px;
  top: 24px;
  transform: skew(-18deg) rotate(18deg) scale(0.72);
  background: linear-gradient(145deg, #ff9f0a, #7c4100);
}
.gm-zone-label {
  position: absolute;
  left: 50%;
  bottom: -15px;
  min-width: 128px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,245,247,0.82);
  background: rgba(16,16,20,0.58);
  transform: translateX(-50%) skew(-18deg) rotate(18deg);
  font-size: 12px;
  font-weight: 760;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.gm-zone-label strong {
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
}
.gm-flow {
  position: absolute;
  z-index: 0;
  height: 6px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(100,210,255,0), rgba(100,210,255,0) 0 18px, rgba(100,210,255,0.80) 18px 34px),
    rgba(255,255,255,0.08);
  box-shadow: 0 0 24px rgba(100,210,255,0.22);
  animation: gmFlowMove 1.8s linear infinite;
}
.gm-flow--stock-machine { left: 22%; top: 43%; width: 28%; transform: rotate(-4deg); }
.gm-flow--machine-product { left: 49%; top: 43%; width: 22%; transform: rotate(7deg); }
.gm-flow--product-mission { left: 48%; top: 60%; width: 22%; transform: rotate(-16deg); }
.gm-flow--mission-facture { left: 62%; top: 70%; width: 17%; transform: rotate(15deg); }
@keyframes gmFlowMove {
  from { background-position: 0 0, 0 0; }
  to { background-position: 52px 0, 0 0; }
}
.gm-building {
  position: absolute;
  z-index: 2;
  width: 210px;
  min-height: 218px;
  padding: 12px 14px 14px;
  display: grid;
  gap: 7px;
  text-align: left;
  color: #f5f5f7;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 20px 46px rgba(0,0,0,0.30);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.gm-building:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--gm-accent) 62%, white);
  background: rgba(255,255,255,0.11);
}
.gm-building--missions { left: 9%; top: 12%; }
.gm-building--stock { left: 39%; top: 8%; }
.gm-building--humain { right: 8%; top: 15%; }
.gm-building--machines { left: 16%; bottom: 12%; }
.gm-building--sites { left: 44%; bottom: 8%; }
.gm-building--governance { right: 8%; bottom: 14%; }
.gm-object-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.gm-object {
  position: absolute;
  left: var(--gm-x);
  top: var(--gm-y);
  width: 56px;
  min-height: 72px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #f5f5f7;
  background: transparent;
  border: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.34));
}
.gm-object:hover {
  z-index: 20;
}
.gm-object:hover .gm-object-token {
  transform: translateY(-8px) scale(1.08);
  border-color: rgba(255,255,255,0.42);
}
.gm-object:hover .gm-object-label {
  opacity: 1;
  transform: translateY(0);
}
.gm-object-base {
  position: absolute;
  top: 36px;
  width: 52px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  transform: rotate(-18deg);
}
.gm-object-token {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  box-shadow: inset 0 -12px 16px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.22);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 900;
  transition: transform 150ms ease, border-color 150ms ease;
}
.gm-object-token img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.gm-object-label {
  position: absolute;
  top: 52px;
  left: 50%;
  width: 150px;
  display: grid;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(16,16,20,0.88);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  text-align: left;
}
.gm-object-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.gm-object-label em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(245,245,247,0.66);
  font-size: 11px;
  font-style: normal;
}
.gm-object--mission .gm-object-token { color: #ff9f0a; background: linear-gradient(145deg, rgba(255,159,10,0.36), rgba(255,255,255,0.07)); }
.gm-object--product .gm-object-token,
.gm-object--finished .gm-object-token { color: #64d2ff; background: linear-gradient(145deg, rgba(100,210,255,0.32), rgba(255,255,255,0.07)); }
.gm-object--stock .gm-object-token,
.gm-object--part .gm-object-token { color: #30b0c7; background: linear-gradient(145deg, rgba(48,176,199,0.30), rgba(255,255,255,0.07)); }
.gm-object--consumable .gm-object-token { color: #30d158; background: linear-gradient(145deg, rgba(48,209,88,0.30), rgba(255,255,255,0.07)); border-radius: 999px; }
.gm-object--human .gm-object-token { color: #bf5af2; background: linear-gradient(145deg, rgba(191,90,242,0.32), rgba(255,255,255,0.07)); border-radius: 999px; }
.gm-object--machine .gm-object-token { color: #00c7be; background: linear-gradient(145deg, rgba(0,199,190,0.32), rgba(255,255,255,0.07)); }
.gm-object--supplier .gm-object-token { color: #ffd60a; background: linear-gradient(145deg, rgba(255,214,10,0.28), rgba(255,255,255,0.07)); }
.gm-object--purchase .gm-object-token { color: #ff453a; background: linear-gradient(145deg, rgba(255,69,58,0.26), rgba(255,255,255,0.07)); }
.gm-object--vehicle .gm-object-token { color: #0a84ff; background: linear-gradient(145deg, rgba(10,132,255,0.36), rgba(255,255,255,0.07)); }
.gm-object--client .gm-object-token { color: #0a84ff; background: linear-gradient(145deg, rgba(10,132,255,0.30), rgba(255,255,255,0.07)); }
.gm-object--site .gm-object-token { color: #af52de; background: linear-gradient(145deg, rgba(175,82,222,0.32), rgba(255,255,255,0.07)); }
.gm-object--warn .gm-object-token::after {
  content: '!';
  position: absolute;
  right: -5px;
  top: -7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff9f0a;
  color: #111;
  font-size: 11px;
}
.gm-building-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-building-level,
.gm-building-count {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
}
.gm-building-level {
  padding: 6px 8px;
  color: var(--gm-accent);
  background: color-mix(in srgb, var(--gm-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gm-accent) 34%, transparent);
}
.gm-building-count {
  min-width: 34px;
  padding: 6px 9px;
  text-align: center;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}
.gm-building[data-tone="ok"] .gm-building-count { background: rgba(48,209,88,0.18); color: #9ff2b1; }
.gm-building[data-tone="warn"] .gm-building-count { background: rgba(255,159,10,0.20); color: #ffd18a; }
.gm-building[data-tone="warn"]::after {
  content: attr(data-warn);
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff9f0a;
  color: #111;
  font-weight: 800;
  font-size: 12px;
}
.gm-building-shape {
  position: relative;
  height: 72px;
  margin: 4px 0 2px;
}
.gm-roof,
.gm-core,
.gm-shadow { position: absolute; left: 50%; transform: translateX(-50%); }
.gm-shadow {
  bottom: 0;
  width: 118px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  filter: blur(4px);
}
.gm-core {
  bottom: 14px;
  width: 92px;
  height: 44px;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gm-accent) 74%, #fff), color-mix(in srgb, var(--gm-accent) 42%, #000));
  box-shadow: inset 0 -16px 22px rgba(0,0,0,0.18), 0 10px 22px color-mix(in srgb, var(--gm-accent) 28%, transparent);
}
.gm-roof {
  bottom: 50px;
  width: 76px;
  height: 34px;
  transform: translateX(-50%) rotate(45deg) skew(-14deg, -14deg);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gm-accent) 84%, #fff);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}
.gm-building-title { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.gm-building-module {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--gm-accent);
  background: color-mix(in srgb, var(--gm-accent) 15%, transparent);
}
.gm-building-role { color: rgba(245,245,247,0.72); font-size: 13px; line-height: 1.28; }
.gm-panel { display: grid; gap: 12px; align-content: start; }
.gm-panel-card {
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.18);
}
.gm-panel-card strong { display: block; font-size: 22px; margin: 5px 0; color: var(--ink); }
.gm-panel-card p { margin: 0; color: var(--ink-3); line-height: 1.35; }
.gm-kicker {
  font-family: ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--active-tab-color, #64d2ff);
  font-size: 11px;
}
.gm-alerts,
.gm-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.gm-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,245,247,0.78);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
}
.gm-legend-chip i {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--active-tab-color, #64d2ff);
  font-style: normal;
}
.gm-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.gm-overview-stats span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,245,247,0.72);
  background: rgba(255,255,255,0.055);
  font-size: 12px;
}
.gm-overview-stats strong {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
}
.gm-alert-detail { display: grid; gap: 12px; margin-top: 10px; }
.gm-alert-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.12);
}
.gm-alert-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.gm-alert-group-head span { font-weight: 750; }
.gm-alert-group-head strong {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #111;
  background: var(--active-tab-color, #64d2ff);
  font-size: 12px;
}
.gm-alert-list { display: grid; gap: 7px; }
.gm-alert-row,
.gm-alert-more {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(255,255,255,0.055);
  cursor: pointer;
}
.gm-alert-row:hover,
.gm-alert-more:hover {
  border-color: rgba(var(--active-tab-rgb, 100,210,255),0.42);
  background: rgba(var(--active-tab-rgb, 100,210,255),0.12);
}
.gm-alert-row span { font-weight: 700; }
.gm-alert-row em { color: var(--ink-3); font-style: normal; font-size: 12px; line-height: 1.25; }
.gm-alert-row--warn { border-left: 3px solid #ff9f0a; }
.gm-alert-row--idle { border-left: 3px solid rgba(255,255,255,0.22); }
.gm-alert-more {
  display: block;
  color: var(--active-tab-color, #64d2ff);
  font-weight: 700;
}
.gm-alert {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--ink);
  background: rgba(255,255,255,0.07);
}
button.gm-alert { cursor: pointer; }
.gm-alert--warn { background: rgba(255,159,10,0.14); border-color: rgba(255,159,10,0.28); color: #ffd18a; }
.gm-alert--ok { background: rgba(48,209,88,0.13); border-color: rgba(48,209,88,0.25); color: #9ff2b1; }
.gm-alert--idle { color: var(--ink-3); }

/* Game Mode skin — factory tycoon clair, miniature et lisible */
.page--game-mode .page-sub { color: rgba(245,245,247,0.70); }
.gm-map {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.34);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.42), transparent 25%),
    linear-gradient(145deg, #25c2ff 0%, #12a8dd 45%, #0b8fbd 100%);
  background-size: 46px 46px, 46px 46px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 24px 80px rgba(0,82,126,0.34);
}
.gm-grid {
  inset: 8% 6%;
  opacity: 0.40;
  border-radius: 22px;
  background-image:
    linear-gradient(rgba(255,255,255,0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.32) 1px, transparent 1px);
  background-size: 42px 42px;
}
.gm-grid::after {
  content: '';
  position: absolute;
  inset: 7% 7%;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(246,252,255,0.95), rgba(207,238,248,0.95));
  border: 4px solid rgba(41,83,111,0.22);
  box-shadow: 0 30px 62px rgba(0,72,105,0.24);
}
.gm-lane {
  height: 42px;
  width: 66%;
  left: 16%;
  top: 51%;
  border-radius: 10px;
  border: 4px solid rgba(55,73,92,0.96);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.82) 0 12px, transparent 12px 28px),
    linear-gradient(180deg, #303d4d, #121923);
  box-shadow: 0 16px 28px rgba(0,0,0,0.24), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.gm-lane--b {
  top: 43%;
  width: 54%;
  left: 23%;
  opacity: 0.95;
}
.gm-zone-building {
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(145deg, #f8fbff, #cbd9e7);
  border: 3px solid rgba(54,76,98,0.28);
  box-shadow: inset 0 -18px 22px rgba(51,78,101,0.18), 0 18px 38px rgba(0,81,120,0.22);
}
.gm-zone-building::before {
  background: linear-gradient(145deg, #ffffff, #dce9f4);
}
.gm-zone-building i {
  background: rgba(32,74,103,0.25);
}
.gm-zone-building--warehouse { background: linear-gradient(145deg, #eaf8ff, #91d6ef); }
.gm-zone-building--workshop { background: linear-gradient(145deg, #f5f6ff, #b8c3dc); }
.gm-zone-building--dispatch { background: linear-gradient(145deg, #fff3d8, #f9a83b); }
.gm-zone-building--web { background: linear-gradient(145deg, #f3e7ff, #b277e7); }
.gm-zone:hover .gm-zone-label {
  border-color: rgba(16,72,105,0.34);
  background: rgba(255,255,255,0.96);
}
.gm-zone-label {
  border: 2px solid rgba(26,64,88,0.18);
  color: #16364d;
  background: rgba(255,255,255,0.88);
}
.gm-zone-label strong { color: #0a84ff; }
.gm-zone-props--stock i { background: linear-gradient(145deg, #fff2a4, #f2a32b); }
.gm-zone-props--machine i { background: linear-gradient(145deg, #6ed7ff, #2677d5); }
.gm-vehicle-mini { background: linear-gradient(145deg, #ffcf62, #f26d22); }
.gm-vehicle-mini--b { background: linear-gradient(145deg, #7fd5ff, #256fc6); }
.gm-flow {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,196,46,0.96) 18px 34px),
    rgba(18,32,45,0.75);
  box-shadow: 0 0 24px rgba(255,196,46,0.30);
}
.gm-building {
  width: 192px;
  min-height: 188px;
  color: #162232;
  background: rgba(255,255,255,0.88);
  border: 2px solid rgba(41,79,103,0.16);
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(0,86,130,0.24);
}
.gm-building:hover { background: rgba(255,255,255,0.98); }
.gm-building-role { color: rgba(22,34,50,0.66); }
.gm-building-count {
  color: #102033;
  background: rgba(10,132,255,0.10);
  border: 1px solid rgba(10,132,255,0.18);
}
.gm-core {
  box-shadow: inset 0 -16px 22px rgba(0,0,0,0.15), 0 10px 22px color-mix(in srgb, var(--gm-accent) 22%, transparent);
}
.gm-object-base {
  background: rgba(13,70,105,0.20);
}
.gm-object-token {
  border: 2px solid rgba(255,255,255,0.74);
  background: linear-gradient(145deg, rgba(255,255,255,0.90), rgba(230,242,250,0.70));
  box-shadow: inset 0 -10px 14px rgba(0,84,130,0.16), 0 8px 16px rgba(0,77,112,0.22);
}
.gm-object-label {
  border: 1px solid rgba(28,70,96,0.18);
  background: rgba(255,255,255,0.96);
}
.gm-object-label strong { color: #12243a; }
.gm-object-label em { color: rgba(18,36,58,0.58); }
.gm-panel-card {
  border-radius: 14px;
}

/* Exterior factory sketch — façade, cheminée, route, parking et stock extérieur */
.gm-exterior {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.gm-road {
  position: absolute;
  height: 54px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.72) 0 14px, transparent 14px 34px),
    linear-gradient(180deg, #344252, #17212d);
  border: 4px solid rgba(65,83,101,0.85);
  box-shadow: 0 18px 34px rgba(0,70,105,0.22);
}
.gm-road--main {
  left: 3%;
  bottom: 9%;
  width: 45%;
  transform: rotate(-9deg) skewX(24deg);
}
.gm-road--gate {
  right: 7%;
  top: 33%;
  width: 26%;
  transform: rotate(7deg) skewX(-20deg);
}
.gm-factory-shell {
  position: absolute;
  left: 33%;
  top: 18%;
  width: 260px;
  height: 150px;
  transform: rotate(-18deg) skew(18deg);
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(145deg, #f5f7fb, #b9c8d5);
  border: 3px solid rgba(51,74,95,0.30);
  box-shadow: inset 0 -32px 36px rgba(72,91,110,0.20), 0 28px 54px rgba(0,65,96,0.24);
}
.gm-factory-shell::before {
  content: '';
  position: absolute;
  left: 0;
  top: -22px;
  width: 100%;
  height: 24px;
  background: linear-gradient(180deg, #ffffff, #cfdae6);
  border: 2px solid rgba(51,74,95,0.20);
  transform: skewX(-35deg);
  transform-origin: bottom left;
}
.gm-factory-shell::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, #d4e0ea, #92a6b7);
  border: 2px solid rgba(51,74,95,0.20);
  transform: skewY(-45deg);
  transform-origin: top left;
}
.gm-factory-shell b {
  position: absolute;
  left: 22px;
  top: 48px;
  color: rgba(18,52,72,0.52);
  font-size: 16px;
  letter-spacing: 0.16em;
  transform: skew(-18deg) rotate(18deg);
}
.gm-roof-tooth {
  position: absolute;
  top: -52px;
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #ffffff, #c8d6e2);
  border: 2px solid rgba(51,74,95,0.20);
  clip-path: polygon(0 100%, 48% 0, 100% 100%);
}
.gm-roof-tooth--1 { left: 35px; }
.gm-roof-tooth--2 { left: 96px; }
.gm-roof-tooth--3 { left: 157px; }
.gm-chimney {
  position: absolute;
  left: 125px;
  top: -96px;
  width: 38px;
  height: 92px;
  border-radius: 16px 16px 8px 8px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.22) 0 9px, transparent 9px 22px),
    linear-gradient(145deg, #dce6ee, #74899b);
  border: 3px solid rgba(51,74,95,0.28);
  transform: skew(-4deg);
}
.gm-chimney::after {
  content: '';
  position: absolute;
  left: 19px;
  top: -40px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(92,105,116,0.24);
  box-shadow: 16px -18px 0 rgba(92,105,116,0.14), 34px -28px 0 rgba(92,105,116,0.10);
}
.gm-factory-door {
  position: absolute;
  left: 28px;
  bottom: 0;
  width: 48px;
  height: 56px;
  background: linear-gradient(90deg, #879bac, #4d6071);
  border-radius: 5px 5px 0 0;
  border: 2px solid rgba(28,46,62,0.32);
}
.gm-loading-ramp {
  position: absolute;
  left: 18px;
  bottom: -31px;
  width: 72px;
  height: 34px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.32) 0 8px, transparent 8px 16px),
    linear-gradient(145deg, #d0d8df, #8b9aa8);
  transform: skewX(-34deg);
  border: 2px solid rgba(51,74,95,0.24);
}
.gm-carbon-bubble,
.gm-yard-label,
.gm-gate-label {
  position: absolute;
  z-index: 5;
  padding: 6px 9px;
  border-radius: 999px;
  color: #15384f;
  background: rgba(255,255,255,0.82);
  border: 2px solid rgba(31,82,116,0.16);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(0,68,105,0.14);
}
.gm-carbon-bubble { left: 56%; top: 9%; }
.gm-yard-label--stock { left: 14%; bottom: 22%; }
.gm-yard-label--info { left: 7%; top: 16%; }
.gm-gate-label { right: 9%; bottom: 20%; }
.gm-parking-slot {
  position: absolute;
  right: 18%;
  top: 39%;
  width: 78px;
  height: 40px;
  border-radius: 8px;
  border: 2px dashed rgba(25,80,112,0.28);
  transform: rotate(-18deg) skew(18deg);
  background: rgba(255,255,255,0.20);
}
.gm-parking-slot--b { right: 10%; top: 47%; }

/* Sims-like overlay — locaux, murs bas, avatars et bulles métier */
.gm-sim-floor {
  position: absolute;
  right: 8%;
  top: 27%;
  width: 50%;
  height: 54%;
  transform: rotate(-18deg) skew(18deg);
  pointer-events: none;
  z-index: 3;
}
.gm-room {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 2px solid rgba(31,82,116,0.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)),
    repeating-linear-gradient(90deg, rgba(35,98,130,0.10) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(35,98,130,0.10) 0 2px, transparent 2px 22px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28), 0 18px 34px rgba(0,76,120,0.13);
}
.gm-room::before,
.gm-room::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #e8f4fb, #9db8c9);
  border: 1px solid rgba(37,75,98,0.18);
}
.gm-room::before {
  left: 0;
  top: -13px;
  width: 100%;
  height: 13px;
  transform: skewX(-45deg);
  transform-origin: bottom left;
}
.gm-room::after {
  right: -13px;
  top: 0;
  width: 13px;
  height: 100%;
  transform: skewY(-45deg);
  transform-origin: top left;
}
.gm-room i {
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(145deg, #ffffff, #b8d4e4);
  box-shadow: 0 10px 18px rgba(0,85,125,0.20);
}
.gm-room b {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: rgba(18,52,72,0.62);
  font-size: 11px;
  transform: skew(-18deg) rotate(18deg);
}
.gm-room--office { left: 58%; top: 2%; width: 30%; height: 30%; background-color: rgba(255,245,210,0.58); }
.gm-room--stock { left: 34%; top: 2%; width: 24%; height: 31%; background-color: rgba(210,246,255,0.60); }
.gm-room--atelier { left: 5%; top: 31%; width: 45%; height: 46%; background-color: rgba(231,232,248,0.60); }
.gm-room--showroom { left: 52%; top: 36%; width: 34%; height: 33%; background-color: rgba(245,222,255,0.54); }
.gm-room-wall {
  position: absolute;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #aec6d4);
  box-shadow: 0 10px 18px rgba(0,65,96,0.18);
}
.gm-room-wall--a { left: 29%; top: 34%; width: 32%; }
.gm-room-wall--b { left: 55%; top: 30%; width: 25%; transform: rotate(90deg); transform-origin: left center; }
.gm-room-wall--c { left: 8%; top: 78%; width: 48%; }
.gm-sims {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.gm-sim {
  position: absolute;
  width: 42px;
  height: 62px;
  display: grid;
  justify-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  pointer-events: auto;
  cursor: pointer;
  animation: gmSimBob 2.4s ease-in-out infinite;
  animation-delay: var(--sim-delay);
}
.gm-sim--1 { left: 55%; top: 42%; }
.gm-sim--2 { left: 66%; top: 47%; }
.gm-sim--3 { left: 71%; top: 58%; }
.gm-sim--4 { left: 59%; top: 66%; }
.gm-sim:nth-child(5) { left: 49%; top: 60%; }
.gm-sim:nth-child(6) { left: 76%; top: 38%; }
.gm-sim:nth-child(7) { left: 70%; top: 71%; }
.gm-sim:nth-child(8) { left: 52%; top: 51%; }
.gm-sim-head {
  position: relative;
  z-index: 3;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #102033;
  background: linear-gradient(145deg, #ffe4c2, #d59055);
  border: 2px solid rgba(255,255,255,0.78);
  font-size: 9px;
  font-weight: 900;
}
.gm-sim-body {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 30px;
  margin-top: -4px;
  border-radius: 9px 9px 6px 6px;
  background: linear-gradient(145deg, #3a8bff, #1c3f9f);
  box-shadow: inset 0 -10px 12px rgba(0,0,0,0.17);
}
.gm-sim:nth-child(2n) .gm-sim-body { background: linear-gradient(145deg, #30d158, #13752f); }
.gm-sim:nth-child(3n) .gm-sim-body { background: linear-gradient(145deg, #ff9f0a, #994d04); }
.gm-sim-shadow {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 32px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0,66,96,0.22);
  transform: rotate(-18deg);
}
.gm-sim-bubble {
  position: absolute;
  left: 50%;
  top: -28px;
  z-index: 5;
  min-width: 72px;
  max-width: 120px;
  padding: 5px 7px;
  border-radius: 999px;
  border: 2px solid rgba(25,80,112,0.14);
  color: #102033;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 16px rgba(0,69,104,0.16);
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes gmSimBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 1120px) {
  .gm-shell { grid-template-columns: 1fr; }
  .gm-map { min-height: 760px; }
}
@media (max-width: 760px) {
  .gm-head { display: grid; }
  .gm-map { min-height: auto; display: grid; gap: 12px; padding: 14px; }
  .gm-grid,
  .gm-lane,
  .gm-world,
  .gm-object-layer { display: none; }
  .gm-building {
    position: relative;
    inset: auto !important;
    width: 100%;
  }
}

/* Métriques */
.gov-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.gov-metric {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.gov-metric-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 28px; line-height: 1; color: var(--ink); font-weight: 500;
}
.gov-metric-lbl {
  font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Top règles */
.gov-toprules { display: flex; flex-direction: column; gap: 10px; }
.gov-rule-row {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 10px 12px;
}
.gov-rule-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.gov-rule-id { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-2); }
.gov-rule-count { font-size: 13px; color: var(--sienna); font-weight: 500; }
.gov-rule-bar {
  height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden;
}
.gov-rule-bar-fill { height: 100%; background: var(--sienna); transition: width 0.3s ease; }
.gov-rule-lbl { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* Vetos */
.gov-vetos { display: flex; flex-direction: column; gap: 8px; }
.gov-veto {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid var(--ink-3);
  border-radius: 6px; padding: 10px 12px;
}
.gov-veto--err { border-left-color: var(--red); }
.gov-veto--warn { border-left-color: var(--sienna); }
.gov-veto--muted { border-left-color: var(--ink-3); }
.gov-veto-head {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 12px; color: var(--ink-3); margin-bottom: 4px;
}
.gov-veto-sev {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
  padding: 1px 6px; border-radius: 3px; background: var(--paper-3);
}
.gov-veto--err .gov-veto-sev { background: rgba(192,48,48,0.12); color: var(--red); }
.gov-veto--warn .gov-veto-sev { background: var(--sienna-soft); color: var(--sienna); }
.gov-veto-rule { font-family: ui-monospace, Menlo, monospace; color: var(--ink-2); }
.gov-veto-when { margin-left: auto; }
.gov-veto-lbl { font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.gov-veto-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
}
.gov-veto-override {
  background: var(--sienna-soft); color: var(--sienna);
  padding: 1px 6px; border-radius: 3px; font-weight: 500;
}

/* Agents */
.gov-agents {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.gov-agent {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.gov-agent-head {
  display: flex; align-items: center; gap: 10px;
}
.gov-agent-icon {
  font-size: 22px; line-height: 1;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3); border-radius: 6px;
}
.gov-agent-titles { flex: 1; }
.gov-agent-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 16px; font-weight: 500; margin: 0;
  color: var(--ink);
}
.gov-agent-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--ink-3);
}
.gov-agent-mission {
  font-size: 13px; color: var(--ink-2); margin: 0;
  font-style: italic;
}
.gov-agent-scope { font-size: 12px; color: var(--ink-3); }
.gov-agent-scope strong { color: var(--ink-2); font-weight: 500; }
.gov-agent-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-3); margin-top: 4px;
  padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06);
}
.gov-agent-priv {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
  padding: 2px 8px; border-radius: 3px; background: var(--paper-3);
}
.gov-agent-priv--ok { background: rgba(44,143,79,0.10); color: #2C8F4F; }
.gov-agent-priv--warn { background: var(--sienna-soft); color: var(--sienna); }
.gov-agent-priv--muted { background: var(--paper-3); color: var(--ink-3); }
.gov-agent-tools { font-style: italic; }

/* Badges (compléments tier) */
.badge--premium { background: linear-gradient(135deg, #1a1820, #3a3540); color: #f5f1e8; }
.badge--sovereign { background: linear-gradient(135deg, #4a1a0d, #8a2f15); color: #f5f1e8; }
.badge--pro { background: var(--ink); color: var(--paper); }
.badge--free { background: var(--paper-3); color: var(--ink-3); }
.badge--ghost { background: transparent; color: var(--ink-3); border: 1px solid rgba(0,0,0,0.08); }

/* Détecteur de cohérence (Phase 30.4) */
.gov-coh-summary { margin-bottom: 12px; }
.gov-coh-result {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 12px 14px;
}
.gov-coh-result-head { margin-bottom: 8px; font-size: 14px; }
.gov-coh-result-head .muted { color: var(--ink-3); font-size: 12px; }
.gov-coh-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; font-size: 13px;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.gov-coh-line:last-child { border-bottom: 0; }
.gov-coh-lbl { color: var(--ink-2); }
.gov-coh-nums { color: var(--ink-3); font-size: 12px; }
.gov-coh-nums em { font-style: normal; opacity: 0.7; }
.gov-coh-line--warn .gov-coh-nums { color: var(--sienna); font-weight: 500; }
.gov-coh-line--ok .gov-coh-nums::before { content: '✓ '; color: #2C8F4F; }

.gov-coh-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gov-coh-group {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px; padding: 0;
}
.gov-coh-group-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; cursor: pointer; user-select: none;
  font-weight: 500; font-size: 14px; color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gov-coh-group[open] .gov-coh-group-head { background: var(--paper-3); }
.gov-coh-group-count {
  background: var(--sienna-soft); color: var(--sienna);
  padding: 2px 8px; border-radius: 10px; font-size: 12px;
  font-weight: 600;
}
.gov-coh-anom {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.gov-coh-anom:last-child { border-bottom: 0; }
.gov-coh-anom-body { flex: 1; }
.gov-coh-anom-summary { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.gov-coh-anom-action { font-size: 12px; color: var(--ink-3); }
.gov-coh-anom-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.btn--xs {
  font-size: 11px; padding: 3px 8px;
  border-radius: 4px; line-height: 1.4;
}

/* ============================================================
   INBOX INTELLIGENTE — Drop zone + cartes documents (Module 1)
   ============================================================ */
.intake-page { display: flex; flex-direction: column; gap: 20px; }
.intake-drop {
  background: var(--paper-2); border: 2px dashed rgba(0,0,0,0.15);
  border-radius: 12px; padding: 28px 20px;
  text-align: center;
  transition: all 0.2s ease;
}
.intake-drop.is-over {
  background: var(--sienna-soft); border-color: var(--sienna);
  transform: scale(1.01);
}
.intake-drop-inner { max-width: 480px; margin: 0 auto; }
.intake-drop-icon {
  font-size: 38px; opacity: 0.4; line-height: 1;
  margin-bottom: 8px;
}
.intake-drop.is-over .intake-drop-icon { opacity: 1; color: var(--sienna); }
.intake-drop-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 22px; font-weight: 500; margin: 0 0 6px;
  color: var(--ink);
}
.intake-drop-sub {
  font-size: 13px; color: var(--ink-3); margin: 0 0 10px;
  line-height: 1.5;
}
.intake-drop-hint { font-size: 12px; color: var(--ink-3); margin: 0; }
.btn-link {
  background: none; border: none; padding: 0;
  color: var(--sienna); text-decoration: underline;
  cursor: pointer; font: inherit;
}

.intake-list { display: flex; flex-direction: column; gap: 16px; }
.intake-group { display: flex; flex-direction: column; gap: 8px; }
.intake-group-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px; font-weight: 500; margin: 8px 0 4px;
  color: var(--ink-2);
}
.intake-group-title .muted { color: var(--ink-3); font-size: 13px; }

.intake-card {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 14px; align-items: flex-start;
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 14px;
  transition: border-color 0.2s ease;
}
.intake-card:hover { border-color: rgba(0,0,0,0.12); }
.intake-card--analyzing {
  display: flex; gap: 12px; align-items: center;
  background: var(--paper-3); border-style: dashed;
}
.intake-card--classified { opacity: 0.8; }
.intake-card--failed { border-color: rgba(192,48,48,0.3); }

.ic-thumb {
  width: 88px; height: 88px; border-radius: 6px;
  background: var(--paper-3); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  letter-spacing: 0.05em;
}
.ic-thumb img, img.ic-thumb {
  width: 100%; height: 100%; object-fit: cover;
}
.ic-thumb--pdf { background: rgba(189,79,28,0.10); color: var(--sienna); }
.ic-thumb--doc { background: var(--paper-3); color: var(--ink-3); }
.ic-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--paper-3); border-top-color: var(--sienna);
  border-radius: 50%; animation: ic-spin 0.8s linear infinite;
}
@keyframes ic-spin { to { transform: rotate(360deg); } }

.ic-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ic-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
}
.ic-kind {
  background: var(--paper-3); color: var(--ink-2);
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.ic-kind--facture_recue { background: rgba(189,79,28,0.12); color: var(--sienna); }
.ic-kind--devis_recu { background: rgba(189,79,28,0.08); color: var(--sienna); }
.ic-kind--photo_chantier { background: rgba(50,100,150,0.12); color: #325F8C; }
.ic-kind--photo_produit { background: rgba(80,150,80,0.12); color: #2C8F4F; }
.ic-kind--photo_realisation { background: rgba(140,100,180,0.12); color: #6E4A8F; }
.ic-kind--photo_atelier { background: rgba(120,120,120,0.12); color: var(--ink-2); }
.ic-kind--document_admin { background: rgba(60,60,60,0.10); color: var(--ink-2); }
.ic-kind--unknown { background: var(--paper-3); color: var(--ink-3); }
.ic-conf {
  background: var(--paper-3); color: var(--ink-3);
  padding: 1px 6px; border-radius: 3px;
}
.ic-time { color: var(--ink-3); margin-left: auto; }
.ic-title {
  font-size: 14px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ic-sub { font-size: 13px; color: var(--ink-3); }
.ic-summary { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ic-details summary {
  cursor: pointer; color: var(--ink-3); font-size: 12px;
  padding: 4px 0;
}
.ic-extract {
  width: 100%; font-size: 12px; margin-top: 4px;
  border-collapse: collapse;
}
.ic-extract th {
  text-align: left; padding: 3px 8px 3px 0;
  color: var(--ink-3); font-weight: 500; vertical-align: top;
  width: 110px;
}
.ic-extract td { padding: 3px 0; color: var(--ink-2); }
.ic-actions {
  display: flex; gap: 8px; align-items: center; margin-top: 6px;
  flex-wrap: wrap;
}
.ic-classified { color: #2C8F4F; font-size: 12px; font-weight: 500; }
.ic-failed { color: var(--red); font-size: 12px; font-weight: 500; }

/* ============================================================
   Polish — bandeau stats stock + relation row + sticky modal close
   ============================================================ */
.stock-stats {
  background: var(--paper-2);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.stock-stats-line {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2);
}
.stock-stat { display: inline-flex; align-items: center; gap: 4px; }
.stock-stat strong { color: var(--ink); }
.stock-stat-sep { color: var(--ink-3); opacity: 0.5; }
.stock-stat-sort {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  margin-left: auto;
}
.stock-stat-sort select {
  background: var(--paper); border: 1px solid rgba(0,0,0,0.10);
  border-radius: 4px; padding: 3px 8px; font-size: 12px;
}

/* Bouton "+ Nouveau" inline à côté des selects relations */
.am-relation-row {
  display: flex; gap: 6px; align-items: stretch;
}
.am-relation-row select { flex: 1; }
.am-inline-create {
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 12px;
}

/* Liste issues sur fiche prospect détail */
.pr-issues-list { list-style: none; padding: 0; margin: 0; }
.pr-issues-list li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
  font-size: 13px;
}
.pr-issues-list li:last-child { border-bottom: 0; }
.pr-issues-list .muted { color: var(--ink-3); font-size: 12px; }

/* ============================================================
   BOM (Bill of Materials) — affichage recette produit
   ============================================================ */
.detail-table--bom { width: 100%; border-collapse: collapse; }
.detail-table--bom th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.detail-table--bom td {
  padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: middle;
}
.detail-table--bom tfoot td {
  border-bottom: 0; padding-top: 12px;
}
.bom-subtotal { text-align: right; }
.bom-kind {
  display: inline-block; margin-left: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--paper-3); color: var(--ink-3);
  font-weight: 500;
}
.bom-kind--piece       { background: rgba(50,100,150,0.12); color: #325F8C; }
.bom-kind--consommable { background: rgba(189,79,28,0.10);  color: var(--sienna); }
.bom-kind--matiere     { background: rgba(140,100,60,0.12); color: #8A6438; }
.bom-kind--produit_fini { background: rgba(80,150,80,0.12); color: #2C8F4F; }

/* ============================================================
   MODAL ENTRÉE — sections (lien / champs / extras / note)
   ============================================================ */
.am-section {
  border: 1px solid rgba(0,0,0,0.08); border-radius: 8px;
  padding: 12px 14px; margin: 0 0 12px;
  background: var(--paper-2);
}
.am-section legend {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); padding: 0 6px;
}
.am-section legend em { font-style: italic; opacity: 0.7; text-transform: none; letter-spacing: 0; }
.am-section--link { background: var(--paper-3); }

/* Lien picker */
.am-link-picker { position: relative; }
.am-link-input {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.10); background: var(--paper);
  font-size: 13px;
}
.am-link-current {
  margin-top: 8px; display: flex; gap: 6px; align-items: center;
}
.am-link-chip {
  background: var(--sienna-soft); color: var(--sienna);
  padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500;
}
.am-link-current button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 14px; padding: 0 4px;
}
.am-link-results {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; background: var(--paper);
  border: 1px solid rgba(0,0,0,0.10); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-height: 280px; overflow-y: auto;
  z-index: 100;
}
.am-link-opt {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer; font: inherit; color: inherit;
}
.am-link-opt:hover { background: var(--paper-3); }
.am-link-opt:last-child { border-bottom: 0; }
.am-link-opt-type {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3);
}
.am-link-opt-label { font-size: 13px; color: var(--ink); }
.am-link-empty { padding: 12px; color: var(--ink-3); font-size: 12px; }
.am-orphan-warn {
  color: var(--sienna); font-size: 12px;
  background: var(--sienna-soft);
  padding: 6px 10px; border-radius: 4px;
  margin: 8px 0 0;
}

/* Champs ad-hoc */
.am-section--extras { background: var(--paper); }
.am-extra-row {
  display: grid; grid-template-columns: 1fr 1fr 30px;
  gap: 8px; margin-bottom: 8px;
}
.am-extra-row input {
  padding: 6px 10px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.10); background: var(--paper-2);
  font-size: 13px;
}
.am-extra-del {
  background: none; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 4px; cursor: pointer;
  color: var(--ink-3); font-size: 14px;
}
.am-extra-del:hover { color: var(--red); border-color: var(--red); }

/* Indicateurs liste */
.gt-row--orphan { background: rgba(189,79,28,0.03); }
.gt-cell--actions {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  justify-content: flex-end;
}
.gt-link {
  font-size: 11px; color: var(--sienna);
  background: var(--sienna-soft);
  padding: 2px 8px; border-radius: 10px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-orphan { color: var(--sienna); font-size: 13px; cursor: help; }
.gt-has-note { color: var(--ink-3); font-size: 12px; cursor: help; }
.gt-has-extras {
  font-size: 11px; color: var(--ink-2); font-weight: 500;
  background: var(--paper-3); padding: 1px 6px; border-radius: 3px;
}

/* ============================================================
   COCKPIT UNIFIÉ — Accueil refondu (PRIORITÉ A)
   ============================================================ */
.accueil--cockpit { display: flex; flex-direction: column; gap: 16px; }

/* Bandeau santé système (1 ligne discrète) */
.ckp-health {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 6px;
  font-size: 12px; color: var(--ink-3);
}
.ckp-health-dot {
  font-size: 14px; line-height: 1;
  margin-right: -4px;
}
.ckp-health-dot--ok    { color: #2C8F4F; }
.ckp-health-dot--warn  { color: var(--sienna); }
.ckp-health-dot--muted { color: var(--ink-3); opacity: 0.4; }
.ckp-health-lbl {
  color: var(--ink-2); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ckp-health-sync { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* Concierge en mode compact (1 ligne d'input + chips, pas de thread) */
.concierge-chat--compact { padding: 12px 14px; gap: 8px; }
.concierge-chat--compact .cc-head { display: none; }
.cc-compact-row {
  display: flex; gap: 10px; align-items: center;
}
.cc-compact-row .cc-icon {
  font-size: 18px; color: var(--sienna);
  flex-shrink: 0;
}
.cc-compact-row .cc-form {
  flex: 1; display: flex; gap: 8px; align-items: center;
}
.cc-thread--collapsed { display: none; }
.cc-thread--collapsed:not(:empty) { display: block; max-height: 200px; overflow-y: auto; }

/* KPIs cockpit */
.ckp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.ckp-kpis .kpi-card { padding: 12px 14px; }

/* Grid 2x2 (alertes / inbox / missions / activité) */
.ckp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 920px) {
  .ckp-grid { grid-template-columns: 1fr; }
}
.ckp-block {
  background: var(--paper-2); border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 180px;
}
.ckp-block-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ckp-block-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px; font-weight: 500; margin: 0;
  color: var(--ink);
}
.ckp-link {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--sienna);
  padding: 2px 6px; border-radius: 3px;
}
.ckp-link:hover { background: var(--sienna-soft); }
.ckp-block-body {
  padding: 8px 0; flex: 1;
  display: flex; flex-direction: column;
  overflow-y: auto; max-height: 280px;
}
.ckp-empty {
  padding: 14px 16px; font-size: 13px; color: var(--ink-3);
  display: flex; align-items: center; min-height: 80px;
}

/* Rows cliquables (alertes / inbox / missions) */
.ckp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.15s;
}
.ckp-row:last-child { border-bottom: 0; }
.ckp-row:hover { background: var(--paper-3); }
.ckp-row-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--paper-3); color: var(--ink-3);
  padding: 2px 6px; border-radius: 3px;
  font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
}
.ckp-row--alert .ckp-row-tag {
  background: var(--sienna-soft); color: var(--sienna);
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
}
.ckp-row--late .ckp-row-tag {
  background: rgba(192,48,48,0.10); color: var(--red);
}
.ckp-row-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ckp-row-meta { color: var(--ink-3); font-size: 11px; }

/* KPI warning state */
.kpi-warn { color: var(--sienna); }

/* Activité réutilise .activity-list existant — juste limit hauteur */
.ckp-block--activity .activity-list { padding: 0; }

/* Cache la drop-zone scan-classic (retirée du cockpit, reste accessible via FAB) */
.drop-zone--hidden { display: none !important; }

/* ============================================================
   ONBOARDING — Bannière "Découvrir ATLAS en 30s"
   ============================================================ */
.onb-banner {
  background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 18px 20px;
  margin-bottom: 20px;
  position: relative;
}
.onb-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
}
.onb-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 20px; font-weight: 500; margin: 0;
  color: var(--ink); letter-spacing: 0.01em;
}
.onb-sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; }
.onb-dismiss {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px;
  color: var(--ink-3); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.onb-dismiss:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
.onb-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.onb-card {
  background: var(--paper); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px; padding: 14px 16px;
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  font: inherit; color: inherit;
  transition: all 0.2s ease;
}
.onb-card:hover {
  border-color: var(--sienna);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.onb-card--primary {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.onb-card--primary:hover { background: var(--sienna); border-color: var(--sienna); }
.onb-card-num {
  display: inline-flex; width: 22px; height: 22px;
  background: rgba(0,0,0,0.06); border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
}
.onb-card--primary .onb-card-num {
  background: rgba(245,241,232,0.2); color: var(--paper);
}
.onb-card-title {
  font-size: 15px; font-weight: 500;
}
.onb-card-sub { font-size: 12px; opacity: 0.8; line-height: 1.4; }
.onb-card-cta {
  font-size: 12px; font-weight: 500;
  margin-top: auto; padding-top: 4px;
  color: var(--sienna);
}
.onb-card--primary .onb-card-cta { color: var(--paper); }
.onb-card:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   PAGE HUMAIN — vues Équipe / Collaborateur / RH
   ============================================================ */
.page--humain { display: flex; flex-direction: column; gap: 16px; }
.hum-team-block {
  background: var(--paper-2);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.hum-team-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 8px;
}
.hum-team-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px; font-weight: 500; margin: 0;
  color: var(--ink);
}
.hum-team-count {
  font-size: 12px; color: var(--ink-3);
  background: var(--paper-3); padding: 2px 8px; border-radius: 10px;
}
.hum-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.hum-card {
  background: var(--paper); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 8px; padding: 12px 14px;
  cursor: pointer; transition: border-color 0.15s;
}
.hum-card:hover { border-color: var(--sienna); }
.hum-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.hum-card-statut {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 3px;
  background: var(--paper-3); color: var(--ink-3);
}
.hum-card-statut--salarie { background: rgba(44,143,79,0.10); color: #2C8F4F; }
.hum-card-statut--apprenti { background: var(--sienna-soft); color: var(--sienna); }
.hum-card-statut--sous_traitant { background: rgba(60,60,90,0.10); color: var(--ink-2); }
.hum-card-role {
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 4px;
}
.hum-card-meta {
  font-size: 12px; color: var(--ink-3);
  margin-top: 2px;
}

.prospect-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.prospect-action-card {
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--paper-2);
}
.prospect-action-card strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.prospect-action-card p {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.prospect-action-card span {
  font-size: 11px;
  color: var(--ink-3);
}

.am-upload-preview {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
}
.am-upload-preview[hidden] { display: none; }
.am-upload-preview img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--paper-3);
}
.am-upload-zone.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* Lignes détectées + toggle stock (workflow magique facture_recue) */
.ic-lines-wrap { margin-top: 6px; }
.ic-lines-wrap summary {
  font-weight: 500; color: var(--ink-2);
}
.ic-lines {
  width: 100%; font-size: 12px; margin-top: 6px;
  border-collapse: collapse;
  background: var(--paper-3); border-radius: 4px; overflow: hidden;
}
.ic-lines thead th {
  text-align: left; padding: 6px 8px;
  background: rgba(0,0,0,0.04); color: var(--ink-3);
  font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ic-lines tbody td {
  padding: 5px 8px; color: var(--ink-2);
  border-top: 1px solid rgba(0,0,0,0.04);
}
.ic-lines tbody tr:first-child td { border-top: 0; }
.ic-lines tbody td:nth-child(2),
.ic-lines tbody td:nth-child(3) {
  white-space: nowrap; color: var(--ink-3);
}
.ic-stock-toggle {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px; padding: 6px 8px;
  background: var(--sienna-soft); border-radius: 4px;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.ic-stock-toggle input[type="checkbox"] { cursor: pointer; }

@media (max-width: 640px) {
  .intake-card { grid-template-columns: 56px 1fr; }
  .ic-thumb { width: 56px; height: 56px; }
}

/* ============================================================
   ATLAS Apple / Claude visual pass — light, memorable, numbered
   ============================================================ */
body.apple-ui {
  --paper: #f5f5f7;
  --paper-2: rgba(255,255,255,0.88);
  --paper-3: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #3f3f46;
  --ink-3: #6e6e73;
  --mist: #a1a1aa;
  --hairline: rgba(0,0,0,0.10);
  --hairline-2: rgba(0,0,0,0.055);
  --sienna: var(--active-tab-color, #007aff);
  --sienna-soft: var(--active-tab-soft, rgba(0,122,255,0.12));
  --grid-dot: rgba(0,0,0,0.035);
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--paper);
}
body.apple-ui em,
body.apple-ui i {
  font-family: var(--font-body);
  font-style: normal;
}
body.apple-ui .basic-topbar {
  height: 54px;
  grid-template-columns: minmax(330px, 1fr) auto minmax(280px, 1fr);
  background: rgba(251,251,253,0.82);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  padding: 0 22px;
}
body.apple-ui .basic-brand-zone { gap: 14px; }
body.apple-ui .brand {
  gap: 8px;
  min-width: 0;
}
body.apple-ui .brand-mark.company-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #007aff, #af52de 52%, #ff9500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-style: normal;
  box-shadow: 0 8px 22px rgba(0,122,255,0.20);
}
body.apple-ui .brand-word {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
body.apple-ui .brand-company-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 560;
  padding-left: 2px;
}
body.apple-ui .company-switcher .cs-trigger,
body.apple-ui .icon-btn,
body.apple-ui .user-chip,
body.apple-ui .search-stub,
body.apple-ui .page--prospects #prFilterScore,
body.apple-ui .page--prospects #prFilterStatus {
  background: rgba(255,255,255,0.72);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.035);
}
body.apple-ui .company-switcher .cs-trigger {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
}
body.apple-ui .basic-brain-status {
  background: rgba(var(--active-tab-rgb, 0,122,255),0.08);
  border: 1px solid rgba(var(--active-tab-rgb, 0,122,255),0.14);
  border-radius: 999px;
  padding: 6px 11px;
}
body.apple-ui .brain-dot {
  background: var(--active-tab-color, #007aff);
  box-shadow: 0 0 0 4px rgba(var(--active-tab-rgb, 0,122,255),0.14);
}
body.apple-ui .brain-label {
  font-family: var(--font-body);
  font-weight: 650;
  font-style: normal;
}
body.apple-ui .basic-main {
  inset: 54px 0 0 0;
  height: calc(100vh - 54px);
  background: #f5f5f7;
}
body.apple-ui .basic-left {
  background: rgba(251,251,253,0.88);
  border-right: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
body.apple-ui .left-nav { padding: 14px 8px 10px; }
body.apple-ui .nav-section { padding: 9px 0; }
body.apple-ui .nav-section + .nav-section { border-top-color: rgba(0,0,0,0.05); }
body.apple-ui .nav-section-title {
  padding: 7px 10px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 680;
  color: #86868b;
}
body.apple-ui .nav-items { padding: 0; }
body.apple-ui .nav-item {
  min-height: 38px;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 9px;
  margin: 3px 0;
  border-radius: 8px;
  color: #424245;
  font-size: 13px;
  font-weight: 560;
  border: 1px solid transparent;
}
body.apple-ui .nav-item:hover {
  background: rgba(var(--tab-accent-rgb),0.07);
  color: #1d1d1f;
}
body.apple-ui .nav-item.is-active {
  background: linear-gradient(135deg, rgba(var(--tab-accent-rgb),0.18), rgba(var(--tab-accent-rgb),0.08));
  border-color: rgba(var(--tab-accent-rgb),0.22);
  color: #1d1d1f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.56), 0 6px 18px rgba(var(--tab-accent-rgb),0.10);
}
body.apple-ui .nav-item.is-active::before { display: none; }
body.apple-ui .ni-num {
  width: 24px;
  flex: 0 0 24px;
  color: var(--tab-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.apple-ui .ni-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--tab-accent);
  box-shadow: 0 0 0 4px rgba(var(--tab-accent-rgb),0.12);
}
body.apple-ui .ni-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.apple-ui .ni-badge,
body.apple-ui .ni-count {
  border-color: rgba(var(--tab-accent-rgb),0.18);
  background: rgba(var(--tab-accent-rgb),0.10);
  color: var(--tab-accent);
}
body.apple-ui .left-foot {
  background: rgba(251,251,253,0.90);
  border-top-color: rgba(0,0,0,0.06);
  padding: 10px;
}
body.apple-ui .user-avatar {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--active-tab-color, #007aff), #af52de);
  color: white;
  font-family: var(--font-body);
  font-weight: 760;
}
body.apple-ui .basic-center {
  background-color: #f5f5f7;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.032) 1px, transparent 0);
  background-size: 28px 28px;
}
body.apple-ui .page {
  padding: 48px 58px;
}
body.apple-ui .page-head {
  margin-bottom: 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: relative;
}
body.apple-ui .page-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(260px, 44%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--active-tab-color, #007aff), rgba(175,82,222,0.75), rgba(255,149,0,0.65));
}
body.apple-ui .page-title {
  font-family: var(--font-body);
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 0.98;
  font-weight: 780;
  letter-spacing: -0.055em;
  color: #1d1d1f;
  margin-bottom: 10px;
}
body.apple-ui .page-sub {
  max-width: 1180px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.35;
  color: #6e6e73;
  font-style: normal;
  font-weight: 520;
}
body.apple-ui .page-actions {
  margin-top: 24px;
  gap: 10px;
}
body.apple-ui .btn {
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
body.apple-ui .btn--primary {
  background: var(--active-tab-color, #007aff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(var(--active-tab-rgb, 0,122,255),0.18);
}
body.apple-ui .btn--primary:hover {
  background: color-mix(in srgb, var(--active-tab-color, #007aff) 86%, #000);
}
body.apple-ui .btn--ghost {
  background: rgba(255,255,255,0.74);
  border-color: rgba(0,0,0,0.10);
  color: #424245;
}
body.apple-ui .btn--ghost:hover {
  background: #fff;
  border-color: rgba(var(--active-tab-rgb, 0,122,255),0.30);
  color: var(--active-tab-color, #007aff);
}
body.apple-ui .ghost-table,
body.apple-ui .fiche-card,
body.apple-ui .prospect-card,
body.apple-ui .hum-card,
body.apple-ui .doc-card,
body.apple-ui .stock-stats,
body.apple-ui .auth-modal .am-inner,
body.apple-ui .ckp-block,
body.apple-ui .intake-card,
body.apple-ui .onb-card,
body.apple-ui .stat-mini {
  background: rgba(255,255,255,0.86);
  border-color: rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.055);
}
body.apple-ui .prospect-card,
body.apple-ui .hum-card,
body.apple-ui .doc-card,
body.apple-ui .fiche-card {
  border-top: 3px solid rgba(var(--active-tab-rgb, 0,122,255),0.34);
}
body.apple-ui .gt-head,
body.apple-ui .gt-cell--head,
body.apple-ui .detail-table th {
  background: rgba(var(--active-tab-rgb, 0,122,255),0.055);
}
body.apple-ui .auth-modal {
  background: rgba(245,245,247,0.62);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
body.apple-ui .am-title,
body.apple-ui .fiche-title h1,
body.apple-ui .gov-h2,
body.apple-ui .sm-val {
  font-family: var(--font-body);
  letter-spacing: -0.035em;
}
body.apple-ui .am-title {
  font-weight: 760;
  color: #1d1d1f;
}
body.apple-ui input,
body.apple-ui textarea,
body.apple-ui select {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.11);
  border-radius: 8px;
}
body.apple-ui input:focus,
body.apple-ui textarea:focus,
body.apple-ui select:focus {
  border-color: rgba(var(--active-tab-rgb, 0,122,255),0.42);
  box-shadow: 0 0 0 3px rgba(var(--active-tab-rgb, 0,122,255),0.12);
}
body.apple-ui .right-content,
body.apple-ui .basic-right {
  background: rgba(251,251,253,0.82);
  border-color: rgba(0,0,0,0.08);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
body.apple-ui .fab-concierge {
  background: linear-gradient(135deg, #007aff, #af52de 52%, #ff9500);
  color: #fff;
  box-shadow: 0 16px 36px rgba(88,86,214,0.24);
}
@media (max-width: 720px) {
  body.apple-ui .basic-topbar { grid-template-columns: 1fr auto; padding: 0 12px; }
  body.apple-ui .brand-company-name { display: none; }
  body.apple-ui .page { padding: 28px 18px; }
  body.apple-ui .page-title { font-size: 38px; }
}

/* Dark Apple/Claude default */
body.apple-ui.dark {
  --paper: #050507;
  --paper-2: rgba(22,22,26,0.86);
  --paper-3: #111116;
  --ink: #f5f5f7;
  --ink-2: #d6d6dc;
  --ink-3: #8e8e93;
  --mist: #6e6e73;
  --hairline: rgba(255,255,255,0.12);
  --hairline-2: rgba(255,255,255,0.065);
  --grid-dot: rgba(255,255,255,0.055);
  background: #050507;
  color: var(--ink);
}
body.apple-ui.dark .basic-topbar,
body.apple-ui.dark .basic-left,
body.apple-ui.dark .right-content,
body.apple-ui.dark .basic-right {
  background: rgba(18,18,22,0.78);
  border-color: rgba(255,255,255,0.10);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}
body.apple-ui.dark .basic-main,
body.apple-ui.dark .basic-center {
  background-color: #050507;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.052) 1px, transparent 0),
    radial-gradient(circle at top right, rgba(var(--active-tab-rgb, 0,122,255),0.18), transparent 36vw);
}
body.apple-ui.dark .brand-word,
body.apple-ui.dark .page-title,
body.apple-ui.dark .am-title,
body.apple-ui.dark .fiche-title h1,
body.apple-ui.dark .sm-val {
  color: #f5f5f7;
}
body.apple-ui.dark .brand-company-name,
body.apple-ui.dark .page-sub,
body.apple-ui.dark .brain-stats,
body.apple-ui.dark .nav-section-title {
  color: #8e8e93;
}
body.apple-ui.dark .company-switcher .cs-trigger,
body.apple-ui.dark .icon-btn,
body.apple-ui.dark .user-chip,
body.apple-ui.dark .search-stub,
body.apple-ui.dark .page--prospects #prFilterScore,
body.apple-ui.dark .page--prospects #prFilterStatus,
body.apple-ui.dark .btn--ghost,
body.apple-ui.dark input,
body.apple-ui.dark textarea,
body.apple-ui.dark select {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.12);
  color: #f5f5f7;
  box-shadow: none;
}
body.apple-ui.dark .nav-item {
  color: #d6d6dc;
}
body.apple-ui.dark .nav-item:hover {
  background: rgba(var(--tab-accent-rgb),0.13);
  color: #fff;
}
body.apple-ui.dark .nav-item.is-active {
  background: linear-gradient(135deg, rgba(var(--tab-accent-rgb),0.28), rgba(var(--tab-accent-rgb),0.11));
  border-color: rgba(var(--tab-accent-rgb),0.38);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 12px 34px rgba(var(--tab-accent-rgb),0.16);
}
body.apple-ui.dark .basic-brain-status {
  background: rgba(var(--active-tab-rgb, 0,122,255),0.16);
  border-color: rgba(var(--active-tab-rgb, 0,122,255),0.26);
}
body.apple-ui.dark .page-head {
  border-bottom-color: rgba(255,255,255,0.11);
}
body.apple-ui.dark .ghost-table,
body.apple-ui.dark .fiche-card,
body.apple-ui.dark .prospect-card,
body.apple-ui.dark .hum-card,
body.apple-ui.dark .doc-card,
body.apple-ui.dark .stock-stats,
body.apple-ui.dark .auth-modal .am-inner,
body.apple-ui.dark .ckp-block,
body.apple-ui.dark .intake-card,
body.apple-ui.dark .onb-card,
body.apple-ui.dark .stat-mini,
body.apple-ui.dark .pc-factory,
body.apple-ui.dark .machine-cost-result {
  background: rgba(24,24,29,0.88);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 40px rgba(0,0,0,0.34);
}
body.apple-ui.dark .gt-head,
body.apple-ui.dark .gt-cell--head,
body.apple-ui.dark .detail-table th {
  background: rgba(var(--active-tab-rgb, 0,122,255),0.12);
}
body.apple-ui.dark .btn--primary {
  color: #fff;
  box-shadow: 0 10px 28px rgba(var(--active-tab-rgb, 0,122,255),0.28);
}
body.apple-ui.dark .btn--ghost:hover {
  background: rgba(var(--active-tab-rgb, 0,122,255),0.16);
  border-color: rgba(var(--active-tab-rgb, 0,122,255),0.42);
  color: #fff;
}
body.apple-ui.dark .auth-modal {
  background: rgba(0,0,0,0.62);
}
body.apple-ui.dark .am-close {
  background: rgba(24,24,29,0.94);
  border-color: rgba(255,255,255,0.14);
}

/* Dark fix — bottom account chip in left sidebar */
body.apple-ui.dark .left-foot {
  background: rgba(10,10,13,0.96) !important;
  border-top-color: rgba(255,255,255,0.10) !important;
}
body.apple-ui.dark .left-foot .user-chip {
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #f5f5f7 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}
body.apple-ui.dark .left-foot .user-name {
  color: #f5f5f7 !important;
}
body.apple-ui.dark .left-foot .user-arrow {
  color: #8e8e93 !important;
}

.prod-machine-summary {
  margin: -2px 0 12px;
}
.machine-product-link {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
}
.machine-product-link strong {
  font-weight: 760;
}
.machine-product-link span,
.machine-product-link em {
  color: var(--muted);
}
body.apple-ui.dark .machine-product-link {
  background: rgba(24,24,29,0.88);
  border-color: rgba(255,255,255,0.12);
}

/* Sur mesure / historique */
.custom-field-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
}
.custom-field-row + .custom-field-row { margin-top: 10px; }
.custom-field-row input,
.custom-field-row textarea {
  width: 100%;
}
.activity-list--compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.activity-list--compact .activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
}
.activity-list--compact .al-main {
  display: grid;
  gap: 3px;
}
.activity-list--compact .al-main span {
  color: var(--muted);
  font-size: 13px;
}
.inline-edit-panel {
  margin: 0 0 16px;
  border-color: rgba(var(--active-tab-rgb, 0,122,255),0.28);
}
.inline-diff {
  margin-top: 8px;
}
.inline-diff summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}
.inline-diff del {
  color: #ff453a;
  text-decoration-color: rgba(255,69,58,0.7);
}
.inline-diff ins {
  color: #32d74b;
  text-decoration: none;
}
.detail-table--compact td {
  padding: 6px 8px;
  vertical-align: top;
}
body.apple-ui.dark .custom-field-row,
body.apple-ui.dark .activity-list--compact .activity-row {
  background: rgba(24,24,29,0.88);
  border-color: rgba(255,255,255,0.12);
}
@media (max-width: 760px) {
  .custom-field-row {
    grid-template-columns: 1fr;
  }
}