/* ══════════════════════════════════════════════════════════════════════════
   KARBON-BOX — CHARTE GRAPHIQUE macOS
   Source unique de vérité. Ne pas dupliquer : chaque module la charge via un
   lien symbolique assets/charte.css -> ../../shared/charte.css, servi depuis
   son propre domaine (aucune dépendance entre sous-domaines).

   À charger AVANT le CSS du module, qui peut ensuite surcharger.
   Contenu : tokens, base, chrome de fenêtre, navigation latérale, primitives.
   Les composants propres à un module restent dans son CSS.

   Réf. maquette : AGO-Bilans-macOS.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs ── */
  --kb-primary: #0a84ff;          /* bleu système */
  --kb-primary-dark: #0060df;     /* pressé / survol */
  --kb-primary-light: #e6f0ff;    /* fond pastel bleu */
  --kb-accent: #0a84ff;
  --kb-text: #1d1d1f;             /* gris quasi-noir */
  --kb-muted: #8a8a8e;
  --kb-muted-strong: #6a6a6e;
  --kb-faint: #a1a1a6;
  --kb-bg: #f7f7f9;
  --kb-surface: #ffffff;
  --kb-border: #e2e2e6;
  --kb-border-light: #ededf0;
  --kb-hover-row: #f5f8ff;
  --kb-danger: #d70015;
  --kb-warn: #c77700;
  --kb-ok: #1a9d54;

  /* ── Statuts (fond pastel / teinte) ── */
  --kb-st-neutral-bg: #f0f0f2;   --kb-st-neutral: #6a6a6e;
  --kb-st-info-bg:    #e6f0ff;   --kb-st-info:    #0a84ff;
  --kb-st-ok-bg:      #e5f8ee;   --kb-st-ok:      #1a9d54;
  --kb-st-warn-bg:    #fef3e2;   --kb-st-warn:    #c77700;
  --kb-st-danger-bg:  #fdeceb;   --kb-st-danger:  #d70015;

  /* ── Chrome ── */
  --kb-desktop: linear-gradient(155deg, #6a85b6 0%, #3a4a63 55%, #26324a 100%);
  --kb-sidebar: #ecedf0;
  --kb-sidebar-border: #d4d5da;
  --kb-toolbar: #fbfbfc;
  --kb-control: #e4e4e9;           /* rail des segmented controls */
  --kb-fill: rgba(0, 0, 0, 0.055); /* champs remplis */

  /* ── Typographie ──
     Police système : aucun appel réseau, rendu natif. */
  --kb-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --kb-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Rayons ── */
  --kb-radius: 10px;
  --kb-radius-sm: 7px;
  --kb-radius-xs: 6px;

  /* ── Ombres : hairline + diffusion douce ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-window: 0 40px 90px -20px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

/* ── Alias hérités ──────────────────────────────────────────────────────────
   Les modules antérieurs à la charte (AGO, Banque) utilisent encore ces noms
   dans leurs règles. Ils pointent sur les tokens ci-dessus : aucune valeur en
   dur ici, sinon la charte cesserait de piloter ces modules.
   À résorber au fil des réécritures — ne pas en ajouter de nouveaux.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --indigo-50:  var(--kb-bg);
  --indigo-200: var(--kb-border);
  --indigo-400: var(--kb-faint);
  --indigo-600: var(--kb-primary);
  --indigo-700: var(--kb-primary-dark);
  --violet-500: var(--kb-primary);
  --violet-600: var(--kb-primary-dark);

  --wiki-primary:      var(--kb-primary);
  --wiki-primary-dark: var(--kb-primary-dark);
  --wiki-link:         var(--kb-primary);
  --wiki-link-hover:   var(--kb-primary-dark);
  --wiki-text:         var(--kb-text);
  --wiki-text-muted:   var(--kb-muted-strong);
  --wiki-text-faded:   var(--kb-muted);

  --wiki-bg:           var(--kb-surface);
  --wiki-bg-alt:       var(--kb-bg);
  --wiki-bg-faint:     var(--kb-toolbar);

  --wiki-border:       var(--kb-border);
  --wiki-border-light: var(--kb-border-light);
  --wiki-border-faint: var(--kb-st-neutral-bg);
  --wiki-hover-row:    var(--kb-hover-row);

  --wiki-thead:        var(--kb-bg);          /* en-tête clair façon Finder */
  --wiki-thead-border: var(--kb-border);
  --wiki-thead-sub:    var(--kb-st-neutral-bg);

  --wiki-status-red:    var(--kb-danger);
  --wiki-status-orange: var(--kb-warn);
  --wiki-status-yellow: var(--kb-warn);
  --wiki-status-green:  var(--kb-ok);
  --wiki-status-blue:   var(--kb-primary);
  --wiki-status-gray:   var(--kb-muted);
}

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--kb-font);
  background: var(--kb-desktop);
  background-attachment: fixed;
  color: var(--kb-text);
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--kb-primary); text-decoration: none; }
a:hover { color: var(--kb-primary-dark); text-decoration: none; }

/* Chiffres alignés : indispensable dès qu'on empile des montants. */
.mono, .kb-lm-code, .kb-lm-kpi-value, .kpi-total, .num {
  font-family: var(--kb-mono); font-variant-numeric: tabular-nums;
}

/* ── Fenêtre applicative : l'app flotte sur le bureau dégradé ── */
.kb-window {
  max-width: 1440px; margin: 18px auto;
  background: var(--kb-surface);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-window);
  display: flex; flex-direction: column;
  min-height: calc(100vh - 36px);
}

/* ── Navigation latérale ── */
.kb-body { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.kb-body > main { flex: 1; min-width: 0; }
.kb-sidebar {
  width: 210px; flex: 0 0 210px;
  background: var(--kb-sidebar);
  border-right: 0.5px solid var(--kb-sidebar-border);
  padding: 12px;
  overflow-y: auto;
}
.kb-sidebar-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--kb-muted);
  padding: 4px 8px 6px;
}
.kb-nav-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 8px; margin: 1px 0;
  border: none; border-radius: var(--kb-radius-sm);
  cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  background: transparent; color: #2a2a2c;
  text-align: left; transition: background 0.12s;
}
.kb-nav-item:hover { background: rgba(0, 0, 0, 0.05); }
.kb-nav-item.active { background: var(--kb-primary); color: #fff; }
.kb-nav-item.active:hover { background: var(--kb-primary-dark); }
.kb-nav-ico { font-size: 14px; line-height: 1; flex: 0 0 auto; }

/* ── Primitives ── */
/* Badge pilule : pastel + point coloré optionnel. */
.kb-lm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: 20px;
  text-transform: none; letter-spacing: 0;
  white-space: nowrap;
}
.kb-lm-badge .kb-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.kb-lm-code { font-size: 11.5px; color: var(--kb-muted); font-weight: 500; }

/* ── Responsive : sous 900px, la fenêtre occupe l'écran et la nav passe en
      barre horizontale défilante. ── */
@media (max-width: 900px) {
  .kb-window { margin: 0; border-radius: 0; min-height: 100vh; }
  .kb-body { flex-direction: column; }
  .kb-sidebar {
    width: auto; flex: 0 0 auto;
    border-right: none; border-bottom: 0.5px solid var(--kb-sidebar-border);
    display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px;
  }
  .kb-sidebar-label { display: none; }
  .kb-nav-item { width: auto; white-space: nowrap; margin: 0; }
}

/* ── Compteurs de statut (bandeau) ──────────────────────────────────────────
   La FORME est commune ; la couleur reste au module : la sémantique d'une même
   classe diffère (chez AGO « opened » = AGO générée, chez Banque = relance
   ouverte). Chaque module mappe ses classes sur les tokens --kb-st-*.
   ────────────────────────────────────────────────────────────────────────── */
.status-count { display: flex; gap: 5px; }
.status-count > div {
  min-width: 42px; height: 24px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 600; font-size: 11.5px;
  border-radius: 20px; cursor: pointer;
  padding: 0 10px;
  border: none; text-shadow: none; box-shadow: none;
  transition: filter 0.15s;
}
.status-count > div::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}
.status-count > div:hover { filter: brightness(0.97); }
.status-count > div.active { box-shadow: 0 0 0 2px currentColor inset; font-weight: 700; }

/* Marque du cabinet (shared/charte.js) : un logotype est large, pas carré —
   la boîte passe de carré à rectangle quand un logo remplace les initiales. */
.logo-img.has-logo {
  width: auto; min-width: 34px; max-width: 150px;
  background: #fff; padding: 3px 6px;
  border-radius: var(--kb-radius-xs);
}