/* Sommet — styles de l'interface (repris de la démo) */
/* Layout : la scène 3D occupe tout l'écran ; barre haute, rail des modules à gauche,
   fiche de détail à droite, dock d'indicateurs en bas. Sur téléphone, la fiche devient un tiroir. */
:root {
  --bg: #E7EDF2;
  --bg-2: #D3DEE7;
  --surface: #FFFFFF;
  --surface-2: #F2F5F8;
  --ink: #16212C;
  --ink-2: #536272;
  --line: #D6DEE6;
  --accent: #1F5C8B;        /* bleu Léman */
  --accent-ink: #FFFFFF;
  --accent-soft: #E0EBF4;
  --signal: #D52B1E;        /* rouge suisse : logo uniquement */
  --good: #23784F;  --good-soft: #DFF1E7;
  --warn: #A86A0C;  --warn-soft: #FBEFD9;
  --bad:  #B9352A;  --bad-soft:  #F9E1DE;
  --shadow: 0 1px 2px rgb(22 33 44 / .06), 0 8px 28px rgb(22 33 44 / .10);
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E141A; --bg-2: #17222D;
    --surface: #17212B; --surface-2: #1E2A36;
    --ink: #E6EDF3; --ink-2: #98A8B7; --line: #293846;
    --accent: #6EA8D8; --accent-ink: #0E141A; --accent-soft: #1A3247;
    --good: #5BC28E; --good-soft: #163527;
    --warn: #E2AD52; --warn-soft: #3A2C12;
    --bad:  #EE7466; --bad-soft:  #3E1E1B;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E141A; --bg-2: #17222D;
  --surface: #17212B; --surface-2: #1E2A36;
  --ink: #E6EDF3; --ink-2: #98A8B7; --line: #293846;
  --accent: #6EA8D8; --accent-ink: #0E141A; --accent-soft: #1A3247;
  --good: #5BC28E; --good-soft: #163527;
  --warn: #E2AD52; --warn-soft: #3A2C12;
  --bad:  #EE7466; --bad-soft:  #3E1E1B;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
}

html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  background: radial-gradient(120% 90% at 50% 35%, var(--bg) 0%, var(--bg-2) 100%);
  background-color: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-data); font-size: 12px; letter-spacing: -.01em; }

#app { position: relative; height: 100%; width: 100%; }
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.glass {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: var(--shadow);
}

/* ---------- Barre haute ---------- */
.topbar {
  position: absolute; top: 12px; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 12px; border-radius: 14px; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  width: 32px; height: 32px; border-radius: 8px; background: var(--signal);
  display: grid; place-items: center; flex: none;
}
.logo svg { width: 18px; height: 18px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font: 800 17px/1.05 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.brand-sub { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search {
  flex: 1; min-width: 0; max-width: 520px; margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); text-align: left;
}
.search:hover { border-color: var(--accent); }
.search svg { width: 16px; height: 16px; flex: none; }
.search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd {
  font: 500 11px var(--font-data); padding: 2px 6px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.top-right { display: flex; align-items: center; gap: 10px; }
.live {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--good-soft); color: var(--good); font-weight: 600; font-size: 12px; white-space: nowrap;
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.user { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 12px var(--font-display); color: #fff;
}
.user { border: 0; background: transparent; padding: 4px 6px 4px 4px; border-radius: 10px; cursor: pointer; text-align: left; color: inherit; position: relative; }
.user:hover, .user[aria-expanded="true"] { background: var(--surface-2); }
.user .chev { width: 14px; height: 14px; color: var(--ink-2); }
.usermenu { position: absolute; top: 58px; right: 10px; width: 300px; border-radius: 14px; padding: 8px; z-index: 30; display: flex; flex-direction: column; gap: 2px; }
.usermenu h4 { margin: 6px 8px 4px; font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.usermenu button { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); width: 100%; }
.usermenu button:hover, .usermenu button[aria-checked="true"] { background: var(--surface-2); }
.usermenu button b { display: block; font-size: 13px; } .usermenu button small { color: var(--ink-2); font-size: 11.5px; }
.usermenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.usermenu .mi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.usermenu .mi svg { width: 16px; height: 16px; }
.bubble { position: absolute; left: 0; top: 0; max-width: 260px; padding: 6px 10px 7px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; line-height: 1.3; pointer-events: none; animation: bubbleIn .35s ease-out; }
.bubble b { display: block; font-size: 11px; color: var(--ink-2); font-weight: 600; margin-bottom: 1px; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
@keyframes bubbleIn { from { opacity: 0; } to { opacity: 1; } }
.privacy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.privacy-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.privacy-list .yes, .privacy-list .no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.privacy-list .yes { background: var(--good); } .privacy-list .no { background: var(--bad); }
.toggle { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 8px 0; }
.toggle + .toggle { border-top: 1px solid var(--line); }
.toggle small { display: block; color: var(--ink-2); font-size: 12px; }
.switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(16px); }
.ai-q { align-self: flex-end; max-width: 90%; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: var(--accent); color: var(--accent-ink); font-size: 13.5px; }
.ai-a { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.ai-a.thinking { color: var(--ink-2); }
.ai-a.thinking::after { content: ""; display: inline-block; width: 1em; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ai-acts { display: flex; flex-direction: column; gap: 6px; }
.ai-acts div { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: var(--good-soft); color: var(--good); font-weight: 600; }
.ai-acts div svg { width: 14px; height: 14px; flex: none; }
.ai-note { font-size: 12px; color: var(--ink-2); }
.ai-form { display: flex; gap: 8px; }
.ai-form input { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.user-meta { line-height: 1.15; }
.user-meta b { display: block; font-size: 13px; font-weight: 600; }
.user-meta small { color: var(--ink-2); font-size: 11.5px; }

/* ---------- Rail des modules ---------- */
.rail {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; z-index: 4;
}
.rail button {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
}
.rail button svg { width: 20px; height: 20px; }
.rail button:hover { background: var(--surface-2); color: var(--ink); }
.rail button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.rail button .tip {
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--surface);
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.rail button:hover .tip, .rail button:focus-visible .tip { opacity: 1; }
.rail .badge {
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--bad); color: #fff; font: 700 10px/16px var(--font-body); text-align: center;
}
.rail hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

/* ---------- Fiche de détail ---------- */
.panel {
  position: absolute; right: var(--gutter); top: 76px; bottom: 132px; width: 380px;
  border-radius: 16px; z-index: 6; display: flex; flex-direction: column; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.panel[data-open="false"] { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.panel-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.panel-head .ph-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.panel-head .ph-icon svg { width: 20px; height: 20px; }
.panel-head .ph-text { flex: 1; min-width: 0; }
.eyebrow { font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.panel-title { font: 700 19px/1.2 var(--font-display); letter-spacing: -.015em; margin: 3px 0 0; text-wrap: balance; }
.panel-sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; flex: none; color: var(--ink-2);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.icon-btn svg { width: 16px; height: 16px; }
.panel-body { flex: 1; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.panel-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.section-title h3 { font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.section-title span { font-size: 12px; color: var(--ink-2); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; }
.kv dt { color: var(--ink-2); font-size: 13px; }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.stat small { display: block; color: var(--ink-2); font-size: 12px; }
.stat b { font: 700 18px/1.25 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.6;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--accent-soft); color: var(--accent); }
.chip.mute { background: var(--surface-2); color: var(--ink-2); }

.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 8px; margin-inline: -8px; border-radius: 8px; border: 0; background: transparent;
  text-align: left; width: calc(100% + 16px); cursor: pointer;
}
.row:hover { background: var(--surface-2); }
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
.row:hover + .row, .row:hover { box-shadow: none; }
.row .r-main { min-width: 0; }
.row .r-main b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .r-main small { display: block; color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .r-end { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.row .r-end b { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .p-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.row .p-ic svg { width: 16px; height: 16px; }
.ph-icon b { font: 700 14px var(--font-display); }
.dot-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-display); color: #fff; position: relative; }
.dot-av[data-st]::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--ink-2);
}
.dot-av[data-st="bureau"]::after { background: var(--good); }
.dot-av[data-st="pause"]::after { background: var(--warn); }
.dot-av[data-st="reunion"]::after { background: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.grow { flex: 1; }
.btn svg { width: 15px; height: 15px; }

.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.bar.good i { background: var(--good); } .bar.warn i { background: var(--warn); } .bar.bad i { background: var(--bad); }

.agenda { display: flex; flex-direction: column; gap: 6px; }
.agenda div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; }
.agenda time { font-family: var(--font-data); font-size: 12px; color: var(--ink-2); }
.agenda .now { color: var(--accent); font-weight: 600; }

/* pipeline CRM */
.pipe { display: flex; flex-direction: column; gap: 12px; }
.pipe-col h4 { display: flex; justify-content: space-between; margin: 0 0 6px; font: 600 12px var(--font-body); color: var(--ink-2); }
.deal {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid transparent; cursor: pointer; text-align: left; width: 100%;
}
.deal + .deal { margin-top: 6px; }
.deal:hover { border-color: var(--line); }
.deal b { font-size: 13px; font-weight: 600; }
.deal small { color: var(--ink-2); font-size: 12px; }
.deal .amt { font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; text-align: right; }

/* toner */
.toners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.toner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.toner .tank { width: 34px; height: 72px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.toner .tank i { position: absolute; left: 0; right: 0; bottom: 0; }
.toner b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* facture + QR */
.invoice-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.invoice-lines th { text-align: left; font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0 0 6px; }
.invoice-lines td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.invoice-lines td:last-child, .invoice-lines th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.invoice-lines tfoot td { border-top: 1px solid var(--line); }
.invoice-lines tfoot tr:last-child td { font-weight: 700; font-size: 14px; border-top: 2px solid var(--ink); }
.qrbill {
  display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 14px; border-radius: 10px;
  background: #FFFFFF; color: #111; border: 1px dashed #9AA5B1;
}
.qrbill h5 { grid-column: 1 / -1; margin: 0; font: 700 13px var(--font-display); color: #111; }
.qr { position: relative; width: 128px; height: 128px; }
.qr svg, .qr img { width: 128px; height: 128px; display: block; }
.qr .cross {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: #000; border: 2px solid #fff; display: grid; place-items: center;
}
.qr .cross::before, .qr .cross::after { content: ""; position: absolute; background: #fff; }
.qr .cross::before { width: 12px; height: 3.5px; } .qr .cross::after { width: 3.5px; height: 12px; }
.qr-meta { font-size: 11px; line-height: 1.45; min-width: 0; color: #111; }
.qr-meta b { display: block; font-size: 10px; font-weight: 700; margin-top: 4px; }
.qr-meta b:first-child { margin-top: 0; }
.qr-meta span { font-family: var(--font-data); font-size: 10.5px; overflow-wrap: anywhere; }

/* ---------- Dock bas ---------- */
.dock {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 12px; z-index: 5;
  display: flex; align-items: stretch; gap: 10px; padding: 10px; border-radius: 16px;
}
.kpis { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kpis::-webkit-scrollbar { display: none; }
.kpi {
  flex: 1 0 140px; padding: 9px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid transparent;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.kpi:hover { border-color: var(--line); }
.kpi small { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.kpi b { font: 700 18px/1.2 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi em { font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.kpi em.up { color: var(--good); } .kpi em.down { color: var(--bad); } .kpi em.flat { color: var(--ink-2); }
.kpi.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: var(--good-soft); } 100% { background: var(--surface-2); } }

.track { flex: 0 1 430px; min-width: 300px; padding: 9px 14px; border-radius: 11px; background: var(--surface-2); cursor: pointer; border: 1px solid transparent; text-align: left; }
.track:hover { border-color: var(--line); }
.track-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.track-head b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 8px; position: relative; }
.steps::before { content: ""; position: absolute; left: 8.3%; right: 8.3%; top: 7px; height: 2px; background: var(--line); }
.steps .fill { position: absolute; left: 8.3%; top: 7px; height: 2px; background: var(--accent); }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 10.5px; color: var(--ink-2); }
.step i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.step.done i { background: var(--accent); border-color: var(--accent); }
.step.now i { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step.now { color: var(--accent); font-weight: 600; }

/* ---------- Étiquettes 3D ---------- */
.zlabel {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 10px; border-radius: 999px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: auto; cursor: pointer;
}
.zlabel span { color: var(--ink-2); font-weight: 500; }
.zlabel.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.zlabel.active span { color: inherit; opacity: .85; }
.zlabel.alert::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.plabel {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--surface);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
}

/* ---------- Palette / assistant ---------- */
.palette-wrap { position: absolute; inset: 0; z-index: 20; background: rgb(10 16 22 / .28); display: flex; justify-content: center; align-items: flex-start; padding: 84px var(--gutter) 16px; }
.palette { width: 100%; max-width: 600px; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-input svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.palette-input input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 16px var(--font-body); color: var(--ink); min-width: 0; }
.palette-list { overflow-y: auto; padding: 8px; }
.palette-group { font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px 4px; }
.p-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.p-item[aria-selected="true"], .p-item:hover { background: var(--accent-soft); }
.p-item .p-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); flex: none; color: var(--accent); }
.p-item .p-ic svg { width: 15px; height: 15px; }
.p-item b { font-weight: 600; font-size: 13.5px; }
.p-item small { color: var(--ink-2); font-size: 12px; margin-left: auto; white-space: nowrap; padding-left: 8px; }
.palette-foot { padding: 9px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }

/* ---------- Toasts & aides ---------- */
.toasts { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(440px, calc(100% - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; animation: tin .3s ease-out; pointer-events: auto; width: 100%; }
.toast .t-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.toast .t-ic svg { width: 14px; height: 14px; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hint { position: absolute; left: 76px; bottom: 112px; z-index: 3; font-size: 12px; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; }
.demo-tag { position: absolute; right: var(--gutter); bottom: 112px; z-index: 3; font-size: 11.5px; color: var(--ink-2); padding: 5px 9px; border-radius: 8px; }
.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item { display: grid; grid-template-columns: 46px 1fr; gap: 8px; font-size: 13px; animation: tin .4s ease-out; }
.feed-item time { font-family: var(--font-data); font-size: 11.5px; color: var(--ink-2); padding-top: 1px; }
.empty { color: var(--ink-2); font-size: 13px; }

/* ---------- Studio de facturation ---------- */
.studio {
  position: absolute; top: 72px; right: var(--gutter); bottom: 12px; left: 76px; z-index: 8;
  border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.st-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.st-title { display: flex; align-items: center; gap: 10px; }
.st-title .ph-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--good-soft); color: var(--good); }
.st-title .ph-icon svg { width: 18px; height: 18px; }
.st-title h2 { margin: 0; font: 700 18px/1.1 var(--font-display); letter-spacing: -.015em; }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.tab { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.tab .count { font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--bad); color: #fff; line-height: 16px; }
.st-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.st-search { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.st-search svg { width: 15px; height: 15px; }
.st-search input { border: 0; outline: 0; background: transparent; font: 500 13px var(--font-body); color: var(--ink); width: 170px; }
.st-body { flex: 1; overflow: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.st-body > * { flex-shrink: 0; }   /* un tableau à défilement horizontal ne doit pas être écrasé en hauteur */

.st-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st-kpi { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.st-kpi small { display: block; color: var(--ink-2); font-size: 12px; }
.st-kpi b { display: block; font: 700 21px/1.25 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.st-kpi em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.aging { display: flex; flex-direction: column; gap: 8px; }
.aging-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.aging-bar i { display: block; height: 100%; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); }
.aging-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aging-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.aging-legend b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { border: 1px solid var(--line); background: var(--surface); padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.tbl th { text-align: left; font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 10px 12px; background: var(--surface-2); position: sticky; top: 0; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .mono { white-space: nowrap; }
.tbl .sub { display: block; color: var(--ink-2); font-size: 12px; }

.st-split { display: grid; grid-template-columns: minmax(400px, 1.2fr) minmax(340px, 1fr); gap: 18px; align-items: start; }
.st-split > * { min-width: 0; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-head h3 { margin: 0; font: 700 16px var(--font-display); letter-spacing: -.01em; }
.back { border: 0; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.back:hover { color: var(--ink); }
.back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea, .lines input, .lines select, .bank-assign select {
  font: 500 13px var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; min-width: 0; width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .lines input:focus, .lines select:focus, .field textarea:focus, .bank-assign select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field textarea { resize: vertical; min-height: 54px; }
.lines { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; }
.lines th { text-align: left; font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0 4px; }
.lines td { padding: 0 4px; vertical-align: top; }
.lines td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 8px; font-weight: 600; }
.lines .del { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; padding: 6px; border-radius: 6px; }
.lines .del:hover { color: var(--bad); background: var(--bad-soft); }
.lines .del svg { width: 14px; height: 14px; }
.lines-wrap { overflow-x: auto; }
.lines { min-width: 520px; }
.lines td:first-child { min-width: 150px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; font-size: 13px; margin-left: auto; min-width: 260px; }
.totals span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand { font-weight: 700; font-size: 15px; border-top: 2px solid var(--ink); padding-top: 6px; }
.timeline { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 16px 86px 1fr; gap: 8px; font-size: 13px; padding: 5px 0; position: relative; }
.timeline li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
.timeline li::after { content: ""; position: absolute; left: 4px; top: 19px; bottom: -6px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline time { font-family: var(--font-data); font-size: 12px; color: var(--ink-2); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-box { display: flex; gap: 8px; padding: 10px; border-radius: 12px; background: var(--accent-soft); align-items: flex-start; }
.ai-box svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 8px; }
.ai-box textarea { flex: 1; border: 0; background: transparent; font: 500 14px/1.45 var(--font-body); color: var(--ink); resize: none; min-height: 44px; outline: 0; }
.hint-text { font-size: 12px; color: var(--ink-2); }

/* Temps & projets */
.ts-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ts-week { display: flex; align-items: center; gap: 8px; }
.ts-week b { font: 700 15px var(--font-display); white-space: nowrap; }
.tbl.ts td { padding: 6px 8px; }
.tbl.ts input { width: 62px; text-align: right; font: 500 13px var(--font-body); font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.tbl.ts input:disabled { background: transparent; border-color: transparent; color: var(--ink-2); }
.tbl.ts input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tbl.ts tbody tr { cursor: default; }
.tbl.ts tbody tr:hover td { background: transparent; }
.tbl th.today { color: var(--accent); }
.tbl tfoot td { border-top: 2px solid var(--line); background: var(--surface-2); }
.tbl .del { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; padding: 5px; border-radius: 6px; }
.tbl .del:hover { color: var(--bad); background: var(--bad-soft); }
.tbl .del svg { width: 14px; height: 14px; }
.wkbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 170px; padding-top: 18px; }
.wkbars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11.5px; color: var(--ink-2); }
.wkbars i { display: block; width: 70%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.wkbars span { color: var(--ink); font-weight: 600; }
.hrow { display: grid; grid-template-columns: 26px minmax(90px, 160px) 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.hrow > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow b { text-align: right; font-weight: 600; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.chk input { margin-top: 2px; accent-color: var(--accent); }


/* Congés & notes de frais */
.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cal { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.cal th, .cal td { border-bottom: 1px solid var(--line); }
.cal thead th { font-weight: 600; color: var(--ink-2); padding: 6px 0 5px; text-align: center; min-width: 24px; background: var(--surface-2); position: sticky; top: 0; font-variant-numeric: tabular-nums; }
.cal thead th span { display: block; font-size: 10px; font-weight: 500; }
.cal th.who { text-align: left; padding: 5px 10px; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 500; color: var(--ink); min-width: 190px; }
.cal thead th.who { background: var(--surface-2); z-index: 2; }
.cal td { height: 28px; min-width: 24px; border-left: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.cal td.off, .cal th.off { background-color: color-mix(in srgb, var(--surface-2) 70%, var(--line)); }
.cal th.today, .cal td.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.cal td.half { background-size: 50% 100% !important; background-repeat: no-repeat !important; }
.cal tr.tot th, .cal tr.tot td { background: var(--surface-2); font-weight: 600; text-align: center; color: var(--ink-2); }
.lv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.lv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lv-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lv-legend i.pend { background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--ink-2); }
.lv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: 1px; }
.lv-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-summary div { flex: 1 1 150px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.lv-summary small { display: block; color: var(--ink-2); font-size: 12px; }
.lv-summary b { font: 700 16px var(--font-display); font-variant-numeric: tabular-nums; }
.tbl tr.abs td { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); color: var(--ink-2); }
.exp-form { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.drop { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; font-size: 12.5px; color: var(--ink-2); min-height: 200px; justify-content: center; background: var(--surface-2); }
.drop > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.drop svg { width: 22px; height: 22px; }
.drop img { max-width: 100%; max-height: 260px; border-radius: 6px; box-shadow: 0 2px 10px rgb(0 0 0 / .15); transform: rotate(-1.5deg); }
.rcpt-thumb { width: 38px; height: 52px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 1px 3px rgb(0 0 0 / .12); cursor: zoom-in; display: block; background: #fff; }
.rcpt-modal { position: absolute; inset: 0; background: rgb(10 16 22 / .55); display: grid; place-items: center; z-index: 5; cursor: zoom-out; border-radius: 18px; }
.rcpt-modal img { max-height: 86%; max-width: 86%; border-radius: 8px; box-shadow: 0 20px 50px rgb(0 0 0 / .4); background: #fff; }
.studio { position: absolute; }
@media (min-width: 761px) and (max-height: 620px) { .rail { max-height: calc(100% - 210px); overflow-y: auto; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } }
@media (max-width: 760px) { .cal th.who { min-width: 118px; font-size: 11.5px; } .cal th.who .dot-av { display: none; } .exp-form { grid-template-columns: 1fr; } .rail { max-height: none; overflow-x: auto; max-width: calc(100% - 16px); } }

/* Aperçu A4 + QR-facture (papier : toujours blanc) */
.paper-wrap { position: relative; width: 100%; }
.paper-scale { transform-origin: top left; }
.a4 {
  width: 210mm; height: 297mm; background: #fff; color: #111; position: relative; box-sizing: border-box;
  padding: 16mm 18mm 0 20mm; font: 9.5pt/1.4 "Instrument Sans", Arial, sans-serif; box-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 18px 40px rgb(0 0 0 / .14);
}
.a4 .doc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.a4 .doc-brand { display: flex; gap: 3mm; align-items: center; }
.a4 .doc-logo { width: 11mm; height: 11mm; border-radius: 2mm; background: #1F5C8B; color: #fff; display: grid; place-items: center; font: 700 12pt "Schibsted Grotesk", Arial, sans-serif; }
.a4 .doc-brand b { font: 700 12pt/1.1 "Schibsted Grotesk", Arial, sans-serif; display: block; }
.a4 .doc-brand small, .a4 .doc-from { font-size: 8pt; color: #444; }
.a4 .doc-addr { position: absolute; left: 118mm; top: 50mm; width: 75mm; font-size: 10pt; line-height: 1.35; }
.a4 .doc-addr .sender { font-size: 7pt; color: #555; border-bottom: .3mm solid #555; margin-bottom: 2mm; padding-bottom: .5mm; }
.a4 .doc-meta { position: absolute; left: 20mm; top: 50mm; font-size: 8.5pt; display: grid; grid-template-columns: auto auto; gap: .8mm 5mm; }
.a4 .doc-meta dt { color: #555; } .a4 .doc-meta dd { margin: 0; font-weight: 600; }
.a4 h1 { position: absolute; left: 20mm; top: 92mm; margin: 0; font: 700 16pt "Schibsted Grotesk", Arial, sans-serif; }
.a4 .doc-subject { position: absolute; left: 20mm; top: 101mm; font-size: 9.5pt; color: #333; }
.a4 .doc-lines { position: absolute; left: 20mm; right: 18mm; top: 110mm; }
.a4 table { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
.a4 th { text-align: left; font-weight: 700; border-bottom: .4mm solid #111; padding: 1.2mm 1mm; font-size: 8pt; }
.a4 td { padding: 1.4mm 1mm; border-bottom: .2mm solid #ccc; vertical-align: top; }
.a4 .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a4 .doc-totals { margin-left: auto; width: 78mm; margin-top: 3mm; display: grid; grid-template-columns: 1fr auto; gap: .8mm 4mm; font-size: 9pt; }
.a4 .doc-totals .g { font-weight: 700; font-size: 10.5pt; border-top: .4mm solid #111; padding-top: 1.2mm; }
.a4 .doc-terms { margin-top: 5mm; font-size: 8.5pt; color: #333; }
.a4 .doc-foot { position: absolute; left: 20mm; right: 18mm; bottom: 109mm; font-size: 7pt; color: #666; display: flex; justify-content: space-between; }
.a4 tr.opt td { color: #666; font-style: italic; }
.a4 .sign { position: absolute; left: 20mm; right: 18mm; bottom: 26mm; display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; font-size: 9pt; }
.a4 .sign b { display: block; margin-bottom: 1.5mm; }
.a4 .sign .sline { display: block; height: 16mm; border-bottom: .3mm solid #111; margin-bottom: 1.5mm; }
.slip { position: absolute; left: 0; bottom: 0; width: 210mm; height: 105mm; border-top: .2mm dashed #000; display: grid; grid-template-columns: 62mm 148mm; font-family: Arial, "Helvetica Neue", sans-serif; color: #000; }
.slip .scissors { position: absolute; top: -2.2mm; left: 8mm; font-size: 9pt; line-height: 1; background: #fff; }
.slip .rcpt { border-right: .2mm dashed #000; padding: 5mm; position: relative; }
.slip .pay { padding: 5mm; display: grid; grid-template-columns: 51mm 1fr; grid-template-rows: auto 1fr; }
.slip h6 { margin: 0 0 3mm; font: 700 11pt Arial, sans-serif; }
.slip .rcpt .lbl { font: 700 6pt Arial, sans-serif; margin-top: 2.4mm; } .slip .rcpt .val { font: 8pt/1.25 Arial, sans-serif; }
.slip .pay .lbl { font: 700 8pt Arial, sans-serif; margin-top: 2.6mm; } .slip .pay .val { font: 10pt/1.25 Arial, sans-serif; }
.slip .lbl:first-of-type { margin-top: 0; }
.slip .amount-row { display: grid; grid-template-columns: 14mm 1fr; gap: 2mm; }
.slip .rcpt .amount-row { position: absolute; left: 5mm; right: 5mm; top: 63mm; }
.slip .rcpt .depot { position: absolute; right: 5mm; top: 83mm; font: 700 6pt Arial, sans-serif; }
.slip .pay .left { grid-row: 1 / 3; }
.slip .qrbox { position: relative; width: 46mm; height: 46mm; margin: 2mm 0 5mm; }
.slip .qrbox svg { width: 46mm; height: 46mm; display: block; }
.slip .qrbox .cross { position: absolute; left: 50%; top: 50%; width: 7mm; height: 7mm; transform: translate(-50%, -50%); background: #000; outline: .8mm solid #fff; }
.slip .qrbox .cross::before, .slip .qrbox .cross::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.slip .qrbox .cross::before { width: 4mm; height: 1.25mm; } .slip .qrbox .cross::after { width: 1.25mm; height: 4mm; }
.slip .pay .right { padding-left: 0; }
.slip .val.mono { font-family: Arial, sans-serif; letter-spacing: .02em; }

@media (max-width: 1100px) { .st-split { grid-template-columns: 1fr; } .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .studio { inset: 8px; top: 60px; bottom: 8px; }
  .st-head { padding: 10px 12px; gap: 8px; position: relative; }
  .st-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .st-actions .btn { flex: 1 1 0; padding: 8px 10px; }
  .st-actions .icon-btn { position: absolute; top: 10px; right: 12px; }
  .st-search { flex: 1 1 100%; order: 3; } .st-search input { width: 100%; }
  .tabs { overflow-x: auto; max-width: 100%; }
  .st-body { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
}


/* ---------- Éditeur de bureaux ---------- */
#app.editing .rail, #app.editing .dock, #app.editing .hint, #app.editing .demo-tag, #app.editing #labels, #app.editing .panel, #app.editing .studio { display: none !important; }
#app.editing #scene { left: calc(min(64vw, 1040px) + 28px); top: 72px; width: calc(100% - min(64vw, 1040px) - 44px); height: calc(100% - 84px); border-radius: 18px; }
.preview-tag { position: absolute; top: 84px; right: calc(var(--gutter) + 12px); z-index: 4; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.preview-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; }
.editor {
  position: absolute; top: 72px; left: var(--gutter); bottom: 12px; width: min(64vw, 1040px); z-index: 9;
  border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; background: color-mix(in srgb, var(--surface) 97%, transparent);
}
.ed-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-head h2 { margin: 0; font: 700 17px/1.1 var(--font-display); letter-spacing: -.015em; white-space: nowrap; }
.ed-steps { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
.ed-step { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ed-step b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--line); color: var(--ink-2); }
.ed-step[aria-current="step"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ed-step[aria-current="step"] b { background: var(--accent); color: var(--accent-ink); }
.ed-step.done b { background: var(--good); color: #fff; }
.ed-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px 1fr; }
.ed-side { border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ed-side h3 { margin: 0; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ed-side p { margin: 0; font-size: 13px; color: var(--ink-2); }
.ed-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.tpl { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.tpl:hover { border-color: var(--accent); }
.tpl svg { width: 74px; height: 52px; display: block; }
.tpl b { display: block; font-size: 13.5px; } .tpl small { color: var(--ink-2); font-size: 12px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip { border: 1px solid var(--line); background: var(--surface); padding: 5px 9px 5px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.role-chip i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); border: 1px solid rgb(0 0 0 / .12); }
.role-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cat-group { display: flex; flex-direction: column; gap: 6px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cat { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: center; }
.cat:hover, .cat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cat svg { width: 54px; height: 34px; }
.ed-list { display: flex; flex-direction: column; gap: 2px; }
.ed-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 13px; width: 100%; color: var(--ink); }
.ed-row:hover, .ed-row[aria-selected="true"] { background: var(--surface-2); }
.ed-row i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); border: 1px solid rgb(0 0 0 / .12); }
.ed-row small { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.emp-row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
.emp-row select { font: 500 12.5px var(--font-body); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.emp-row b { font-size: 13px; display: block; } .emp-row small { font-size: 11.5px; color: var(--ink-2); }
/* Rail : sections et menu déroulant */
.rail button[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.rail button[aria-expanded="true"] .tip { opacity: 0 !important; }
.rail button[data-act="group"]::after { content: ""; position: absolute; right: 4px; bottom: 4px; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .45; }
.rail-fly { position: absolute; z-index: 7; width: 264px; padding: 8px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.rail-fly h4 { margin: 4px 8px 6px; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rail-fly button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.rail-fly button:hover, .rail-fly button:focus-visible { background: var(--surface-2); }
.rail-fly .fi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.rail-fly .fi svg { width: 18px; height: 18px; }
.rail-fly button[aria-current="true"] .fi { background: var(--accent); color: var(--accent-ink); }
.rail-fly b { display: block; font: 600 13.5px/1.25 var(--font-body); } .rail-fly small { display: block; font-size: 12px; color: var(--ink-2); }
.rail-fly .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 10.5px/18px var(--font-body); text-align: center; }
/* Vue 3D : alerte et plan 2D de secours */
.scene-alert { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 5; width: min(440px, calc(100% - 32px)); padding: 18px 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.scene-alert b { font: 700 16px var(--font-display); } .scene-alert p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.scene-alert .btn-row { flex-wrap: wrap; }
.plan-fallback { position: absolute; inset: 78px 24px 132px 84px; display: grid; place-items: center; z-index: 0; }
.plan-fallback svg { width: 100%; height: 100%; max-width: 1200px; filter: drop-shadow(0 10px 24px rgb(20 30 40 / .12)); }
.plan2d .bg { fill: transparent; } .plan2d .grid1, .plan2d .grid5 { display: none; } .plan2d .dim, .plan2d .north { display: none; }
.plan2d .zone { cursor: pointer; transition: filter .15s; } .plan2d .zone:hover { filter: brightness(.95) saturate(1.2); }
.plan2d .it, .plan2d .door { pointer-events: none; cursor: default; } .plan2d .p2d { cursor: pointer; } .plan2d .p2d circle { stroke: #fff; stroke-width: .08; } .plan2d .p2d.away { opacity: .3; }
.plan2d .p2d text { font: 700 .36px var(--font-body); fill: #fff; text-anchor: middle; pointer-events: none; }
.plan2d .p2d:hover circle { stroke: var(--ink); }
.scene-alert .sa-x { position: absolute; top: 10px; right: 10px; }
.scene-alert b { padding-right: 34px; }
.scene-alert .sa-detail { font: 500 11.5px var(--font-data); color: var(--ink-2); opacity: .8; }
@media (max-width: 760px) { .plan-fallback { inset: 64px 8px 150px 8px; } }
/* Comptabilité */
.acc-chart { width: 100%; height: auto; display: block; margin-top: 8px; }
.acc-chart .b-rev { fill: var(--accent); } .acc-chart .b-exp { fill: var(--ink-2); fill-opacity: .35; }
.acc-chart .l-res { fill: none; stroke: var(--good); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.acc-chart text { font: 500 11px var(--font-body); fill: var(--ink-2); }
.lv-legend i.lg.rev { background: var(--accent); } .lv-legend i.lg.exp { background: var(--ink-2); opacity: .35; } .lv-legend i.lg.res { background: var(--good); height: 3px; border-radius: 2px; }
.ai-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.src-list { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 2px; }
.src-list span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.bk-list { display: flex; flex-direction: column; gap: 10px; }
.bk { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.bk.done { background: var(--surface-2); opacity: .8; }
.bk-top { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline; }
.bk-date { font: 500 12px var(--font-data); color: var(--ink-2); }
.bk-who b { display: block; font-size: 13.5px; } .bk-who small { color: var(--ink-2); font-size: 12.5px; }
.bk-amt { font: 600 14px var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; } .bk-amt.in { color: var(--good); }
.bk-why { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-act select, .mf-grid select, #ac-ai { font: 500 13px var(--font-body); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; }
.mf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tbl tr.plan td { color: var(--ink-2); font-style: italic; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.tbl.fs td, .tbl.fs th { padding: 7px 10px; }
.tbl.fs tr.fs-g td { font-weight: 700; background: var(--surface-2); }
.tbl.fs tr.fs-a td:first-child { padding-left: 22px; color: var(--ink-2); }
.tbl.fs tr.fs-t td { font-weight: 700; border-top: 2px solid var(--ink); }
.tbl.fs tbody tr { cursor: default; } .tbl.fs tbody tr:hover td { background: inherit; }
.gl { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 16px; align-items: start; }
.gl > * { min-width: 0; }
.acc-list { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.acc-list button { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; text-align: left; border: 0; background: none; color: var(--ink); padding: 7px 8px; border-radius: 8px; font: 500 12.5px var(--font-body); cursor: pointer; }
.acc-list button:hover { background: var(--surface-2); } .acc-list button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.acc-list .an { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .gl, .mf-grid { grid-template-columns: 1fr; } .acc-list { max-height: 220px; } }
/* Salaires : bulletin A4 et certificat */
.a4.payslip .ps-title { margin-top: 14mm; display: flex; justify-content: space-between; align-items: baseline; border-bottom: .5mm solid #111; padding-bottom: 2mm; }
.a4.payslip .ps-title b { font: 700 16pt "Schibsted Grotesk", Arial, sans-serif; }
.a4.payslip .ps-title span { font-size: 11pt; }
.a4.payslip .ps-meta { display: grid; grid-template-columns: 30mm 1fr 26mm 1fr; gap: 1.2mm 4mm; font-size: 8.5pt; margin: 5mm 0 7mm; }
.a4.payslip .ps-meta dt { color: #555; } .a4.payslip .ps-meta dd { margin: 0; font-weight: 600; }
.a4.payslip tr.sum td { font-weight: 700; border-bottom: .4mm solid #111; }
.a4.payslip tr.big td { font-size: 10.5pt; background: #f3f2ee; }
.a4.payslip .ps-note { position: absolute; left: 20mm; right: 18mm; bottom: 14mm; font-size: 7.5pt; color: #666; margin: 0; }
.cert { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); display: grid; gap: 6px; }
.cert-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cert-head b { font: 700 15px var(--font-display); } .cert-head span, .cert-who { font-size: 12px; color: var(--ink-2); }
.cert-who { margin-bottom: 4px; }
.cbox { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.cbox .cn { font: 600 12px var(--font-data); color: var(--accent); }
.cbox b { font-variant-numeric: tabular-nums; text-align: right; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 13px; padding: 10px; border-radius: 10px; }
.check.info { background: var(--surface-2); } .check.info .ci { background: var(--accent); }
.check.good { background: var(--good-soft); } .check.warn { background: var(--warn-soft); } .check.bad { background: var(--bad-soft); }
.check .ci { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.check.good .ci { background: var(--good); } .check.warn .ci { background: var(--warn); } .check.bad .ci { background: var(--bad); }
.check .btn { margin-top: 6px; padding: 5px 10px; font-size: 12px; }
.ed-plan { position: relative; min-width: 0; min-height: 0; background: var(--surface-2); }
.ed-plan svg.plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.ed-plan[data-tool="room"] svg.plan, .ed-plan[data-tool="calib"] svg.plan { cursor: crosshair; }
.ed-plan[data-tool="door"] svg.plan { cursor: cell; }
.ed-plan[data-tool="place"] svg.plan { cursor: copy; }
.ed-stats { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.ed-stats span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ed-floors { position: absolute; top: 10px; right: 10px; display: flex; gap: 3px; padding: 4px; border-radius: 11px; max-width: 46%; overflow-x: auto; scrollbar-width: none; }
.ed-floors button, .floorbar button { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font: 600 12.5px var(--font-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ed-floors button:hover, .floorbar button:hover { background: var(--surface-2); color: var(--ink); }
.ed-floors button.on, .floorbar button.on { background: var(--accent); color: var(--accent-ink); }
.floorbar { position: absolute; top: 74px; left: 76px; z-index: 4; display: flex; gap: 3px; padding: 4px; border-radius: 12px; align-items: center; max-width: calc(100% - 500px); overflow-x: auto; scrollbar-width: none; }
.floorbar span { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 0 6px 0 8px; white-space: nowrap; }
.flabel { position: absolute; left: 0; top: 0; display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: auto; cursor: pointer; text-align: left; }
.flabel b { color: var(--ink); font-size: 13px; }
.flabel:hover { border-color: var(--accent); }
#app.editing .floorbar { display: none !important; }
@media (max-width: 760px) { .floorbar { top: 60px; left: 8px; max-width: calc(100% - 16px); } }
.ed-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 12px; align-items: center; }
.ed-bar button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); position: relative; }
.ed-bar button svg { width: 18px; height: 18px; }
.ed-bar button:hover { background: var(--surface-2); color: var(--ink); }
.ed-bar button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ed-bar hr { width: 1px; height: 22px; border: 0; background: var(--line); margin: 0 3px; }
.ed-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--surface); pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.ed-confirm { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px 6px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--ink); }
/* symboles du plan */
.plan .bg { fill: var(--surface-2); }
.plan .building { fill: #F3F1ED; }
.plan .zone { stroke: none; }
.plan .zone.sel { stroke: var(--accent); stroke-width: .12; stroke-dasharray: .4 .25; }
.plan .grid1 { fill: none; stroke: rgb(30 40 50 / .07); stroke-width: .02; }
.plan .grid5 { fill: none; stroke: rgb(30 40 50 / .14); stroke-width: .035; }
.plan .w-glass { stroke: #6F9FC4; stroke-width: .12; }
.plan .w-solid { stroke: #3A4148; stroke-width: .17; }
.plan .outline { fill: none; stroke: #2B3239; stroke-width: .3; }
.plan .door .hit { stroke: transparent; stroke-width: .7; }
.plan .door .swing { fill: none; stroke: #5B6670; stroke-width: .035; }
.plan .door .opening { stroke: #5B6670; stroke-width: .04; stroke-dasharray: .2 .15; }
.plan .door.sel .swing, .plan .door.sel .opening { stroke: var(--accent); stroke-width: .08; }
.plan .f { fill: #FFFFFF; stroke: #7D8790; stroke-width: .03; }
.plan .f.wood { fill: #E9DCC4; } .plan .f.dark { fill: #3A4148; } .plan .f.soft { fill: #C9D3DB; } .plan .f.soft2 { fill: #A9B6C1; }
.plan .f.booth { fill: #9FB3A8; } .plan .f.green { fill: #6AAE84; } .plan .f.metal { fill: #C3C9CF; } .plan .f.lamp { fill: #F3E3B8; } .plan .f.tall { fill: #E3E7EB; }
.plan .ch { fill: #8B95A0; } .plan .mon { stroke: #2C333A; stroke-width: .05; }
.plan .rug { opacity: .45; stroke: none; }
.plan .leaf { fill: #6AA66F; } .plan .leaf2 { fill: #4F8A5B; } .plan .pot { fill: #D8D2C8; } .plan .sink { fill: #B8C0C8; }
.plan .rod { stroke: #9AA3AB; stroke-width: .03; } .plan .led { stroke: #3FD07F; stroke-width: .05; } .plan .glassl { stroke: #7FA6C4; stroke-width: .06; }
.plan .it { cursor: move; }
.plan .it.sel .f, .plan .it.sel .ch, .plan .it.sel .rug { stroke: var(--accent); stroke-width: .07; }
.plan .zn { font: 700 .5px var(--font-body); fill: #26313C; text-anchor: middle; paint-order: stroke; stroke: rgb(255 255 255 / .7); stroke-width: .1; pointer-events: none; }
.plan .za { font: 500 .38px var(--font-body); fill: #56636F; text-anchor: middle; pointer-events: none; }
.plan .dim { font: 600 .42px var(--font-body); fill: #56636F; text-anchor: middle; pointer-events: none; }
.plan .handle { fill: #fff; stroke: var(--accent); stroke-width: .06; cursor: nwse-resize; }
.plan .handle[data-h="n"], .plan .handle[data-h="s"] { cursor: ns-resize; } .plan .handle[data-h="e"], .plan .handle[data-h="w"] { cursor: ew-resize; }
.plan .handle[data-h="ne"], .plan .handle[data-h="sw"] { cursor: nesw-resize; }
.plan .seat text { font: 700 .26px var(--font-body); fill: #fff; text-anchor: middle; pointer-events: none; }
.plan .seat-free { fill: none; stroke: #8B95A0; stroke-width: .04; stroke-dasharray: .08 .06; }
.plan .north path { fill: #2B3239; } .plan .north text { font: 700 .45px var(--font-body); fill: #2B3239; text-anchor: middle; }
.plan .draw { fill: rgb(31 92 139 / .12); stroke: var(--accent); stroke-width: .08; stroke-dasharray: .3 .2; }
.plan .ghost { opacity: .7; pointer-events: none; } .plan .ghost.bad .f { stroke: var(--bad); stroke-width: .08; }
.plan .calib { stroke: var(--bad); stroke-width: .08; } .plan .calib-pt { fill: var(--bad); }
@media (max-width: 760px) {
  .editor { inset: 60px 8px 8px; width: auto; }
  .ed-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) 1fr; }
  .ed-side { border-right: 0; border-bottom: 1px solid var(--line); }
  #app.editing #scene { display: none; }
  .preview-tag { display: none; }
}

@media (max-width: 980px) {
  .user-meta, .hint { display: none; }
  .track { display: none; }
}
@media (max-width: 760px) {
  .topbar { top: 8px; padding: 6px 8px; gap: 8px; }
  .brand-text, .live span, kbd, .user .chev { display: none; }
  .usermenu { top: 52px; right: 8px; width: calc(100% - 16px); max-width: 320px; }
  .brand { flex: none; }
  .search { padding: 7px 10px; }
  .rail { top: auto; bottom: 96px; left: 50%; transform: translateX(-50%); flex-direction: row; padding: 4px; }
  .rail button { width: 40px; height: 40px; }
  .rail button .tip, .rail hr, .rail .rail-extra { display: none; }
  .dock { bottom: 8px; padding: 6px; }
  .kpi { flex: 0 0 132px; padding: 7px 10px; }
  .kpi b { font-size: 16px; }
  .panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 68%; height: 68%; }
  .panel[data-open="false"] { transform: translateY(calc(100% + 24px)); }
  .demo-tag { bottom: auto; top: 58px; right: 8px; }
  .toasts { top: 96px; }
  .palette-wrap { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Téléphone et tablette : gestes sur le plan, bande d'indicateurs ---------- */
#app { touch-action: pan-x pan-y; }            /* pas de zoom de la page entière par pincement */
@media (pointer: coarse) {
  .zlabel { pointer-events: none; }            /* les gestes passent au plan ; toucher une pièce reste possible sur le plan */
}
@media (max-width: 760px) {
  .dock { bottom: max(8px, env(safe-area-inset-bottom)); }
  .rail { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 88px); }
  .kpis { scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
  /* chaque carte prend la largeur de son texte (jamais tronqué), au moins une demi-largeur */
  .kpi { flex: 0 0 auto; min-width: calc((100% - 22px) / 2); scroll-snap-align: start; }
  .kpis::after { content: ""; flex: 0 0 6px; }   /* la dernière carte sort entièrement du fondu */
  .kpi small, .kpi b, .kpi em { overflow: visible; text-overflow: clip; }
  .bubble { max-width: min(240px, calc(100vw - 32px)); }
}

/* ---------- comptabilité : fournisseurs et banque ---------- */
.drop.drop-wide { min-height: 0; flex-direction: row; padding: 16px; cursor: pointer; }
.drop.drop-wide > span { display: block; text-align: left; line-height: 1.5; }
.drop.drop-wide > span svg { vertical-align: -5px; margin-right: 8px; }
.drop.drop-wide b { color: var(--ink); margin-right: 6px; }
.drop.drop-wide.over { border-color: var(--accent); background: var(--surface); }
.pay-bar { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 18px rgb(0 0 0 / .08); }
.bill-img { width: 100%; border-radius: 8px; background: #fff; }
.bank-tbl td { vertical-align: top; }
.bank-assign { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bank-assign select { max-width: 230px; width: auto; }
.bank-assign .tv { max-width: 150px; }
.bank-assign .btn { padding-inline: 10px; }
@media (max-width: 760px) { .bank-assign select, .bank-assign .tv { max-width: 100%; flex: 1 1 100%; } }
.doc-ic { color: var(--ink-3, var(--ink-2)); display: inline-flex; vertical-align: -2px; }
.doc-ic svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  /* relevé bancaire en fiches empilées sur téléphone */
  .tbl.bank-tbl { min-width: 0; }
  .bank-tbl thead { display: none; }
  .bank-tbl tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border-top: 1px solid var(--line); }
  .bank-tbl tbody tr:first-child { border-top: 0; }
  .bank-tbl td { display: block; padding: 0; border: 0; }
  .bank-tbl tbody tr:hover td { background: none; }
  .bank-tbl td:nth-child(1) { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-2); }
  .bank-tbl td:nth-child(4) { grid-column: 1 / -1; padding-top: 6px; }
}

/* icônes SVG dans les pastilles, étapes et badges */
.check .ci svg, .todo-item .tk svg { width: 13px; height: 13px; }
.ob-step b svg, .ed-step b svg { width: 12px; height: 12px; }
.privacy-list .yes svg, .privacy-list .no svg { width: 12px; height: 12px; }
.chip svg { width: 12px; height: 12px; flex: none; }
.chip:has(> svg)::before { display: none; }
.slip .scissors svg { width: 12px; height: 12px; display: block; }

/* ---------- salaires ---------- */
.pay-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pay-month { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.pay-month:hover:not(:disabled) { border-color: var(--ink-2); }
.pay-month:disabled { opacity: .5; cursor: default; }
.pay-month.now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-month small { color: var(--ink-2); font-size: 12px; text-transform: capitalize; }
.pay-month b { font: 700 16px/1.25 var(--font-display); font-variant-numeric: tabular-nums; }
.pay-month span { font-size: 12px; }
.pay-lines tr.sum td { font-weight: 700; background: var(--surface-2); }
.pay-lines tr.sum.total td { font-size: 14px; border-top: 1.5px solid var(--ink); }
.pay-lines input.ln-amt { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.pay-employer summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.pay-employer table { margin-top: 6px; }
.pay-form { gap: 12px; }
.pay-form .grid4, .kid { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr auto; gap: 10px; align-items: end; }
.kids { display: flex; flex-direction: column; gap: 10px; }
.warn-ic, .info-ic { display: inline-flex; vertical-align: -3px; }
.warn-ic { color: var(--warn); } .info-ic { color: var(--ink-2); }
.warn-ic svg, .info-ic svg { width: 15px; height: 15px; }
.tbl tfoot td { padding: 10px 12px; border-top: 1.5px solid var(--line); background: var(--surface-2); }
@media (max-width: 1100px) { .pay-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pay-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-form .grid4, .kid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* fiches du mois sur téléphone : personne, brut, versé, statut */
  .tbl.pay-tbl { min-width: 0; }
  .pay-tbl th:nth-child(3), .pay-tbl td:nth-child(3), .pay-tbl th:nth-child(4), .pay-tbl td:nth-child(4),
  .pay-tbl th:nth-child(6), .pay-tbl td:nth-child(6) { display: none; }
}

/* ---------- Style institutionnel ----------
   Police du système (SF sur Mac et iPhone, Segoe UI sous Windows), surfaces pleines sans effet de verre, angles discrets,
   onglets soulignés, titres en casse normale, étiquettes de statut rectangulaires, aucune animation décorative. */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 6px;
  --shadow: 0 1px 2px rgb(22 33 44 / .08), 0 2px 10px rgb(22 33 44 / .07);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 2px 12px rgb(0 0 0 / .3); } }
:root[data-theme="dark"] { --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 2px 12px rgb(0 0 0 / .3); }
body { background: var(--bg); }
.glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); }
.topbar, .usermenu, .rail, .panel, .dock, .palette, .studio, .rail-fly, .scene-alert, .rcpt-modal > *, .ob-card { border-radius: 8px; }
.card, .tbl-wrap, .st-kpi, .check, .drop, .pay-month, .cal-wrap, .ai-box, .ai-q, .ed-card, .tpl, .tpl-card, .cert, .toast, .bk, .floorbar,
.floorbar-real, .ed-bar, .ed-steps, .stat, .bubble, .user, .lv-summary div, .todo-item, .prow, .add-person, .invite-box, .seg { border-radius: 6px; }
.kpi, .btn, .icon-btn, .search, .rail button, .rail .rail-link, .rail-fly button, .row .p-ic, .filter, .switch, .track { border-radius: 5px; }
.chip { border-radius: 4px; padding: 1px 7px; }
.chip::before { display: none; }
.filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tabs { background: none; padding: 0; border-radius: 0; gap: 2px; }
.tab { border-radius: 0; padding: 8px 10px; border-bottom: 2px solid transparent; }
.tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--accent); }
.section-title h3, .eyebrow, .usermenu h4, .palette-group, .tbl th, .lines th, .invoice-lines th {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
.ph-icon:has(> svg) { background: none !important; color: var(--accent) !important; }
.live { background: none; padding: 0 4px; color: var(--ink-2); font-weight: 500; }
.live i { display: none; }
.rail-fly h4 { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.rail-fly .fi, .usermenu .mi, .row .p-ic, .p-item .p-ic { background: none; color: var(--ink-2); }
.rail-fly button[aria-current="true"] .fi { background: none; color: var(--accent); }

/* ---------- protection des données ---------- */
.lpd-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lpd-checks .check b { display: block; margin-bottom: 2px; }
.lpd-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.lpd-req { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ret-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
@media (max-width: 760px) { .lpd-checks { grid-template-columns: 1fr; } .ret-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- à configurer ---------- */
.setup-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 5px; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.setup-btn svg { width: 16px; height: 16px; flex: none; }
.setup-btn b { font-variant-numeric: tabular-nums; }
.setup-btn.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.setup-btn.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.setup-menu { position: absolute; top: 58px; right: 10px; width: min(440px, calc(100vw - 20px)); max-height: min(72vh, 640px); overflow: auto;
  padding: 12px; z-index: 31; display: flex; flex-direction: column; gap: 6px; }
.setup-head { display: flex; justify-content: space-between; align-items: baseline; }
.setup-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 6px; background: var(--surface-2); }
.setup-item b { display: block; font-size: 13px; }
.setup-item small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.setup-item.bloquant { box-shadow: inset 3px 0 0 var(--bad); }
.setup-item.conseil { box-shadow: inset 3px 0 0 var(--warn); }
.setup-item .lvl .chip { font-size: 11px; }
.rail button.alert::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 760px) {
  .setup-btn .setup-label { display: none; }
  .setup-item { grid-template-columns: 1fr; }
  .setup-item .lvl { justify-self: start; }
}