/* Cockpit Marge : le design system, en un seul endroit (07/11/2026, review de Charles : la rigueur d'un SaaS de haut niveau, références Linear, Attio, Vercel).
   Chargé avant toutes les autres feuilles. Ici vivent les tokens (couleurs, espacement, rayons, typo, surfaces, ombres, focus, gabarit)
   et les composants partagés par toutes les vues : gabarit de page, en-tête de vue, boutons, pastilles, badges, tableaux, états vides.
   Les feuilles des vues (le <style> de index.html, todo.css, ops.css, checkins.css) consomment ces tokens et ne redéfinissent pas de valeur isolée.
   Identité : 07-brand/marge-brand-guidelines.html. Cardo pour les titres, Inter Tight pour l'interface, JetBrains Mono pour les labels et les chiffres. */

:root {
  /* Couleurs */
  --ink: #0E0E0C;
  --ink-soft: #2B2820;
  --jaune: #F2B41A;
  --jaune-soft: rgba(242, 180, 26, .08);
  --jaune-mid: rgba(242, 180, 26, .18);
  --off-white: #FAFAF6;
  --paper: #FFFFFF;
  --line: rgba(14, 14, 12, .12);
  --line-soft: rgba(14, 14, 12, .06);
  --hover: rgba(14, 14, 12, .05);
  --muted: rgba(14, 14, 12, .55);
  --red: #B42318;
  --green: #1F8A4C;
  --orange: #E08A00;
  --blue: #2F6BFF;
  --violet: #7C3AED;

  /* Espacement : 4, 8, 12, 16, 24, 32 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Rayons : 8 pour les contrôles et les cartes imbriquées, 12 pour les surfaces, 16 pour les fenêtres, 999 pour les pastilles */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* Typo */
  --f-serif: 'Cardo', serif;
  --f-sans: 'Inter Tight', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --fs-label-sm: 10.5px; --fs-label: 11px; --fs-label-lg: 11.5px; --ls-label: .08em; /* labels JetBrains Mono, en capitales */
  --fs-body-sm: 13px; --fs-body: 14px; --fs-body-lg: 15px;                          /* corps Inter Tight */
  --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px;                                        /* titres Cardo */
  --fs-num: 34px;                                                                      /* un grand chiffre dans une tuile */

  /* Ombres */
  --sh-1: 0 1px 2px rgba(14, 14, 12, .05);
  --sh-2: 0 2px 10px rgba(14, 14, 12, .08);
  --sh-3: 0 14px 40px rgba(14, 14, 12, .16);
  --sh-4: 0 24px 70px rgba(14, 14, 12, .28);

  /* Focus : un anneau jaune, le même partout */
  --focus: 0 0 0 3px rgba(242, 180, 26, .35);

  /* Gabarit : largeur de page, gouttière, barre du haut, rail, colonne du Kanban */
  --page-max: 1440px;
  --gutter: 28px;
  --topbar-h: 56px;
  --rail: 216px;
  --col-w: 288px;
  --col-bg: #F3F3EF; /* off-white teinté de 3 % d'encre, opaque pour l'en-tête collant des colonnes */
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

/* ---------- Base ---------- */
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }

/* ---------- En-tête de vue : titre à gauche, méta à côté, actions à droite. Même composant pour toutes les vues. ---------- */
.vh, .t-head, .crm-head, .okr-head, .tab > .subnav {
  display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap;
  min-height: 40px; margin: 0 0 var(--sp-5);
}
.vh h1, .t-head h1, .crm-head h1, .okr-head h1, .tab > .subnav h1, .vh-t {
  font-family: var(--f-serif); font-weight: 700; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.012em; margin: 0;
}
.vh-meta, .t-head .eyebrow { font-family: var(--f-mono); font-size: var(--fs-label-lg); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin: 0; }
.vh-acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.vh-sub { font-size: var(--fs-body-lg); color: var(--muted); margin: calc(-1 * var(--sp-4)) 0 var(--sp-5); max-width: 760px; line-height: 1.5; }

/* ---------- Titres de section dans une vue ---------- */
.t-h2 { font-family: var(--f-serif); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -.01em; margin: 0 0 var(--sp-3); }
.u-label { font-family: var(--f-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 var(--sp-4);
  border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--ink); color: var(--off-white);
  font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn.jaune { background: var(--jaune); border-color: var(--jaune); color: var(--ink); }
.btn.jaune:hover { background: #E6A812; border-color: #E6A812; }
.btn.ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--paper); border-color: var(--ink); }
.btn.sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-body-sm); }
.btn:disabled { opacity: .45; cursor: default; }

/* Petit bouton texte (actions secondaires d'une carte) */
.act { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink-soft); font-family: var(--f-sans); font-size: var(--fs-label-lg); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.act:hover { border-color: var(--ink); color: var(--ink); }
.act.main { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.act.main:hover { background: var(--ink-soft); }

/* Segmented control (Board / Table, P&L / Cash, Charles / Brian) */
.seg-ctl { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.seg-ctl button { height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.seg-ctl button:hover { color: var(--ink); }
.seg-ctl button.on { background: var(--ink); color: var(--off-white); }

/* ---------- Pastilles, chips, badges ---------- */
.pill, .chip, .c-pill, .fd-pill, .sp-pill, .own, .f-tag, .ops-own, .fd-prio {
  font-family: var(--f-mono); font-size: var(--fs-label); line-height: 1.2; white-space: nowrap;
}
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); cursor: pointer; font-size: var(--fs-label-lg); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--jaune); border-color: var(--jaune); color: var(--ink); }
.tb { font: 700 10px var(--f-mono); background: var(--jaune); color: var(--ink); border-radius: var(--r-pill); min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.tb[hidden] { display: none; }
/* Rond d'owner : C bleu, B violet, les deux coupés */
.who-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 10px var(--f-mono); color: #fff; background: rgba(14, 14, 12, .3); flex: none; }
.who-dot.c { background: var(--blue); }
.who-dot.b { background: var(--violet); }
.who-dot.cb { background: linear-gradient(135deg, var(--blue) 50%, var(--violet) 50%); }

/* ---------- Surfaces ---------- */
.surface { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }

/* ---------- Tableaux : un seul en-tête ---------- */
th {
  font-family: var(--f-mono); text-align: left; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--muted); padding: 10px var(--sp-3) 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
th.n { text-align: right; }

/* ---------- Toolbar d'une vue : bouton d'action, recherche, filtres, compteur ---------- */
.toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar input[type=search] {
  font-family: var(--f-sans); font-size: var(--fs-body); height: 36px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); width: 260px; outline: none;
}
.toolbar input[type=search]:focus { border-color: var(--jaune); box-shadow: var(--focus); }
.toolbar label { font-size: var(--fs-body); color: var(--ink-soft); display: flex; gap: 8px; align-items: center; cursor: pointer; }
.toolbar .spacer { flex: 1; }
.toolbar .count { font-family: var(--f-mono); font-size: var(--fs-label-lg); color: var(--muted); }

/* ---------- État vide ---------- */
.empty, .ops-mute, .ops-empty, .c-empty, .w-empty, .f-none, .log-empty, .fd-none, .t-none { color: var(--muted); font-size: var(--fs-body); }
.empty { padding: var(--sp-5) 0; }

/* ---------- Champs : le même focus partout ---------- */
.modal input:focus, .modal select:focus, .modal textarea:focus, .cap-global input:focus, .w-add input:focus, .gate input:focus, .dr-in:focus, .fd-when input:focus, .t-links input:focus, .todo-pop input:focus {
  outline: none; border-color: var(--jaune); box-shadow: var(--focus);
}

/* ---------- Toasts : un seul style, en bas au centre ---------- */
.toast-pill { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--off-white); font: 600 var(--fs-body-sm) var(--f-sans); box-shadow: var(--sh-3); max-width: calc(100vw - 32px); }
.toast-pill button { padding: 0; border: 0; background: none; color: var(--jaune); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
@media (max-width: 720px) { .toast-pill { bottom: calc(96px + env(safe-area-inset-bottom)); } }