/* =============================================================
   stats.lafoxbox.be — direction "console"
   Gris neutre en fond, coquille blanche, barre latérale, noir
   comme couleur d'action. La couleur ne sert plus qu'à dire un
   état : vert = acquis, rouge = échec, ambre = attention.
   Remplace la direction "chambre claire" (papier chaud, rouge
   inactinique, Bodoni, grain argentique) le 2026-09-08.

   Tous les noms de classes et d'IDs sont conservés : le JS des
   vues s'y accroche.
   ============================================================= */

:root {
  color-scheme: light;

  /* le gris n'est qu'un cadre : tout le travail se fait sur le blanc */
  --bg: #E8E8E8;
  --bg-deep: #E0E0E0;
  --shell: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #FFFFFF;
  --card: #FFFFFF;
  --raised: #F5F5F5;

  --ink: #1A1A1A;
  --ink-bright: #0B0B0B;
  --ink-dim: #444444;
  --muted: #767676;
  --faint: #A1A1A1;

  /* l'action est noire, pas colorée : la couleur est réservée aux états */
  --accent: #1C1C1C;
  --accent-ink: #FFFFFF;
  --accent-2: rgba(0, 0, 0, 0.05);
  --accent-line: rgba(0, 0, 0, 0.16);
  --accent-glow: rgba(0, 0, 0, 0.22);

  /* la marque ne teinte plus l'interface ; elle reste disponible */
  --brand: #C9261A;

  --ok: #1B9C5D;
  --ok-bg: #E3F6EC;
  --ok-line: rgba(27, 156, 93, 0.24);
  --warn: #A9740C;
  --warn-bg: #FBF1DE;
  --warn-line: rgba(169, 116, 12, 0.24);
  --err: #D8383D;
  --err-bg: #FCE9EA;
  --err-line: rgba(216, 56, 61, 0.24);

  /* surfaces sombres : le bandeau KPI et les bulles */
  --dark: #1C1C1C;
  --dark-2: #272727;
  --dark-line: rgba(255, 255, 255, 0.10);
  --dark-ink: #FFFFFF;
  --dark-muted: rgba(255, 255, 255, 0.62);
  --dark-faint: rgba(255, 255, 255, 0.42);

  --tint-1: rgba(0, 0, 0, 0.028);
  --tint-2: rgba(0, 0, 0, 0.055);
  --tint-3: rgba(0, 0, 0, 0.10);

  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.18);

  --radius: 18px;
  --radius-sm: 12px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;

  /* une seule famille pour tout ce qui se lit ; le mono ne sert plus
     qu'aux identifiants techniques (numéros de TPE, de terminal). */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-num: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* héritages neutralisés : l'amorce de pellicule a disparu avec le décor */
  --perf: none;
  --film: #1C1C1C;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Le décor (grain argentique, lueur inactinique) a été retiré : sur un
   outil qu'on lit toute la journée, il ne servait qu'à salir les blancs. */
body::before, body::after { content: none; }

.page { background: transparent; }

::selection { background: var(--ink); color: #FFFFFF; }

/* ---------- coquille + barre latérale ---------- */
.shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 16px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: 22px;
  min-height: calc(100vh - 32px);
}

.sidebar {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  flex: none;
  width: 236px;
  /* Hauteur réelle, et non max-height : sans elle la barre ne fait que la
     hauteur de son contenu, et le `margin-top: auto` du bloc de compte
     (.side-foot) ne pousse rien. Le défilement passe à .side-nav. */
  height: calc(100vh - 34px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--border);
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }

.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.side-link svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-link:hover { background: var(--tint-1); color: var(--ink); }
.side-link.current { background: var(--raised); color: var(--ink); font-weight: 600; }
.side-link.danger:hover { color: var(--err); background: var(--err-bg); }

.shell-main { flex: 1; min-width: 0; }

.container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 26px 28px 44px;
}

/* ---------- typographie ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
.title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.subtitle { color: var(--muted); margin-top: 6px; }
.muted { color: var(--muted); }
.section-title { margin: 22px 0 10px; font-size: 16px; font-weight: 600; }

/* ---------- en-tête de page ---------- */
.header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 0; }
.brand-logo { width: 32px; height: 32px; flex: none; display: block; object-fit: contain; }
/* vestige de l'ancienne direction : plus de pellicule à l'écran */
.brand-strip { display: none; }
.brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); line-height: 1.4;
}

.actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.user-wrap { display: inline-flex; align-items: center; gap: 8px; }
.user-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-dim);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.01em;
}
.user-pill button {
  border: none; background: transparent; color: var(--faint);
  font-weight: 600; cursor: pointer; padding: 0 2px;
  font-size: 12px;
  transition: color 140ms ease;
}
.user-pill button:hover { color: var(--err); }
.user-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  background: var(--surface-2);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.user-gear svg { width: 15px; height: 15px; fill: currentColor; }
.user-gear:hover { color: var(--ink); border-color: var(--border-strong); background: var(--tint-1); }

/* la navigation est passée dans la barre latérale ; le style reste pour
   les vues qui n'ont pas encore été reprises */
.page-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.page-nav a {
  font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 6px 11px; border-radius: 999px; border: 1px solid transparent;
}
.page-nav a:hover { color: var(--ink); background: var(--tint-1); }
.page-nav a.current { color: var(--ink); background: var(--raised); font-weight: 600; }

/* ---------- boutons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink-dim);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.btn:hover:not(:disabled) { background: var(--tint-1); color: var(--ink); border-color: var(--border-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}
.btn.primary:hover:not(:disabled) { background: #000000; color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--border-strong); background: var(--tint-1); }
/* action destructrice : au repos elle se lit comme n'importe quel bouton —
   117 lignes de rouge feraient un mur d'alerte alors que rien ne se passe.
   Le rouge n'apparaît qu'au moment où la souris est dessus. */
.btn.danger { color: var(--muted); border-color: var(--border-strong); background: var(--surface-2); }
.btn.danger:hover:not(:disabled) { color: #FFFFFF; background: var(--err); border-color: var(--err); }
.btn:disabled { opacity: 0.36; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.toolbar .btn { padding: 9px 13px; font-size: 12.5px; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.btn-delete { padding: 4px 10px; line-height: 1; font-size: 14px; border-radius: 999px; }
.btn.btn-edit { padding: 5px 11px; font-size: 11.5px; }

/* ---------- pastille de synchro ---------- */
.header-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-dim);
  font-size: 12px; font-weight: 500;
}
.header-status .dot { flex: none; }
.header-status.running { border-color: var(--border-strong); background: var(--tint-1); }
.header-status.running .status-cancel { display: inline-flex; }
.header-status.running:hover .status-cancel { color: var(--err); }
.status-cancel {
  display: none; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px;
}
.status-cancel:hover { color: var(--err); }
.schedule-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--faint);
  cursor: pointer; padding: 0 2px;
}
.schedule-toggle svg { width: 13px; height: 13px; fill: currentColor; }
.schedule-toggle:hover { color: var(--ink); }

.schedule-pop {
  display: none; position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  min-width: 520px;
  padding: 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.schedule-pop .schedule-row { display: flex; flex-wrap: wrap; gap: 11px; align-items: end; }
.schedule-row { display: flex; flex-wrap: wrap; gap: 11px; align-items: end; }
.schedule-row .field-inline { display: flex; flex-direction: column; gap: 5px; }
.schedule-row label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); display: inline-block; }
.dot.success { background: var(--ok); }
.dot.error { background: var(--err); }
.dot.loading { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }

.sync-hover-group { display: inline-flex; align-items: center; gap: 9px; position: relative; }
.sync-hover-group.has-terminal-hover:hover #header-sync-terminals-pill { display: block; }
#header-sync-pill { position: relative; }
#header-sync-text { font-variant-numeric: tabular-nums; }
#header-sync-terminals-pill {
  display: none; position: absolute; top: calc(100% + 9px); right: 0; z-index: 30;
  min-width: 250px; padding: 11px 13px; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
#header-sync-current-text, #header-sync-terminals-text {
  font-size: 12.5px; color: var(--ink); margin-bottom: 6px; word-break: break-word;
}
.sync-terminals-label {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: 2px;
}
.sync-status { font-size: 12px; color: var(--muted); }
.sync-ok { color: var(--ok); }
.sync-mini { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.sync-mini .progress { flex: 1; }
.sync-mini.align-actions { justify-self: end; }
.sync-controls { display: flex; gap: 9px; flex-wrap: nowrap; justify-content: center; }
.sync-controls .btn { padding: 8px 12px; }
.sync-actions { display: flex; gap: 9px; align-items: center; }

.progress { height: 5px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.progress > div { height: 100%; background: var(--ink); border-radius: 999px; transition: width 240ms ease; }
.progress.indeterminate > div { width: 34%; animation: indeterminate 1.2s ease-in-out infinite; }

/* ---------- bandeau KPI ---------- */
/* La grille elle-même est la carte sombre : les KPI sont des cartes dans
   la carte, comme sur la référence. Aucun changement de balisage. */
.grid-4 {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 12px;
  background: var(--dark);
  border-radius: 20px;
  padding: 12px;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card::after { content: none; }
.card-title { font-weight: 600; margin: 0 0 10px; }

.grid-4 > .card {
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  color: var(--dark-ink);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 140px;
}
.grid-4 > .card:not(.kpi-main) { justify-content: space-between; }
.grid-4 > .card:not(.kpi-main) .kpi-value { font-variant-numeric: tabular-nums; }

.card.kpi-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: space-between;
  gap: 8px 18px;
  padding: 18px 20px;
}
.card.kpi-main::before { content: none; }
.card.kpi-main > .kpi-head,
.card.kpi-main > .kpi-body { display: contents; }
.card.kpi-main .kpi-label { grid-column: 1; align-self: center; white-space: nowrap; }
.card.kpi-main .kpi-value { grid-column: 2; text-align: right; justify-self: end; }
.card.kpi-main .kpi-divider { display: none; }
.card.kpi-main .kpi-foot,
.card.kpi-main .kpi-sub { grid-column: 1 / -1; text-align: right; }
.card.kpi-main .kpi-delta { grid-column: 1 / -1; justify-content: flex-end; }
.kpi-main .kpi-value { font-size: 30px; }
.kpi-main #kpi-for-us-value { font-size: 26px; color: var(--dark-muted); }

.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kpi-label {
  font-size: 11.5px; font-weight: 500; color: var(--dark-muted);
  letter-spacing: 0.01em;
}
.kpi-value {
  font-family: var(--font-num);
  font-size: 27px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--dark-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kpi-value-of { font-size: 14px; color: var(--dark-faint); font-weight: 500; }
.kpi-right { text-align: right; }
.kpi-sub { font-size: 12px; color: var(--dark-faint); }
.kpi-sub .muted { color: var(--dark-faint); }
.kpi-foot { font-size: 12px; color: var(--dark-faint); }
.kpi-divider { width: 1px; align-self: stretch; background: var(--dark-line); }
.kpi-delta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kpi-delta-ref { font-size: 11px; color: var(--dark-faint); }

.kpi-alert {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--dark-line);
  color: var(--dark-ink);
  font-size: 11.5px; text-decoration: none;
}
.kpi-alert:hover { background: rgba(255, 255, 255, 0.14); }
.kpi-alert-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--warn); flex: none; }

/* écarts : la couleur ne dit qu'une chose, le sens de la variation */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.delta-arrow { font-size: 9px; line-height: 1; }
.delta-up { background: var(--ok-bg); color: var(--ok); }
.delta-down { background: var(--err-bg); color: var(--err); }
.delta-new { background: var(--tint-2); color: var(--ink-dim); }
.grid-4 .delta-up { background: rgba(27, 156, 93, 0.16); color: #5BD79A; }
.grid-4 .delta-down { background: rgba(216, 56, 61, 0.16); color: #F58A8D; }
.grid-4 .delta-new { background: rgba(255, 255, 255, 0.10); color: var(--dark-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--tint-2); color: var(--ink-dim);
  font-size: 11.5px; font-weight: 500;
}

.cur-eq { color: var(--faint); font-size: 0.82em; font-weight: 500; white-space: nowrap; }
.grid-4 .cur-eq { color: var(--dark-faint); }

/* sparklines : sur fond sombre, un trait clair */
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark-line { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
/* Aire très discrète : sur une série plate, un remplissage trop dense se lit
   comme un pavé gris et non comme une courbe. */
.spark-area { fill: rgba(255, 255, 255, 0.055); stroke: none; }

/* ---------- barre d'outils ---------- */
.toolbar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.toolbar-row {
  display: flex; gap: 14px; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
}
.toolbar-row.row-split {
  display: grid;
  grid-template-columns: 1fr 1px auto;
  column-gap: 16px;
  align-items: end;
}
.toolbar-group { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.toolbar-group.filters { justify-self: start; flex-wrap: nowrap; min-width: 0; gap: 9px; }
.toolbar-group.actions {
  justify-self: end; text-align: center;
  flex-direction: column; align-items: center;
  gap: 8px; white-space: nowrap; max-width: 620px;
}
.toolbar-group.presets-group { justify-self: start; }
.toolbar-divider { width: 1px; align-self: stretch; background: var(--border); }
.toolbar-row.row-split .toolbar-divider { grid-column: 2; }
.toolbar-row.row-split:not(:has(.toolbar-group.actions)) .toolbar-divider { display: none; }
.toolbar-row.row-split .toolbar-group.actions,
.toolbar-row.row-split .sync-mini.align-actions { grid-column: 3; }

.presets-row { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.presets-row .toolbar-group { gap: 8px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.presets .btn { padding: 7px 13px; font-size: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 148px; align-items: stretch; }
.field label { text-align: left; width: 100%; }
.field select, .field input { text-align: left; }
.field.tight { min-width: 120px; }
.date-group { display: flex; gap: 9px; align-items: flex-end; }
.date-group .field { min-width: 140px; }

/* ---------- champs ---------- */
label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
select, input[type="date"], input[type="time"], input[type="number"], input[type="text"], input[type="password"], input[type="search"], input:not([type]) {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color 140ms ease, background 140ms ease;
}
select:hover, input:hover:not(:disabled) { border-color: var(--ink-dim); }
select:focus, input:focus { outline: none; border-color: var(--ink); }
input:focus-visible { outline: none; }
input:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="checkbox"] { accent-color: var(--ink); width: 15px; height: 15px; }
input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

.input-group { display: grid; gap: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.form-row.single { grid-template-columns: 1fr; }
.form-row.single label {
  display: flex; align-items: center; gap: 9px;
  text-transform: none; letter-spacing: 0; font-size: 13px;
  color: var(--ink-dim); font-weight: 400;
}

/* ---------- sections ---------- */
.section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.section-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
/* la barre rouge d'accent a disparu avec la direction précédente */
.section-head::before { content: none; }
.section-head h2 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.section-meta { font-size: 11.5px; color: var(--faint); }
.section-body { padding: 16px 18px 18px; }

.summary { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.summary-title { font-size: 16px; font-weight: 600; }
.summary-sub { color: var(--muted); margin-top: 3px; font-size: 12.5px; }
.summary-right { text-align: right; }
.summary-range { font-size: 11.5px; color: var(--faint); }
.summary-value {
  font-family: var(--font-num); font-size: 21px; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

.soft-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.total-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 7px 0;
  color: var(--muted); font-size: 13px;
}
.total-line strong { font-weight: 600; color: var(--ink-bright); font-variant-numeric: tabular-nums; }
.total-line:has(#commission-total) { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
#commission-total, #payments-total {
  font-family: var(--font-num); font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.payments-header { display: flex; align-items: baseline; gap: 12px; }
.payments-title { display: inline-flex; align-items: baseline; gap: 12px; justify-content: flex-start; }
.payments-total { font-family: var(--font-num); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.payments-remaining { font-size: 12px; color: var(--muted); }

/* ---------- tableaux ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; text-align: left; font-size: 13px; }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
td { border-top: 1px solid var(--border); color: var(--ink-dim); vertical-align: middle; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable.active { color: var(--ink); }
th.sortable .sort-ind { font-size: 8px; margin-left: 3px; color: var(--faint); }
th.sortable.active .sort-ind { color: var(--ink); }
.table-empty { padding: 14px 10px; color: var(--muted); }
.table-search input { width: 240px; }
/* un libellé en ligne (case à cocher) n'est pas une étiquette de champ :
   il se lit comme une phrase, pas en petites capitales */
.toolbar-note, .form-row.single label { text-transform: none; letter-spacing: 0; }
.table-search input:focus { border-color: var(--ink); }

#terminals-table tr:hover td { background: var(--surface); }
#terminals-table tr[hidden] { display: none; }
.cell-amount { font-variant-numeric: tabular-nums; }
td.has-bar { position: relative; }
/* Barre de proportion : elle part du bord droit, sous le montant, parce que
   la colonne est alignée à droite — ancrée à gauche, elle flottait dans le
   vide au milieu de la cellule et se lisait comme un trait égaré. */
.cell-bar {
  position: absolute; right: 10px; bottom: 6px;
  height: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
  width: var(--p); max-width: calc(100% - 20px);
}

/* ---------- terminaux muets ---------- */
.alert {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  padding: 13px 16px;
}
.alert summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 11px; }
.alert summary::-webkit-details-marker { display: none; }
.alert-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  background: var(--warn); color: #FFFFFF; font-size: 12px; font-weight: 700;
}
.alert-text strong { color: var(--ink-bright); font-weight: 600; }
.alert-toggle { margin-left: auto; font-size: 11.5px; color: var(--warn); font-weight: 600; }
.alert-toggle::after { content: " ▾"; }
.alert[open] .alert-toggle::after { content: " ▴"; }
.alert-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.alert-list li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 7px; border-top: 1px solid var(--warn-line);
  font-size: 12.5px;
}
.alert-name { font-weight: 600; color: var(--ink); }
.alert-id { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.alert-last { color: var(--muted); }
.alert-sev { margin-left: auto; font-size: 11px; font-weight: 600; }
.alert-sev-short { color: var(--warn); }
.alert-sev-mid { color: var(--warn); }
.alert-sev-long { color: var(--err); }
.alert-sev-never { color: var(--err); }

/* ---------- graphique ---------- */
/* La géométrie vient du balisage : la hauteur de chaque barre est portée par
   la variable --h posée en ligne, et la gouttière de 58 px à gauche réserve
   la place des libellés d'axe. Ne pas la changer sans toucher la vue. */
.chart { position: relative; }
.chart-plot { position: relative; height: 208px; }
.chart-grid { position: absolute; inset: 0 0 0 58px; }
.chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.chart-gridlabel {
  position: absolute; right: calc(100% + 10px); transform: translateY(-50%);
  font-size: 10.5px; color: var(--faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chart-bars { position: absolute; inset: 0 0 0 58px; display: flex; align-items: flex-end; gap: 3px; }
.chart-bar {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; align-items: flex-end; justify-content: center; outline: none;
}
/* max-width : sur 6 barres, un flex 1/6 donnerait des pavés de 200 px.
   La zone de survol reste la colonne entière. */
.chart-bar-fill {
  display: block; width: 100%; max-width: 42px; height: var(--h);
  background: #3A3A3A;
  border-radius: 6px;
  min-height: 2px;
  transition: background 120ms ease;
}
.chart-bar:hover .chart-bar-fill,
.chart-bar:focus-visible .chart-bar-fill,
.chart-bar.is-max .chart-bar-fill { background: var(--ink-bright); }
.chart-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.chart-bar-peak {
  position: absolute; bottom: calc(var(--h) + 7px); left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--card); padding: 0 4px; border-radius: 4px;
}
/* aux extrémités, le libellé du pic se cale au bord au lieu de déborder */
.chart-bar:first-child .chart-bar-peak { left: 0; transform: none; }
.chart-bar:last-child .chart-bar-peak { left: auto; right: 0; transform: none; }
.chart-axis { display: flex; gap: 3px; margin-top: 9px; padding-left: 58px; }
.chart-tick {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden;
}
.chart-tick span { display: block; }
.chart-tick:first-child { text-align: left; }
.chart-tick:last-child { text-align: right; }
.tick-secondary { color: var(--faint); font-size: 9.5px; }
.chart-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--dark); color: var(--dark-ink);
  padding: 9px 12px; border-radius: 12px;
  font-size: 12px; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, calc(-100% - 10px));
}
.chart-tip .chart-tip-day { display: block; color: var(--dark-faint); font-size: 10.5px; margin-bottom: 2px; }
.chart-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* granularité : segmenté, l'actif en noir */
.gran-switch {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.gran-btn {
  border: none; background: transparent; color: var(--muted);
  text-decoration: none;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}
.gran-btn:hover { color: var(--ink); background: var(--tint-1); }
.gran-btn.is-active { background: var(--ink); color: #FFFFFF; }
.gran-btn.is-disabled { opacity: 0.35; cursor: not-allowed; }
.gran-btn.is-disabled:hover { background: transparent; color: var(--muted); }
.gran-current { font-size: 11.5px; color: var(--faint); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes develop { from { opacity: 0; } to { opacity: 1; } }

.grid-4 > .card { animation: rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.grid-4 > .card:nth-child(1) { animation-delay: 40ms; }
.grid-4 > .card:nth-child(2) { animation-delay: 80ms; }
.grid-4 > .card:nth-child(3) { animation-delay: 120ms; }
.grid-4 > .card:nth-child(4) { animation-delay: 160ms; }
.toolbar { animation: rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) 180ms both; }
.section { animation: rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) 220ms both; }

/* ---------- page de connexion ---------- */
/* Pas de coquille ni de barre latérale ici : il n'y a rien à naviguer tant
   qu'on n'est pas entré. Une seule carte, la même que partout ailleurs. */
.login-page { display: grid; place-items: center; padding: 20px; min-height: 100vh; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--shell);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}
/* le fil d'attente reprend la barre de progression indéterminée du dashboard */
.login-strip { height: 3px; background: var(--tint-2); overflow: hidden; }
.login-strip > div { height: 100%; width: 34%; background: var(--ink); opacity: 0; }
.login-strip.loading > div { opacity: 1; animation: indeterminate 1.2s ease-in-out infinite; }
.login-body { padding: 26px 26px 24px; }
.login-head { display: flex; align-items: center; gap: 12px; }
.login-head .brand-logo { width: 38px; height: 38px; }
.login-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.login-sub {
  display: block; margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.login-form { display: grid; gap: 13px; margin-top: 22px; }
.login-form .input-group input { width: 100%; }
.login-form .btn { width: 100%; margin-top: 5px; }
.login-error {
  margin-top: 14px;
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  color: var(--err);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
}

/* ---------- bandeaux de résultat (admin) ---------- */
/* .alert seul est ambré (terminaux muets) ; ces deux variantes disent
   l'issue d'une action qu'on vient de déclencher. */
.alert.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert.error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.alert.success, .alert.error { font-size: 13px; margin-bottom: 14px; }

/* ---------- listes de cases à cocher ---------- */
/* Un parc de 100+ terminaux : la liste plafonne en hauteur et défile, sinon
   le formulaire de création pousse le tableau hors de l'écran. */
.checklist {
  display: flex; flex-wrap: wrap; gap: 7px 14px;
  max-height: 168px; overflow-y: auto;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.checklist label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--ink-dim);
  cursor: pointer;
}
.checklist input[type="checkbox"] { width: 14px; height: 14px; flex: none; }

/* ---------- grille de stats à colonnes égales ---------- */
/* Le bandeau du dashboard donne le premier bloc en 2,2fr : ici les quatre
   chiffres ont le même poids. */
.grid-4.even { grid-template-columns: repeat(4, 1fr); }
.grid-4.even > .card { min-height: 104px; }

/* ---------- divers pages d'administration ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 10px; letter-spacing: 0.06em; color: var(--muted);
  font-weight: 600;
}
.danger-note { color: var(--err); font-size: 12px; margin-top: 12px; }
.stack { display: grid; gap: 16px; }
.cell-form { display: grid; gap: 8px; min-width: 180px; }
.cell-form input, .cell-form select { width: 100%; }
.cell-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
/* nommée cell-actions et pas row-actions : commissions.php définit déjà
   .row-actions dans sa feuille locale, avec un alignement à droite. */
td.cell-actions, .cell-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* dans une cellule qui fait la hauteur d'une liste de terminaux, les boutons
   se calent en haut, à hauteur de la première ligne. */
td.cell-actions { align-items: flex-start; }
/* les tableaux qui portent des formulaires : chaque champ commence en haut */
.table-forms td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* ---------- parc de cabines (lot 1) ---------- */
/* Un fil d'Ariane discret : sur une fiche, savoir d'où l'on vient compte plus
   qu'un bouton « retour » qui prend la place d'une action. */
.crumb { font-size: 12px; margin-bottom: 6px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

/* Le nom d'une cabine est un lien : il ouvre sa fiche. Il se lit comme du
   texte tant que la souris n'est pas dessus. */
.row-link { color: var(--ink-bright); font-weight: 600; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Une valeur manquante qui compte — un TPE absent — n'est pas un tiret muet. */
.tag-warn {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line);
}

/* Le bandeau d'alerte du dashboard est un <details> ; ici il tient sur une
   ligne avec son action à droite. */
.alert-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.alert-row .alert-text { flex: 1; min-width: 220px; }

/* une case à cocher au fil d'un tableau se lit comme une phrase */
.check-inline {
  display: inline-flex; align-items: center; gap: 7px;
  text-transform: none; letter-spacing: 0; font-size: 12.5px;
  color: var(--ink-dim); font-weight: 400; white-space: nowrap;
}

/* ---------- cascade de décompte ---------- */
/* Chaque ligne est une étape du calcul : un opérateur, ce qu'on retire ou
   ajoute, et le montant. Les totaux intermédiaires sont sur fond gris pour
   qu'on suive la descente sans lire les libellés. */
.ladder { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.ladder-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px;
  align-items: baseline; padding: 9px 14px;
  border-top: 1px solid var(--border); font-size: 13.5px;
}
.ladder-row:first-child { border-top: none; }
.ladder-row .op { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); text-align: center; }
.ladder-row .what { color: var(--ink-dim); }
.ladder-row .what em { font-style: normal; display: block; font-size: 11.5px; color: var(--muted); }
.ladder-row .amt { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-bright); font-weight: 500; }
.ladder-row.sum { background: var(--raised); font-weight: 600; }
.ladder-row.sum .what { color: var(--ink-bright); }
.ladder-row.sum .amt { font-size: 15px; }
.ladder-row.out .amt { color: var(--err); }
.ladder-row.in .amt { color: var(--ok); }

/* Ce que chacun touche : trois blocs, le nôtre en dernier. */
.payouts { display: flex; flex-direction: column; gap: 10px; }
.payout {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; background: var(--surface-2);
}
.payout .who { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.payout .amt { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 3px; }
.payout .how { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.payout.us { background: var(--dark); border-color: var(--dark); }
.payout.us .who { color: var(--dark-faint); }
.payout.us .amt { color: var(--dark-ink); }
.payout.us .how { color: var(--dark-muted); }

/* Les trimestres : la période courante en noir, les autres sobres. */
.periods { display: flex; gap: 6px; flex-wrap: wrap; }
.periods a {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  text-decoration: none; background: var(--surface-2); white-space: nowrap;
}
.periods a:hover { color: var(--ink); border-color: var(--border-strong); }
.periods a.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }

/* ---------- l'utilisateur, en bas de la barre ---------- */
/* Une photo ronde plutôt qu'une pastille de texte : on reconnaît un visage plus
   vite qu'on ne lit un identifiant. */
.side-user { display: flex; align-items: center; gap: 9px; padding: 2px 4px; }
.side-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 999px; overflow: hidden;
  background: var(--raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none;
  transition: border-color 140ms ease;
}
.side-avatar:hover { border-color: var(--border-strong); color: var(--ink); }
.side-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-username {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 500; color: var(--ink-dim);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-username:hover { color: var(--ink-bright); }
.side-logout {
  border: none; background: transparent; color: var(--faint);
  font-size: 15px; font-weight: 600; cursor: pointer; padding: 2px 4px; line-height: 1;
  transition: color 140ms ease;
}
.side-logout:hover { color: var(--err); }

/* ---------- paires de sections ---------- */
/* Deux registres courts se lisent côte à côte : empilés, ils repoussent la
   suite hors de l'écran pour rien. Sous 1100 px il n'y a plus la place. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pair { grid-template-columns: 1fr; } }

/* Dans une demi-largeur, un tableau ne tient que si ses colonnes secondaires
   passent sous la principale. */
.pair .row-sub { line-height: 1.35; }
.pair th, .pair td { padding-left: 8px; padding-right: 8px; }

/* ---------- sections repliables ---------- */
/* Une <details class="section fold"> se comporte comme une section ordinaire,
   avec une flèche et un résumé qui reste lisible fermé. On replie ce qu'on
   consulte rarement ; ce qu'on ouvre tous les jours reste déplié. */
.fold > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: "";
  width: 15px; height: 15px; flex: none; margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 160ms ease;
}
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:hover::after { opacity: 0.7; }
.fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--radius); }
/* Fermée, la section n'a plus de trait sous son titre : il ne séparerait rien. */
.fold:not([open]) > summary.section-head { border-bottom: none; }
/* Le résumé porte le chiffre qui évite d'ouvrir pour rien. */
.fold-sum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.fold-sum .n { font-variant-numeric: tabular-nums; color: var(--ink-bright); font-weight: 600; font-size: 13px; }
.fold-sum .l { font-size: 11.5px; color: var(--faint); }

/* ---------- boîtes de saisie (dialog) ---------- */
/* Une seule boîte par type de ligne, remplie en JS : recopier le formulaire
   sur chaque ligne d'un tableau de 100 entrées ferait 100 formulaires. */
.sheet {
  border: none; padding: 0; border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  width: min(500px, calc(100vw - 32px));
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.42); }
.sheet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.sheet-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.sheet-body { padding: 16px 18px; display: grid; gap: 13px; }
.sheet-body .input-group input,
.sheet-body .input-group select { width: 100%; }
/* Montant + sélecteur TVAC/HTVA sur une ligne : la règle ci-dessus (0,2,1)
   l'emportait sur `.field-inline .vat-sel` (0,2,0) — le sélecteur prenait
   100 % et écrasait le champ du montant à zéro. */
.sheet-body .field-inline input { flex: 1; min-width: 0; }
.sheet-body .field-inline .vat-sel { width: auto; flex: none; }
.form-row > * { min-width: 0; }
.sheet-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 13px 18px; border-top: 1px solid var(--border);
}

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-4.even { grid-template-columns: 1fr 1fr; }
  .card.kpi-main { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .shell { flex-direction: column; margin: 10px; border-radius: 18px; min-height: calc(100vh - 20px); }
  .sidebar {
    position: static; width: auto; max-height: none; overflow: visible;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 12px 12px; border-right: none; border-bottom: 1px solid var(--border);
  }
  .side-nav { flex-direction: row; overflow-x: auto; gap: 4px; flex: 1; }
  .side-foot { margin-top: 0; padding-top: 0; flex-direction: row; }
  .side-link { padding: 8px 11px; }
  .container { padding: 18px 14px 36px; }
  .header { align-items: flex-start; }
  .actions { width: 100%; }
  .toolbar-row.row-split { grid-template-columns: 1fr; row-gap: 12px; }
  .toolbar-row.row-split .toolbar-divider { display: none; }
  .toolbar-row.row-split .toolbar-group.actions,
  .toolbar-row.row-split .sync-mini.align-actions { grid-column: 1; justify-self: stretch; max-width: none; }
  .toolbar-group.filters { flex-wrap: wrap; }
  .sync-controls { flex-wrap: wrap; }
  .sync-mini.align-actions { flex: 1 1 auto; }
  .summary { grid-template-columns: 1fr; }
  .summary-right { text-align: left; }
  .payments-title { flex-wrap: wrap; gap: 4px 10px; }
  .schedule-pop { min-width: 0; width: min(520px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
}

@media (max-width: 640px) {
  .container { padding: 14px 12px 32px; }
  .header { gap: 12px; }
  .brand { margin-bottom: 0; }
  .user-wrap { flex-wrap: wrap; }
  .actions { gap: 8px; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-4.even { grid-template-columns: 1fr; }
  .checklist { max-height: 132px; }
  .sync-hover-group { width: 100%; }
  #header-sync-pill { width: 100%; }
  #header-sync-text { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #header-sync-terminals-pill { left: 0; right: auto; min-width: 0; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .schedule-pop { right: auto; left: 0; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .toolbar { padding: 14px; }
  .toolbar-group.filters { width: 100%; }
  .field { min-width: 0; width: 100%; }
  .date-group { width: 100%; flex-wrap: wrap; }
  .date-group .field { width: 100%; }
  .presets { width: 100%; }
  .presets .btn { flex: 1 1 calc(50% - 8px); }
  .sync-controls { width: 100%; justify-content: stretch; }
  .sync-controls .btn { flex: 1 1 auto; }
  .sync-mini { min-width: 0; width: 100%; }
  .sync-mini.align-actions { width: 100%; }
  .section-head { align-items: flex-start; gap: 6px; flex-wrap: wrap; }
  .card.kpi-main { padding: 16px; }
  .table-search input { width: 100%; }
  .tick-secondary { display: none; }

  /* le tableau des terminaux devient une carte par ligne */
  #terminals-table thead { display: none; }
  #terminals-table,
  #terminals-table tbody,
  #terminals-table tr,
  #terminals-table td { display: block; width: 100%; }
  #terminals-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 11px 13px;
    margin-bottom: 10px;
  }
  #terminals-table tr:hover td { background: transparent; }
  #terminals-table tr:hover { border-color: var(--border-strong); }
  #terminals-table td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border: 0; padding: 5px 0; text-align: right;
  }
  #terminals-table td::before {
    content: attr(data-label);
    font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); text-align: left; flex: none; font-weight: 600;
  }
  #terminals-table td:first-child {
    display: block; font-weight: 600; font-size: 15px; text-align: left;
    padding: 0 0 9px; margin-bottom: 5px; border-bottom: 1px solid var(--border);
  }
  #terminals-table td:first-child::before { display: none; }
  #terminals-table td.has-bar { padding-bottom: 5px; flex-wrap: wrap; }
  #terminals-table .cell-bar { position: static; display: block; width: var(--p); max-width: 100%; margin: 7px 0 0 auto; }
  #terminals-table td.has-bar .cell-bar { flex-basis: 100%; }
  .grid-4 > .card:not(.kpi-main) { min-height: 0; gap: 6px; justify-content: flex-start; }
  th, td { padding: 10px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* =============================================================
   Menu en deux sections (2026-09-11)

   Les écrans de stats d'un côté, le site status.lafoxbox.be
   (servi en direct par StatusProxy) de l'autre. La séparation ne
   tient qu'à l'espace entre les deux sections : ni cartouche, ni
   filet, ni matière — l'essai "verre liquide" et le trait noir du
   2026-09-11 ont tous deux été retirés à la demande du client.

   Ces règles sont en fin de feuille : elles doivent passer après
   la section responsive, elles portent leur propre media query.
   ============================================================= */

.side-nav { gap: 22px; overflow-y: auto; overflow-x: hidden; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
/* Aucun filet : la séparation des deux sections tient au seul espace
   (essayé avec un trait noir le 2026-09-11, retiré à la demande du client). */

.group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 12px 6px;
}

/* Sous-menu des réglages : décalé, relié par un filet clair. */
.side-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px 19px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.side-sub .side-link {
  padding: 7px 11px;
  font-size: 12.8px;
  white-space: normal;
  line-height: 1.25;
  align-items: center;
}
.side-sub .side-link svg { width: 15px; height: 15px; }

/* ---------- la page de status, servie dans une iframe ---------- */
.embed-wrap { position: relative; }
.embed-frame {
  display: block;
  width: 100%;
  min-height: 70vh;
  border: 0;
  background: transparent;
  /* La hauteur est ajustée au contenu par le JS de la vue : une seule
     barre de défilement, celle de la page. */
}

/* ---------- l'accueil des réglages : le menu dans le menu ---------- */
.settings-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 17px 18px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 140ms ease, background 140ms ease;
}
.settings-card:hover { border-color: var(--accent-line); background: var(--surface); }
.settings-card .sc-icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--raised);
  border: 1px solid var(--border);
}
.settings-card .sc-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.settings-card .sc-title { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.settings-card .sc-desc { display: block; color: var(--muted); font-size: 12.8px; margin-top: 3px; line-height: 1.45; }

@media (max-width: 980px) {
  /* La barre redevient une rangée : les deux sections se suivent, le filet
     passe sur les côtés pour garder la séparation lisible. */
  .sidebar { height: auto; overflow: visible; }
  .side-nav { flex-direction: row; gap: 12px; overflow-x: auto; }
  .nav-group { flex-direction: row; align-items: center; gap: 4px; }
  .group-label { display: none; }
  .side-sub { flex-direction: row; margin: 0; padding-left: 6px; border-left: none; }
  .settings-menu { grid-template-columns: 1fr; }
}

/* Les deux taux d'investisseur côte à côte, sur l'écran Utilisateurs. */
.pct-pair { display: flex; gap: 6px; }
.pct-pair input { width: 100%; min-width: 0; text-align: right; }

/* Les compteurs de /cabines filtrent le tableau : ce sont des boutons, mais
   ils doivent rester des cartes à l'œil — sauf qu'ils réagissent au survol et
   marquent le filtre en cours. */
.kpi-filter {
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: border-color 140ms ease, background 140ms ease;
}
/* Ces cartes-là vivent sur le bandeau sombre : l'état se marque en clair,
   un liseré noir y serait invisible. */
.kpi-filter:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.32); }
.kpi-filter.current {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
/* « Cabines » n'est pas un filtre mais le retour au parc entier : discret. */
.kpi-filter[data-filter="all"].current { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.34); box-shadow: none; }
.kpi-filter .kpi-label { pointer-events: none; }
.kpi-filter .kpi-value { pointer-events: none; }

/* Le bandeau de /cabines porte six compteurs : il s'enroule au lieu de forcer
   quatre colonnes, sinon les deux derniers sortaient du cadre. */
/* .grid-4.even impose quatre colonnes : il faut la même spécificité pour
   étaler les six compteurs sur une seule rangée. */
.grid-4.kpi-filters { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
/* Les gestes de fin de ligne restent discrets tant qu'on ne survole pas. */
.row-tools { white-space: nowrap; }
.row-tools .btn { opacity: 0.55; transition: opacity 120ms ease; }
tr:hover .row-tools .btn, .row-tools .btn:focus-visible { opacity: 1; }
@media (hover: none) { .row-tools .btn { opacity: 1; } }

/* Le choix « qu'est-ce qui bouge ? » du déplacement : des lignes cliquables,
   pas des boutons radio nus perdus dans le texte. */
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 6px;
}
/* C'est un <label> : il hérite sinon des petites capitales de formulaire. */
.choice, .choice * { text-transform: none; letter-spacing: normal; }
.choice { color: var(--ink); font-weight: 400; }
.choice strong { font-weight: 600; color: var(--ink-bright); }
.choice:hover { background: var(--surface); border-color: var(--accent-line); }
/* `.sheet-body .input-group input { width: 100% }` gagne en spécificité sur
   une règle à classe unique : sans ce sélecteur aussi long, le bouton radio
   prend toute la largeur et chasse son libellé hors de la boîte. */
.choice input[type="radio"] { margin-top: 2px; flex: none; width: auto; }
.sheet-body .input-group .choice input[type="radio"] { width: auto; }
.choice > span { min-width: 0; }

/* L'attribut `hidden` ne vaut que `display:none` au niveau du navigateur :
   la moindre règle `display` d'une classe le bat. Les champs masqués du
   formulaire de déplacement restaient donc visibles. */
.input-group[hidden], [hidden] { display: none !important; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.choice .muted { font-size: 12px; }

/* Le régime de TVA d'un décompte : discret, mais toujours visible. */
.badge.muted-badge { background: var(--raised); color: var(--muted); border-color: var(--border); }

/* Règlements : figé mais pas encore payé (ambre), payé (vert). Le bouton
   « Payer » vit sur la ligne, avec sa date. */
.state-pending { color: var(--warn); font-weight: 600; }
.state-paid { color: var(--ok); font-weight: 600; }
.pay-row { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pay-row input[type="date"] { width: 13ch; }
.quarters .q.pending { background: var(--warn-bg); border-color: var(--warn-line); cursor: default; }
.quarters .q.pending .s { color: var(--warn); font-weight: 600; }
.quarters .q.pending input { visibility: hidden; }

/* ---------- barème de commission du lieu (2026-09-19) ---------- */
/* L'éditeur commun (partials/commission_scheme.php) : une rangée de sélecteurs,
   les paliers en lignes « à partir de X → Y % », le minimum en dessous. */
.scheme { display: grid; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.scheme-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; }
.scheme .input-group input, .scheme .input-group select { width: 100%; min-width: 0; }
.scheme .inh { font-size: 11px; color: var(--faint); }
.scheme label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tiers { display: flex; flex-direction: column; gap: 6px; }
.tier-row { display: grid; grid-template-columns: auto minmax(70px, 130px) auto auto 64px auto 28px; gap: 6px 8px; align-items: center; font-size: 13px; }
.tier-row input { min-width: 0; width: 100%; text-align: right; }
.tier-row input[readonly] { color: var(--faint); background: var(--surface-2); }
.tier-row .tier-from, .tier-row .tier-unit { color: var(--muted); white-space: nowrap; }
.tier-row .tier-arrow { color: var(--faint); }
.tier-row .btn-delete { padding: 3px 8px; font-size: 13px; }
.tier-row .btn-delete[disabled] { visibility: hidden; }
.scheme .field-inline { display: flex; align-items: center; gap: 6px; }
.scheme .field-inline input { flex: 1; min-width: 0; }
.scheme .field-inline .unit { color: var(--muted); font-size: 13px; }
.scheme .opt-foot { margin-top: 4px; }
/* Le détail du barème sous le décompte : une ligne par mois ou trimestre. */
.scheme-detail { margin-top: 12px; }
.scheme-detail .lead-line { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.scheme-detail .lead-line b { color: var(--ink); font-weight: 600; }
.scheme-detail td.num, .scheme-detail th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scheme-detail .min-hit { color: var(--warn); font-weight: 600; }

/* ---------- étiquette de régime de TVA (2026-09-19) ---------- */
/* Collée à côté de chaque montant dont on connaît le régime : petite, grise,
   jamais colorée — elle qualifie, elle n'alerte pas. */
.vat-tag {
  display: inline-block; font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .07em;
  color: var(--faint); vertical-align: 2px; margin-left: 3px; white-space: nowrap;
}
.kpi-value .vat-tag, .amt .vat-tag, .lead .vat-tag { font-size: 10px; }
.card-dark .vat-tag, .kpi-main .vat-tag, .payout.us .vat-tag { color: rgba(255, 255, 255, 0.55); }
.pay-card.us .vat-tag { color: rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------------------------
   Barre de filtres et de tri des listes (2026-10-02)
   partials/list_filters.php + assets/list-filters.js
   ------------------------------------------------------------------ */
.lf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.lf-drop { position: relative; }
.lf-drop > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lf-drop > summary::-webkit-details-marker { display: none; }
.lf-drop .lf-caret { font-size: 10px; opacity: .6; }
.lf-drop .lf-sel:not(:empty) { font-weight: 600; color: var(--ink-bright); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-drop .lf-sel:not(:empty)::before { content: '· '; font-weight: 400; color: var(--faint); }
.lf-drop.on > summary { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lf-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 230px; max-width: min(340px, calc(100vw - 32px));
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 8px; display: grid; gap: 6px;
}
.lf-menu .lf-find { width: 100%; }
.lf-opts { max-height: 300px; overflow-y: auto; display: grid; gap: 1px; }
.lf-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.lf-opt:hover { background: var(--accent-2); }
.lf-opt input { width: auto; flex: none; margin: 0; }
.lf-opt .lf-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-opt .lf-n { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.lf-opt[hidden], .lf-opt.lf-miss { display: none; }
.lf-count { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; }
tr.lf-out { display: none !important; }
@media (max-width: 640px) {
  .lf-bar { padding: 10px 12px; }
  .lf-menu { position: fixed; left: 16px; right: 16px; top: auto; max-width: none; }
}
/* La carte coupe ce qui dépasse : un menu ouvert sur une liste courte serait tronqué. */
.section:has(.lf-bar) { overflow: visible; }
.section:has(.lf-bar) > .section-head { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }

/* Le bloc des impayés de /reglements : ambre tant qu'il reste quelque chose à verser (2026-10-02). */
#impayes.is-pending { border-color: var(--warn-line); }
#impayes.is-pending > summary.section-head { background: var(--warn-bg); }
#impayes.is-pending > summary h2 { color: var(--warn); }
#impayes.is-pending > summary .section-meta { color: var(--warn); opacity: .85; }