/* ════════════════════════════════════════════════════════════════════
   GITSS DocApp v3 — feuille de style principale (extraite de base.html)
   Servie statiquement (CSP style-src 'self') et mise en cache navigateur.
   ════════════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées (UI v4 « édition papier ») — SIL OFL, woff2 latin ── */
@font-face {
  font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family:'Fraunces'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face {
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/spacemono-regular.woff2') format('woff2');
}
@font-face {
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/spacemono-bold.woff2') format('woff2');
}

:root {
  /* Encres « Papier Mécanique » — palette validée maquettes 2026-06-11 */
  --paper:#f3f2ec; --card:#fcfbf7; --line:#e0ded2; --line-soft:#e9e6da;
  --ink:#16222e; --ink-2:#5a6b78; --ink-3:#8e9aa4;
  --teal:#2b97a4; --teal-d:#1e7480; --teal-bg:#e3f0f2;
  --teal-deep:#1e7480;             /* compat : surfaces texte blanc (AA) */
  --ok-bg:#e0eee2; --ok-tx:#28663c;
  --info-bg:#ddedef; --info-tx:#1e6a75;
  --warn-bg:#f4ead2; --warn-tx:#8a5f08;
  --late-bg:#f6ddd8; --late-tx:#a83b28;
  --draft-bg:#eae5d7; --draft-tx:#6b6557;
  --red:#c0392b;
  /* Refonte « Modern SaaS » 2026-06 : la typographie est désormais branchée sur
     les tokens du design system (tokens.css) — Inter partout, JetBrains Mono pour
     les chiffres/étiquettes. Fin de Fraunces (serif). Repli si tokens absents. */
  --font-display:var(--gitss-font-sans, system-ui, sans-serif);
  --font-mono:var(--gitss-font-mono, ui-monospace, Consolas, monospace);
  --sidebar-bg:#151f28; --sidebar-w:240px;
}
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--gitss-font-sans, system-ui, 'Segoe UI', Roboto, sans-serif);
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ── A11y : focus clavier visible + animations réduites si demandé ── */
a:focus-visible, button:focus-visible, .sidebar .nav-link:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); height:100vh;
  background:var(--sidebar-bg); position:fixed; top:0; left:0; z-index:1045;
  display:flex; flex-direction:column;
  box-shadow: 2px 0 12px rgba(0,0,0,.25);
}
.sidebar .logo-area {
  padding:14px 16px 12px; border-bottom:1px solid #253242;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.sidebar .logo-area img {
  width:160px; height:auto; display:block;
}
.sidebar .logo-area h6 { color:#fff; font-weight:700; font-size:.82rem; margin:0; line-height:1.2; text-align:center; font-family:var(--font-mono); letter-spacing:.14em; }
.sidebar .logo-area small { color:#6a8aa0; font-size:.6rem; text-align:center; font-family:var(--font-mono); letter-spacing:.08em; }
.sidebar .version-badge {
  display:inline-block; background:var(--teal); color:#fff;
  font-size:.58rem; font-weight:700; padding:1px 5px; border-radius:3px;
  margin-left:4px; vertical-align:middle; font-family:var(--font-mono);
}
.sidebar .logo-area { position:relative; }
.sidebar .logo-area::after {
  content:''; position:absolute; left:16px; right:16px; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--teal), transparent);
}
.sidebar nav { flex:1; overflow-y:auto; padding:6px 8px 12px; }
.sidebar .section-label {
  color:#5d7484; font-size:.58rem; font-weight:700; text-transform:uppercase;
  padding:15px 12px 5px; letter-spacing:.2em; font-family:var(--font-mono);
}
.sidebar .nav-link {
  color:#8aacbc; padding:7px 11px; font-size:.82rem;
  border-radius:8px; display:flex; align-items:center; gap:10px;
  transition:all .15s; position:relative; margin-bottom:1px;
}
.sidebar .nav-link .idx {
  font-family:var(--font-mono); font-size:.62rem; color:#5d7484;
  width:18px; flex-shrink:0; font-weight:700;
}
.sidebar .nav-link i { width:16px; text-align:center; font-size:.95rem; flex-shrink:0; }
.sidebar .nav-link:hover { background:#1e2f3e; color:#d0e8f0; }
.sidebar .nav-link.active {
  background:var(--paper); color:var(--sidebar-bg);
  font-weight:600;
}
.sidebar .nav-link.active .idx { color:var(--teal-d); }
.sidebar .nav-link.active i { color:var(--teal-d); }
.sidebar .nav-link .badge-count {
  margin-left:auto; background:#e74c3c; color:#fff;
  font-size:.6rem; padding:2px 6px; border-radius:10px; font-weight:700;
  font-family:var(--font-mono);
}
.sidebar-footer {
  padding:12px 18px; border-top:1px solid #253242;
  font-size:.62rem; color:#5d7484; font-family:var(--font-mono); letter-spacing:.1em;
}

/* ── Main ── */
.main { margin-left:var(--sidebar-w); padding:10px 30px 28px; min-height:100vh; }
/* En-tête de page : aligné sur .gs-page-hd / .gs-page-title (refonte) pour que
   les pages encore en .page-header soient cohérentes avec dashboard/liste/etc. */
.page-header { margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--bs-border-color); }
.page-header h4 {
  font-weight:700; color:var(--bs-heading-color); margin:0; line-height:1.2;
  font-family:var(--gitss-font-sans, system-ui, sans-serif); font-size:var(--gitss-text-2xl, 1.6rem); letter-spacing:-.4px;
}
.page-header h4 i { font-size:1.05rem; vertical-align:1px; }
.page-header small, .page-header .text-muted { color:var(--bs-secondary-color) !important; }
.page-header.d-flex { flex-wrap: wrap; row-gap:.6rem; column-gap:.75rem; }
/* Le cluster de boutons à droite (page-header > .d-flex) doit wrapper aussi
   pour éviter le débordement quand il y a 3-4 boutons (ex. dashboard). */
.page-header.d-flex > .d-flex { flex-wrap: wrap; }

/* ── Cards (panneaux papier) ── */
/* Pont « Modern SaaS » : les .card legacy adoptent le look .gs-panel via les
   tokens --bs-* (refonte 2026-06). Modernise toutes les pages non encore
   portées en .gs-* sans réécrire chaque template. */
.card {
  border:1px solid var(--bs-border-color); border-radius:var(--gitss-radius-lg, 10px);
  background:var(--bs-body-bg); box-shadow:none; overflow:hidden;
}
.card-header {
  background:var(--bs-secondary-bg); color:var(--bs-secondary-color);
  font-family:var(--gitss-font-sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:.66rem;
  padding:9px 16px; border-bottom:1px solid var(--bs-border-color);
}
.card-header .btn, .card-header .badge { text-transform:none; letter-spacing:normal; font-weight:600; }
.card-header.dark, .card-header.light { background:var(--bs-secondary-bg); color:var(--bs-secondary-color); border-bottom:1px solid var(--bs-border-color); }

/* Champ code MFA (OTP) — remplace l'ancien style inline de mfa_verify. */
.otp-input { letter-spacing:.4em; font-size:1.6rem; text-align:center; font-weight:700; font-family:var(--gitss-font-mono, monospace); }

/* ── Stat cards (indicateurs) ── */
.stat-card { border-top:3px solid var(--teal); border-left:1px solid var(--line); transition:transform .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(22,34,46,.09); }
.stat-num {
  font-size:2rem; font-weight:700; color:var(--ink); line-height:1;
  font-family:var(--font-display); letter-spacing:-.01em;
}

/* ── Boutons (mono « tampon ») ── */
.btn {
  font-family:var(--font-mono); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  border-radius:8px;
}
.btn-sm { font-size:.66rem; }
.btn:not(.btn-sm) { font-size:.74rem; }
.btn-teal { background:var(--teal-d); color:#fff; border:none; }
.btn-teal:hover { background:var(--ink); color:var(--paper); }
.btn-outline-secondary { color:var(--ink-2); border-color:var(--line); }
.btn-outline-secondary:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ── Tables (registre) ── */
.table { --bs-table-bg:transparent; color:var(--ink); }
.table thead th {
  background:transparent; color:var(--ink-2); border:none;
  border-bottom:2px solid var(--ink) !important;
  font-family:var(--font-mono); font-size:.64rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; padding-top:.6rem; padding-bottom:.55rem;
}
.table td { border-color:var(--line-soft); }
.table tbody tr:hover { background:var(--teal-bg); }

/* ── Badges : bridgés sur les tokens .gs-badge (refonte) — mêmes couleurs et
   forme que les .gs-badge des pages portées ; dark géré par les tokens. ── */
.badge { font-weight:600; letter-spacing:.03em; }
.badge-devis   { background:var(--gitss-badge-devis-bg);   color:var(--gitss-badge-devis-color); }
.badge-facture { background:var(--gitss-badge-facture-bg); color:var(--gitss-badge-facture-color); }
.badge-bl      { background:var(--gitss-badge-bl-bg);      color:var(--gitss-badge-bl-color); }
.badge-bc      { background:var(--gitss-badge-bc-bg);      color:var(--gitss-badge-bc-color); }
.badge-avoir   { background:var(--gitss-badge-avoir-bg);   color:var(--gitss-badge-avoir-color); }

/* ── Badges paiement ── */
.badge-emis    { background:var(--gitss-badge-emis-bg);    color:var(--gitss-badge-emis-color);    border:1px solid var(--gitss-badge-emis-border); }
.badge-paye    { background:var(--gitss-badge-paye-bg);    color:var(--gitss-badge-paye-color);    border:1px solid var(--gitss-badge-paye-border); }
.badge-partiel { background:var(--gitss-badge-partiel-bg); color:var(--gitss-badge-partiel-color); border:1px solid var(--gitss-badge-partiel-border); }
.badge-annule  { background:var(--gitss-badge-annule-bg);  color:var(--gitss-badge-annule-color);  border:1px solid var(--gitss-badge-annule-border); }

/* ── Flash ── */
.flash-area { position:fixed; top:14px; right:18px; z-index:9999; min-width:300px; max-width:420px; }

/* ── Divers ── */
.ligne-row td { vertical-align:middle; }
.sticky-sidebar { position:sticky; top:20px; }
.impaye-alert { border-left:4px solid #e74c3c; }
.paye-alert   { border-left:4px solid #27ae60; }

/* ── Form_doc mobile (Phase 2B : lignes/options en blocs empilés tactiles sous 576 px) ── */
@media (max-width: 575.98px) {
  #lignesTable thead, #optionsTable thead { display: none; }
  #lignesTable, #lignesTable tbody, #lignesTable tr, #lignesTable td,
  #optionsTable, #optionsTable tbody, #optionsTable tr, #optionsTable td {
    display: block; width: 100%;
  }
  #lignesTable tr, #optionsTable tr {
    background:var(--card); border:1px solid var(--line); border-left:3px solid var(--teal);
    border-radius:10px; padding:10px 12px; margin:0 8px 10px;
  }
  #lignesTable td, #optionsTable td {
    padding: 5px 0 !important; border: none !important;
  }
  #lignesTable td input, #optionsTable td input {
    min-height: 42px; font-size: 1rem;
  }
  /* Labels au-dessus des inputs (non-BL) */
  #docForm:not(.bl-mode) #lignesTable td:nth-child(1)::before { content: "Description"; }
  #docForm:not(.bl-mode) #lignesTable td:nth-child(2)::before { content: "Quantité"; }
  #docForm:not(.bl-mode) #lignesTable td:nth-child(3)::before { content: "PU (MRU)"; }
  #docForm:not(.bl-mode) #lignesTable td:nth-child(4)::before { content: "Total"; }
  /* Labels en mode BL (3 colonnes seulement) */
  #docForm.bl-mode #lignesTable td:nth-child(1)::before { content: "Description"; }
  #docForm.bl-mode #lignesTable td:nth-child(2)::before { content: "Quantité"; }
  /* Options */
  #optionsTable td:nth-child(1)::before { content: "Description"; }
  #optionsTable td:nth-child(2)::before { content: "Quantité"; }
  #optionsTable td:nth-child(3)::before { content: "PU (MRU)"; }
  #optionsTable td:nth-child(4)::before { content: "Montant"; }
  /* Style commun des labels (small caps) */
  #lignesTable td::before, #optionsTable td::before {
    display:block; font-size:.62rem; color:var(--ink-2); font-weight:700;
    text-transform:uppercase; letter-spacing:.12em; margin-bottom:3px;
    font-family:var(--font-mono);
  }
  /* Dernière colonne = bouton X — aligné à droite, pas de label */
  #docForm:not(.bl-mode) #lignesTable td:nth-child(5),
  #docForm.bl-mode #lignesTable td:nth-child(3),
  #optionsTable td:nth-child(5) {
    text-align: right; padding-top: 6px !important;
  }
  #docForm:not(.bl-mode) #lignesTable td:nth-child(5)::before,
  #docForm.bl-mode #lignesTable td:nth-child(3)::before,
  #optionsTable td:nth-child(5)::before { display: none; }
  #docForm:not(.bl-mode) #lignesTable td:nth-child(5) button,
  #docForm.bl-mode #lignesTable td:nth-child(3) button,
  #optionsTable td:nth-child(5) button {
    padding: 8px 14px; min-height: 38px;
  }
}

/* ── Form document : saisie « registre » + bloc NET (UI v4 lot 3) ── */
#lignesTable .form-control, #optionsTable .form-control {
  background:transparent; border:0; border-bottom:1.5px dashed var(--line);
  border-radius:0; padding-left:.35rem; padding-right:.35rem;
}
#lignesTable .form-control:focus, #optionsTable .form-control:focus {
  border-bottom:1.5px solid var(--teal); box-shadow:none; background:transparent;
}
.sum-net {
  background:var(--ink); color:var(--paper);
  border-radius:10px; padding:13px 16px; text-align:left;
}
[data-bs-theme=dark] .sum-net { background:var(--teal); color:#06262b; }
/* Champ « taux » de la retenue à la source (WHT) dans le formulaire document */
.wht-rate-input { width:4.75rem; }
.sum-net-l {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; opacity:.78; font-weight:700;
}
.sum-net-n {
  font-family:var(--font-display); font-size:1.7rem; font-weight:700;
  margin-top:2px; line-height:1.15; word-break:break-word;
}
/* Barre d'action collante en bas (création de document, smartphone) */
.mob-actionbar {
  position:fixed; bottom:0; left:0; right:0; z-index:1030;
  background:var(--card); border-top:1px solid var(--line);
  padding:10px 14px; display:flex; gap:10px; align-items:center;
}
.mob-actionbar .net { flex:1; min-width:0; }
.mob-actionbar .net .l {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em;
  color:var(--ink-2); font-weight:700; text-transform:uppercase;
}
.mob-actionbar .net .n {
  font-family:var(--font-display); font-size:1.2rem; font-weight:700; white-space:nowrap;
}
@media (max-width:767.98px) {
  body:has(.mob-actionbar) .gs-page-inner { padding-bottom:96px; }
}

/* ── Palette de commandes Ctrl+K (P2) ── */
.cmdk-backdrop {
  position:fixed; inset:0; z-index:2000;
  background:rgba(22,34,46,.45);
  display:flex; justify-content:center; align-items:flex-start; padding-top:14vh;
}
.cmdk-box {
  width:min(560px, calc(100vw - 28px));
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  box-shadow:0 18px 60px rgba(10,17,22,.35); overflow:hidden;
}
.cmdk-input {
  width:100%; border:none; outline:none; background:transparent;
  padding:16px 18px 13px; font-size:1.05rem; color:var(--ink);
  border-bottom:1.5px dashed var(--line);
}
.cmdk-input::placeholder { color:var(--ink-3); }
.cmdk-list { max-height:330px; overflow-y:auto; padding:7px; }
.cmdk-item {
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:8px; cursor:pointer; color:var(--ink); text-decoration:none;
  font-size:.9rem;
}
.cmdk-item .idx {
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  color:var(--ink-3); width:20px; flex-shrink:0;
}
.cmdk-item .grp {
  margin-left:auto; font-family:var(--font-mono); font-size:.55rem;
  letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; white-space:nowrap;
}
.cmdk-item.active { background:var(--ink); color:var(--paper); }
.cmdk-item.active .idx, .cmdk-item.active .grp { color:var(--teal); }
[data-bs-theme=dark] .cmdk-item.active { background:var(--teal); color:#06262b; }
[data-bs-theme=dark] .cmdk-item.active .idx,
[data-bs-theme=dark] .cmdk-item.active .grp { color:#06262b; }
.cmdk-empty { text-align:center; color:var(--ink-3); padding:20px 0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; }
.cmdk-foot {
  border-top:1px dashed var(--line); padding:8px 16px;
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; color:var(--ink-3);
}
.topbar-btn-cmdk {
  color:var(--ink-2); background:var(--card); font-size:.62rem;
  padding:8px 11px; border-radius:8px; border:1px solid var(--line); cursor:pointer;
  font-family:var(--font-mono); font-weight:700; letter-spacing:.08em;
}
.topbar-btn-cmdk:hover { background:var(--ink); color:var(--paper); }

/* ── Pipeline kanban : affordances drag-and-drop uniquement.
   Le LOOK vient des composants .gs-kanban-* (components.css) ; les classes
   pipe-card / pipe-col restent comme hooks JS (app.js §19, inchangé). ── */
.pipe-col.dragover { outline:2px dashed var(--gitss-teal-500); outline-offset:-4px; border-radius:var(--gitss-radius-lg, 12px); }
.pipe-card[draggable=true] { cursor:grab; }
.pipe-card.dragging { opacity:.45; cursor:grabbing; }
.late-flag-soft { color:var(--gitss-amber-600); font-weight:600; }
.badge.b-mini { font-size:.55rem; padding:3px 7px; }

/* ── Registre : numéros de documents et montants ── */
.doc-num {
  font-family:var(--font-mono); font-size:.74rem; font-weight:700;
  color:var(--teal-d) !important; letter-spacing:.02em;
}
.doc-amount { font-family:var(--font-display); font-size:1.02rem; font-weight:700; }
/* Titre de fiche document : le numéro en mono « tampon de registre »
   (dé-scopé pour fonctionner aussi sous .gs-page-hd / .gs-page-title). */
.doc-num-title {
  font-family:var(--font-mono); font-size:1.45rem; font-weight:700;
  letter-spacing:-.01em; color:var(--bs-body-color);
}

/* ── Bloc « À traiter en priorité » (dashboard, UI v4 lot 2) ── */
.todo-row {
  display:flex; gap:13px; align-items:center;
  padding:11px 4px; border-bottom:1px dashed var(--line);
  flex-wrap:wrap;
}
.todo-row:last-child { border-bottom:none; }
.todo-ico {
  width:36px; height:36px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.todo-tx { flex:1 1 220px; min-width:0; }
.todo-t { font-weight:600; font-size:.9rem; color:var(--ink); }
.todo-s { font-size:.78rem; color:var(--ink-2); margin-top:1px; }
.todo-act { white-space:nowrap; }
.todo-act-urgent {
  background:var(--red); color:#fff; border:none; white-space:nowrap;
}
.todo-act-urgent:hover { background:#9c2e22; color:#fff; }

/* ── Champs de formulaire (papier) ── */
.form-control, .form-select {
  background:var(--card); border-color:var(--line); color:var(--ink); border-radius:8px;
}
.form-control:focus, .form-select:focus {
  border-color:var(--teal); box-shadow:0 0 0 .2rem rgba(43,151,164,.18);
  background:var(--card); color:var(--ink);
}
.form-control::placeholder { color:var(--ink-3); }
.form-label, .form-check-label { color:var(--ink-2); }
.form-label.fw-semibold, label.form-label.small, .form-label.small {
  font-family:var(--font-mono); font-size:.64rem !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2);
}
.input-group-text { background:var(--card); border-color:var(--line); color:var(--ink-3); }
.modal-content { background:var(--card); border:1px solid var(--line); border-radius:12px; }
.modal-header { border-bottom-color:var(--line); }
.modal-footer { border-top-color:var(--line); }
.dropdown-menu { background:var(--card); border-color:var(--line); }

/* ── Mobile list cards (Phase 2A : tables → cartes sous 768 px) ── */
.mobile-list { padding: 10px 12px; }
.mobile-card {
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:10px; padding:12px 14px; margin-bottom:10px;
  box-shadow:0 1px 3px rgba(22,34,46,.05);
}
.mobile-card-head {
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  flex-wrap:wrap;
}
.mobile-card-head .num {
  font-weight:700; color:var(--teal-d); text-decoration:none; flex:1 1 auto; min-width:0;
  word-break:break-word; font-size:.82rem; font-family:var(--font-mono);
}
.mobile-card-head .amount {
  font-weight:700; color:var(--ink); white-space:nowrap; font-size:1.02rem;
  font-family:var(--font-display);
}
.mobile-card-meta {
  font-size:.82rem; color:var(--ink-2); line-height:1.45;
}
.mobile-card-meta .sep { color:var(--line); margin:0 5px; }
.mobile-card-status { margin-top:8px; }
.mobile-card-actions {
  display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;
  padding-top:8px; border-top:1px dashed var(--line);
}
.mobile-card-actions .btn {
  flex:1 1 0; min-height:38px;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:.82rem;
}
.mobile-card-actions form { display:flex; flex:1 1 0; }
.mobile-card-actions form .btn { width:100%; }

/* ── Topbar buttons (pilules papier) ── */
.topbar-btn-settings, .topbar-btn-logout {
  font-size:.68rem; padding:7px 11px; border-radius:8px;
  text-decoration:none; transition:background .15s;
  font-family:var(--font-mono); font-weight:700; letter-spacing:.06em;
  border:1px solid var(--line); background:var(--card);
}
.topbar-btn-settings { color:var(--ink-2); }
.topbar-btn-settings:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.topbar-btn-logout { color:var(--red); }
.topbar-btn-logout:hover { background:var(--red); border-color:var(--red); color:#fff; }
.topbar-btn-search {
  color:var(--ink-2); background:var(--card); font-size:1rem;
  padding:7px 11px; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; transition:background .15s;
  border:1px solid var(--line);
}
.topbar-btn-search:hover { background:var(--ink); color:var(--paper); }
.topbar-date {
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.22em; color:var(--ink); text-transform:uppercase;
  margin-right:auto; white-space:nowrap;
}

/* ── Topbar (barre fixe en haut) ── */
.topbar {
  position:fixed; top:0; right:0; left:var(--sidebar-w); z-index:100;
  padding:9px 20px; display:flex; align-items:center; gap:12px;
  justify-content:flex-end; background:var(--paper); border-bottom:1px solid var(--line);
}
.topbar .input-group-text { background:var(--card) !important; border-color:var(--line); color:var(--ink-3); }
.topbar .form-control { background:var(--card); border-color:var(--line); }
.sidebar-toggle {
  display:none; border:none; background:transparent; color:var(--ink);
  font-size:1.35rem; line-height:1; padding:2px 6px; cursor:pointer;
}
.sidebar-backdrop { display:none; }

/* ── Responsive : < 768 px (smartphone uniquement — tablette portrait garde la sidebar) ── */
@media (max-width: 767.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open { overflow: hidden; }
  .sidebar-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1040;
  }
  body.sidebar-open .sidebar-backdrop { display:block; }
  .main { margin-left:0; padding:10px 14px 24px; }
  .topbar { left:0; padding:8px 12px; gap:8px; }
  .sidebar-toggle { display:inline-flex; align-items:center; }
  /* Cibles tactiles : ≥36 px pour les boutons d'action denses dans les tables */
  .table .btn-sm,
  .table-responsive-lg .btn-sm {
    min-height: 36px; padding-top:.3rem; padding-bottom:.3rem;
  }

  /* ── Filets anti-débordement (full responsive) ──
     Règle de fond : AUCUNE page ne doit défiler horizontalement.
     1) Toute table non convertie en cartes devient défilante DANS sa
        carte (le doigt scrolle la table, pas la page). Les tables de
        saisie de form_doc (déjà empilées en blocs) sont exclues. */
  .gs-page-inner table.table:not(#lignesTable):not(#optionsTable) {
    display:block; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* 2) Anti-« blowout » des grilles : une colonne ne peut plus imposer
        sa largeur min-content à la page. */
  .row > * { min-width:0; }
  .card-body { min-width:0; }
  /* 3) Les contrôles et contenus longs restent dans leur conteneur. */
  input, select, textarea { max-width:100%; }
  .mobile-card-meta, .mobile-card-head .num { overflow-wrap:anywhere; }
}

/* ════════════════════════════════════════════════════════════════════
   Utilitaires data-* (Phase C — remplacement des attributs style= inline,
   prérequis au retrait de style-src-attr 'unsafe-inline' de la CSP).
   !important : réplique la précédence des anciens styles inline.
   ════════════════════════════════════════════════════════════════════ */

/* ── Couleurs de texte ── */
[data-tx=teal]     { color:var(--teal) !important; }
[data-tx=teal-d]   { color:#1e7480 !important; }
[data-tx=teal-dd]  { color:#1e7480 !important; }
[data-tx=green]    { color:#27ae60 !important; }
[data-tx=red]      { color:#e74c3c !important; }
[data-tx=red-d]    { color:#c0392b !important; }
[data-tx=orange]   { color:#e8770e !important; }
[data-tx=amber]    { color:#f0ad4e !important; }
[data-tx=wine]     { color:#82292d !important; }
[data-tx=bluegray] { color:#6a8aa0 !important; }
[data-tx=purple]   { color:#6f42c1 !important; }
[data-tx=purple8]  { color:#8e44ad !important; }
[data-tx=cyan]     { color:#17a2b8 !important; }
[data-tx=muted]    { color:#6c757d !important; }
[data-tx=blue]     { color:#1a56db !important; }
[data-tx=gold]     { color:#e3a008 !important; }
[data-tx=green-d]  { color:#057a55 !important; }
[data-tx=violet]   { color:#7b2d8b !important; }

/* ── Fonds pleins (badges, pastilles, segments — texte blanc) ── */
[data-bg=teal]     { background:var(--teal) !important; color:#fff; }
[data-bg=teal-d]   { background:#1e7480 !important; color:#fff; }
[data-bg=green]    { background:#27ae60 !important; color:#fff; }
[data-bg=red]      { background:#e74c3c !important; color:#fff; }
[data-bg=red-d]    { background:#c0392b !important; color:#fff; }
[data-bg=orange]   { background:#e8770e !important; color:#fff; }
[data-bg=amber]    { background:#f0ad4e !important; color:#fff; }
[data-bg=bluegray] { background:#6a8aa0 !important; color:#fff; }
[data-bg=gray]     { background:#6c757d !important; color:#fff; }
[data-bg=purple]   { background:#6f42c1 !important; color:#fff; }
[data-bg=slate]    { background:#5b7a99 !important; color:#fff; }
[data-bg=blue]     { background:#1a56db !important; color:#fff; }
[data-bg=gold]     { background:#e3a008 !important; color:#fff; }
[data-bg=green-d]  { background:#057a55 !important; color:#fff; }
[data-bg=violet]   { background:#7b2d8b !important; color:#fff; }
[data-bg=navy]     { background:#1a3547 !important; color:#fff; }
[data-bg=navy-h]   { background:#1e2f3e !important; }

/* ── Chips pastel (fond clair + texte foncé assorti) ── */
[data-chip=yellow]     { background:#fff3cd !important; color:#856404; }
[data-chip=yellow-b]   { background:#fff3cd !important; color:#856404; border:1px solid #ffc10740; }
[data-chip=blue]       { background:#d1ecf1 !important; color:#0c5460; }
[data-chip=green]      { background:#d4edda !important; color:#155724; }
[data-chip=green-b]    { background:#e8f5e9 !important; color:#2e7d32; border:1px solid #a5d6a7; }
[data-chip=orange-b]   { background:#fff3e0 !important; color:#e65100; border:1px solid #ffcc80; }
[data-chip=gray-b]     { background:#eef2f7 !important; color:#334; border:1px solid #cdd7e3; }
[data-chip=teal-b]     { background:#2b97a420 !important; color:#1e7480; border:1px solid #2b97a440; }
[data-chip=teal-soft]  { background:#f0f9fa !important; border:1px solid #2b97a430; }
[data-chip=teal-soft2] { background:#eef9fb !important; border:1px solid #cfe8ec; }
[data-chip=teal-pale]  { background:#f0f6f7 !important; }
[data-chip=mint]       { background:#d6f0e0 !important; color:#146c43; }
[data-chip=red]        { background:#f8d7da !important; color:#721c24; }
[data-chip=head-teal]  { background:#f8f9fa !important; font-weight:600; color:var(--teal); }
[data-chip=head-gray]  { background:#f8f9fa !important; font-weight:600; color:#6c757d; }
[data-chip=light]      { background:#f8f9fa !important; }

/* ── Buckets translucides (cartes de synthèse colorées) ── */
[data-bucket=bluegray] { background:#6a8aa015; border:2px solid #6a8aa040; }
[data-bucket=amber]    { background:#f0ad4e15; border:2px solid #f0ad4e40; }
[data-bucket=orange]   { background:#e8770e15; border:2px solid #e8770e40; }
[data-bucket=red]      { background:#e74c3c15; border:2px solid #e74c3c40; }
[data-bucket=teal]     { background:#2b97a415; border:2px solid #2b97a440; }
[data-bucket=teal-dd]  { background:#1e748015; border:2px solid #1e748040; }
[data-bucket=green]    { background:#27ae6015; border:2px solid #27ae6040; }
[data-bucket=blue]     { background:#1a56db15; border:2px solid #1a56db40; }
[data-bucket=gold]     { background:#e3a00815; border:2px solid #e3a00840; }
[data-bucket=green-d]  { background:#057a5515; border:2px solid #057a5540; }
[data-bucket=violet]   { background:#7b2d8b15; border:2px solid #7b2d8b40; }
[data-bucket-sm=teal]    { background:#2b97a420; border:1px solid #2b97a440; }
[data-bucket-sm=amber]   { background:#f0ad4e20; border:1px solid #f0ad4e40; }
[data-bucket-sm=purple8] { background:#8e44ad20; border:1px solid #8e44ad40; }
[data-bucket-sm=cyan]    { background:#17a2b820; border:1px solid #17a2b840; }

/* ── Bordures ── */
[data-bl=teal]     { border-left-color:var(--teal) !important; }
[data-bl=green]    { border-left-color:#27ae60 !important; }
[data-bl=amber]    { border-left-color:#f0ad4e !important; }
[data-bl=red]      { border-left-color:#e74c3c !important; }
[data-bl=orange]   { border-left-color:#e8770e !important; }
[data-bl=wine]     { border-left-color:#82292d !important; }
[data-bl=purple]   { border-left-color:#6f42c1 !important; }
[data-bl=cyan]     { border-left-color:#17a2b8 !important; }
[data-bl=gray]     { border-left-color:#999 !important; }
[data-bl=bluegray] { border-left-color:#6a8aa0 !important; }
[data-bl4=teal]  { border-left:4px solid var(--teal) !important; }
[data-bl4=red]   { border-left:4px solid #e74c3c !important; }
[data-bl4=green] { border-left:4px solid #27ae60 !important; }
[data-bl4=gray]  { border-left:4px solid #6c757d !important; }
[data-bl4=line]  { border-left:4px solid #e0e6ed !important; }
[data-bl4=none]  { border-left:none !important; }
[data-bt=teal]      { border-top:3px solid var(--teal) !important; }
[data-border=teal2] { border:2px solid var(--teal) !important; }

/* ── Tailles de police (centi-rem) ── */
[data-fz="45"]  { font-size:.45rem !important; }
[data-fz="58"]  { font-size:.58rem !important; }
[data-fz="60"]  { font-size:.6rem !important; }
[data-fz="62"]  { font-size:.62rem !important; }
[data-fz="65"]  { font-size:.65rem !important; }
[data-fz="70"]  { font-size:.7rem !important; }
[data-fz="72"]  { font-size:.72rem !important; }
[data-fz="75"]  { font-size:.75rem !important; }
[data-fz="78"]  { font-size:.78rem !important; }
[data-fz="82"]  { font-size:.82rem !important; }
[data-fz="85"]  { font-size:.85rem !important; }
[data-fz="110"] { font-size:1.1rem !important; }
[data-fz="130"] { font-size:1.3rem !important; }
[data-fz="250"] { font-size:2.5rem !important; }

/* ── Opacité / décorations / divers ── */
[data-op="40"] { opacity:.4; }
[data-op="55"] { opacity:.55; }
[data-op="60"] { opacity:.6; }
[data-op="70"] { opacity:.7; }
[data-op="85"] { opacity:.85; }
[data-td=strike]   { text-decoration:line-through; }
[data-ws=nowrap]   { white-space:nowrap !important; }
[data-cur=pointer] { cursor:pointer; }
[data-disp=inline] { display:inline !important; }

/* ── Dimensions ── */
[data-w="40"]  { width:40px !important; }
[data-w="70"]  { width:70px !important; }
[data-w="80"]  { width:80px !important; }
[data-w="90"]  { width:90px !important; }
[data-w="100"] { width:100px !important; }
[data-w="110"] { width:110px !important; }
[data-w="130"] { width:130px !important; }
[data-w="160"] { width:160px !important; }
[data-w="320"] { width:320px !important; }
[data-w=auto]  { width:auto !important; }
[data-w="5pc"]  { width:5% !important; }
[data-w="8pc"]  { width:8% !important; }
[data-w="13pc"] { width:13% !important; }
[data-w="15pc"] { width:15% !important; }
[data-w="55pc"] { width:55% !important; }
[data-mw="92"]   { max-width:92px !important; }
[data-mw="130"]  { max-width:130px !important; }
[data-mw="200"]  { max-width:200px !important; }
[data-mw="230"]  { max-width:230px !important; }
[data-mw="640"]  { max-width:640px !important; }
[data-mw="65pc"] { max-width:65% !important; }
[data-mw="70pc"] { max-width:70% !important; }
[data-trunc="200"] { max-width:200px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-trunc="280"] { max-width:280px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-minw="240"] { min-width:240px !important; }
[data-minw="140"] { min-width:140px !important; }
[data-h="6"]   { height:6px !important; }
[data-h="8"]   { height:8px !important; }
[data-h="50"]  { height:50px !important; }
[data-h="180"] { height:180px !important; }

/* ── stat-card : l'accent d'état passe en liseré HAUT (édition papier).
   Les data-bl posés sur les cartes indicateurs pilotent border-top-color ;
   le bord gauche redevient neutre (placé APRÈS les utilitaires data-bl). ── */
.stat-card[data-bl] { border-left-color:var(--line) !important; }
.stat-card[data-bl=teal]     { border-top-color:var(--teal) !important; }
.stat-card[data-bl=red]      { border-top-color:#e74c3c !important; }
.stat-card[data-bl=green]    { border-top-color:#27ae60 !important; }
.stat-card[data-bl=amber]    { border-top-color:#f0ad4e !important; }
.stat-card[data-bl=orange]   { border-top-color:#e8770e !important; }
.stat-card[data-bl=purple]   { border-top-color:#6f42c1 !important; }
.stat-card[data-bl=bluegray] { border-top-color:#6a8aa0 !important; }
.stat-card[data-bl=wine]     { border-top-color:#82292d !important; }

/* ── Composants singuliers (data-ui) ── */
[data-ui=mr-auto]   { margin-right:auto; }
[data-ui=topbar-search]  { margin-right:auto; max-width:340px; width:100%; }
[data-ui=topbar-profile] { font-size:.82rem; color:#6a8aa0; text-decoration:none; }
[data-ui=mt3]       { margin-top:3px; }
[data-ui=minh36]    { min-height:36px; }
[data-ui=ta-center] { text-align:center; }
[data-ui=track-12] { background:#eef2f5; border-radius:6px; height:12px; overflow:hidden; }
[data-ui=track-14] { background:#eef2f5; border-radius:6px; height:14px; overflow:hidden; }
[data-ui=track-22] { background:#eef2f5; border-radius:6px; height:22px; overflow:hidden; display:flex; }
[data-ui=rounded-clip] { border-radius:1rem; overflow:hidden; }
[data-ui=bar-teal] {
  height:100%; border-radius:6px; width:0;
  background:linear-gradient(90deg,#2b97a4,#1e7480);
}
[data-ui=vbar-teal] {
  width:70%; border-radius:5px 5px 0 0; min-height:2px; height:0;
  background:linear-gradient(180deg,#2b97a4,#1e7480);
}
[data-ui=qr-box]     { max-width:220px; padding:10px; background:#fff; }
[data-ui=code-input] { letter-spacing:.3em; font-size:1.3rem; font-weight:700; }

/* ── Bouton thème (topbar) ── */
.topbar-btn-theme {
  color:var(--ink-2); background:var(--card); font-size:1rem;
  padding:7px 11px; border-radius:8px; border:1px solid var(--line); cursor:pointer;
  display:inline-flex; align-items:center; transition:background .15s;
}
.topbar-btn-theme:hover { background:var(--ink); color:var(--paper); }

/* ════════════════════════════════════════════════════════════════════
   Mode « nuit » (UI v4 — encre inversée du système Papier Mécanique).
   data-bs-theme=dark : Bootstrap natif + bascule des encres papier.
   ════════════════════════════════════════════════════════════════════ */
[data-bs-theme=dark] {
  --paper:#0e151b; --card:#16202a; --line:#27353f; --line-soft:#222e39;
  --ink:#dbe6ee; --ink-2:#93a6b3; --ink-3:#64788a;
  --teal:#43b6c4; --teal-d:#2b97a4; --teal-bg:#143037;
  --teal-deep:#2b97a4;
  --ok-bg:#1c3324; --ok-tx:#94cba2;
  --info-bg:#143037; --info-tx:#84ccd6;
  --warn-bg:#33290f; --warn-tx:#ddb967;
  --late-bg:#3a1d16; --late-tx:#e89a85;
  --draft-bg:#2a261c; --draft-tx:#b3ab95;
  --red:#e26a5a;
  --sidebar-bg:#0a1116;
  --bs-body-bg:#0e151b;
  --bs-body-color:#dbe6ee;
  --bs-secondary-bg:#16202a;
  --bs-tertiary-bg:#1a2530;
  --bs-border-color:#27353f;
}
[data-bs-theme=dark] body { background:var(--paper); }
[data-bs-theme=dark] .card { background:var(--gitss-navy-800); box-shadow:none; }
[data-bs-theme=dark] .table tbody tr:hover { background:rgba(67,182,196,.09); }
[data-bs-theme=dark] .table thead th { border-bottom-color:var(--teal-d) !important; }
[data-bs-theme=dark] .sidebar .nav-link.active { background:var(--card); color:var(--ink); }
[data-bs-theme=dark] .sidebar .nav-link.active .idx,
[data-bs-theme=dark] .sidebar .nav-link.active i { color:var(--teal); }
[data-bs-theme=dark] .btn-teal { background:var(--teal-d); }
[data-bs-theme=dark] .btn-teal:hover { background:var(--teal); color:#06262b; }
[data-bs-theme=dark] .topbar .bg-white { background-color:var(--card) !important; }
[data-bs-theme=dark] [data-ui=topbar-profile] { color:var(--ink-2); }
/* .badge-bc en dark : géré par le token --gitss-badge-bc-bg (violet plein). */
/* Surfaces claires utilitaires (data-*) déclinées nuit */
[data-bs-theme=dark] [data-chip=light],
[data-bs-theme=dark] [data-chip=head-teal],
[data-bs-theme=dark] [data-chip=head-gray] { background:#1a2530 !important; }
[data-bs-theme=dark] [data-chip=head-gray] { color:var(--ink-2); }
[data-bs-theme=dark] [data-chip=yellow],
[data-bs-theme=dark] [data-chip=yellow-b] { background:var(--warn-bg) !important; color:var(--warn-tx); }
[data-bs-theme=dark] [data-chip=green] { background:var(--ok-bg) !important; color:var(--ok-tx); }
[data-bs-theme=dark] [data-chip=blue] { background:var(--info-bg) !important; color:var(--info-tx); }
[data-bs-theme=dark] [data-chip=red] { background:var(--late-bg) !important; color:var(--late-tx); }
[data-bs-theme=dark] [data-chip=mint] { background:var(--ok-bg) !important; color:var(--ok-tx); }
[data-bs-theme=dark] [data-chip=teal-soft],
[data-bs-theme=dark] [data-chip=teal-soft2],
[data-bs-theme=dark] [data-chip=teal-pale] { background:#15242a !important; border-color:#2b97a440; }
[data-bs-theme=dark] [data-ui=track-12],
[data-bs-theme=dark] [data-ui=track-14],
[data-bs-theme=dark] [data-ui=track-22] { background:#1c2935; }
[data-bs-theme=dark] [data-ui=qr-box] { background:#fff; } /* QR : contraste requis pour le scan */

/* ── Trésorerie prévisionnelle : légende de la courbe ─────────────────────── */
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.legend-dot[data-leg=opt]   { background:#8fc7d0; }
.legend-dot[data-leg=rea]   { background:#1e7480; }
.legend-dot[data-leg=pru]   { background:#b9770e; }
.legend-dot[data-leg=seuil] { background:#e74c3c; }
[data-bs-theme=dark] .legend-dot[data-leg=rea] { background:#43b6c4; }
[data-bs-theme=dark] .legend-dot[data-leg=pru] { background:#e3a857; }
[data-bs-theme=dark] .legend-dot[data-leg=seuil] { background:#f1948a; }

/* ── Signature tactile du BL (bl_signer.html) ─────────────────────────────── */
.sig-wrap { position:relative; width:100%; }
.sig-pad {
  display:block; width:100%; height:220px;
  background:#fff; border:2px dashed #b9c6d0; border-radius:10px;
  touch-action:none;            /* indispensable : pas de scroll pendant le tracé */
  cursor:crosshair;
}
.sig-hint {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#9aa7b2; font-size:.95rem; pointer-events:none; user-select:none;
}
[data-bs-theme=dark] .sig-pad { background:#fff; }  /* fond clair requis : signature à l'encre + lisible dans le PDF */
[data-maxh="120"] { max-height:120px; }