/* =====================================================================
   VK Gestion — feuille de style unique
   Outil interne : sobre, dense, lisible. Aucune animation décorative.
   ===================================================================== */

/* ---------------------------------------------------------------
   SOURCE UNIQUE DE VÉRITÉ POUR LES COULEURS
   Aucune valeur hexadécimale ne doit apparaître ailleurs dans ce fichier.
   --------------------------------------------------------------- */
:root {
  /* Marque Vanden Borre Kitchen */
  --vbk-red:        #FF3640;   /* rouge de marque officiel (identité + actions primaires) */
  --vbk-red-dark:   #D92630;   /* survol / état actif */
  --vbk-black:      #1A1A1A;   /* bandeau, texte fort */
  --vbk-graphite:   #2E2E2E;
  --vbk-white:      #FFFFFF;

  /* Neutres d'interface */
  --bg:             #F5F6F7;
  --surface:        #FFFFFF;
  --border:         #E4E7EA;
  --text:           #1A1A1A;
  --text-muted:     #6B7280;

  /* Statuts fonctionnels — jamais le rouge de marque */
  --ok:             #127A45;   /* payé, fait */
  --ok-soft:        #E7F5EC;
  --warn:           #B26A00;   /* à payer, échéance proche */
  --warn-soft:      #FDF3E2;
  --danger:         #9B1C1C;   /* en retard, litige, erreur */
  --danger-soft:    #FCE9E9;

  /* Dérivés (teintes de bordure, survols, fonds) */
  --border-strong:  #CBD1D8;
  --border-ok:      #BFE3D0;
  --border-warn:    #EBCB94;
  /* Hauteur de la barre d'onglets du bas : le panneau « Plus » et la
     calculette s'y posent, ils doivent parler de la même valeur. */
  --tabbar-h:       60px;
  --border-danger:  #F0C9C9;
  --border-dashed:  #C7CDD6;
  --line-soft:      #F0F2F5;
  --surface-alt:    #FAFBFC;
  --surface-hover:  #F1F3F5;
  --surface-sunken: #EEF0F3;
  --row-hover:      #FAFBFC;
  --row-danger:     #FDF4F4;
  --row-danger-hover: #FBECEC;
  --row-select:     #F0F3F8;
  --row-select-hover: #E9EEF6;
  --row-flash:      #DFF3E7;
  --ok-soft-hover:  #DAEEE3;
  --ok-dark:        #0F6A3B;
  --skeleton-a:     #EDEFF2;
  --skeleton-b:     #F6F7F9;
  --art:            #C8D0DB;
  --print-line:     #999999;
  --print-rule:     #DDDDDD;
  --print-zebra:    #F5F5F5;
  --toast-bg:       #21272F;
  --toast-link:     #FFB3B7;
  --row-highlight:  #FFF5CC;

  /* Transparences sur fond foncé */
  --on-dark:        rgba(255, 255, 255, .92);
  --on-dark-soft:   rgba(255, 255, 255, .60);
  --on-dark-fill:   rgba(255, 255, 255, .10);
  --on-dark-fill-2: rgba(255, 255, 255, .20);
  --on-dark-line:   rgba(255, 255, 255, .18);
  --overlay:        rgba(26, 26, 26, .45);

  /* Alias hérités : une seule définition, pas de couleur en dur */
  --muted:     var(--text-muted);
  --primary:   var(--vbk-black);
  --accent:    var(--vbk-red);
  --green:     var(--ok);
  --green-bg:  var(--ok-soft);
  --red:       var(--danger);
  --red-bg:    var(--danger-soft);
  --orange:    var(--warn);
  --orange-bg: var(--warn-soft);
  --grey:      var(--text-muted);
  --grey-bg:   var(--surface-hover);

  --radius: 8px;
  --radius-card: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, .16);
  --shadow-modal: 0 12px 40px rgba(16, 24, 40, .22);
  --appbar-h: 64px;   /* laisse respirer le logo VBK (120px de large) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1 { font-size: 20px; margin: 0; font-weight: 600; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
a { color: var(--accent); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.txt-red { color: var(--red); }
.spacer { flex: 1; }
.sep { color: var(--border); }
.print-only { display: none; }

/* ---------------------------------------------------------------
   Boutons & champs
   --------------------------------------------------------------- */
.btn {
  font: inherit;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); }
.btn:disabled { opacity: .55; cursor: default; }
/* Bouton primaire = rouge de marque (identité), jamais le rouge d'alerte */
.btn-primary { background: var(--vbk-red); border-color: var(--vbk-red); color: var(--vbk-white); }
.btn-primary:hover { background: var(--vbk-red-dark); border-color: var(--vbk-red-dark); }
/* Variante contour : utilisée quand un bouton de marque côtoie une zone d'alerte */
.btn-outline { background: var(--surface); border-color: var(--vbk-red); color: var(--vbk-red); }
.btn-outline:hover { background: var(--surface-hover); border-color: var(--vbk-red-dark); color: var(--vbk-red-dark); }
.btn-danger { background: var(--red); border-color: var(--red); color: var(--vbk-white); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--grey-bg); border-color: transparent; color: var(--text); }
.btn-sm { padding: 5px 9px; min-height: 30px; font-size: 13px; }
.btn-icon { padding: 4px 10px; min-height: 32px; font-size: 16px; line-height: 1; }
.btn-block { width: 100%; }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 9px;
  min-height: 36px;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
textarea { min-height: 54px; resize: vertical; }
label { font-size: 12px; color: var(--muted); font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.check input { min-height: 0; width: 16px; height: 16px; }

.link-btn {
  background: none; border: none; padding: 0; font: inherit; font-weight: 500;
  color: var(--accent); cursor: pointer; text-align: left;
}
.link-btn:hover { text-decoration: underline; }

.icon-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; font-size: 14px; padding: 6px 8px; color: var(--muted); min-height: 32px;
}
.icon-btn:hover { background: var(--grey-bg); color: var(--text); }
.icon-btn.danger:hover { background: var(--red-bg); color: var(--red); }

/* ---------------------------------------------------------------
   Écran de connexion
   --------------------------------------------------------------- */
.login-screen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 20px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.login-logo { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 4px; }
.login-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; text-align: center; }
.login-card label { margin-top: 10px; }
.login-card .btn { margin-top: 18px; }
.login-error {
  margin: 12px 0 0; padding: 8px 10px; font-size: 13px;
  background: var(--red-bg); color: var(--red); border-radius: var(--radius);
}

/* ---------------------------------------------------------------
   Structure de l'application
   --------------------------------------------------------------- */
.app { min-height: 100vh; }

/* Bandeau supérieur — logo VBK blanc + liseré rouge de marque : la signature visuelle */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--appbar-h); z-index: 30;
  background: var(--vbk-black); color: var(--vbk-white);
  border-bottom: 3px solid var(--vbk-red);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 12px;
}
.appbar-logo {
  display: flex; align-items: center; background: none; border: none;
  padding: 0; cursor: pointer; flex: 0 0 auto;
}
.appbar-logo img { width: 120px; height: auto; display: block; }
.appbar-center { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
.appbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 0 auto; }
.appbar .user { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 0; }
.appbar .user-name { font-weight: 600; font-size: 13px; color: var(--vbk-white); }
.appbar .user-role { font-size: 12px; color: var(--on-dark-soft); }
.appbar-btn {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--on-dark);
  background: var(--on-dark-fill); border: 1px solid var(--on-dark-line);
  border-radius: var(--radius); padding: 6px 10px; min-height: 32px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.appbar-btn:hover { background: var(--on-dark-fill-2); color: var(--vbk-white); }
.appbar-btn.round { width: 32px; padding: 0; text-align: center; font-weight: 700; }

/* Sélecteur de mois dans le bandeau */
.appbar .month-picker .btn-icon,
.appbar .month-picker .btn {
  background: var(--on-dark-fill); border-color: var(--on-dark-line); color: var(--on-dark);
}
.appbar .month-picker .btn:hover { background: var(--on-dark-fill-2); color: var(--vbk-white); }
.appbar .month-label { color: var(--vbk-white); }

.sidebar {
  position: fixed; top: var(--appbar-h); left: 0; bottom: 0; width: 220px;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 12px; z-index: 20;
}
.side-note { font-size: 11px; color: var(--muted); line-height: 1.4; margin: 0; padding: 0 8px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 500; text-align: left;
  background: none; border: none; border-radius: var(--radius);
  padding: 9px 10px; color: var(--text); cursor: pointer;
}
.nav-item .ico { color: var(--muted); font-size: 13px; }
.nav-item:hover { background: var(--grey-bg); }
/* Onglet actif : souligné rouge de marque, 2px */
.nav-item.active {
  background: var(--surface-hover); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--vbk-red);
}
.nav-item.active .ico { color: var(--vbk-red); }

.sidebar-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; }
.user { padding: 4px 8px 10px; }
.user-name { font-weight: 600; }
.user-role { font-size: 12px; color: var(--muted); }

.main { margin-left: 220px; padding: calc(var(--appbar-h) + 18px) 22px 40px; max-width: 1500px; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.head-left { display: flex; align-items: center; gap: 10px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sélecteur de mois */
.month-picker { display: flex; align-items: center; gap: 6px; }
.month-label { font-weight: 600; min-width: 130px; text-align: center; }
.month-picker.compact .month-label { min-width: 110px; font-size: 13px; }

/* Barre d'outils de filtres */
.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar select, .toolbar input { min-height: 34px; font-size: 13px; }
.search { flex: 1 1 260px; min-width: 180px; }

/* ---------------------------------------------------------------
   Cartes
   --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.card.pad { padding: 12px 14px; }
.card-head { padding: 12px 14px; border-bottom: 1px solid var(--border); }

.kpi-grid {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(4, 1fr);
}
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 12px 14px; margin: 0; min-width: 0; }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi-value {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
  margin-top: 2px; letter-spacing: -.4px; line-height: 1.2;
}
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* La variation reste neutre : l'orange et le vert sont réservés aux statuts fonctionnels */
.kpi-sub.up, .kpi-sub.down { color: var(--text-muted); }

/* « Reste à payer » : carte plus large, liseré d'alerte dès qu'il reste quelque chose */
.kpi-hero { grid-column: span 2; background: var(--surface-alt); border-color: var(--border-strong); }
.kpi-hero .kpi-value { font-size: 32px; font-weight: 700; }
.kpi-hero.is-alert { border-left: 4px solid var(--danger); }
#card-late { grid-column: span 2; }
.kpi.clickable { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.kpi.clickable:hover { border-color: var(--border-strong); }
.kpi.is-alert .kpi-value { color: var(--red); }

/* Avancement du mois */
.progress-card { display: flex; flex-direction: column; gap: 10px; }
.progress-row { display: flex; align-items: center; gap: 14px; }
.progress-text { font-size: 13px; color: var(--muted); flex: 0 0 auto; min-width: 250px; }
.progress-track { flex: 1; height: 6px; background: var(--grey-bg); border-radius: 3px; overflow: hidden; }
/* Barre d'avancement neutre : le rouge de marque ne doit pas voisiner le rouge d'alerte */
.progress-bar { height: 100%; width: 0; background: var(--vbk-graphite); border-radius: 3px; transition: width .2s ease; }
.progress-bar.full { background: var(--ok); }

/* Blocs d'alerte */
.alerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.alert {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--orange-bg); color: var(--warn);
  border: 1px solid var(--border-warn); border-radius: 10px; padding: 12px 14px; min-height: 52px;
}
.alert:hover { border-color: var(--border-warn); }
.alert.ok { background: var(--green-bg); color: var(--ok); border-color: var(--border-ok); }
.alert-text { font-weight: 500; }
.alert-go { font-size: 12px; opacity: .75; white-space: nowrap; }

/* ---------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
  padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
  background: var(--surface); position: sticky; top: 0; z-index: 1;
}
.table th[data-sort] { cursor: pointer; user-select: none; }
.table th[data-sort]:hover { color: var(--text); }
/* En-tête trié : neutre et gras. Le rouge de marque n'entre pas dans le tableau,
   qui contient déjà le rouge d'alerte des retards. */
.table th.sorted { color: var(--text); font-weight: 700; }
.table th.sorted[data-dir="asc"]::after  { content: " ▲"; font-size: 9px; }
.table th.sorted[data-dir="desc"]::after { content: " ▼"; font-size: 9px; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:hover { background: var(--row-hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Le tableau des factures porte 13 colonnes : on resserre l'espacement
   horizontal pour qu'il tienne sans défilement sur un écran de 1440. */
.table-invoices th, .table-invoices td { padding-left: 8px; padding-right: 8px; }

.cell-supplier, .td-supplier { font-weight: 500; }
.td-number, .td-smartref { font-variant-numeric: tabular-nums; }
.td-smartref { font-size: 12px; }
.ref-chip {
  display: inline-block; font-size: 11px; padding: 1px 6px; margin: 1px 3px 1px 0;
  background: var(--surface-hover); border: 1px solid var(--border); border-radius: 10px;
}
.iban-alert .iban-body { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.iban-compare { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.iban-compare code { background: var(--surface); padding: 1px 6px; border-radius: 4px; }
.iban-warn { margin: 0; font-size: 12px; line-height: 1.5; }
.iban-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.pill.locked { cursor: default; opacity: 1; }
.mob-meta { display: none; }
.txt-orange { color: var(--orange); }

/* Repères de ligne : barre verticale rouge (en retard) ou orange (échéance ≤ 5 jours).
   Les trois sélecteurs ont la même spécificité, l'ordre suffit à les départager. */
.table-invoices tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
.table-invoices tbody tr.row-late td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table-invoices tbody tr.row-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.row-late  { background: var(--row-danger); }
.row-late:hover { background: var(--row-danger-hover); }
.row-checked { background: var(--row-select); }
.row-checked:hover { background: var(--row-select-hover); }
.row-paid-flash { animation: paidflash .6s ease-out; }
@keyframes paidflash { from { background: var(--row-flash); } to { background: transparent; } }

/* Case à cocher + coche « facture complète » */
.th-check, .td-check { width: 46px; white-space: nowrap; }
.row-check { width: 16px; height: 16px; vertical-align: middle; cursor: pointer; accent-color: var(--accent); }
.done-mark { color: var(--green); margin-left: 2px; vertical-align: middle; }
.done-mark .ico-svg { width: 14px; height: 14px; }

/* Boutons d'action : discrets, révélés au survol de la ligne */
.td-actions { text-align: right; white-space: nowrap; }
.td-actions .icon-btn { opacity: 0; transition: opacity .15s ease, background .15s ease; }
.table-invoices tbody tr:hover .td-actions .icon-btn,
.td-actions .icon-btn:focus-visible { opacity: 1; }
.icon-btn .ico-svg { width: 16px; height: 16px; display: block; }

.row-flash { animation: flash 2.2s ease-out; }
@keyframes flash { from { background: var(--row-highlight); } to { background: transparent; } }
.actions { white-space: nowrap; text-align: right; }
.tag {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px;
  background: var(--grey-bg); color: var(--muted); margin-left: 6px;
}

.table-foot {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted);
  background: var(--surface); border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.table-foot strong { color: var(--text); font-variant-numeric: tabular-nums; }
.table-foot .big { font-size: 15px; }

/* Pastilles Smart / WinAuditor / Stock (zone tactile 44px de large) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; min-height: 34px; padding: 0 8px;
  border-radius: 6px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pill .ico-svg { width: 15px; height: 15px; flex: none; }
.pill.wide { min-width: 74px; }
.pill.on  { background: var(--green-bg); color: var(--green); border-color: var(--border-ok); }
.pill.off { background: var(--skeleton-b); color: var(--grey); border: 1px dashed var(--border-dashed); }
.pill.on:hover  { background: var(--ok-soft-hover); }
.pill.off:hover { background: var(--surface-hover); border-color: var(--green); color: var(--green); }
.pill-txt { font-variant-numeric: tabular-nums; }

/* Bouton « Marquer payé » — le geste principal du gérant */
.btn-pay {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--orange-bg); color: var(--orange);
  border: 1px solid var(--border-warn); border-radius: var(--radius);
  padding: 0 10px; min-height: 34px; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-pay .ico-svg { width: 15px; height: 15px; transition: transform .15s ease; }
.btn-pay:hover { background: var(--green-bg); border-color: var(--border-ok); color: var(--green); }
.btn-pay:hover .ico-svg { transform: scale(1.18); }
.btn-pay:disabled { opacity: .6; cursor: default; }

/* Pastille verte « Payé le … » */
.paid-badge {
  display: inline-flex; align-items: stretch;
  background: var(--green-bg); color: var(--green);
  border: 1px solid var(--border-ok); border-radius: var(--radius); overflow: hidden;
  font-size: 12px; font-weight: 600;
}
.paid-badge .ico-svg { width: 15px; height: 15px; }
.paid-badge.static { padding: 0 10px; min-height: 34px; align-items: center; gap: 6px; }
.paid-main, .paid-date {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 600; color: inherit; background: none;
  border: none; cursor: pointer; padding: 0 8px; min-height: 34px;
  transition: background .15s ease;
}
.paid-date { border-left: 1px solid var(--border-ok); font-variant-numeric: tabular-nums; }
.paid-main:hover, .paid-date:hover { background: var(--ok-soft-hover); }

/* Statut secondaire (litige, acompte) */
.status-select { display: none; }
.st-green  { background: var(--green-bg);  color: var(--green);  border-color: var(--border-ok); }
.st-orange { background: var(--orange-bg); color: var(--orange); border-color: var(--border-warn); }
.st-red    { background: var(--red-bg);    color: var(--red);    border-color: var(--border-danger); }
.st-grey   { background: var(--grey-bg);   color: var(--muted);  border-color: var(--border); }

.badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 10px; border: 1px solid transparent;
}

/* États vide / chargement */
.empty {
  padding: 34px 10px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty p { margin: 0; font-size: 14px; }
.empty-art { width: 110px; height: 74px; color: var(--art); }
.skeleton {
  display: block; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%);
  background-size: 300% 100%; animation: sk 1.2s infinite linear;
}
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------
   Fiche fournisseur
   --------------------------------------------------------------- */
.contact-line { font-size: 13px; }
.notes-line { font-size: 13px; margin-top: 6px; white-space: pre-wrap; }
.sd-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.segmented button {
  font: inherit; font-size: 13px; background: var(--surface); border: none;
  padding: 7px 12px; cursor: pointer; color: var(--muted); min-height: 34px;
}
.segmented button.active { background: var(--primary); color: var(--vbk-white); }

/* ---------------------------------------------------------------
   Menu déroulant (export)
   --------------------------------------------------------------- */
.dropdown { position: relative; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(26,31,38,.12);
  min-width: 240px; padding: 4px; display: flex; flex-direction: column;
}
.dd-menu button {
  font: inherit; font-size: 13px; text-align: left; background: none; border: none;
  padding: 9px 10px; border-radius: 6px; cursor: pointer; color: var(--text);
}
.dd-menu button:hover { background: var(--grey-bg); }

/* ---------------------------------------------------------------
   Modales
   --------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.modal-top { z-index: 80; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(17, 22, 29, .42); }
.modal-box {
  position: relative; width: 100%; max-width: 760px;
  background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(17,22,29,.22);
  margin: auto 0;
}
.modal-box.narrow { max-width: 520px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.modal-body { padding: 16px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.col-2 { grid-column: 1 / -1; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline.wrap { flex-wrap: wrap; }
.inline > input { flex: 1; min-width: 0; }
.sub { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.preview {
  background: var(--grey-bg); border-radius: var(--radius); padding: 8px 10px;
  font-weight: 600; font-variant-numeric: tabular-nums; min-height: 36px;
}
.hint { font-size: 12px; margin: 2px 0 0; }
.hint.warn { color: var(--orange); }
.payment-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 0; }
.payment-block legend { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 4px; }
.dup-warning {
  background: var(--orange-bg); color: var(--warn); border: 1px solid var(--border-warn);
  border-radius: var(--radius); padding: 10px 12px; margin: 0; font-size: 13px;
}
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }

/* ---------------------------------------------------------------
   Toasts
   --------------------------------------------------------------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast {
  background: var(--toast-bg); color: var(--vbk-white); border-radius: var(--radius);
  padding: 10px 13px; font-size: 13px; box-shadow: 0 6px 20px rgba(17,22,29,.24);
}
.toast { display: flex; align-items: center; gap: 12px; }
.toast-msg { flex: 1; }
.toast-error { background: var(--red); }
.toast-action {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--toast-link);
  background: none; border: none; cursor: pointer; padding: 2px 0; white-space: nowrap;
}
.toast-action:hover { color: var(--vbk-white); text-decoration: underline; }

/* ---------------------------------------------------------------
   Popover (confirmation de paiement, date, menu ⋯)
   --------------------------------------------------------------- */
.popover {
  position: absolute; z-index: 85; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16,24,40,.16); padding: 10px;
}
.popover.pop-right { min-width: 210px; padding: 4px; }
.pop-msg { margin: 0 0 8px; font-size: 13px; color: var(--text); font-weight: 500; }
.popover input[type="date"] { width: 100%; }
.pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.pop-menu { display: flex; flex-direction: column; }
.pop-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.pop-menu button {
  display: flex; align-items: center; gap: 9px;
  font: inherit; font-size: 13px; text-align: left; color: var(--text);
  background: none; border: none; border-radius: 6px; padding: 8px 9px; cursor: pointer;
  transition: background .15s ease;
}
.pop-menu button:hover { background: var(--grey-bg); }
.pop-menu button.danger { color: var(--red); }
.pop-menu button.danger:hover { background: var(--red-bg); }
.pop-menu .ico-svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pop-menu button.danger .ico-svg { color: var(--red); }

/* ---------------------------------------------------------------
   File « À contrôler » — document à gauche, champs à droite
   --------------------------------------------------------------- */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--danger); color: var(--vbk-white); border-radius: 10px;
}

/* Mémoire fournisseur : champs de nature stable */
.memo-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 10px; }
.memo-block legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.memo-row { display: flex; flex-direction: column; gap: 3px; }
.memo-row.is-diff input { border-color: var(--warn); background: var(--warn-soft); }
.memo-read { font-size: 11px; color: var(--muted); }
.memo-read code { background: var(--surface-hover); padding: 1px 5px; border-radius: 4px; }
.memo-check { font-size: 12px; color: var(--vbk-red); font-weight: 500; }
.memo-hint { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

.memo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
@media (max-width: 900px) { .memo-grid { grid-template-columns: 1fr; } }

/* Escompte */
.discount-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ok-soft); border: 1px solid var(--border-ok); color: var(--ok);
  border-radius: var(--radius); padding: 9px 12px; font-size: 13px; margin-bottom: 12px;
}
.discount-banner strong { font-variant-numeric: tabular-nums; }
.pill-discount {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid var(--border-ok);
}
.pay-choice { display: flex; flex-direction: column; gap: 8px; }
.pay-choice .pop-msg { margin-bottom: 2px; }
.pay-option { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pay-option strong { font-variant-numeric: tabular-nums; }

/* Validation d'une fiche fournisseur pré-remplie */
.validate-fiche { border-left: 3px solid var(--warn); display: flex; flex-direction: column; gap: 12px; }
.vf-head { display: flex; flex-direction: column; gap: 2px; }
.vf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.vf-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vf-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.vf-read { font-size: 11px; color: var(--muted); }
.vf-read code { background: var(--surface-hover); padding: 1px 5px; border-radius: 4px; }
.vf-manual-title { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.vf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Administration */
.role-select { font-size: 12px; min-height: 30px; max-width: 130px; }
.admin-link {
  margin-top: 12px; padding: 12px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid var(--border-warn);
  display: flex; flex-direction: column; gap: 6px;
}
.admin-link input { font-family: inherit; font-size: 12px; }
.admin-link p { margin: 0; }

/* Recherche globale */
.search-box { max-width: 620px; padding: 0; overflow: hidden; }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.search-icon { font-size: 18px; color: var(--muted); }
.search-bar input { flex: 1; border: none; font-size: 16px; padding: 6px 0; }
.search-bar input:focus { outline: none; }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-hint { padding: 18px 16px; color: var(--muted); font-size: 13px; }
.search-hint p { margin: 0 0 6px; }
.search-group { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.search-group:last-child { border-bottom: none; }
.search-group h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 4px 14px 6px; margin: 0;
}
.search-hit {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; font: inherit; background: none; border: none;
  padding: 8px 14px; cursor: pointer; transition: background .15s ease;
}
.search-hit:hover, .search-hit:focus-visible { background: var(--surface-hover); }
.hit-main { font-weight: 600; font-size: 14px; }
.hit-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Réglages : quarantaine et liste blanche */
.q-list { display: flex; flex-direction: column; }
.q-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
}
.q-row:last-child { border-bottom: none; }
.q-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.q-email { font-weight: 600; font-size: 14px; word-break: break-all; }
.q-meta { font-size: 12px; color: var(--muted); }
.q-subject { font-size: 12px; color: var(--muted); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-actions .check { font-size: 12px; color: var(--muted); white-space: nowrap; }
.purge-preview { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.purge-preview.danger { color: var(--danger); font-weight: 600; }

.catchup { display: flex; flex-direction: column; gap: 8px; }
.catchup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.catchup-detail { font-size: 12px; color: var(--muted); }
.smart-field input { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.smart-field { border-left: 3px solid var(--vbk-red); padding-left: 10px; }
.field-hint.danger { color: var(--danger); font-weight: 600; }

.review-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.review-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  overflow: hidden; max-height: calc(100vh - var(--appbar-h) - 120px); overflow-y: auto;
}
.review-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  align-items: center;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px; transition: background .15s ease;
}
.review-item:hover { background: var(--surface-hover); }
.review-item.active { background: var(--row-select); box-shadow: inset 3px 0 0 var(--vbk-red); }
.ri-supplier { font-weight: 600; font-size: 13px; }
.ri-amount { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ri-num { grid-column: 1; font-size: 12px; color: var(--muted); }
.ri-flag {
  grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border-radius: 4px; padding: 1px 6px; justify-self: start;
}

.review-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px; min-width: 0;
}
.review-banner {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--border-warn);
  border-radius: var(--radius); padding: 9px 12px; font-size: 13px;
}
.review-banner.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--border-danger); }
/* Avertissement, pas alerte : il demande une vérification, pas un arrêt.
   Le rouge est réservé à ce qui bloque — l'IBAN, la TVA incohérente. */
.review-banner.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--border-warn); }
.review-banner .ico-svg { width: 16px; height: 16px; flex: none; }

.review-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.review-doc { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.review-doc-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.review-viewer { height: 620px; background: var(--surface-sunken); }
.review-viewer iframe, .review-viewer object { width: 100%; height: 100%; border: none; display: block; }
.review-viewer object .empty { height: 100%; justify-content: center; }
.xml-view { margin: 0; padding: 12px; font-size: 11px; line-height: 1.5; height: 100%; overflow: auto; white-space: pre-wrap; }

.review-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review-fields .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-hint.warn { color: var(--warn); }

/* Le taux de TVA : champ visible, jamais déduit en silence */
.vat-block {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin: 0;
}
.vat-block legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.vat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vat-row select { min-width: 96px; }
.vat-row input { width: 88px; }
.vat-computed { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin-left: auto; }
.vat-computed strong { color: var(--text); font-variant-numeric: tabular-nums; }
.vat-read { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.vat-read strong { color: var(--text); font-variant-numeric: tabular-nums; }
.vat-verdict { font-size: 12px; margin: 6px 0 0; line-height: 1.45; }

.vat-block.is-ok     { border-left-color: var(--ok); }
.vat-block.is-ok     .vat-verdict { color: var(--ok); }
.vat-block.is-warn   { border-left-color: var(--warn); background: var(--warn-soft); }
.vat-block.is-warn   .vat-verdict { color: var(--warn); font-weight: 500; }
.vat-block.is-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.vat-block.is-danger .vat-verdict { color: var(--danger); font-weight: 600; }
.vat-block.is-danger select, .vat-block.is-danger input { border-color: var(--danger); }

.uncertain-box {
  background: var(--warn-soft); border: 1px solid var(--border-warn);
  border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.uncertain-box p { margin: 0 0 2px; font-size: 12px; color: var(--warn); font-weight: 500; }

.review-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.block-reason { margin: 0; font-size: 12px; color: var(--danger); font-weight: 500; }

@media (max-width: 1180px) {
  .review-split { grid-template-columns: 1fr; }
  .review-viewer { height: 420px; }
}
@media (max-width: 900px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-list { max-height: 240px; }
  .review-fields .grid2 { grid-template-columns: 1fr; }
  .vf-grid { grid-template-columns: 1fr; }
  .review-viewer { height: 320px; }
  .nav-badge { margin-left: 6px; }
}

/* ---------------------------------------------------------------
   Visite guidée (premier lancement)
   --------------------------------------------------------------- */
.tour-overlay { position: fixed; inset: 0; z-index: 95; }
.tour-hole {
  position: fixed; border-radius: var(--radius-card); pointer-events: none;
  box-shadow: 0 0 0 9999px var(--overlay);
  outline: 2px solid var(--vbk-red); outline-offset: 0;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-bubble {
  position: fixed; width: 300px; max-width: calc(100vw - 20px);
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal); padding: 14px; z-index: 96;
}
.tour-step { font-size: 11px; font-weight: 600; color: var(--vbk-red); text-transform: uppercase; letter-spacing: .04em; }
.tour-title { font-size: 15px; font-weight: 600; margin: 3px 0 6px; }
.tour-text { font-size: 13px; color: var(--text); margin: 0 0 14px; line-height: 1.5; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------
   Barre d'actions en lot (fin de mois)
   --------------------------------------------------------------- */
.bulk-bar {
  position: fixed; left: 220px; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--toast-bg); color: var(--vbk-white); padding: 10px 18px;
  box-shadow: 0 -2px 12px rgba(16,24,40,.18);
}
.bulk-summary { font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-actions .btn { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); color: var(--vbk-white); }
.bulk-actions .btn:hover { background: rgba(255,255,255,.2); }
.bulk-actions .btn-primary { background: var(--green); border-color: var(--green); }
.bulk-actions .btn-primary:hover { background: var(--ok-dark); }
.bulk-actions .btn-ghost { background: none; border-color: transparent; color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------
   Bouton flottant (mobile) + aide clavier
   --------------------------------------------------------------- */
.fab { display: none; }
.shortcuts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.shortcuts li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.shortcuts span { color: var(--muted); }
kbd {
  display: inline-block; min-width: 24px; text-align: center;
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: var(--grey-bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 6px;
}

/* Infobulles d'aide contextuelle (« ? » à côté des libellés) */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; vertical-align: middle;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--muted); background: var(--surface-hover);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: help; padding: 0;
}
.help-dot:hover { color: var(--vbk-red); border-color: var(--vbk-red); }
.field-hint { font-size: 11px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------
   Mode d'emploi (guide.html)
   --------------------------------------------------------------- */
.guide-appbar-title { font-size: 14px; font-weight: 500; color: var(--on-dark); }
.guide {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px;
  max-width: 1080px; margin: 0 auto;
  padding: calc(var(--appbar-h) + 30px) 20px 70px;
}
.guide-toc { position: sticky; top: calc(var(--appbar-h) + 24px); align-self: start; }
.guide-toc-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; padding-left: 10px;
}
.guide-toc a {
  display: block; padding: 6px 10px; font-size: 13px; line-height: 1.35;
  color: var(--muted); text-decoration: none; border-left: 2px solid var(--border);
  transition: color .15s ease, border-color .15s ease;
}
.guide-toc a:hover { color: var(--vbk-red); border-left-color: var(--vbk-red); }

.guide-content { max-width: 720px; }
.guide-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.4px; }
.guide-lead { font-size: 15px; color: var(--muted); margin: 0 0 34px; }
.guide-content section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px;
}
.guide-content h2 {
  font-size: 19px; font-weight: 600; margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.guide-content p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.guide-content ul, .guide-content ol { font-size: 14px; line-height: 1.65; padding-left: 20px; margin: 0 0 12px; }
.guide-content li { margin-bottom: 6px; }
.guide-content code {
  font-size: 13px; background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.guide-note {
  background: var(--surface-hover); border-left: 3px solid var(--vbk-red);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 14px; font-size: 13px !important;
}
.faq-q { font-weight: 600; margin-bottom: 4px !important; }
.guide-highlight { border-color: var(--border-strong); border-left: 4px solid var(--vbk-red); }

.guide-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 14px; }
.guide-table th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 8px 10px; vertical-align: top;
}
.guide-table td { border-bottom: 1px solid var(--line-soft); padding: 9px 10px; vertical-align: top; line-height: 1.55; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-colors td:first-child { white-space: nowrap; font-weight: 600; }
.swatch {
  display: inline-block; width: 13px; height: 13px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border);
}
.sw-ok { background: var(--ok); border-color: var(--ok); }
.sw-warn { background: var(--warn); border-color: var(--warn); }
.sw-danger { background: var(--danger); border-color: var(--danger); }
.sw-todo { background: var(--surface-hover); border: 1px dashed var(--border-dashed); }

.guide-foot { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.guide-foot .btn { text-decoration: none; display: inline-flex; align-items: center; }
.guide-print-head { display: none; }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; gap: 18px; padding: calc(var(--appbar-h) + 16px) 12px 40px; }
  .guide-toc { position: static; }
  .guide-appbar-title { display: none; }
  .guide-content section { padding: 16px; }
}

/* ---------------------------------------------------------------
   Barre d'onglets mobile
   --------------------------------------------------------------- */
.tabbar { display: none; }

/* ---------------------------------------------------------------
   Responsive — tablette
   --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-text { min-width: 0; }
  .progress-row { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .q-row { flex-wrap: wrap; }
  .q-row .btn { width: 100%; }

  /* Le bandeau passe sur deux rangées : logo + compte, puis le sélecteur de mois */
  :root { --appbar-h: 100px; }

  .sidebar { display: none; }
  .main { margin-left: 0; padding: calc(var(--appbar-h) + 12px) 12px 96px; }

  .appbar { padding: 8px 12px; flex-wrap: wrap; align-content: center; row-gap: 6px; }
  .appbar-logo img { width: 96px; }
  .appbar-center { order: 3; flex: 0 0 100%; }
  .appbar .month-picker { width: 100%; justify-content: center; }
  .appbar .user-role { display: none; }
  .appbar-btn { font-size: 0; padding: 6px 9px; }
  .appbar-btn#btn-help { font-size: 13px; }
  .appbar-btn#btn-logout::after { content: "Quitter"; font-size: 13px; }

  .bulk-bar { left: 0; bottom: 56px; padding: 10px 12px; }
  .bulk-summary { font-size: 13px; }
  .bulk-actions { width: 100%; }
  .bulk-actions .btn { flex: 1 1 auto; min-height: 40px; }

  /* Bouton flottant « + » */
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: 70px; z-index: 46;
    width: 52px; height: 52px; border-radius: 26px;
    background: var(--vbk-red); color: var(--vbk-white); border: none;
    font-size: 28px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(16,24,40,.24);
  }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: inherit; font-size: 11px; font-weight: 500; background: none; border: none;
    padding: 9px 4px; color: var(--muted); cursor: pointer; min-height: 52px;
  }
  .tabbar-item .ico { font-size: 15px; }
  .tabbar-item.active { color: var(--text); font-weight: 600; box-shadow: inset 0 2px 0 var(--vbk-red); }
  .tabbar-item.active .ico { color: var(--vbk-red); }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 22px; }
  .kpi-hero .kpi-value { font-size: 26px; }
  .alerts { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .month-label { min-width: 0; flex: 1; }
  .search { flex: 1 1 100%; }
  .toolbar select { flex: 1 1 46%; min-width: 0; }
  .page-head h1 { font-size: 18px; }
  .table-wrap { overflow-x: visible; }

  /* --- Tableaux génériques : une carte par ligne, libellés à gauche --- */
  .table { font-size: 14px; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    margin: 0 0 10px; padding: 6px 12px; background: var(--surface);
  }
  .table tbody tr:hover { background: var(--surface); }
  .table td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    border: none; border-bottom: 1px solid var(--line-soft); padding: 7px 0; min-height: 40px;
  }
  .table tr td:last-child { border-bottom: none; }
  .table td::before {
    content: attr(data-label);
    font-size: 12px; font-weight: 600; color: var(--muted); flex: 0 0 auto;
  }
  .table td.num { text-align: right; }
  .table .empty-row td, .table .skeleton-row td { display: block; }
  .table .empty-row td::before, .table .skeleton-row td::before { content: ""; }
  .row-overdue { background: var(--row-danger); border-color: var(--border-danger); }

  /* --- Factures : carte dédiée (fournisseur, méta, montant, pastilles, paiement) --- */
  .table-invoices tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 12px; position: relative;
  }
  /* width:auto est indispensable : la règle générique met les td à 100 %,
     ce qui empilerait verticalement tous les éléments de la carte. */
  .table-invoices tbody tr td { border: none; padding: 0; min-height: 0; width: auto; }
  .table-invoices tbody tr td::before { content: none; }
  .table-invoices tbody tr td:first-child { box-shadow: none; }
  .row-late  { border-left: 3px solid var(--red); }
  .row-soon  { border-left: 3px solid var(--orange); }
  .row-checked { border-color: var(--accent); }

  .table-invoices .td-check { order: 0; width: auto; flex: 0 0 auto; }
  .table-invoices .td-supplier { order: 1; flex: 1 1 auto; font-size: 16px; font-weight: 600; }
  .table-invoices .td-amount { order: 2; flex: 0 0 auto; margin-left: auto; font-size: 18px; font-weight: 700; }
  .table-invoices .td-number { order: 3; flex: 0 0 100%; font-size: 12px; color: var(--muted); font-weight: 500; }
  .table-invoices .mob-meta { display: inline; }
  .table-invoices .mob-meta::before { content: " · "; }
  .table-invoices .td-date, .table-invoices .td-due { display: none; }

  .table-invoices .td-smart, .table-invoices .td-win, .table-invoices .td-stock {
    order: 4; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .table-invoices .td-smart::before, .table-invoices .td-win::before, .table-invoices .td-stock::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  }
  .table-invoices .td-actions { order: 5; flex: 1 1 auto; text-align: right; }
  .table-invoices .td-actions .icon-btn { opacity: 1; min-height: 44px; min-width: 44px; }
  .table-invoices .td-status { order: 6; flex: 0 0 100%; }
  .table-invoices .td-status .btn-pay,
  .table-invoices .td-status .paid-badge { width: 100%; justify-content: center; font-size: 14px; }
  /* la zone tactile utile est celle des boutons, pas du conteneur */
  .table-invoices .td-status .btn-pay,
  .table-invoices .td-status .paid-main,
  .table-invoices .td-status .paid-date { min-height: 44px; }
  .table-invoices .td-status .paid-main { flex: 1; justify-content: center; }
  .table-invoices .empty-row { display: block; padding: 0; border: none; background: none; }

  /* Zone tactile confortable sur mobile */
  .pill { min-width: 56px; min-height: 44px; font-size: 13px; }
  .row-check { width: 20px; height: 20px; }
  .table-foot { justify-content: space-between; position: static; }
  .modal { padding: 0; }
  .modal-box { border-radius: 0; min-height: 100vh; }
}

@media (pointer: coarse) {
  .pill { min-height: 44px; }
}

/* ---------------------------------------------------------------
   Tablette en paysage (900–1180 px) : on conserve le tableau dense,
   mais les grilles à plusieurs colonnes se desserrent.
   --------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .sidebar { width: 190px; }
  .main { margin-left: 190px; padding-left: 16px; padding-right: 16px; }
  .bulk-bar { left: 190px; }
  .review-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .review-viewer { height: 480px; }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .toolbar select { flex: 1 1 30%; }
  .guide { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }

  /* Le tableau des factures doit tenir sans défilement latéral sur un iPad :
     on resserre plutôt que de laisser l'utilisateur pousser le tableau. */
  .table-invoices { font-size: 12px; }
  .table-invoices th, .table-invoices td { padding-left: 6px; padding-right: 6px; }
  .table-invoices .pill { min-width: 36px; padding: 0 5px; gap: 3px; }
  .table-invoices .pill.wide { min-width: 62px; }
  .table-invoices .btn-pay { padding: 0 7px; font-size: 11px; gap: 4px; }
  .table-invoices .paid-main, .table-invoices .paid-date { padding: 0 6px; }
  .table-invoices .td-date, .table-invoices .td-due { white-space: nowrap; }
  .th-check, .td-check { width: 34px; }
  /* Sur tablette, l'usage est la consultation, pas l'encodage : la colonne
     Stock passe à la trappe pour que le tableau tienne sans défilement.
     Elle reste accessible dans la fiche facture et sur le tableau de bord. */
  /* Ciblage par classe et non par rang : ajouter une colonne ne doit pas
     décaler silencieusement la règle. */
  .table-invoices .td-stock, .table-invoices .th-stock,
  .table-invoices .td-smartref, .table-invoices .th-smartref,
  .table-invoices .td-refs, .table-invoices .th-refs { display: none; }
  .table-invoices .help-dot { display: none; }
  .table-invoices .td-actions .icon-btn { padding: 4px 5px; }
}

/* Le message de confirmation est écrit en textContent : sans cela ses
   retours à la ligne seraient avalés, et deux lignes qui se ressemblent
   deviendraient indistinguables au moment de supprimer. */
#confirm-message { white-space: pre-line; }

/* Validation en série, en tête de la file à contrôler */
.review-bulk {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-alt);
}

/* Boutons de rattrapage sous la barre d'avancement */
.catchup-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}

/* ---------------------------------------------------------------
   Mémoire — ce qui doit rester
   --------------------------------------------------------------- */
.memo-barre { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.memo-barre .search { flex: 1 1 200px; min-width: 0; }

.memo {
  display: block; margin-bottom: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.memo.epinglee { border-color: var(--border-warn); background: var(--warn-soft); }
.memo.en-edition { border-color: var(--primary); }
.memo-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.memo-titre { font-size: 15px; margin: 0; }
.memo-theme {
  padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken);
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
/* Le texte est rendu tel qu'il a été tapé : c'est une note, pas un document */
.memo-corps { font-size: 13.5px; line-height: 1.55; white-space: normal; }
.memo-pied { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); }

.memo-form { display: flex; flex-direction: column; gap: 8px; }
.memo-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); resize: vertical;
}
.memo-form textarea:focus, .memo-form .search:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--row-select);
}
.memo-form-bas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.memo-form-bas select {
  padding: 7px 9px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text);
}

@media (max-width: 900px) { .memo-form-bas .btn { flex: 1 1 auto; } }

/* ---------------------------------------------------------------
   À faire — la liste partagée
   --------------------------------------------------------------- */
.tache-ajout { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tache-ajout .search { width: 100%; font-size: 15px; padding: 11px 12px; }
.tache-ajout-bas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tache-ajout-bas select, .tache-ajout-bas input[type="date"] {
  flex: 1 1 130px; min-width: 0; padding: 8px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.tache-ajout-bas .btn { flex: 0 0 auto; }

.taches-resume { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.taches-titre {
  margin: 16px 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.tache {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.tache.haute { border-left-color: var(--warn); }
.tache.normale { border-left-color: var(--border-strong); }
.tache.basse { border-left-color: var(--border); }
.tache.retard { border-left-color: var(--danger); background: var(--row-danger); }
/* Terminée : présente, mais qui ne réclame plus rien */
.tache.close { opacity: .6; }
.tache.close .tache-titre { text-decoration: line-through; }

.tache-haut { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.tache-coche {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.tache-coche:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.tache-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tache-titre { font-size: 14px; font-weight: 600; }
.tache-detail { font-size: 12.5px; color: var(--text-muted); }
.tache-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.tache-prio {
  padding: 1px 7px; border-radius: 999px; background: var(--warn-soft);
  color: var(--warn); border: 1px solid var(--border-warn); font-weight: 700;
}
.tache-reports { color: var(--warn); }
.tache-annulee, .tache-faite {
  padding: 1px 7px; border-radius: 999px; background: var(--surface-sunken); font-weight: 600;
}
.tache-fil {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; padding: 2px 4px; position: relative; color: var(--text-muted);
}
.tache-n {
  position: absolute; top: -2px; right: -4px; min-width: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--primary); color: var(--on-dark);
  font-size: 10px; font-weight: 700; line-height: 15px;
}

.tache-echange { padding: 0 12px 12px 52px; border-top: 1px solid var(--line-soft); }
.tache-mot { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; font-size: 12.5px; }
.tache-mot + .tache-mot { border-top: 1px solid var(--line-soft); }
.tache-mot.auto { color: var(--text-muted); font-style: italic; }
.tache-qui { font-weight: 600; }
.tache-quand { color: var(--text-muted); font-size: 11px; }
.tache-texte { flex: 1 1 100%; }
.tache-repondre { display: flex; gap: 6px; margin: 8px 0; }
.tache-repondre .search { flex: 1 1 auto; min-width: 0; }
.tache-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 900px) {
  /* Sur téléphone, l'échange reprend toute la largeur : 52px d'alinéa
     sur un écran de 375 ne laisseraient rien pour le texte. */
  .tache-echange { padding: 0 12px 12px; }
  .tache-actions .btn, .tache-ajout-bas .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------
   Planning — le mois en calendrier
   --------------------------------------------------------------- */
.pl-resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pl-chiffre {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.pl-chiffre strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.pl-chiffre-lbl { font-size: 12px; color: var(--text-muted); }
.pl-chiffre.alerte { border-color: var(--border-danger); background: var(--danger-soft); }
.pl-chiffre.alerte strong { color: var(--danger); }
.pl-chiffre.gain { border-color: var(--border-ok); background: var(--ok-soft); }
.pl-chiffre.gain strong { color: var(--ok); }

.pl-entetes {
  /* Une colonne étroite en tête pour le numéro de semaine, puis les sept jours */
  display: grid; grid-template-columns: 38px repeat(7, 1fr); gap: 6px;
  margin-bottom: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.pl-entetes span { padding-left: 4px; }

.pl-grille { display: grid; grid-template-columns: 38px repeat(7, 1fr); gap: 6px; }

/* Le numéro de semaine : présent, jamais concurrent des chiffres du mois */
.pl-sem {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--surface-sunken);
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pl-sem-tete { text-align: center; }
.pl-case {
  min-height: 96px; padding: 6px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); overflow: hidden;
}
.pl-case.vide { background: transparent; border-color: transparent; }
.pl-case.charge { cursor: pointer; }
.pl-case.charge:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.pl-case.retard { border-color: var(--border-danger); background: var(--row-danger); }
.pl-case.aujourdhui { border-color: var(--primary); box-shadow: 0 0 0 2px var(--row-select); }

.pl-num { font-size: 12px; font-weight: 700; color: var(--text-muted); display: flex; gap: 5px; align-items: baseline; }
.pl-today { font-size: 10px; font-weight: 600; color: var(--vbk-red); text-transform: uppercase; }

.pl-items { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-item {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 11px; line-height: 1.3; padding-left: 6px;
  border-left: 2px solid var(--warn);
}
.pl-item.escompte { border-left-color: var(--ok); }
.pl-item.en-retard { border-left-color: var(--danger); }
.pl-lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-mt { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pl-item.escompte .pl-mt { color: var(--ok); }
.pl-plus { font-size: 10.5px; color: var(--text-muted); padding-left: 8px; }
.pl-total {
  margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;
}

.pl-legende { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pl-pastille.echeance { background: var(--warn); }
.pl-pastille.escompte { background: var(--ok); }
.pl-pastille.en-retard { background: var(--danger); }

@media (max-width: 900px) {
  .pl-resume { grid-template-columns: 1fr; }
  /* Sur téléphone le mois se lit en liste : une colonne de numéros de
     semaine n'aurait plus de lignes à numéroter. */
  .pl-sem, .pl-sem-tete { display: none; }
  /* Sept colonnes sur un téléphone donneraient des cases illisibles :
     le mois se lit alors comme une liste de jours. */
  .pl-entetes { display: none; }
  .pl-grille { grid-template-columns: 1fr; }
  .pl-case { min-height: 0; }
  .pl-case.vide { display: none; }
  .pl-case:not(.charge) { display: none; }
}

/* ---------------------------------------------------------------
   Aperçu du courrier
   --------------------------------------------------------------- */
.courrier[hidden] { display: none; }
.courrier-titre {
  margin: 10px 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.courrier-liste { list-style: none; margin: 0; padding: 0; }
.courrier-item {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 9px 10px; border-left: 3px solid var(--border);
  border-bottom: 1px solid var(--line-soft); background: var(--surface);
}
.courrier-item:last-child { border-bottom: 0; }
.courrier-item.urgent { border-left-color: var(--danger); background: var(--row-danger); }
/* Déjà vu : présent, mais qui ne réclame plus l'attention */
.courrier-item.vu { opacity: .62; }
.courrier-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.courrier-de { font-weight: 600; font-size: 13px; }
.courrier-objet { font-size: 13px; color: var(--text); }
.courrier-resume { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.courrier-cote {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex: 0 0 auto; text-align: right;
}
.courrier-cat {
  padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken);
  color: var(--text-muted); font-size: 11px; font-weight: 600;
}
.courrier-action {
  padding: 1px 8px; border-radius: 999px; background: var(--warn-soft);
  color: var(--warn); border: 1px solid var(--border-warn);
  font-size: 11px; font-weight: 700;
}
.courrier-rien { color: var(--text-muted); font-size: 13px; margin: 4px 0; }
.courrier-negligeable {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-alt); color: var(--text-muted);
  font-size: 12.5px; line-height: 1.45;
}

@media (max-width: 900px) {
  .courrier-item { flex-direction: column; gap: 4px; }
  .courrier-cote { flex-direction: row; align-items: center; text-align: left; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   Aide dans l'application
   --------------------------------------------------------------- */
/* L'aide contient désormais le mode d'emploi entier, pas seulement un
   extrait : elle a besoin de la place d'une page, pas d'une bulle. */
.help-card { width: min(96vw, 900px); max-height: 92vh; display: flex; flex-direction: column; }
.help-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.help-body .search { width: 100%; }

.help-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.help-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text);
}
.help-item:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.help-item-title { font-weight: 600; font-size: 14px; }
.help-item-snippet { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* Le contenu vient du guide. On lui rend sa taille de lecture : ce texte
   se lit vraiment, parfois debout dans un magasin, et 13,5 px sur un
   téléphone ne se lit pas — c'était le reproche. */
.help-article { overflow-y: auto; padding: 0 6px 4px 2px; max-width: 68ch; }
.help-article h2 { display: none; }          /* le titre est déjà dans l'en-tête */
.help-article h3 {
  font-size: 17px; font-weight: 700; margin: 22px 0 8px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--text);
}
.help-article h3:first-child { border-top: none; padding-top: 0; margin-top: 4px; }
.help-article p, .help-article li { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.help-article p { margin: 0 0 12px; }
.help-article ul, .help-article ol { margin: 8px 0 16px; padding-left: 22px; }
.help-article li { margin-bottom: 7px; }
.help-article strong { font-weight: 700; }
.help-article code {
  font-size: 14px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-sunken);
}
/* Les encarts du guide gardent leur relief dans l'aide */
.help-article .guide-note {
  margin: 14px 0; padding: 12px 14px; border-radius: 8px;
  background: var(--surface-alt); border-left: 3px solid var(--border-strong);
  font-size: 15px;
}
.help-article .guide-note.warn {
  background: var(--warn-soft); border-left-color: var(--warn);
}
.help-article .guide-note p:last-child { margin-bottom: 0; }
.help-article .guide-steps li { margin-bottom: 10px; }
.help-article .tag {
  font-size: 12px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted); font-weight: 600;
}

.help-item-title { font-size: 15px; }
.help-list { gap: 6px; }

.help-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  /* Sur téléphone, l'aide prend tout l'écran : c'est un document qu'on
     lit, pas une info-bulle qu'on consulte du coin de l'œil. */
  .help-card { width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .help-foot .btn { flex: 1 1 auto; }
  .help-article { max-width: none; }
  .help-article p, .help-article li { font-size: 16px; }
  .help-article h3 { font-size: 18px; }
}

/* ---------------------------------------------------------------
   Calculette à bande
   --------------------------------------------------------------- */
.calc {
  /* Au-dessus des fenêtres de saisie (.modal 70, .modal-top 80) : c'est
     précisément en remplissant un montant qu'on a besoin de calculer.
     Sous les toasts (90), qui doivent rester lisibles. */
  position: fixed; right: 18px; bottom: 18px; z-index: 88;
  width: min(94vw, 320px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); box-shadow: 0 16px 40px var(--overlay);
}
.calc[hidden] { display: none; }
.calc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* La bande : ce qui a été saisi reste sous les yeux */
.calc-tape {
  list-style: none; margin: 0; padding: 6px; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt);
  font-variant-numeric: tabular-nums;
}
.calc-tape li {
  display: grid; grid-template-columns: 20px 1fr auto 20px;
  align-items: center; gap: 6px; padding: 3px 2px; font-size: 13px;
}
.calc-tape li + li { border-top: 1px solid var(--line-soft); }
.calc-vide { display: block !important; color: var(--text-muted); font-size: 12.5px; padding: 6px 2px; }
.calc-op  { color: var(--text-muted); font-weight: 700; }
.calc-val { color: var(--text); }
.calc-run { color: var(--text-muted); font-size: 12px; }
.calc-del {
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; line-height: 1; padding: 0 2px;
}
.calc-del:hover { color: var(--danger); }

.calc-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.calc-total { font-size: 20px; font-variant-numeric: tabular-nums; }

.calc-entry { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 5px; }
.calc-entry input {
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.calc-entry input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--row-select); }
.calc-vat, .calc-foot { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.calc-vat .btn { flex: 1 1 auto; font-size: 11.5px; padding: 5px 6px; }
.calc-remise { border-top: 1px solid var(--line-soft); padding-top: 6px; }
.calc-lbl { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

@media (max-width: 900px) {
  .calc { right: 10px; left: 10px; bottom: calc(var(--tabbar-h, 60px) + 12px); width: auto; }
}

/* Petit « = » accolé à un champ de montant : le chemin le plus court
   vers la calculette, là où le besoin naît. */
.field-with-calc { display: flex; gap: 6px; align-items: stretch; }
.field-with-calc input { flex: 1 1 auto; min-width: 0; }
.btn-calc-inline {
  flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-alt); color: var(--text-muted);
  cursor: pointer; font-weight: 700;
}
.btn-calc-inline:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

/* ---------------------------------------------------------------
   Filtres de la file à contrôler
   --------------------------------------------------------------- */
.review-filters { display: flex; gap: 6px; margin-bottom: 8px; }
.review-filters select {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}

/* ---------------------------------------------------------------
   Bandeau de nouvelle version
   --------------------------------------------------------------- */
.update-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 620px); padding: 10px 14px;
  border: 1px solid var(--on-dark-line); border-radius: 12px;
  background: var(--toast-bg); color: var(--on-dark);
  font-size: 13.5px; box-shadow: 0 10px 30px var(--overlay);
}
.update-banner[hidden] { display: none; }
.update-banner .btn-ghost { color: var(--on-dark-soft); }

/* ---------------------------------------------------------------
   Sauvegardes
   --------------------------------------------------------------- */
.bk-state {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
  background: var(--surface-alt);
}
.bk-state strong { font-size: 13px; }
.bk-state span { font-size: 12.5px; color: var(--text-muted); }
.bk-state.is-ok  { border-left-color: var(--ok); }
.bk-state.is-bad { border-left-color: var(--danger); background: var(--danger-soft); }
.bk-state.is-bad span { color: var(--danger); }

/* ---------------------------------------------------------------
   Contrôle de sécurité
   --------------------------------------------------------------- */
.sec-list { list-style: none; margin: 0; padding: 4px 12px 14px; }
.sec-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.sec-list li:last-child { border-bottom: 0; }
.sec-mark {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.sec-ok   .sec-mark { background: var(--ok-soft);     color: var(--ok); }
.sec-warn .sec-mark { background: var(--warn-soft);   color: var(--warn); }
.sec-bad  .sec-mark { background: var(--danger-soft); color: var(--danger); }
.sec-text { display: flex; flex-direction: column; gap: 2px; }
.sec-text strong { font-size: 13px; }
.sec-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.sec-bad .sec-text span { color: var(--danger); }

/* ---------------------------------------------------------------
   Fiches fournisseur en double
   --------------------------------------------------------------- */
.sup-dup { border-left: 4px solid var(--warn); }
.dup-sup { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.dup-sup:first-of-type { border-top: 0; }
.dup-sup-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dup-sup-list { list-style: none; margin: 0; padding: 0; }
.dup-sup-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 0 5px 12px; border-left: 2px solid var(--border);
}
.dup-sup-name { font-weight: 600; font-size: 13.5px; }

/* ---------------------------------------------------------------
   Doublons
   --------------------------------------------------------------- */
.dup-head td {
  padding: 10px 10px 6px;
  background: var(--surface-alt);
  border-top: 2px solid var(--border-strong);
}
.dup-level {
  display: inline-block; margin-right: 8px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.dup-certain  { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--border-danger); }
.dup-probable { background: var(--warn-soft);   color: var(--warn);   border: 1px solid var(--border-warn); }
.dup-verifier { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); }
.dup-reason { font-size: 12.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------
   Période affichée : mois · trimestre · année · dates au choix
   --------------------------------------------------------------- */
.range-fields { display: inline-flex; align-items: center; gap: 6px; }
.range-fields input[type="date"] {
  padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.range-fields input[type="date"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--row-select);
}
.range-fields[hidden], select[hidden] { display: none; }

/* Libellé réservé aux lecteurs d'écran : présent, jamais visible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Séparateur dans le menu d'export : les deux formats du dessus sont
   ceux qu'on donne au comptable, ceux du dessous restent du dépannage. */
.dd-sep { height: 1px; margin: 5px 0; background: var(--border); }

/* ---------------------------------------------------------------
   Vues du tableau : factures · à contrôler · documents
   --------------------------------------------------------------- */
.view-chips { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip:hover { background: var(--surface-hover); color: var(--text); }
.chip.active {
  background: var(--primary); border-color: var(--primary); color: var(--on-dark);
}
.chip-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text);
  font-size: 11px; font-variant-numeric: tabular-nums; text-align: center;
}
.chip.active .chip-count { background: var(--on-dark-fill-2); color: var(--on-dark); }
.chip-count[hidden] { display: none; }

/* ---------------------------------------------------------------
   Référence Smart saisie dans le tableau
   --------------------------------------------------------------- */
/* Un champ transparent ressemble à du texte mort : personne ne devine
   qu'on peut y taper. Vide, il se montre donc comme un champ — pointillés
   et fond léger. Rempli, il s'efface pour ne pas alourdir le tableau. */
.smartref-input {
  width: 100%; min-width: 90px; max-width: 140px;
  padding: 4px 6px; border: 1px dashed var(--border-dashed); border-radius: 6px;
  background: var(--surface-alt); color: var(--text);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  cursor: text;
}
.smartref-input:not(:placeholder-shown) {
  border-color: transparent; background: transparent; font-weight: 600;
}
.smartref-input::placeholder { color: var(--text-muted); font-style: italic; }
.smartref-input:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.smartref-input:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
  box-shadow: 0 0 0 3px var(--row-select);
}
.smartref-input.saving { opacity: .55; }
.smartref-input.saved { border-color: var(--border-ok); background: var(--ok-soft); }

/* ---------------------------------------------------------------
   Pièces qui ne sont pas des factures
   --------------------------------------------------------------- */
.table-invoices tbody tr.row-document { cursor: pointer; }
.row-document .td-doc { padding: 8px 10px; }
.doc-kind {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.doc-file { font-size: 13px; color: var(--text); word-break: break-all; }
.doc-summary {
  display: block; margin-top: 3px; max-width: 80ch;
  font-size: 12px; line-height: 1.45; color: var(--text-muted);
}

/* Une ligne de facture s'ouvre au clic : on l'annonce au curseur */
.table-invoices tbody tr[data-id] { cursor: pointer; }
.table-invoices tbody tr[data-id] .td-check,
.table-invoices tbody tr[data-id] .td-smartref,
.table-invoices tbody tr[data-id] .td-actions { cursor: auto; }

/* ---------------------------------------------------------------
   Pièce ouverte en pleine page depuis le tableau
   --------------------------------------------------------------- */
.review-back { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.review-layout.solo .review-list { display: none; }
.review-layout.solo { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------
   Impression / PDF
   --------------------------------------------------------------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: var(--vbk-white); font-size: 11px; }
  /* Le mode d'emploi s'imprime en portrait */
  body.guide-body { font-size: 12px; }
  @page :first { margin: 12mm; }
  .sidebar, .appbar, .tabbar, .toolbar, .page-actions, .no-print, .fab, .bulk-bar,
  .modal, .toasts, .popover, .month-picker, .alerts, .segmented, .sd-toolbar,
  .progress-card, .td-check, .th-check, .td-actions { display: none !important; }
  .main { margin: 0; padding: 0; max-width: none; }
  .table-foot { position: static; }
  .print-only { display: block; margin-bottom: 10px; font-size: 13px; }
  #print-header { display: flex; align-items: center; gap: 14px; }
  #print-header img { width: 150px; height: auto; }

  /* Mode d'emploi : une section ne doit jamais être coupée en deux */
  .guide { display: block; padding: 0; max-width: none; }
  .guide-content { max-width: none; }
  .guide-print-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .guide-title { font-size: 20px; }
  .guide-content section {
    border: none; box-shadow: none; padding: 0; margin: 0 0 18px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .guide-content section + section { break-before: page; page-break-before: always; }
  .guide-content h2 { font-size: 15px; }
  .guide-table { font-size: 11px; }
  .card { border: none; box-shadow: none; margin: 0 0 10px; }
  .card-head { padding: 0 0 6px; border: none; }
  .table-wrap { overflow: visible; }
  .table { font-size: 10px; }
  .table th { border-bottom: 1px solid var(--print-line); color: var(--vbk-black); position: static; }
  .table td { border-bottom: 1px solid var(--print-rule); }
  .row-late, .row-soon, .row-overdue { background: var(--print-zebra) !important; }
  .pill, .btn-pay, .paid-badge {
    border: 1px solid var(--print-line); background: none !important; color: var(--vbk-black) !important;
    min-width: 0; min-height: 0; padding: 0 4px;
  }
  .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kpi-hero, #card-late { grid-column: span 1; }
  .kpi { border: 1px solid var(--print-rule); }
}

/* =====================================================================
   Forcer l'acceptation
   La couleur dit ce que c'est : un geste permis, mais qui n'est pas la
   marche normale. Ni rouge — ce n'est pas une erreur — ni neutre.
   ===================================================================== */
.btn-warn {
  background: var(--warn); color: var(--vbk-white); border-color: var(--warn);
}
.btn-warn:hover { filter: brightness(.94); }

.force-zone {
  margin-top: 10px; padding: 14px; border-radius: 10px;
  background: var(--warn-soft); border: 1px solid var(--border-warn);
}
.force-zone label { display: block; font-weight: 600; margin-bottom: 6px; }
.force-zone textarea {
  width: 100%; font: inherit; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  resize: vertical;
}
.force-quoi { margin: 0 0 10px; font-size: 13px; color: var(--warn); }
.force-avertissement { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.force-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* TVA saisie à la main : le champ euro prend la place du champ pourcent */
#rv-vat-amount { width: 120px; }
.vat-mixte { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Marque « forcée » dans les listes */
.st-forcee {
  background: var(--warn-soft); color: var(--warn); border-color: var(--border-warn);
}

/* =====================================================================
   Téléphone : le panneau « Plus »
   Cinq onglets en bas ne peuvent pas porter neuf écrans. Le reste vient
   d'ici — sinon il n'existe tout simplement pas sur un téléphone.
   ===================================================================== */
.sheet-backdrop, .plus-sheet { display: none; }

@media (max-width: 900px) {
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 48;
    background: rgba(16, 24, 40, .38);
  }
  .sheet-backdrop[hidden] { display: none; }

  .plus-sheet {
    display: block; position: fixed; left: 0; right: 0; z-index: 49;
    bottom: calc(var(--tabbar-h, 60px) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0; padding: 14px 12px 18px;
    box-shadow: 0 -8px 26px rgba(16, 24, 40, .18);
    max-height: 70vh; overflow-y: auto;
  }
  .plus-sheet[hidden] { display: none; }

  .plus-titre {
    margin: 0 0 10px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  .plus-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    font: inherit; text-align: left; background: none; border: none;
    border-bottom: 1px solid var(--border); padding: 12px 4px;
    color: var(--text); cursor: pointer; min-height: 56px;
  }
  .plus-item[hidden] { display: none; }
  .plus-item .ico {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; font-size: 16px;
    background: var(--surface-hover); color: var(--vbk-red);
  }
  .plus-item strong { display: block; font-size: 15px; font-weight: 600; }
  .plus-item small { display: block; font-size: 12px; color: var(--muted); }
  .plus-fermer { width: 100%; margin-top: 14px; min-height: 44px; }
}

/* Aide-mémoire attaché à une demande */
.tache-aide {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 600;
  background: none; border: none; padding: 2px 0;
  color: var(--vbk-red); cursor: pointer; text-decoration: underline;
}
.tache-details {
  margin: 6px 0 0; font-size: 13px; color: var(--text);
  white-space: pre-wrap; line-height: 1.5;
}

/* =====================================================================
   D'où vient la demande
   Le rouge de la marque, réservé à ce que le gérant demande en son nom.
   Il ne sert nulle part ailleurs dans la liste : là où il apparaît, la
   demande vient de quelqu'un, pas du travail de fond.
   ===================================================================== */
.tache-gerant {
  padding: 1px 7px; border-radius: 999px;
  background: var(--vbk-red); color: var(--vbk-white);
  border: 1px solid var(--vbk-red); font-weight: 700; white-space: nowrap;
}
.taches-titre-gerant { color: var(--vbk-red); }
.taches-titre-gerant .muted { color: var(--text-muted); }

/* La ligne elle-même se distingue sans crier : un filet rouge à gauche
   suffit, une couleur de fond rendrait la liste illisible dès trois
   demandes. */
.tache.origine-gerant { box-shadow: inset 3px 0 0 var(--vbk-red); }

/* =====================================================================
   Documents attachés à une fiche mémoire
   Visibles hors édition : un mode d'emploi qu'il faut d'abord « modifier »
   pour apercevoir ne serait jamais ouvert.
   ===================================================================== */
.memo-fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.memo-fichier {
  display: inline-flex; align-items: stretch; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--surface-hover);
  max-width: 100%;
}
.memo-fichier-ouvrir {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font: inherit; font-size: 13px; background: none; border: none;
  padding: 7px 10px; color: var(--text); cursor: pointer; text-align: left;
  min-height: 38px;
}
.memo-fichier-ouvrir:hover { background: var(--surface-sunken); }
.memo-fichier-ouvrir small { color: var(--text-muted); white-space: nowrap; }
.memo-fichier-oter {
  flex: none; font: inherit; font-size: 16px; line-height: 1;
  background: none; border: none; border-left: 1px solid var(--border);
  padding: 0 10px; color: var(--text-muted); cursor: pointer;
}
.memo-fichier-oter:hover { background: var(--danger-soft); color: var(--danger); }

.memo-joindre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
/* Le label fait bouton : le champ « fichier » natif ne se met pas à la
   charte, et sur téléphone son libellé anglais dépasse. */
.memo-joindre label.btn { cursor: pointer; }
.memo-attente { margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }

/* =====================================================================
   Arrivées — ce qui vient d'entrer dans l'application
   Une ligne d'en-tête par journée, pour répondre d'un coup d'œil à
   « qu'est-ce qui est arrivé depuis hier ? ».
   ===================================================================== */
.table-invoices tr.jour-head td {
  background: var(--surface-sunken); padding: 9px 14px;
  border-top: 1px solid var(--border-strong);
}
.jour-label { font-weight: 700; font-size: 13px; }
.jour-detail { margin-left: 10px; font-size: 12.5px; color: var(--text-muted); }
.jour-total { float: right; font-weight: 600; font-size: 13px; }

/* Le bloc du tableau de bord : il annonce une nouveauté, pas un manquement.
   Les trois autres alertes disent ce qui reste à faire ; celle-ci dit ce
   qui vient d'arriver, et se tait quand rien n'est arrivé. */
.alert-arrivees {
  grid-column: 1 / -1; margin-top: 10px;
  background: var(--ok-soft); border-color: var(--border-ok); color: var(--ok);
}
.alert-arrivees[hidden] { display: none; }

/* =====================================================================
   Suivi d'une facture — ce que Marie signale
   Rien à signaler, rien à voir : la colonne ne doit attirer l'œil que là
   où il y a quelque chose. Une colonne pleine de « RAS » masquerait les
   trois lignes qui posent vraiment problème.
   ===================================================================== */
.td-suivi { white-space: nowrap; }
.suivi-vide {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: 7px;
  background: none; border: 1px dashed var(--border-dashed); color: var(--text-muted);
}
.suivi-vide:hover { border-style: solid; border-color: var(--vbk-red); color: var(--vbk-red); }

.suivi-chip { cursor: pointer; border-width: 1px; border-style: solid; }
.suivi-mot { margin-left: 4px; opacity: .7; }
.suivi-rouge  { background: var(--danger-soft); color: var(--danger); border-color: var(--border-danger); }
.suivi-orange { background: var(--warn-soft);   color: var(--warn);   border-color: var(--border-warn); }
.suivi-vert   { background: var(--ok-soft);     color: var(--ok);     border-color: var(--border-ok); }
.suivi-bleu   { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }

.pop-suivi { min-width: 290px; max-width: 340px; }
.pop-titre { margin: 0 0 8px; font-weight: 700; font-size: 13px; }
.suivi-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.suivi-choix .badge { cursor: pointer; border: 1px solid transparent; }
.suivi-choix .badge.choisi { outline: 2px solid var(--vbk-red); outline-offset: 1px; }
.pop-suivi textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); resize: vertical;
}
.pop-signe { margin: 6px 0 0; font-size: 11.5px; color: var(--text-muted); }

/* Une facture pas encore regardée, repérée dans la liste normale. Elle
   n'est pas bloquée pour autant : on la paie, on l'exporte, on l'encode.
   La mention dit « personne ne l'a vérifiée », pas « interdit d'y toucher ». */
/* Un point d'exclamation, pas une phrase : la colonne du numéro de
   facture n'a pas la place d'accueillir « à contrôler », et le repère
   doit se voir sans se lire. */
.marque-verif {
  display: inline-grid; place-items: center; margin-left: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 1; cursor: help;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--border-warn);
}

/* Réf. Smart absente mais encodage réputé fait par l'ancien franchisé */
.ref-ancien {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  background: var(--warn-soft); color: var(--warn); border: 1px dashed var(--border-warn);
}

/* =====================================================================
   Réunir deux fiches fournisseur
   Ce qui va se passer est dit avant d'agir : combien de factures bougent,
   lesquelles se heurtent, et si les numéros de TVA diffèrent.
   ===================================================================== */
.fusion-intro { margin: 0 0 12px; font-size: 15px; }
#modal-fusion label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
#modal-fusion select { width: 100%; }
.fusion-apercu {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: var(--surface-alt); border: 1px solid var(--border);
}
.fusion-apercu p { margin: 0 0 6px; }
.fusion-apercu p:last-child { margin-bottom: 0; }
.fusion-alerte { color: var(--warn); font-weight: 600; }
.fusion-collisions { margin: 4px 0 8px; padding-left: 20px; font-size: 12.5px; }

/* =====================================================================
   Choix de la période, depuis le bandeau supérieur
   Elle commande tous les écrans. Le libellé est cliquable : c'est lui
   qu'on regarde, c'est donc par lui qu'on doit pouvoir la changer.
   ===================================================================== */
.month-label {
  font: inherit; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 10px; color: inherit; min-width: 120px; text-align: center;
}
.month-label:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.month-picker .btn-icon:disabled { opacity: .35; cursor: default; }

.periode-choix { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 12px; }
.periode-choix .chip { cursor: pointer; }
.periode-reglage { margin-bottom: 10px; }
.periode-reglage select, .periode-reglage input { width: 100%; }
.periode-dates { display: flex; align-items: center; gap: 8px; }
.periode-dates label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.periode-dates input { flex: 1 1 auto; }
.periode-apercu {
  margin: 0; padding: 9px 11px; border-radius: 8px; font-size: 13px;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted);
}

@media (max-width: 900px) {
  /* Sur téléphone le bandeau est étroit : le libellé prend ce qu'il
     reste, les flèches gardent leur cible au doigt. */
  .month-label { min-width: 0; font-size: 13px; padding: 5px 6px; }
}

/* =====================================================================
   Quarantaine : voir avant de décider
   On demandait de trancher « est-ce un fournisseur ? » en cachant ce qui
   permet de répondre. Les messages et leurs pièces s'ouvrent maintenant
   sur place.
   ===================================================================== */
.q-row.deplie { background: var(--surface-alt); }
.q-detail {
  grid-column: 1 / -1; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-dashed);
}
.q-msg { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.q-msg:last-child { border-bottom: none; }
.q-msg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.q-msg-head strong { font-size: 13.5px; }
.q-fichiers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.q-fichier {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; cursor: pointer; min-height: 34px;
  padding: 5px 10px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.q-fichier:hover { border-color: var(--vbk-red); color: var(--vbk-red); }
.q-fichier small { color: var(--text-muted); }

/* Retrouver un courrier */
.trace-resultats { padding: 10px 12px 14px; }
.trace-resume { margin: 0 0 10px; font-size: 13.5px; }
.trace-table { font-size: 13px; }
.trace-pj { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.trace-err { margin-left: 6px; font-size: 11.5px; color: var(--danger); cursor: help; text-decoration: underline dotted; }
.trace-vide {
  padding: 14px; border-radius: 8px;
  background: var(--warn-soft); border: 1px solid var(--border-warn);
}
.trace-vide p { margin: 0 0 6px; }
.trace-vide p:last-child { margin-bottom: 0; }
.st-grey { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }

/* Menu d'une pièce classée « document » : la nature, puis la suppression.
   Le coche marque la nature actuelle — sans quoi on ne sait pas ce qu'on
   est en train de changer. */
.pop-menu .pop-titre {
  margin: 2px 8px 6px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.pop-menu button.choisi { font-weight: 700; color: var(--text); }
.pop-menu .pop-note { margin: 6px 8px 2px; font-size: 11.5px; color: var(--text-muted); }

/* Activité jour par jour : ce que chaque journée a produit. L'avertissement
   sur les gestes non datés est en orange — c'est une réserve sur la
   lecture du tableau, pas une alerte. */
.activite-note {
  margin: 0 14px 12px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  background: var(--warn-soft); border: 1px solid var(--border-warn); color: var(--warn);
}

/* Une remarque écrite sur une facture, visible dans la liste.
   Discrète mais présente : elle dit « quelqu'un s'est occupé de ça »,
   ce qu'un champ caché au fond du formulaire ne disait pas. */
.suivi-note {
  display: inline-grid; place-items: center; cursor: help;
  width: 26px; height: 26px; border-radius: 7px; font-size: 13px;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  color: var(--text); font: inherit; line-height: 1;
}
.suivi-note:hover { border-color: var(--vbk-red); color: var(--vbk-red); }

/* La case « ne plus bloquer pour ce fournisseur », dans la zone de forçage */
#rv-force-memo-wrap { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; }

/* Remarques et suivi, depuis l'écran de contrôle.
   La remarque s'enregistrait uniquement en validant la facture — or on
   écrit « voir avec Bob » précisément parce qu'on ne valide pas. */
.rv-suivi-bloc { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 4px; }
.rv-suivi-etats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rv-suivi-etats .badge { cursor: pointer; border: 1px solid transparent; }
.rv-suivi-etats .badge.choisi { outline: 2px solid var(--vbk-red); outline-offset: 1px; }
.rv-notes-bas {
  display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap;
}
.rv-notes-bas .muted { flex: 1 1 auto; }

/* =====================================================================
   Cocher soi-même les fournisseurs
   Le nombre de factures de la période accompagne chaque nom : cocher une
   fiche qui n'a rien sur le trimestre ne produit rien, et s'en apercevoir
   après le téléchargement fait perdre le double du temps.
   ===================================================================== */
.fo-liste { max-height: 52vh; overflow-y: auto; margin-bottom: 12px; }
.fo-groupe { margin-bottom: 14px; }
.fo-groupe-tete {
  display: flex; align-items: baseline; gap: 10px; padding: 4px 2px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
  position: sticky; top: 0; background: var(--surface);
}
.fo-groupe-tete strong {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.fo-ligne {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-radius: 7px; cursor: pointer; min-height: 38px;
}
.fo-ligne:hover { background: var(--surface-hover); }
.fo-nom { flex: 1 1 auto; font-size: 13.5px; }
.fo-compte {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken);
}
/* Une fiche sans facture sur la période : visible, mais en retrait. */
.fo-ligne.vide .fo-nom { color: var(--text-muted); }