/* ============================================
   COMPTABILITÉ — habillage éditorial (joy palette)
   Restyle la page renderAccountingDashboard sans toucher à la logique.
   Scopé sous .compta-page pour ne pas affecter les autres modules.
   Règle d'or : zéro hex — tout vient de var(--*) / var(--joy-*).
   Réf : handoff/COMPTABILITE.md
   ============================================ */

.compta-page { position: relative; }
.compta-page .section-header { margin-bottom: var(--space-6); }
.compta-page .section-header .ed-eyebrow { margin-bottom: 6px; }

/* ─── KPI cards ─────────────────────────────────────────── */
.compta-page .accounting-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  grid-template-columns: none; /* override l'ancien grid */
}
.acc-kpi {
  --ji: var(--joy-gold-ink);
  --jt: var(--joy-gold-tint);
  flex: 1 1 220px;
  min-width: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.acc-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ji) 44%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 9%, transparent);
}
.acc-kpi--sky     { --ji: var(--joy-sky-ink);     --jt: var(--joy-sky-tint); }
.acc-kpi--apricot { --ji: var(--joy-apricot-ink); --jt: var(--joy-apricot-tint); }
.acc-kpi--rose    { --ji: var(--joy-rose-ink);    --jt: var(--joy-rose-tint); }
.acc-kpi--sage    { --ji: var(--joy-sage-ink);    --jt: var(--joy-sage-tint); }
.acc-kpi--plum    { --ji: var(--joy-plum-ink);    --jt: var(--joy-plum-tint); }
.acc-kpi--gold    { --ji: var(--joy-gold-ink);    --jt: var(--joy-gold-tint); }

.acc-kpi-top { display: flex; align-items: center; gap: 11px; }
.acc-kpi-glyph {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--jt);
  border: 1px solid color-mix(in srgb, var(--ji) 30%, transparent);
  color: var(--ji);
  display: inline-flex; align-items: center; justify-content: center;
}
.acc-kpi-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.acc-kpi-value {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "lnum","onum";
}
.acc-kpi.is-accent .acc-kpi-value { color: var(--ji); }
.acc-kpi-sub {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Blocs (cards) éditoriaux ──────────────────────────── */
.compta-block { position: relative; overflow: hidden; }
.compta-block .card-header {
  align-items: baseline;
  border-bottom: none;
  position: relative;
  z-index: 1;
}
.compta-page .compta-block-title {
  font-size: 1.5625rem !important; /* 25px — bat .card-header h3 (specificité) */
  line-height: 1.1;
}
.compta-block .card-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 48px; height: 1px;
  background: var(--accent);
}
.compta-block-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.compta-block-meta em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--accent);
}
.compta-block .card-body { padding-top: var(--space-5); }
.compta-block-sprig {
  position: absolute;
  top: -6px; right: -2px;
  pointer-events: none;
  z-index: 0;
}

/* ─── Encart d'aide (pré-saisie) → sage ─────────────────── */
.compta-page .expense-regime-banner {
  background: color-mix(in srgb, var(--joy-sage-tint) 70%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--joy-sage-ink) 33%, transparent);
  border-radius: 8px;
  color: var(--ink-soft);
}
.compta-page .expense-regime-banner strong { color: var(--ink); }

/* ─── Sous-titres de section ────────────────────────────── */
.compta-page .expense-subhead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}

/* ─── Tableaux & badges ─────────────────────────────────── */
.compta-page .expense-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink-soft);
}
.compta-amount-neg { color: var(--joy-rose-ink); }
.compta-amount-pos { color: var(--joy-sage-ink); }
.compta-amount-warn { color: var(--joy-apricot-ink); }
.compta-del-btn { color: var(--joy-rose-ink); }
.compta-row-overdue { background: color-mix(in srgb, var(--joy-rose-tint) 38%, transparent); }

/* ─── Histogramme CA ────────────────────────────────────── */
.compta-page .revenue-bar-col { gap: 10px; }
.compta-page .revenue-bar-amount {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
}
.compta-page .revenue-bar {
  background: linear-gradient(180deg, var(--joy-gold-ink) 0%,
              color-mix(in srgb, var(--joy-gold-ink) 80%, transparent) 100%);
  border-radius: 7px 7px 3px 3px;
}
.compta-page .revenue-bar--peak {
  background: linear-gradient(180deg, var(--joy-apricot-ink) 0%,
              color-mix(in srgb, var(--joy-apricot-ink) 80%, transparent) 100%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--joy-apricot-ink) 32%, transparent);
}
.compta-page .revenue-bar-label {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ─── Listes de documents (devis / factures) ────────────── */
.compta-page .accounting-doc-item {
  border-radius: 8px;
  transition: background .16s ease;
}

/* ─── Bloc franchise — tokenisation (zéro hex) ──────────── */
.compta-page .franchise-network { color: var(--muted); }
.compta-page .franchise-kpi-royalty {
  border-color: color-mix(in srgb, var(--joy-gold-ink) 40%, transparent);
  background: color-mix(in srgb, var(--joy-gold-ink) 6%, var(--surface));
}
.compta-page .franchise-kpi-royalty .franchise-kpi-num { color: var(--joy-gold-ink); }
.compta-page .franchise-kpi-tva .franchise-kpi-num { color: var(--joy-rose-ink); }
.compta-page .franchise-kpi-net .franchise-kpi-num { color: var(--joy-sage-ink); }
.compta-page .franchise-detail summary:hover { color: var(--ink); }
.compta-page .franchise-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 720px) {
  .acc-kpi { flex: 1 1 100%; }
}