/* ============================================================
   CHARTE VITRUVIAN — couche d'habillage du CRM (charte-vitruvian v1)
   Chargée APRÈS style.css et les styles propres à chaque page : elle ne remplace rien dans les
   gabarits, elle les repeint. Pour la désactiver : retirer la ligne <link … charte-vitruvian.css>
   de templates/layout.html.

   Palette (skill presentation-vitruvian) : encre / pierre / trace / sanguine / cond / vert.
   La couleur code un statut réel, jamais une emphase :
     pierre   = fait, réalisé, en cours d'encaissement   (traits pleins)
     trace    = prévu, projeté, négocié                  (traits pointillés)
     vert     = validé, encaissé, gagné
     sanguine = urgent, retard, à trancher, suppression
     cond     = neutre, différé, clos
   Un statut n'est jamais codé par la couleur seule : forme du trait (plein, pointillé, barré) ou libellé.
   Polices : Archivo (texte), Archivo Narrow (titres et libellés en capitales).
   ============================================================ */

/* Espace fine insécable des milliers (U+202F) : trop serrée avec Archivo, elle est redessinée un peu plus large (0,28 em) par une police qui ne contient que ce caractère */
@font-face { font-family: 'EspaceFine'; unicode-range: U+202F; size-adjust: 140%; src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans'); }
@font-face { font-family: 'Archivo'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/polices/archivo-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/polices/archivo-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/polices/archivo-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/polices/archivo-narrow-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/polices/archivo-narrow-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo Narrow'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/polices/archivo-narrow-700.woff2') format('woff2'); }

/* ── Jetons : thème clair (charte) ───────────────────────── */
:root {
  --encre: #16242f;   --encre2: #465b6d;
  --papier: #f4f6f7;  --calque: #e9edf0;  --bande: #e2e7ea;
  --pierre: #a4762f;  --pierre-f: rgba(164,118,47,.13);  --pierre-t: #6d4f26;
  --trace: #3d719e;   --trace-f: rgba(61,113,158,.10);
  --sanguine: #8F0E00; --sanguine-f: rgba(143,14,0,.07);
  --cond: #8593a0;    --cond-f: rgba(133,147,160,.16);
  --vert: #3d7a55;    --vert-f: rgba(61,122,85,.12);
  --vert-t: #2f6a47;  --trace-t: #2f5f8a;      /* variantes pour le TEXTE (contraste ≥ 4,5 sur papier, bande et fonds teintés) ; les traits et aplats gardent vert / trace */
  --grille: rgba(22,36,47,.06);
  --trait: rgba(22,36,47,.18);
  --trait-fort: rgba(22,36,47,.42);
  --ligne: #16242f;                       /* traits structurants (cartouche, barre latérale, en-têtes de tableaux) */
  --sur-encre: #f4f6f7;                   /* texte posé sur un aplat d'encre */
  --f-titre: 'EspaceFine', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --f-corps: 'EspaceFine', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* variables historiques du CRM, rebranchées sur la charte */
  --bg: var(--calque);
  --surface: var(--papier);
  --surface-sub: var(--bande);
  --border: var(--trait);
  --border-strong: var(--trait-fort);
  --text: var(--encre);
  --text-sec: var(--encre2);
  --text-muted: #546677;
  --accent: var(--encre);
  --accent-light: var(--bande);
  --accent-dim: var(--trait-fort);
  --green: var(--vert-t); --green-bg: var(--vert-f);   --green-mid: var(--vert);
  --red: var(--sanguine); --red-bg: var(--sanguine-f);
  --amber: var(--pierre-t); --amber-bg: var(--pierre-f);
  --blue: var(--trace-t); --blue-bg: var(--trace-f);
  --radius: 2px;
  --radius-lg: 2px;

  /* graphiques (lus par index.html) */
  --chart-mois-exec: var(--pierre);
  --chart-mois-enc: var(--vert);
  --chart-client: var(--encre2);
  --chart-type: var(--cond);
  --chart-grille: var(--trait);
  --chart-axe: var(--encre2);
  --chart-valeur: var(--encre);
  --chart-ligne: var(--encre);
  --chart-ligne-fond: rgba(22,36,47,.08);
  --chart-aujourdhui: var(--sanguine);
  --chart-etape-1: #bcc6ce; --chart-etape-2: #8593a0; --chart-etape-3: #9bbbd6; --chart-etape-4: #3d719e;
  --chart-etape-5: #3d7a55; --chart-etape-6: #465b6d; --chart-etape-7: #cfd5da; --chart-etape-8: #a4762f;
  /* synthèse et trésorerie : réalisé = pierre, encaissé/excédent = vert, total = encre2 (le prévisionnel se distingue par le pointillé, pas par la couleur) */
  --chart-ca: var(--pierre);      --chart-ca-fond: rgba(164,118,47,.30);
  --chart-courant: var(--pierre); --chart-courant-fond: rgba(164,118,47,.10);
  --chart-excedent: var(--vert);  --chart-excedent-fond: rgba(61,122,85,.10);
  --chart-total: var(--encre2);   --chart-total-fond: rgba(70,91,109,.07);
  --legende-texte: var(--encre2);        /* texte des légendes en HTML (le carré garde la couleur de la courbe) */

  /* variables lues par certaines pages avec une valeur de repli blanche (fenêtres de relevés / justificatifs, survol des fiches) */
  --card: var(--papier);
  --bg-card: var(--papier);
  --bg-hover: var(--trace-f);
}

/* ── Jetons : thème sombre (déclinaison de la charte, mêmes teintes éclaircies) ── */
:root[data-theme="dark"], [data-theme="dark"] {
  --encre: #e7ebee;   --encre2: #a9b7c4;
  --papier: #16242f;  --calque: #0f1a22;  --bande: #1d2e3b;
  --pierre: #d3a15c;  --pierre-f: rgba(211,161,92,.15);  --pierre-t: #e3b97a;
  --trace: #7fb0dd;   --trace-f: rgba(127,176,221,.13);
  --sanguine: #ee7762; --sanguine-f: rgba(238,119,98,.15);
  --cond: #8f9ba7;    --cond-f: rgba(143,155,167,.18);
  --vert: #6fb98c;    --vert-f: rgba(111,185,140,.15);
  --vert-t: #6fb98c;  --trace-t: #7fb0dd;
  --grille: rgba(231,235,238,.045);
  --trait: rgba(231,235,238,.16);
  --trait-fort: rgba(231,235,238,.38);
  --ligne: rgba(231,235,238,.5);
  --sur-encre: #0f1a22;
  --text-muted: #97a5b2;

  --chart-ligne-fond: rgba(231,235,238,.10);
  --chart-etape-1: #5a6b79; --chart-etape-2: #8f9ba7; --chart-etape-3: #4c7aa1; --chart-etape-4: #7fb0dd;
  --chart-etape-5: #6fb98c; --chart-etape-6: #a9b7c4; --chart-etape-7: #3b4c59; --chart-etape-8: #d3a15c;
  --chart-ca-fond: rgba(211,161,92,.38);
  --chart-courant-fond: rgba(211,161,92,.12);
  --chart-excedent-fond: rgba(111,185,140,.12);
  --chart-total-fond: rgba(169,183,196,.08);
}

/* ── Base : papier, grille, Archivo ──────────────────────── */
body {
  font-family: var(--f-corps);
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.page-content {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  background-attachment: local;
}
:focus-visible { outline: 2px solid var(--trace); outline-offset: 2px; }
::selection { background: var(--trace-f); }
.page-content a:not(.btn):not(.btn-small):not(.btn-secondary):not(.btn-edit-link):not(.mois-btn):not(.nav-btn):not(.zoom-btn):not(.cmd-item):not(.badge) { text-decoration-color: var(--trait-fort); }

/* ── Barre latérale ─────────────────────────────────────── */
.sidebar { background: var(--papier); border-right: 2px solid var(--ligne); }
.sidebar-logo, .sidebar-logo-fallback { border-radius: 0; }
.sidebar-logo-fallback { background: var(--encre); color: var(--sur-encre); font-family: var(--f-titre); font-weight: 700; letter-spacing: .06em; }
.nav-icon { color: var(--encre2); border-radius: 0; }
.nav-icon:hover { background: var(--bande); color: var(--encre); }
.nav-icon.active { background: var(--encre); color: var(--sur-encre); }
.nav-icon.active::before { display: none; }
.nav-avatar { background: var(--bande); color: var(--encre); border: 1px solid var(--trait-fort); border-radius: 0; font-family: var(--f-titre); font-weight: 700; }
.nav-avatar-ro { background: var(--bande); color: var(--encre2); }

/* ── Barre du haut ──────────────────────────────────────── */
.topbar { background: var(--papier); border-bottom: 2px solid var(--ligne); }
.topbar-breadcrumb { font-family: var(--f-titre); font-weight: 700; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--encre); }
.topbar-breadcrumb i { color: var(--encre2); }
.topbar-readonly, .badge-readonly { border-radius: 0; font-family: var(--f-titre); text-transform: uppercase; letter-spacing: .06em; background: var(--pierre-f); color: var(--pierre-t); border: 1px solid var(--pierre); }
.period-selector { border-radius: 0; border-color: var(--trait-fort); }
.period-selector a, .period-selector span { background: var(--papier); color: var(--encre2); font-family: var(--f-titre); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.period-selector a.active, .period-selector span.active { background: var(--encre); color: var(--sur-encre); }
.cmd-trigger { background: var(--papier); border-color: var(--trait-fort); border-radius: 0; color: var(--encre2); }
.cmd-trigger kbd, .cmd-keys kbd, .cmd-footer kbd { border-radius: 0; background: var(--bande); border-color: var(--trait); color: var(--encre2); }
.readonly-banner { background: var(--pierre-f); border-bottom: 1px solid var(--pierre); color: var(--pierre-t); }

/* ── Titres : registre « plan technique » ───────────────── */
h1, .page-title { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; color: var(--encre); }
.page-title { font-size: 1.45rem; padding-bottom: 6px; border-bottom: 2px solid var(--ligne); margin-bottom: 6px; }
.page-sub { color: var(--encre2); }
h2 { font-family: var(--f-titre); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre2); }
.block-header h2, .chart-card h2 { font-family: var(--f-titre); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre); }
.block-header .sub { font-family: var(--f-corps); text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* ── Cartes, blocs, indicateurs ─────────────────────────── */
.block, .chart-card, .kpi-card, .kpi-mini, .synth-card, .explorer-wrap { background: var(--papier); border: 1px solid var(--trait); border-radius: 0; }
.block-header { background: var(--bande); border-bottom: 1px solid var(--trait); }
.block-total { color: var(--encre); font-family: var(--f-titre); }
.note, .solde-depart, .cca-note, .add-form { background: var(--bande); border-color: var(--trait); }
.add-bar { border-color: var(--trait); }
.kpi-card { border-top: 3px solid var(--kpi-color, var(--trait-fort)); }
.kpi-card.accent { --kpi-color: var(--encre); }
.kpi-card.info { --kpi-color: var(--trace); }
.kpi-card.good { --kpi-color: var(--vert); }
.kpi-card.warn { --kpi-color: var(--pierre); }
.kpi-card.bad { --kpi-color: var(--sanguine); }
/* indicateurs de la synthèse (.kpi-mini) : le trait coloré du haut porte le statut (vert = bon, pierre = à surveiller, sanguine = critique, trace = information) ; il est rétabli ici car la règle commune des cartes le remettait à zéro */
.kpi-mini { border-top: 3px solid var(--kpi-color, var(--trait-fort)); }
.kpi-mini.accent { --kpi-color: var(--encre); } .kpi-mini.info { --kpi-color: var(--trace); } .kpi-mini.good { --kpi-color: var(--vert); }
.kpi-mini.warn { --kpi-color: var(--pierre); } .kpi-mini.bad { --kpi-color: var(--sanguine); }
.kpi-mini .km-label { font-family: var(--f-titre); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; }
.kpi-mini .km-value { font-weight: 600; font-variant-numeric: tabular-nums; }
/* trésorerie : le trait de chaque carte reprend la couleur de sa courbe (courant = pierre, excédent = vert, total = encre2) */
.kpi-card.kpi-courant { --kpi-color: var(--chart-courant); } .kpi-card.kpi-excedent { --kpi-color: var(--chart-excedent); } .kpi-card.kpi-total { --kpi-color: var(--chart-total); }
.kpi-label, .synth-card .label { font-family: var(--f-titre); font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.kpi-value, .synth-card .value { font-family: var(--f-corps); font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--vert-t); } .kpi-delta.warn { color: var(--pierre-t); } .kpi-delta.bad { color: var(--sanguine); }
.synth-total { background: var(--bande); border-color: var(--trait-fort); }
.synth-total .value { color: var(--encre); }

/* ── Alertes : barre latérale épaisse (couleur) + fond teinté + libellé ── */
.alert-item { border-radius: 0; border: 1px solid var(--trait); border-left-width: 4px; color: var(--encre); }
.alert-item.warn { background: var(--pierre-f); border-color: var(--pierre); }
.alert-item.danger { background: var(--sanguine-f); border-color: var(--sanguine); }
.alert-item.info { background: var(--trace-f); border-color: var(--trace); border-left-style: dashed; }
.alert-item.success { background: var(--vert-f); border-color: var(--vert); }
.alert-item.warn i { color: var(--pierre-t); } .alert-item.danger i { color: var(--sanguine); } .alert-item.info i { color: var(--trace); } .alert-item.success i { color: var(--vert); }
.alert-block-header { font-family: var(--f-titre); letter-spacing: .12em; color: var(--encre2); }

/* ── Pastilles d'état ───────────────────────────────────── */
.badge { border-radius: 0; font-family: var(--f-titre); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; padding: 1px 7px; border: 1px solid var(--trait); background: transparent; color: var(--encre2); }
.badge-cloture, .badge-sociale, .badge-reel { background: var(--vert-f); border-color: var(--vert); color: var(--vert-t); }
.badge-cours { background: var(--pierre-f); border-color: var(--pierre); color: var(--pierre-t); }
.badge-autre, .badge-fournisseur, .badge-prev { background: var(--trace-f); border: 1px dashed var(--trace); color: var(--trace-t); }
.badge-perdu { background: transparent; border-color: var(--trait); color: var(--text-muted); text-decoration: line-through; }
.badge-calcule { background: var(--cond-f); border-color: var(--trait); color: var(--text-muted); }
/* étapes de projet : prévu = pointillé, en cours = plein, clos = estompé, perdu = barré */
.badge-e1 { background: transparent; border: 1px dashed var(--cond); color: var(--encre2); font-weight: 500; }
.badge-e2 { background: var(--cond-f); border: 1px solid var(--cond); color: var(--encre2); }
.badge-e3 { background: var(--trace-f); border: 1px dashed var(--trace); color: var(--trace-t); }
.badge-e4 { background: var(--trace-f); border: 1px solid var(--trace); color: var(--trace-t); font-weight: 700; }
.badge-e5 { background: var(--vert); border: 1px solid var(--vert); color: var(--sur-encre); font-weight: 700; }
.badge-e6 { background: var(--cond-f); border: 1px solid transparent; color: var(--text-muted); font-weight: 500; }
.badge-e7 { background: transparent; border: 1px dashed var(--cond); color: var(--text-muted); font-weight: 500; text-decoration: line-through; }
.badge-e8 { background: var(--pierre-f); border: 1px solid var(--pierre); color: var(--pierre-t); font-weight: 700; }
:root[data-theme="dark"] .badge-e1 { color: var(--encre2); } :root[data-theme="dark"] .badge-e2 { color: var(--encre2); }
:root[data-theme="dark"] .badge-e3 { color: var(--trace-t); } :root[data-theme="dark"] .badge-e4 { color: var(--trace-t); }
:root[data-theme="dark"] .badge-e5 { background: var(--vert); color: var(--sur-encre); }
:root[data-theme="dark"] .badge-e6 { color: var(--text-muted); } :root[data-theme="dark"] .badge-e7 { color: var(--text-muted); }
:root[data-theme="dark"] .badge-e8 { color: var(--pierre-t); }

/* ── Jauges ─────────────────────────────────────────────── */
.gauge-outer, [data-theme="dark"] .gauge-outer, .conc-bar-wrap, [data-theme="dark"] .conc-bar-wrap { background: var(--bande); border-radius: 0; border: 1px solid var(--trait); height: 7px; }
.gauge-fill, [data-theme="dark"] .gauge-fill { background: var(--encre2); border-radius: 0; }
.gauge-fill.warn, [data-theme="dark"] .gauge-fill.warn { background: var(--pierre); }
.gauge-fill.good, [data-theme="dark"] .gauge-fill.good { background: var(--vert); }
.conc-bar-fill, [data-theme="dark"] .conc-bar-fill { background: var(--encre2); }
.conc-bar-fill.second, [data-theme="dark"] .conc-bar-fill.second { background: var(--pierre); }
.gauge-pct { font-variant-numeric: tabular-nums; }

/* ── Tableaux ───────────────────────────────────────────── */
table, [data-theme="dark"] table { background: var(--papier); }
th, [data-theme="dark"] th { background: var(--bande); color: var(--encre2); font-family: var(--f-titre); font-weight: 700; font-size: .7rem; letter-spacing: .09em; border-bottom: 2px solid var(--ligne); border-color: var(--ligne); }
td, [data-theme="dark"] td { border-color: var(--trait); color: var(--text); }
tr:hover td, [data-theme="dark"] tr:hover td { background: var(--trace-f); }
td a, .actions a, .actions button { color: var(--trace-t); }
.actions button.del { color: var(--sanguine); }
.crm-table th { border-bottom: 2px solid var(--ligne); }
.th-label, .kpi-section-title { font-family: var(--f-titre); letter-spacing: .09em; color: var(--encre2); }
.chat-table th, [data-theme="dark"] .kpi-section-title { border-color: var(--trait); }

/* ── Boutons : encre = action ; sanguine = suppression ──── */
.btn, .btn-small, .chat-send { background: var(--encre); color: var(--sur-encre); border: 1px solid var(--encre); border-radius: 0; font-family: var(--f-titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.btn { font-size: .74rem; padding: 9px 16px; } .btn-small { font-size: .7rem; padding: 5px 10px; }
.btn:hover, .btn-small:hover, .chat-send:hover { opacity: 1; background: var(--encre2); border-color: var(--encre2); }
.btn-secondary { background: transparent; color: var(--encre); border: 1px solid var(--encre); border-radius: 0; font-family: var(--f-titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; }
.btn-secondary:hover { background: var(--bande); }
.btn-edit, .btn-edit-link { background: var(--encre2); border-color: var(--encre2); color: var(--sur-encre); border-radius: 0; }
.btn-danger, .btn-delete, .btn-danger-small { background: var(--sanguine); border-color: var(--sanguine); color: var(--sur-encre); }
:root[data-theme="dark"] .btn-danger, :root[data-theme="dark"] .btn-delete, :root[data-theme="dark"] .btn-danger-small { color: #0f1a22; }
.crm-reset { color: var(--trace-t); }
/* Actions secondaires de la barre de filtres du CRM (Effacer tous les filtres / Vue à plat / Tout déplier) : boutons au trait, comme .btn-secondary mais plus petits ; à l'origine de simples liens soulignés */
.crm-filter-bar .crm-reset { background: transparent; color: var(--encre); border: 1px solid var(--encre); border-radius: 0; padding: 5px 10px; margin-left: 0 !important; font-family: var(--f-titre); font-weight: 700; font-size: .7rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.crm-filter-bar .crm-reset:hover { background: var(--bande); }
.mois-btn, .nav-btn, .zoom-btn { border-radius: 0; font-family: var(--f-titre); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 11.5px; background: var(--papier); border-color: var(--trait-fort); color: var(--encre2); }
.mois-btn:hover, .nav-btn:hover, .zoom-btn:hover { border-color: var(--encre); color: var(--encre); }
.mois-btn.active, .nav-btn.active, .zoom-btn.active { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }

/* ── Formulaires ────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="search"], select, textarea,
.inline-form input, .inline-form select, .chat-input, .crm-search {
  border: 1px solid var(--trait-fort); border-radius: 0; background: var(--papier); color: var(--encre); font-family: var(--f-corps);
}
input:focus, select:focus, textarea:focus, .chat-input:focus, .crm-search:focus { outline: 2px solid var(--trace); outline-offset: 0; border-color: var(--trace); }
.inline-form label { font-family: var(--f-titre); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: .66rem; color: var(--text-muted); }
.th-filter input:not(:placeholder-shown), .th-filter select:not([value=""]):not(:invalid) { border-color: var(--trace); background: var(--trace-f); }
[data-theme="dark"] .th-filter input, [data-theme="dark"] .th-filter select, [data-theme="dark"] .crm-search,
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--papier) !important; color: var(--encre) !important; border-color: var(--trait-fort) !important; }
[data-theme="dark"] .th-filter input::placeholder, [data-theme="dark"] .crm-search::placeholder { color: var(--text-muted); }
.th-filter input, .th-filter select { border-radius: 0; }
.th-multiselect-btn, .th-multiselect-panel { border-radius: 0; background: var(--papier); border-color: var(--trait-fort); color: var(--encre); }
.th-multiselect-panel label:hover { background: var(--bande); }

/* ── Explorateur IA et conversation ─────────────────────── */
.explorer-toggle { font-family: var(--f-titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; }
.explorer-toggle i.spark { color: var(--trace); }
.chat-sugg, [data-theme="dark"] .chat-sugg { border-radius: 0; background: var(--bande); border-color: var(--trait); color: var(--encre2); }
.chat-sugg:hover { border-color: var(--encre); color: var(--encre); }
.chat-bubble { border-radius: 0 !important; }
.chat-msg.user .chat-bubble { background: var(--encre); color: var(--sur-encre); }
.chat-msg.assistant .chat-bubble, [data-theme="dark"] .chat-msg.assistant .chat-bubble { background: var(--bande); color: var(--encre); }
.chat-sql, [data-theme="dark"] .chat-sql { background: var(--calque); color: var(--trace-t); border: 1px solid var(--trait); border-radius: 0; }
.chat-table-wrap { border-radius: 0; }
.chat-erreur { color: var(--sanguine); }

/* ── Palette de commandes ⌘K ────────────────────────────── */
.cmd-modal, [data-theme="dark"] .cmd-modal { background: var(--papier); border: 2px solid var(--ligne); border-radius: 0; }
.cmd-search-row, .cmd-footer, [data-theme="dark"] .cmd-search-row, [data-theme="dark"] .cmd-footer { border-color: var(--trait); }
.cmd-body, [data-theme="dark"] .cmd-body { background: var(--papier); }
.cmd-item, [data-theme="dark"] .cmd-item { color: var(--encre); }
.cmd-item:hover, .cmd-item.focused, [data-theme="dark"] .cmd-item:hover, [data-theme="dark"] .cmd-item.focused { background: var(--bande); }
.cmd-group-label, [data-theme="dark"] .cmd-group-label { font-family: var(--f-titre); letter-spacing: .12em; color: var(--text-muted); }
.cmd-input, [data-theme="dark"] .cmd-input { color: var(--encre); }

/* ── Navigation mobile ──────────────────────────────────── */
.bottom-nav, [data-theme="dark"] .bottom-nav { background: var(--papier); border-top: 2px solid var(--ligne); border-color: var(--ligne); }
.bottom-nav a, .bottom-nav button, [data-theme="dark"] .bottom-nav a, [data-theme="dark"] .bottom-nav button { color: var(--encre2); }
.bottom-nav a.active, .bottom-nav button.active, [data-theme="dark"] .bottom-nav a.active, [data-theme="dark"] .bottom-nav button.active { color: var(--encre); border-top-color: var(--encre); }
.bottom-nav .bn-label { font-family: var(--f-titre); font-weight: 600; }
.nav-tresorerie, [data-theme="dark"] .nav-tresorerie { background: var(--papier); border-color: var(--trait); }

/* ── Lignes de projet, points ───────────────────────────── */
.proj-row { border-color: var(--trait); }
.ecart-row, [data-theme="dark"] .ecart-row { border-color: var(--trait); }

/* ── Sombre : neutraliser les anciennes teintes bleues du thème précédent ── */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .sidebar { background: var(--papier); border-right: 2px solid var(--ligne); }
[data-theme="dark"] .nav-icon { color: var(--encre2); }
[data-theme="dark"] .nav-icon:hover { background: var(--bande); color: var(--encre); }
[data-theme="dark"] .nav-icon.active { background: var(--encre); color: var(--sur-encre); }
[data-theme="dark"] .nav-avatar { background: var(--bande); color: var(--encre); }
[data-theme="dark"] .sidebar-logo-fallback { background: var(--encre); color: var(--sur-encre); }
[data-theme="dark"] .topbar { background: var(--papier); border-color: var(--ligne); }
[data-theme="dark"] .cmd-trigger { background: var(--papier); border-color: var(--trait-fort); color: var(--encre2); }
[data-theme="dark"] .period-selector a, [data-theme="dark"] .period-selector span { background: var(--papier); border-color: var(--trait); color: var(--encre2); }
[data-theme="dark"] .period-selector a.active, [data-theme="dark"] .period-selector span.active { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
[data-theme="dark"] .topbar-breadcrumb { color: var(--encre); }
[data-theme="dark"] .block, [data-theme="dark"] .explorer-wrap { background: var(--papier); border-color: var(--trait); }
[data-theme="dark"] .kpi-card, [data-theme="dark"] .kpi-mini { background: var(--papier); border-color: var(--trait); border-top-color: var(--kpi-color, var(--trait-fort)); }   /* le trait du haut porte le statut : il reste coloré en sombre */
[data-theme="dark"] .block-header { background: var(--bande); border-color: var(--trait); }
[data-theme="dark"] .block-header h2, [data-theme="dark"] .kpi-value, [data-theme="dark"] .km-value { color: var(--encre); }
[data-theme="dark"] .alert-item.warn { background: var(--pierre-f); color: var(--encre); border-color: var(--pierre); }
[data-theme="dark"] .alert-item.danger { background: var(--sanguine-f); color: var(--encre); border-color: var(--sanguine); }
[data-theme="dark"] .alert-item.info { background: var(--trace-f); color: var(--encre); border-color: var(--trace); }
[data-theme="dark"] .alert-item.success { background: var(--vert-f); color: var(--encre); border-color: var(--vert); }
[data-theme="dark"] .readonly-banner { background: var(--pierre-f); color: var(--pierre-t); border-color: var(--pierre); }
[data-theme="dark"] .mois-btn, [data-theme="dark"] .nav-btn, [data-theme="dark"] .zoom-btn { background: var(--papier); border-color: var(--trait-fort); color: var(--encre2); }
[data-theme="dark"] .mois-btn.active, [data-theme="dark"] .nav-btn.active, [data-theme="dark"] .zoom-btn.active { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }
[data-theme="dark"] .nav-btn:hover { border-color: var(--encre); color: var(--encre); }
[data-theme="dark"] .add-bar, [data-theme="dark"] .add-form, [data-theme="dark"] .note, [data-theme="dark"] .solde-depart, [data-theme="dark"] .cca-note { background: var(--bande); border-color: var(--trait); color: var(--encre2); }
[data-theme="dark"] .add-bar { background: transparent; }

/* ── Bilan comptable : bandes beiges et pastilles d'état ─── */
.bilan-table th, .bilan-table .section-header td, .cr-table .cr-header td { background: var(--bande); color: var(--encre2); font-family: var(--f-titre); letter-spacing: .09em; border-color: var(--ligne); }
.bilan-table td, .cr-table td { border-bottom-color: var(--trait); }
.bilan-table .sous-total td, .cr-table .cr-sous-total td { background: var(--calque); border-color: var(--trait-fort); }
.bilan-table .grand-total td { background: var(--bande); border-top: 2px solid var(--ligne); color: var(--encre); }
.bilan-table .manuel { color: var(--trace-t); }
.dot-manuel { background: var(--trace); }
.cr-table .cr-positif td { background: var(--vert-f); color: var(--vert-t); }
.cr-table .cr-negatif td { background: var(--sanguine-f); color: var(--sanguine); }
.equilibre-badge, .valide-badge, .brouillon-badge { border-radius: 0; border: 1px solid currentColor; font-family: var(--f-titre); letter-spacing: .04em; }
.equilibre-badge.ok, .valide-badge { background: var(--vert-f); color: var(--vert-t); }
.equilibre-badge.nok { background: var(--sanguine-f); color: var(--sanguine); }
.brouillon-badge { background: var(--pierre-f); color: var(--pierre-t); border-style: dashed; }
.param-section-title { font-family: var(--f-titre); letter-spacing: .1em; color: var(--encre2); border-color: var(--trait); }
.param-field input[type="number"], .param-field textarea { border-radius: 0; }

/* ── Frais remboursés, fiches de frais, facturettes ──────────
   Ces trois pages placent leur <style> dans le corps de la page, donc APRÈS la charte : le préfixe « body » donne la priorité à la charte. */
body .fx-onglets { border-bottom-color: var(--trait); }
body .fx-onglet { border-radius: 0; font-family: var(--f-titre); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--encre2); opacity: 1; }
body .fx-onglet:hover { background: var(--bande); color: var(--encre); }
body .fx-onglet.fx-actif { color: var(--encre); border-bottom: 3px solid var(--encre); }
body .fx-puce { border-radius: 0; border-color: var(--trait-fort); color: var(--encre2); }
body .fx-puce:hover { background: var(--bande); }
body .fx-puce .fx-n { border-radius: 0; background: var(--bande); color: var(--encre); }
body .fx-puce.fx-actif { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }
body .fx-puce.fx-actif .fx-n { background: var(--sur-encre); color: var(--encre); }
body .fx-puce .fx-a { opacity: 1; color: var(--text-muted); }
body .fx-puce.fx-actif .fx-a { color: var(--sur-encre); opacity: .85; }
body .ft-alerte, body .ex-alerte, body .ff-alerte { border: 1px solid var(--pierre); border-left-width: 4px; background: var(--pierre-f); color: var(--encre); border-radius: 0; }
body .ft-depot { border: 2px dashed var(--trait-fort); border-radius: 0; background: transparent; }
body .ft-depot.ft-survol { background: var(--trace-f); border-color: var(--trace); }
body .ft-carte, body .ff-feuille, body .ff-coord { border-color: var(--trait); border-radius: 0; background: var(--papier); }
body .ft-vignette { border-radius: 0; border-color: var(--trait); }
body .ft-btn, body .ex-btn, body .ff-btn { border: 1px solid var(--encre); border-radius: 0; background: transparent; color: var(--encre); font-family: var(--f-titre); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; font-size: .74rem; }
body .ft-btn:hover, body .ex-btn:hover, body .ff-btn:hover { background: var(--bande); }
body .ft-btn.ft-valider, body .ex-btn, body .ff-btn { background: var(--encre); color: var(--sur-encre); }
body .ft-btn.ft-valider:hover, body .ex-btn:hover, body .ff-btn:hover { background: var(--encre2); border-color: var(--encre2); }
body .ff-btn.ff-second { background: transparent; color: var(--encre); border-color: var(--trait-fort); font-weight: 700; }
body .ff-btn.ff-second:hover { background: var(--bande); }
body .ft-badge { border-radius: 0; font-family: var(--f-titre); letter-spacing: .04em; }
body .ft-vert { color: var(--vert-t); } body .ft-ambre { color: var(--pierre-t); } body .ft-rouge { color: var(--sanguine); } body .ft-gris { color: var(--text-muted); }
body .ex-manque, body .ex-conflit { color: var(--pierre-t); }
body .ex-erreur, body .ff-erreur { color: var(--sanguine); }
body .ex-table th, body .ff-table th { background: var(--bande); color: var(--encre2); border-bottom: 2px solid var(--ligne); }
body .ex-table th, body .ex-table td, body .ff-table th, body .ff-table td { border-bottom-color: var(--trait); }
body .ex-table tfoot td, body .ff-table tfoot td { border-top: 2px solid var(--ligne); }
body .ft-manuel { border-top-color: var(--trait); }
body .ft-visu-fenetre { background: var(--papier); color: var(--encre); border-radius: 0; }
body .ft-visu-entete { border-bottom-color: var(--trait); }
body .ft-visu-entete .ft-btn { color: var(--encre); }
body .ft-visu-corps { background: var(--calque); }
body .ft-visu-message { color: var(--encre2); }
@media (max-width: 640px) { body .ft-visu-fenetre { border-radius: 0; } }

/* ── Fenêtres de visualisation (relevés, justificatifs) ─────
   Le fond du corps est écrit en ligne dans les gabarits : !important nécessaire. Les pages scannées gardent leur fond blanc. */
#releve-modal > div, #just-modal > div { border-radius: 0 !important; border: 2px solid var(--ligne); }
#releve-modal-corps, #just-vue { background: var(--calque) !important; }

/* ── Pages hors mise en page commune ────────────────────── */
body:has(> .login-box), body:has(> .page-erreur) { background-color: var(--bg); background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 24px 24px; }
.login-box { background: var(--papier); border: 1px solid var(--trait); border-top: 3px solid var(--encre); border-radius: 0; box-shadow: none; }
.login-box h1 { font-size: 1.25rem; }
.login-box .subtitle { color: var(--encre2); font-family: var(--f-titre); letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.login-box label { font-family: var(--f-titre); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; color: var(--text-muted); }
.login-box input[type="text"], .login-box input[type="password"] { border-radius: 0; }
.login-box button { background: var(--encre); color: var(--sur-encre); border: 1px solid var(--encre); border-radius: 0; font-family: var(--f-titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.login-box button:hover { opacity: 1; background: var(--encre2); border-color: var(--encre2); }
.login-box .erreur { background: var(--sanguine-f); color: var(--sanguine); border: 1px solid var(--sanguine); border-left-width: 4px; border-radius: 0; }
.page-erreur { background: var(--papier); border: 1px solid var(--trait); border-top: 3px solid var(--encre); padding: 28px 32px; }
.page-erreur h1 { font-size: 1.25rem; margin: 0 0 10px; }
.page-erreur p { color: var(--encre2); font-size: .9rem; }
.page-erreur a { color: var(--trace-t); font-weight: 600; text-decoration: underline; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }

/* ── Divers ─────────────────────────────────────────────── */
/* angles droits sur les composants propres à certaines pages (la charte n'arrondit pas) */
.nav-tresorerie, .form-card, .dossier-corps, .dash-kpi-row, .dash-lot-row, .pil-tuile { border-radius: 0; }
.field input, .field select, .field textarea, .pil-form input, .pil-form select, .pil-dec-form input[type=text], .categorie-form select { border-radius: 0; }
.filtre-statut a, .badge-admin, .badge-lecteur, .badge-inactif { border-radius: 0; }
.pil-tag.alerte { color: var(--sur-encre); }
.alert-ok { border-color: var(--vert); border-radius: 0; }
/* styles écrits en ligne dans les gabarits : sélecteurs d'attribut + !important (sélecteur des années du bilan et du pilotage, simulateurs du bilan) */
a[style*="background:var(--accent)"] { color: var(--sur-encre) !important; }
a[style*="padding:5px 12px"] { border-radius: 0 !important; font-family: var(--f-titre); letter-spacing: .05em; }
details[id^="simu-"] { border: 1px solid var(--trait) !important; border-radius: 0 !important; background: var(--papier); }
details[id^="simu-"] summary { font-family: var(--f-titre); letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
details[id^="simu-"] div[style*="dotted"] { border-bottom-color: var(--trait) !important; }
details[id^="simu-"] div[style*="#a33"] { color: var(--sanguine) !important; }

/* ── Mobile : rangée de boutons plus aérée ──────────────── */
@media (max-width: 640px) {
  .page-title { font-size: 1.25rem; }
  .topbar-breadcrumb { font-size: 11.5px; }
}