/* =====================================================================
   SCRIBE — Design system
   Fond clair / Deep Navy / Gold / Cyan / Magenta
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* Identité */
  --navy:        #1E2942;
  --navy-2:      #1B2A4A;
  --navy-3:      #2A3757;
  --navy-4:      #3A4A70;
  --gold:        #DAA520;
  --gold-warm:   #D4A373;
  --gold-soft:   #F3E2BE;
  --cyan:        #27E0F5;
  --magenta:     #DA27F5;

  /* Surfaces */
  --bg:          #F4F6F9;
  --surface:     #FFFFFF;
  --surface-2:   #FAFBFD;
  --line:        #E4E9F0;
  --line-strong: #CFD7E3;

  /* Texte */
  --ink:         #1B2333;
  --ink-2:       #4A5568;
  --ink-3:       #7A869A;
  --ink-inverse: #FFFFFF;

  /* Statuts de règlement (cahier des charges §2.1) */
  --st0:         #8A94A6;   /* Impayée   — neutre  */
  --st0-bg:      #F1F3F7;
  --st1:         #2ED573;   /* Partielle — vert    */
  --st1-bg:      #E4FBEE;
  --st2:         #FF4757;   /* Soldée    — rouge   */
  --st2-bg:      #FFECEE;
  --retrait:     #8E44AD;   /* Chèques non retirés */
  --retrait-bg:  #F6ECFB;

  /* Sémantique d'action */
  --success:     #2ED573;
  --danger:      #FF4757;
  --warn:        #F0A030;
  --info:        #2F80ED;

  /* Géométrie */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(27,35,51,.06);
  --shadow-sm:   0 2px 8px rgba(27,35,51,.07);
  --shadow:      0 6px 20px rgba(27,35,51,.09);
  --shadow-lg:   0 18px 48px rgba(27,35,51,.18);
  --shadow-gold: 0 6px 18px rgba(218,165,32,.32);

  /* Chrome */
  --topbar-h:    58px;
  --subnav-h:    42px;
  --chrome-h:    100px;

  --t-fast:      .14s cubic-bezier(.4,0,.2,1);
  --t:           .22s cubic-bezier(.4,0,.2,1);
  --t-slow:      .34s cubic-bezier(.16,1,.3,1);

  --font-brand:  'Cinzel', 'Times New Roman', serif;
  --font:        'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num:    'DM Sans', 'Segoe UI', system-ui, sans-serif;

  --z-drawer:    60;
  --z-modal:     70;
  --z-menu:      80;
  --z-toast:     90;
  --z-loader:    100;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }

::selection { background: var(--gold-soft); color: var(--navy); }

/* Barres de défilement discrètes, cohérentes avec la densité des tableaux */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Les montants s'alignent par la virgule : chiffres à chasse fixe */
.num, .cell-num, .kpi-value, .amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.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;
}

/* ---------------------------------------------------------------
   3. Chrome — Topbar à deux niveaux
   --------------------------------------------------------------- */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: 40; }

/* Niveau 1 : modules métier, sur fond bleu nuit */
.topbar {
  height: var(--topbar-h);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--shadow-sm);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-brand);
  font-size: 19px; font-weight: 700; letter-spacing: .06em;
  color: #fff; white-space: nowrap;
}
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%);
  color: var(--navy);
  font-size: 16px; font-weight: 700;
  box-shadow: var(--shadow-gold);
}
.brand-dot { color: var(--gold); }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.74);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-item svg { width: 16px; height: 16px; opacity: .8; transition: transform var(--t-fast); }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item:hover svg { transform: scale(1.1); }

/* État actif explicite : soulignement doré */
.nav-item.active { color: #fff; background: rgba(255,255,255,.1); }
.nav-item.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: -11px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(218,165,32,.6);
}
.nav-item.active svg { opacity: 1; color: var(--gold); }

.nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--cyan); color: var(--navy);
  font-size: 11px; font-weight: 700;
}

.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Sélecteur de société : changement de contexte sans quitter le flux */
.societe-select {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 13px; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.societe-select:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.societe-select .lbl { opacity: .62; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.societe-select .val { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.societe-select svg { width: 13px; height: 13px; opacity: .7; }
/* Vue consolidée : le contexte n'est plus une société unique, il faut le voir */
.societe-select.consolide {
  background: rgba(39,224,245,.16);
  border-color: rgba(39,224,245,.45);
}
.societe-select.consolide .val { color: var(--cyan); }

/* Sélecteur de périmètre */
.societes-liste { display: flex; flex-direction: column; gap: 8px; }
.societe-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.societe-item:hover { border-color: var(--gold); background: var(--surface-2); }
.societe-item.active { border-color: var(--gold); background: var(--gold-soft); }
.societe-item.travail { box-shadow: inset 3px 0 0 var(--navy); }
.societe-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.societe-item input { accent-color: var(--gold); width: 16px; height: 16px; pointer-events: none; }
.societe-item .soc-corps { flex: 1; min-width: 0; }
.societe-item .soc-nom  { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.societe-item .soc-meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.societe-item .soc-travail {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap;
  transition: all var(--t-fast);
}
.societe-item .soc-travail:hover { border-color: var(--navy); color: var(--navy); }
.societe-item.travail .soc-travail {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.societe-resume {
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.societe-resume .badge { margin-right: 7px; }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 11px 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.09);
  cursor: pointer; transition: background var(--t-fast);
}
.user-chip:hover { background: rgba(255,255,255,.17); }
.avatar {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: var(--navy); font-size: 11px; font-weight: 700;
}
.user-chip .meta { line-height: 1.15; }
.user-chip .nom  { color: #fff; font-size: 12.5px; font-weight: 600; }
.user-chip .role { color: rgba(255,255,255,.55); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }

/* Niveau 2 : raccourcis système, sous-barre claire */
.subnav {
  height: var(--subnav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 4px;
  padding: 0 20px;
  box-shadow: var(--shadow-xs);
}
.subnav-item {
  display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px;
  border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.subnav-item svg { width: 15px; height: 15px; opacity: .65; }
.subnav-item:hover { color: var(--navy); background: var(--bg); }
.subnav-item.active { color: var(--navy); background: var(--gold-soft); font-weight: 600; }
.subnav-item.active svg { opacity: 1; color: var(--gold); }
.subnav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }

.subnav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Recherche globale (Ctrl+K) */
.global-search {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px; min-width: 210px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-3); font-size: 12.5px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.global-search:hover { border-color: var(--gold); background: #fff; }
.global-search svg { width: 14px; height: 14px; }
.global-search .kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--line-strong); border-radius: 5px;
  background: #fff;
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
}

/* ---------------------------------------------------------------
   4. Zone principale
   --------------------------------------------------------------- */
#main { padding: calc(var(--chrome-h) + 18px) 20px 90px; max-width: 1720px; margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.page-title  { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.page-sub    { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.page-head-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Fil de sous-modules (« Liste globale · Importation CSV · … ») */
.tabs {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.tab {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
}
.tab:hover { border-color: var(--gold); color: var(--navy); transform: translateY(-1px); }
.tab.active {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.tab.active .dot { background: var(--cyan); }
.tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }

/* ---------------------------------------------------------------
   5. Cartes & KPI
   --------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.card-title { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.card-body  { padding: 18px; }

.kpi-grid {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi {
  position: relative; overflow: hidden;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
/* Surélévation au survol (maquette §10.2) */
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.kpi::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--accent, var(--navy));
  transition: width var(--t);
}
.kpi:hover::before { width: 6px; }

.kpi-label {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi-label svg { width: 14px; height: 14px; color: var(--accent, var(--navy)); }
.kpi-value {
  margin-top: 9px;
  font-size: 25px; font-weight: 700; color: var(--navy);
  letter-spacing: -.025em; line-height: 1.1;
}
.kpi-value .devise { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 5px; }
/* Signale que le jeu contient d'autres devises que celle affichée */
.kpi-value .devise-plus {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink-3);
  font-size: 11px; font-weight: 700; vertical-align: middle;
  cursor: help;
}
.kpi-foot { margin-top: 5px; color: var(--ink-3); font-size: 12px; }
.kpi-foot strong { color: var(--ink-2); font-weight: 600; }

.kpi.impayees   { --accent: var(--st0); }
.kpi.partielles { --accent: var(--st1); }
.kpi.soldees    { --accent: var(--st2); }
.kpi.validation { --accent: var(--gold); }
.kpi.attente    { --accent: var(--cyan); }
.kpi.retrait    { --accent: var(--retrait); }
.kpi.analytique { --accent: var(--magenta); }

/* Grille de modules du tableau de bord */
.module-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.module-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.module-icon {
  width: 40px; height: 40px; margin-bottom: 8px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--tint, var(--bg)); color: var(--accent, var(--navy));
}
.module-icon svg { width: 20px; height: 20px; }
.module-name { font-size: 15px; font-weight: 600; color: var(--navy); }
.module-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* ---------------------------------------------------------------
   6. Boutons
   --------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Action principale : or */
.btn-primary { background: var(--gold); color: var(--navy); box-shadow: var(--shadow-gold); }
.btn-primary:hover:not(:disabled) { background: #E9B32E; box-shadow: 0 8px 22px rgba(218,165,32,.42); transform: translateY(-1px); }

/* Action secondaire : bleu nuit */
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--navy-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--navy); background: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #F03A4B; transform: translateY(-1px); }

.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }

.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

/* Effet ripple au clic (maquette §10.2) */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0); animation: ripple .55s linear;
  pointer-events: none;
}
.btn-ghost .ripple, .btn-primary .ripple { background: rgba(27,35,51,.16); }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ---------------------------------------------------------------
   7. Champs de saisie
   --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--danger); margin-left: 2px; }

.input, .select, textarea.input {
  height: 36px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font); font-size: 13.5px; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
textarea.input { height: auto; padding: 9px 11px; resize: vertical; min-height: 72px; line-height: 1.5; }

/* Focus visible : liseré doré (maquette §9.3) */
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(218,165,32,.16);
}
.input::placeholder { color: var(--ink-3); }
.input:disabled { background: var(--bg); color: var(--ink-3); cursor: not-allowed; }

.input.erreur { border-color: var(--danger); }
.input.erreur:focus { box-shadow: 0 0 0 3px rgba(255,71,87,.15); }
.field-error { color: var(--danger); font-size: 11.5px; font-weight: 500; min-height: 14px; }

.input-icon { position: relative; display: flex; align-items: center; }
.input-icon svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.input-icon .input { padding-left: 34px; }
.input-icon:focus-within svg { color: var(--gold); }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid .span-2 { grid-column: span 2; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 34px; height: 19px; border-radius: var(--radius-pill);
  background: var(--line-strong); position: relative;
  transition: background var(--t-fast);
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast);
}
.switch input:checked + .track { background: var(--gold); }
.switch input:checked + .track::after { transform: translateX(15px); }

/* ---------------------------------------------------------------
   8. Barre de filtres
   --------------------------------------------------------------- */
.filters {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.filters .field { min-width: 165px; }
.filters .field.large { min-width: 250px; flex: 1; }
.filters .field.date { min-width: 140px; }
.filters-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Tags des filtres actifs */
.active-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.active-filters:empty { display: none; }
.filter-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 6px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft); border: 1px solid rgba(218,165,32,.36);
  color: var(--navy); font-size: 12px; font-weight: 500;
  animation: tagIn var(--t) both;
}
.filter-tag b { font-weight: 700; }
.filter-tag .x {
  width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.filter-tag .x:hover { background: rgba(27,35,51,.14); color: var(--navy); }
@keyframes tagIn { from { opacity: 0; transform: scale(.9); } }

/* ---------------------------------------------------------------
   9. Tag-select serveur (tsf)
   --------------------------------------------------------------- */
.tsf { position: relative; }
.tsf-control {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 36px; padding: 4px 30px 4px 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tsf.open .tsf-control,
.tsf-control:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218,165,32,.16); }
.tsf-control::after {
  content: ''; position: absolute; right: 11px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg); transition: transform var(--t-fast);
  pointer-events: none;
}
.tsf.open .tsf-control::after { transform: rotate(-135deg); margin-top: -2px; }

.tsf-placeholder { color: var(--ink-3); font-size: 13.5px; padding: 2px 0; }
.tsf-input {
  flex: 1; min-width: 60px; height: 26px;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font); font-size: 13.5px; color: var(--ink);
}
.tsf-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 5px 0 9px;
  border-radius: var(--radius-pill);
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 500;
  animation: tagIn var(--t-fast) both;
  max-width: 190px;
}
.tsf-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsf-tag .x {
  width: 15px; height: 15px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.2); cursor: pointer; font-size: 11px;
  transition: background var(--t-fast);
}
.tsf-tag .x:hover { background: rgba(255,255,255,.42); }

.tsf-drop {
  position: absolute; left: 0; right: 0; z-index: var(--z-menu);
  max-height: 290px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  animation: dropIn var(--t-fast) both;
}
/* Positionnement intelligent haut/bas selon l'espace disponible */
.tsf-drop.below { top: calc(100% + 5px); }
.tsf-drop.above { bottom: calc(100% + 5px); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-4px); } }

.tsf-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
  transition: background var(--t-fast);
}
.tsf-opt:hover, .tsf-opt.cursor { background: var(--bg); }
.tsf-opt.selected { background: var(--gold-soft); font-weight: 600; }
.tsf-opt .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsf-opt .det { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tsf-opt .check { width: 15px; height: 15px; color: var(--gold); opacity: 0; }
.tsf-opt.selected .check { opacity: 1; }
/* Surlignage du motif recherché */
.tsf-opt mark { background: var(--gold-soft); color: var(--navy); font-weight: 700; border-radius: 3px; padding: 0 1px; }

.tsf-group-hd {
  padding: 8px 9px 4px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.tsf-empty { padding: 18px 10px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.tsf-more {
  padding: 7px 9px; margin-top: 3px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 11.5px; text-align: center;
}
.tsf-more b { color: var(--gold); cursor: pointer; }

/* ---------------------------------------------------------------
   10. Tableaux
   --------------------------------------------------------------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* La grille est son propre scrollport : l'en-tête peut ainsi rester collé
   en haut de la zone de données pendant le défilement, tout en conservant
   le défilement horizontal des tableaux larges. Un `position:sticky` calé
   sur la fenêtre ne fonctionnerait pas ici, car tout ancêtre en overflow
   non visible devient le référent du collage. */
/* La hauteur exacte est calculée au chargement et à chaque changement de
   mise en page (voir ajusterHauteur dans filters.js) ; la valeur ci-dessous
   n'est qu'un repli avant ce premier calcul. */
.table-scroll {
  overflow: auto;
  max-height: var(--grille-h, calc(100vh - var(--chrome-h) - 160px));
  overscroll-behavior: contain;
}

table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

table.grid thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--navy); color: rgba(255,255,255,.9);
  padding: 10px 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--navy-3);
  user-select: none;
}
table.grid thead th:first-child { border-radius: 0; }
table.grid thead th.sortable { cursor: pointer; transition: background var(--t-fast); }
table.grid thead th.sortable:hover { background: var(--navy-3); }
table.grid thead th .th-in { display: flex; align-items: center; gap: 6px; }
table.grid thead th.right .th-in { justify-content: flex-end; }
table.grid thead th .arrow { opacity: 0; font-size: 9px; transition: opacity var(--t-fast); color: var(--gold); }
table.grid thead th.sortable:hover .arrow { opacity: .45; }
table.grid thead th.sort-asc  .arrow,
table.grid thead th.sort-desc .arrow { opacity: 1; }
table.grid thead th.sort-asc  .arrow::after { content: '▲'; }
table.grid thead th.sort-desc .arrow::after { content: '▼'; }
table.grid thead th .arrow::after { content: '▲'; }

table.grid tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); vertical-align: middle;
}
table.grid tbody tr { transition: background var(--t-fast); cursor: default; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr.selected { background: rgba(218,165,32,.1); }
table.grid tbody tr.selected:hover { background: rgba(218,165,32,.16); }
table.grid tbody tr:last-child td { border-bottom: 0; }

td.right, th.right { text-align: right; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.strong { font-weight: 600; color: var(--navy); }
td.muted  { color: var(--ink-3); }

.cell-ref     { font-weight: 600; color: var(--navy); white-space: nowrap; }
.cell-tiers   { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-libelle { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cell-vide    { color: var(--ink-3); }

.col-check { width: 38px; text-align: center; }
.col-check input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--gold); }

/* Retour visuel après validation / suppression */
@keyframes rowFlash {
  0%   { background: rgba(218,165,32,.42); }
  100% { background: transparent; }
}
tr.row-flash { animation: rowFlash 1.1s ease-out; }
@keyframes rowFlashDanger {
  0%   { background: rgba(255,71,87,.34); }
  100% { background: transparent; }
}
tr.row-flash-danger { animation: rowFlashDanger 1.1s ease-out; }

/* Pied de tableau : compteur de chargement progressif */
.table-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3); font-size: 12.5px;
}
.table-foot .totaux { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.table-foot .totaux span { color: var(--ink-2); }
.table-foot .totaux b { color: var(--navy); font-variant-numeric: tabular-nums; }
/* Une ligne de totaux par devise présente dans le jeu filtré */
.totaux-devise { display: flex; align-items: center; gap: 14px; }
.totaux-devise .badge { font-size: 10.5px; height: 19px; }

/* Repère quand les cartes ne décrivent plus l'ensemble du portefeuille */
.kpi-grid.filtre-actif .kpi::after {
  content: 'filtré';
  position: absolute; top: 9px; right: 11px;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--gold-soft); color: #96700E;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Sentinelle de scroll infini */
.scroll-sentinel { height: 1px; }
.loading-more {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; color: var(--ink-3); font-size: 12.5px;
}
.loading-more .spin { width: 15px; height: 15px; }

/* Barre d'outils de la grille : rafraîchir, exporter, colonnes, aide */
.grid-toolbar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}
.grid-toolbar .outils-gauche { display: flex; align-items: center; gap: 9px; }
.grid-toolbar .outils-droite { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.grid-toolbar .btn svg:last-child { opacity: .55; margin-left: -2px; }

/* Zones repliables : cartes et barre de recherche s'effacent pour rendre
   la place à la grille, sans disparaître de la page. */
.zone-repliee {
  display: none !important;
}
.grid-toolbar .btn[data-o="replier"].actif {
  background: var(--gold-soft); border-color: rgba(218,165,32,.4); color: #96700E;
}

/* Sélecteur de colonnes */
.colonnes-titre {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.colonnes-titre svg { color: var(--gold); }

/* Colonnes retenues : l'ordre se règle au glisser-déposer */
.colonnes-retenues {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 32vh; overflow-y: auto;
  padding: 3px;
}
.colonne-rang {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: grab;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.colonne-rang:hover { border-color: var(--gold); background: var(--surface-2); }
.colonne-rang:active { cursor: grabbing; }
.colonne-rang.en-deplacement { opacity: .4; }
/* Repère de dépôt : la ligne visée se souligne en or */
.colonne-rang.survol {
  border-color: var(--gold); background: var(--gold-soft);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.rang-poignee { color: var(--line-strong); font-size: 15px; cursor: grab; user-select: none; }
.colonne-rang:hover .rang-poignee { color: var(--gold); }
.rang-num {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.rang-lbl { flex: 1; font-size: 13px; font-weight: 500; color: var(--navy);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-actions { display: flex; gap: 3px; flex: none; }
.rang-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--ink-3); font-size: 13px; cursor: pointer; user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.rang-btn:hover { background: var(--bg); color: var(--navy); }
.rang-btn.danger:hover { background: var(--st2-bg); color: var(--danger); }
.plus-mini {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--ink-3);
  font-size: 13px; font-weight: 700;
}
.colonne-item[data-ajouter]:hover .plus-mini { background: var(--gold); color: var(--navy); }

.colonnes-liste {
  display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  max-height: 46vh; overflow-y: auto;
  padding: 3px;
}
.colonne-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font-size: 13px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.colonne-item:hover { border-color: var(--gold); background: var(--surface-2); }
.colonne-item.active { border-color: var(--gold); background: var(--gold-soft); font-weight: 600; }
.colonne-item.bloquee { opacity: .45; cursor: not-allowed; }
.colonne-item.bloquee:hover { border-color: var(--line); background: var(--surface); }
.colonne-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* La case reflète l'état ; c'est l'élément entier qui reçoit le clic. */
.colonne-item input { accent-color: var(--gold); width: 15px; height: 15px; pointer-events: none; }
.colonne-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonne-item .badge { font-size: 9.5px; height: 17px; padding: 0 6px; }

/* --- Composition d'un paiement ---------------------------------- */

/* Choix du mode de création */
.modes-paiement {
  display: grid; gap: 9px; margin-bottom: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mode-carte {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.mode-carte:hover { border-color: var(--gold); transform: translateY(-1px); }
.mode-carte.active {
  border-color: var(--navy); background: var(--navy); color: #fff;
  box-shadow: var(--shadow-sm);
}
.mode-ic {
  width: 30px; height: 30px; margin-bottom: 5px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--bg); color: var(--navy);
}
.mode-carte.active .mode-ic { background: rgba(255,255,255,.14); color: var(--gold); }
.mode-nom  { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.mode-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.mode-carte.active .mode-nom  { color: #fff; }
.mode-carte.active .mode-desc { color: rgba(255,255,255,.66); }

/* Application d'une valeur à tout un lot, en ligne plutôt qu'en modale */
.lot-barre {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; margin-bottom: 9px;
  border: 1px solid rgba(218,165,32,.42); border-radius: var(--radius-sm);
  background: var(--gold-soft);
  animation: selIn var(--t) both;
  flex-wrap: wrap;
}
.lot-titre {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--navy);
}
.lot-titre svg { color: #96700E; }
.lot-barre .input { height: 32px; }

/* Coordonnées bancaires : les deux extrémités du règlement */
.rib-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rib-bloc {
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.rib-bloc.payeur       { border-top: 3px solid var(--navy); }
.rib-bloc.beneficiaire { border-top: 3px solid var(--st1); }
.rib-titre {
  margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.rib-bloc.payeur .rib-titre       { color: var(--navy); }
.rib-bloc.beneficiaire .rib-titre { color: #16A75B; }
.rib-ligne { display: flex; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.rib-lbl { flex: none; width: 62px; color: var(--ink-3); font-size: 10.5px;
           text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.rib-val { flex: 1; color: var(--ink); word-break: break-word; }


/* Bandeau rappelant la contrainte du paiement groupé */
.contrainte-fusion {
  padding: 10px 13px; margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.contrainte-fusion .badge { margin-right: 7px; }
.contrainte-fusion .lien {
  margin-left: 8px; color: #96700E; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.contrainte-fusion .lien:hover { color: var(--navy); }

/* Encadré explicatif ouvrant un assistant : dit ce que l'action va produire
   avant que l'utilisateur n'engage un fichier entier. */
.note-encadre {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--gold-soft); border: 1px solid var(--gold-warm);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.note-encadre svg { flex: none; color: #96700E; margin-top: 1px; }
.note-encadre b { color: var(--navy); }
.contrainte-fusion svg { vertical-align: -2px; margin-right: 3px; }

.factures-choix {
  max-height: 38vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 3px;
}
.facture-choix {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.facture-choix:hover { border-color: var(--gold); background: var(--surface-2); }
.facture-choix.active { border-color: var(--gold); background: var(--gold-soft); }
.facture-choix input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; pointer-events: none; }
.facture-choix .fc-corps { flex: 1; min-width: 0; }
.facture-choix .fc-titre {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--navy);
}
.facture-choix .fc-titre .badge { font-size: 9.5px; height: 17px; padding: 0 6px; }
.facture-choix .fc-meta {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.facture-choix .fc-solde { flex: none; text-align: right; }
.facture-choix .fc-solde .lbl {
  display: block; font-size: 9.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.facture-choix .fc-solde b { font-size: 13px; color: var(--ink); }
.facture-choix .fc-montant { flex: none; width: 138px; }
.facture-choix .fc-montant .input { height: 32px; text-align: right; font-size: 12.5px; }

.recap-paiement {
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--navy); color: #fff;
}
.recap-paiement:empty { display: none; }
.recap-paiement .text-muted { color: rgba(255,255,255,.62) !important; }
.recap-total { font-size: 17px; font-variant-numeric: tabular-nums; }
.recap-total.text-danger { color: #FF8A94 !important; }

/* Marque discrète d'un paiement groupé dans la grille */
.pastille-fusion { color: var(--gold); cursor: help; }

/* Bloc des axes analytiques dans le formulaire */
.axes-bloc {
  margin-top: 6px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.axes-titre {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 12px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.axes-titre svg { color: var(--gold); }

/* Champ numérique suivi de son unité */
.input-suffixe { position: relative; display: flex; align-items: center; }
.input-suffixe .input { padding-right: 62px; }
.input-suffixe .suffixe {
  position: absolute; right: 11px;
  color: var(--ink-3); font-size: 12px; pointer-events: none;
}

/* Ventilation par société (vue consolidée) */
.ventil-ligne { padding: 9px 0; border-bottom: 1px solid var(--line); }
.ventil-ligne:last-child { border-bottom: 0; }
.ventil-barre {
  height: 7px; margin-top: 7px;
  border-radius: 4px; background: var(--bg); overflow: hidden;
}
.ventil-barre > div {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--navy), var(--navy-4));
  transition: width var(--t-slow);
}

/* Pièces jointes */
.pj-liste { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.pj-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pj-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pj-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--bg); color: var(--ink-2);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.pj-ic.ext-pdf  { background: var(--st2-bg); color: #E02D3C; }
.pj-ic.ext-png, .pj-ic.ext-jpg, .pj-ic.ext-jpeg,
.pj-ic.ext-gif, .pj-ic.ext-webp { background: #DDFAFE; color: #0793A6; }
.pj-ic.ext-xlsx, .pj-ic.ext-xls, .pj-ic.ext-csv { background: var(--st1-bg); color: #16A75B; }
.pj-ic.ext-doc, .pj-ic.ext-docx { background: #E7F0FD; color: #1D6BD8; }
.pj-ic.ext-zip  { background: var(--gold-soft); color: #96700E; }

.pj-corps { flex: 1; min-width: 0; }
.pj-nom   { display: block; font-size: 13px; font-weight: 600; color: var(--navy);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-meta  { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.pj-actions { display: flex; gap: 4px; flex: none; }
.pj-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--ink-3); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pj-btn:hover { background: var(--bg); color: var(--navy); }
.pj-btn.danger:hover { background: var(--st2-bg); color: var(--danger); }
.pj-drop { padding: 18px 14px; }
.pj-drop svg { width: 26px; height: 26px; }
.pj-drop .titre { font-size: 13px; }
.pj-drop .hint { font-size: 11px; }

/* Aide contextuelle */
.aide-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.aide-liste li { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.aide-liste li b { color: var(--navy); }
.aide-liste kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
  background: var(--surface-2);
  font-family: 'Consolas', monospace; font-size: 11.5px; color: var(--navy);
}

/* ---------------------------------------------------------------
   11. Badges de statut
   --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.bs-0, .bs-grey  { background: var(--st0-bg);    color: #5C6779; }
.bs-1, .bs-green { background: var(--st1-bg);    color: #16A75B; }
.bs-2, .bs-red   { background: var(--st2-bg);    color: #E02D3C; }
.bs-gold         { background: var(--gold-soft); color: #96700E; }
.bs-cyan         { background: #DDFAFE;          color: #0793A6; }
.bs-magenta      { background: #FBE4FE;          color: #A314BA; }
.bs-retrait      { background: var(--retrait-bg);color: var(--retrait); }
.bs-navy         { background: #E8ECF4;          color: var(--navy); }

.badge-retard {
  background: #FFF1E6; color: #C2620A;
}

/* ---------------------------------------------------------------
   12. Barre d'actions groupées (révélation progressive)
   --------------------------------------------------------------- */
.sel-toolbar {
  display: none; align-items: center; gap: 11px;
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--navy); border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: selIn var(--t) both;
}
.sel-toolbar.show { display: flex; }
@keyframes selIn { from { opacity: 0; transform: translateY(-6px); } }

.sel-count { color: #fff; font-size: 13.5px; font-weight: 600; }
.sel-count b { color: var(--gold); }
.sel-toolbar .btn-ghost {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff;
}
.sel-toolbar .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
.sel-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Proposition « sélectionner les N lignes » (pattern messagerie) */
.sel-all-banner {
  display: none; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 16px; margin-bottom: 12px;
  background: var(--gold-soft); border: 1px solid rgba(218,165,32,.4);
  border-radius: var(--radius-sm);
  color: var(--navy); font-size: 13px;
}
.sel-all-banner.show { display: flex; }
.sel-all-banner b { font-weight: 700; }
.sel-all-banner .lien {
  color: #96700E; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.sel-all-banner .lien:hover { color: var(--navy); }

/* ---------------------------------------------------------------
   13. Menu contextuel (clic droit)
   --------------------------------------------------------------- */
.ctx-menu {
  position: fixed; z-index: var(--z-menu);
  min-width: 208px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: dropIn var(--t-fast) both;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ctx-item svg { width: 15px; height: 15px; color: var(--ink-3); }
.ctx-item:hover { background: var(--bg); }
.ctx-item:hover svg { color: var(--gold); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger svg { color: var(--danger); }
.ctx-item.danger:hover { background: var(--st2-bg); }
.ctx-item.disabled { opacity: .42; pointer-events: none; }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* Qualification secondaire dans un item : profil, code, rôle. */
.ctx-detail { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.menu-valideurs { max-height: 320px; overflow: auto; }

/* ---------------------------------------------------------------
   14. Drawer latéral
   --------------------------------------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(27,35,51,.42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 1);
  width: min(560px, 94vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
}
.drawer-head .ref-row { display: flex; align-items: center; gap: 11px; }
.drawer-ref { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.drawer-close {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.drawer-close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
.drawer-sub { margin-top: 5px; color: rgba(255,255,255,.68); font-size: 13px; }
.drawer-badges { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

.drawer-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.drawer-kpi { padding: 14px 16px; text-align: center; border-right: 1px solid var(--line); }
.drawer-kpi:last-child { border-right: 0; }
.drawer-kpi .k-lbl {
  color: var(--ink-3); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.drawer-kpi .k-val {
  margin-top: 5px; font-size: 17px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.drawer-kpi.solde .k-val { color: var(--st2); }
.drawer-kpi.paye  .k-val { color: var(--st1); }

.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }

.drawer-section { margin-bottom: 22px; }
.drawer-section h4 {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 11px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.drawer-section h4 svg { width: 14px; height: 14px; color: var(--gold); }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 18px; }
.info-item .lbl { color: var(--ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.info-item .val { margin-top: 2px; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.info-item .val.num { font-variant-numeric: tabular-nums; }
.info-item.span-2 { grid-column: span 2; }

/* Historique des paiements N-to-N */
table.mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.mini th {
  padding: 7px 8px; text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
table.mini td { padding: 8px; border-bottom: 1px solid var(--line); }
table.mini tr:last-child td { border-bottom: 0; }
table.mini td.right, table.mini th.right { text-align: right; }
table.mini .lien-pay { color: var(--navy); font-weight: 600; cursor: pointer; }
table.mini .lien-pay:hover { color: var(--gold); text-decoration: underline; }

.drawer-foot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.drawer-foot .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   15. Modaux
   --------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: 24px;
  background: rgba(27,35,51,.5);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.modal-overlay.open { opacity: 1; visibility: visible; }

/* Second niveau : au-dessus du premier, et un voile plus léger pour qu'on
   voie la saisie qu'on n'a pas quittée. */
.modal-overlay.empile { z-index: calc(var(--z-modal) + 5); background: rgba(27,35,51,.34); }
.modal-overlay.empile .modal { box-shadow: 0 24px 70px rgba(11,18,32,.42); }

.modal {
  width: min(620px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  transition: transform var(--t-slow);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal.large { width: min(940px, 100%); }
.modal.xlarge { width: min(1180px, 100%); }

.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.modal-sub   { color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.modal-close {
  margin-left: auto; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px;
  color: var(--ink-3); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.modal-close:hover { background: var(--bg); color: var(--navy); transform: rotate(90deg); }

.modal-body { flex: 1; overflow-y: auto; padding: 22px; }
.modal-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal-foot .right { margin-left: auto; display: flex; gap: 9px; }

/* ---------------------------------------------------------------
   16. Stepper d'importation
   --------------------------------------------------------------- */
.stepper { display: flex; align-items: center; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; }
.step:last-child { flex: 0 0 auto; }

.step-num {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
  color: var(--ink-3); font-size: 12.5px; font-weight: 700;
  transition: all var(--t);
}
.step-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: color var(--t); }
.step-line { flex: 1; height: 2px; background: var(--line-strong); margin: 0 12px; transition: background var(--t); }

.step.active .step-num {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  box-shadow: 0 0 0 4px rgba(218,165,32,.2);
}
.step.active .step-lbl { color: var(--navy); }
.step.done .step-num { background: var(--st1); border-color: var(--st1); color: #fff; }
.step.done .step-lbl { color: var(--ink-2); }
.step.done .step-line { background: var(--st1); }

/* Zone de dépôt de fichier */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 34px 20px;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-3); text-align: center; cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--gold); background: rgba(218,165,32,.06); color: var(--navy);
}
.dropzone svg { width: 34px; height: 34px; color: var(--gold); }
.dropzone .titre { font-size: 14px; font-weight: 600; color: var(--ink); }
.dropzone .hint { font-size: 12px; }
.dropzone.rempli { border-style: solid; border-color: var(--st1); background: var(--st1-bg); }
.dropzone.rempli svg { color: var(--st1); }

/* Prévisualisation d'import */
.preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-bottom: 16px; }
.preview-stat {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.preview-stat .n { font-size: 21px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.preview-stat .l { color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.preview-stat.ok  { background: var(--st1-bg); border-color: rgba(46,213,115,.3); }
.preview-stat.ok  .n { color: #16A75B; }
.preview-stat.ko  { background: var(--st2-bg); border-color: rgba(255,71,87,.3); }
.preview-stat.ko  .n { color: #E02D3C; }

.preview-table { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rejet-ligne { background: var(--st2-bg); }
.rejet-motif { color: #E02D3C; font-size: 11.5px; }

/* ---------------------------------------------------------------
   17. Pipeline / étapes de workflow
   --------------------------------------------------------------- */
.pipeline { display: flex; align-items: stretch; gap: 0; margin-bottom: 18px; flex-wrap: wrap; }
.pipe-step {
  position: relative; flex: 1; min-width: 170px;
  padding: 13px 18px 13px 26px;
  background: var(--surface); border: 1px solid var(--line);
  border-right: 0;
}
.pipe-step:first-child { border-radius: var(--radius) 0 0 var(--radius); padding-left: 18px; }
.pipe-step:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-right: 1px solid var(--line); }
.pipe-step::after {
  content: ''; position: absolute; right: -11px; top: 50%; z-index: 2;
  width: 20px; height: 20px; margin-top: -10px;
  background: inherit;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  transform: rotate(45deg);
}
.pipe-step:last-child::after { display: none; }
.pipe-lbl  { color: var(--ink-3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.pipe-name { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--navy); }
.pipe-etat { margin-top: 5px; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }

.pipe-step.done { background: var(--st1-bg); border-color: rgba(46,213,115,.32); }
.pipe-step.done::after { border-color: rgba(46,213,115,.32); }
.pipe-step.done .pipe-etat { color: #16A75B; font-weight: 600; }
.pipe-step.current { background: var(--gold-soft); border-color: rgba(218,165,32,.42); }
.pipe-step.current::after { border-color: rgba(218,165,32,.42); }
.pipe-step.current .pipe-etat { color: #96700E; font-weight: 600; }
.pipe-step.current .pipe-name { color: var(--navy); }

/* ---------------------------------------------------------------
   18. Loaders
   --------------------------------------------------------------- */
/* Barre d'avancement fine, en haut de l'écran */
#progress-bar {
  position: fixed; top: 0; left: 0; z-index: var(--z-loader);
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  box-shadow: 0 0 10px rgba(39,224,245,.55);
  opacity: 0;
  transition: width .28s ease, opacity .28s ease;
}
#progress-bar.on { opacity: 1; }

/* Transition d'entrée de page */
#page-loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: linear-gradient(160deg, var(--navy) 0%, #131C2E 100%);
  transition: opacity var(--t-slow), visibility var(--t-slow);
}
#page-loader.hide { opacity: 0; visibility: hidden; }
.pl-brand {
  font-family: var(--font-brand);
  font-size: 34px; font-weight: 700; letter-spacing: .17em;
  color: #fff;
}
.pl-brand .dot { color: var(--gold); }
.pl-track { width: 190px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.pl-fill {
  height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  animation: plSlide 1.15s ease-in-out infinite;
}
@keyframes plSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Actions asynchrones ponctuelles */
#mini-loader {
  position: fixed; top: 50%; left: 50%; z-index: var(--z-loader);
  transform: translate(-50%,-50%) scale(.95);
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
}
#mini-loader.show { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
#mini-loader .textes { display: flex; flex-direction: column; gap: 2px; }
#mini-loader .msg { font-size: 13.5px; font-weight: 500; color: var(--ink); }
/* Une attente qui dure doit dire pourquoi, sinon elle passe pour un blocage. */
#mini-loader .detail { font-size: 11.5px; color: var(--ink-3); max-width: 34ch; line-height: 1.45; }

.spin {
  width: 19px; height: 19px; flex: none;
  border: 2.5px solid var(--line); border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Squelettes de chargement de tableau */
.skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, #EDF0F5 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 5px; height: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------
   19. Toasts
   --------------------------------------------------------------- */
#toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; gap: 9px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  min-width: 290px; max-width: 400px; padding: 13px 15px;
  background: var(--surface); border-radius: var(--radius);
  border-left: 4px solid var(--info);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn var(--t-slow) both;
}
.toast.out { animation: toastOut var(--t) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(50px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(50px); } }

.toast .ic { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.toast .tx { flex: 1; }
.toast .ti { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.toast .tm { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.toast .tx-close {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center; border-radius: 5px;
  color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1;
}
.toast .tx-close:hover { background: var(--bg); color: var(--ink); }

.toast.success { border-left-color: var(--success); }
.toast.success .ic { color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.error   .ic { color: var(--danger); }
.toast.warn    { border-left-color: var(--warn); }
.toast.warn    .ic { color: var(--warn); }
.toast.info    { border-left-color: var(--info); }
.toast.info    .ic { color: var(--info); }

/* ---------------------------------------------------------------
   20. Bouton d'action flottant (menu radial)
   --------------------------------------------------------------- */
.fab-zone { position: fixed; right: 26px; bottom: 26px; z-index: 50; }
/* Aucun module accessible : le bouton n'ouvrirait sur rien. */
.fab-zone.vide { display: none; }
#fab-items { position: absolute; inset: 0; }

.fab {
  position: relative; z-index: 2;
  width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%);
  color: var(--navy); cursor: pointer;
  box-shadow: var(--shadow-gold), var(--shadow);
  transition: transform var(--t), box-shadow var(--t);
}
.fab svg { width: 24px; height: 24px; transition: transform var(--t-slow); }
.fab:hover { transform: scale(1.07); box-shadow: 0 10px 32px rgba(218,165,32,.5); }
.fab.open { transform: rotate(135deg); }

.fab-item {
  position: absolute; right: 7px; bottom: 7px; z-index: 1;
  width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy); color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0; transform: translate(0,0) scale(.4);
  transition: opacity var(--t), transform var(--t-slow), background var(--t-fast);
  pointer-events: none;
}
.fab-item svg { width: 18px; height: 18px; }
.fab-item:hover { background: var(--navy-3); }
.fab-zone.open .fab-item { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); pointer-events: auto; }

/* Libellé au survol */
.fab-item .tip {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px; border-radius: 6px;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.fab-item:hover .tip { opacity: 1; }

.fab-backdrop {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(27,35,51,.2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.fab-backdrop.show { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------
   21. États vides
   --------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 58px 24px; text-align: center;
}
.empty-ic {
  width: 62px; height: 62px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--line-strong);
}
.empty-ic svg { width: 30px; height: 30px; }
.empty-titre { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.empty-texte { font-size: 13px; color: var(--ink-3); max-width: 380px; line-height: 1.55; }

/* ---------------------------------------------------------------
   22. Page de connexion
   --------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--bg);
}
.login-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 60px;
  background: linear-gradient(150deg, var(--navy) 0%, #131C2E 100%);
  color: #fff;
}
/* Halos colorés discrets : rappel de la palette d'accent */
.login-aside::before,
.login-aside::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
}
.login-aside::before { width: 340px; height: 340px; top: -90px; right: -80px; background: rgba(39,224,245,.2); }
.login-aside::after  { width: 300px; height: 300px; bottom: -70px; left: -60px; background: rgba(218,39,245,.16); }

.login-brand {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; margin-bottom: 30px;
}
.login-brand .mark {
  width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: var(--navy); font-family: var(--font-brand); font-size: 24px; font-weight: 700;
  box-shadow: var(--shadow-gold);
}
.login-brand .nom {
  font-family: var(--font-brand);
  font-size: 32px; font-weight: 700; letter-spacing: .13em;
}
.login-brand .nom .dot { color: var(--gold); }

.login-aside h2 { position: relative; z-index: 1; font-size: 27px; font-weight: 600; line-height: 1.3; max-width: 420px; }
.login-aside p  { position: relative; z-index: 1; margin-top: 14px; color: rgba(255,255,255,.62); font-size: 14.5px; line-height: 1.6; max-width: 420px; }

.login-points { position: relative; z-index: 1; margin-top: 34px; display: flex; flex-direction: column; gap: 13px; }
.login-point { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); font-size: 13.5px; }
.login-point .pic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.1); color: var(--gold);
}
.login-point .pic svg { width: 15px; height: 15px; }

.login-main { display: grid; place-items: center; padding: 40px 24px; }
.login-card { width: min(392px, 100%); }
.login-card h1 { font-size: 24px; color: var(--navy); }
.login-card .sous { margin-top: 6px; margin-bottom: 26px; color: var(--ink-3); font-size: 13.5px; }
.login-form { display: flex; flex-direction: column; gap: 15px; }
.login-form .btn { height: 42px; font-size: 14.5px; }

/* Erreur de connexion : bloc dédié, pas seulement un toast */
#login-error {
  display: none; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--st2-bg); border: 1px solid rgba(255,71,87,.3);
  color: #C42736; font-size: 13px; line-height: 1.45;
  animation: shake .34s;
}
#login-error.show { display: flex; }
#login-error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

.login-aide {
  margin-top: 22px; padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); line-height: 1.65;
}
.login-aide b { color: var(--ink-2); }
.login-aide code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: 'Consolas', monospace; font-size: 11.5px; color: var(--navy);
}

/* ---------------------------------------------------------------
   23. Utilitaires
   --------------------------------------------------------------- */
.row      { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer   { flex: 1; }
.mt-0 { margin-top: 0; }  .mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }
.text-muted  { color: var(--ink-3); }
.text-danger { color: var(--danger); }
.text-navy   { color: var(--navy); }
.fw-600 { font-weight: 600; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }

/* Masquage par les droits (applyDroits) */
[data-droit].sans-droit { display: none !important; }

/* ---------------------------------------------------------------
   24. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1400px) {
  .kpi-grid, .module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1180px) {
  .nav-item span { display: none; }
  .nav-item { padding: 0 10px; }
  .societe-select .lbl { display: none; }
}

@media (max-width: 900px) {
  :root { --chrome-h: 100px; }
  #main { padding-left: 12px; padding-right: 12px; }
  .login-page { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .kpi-grid, .module-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .info-grid { grid-template-columns: 1fr; }
  .info-item.span-2 { grid-column: span 1; }
  .filters .field { min-width: 100%; }
  .filters-actions { margin-left: 0; width: 100%; }
  .drawer { width: 100vw; }
  .preview-stats { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; gap: 10px; }
  .subnav { padding: 0 12px; overflow-x: auto; }
  .global-search { min-width: 0; }
  .global-search .kbd { display: none; }
}

@media (max-width: 640px) {
  .user-chip .meta { display: none; }
  .table-foot { flex-wrap: wrap; }
  .table-foot .totaux { margin-left: 0; width: 100%; gap: 12px; flex-wrap: wrap; }
  .drawer-kpis { grid-template-columns: 1fr; }
  .drawer-kpi { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------------
   20. Paramétrage
   --------------------------------------------------------------- */

/* Deux colonnes : la navigation reste visible pendant qu'on circule
   entre les référentiels, ce qui évite un aller-retour par un menu. */
.param-layout { display: grid; grid-template-columns: 234px minmax(0, 1fr); gap: 18px; align-items: start; }

.param-nav {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  padding: 8px; position: sticky; top: calc(var(--chrome-h) + 14px);
}
.param-nav h5 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding: 11px 10px 6px; display: flex; align-items: center; gap: 7px;
}
.param-nav h5 + .param-nav-item { margin-top: 0; }
.param-nav h5 svg { width: 13px; height: 13px; }
.param-nav-groupe + .param-nav-groupe { border-top: 1px solid var(--line); margin-top: 6px; }

.param-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
  border-left: 2px solid transparent;
}
.param-nav-item:hover { background: var(--surface-2); color: var(--navy); }
.param-nav-item svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.param-nav-item.actif {
  background: rgba(218,165,32,.11); color: var(--navy); font-weight: 600;
  border-left-color: var(--gold);
}
.param-nav-item.actif svg { color: var(--gold); opacity: 1; }

.param-main { min-width: 0; }
.param-entete {
  display: flex; align-items: flex-start; gap: 13px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.param-entete .ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(218,165,32,.12); color: var(--gold);
}
.param-entete h2 { font-size: 17px; font-weight: 600; color: var(--navy); }
.param-entete p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; max-width: 68ch; line-height: 1.5; }
.param-entete .actions { margin-left: auto; display: flex; gap: 8px; flex: none; }

.param-barre { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.param-barre .recherche { flex: 1; min-width: 190px; max-width: 340px; }
.param-barre .compte { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

/* Rappel du périmètre consulté : la grille montre plusieurs sociétés,
   mais l'écriture ne vise que celle de travail. */
.bandeau-consolide {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: #E8ECF4; border: 1px solid #D3DAE8;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.bandeau-consolide svg { flex: none; color: var(--navy); }
.bandeau-consolide b { color: var(--navy); }

/* ---------------------------------------------------------------
   22. Listes adossées au paramétrage
   --------------------------------------------------------------- */

/* Le champ garde sa place ; les gestes viennent se poser à côté. */
.ref-select { display: flex; align-items: stretch; gap: 6px; }
.ref-select > .select,
.ref-select > .input,
.ref-select > .tsf { flex: 1; min-width: 0; }

.ref-outils { display: flex; gap: 4px; flex: none; align-items: flex-start; }
.ref-btn {
  width: 34px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-3);
  cursor: pointer; transition: all var(--t-fast);
}
.ref-btn:hover { border-color: var(--gold); color: var(--navy); background: #fff; }
.ref-btn.ajout:hover { border-color: var(--gold); color: #96700E; background: var(--gold-soft); }
.ref-btn svg { width: 14px; height: 14px; }
.ref-btn.tourne svg { animation: refTourne .42s ease-out; }
@keyframes refTourne { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* Sur un tag-select, la hauteur suit celle du contrôle, qui grandit
   avec le nombre de tags : on cale les boutons en haut. */
.ref-select > .tsf + .ref-outils .ref-btn { height: 38px; }

/* ---------------------------------------------------------------
   24. Module Édition
   --------------------------------------------------------------- */

.edition-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 18px; align-items: start; }

/* --- Colonne des moyens de règlement --- */
.edition-flux {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  padding: 8px; position: sticky; top: calc(var(--chrome-h) + 14px);
}
.edition-flux h5 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding: 11px 10px 8px; display: flex; align-items: center; gap: 7px;
}
.flux-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.flux-item:hover { background: var(--surface-2); color: var(--navy); }
.flux-item svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.flux-item.actif {
  background: rgba(218,165,32,.11); color: var(--navy); font-weight: 600;
  border-left-color: var(--gold);
}
.flux-item.actif svg { color: var(--gold); opacity: 1; }
.flux-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flux-compte {
  flex: none; min-width: 22px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--gold); color: var(--navy);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Un moyen sans rien à éditer reste visible mais s'efface. */
.flux-compte.vide { background: var(--line); color: var(--ink-3); font-weight: 500; }
.flux-item.vide   { opacity: .6; }

/* --- File --- */
.edition-file { min-width: 0; padding-bottom: 72px; }

.edition-entete {
  display: flex; align-items: flex-start; gap: 13px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.edition-entete h2 { font-size: 17px; font-weight: 600; color: var(--navy); }
.edition-entete p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.edition-entete .actions { margin-left: auto; flex: none; }

/* --- Un bloc par compte --- */
.compte-bloc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  margin-bottom: 12px; overflow: hidden;
}
.compte-tete {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; cursor: pointer;
}
.compte-tete:hover { background: var(--surface-2); }
.compte-tete .chevron { color: var(--ink-3); display: flex; transition: transform var(--t-fast); }
.compte-bloc.replie .chevron { transform: rotate(-90deg); }
.compte-tete .ic {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: #E8ECF4; color: var(--navy);
}
.compte-nom { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.compte-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.compte-chiffres { text-align: right; flex: none; }
.compte-chiffres b { display: block; font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; }
.compte-chiffres span { font-size: 11.5px; color: var(--ink-3); }

.compte-corps { border-top: 1px solid var(--line); }
.compte-bloc.replie .compte-corps,
.compte-bloc.replie .compte-avert { display: none; }
.compte-avert { margin: 0 14px 12px; }

table.compte-table { width: 100%; }
table.compte-table tbody tr { cursor: default; }
table.compte-table tbody tr.selected { background: rgba(218,165,32,.1); }
table.compte-table tbody tr:hover { background: var(--surface-2); }
table.compte-table tbody tr.selected:hover { background: rgba(218,165,32,.16); }

/* --- Barre d'actions, ancrée en bas --- */
.edition-barre {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 130%);
  z-index: 40; display: flex; align-items: center; gap: 18px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--navy); color: #fff;
  box-shadow: 0 14px 40px rgba(11,18,32,.4);
  transition: transform var(--t-slow);
  /* Les libellés d'action sont longs (« Éditer 3 chèques non barrés ») :
     la barre garde sa ligne tant qu'elle tient, et ne se replie qu'ensuite. */
  max-width: min(calc(100vw - 32px), 1080px);
  flex-wrap: wrap; justify-content: center;
}
.edition-barre.ouverte { transform: translate(-50%, 0); }
.barre-compte { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.barre-compte > b, .barre-compte > span:not(.barre-avert) { white-space: nowrap; }
.barre-compte b { font-weight: 600; }
.barre-compte span { color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.barre-avert {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  background: rgba(255,255,255,.14); color: #F3E2BE; font-size: 11.5px;
}
.barre-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: center; }
.edition-barre .btn { white-space: nowrap; }
.edition-barre .btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.edition-barre .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); color: #fff; }
.edition-barre .btn-ghost.danger { color: #FFB3B9; }
.edition-barre .btn:disabled { opacity: .38; }

/* --- Choix des signataires --- */
.sig-choix { display: flex; flex-direction: column; gap: 6px; }
.sig-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: all var(--t-fast);
}
.sig-option:hover { border-color: var(--gold); background: var(--surface-2); }
.sig-option.choisi { border-color: var(--gold); background: var(--gold-soft); }
.sig-option .boite {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ink-3); background: var(--surface);
  display: grid; place-items: center; color: #fff;
}
.sig-option .boite svg { width: 10px; height: 10px; opacity: 0; }
.sig-option.choisi .boite { background: var(--gold); border-color: var(--gold); }
.sig-option.choisi .boite svg { opacity: 1; }
.sig-option-nom { font-size: 13px; font-weight: 600; color: var(--navy); }
.sig-option-titre { font-size: 11.5px; color: var(--ink-3); }
.sig-option .badge { margin-left: auto; }

@media (max-width: 900px) {
  .edition-layout { grid-template-columns: 1fr; }
  .edition-flux { position: static; display: flex; flex-wrap: wrap; gap: 5px; }
  .edition-flux h5 { width: 100%; }
  .flux-item { flex: 0 1 auto; }
  .edition-barre { flex-direction: column; align-items: stretch; gap: 10px; border-radius: var(--radius); }
}

/* ---------------------------------------------------------------
   23bis. Interactions
   --------------------------------------------------------------- */

.interactions { display: flex; flex-direction: column; gap: 10px; padding: 14px; }

.interaction {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.interaction.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(218,165,32,.12); }

.interaction-tete {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; cursor: pointer;
}
.interaction-tete:hover { background: var(--surface-2); }
.interaction-tete .ic {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-3);
}
.interaction.active .interaction-tete .ic { background: var(--gold-soft); color: #96700E; }
.interaction-titre { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.interaction-quand { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

.interaction-cible {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px 10px 57px; font-size: 11.5px; color: var(--ink-3);
}
.interaction-cible svg { flex: none; }

/* Le corps ne s'ouvre qu'à la demande : cinq messages dépliés d'un coup
   rendraient l'écran illisible. */
.interaction-corps { display: none; padding: 0 14px 14px; }
.interaction.ouverte .interaction-corps { display: block; }
.interaction-corps .field { margin-bottom: 10px; }
.interaction-corps textarea.input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; resize: vertical;
}

/* ---------------------------------------------------------------
   23. Circuit de validation
   --------------------------------------------------------------- */

/* Progression compacte, en grille : on lit d'un coup d'oeil combien de
   visas sont acquis et lequel est attendu. */
.progression { display: flex; align-items: center; gap: 5px; }
.progression .pas {
  width: 15px; height: 5px; border-radius: 3px; flex: none;
  background: var(--line); transition: background var(--t-fast);
}
.progression .pas.fait    { background: var(--st1); }
.progression .pas.attendu { background: var(--gold); }
.progression-txt { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Le visa qui m'est confié se distingue de celui qui attend un autre. */
.attente-moi {
  font-weight: 600; color: #96700E;
  background: var(--gold-soft); padding: 2px 8px; border-radius: 20px;
  font-size: 12px; white-space: nowrap;
}
.attente-autre { color: var(--ink-3); font-size: 12.5px; }

/* Frise du circuit, dans le drawer */
.frise { display: flex; flex-direction: column; gap: 0; }
.frise-etape { display: flex; gap: 11px; position: relative; padding-bottom: 16px; }
.frise-etape:last-child { padding-bottom: 0; }
/* Le trait relie les étapes : il s'arrête à la dernière. */
.frise-etape:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 2px;
  width: 2px; background: var(--line);
}
.frise-etape.franchi:not(:last-child)::before { background: var(--st1); }
.frise-pastille {
  width: 26px; height: 26px; border-radius: 50%; flex: none; z-index: 1;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1.5px solid var(--line);
  color: var(--ink-3); font-size: 11.5px; font-weight: 600;
}
.frise-etape.franchi .frise-pastille {
  background: var(--st1); border-color: var(--st1); color: #fff;
}
.frise-etape.attendu .frise-pastille {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
  box-shadow: 0 0 0 4px rgba(218,165,32,.18);
}
.frise-titre  { font-size: 13px; font-weight: 600; color: var(--navy); }
.frise-etape.a_venir .frise-titre { color: var(--ink-3); font-weight: 500; }
.frise-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* Fil des mouvements */
.fil { display: flex; flex-direction: column; gap: 12px; }
.fil-item { display: flex; gap: 10px; }
.fil-point {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
}
.fil-item.avant   .fil-point { background: var(--st1); }
.fil-item.arriere .fil-point { background: var(--danger); }
.fil-titre  { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.fil-niveau { font-weight: 400; color: var(--ink-3); font-size: 11px; margin-left: 5px; }
.fil-detail { font-size: 11.5px; color: var(--ink-3); }
.fil-mot {
  margin-top: 4px; padding: 6px 9px; border-radius: 7px;
  background: var(--surface-2); border-left: 2px solid var(--line-strong);
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}

/* Consommation d'un carnet de chèques */
.jauge { display: flex; align-items: center; gap: 8px; }
.jauge-piste {
  flex: 1; min-width: 46px; height: 5px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.jauge-part { height: 100%; background: var(--gold); border-radius: 3px; transition: width var(--t); }
.jauge-txt { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ligne cliquable : tout le tableau du paramétrage ouvre une fiche. */
table.grid tbody tr.cliquable { cursor: pointer; }
.param-actions-cell { white-space: nowrap; text-align: right; }
/* Les actions n'apparaissent qu'au survol : la grille reste lisible,
   mais elles restent atteignables au clavier grâce à :focus-within. */
.param-actions-cell .btn { opacity: 0; transition: opacity var(--t-fast); }
tr:hover .param-actions-cell .btn,
tr:focus-within .param-actions-cell .btn { opacity: 1; }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

/* Texte explicatif dans les volets d'une fiche */
.param-main .note, .modal .note { font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* Groupes de champs dans le formulaire générique */
.form-groupe { grid-column: 1 / -1; margin-top: 4px; }
.form-groupe:first-child { margin-top: 0; }
.form-groupe span {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.field .aide { font-size: 11px; color: var(--ink-3); line-height: 1.45; }

/* Onglets d'une fiche (détails / droits / sociétés / options…) */
.fiche-onglets { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.fiche-onglet {
  padding: 8px 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.fiche-onglet:hover { color: var(--navy); }
.fiche-onglet.actif { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }

/* Éditeur d'options d'axe et de niveaux de validation */
.lignes-editables { display: flex; flex-direction: column; gap: 7px; }
.ligne-editable {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px;
}
.ligne-editable .poignee { color: var(--ink-3); cursor: grab; flex: none; display: flex; }
.ligne-editable .rang {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ligne-editable .input { padding: 6px 9px; font-size: 12.5px; }
.ligne-editable .code { width: 120px; flex: none; }
.ligne-editable.glisse { opacity: .4; }
.ligne-editable.survol { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(218,165,32,.16); }
.ligne-editable .usage { font-size: 11px; color: var(--ink-3); flex: none; }

/* Droits d'un profil, regroupés par module */
.droits-module { margin-bottom: 14px; }
.droits-module h5 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy); margin-bottom: 7px; display: flex; align-items: center; gap: 8px;
}
.droits-module h5 .tout {
  margin-left: auto; font-size: 11px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--gold); cursor: pointer;
}
.droits-grille { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.droit-case {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); transition: all var(--t-fast);
}
.droit-case:hover { border-color: var(--gold); background: var(--surface-2); }
.droit-case.coche { border-color: var(--gold); background: rgba(218,165,32,.08); color: var(--navy); font-weight: 500; }
/* La case décochée doit rester visible : sans contour marqué, la ligne
   se lit comme un simple libellé et non comme un choix à faire. */
.droit-case .boite {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  border: 1.5px solid var(--ink-3); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.droit-case.coche .boite { background: var(--gold); border-color: var(--gold); }
.droit-case .boite svg { width: 11px; height: 11px; opacity: 0; }
.droit-case.coche .boite svg { opacity: 1; }
.droit-case code { font-size: 10.5px; color: var(--ink-3); margin-left: auto; flex: none; }

/* Logo repris en tête des documents édités */
.logo-zone { display: flex; align-items: center; gap: 15px; }
.logo-apercu {
  width: 108px; height: 76px; flex: none; border-radius: 9px;
  border: 1px dashed var(--line); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--ink-3);
}
.logo-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.logo-actions .note { font-size: 11px; color: var(--ink-3); line-height: 1.45; }

/* ---------------------------------------------------------------
   21. Atelier de composition des gabarits
   --------------------------------------------------------------- */

.atelier { display: grid; grid-template-columns: minmax(0,1fr) 236px; gap: 16px; align-items: start; }
.atelier-large { grid-template-columns: minmax(0,1fr); }

/* --- Plan de la formule ------------------------------------------ */
.formule-cadre {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px;
  overflow: auto; max-height: 56vh;
}
.formule {
  position: relative; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line-fort, #C9D2E0);
  box-shadow: var(--shadow-xs);
  /* Trame de 10 mm : donne l'échelle sans qu'on ait à mesurer. */
  background-image:
    linear-gradient(to right,  rgba(27,35,51,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,35,51,.07) 1px, transparent 1px);
}

.zone-gab {
  position: absolute; box-sizing: border-box;
  border: 1px dashed var(--navy-4); border-radius: 3px;
  background: rgba(218,165,32,.13);
  display: flex; align-items: center;
  padding: 0 3px; overflow: hidden; white-space: nowrap;
  cursor: grab; user-select: none;
  font-size: 10px; color: var(--navy); line-height: 1.15;
}
.zone-gab.align-center { justify-content: center; }
.zone-gab.align-right  { justify-content: flex-end; }
.zone-gab.gras         { font-weight: 700; }
.zone-gab:hover  { background: rgba(218,165,32,.24); }
.zone-gab.active { border: 1.5px solid var(--gold); background: rgba(218,165,32,.3); z-index: 3; }
.zone-gab.glisse { cursor: grabbing; opacity: .85; }
.zone-gab .poignee-taille {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; cursor: nwse-resize;
  background: var(--gold); border-radius: 2px 0 3px 0;
}
.zone-gab.active .poignee-taille { display: block; }
.zone-gab .poignee-taille { display: none; }

/* En aperçu, on regarde le résultat : les repères de conception gênent. */
.formule.apercu .zone-gab { border-color: transparent; background: transparent; cursor: default; }
.formule.apercu .zone-gab .poignee-taille { display: none; }

.formule-barre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12.5px; color: var(--ink-3);
}
.formule-barre .dim { display: flex; align-items: center; gap: 5px; }
.formule-barre .dim .input { width: 68px; padding: 5px 8px; font-size: 12.5px; }

/* --- Palette de variables ---------------------------------------- */
.palette { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.palette-tete {
  padding: 9px 11px; background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.palette-corps { max-height: 52vh; overflow: auto; padding: 8px; background: var(--surface); }
.palette-groupe + .palette-groupe { margin-top: 10px; }
.palette-groupe h6 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.palette-groupe h6 svg { width: 12px; height: 12px; }
.var-chip {
  display: block; width: 100%; text-align: left;
  padding: 5px 8px; margin-bottom: 3px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  transition: all var(--t-fast);
}
.var-chip:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--navy); }
.var-chip.posee { opacity: .45; }
.var-chip .code { display: block; font-size: 10px; color: var(--ink-3); font-family: ui-monospace, monospace; }
.var-chip:hover .code { color: #96700E; }

/* --- Propriétés de la zone choisie -------------------------------- */
.zone-props {
  margin-top: 12px; padding: 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.zone-props h6 { font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 9px; }
.zone-props .grille { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.zone-props .grille label { font-size: 10.5px; color: var(--ink-3); display: block; margin-bottom: 3px; }
.zone-props .grille .input { padding: 5px 7px; font-size: 12px; }
.zone-props .rangee { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button {
  padding: 5px 10px; font-size: 12px; background: var(--surface);
  color: var(--ink-2); border: 0; cursor: pointer; transition: all var(--t-fast);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--gold); color: var(--navy); font-weight: 600; }

/* --- Modèle de texte (courrier, fichier bancaire) ----------------- */
.modele-champ { margin-bottom: 12px; }
.modele-champ label {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px;
}
.modele-champ textarea.input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.65; resize: vertical;
}
/* --- Éditeur enrichi des modèles de courrier ---------------------- */
.rt { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.rt-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 5px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.rt-groupe { display: flex; align-items: center; gap: 2px; }
.rt-groupe + .rt-groupe { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--line); }
.rt-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 5px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-2); font-size: 13px; cursor: pointer;
  transition: all var(--t-fast);
}
.rt-b:hover { background: var(--surface); border-color: var(--line); color: var(--navy); }
/* L'état enfoncé dit ce qui s'applique déjà là où se trouve le curseur. */
.rt-b.actif { background: var(--gold-soft); border-color: var(--gold); color: var(--navy); }
.rt-select {
  height: 27px; padding: 0 5px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 11.5px; color: var(--ink-2); cursor: pointer; max-width: 130px;
}
.rt-select.etroit { max-width: 74px; }
.rt-couleur {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent; font-weight: 700; font-size: 13px;
}
.rt-couleur:hover { background: var(--surface); border-color: var(--line); }
.rt-couleur.fond span { background: #F6E7B4; padding: 0 3px; border-radius: 2px; color: var(--navy); }
/* Le sélecteur natif est masqué : seule la pastille se voit, mais c'est
   bien lui qui reçoit le clic. */
.rt-couleur input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
}
.rt-editeur {
  min-height: 320px; max-height: 52vh; overflow: auto;
  padding: 14px 16px; background: var(--surface);
  font-size: 13px; line-height: 1.7; color: var(--ink); outline: none;
}
.rt-editeur:focus { box-shadow: inset 0 0 0 2px var(--gold-soft); }
.rt-editeur p { margin: 0 0 8px; }
.rt-editeur h1 { font-size: 20px; margin: 0 0 8px; }
.rt-editeur h2 { font-size: 16.5px; margin: 12px 0 6px; }
.rt-editeur h3 { font-size: 14.5px; margin: 10px 0 5px; }
.rt-editeur ul, .rt-editeur ol { margin: 0 0 8px 20px; }
.rt-editeur blockquote {
  margin: 0 0 8px; padding-left: 11px; border-left: 3px solid var(--line); color: var(--ink-2);
}
.rt-editeur hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.rt-editeur table { border-collapse: collapse; margin: 0 0 8px; }
.rt-editeur th, .rt-editeur td { border: 1px solid var(--line); padding: 4px 7px; }

.apercu-texte {
  margin-top: 10px; padding: 13px 15px;
  background: var(--navy); color: #E8ECF4; border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow: auto;
}
.apercu-texte.document {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); font-family: inherit; font-size: 13px;
  white-space: normal;
}
.apercu-texte.document p { margin: 0 0 8px; }
.apercu-texte.document h1 { font-size: 20px; margin: 0 0 8px; }
.apercu-texte.document h2 { font-size: 16.5px; margin: 12px 0 6px; }
.apercu-texte.document h3 { font-size: 14.5px; margin: 10px 0 5px; }
.apercu-texte.document ul, .apercu-texte.document ol { margin: 0 0 8px 20px; }
.apercu-texte.document blockquote {
  margin: 0 0 8px; padding-left: 11px; border-left: 3px solid var(--line); color: var(--ink-2);
}
.apercu-texte.document hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.apercu-texte.document table { border-collapse: collapse; margin: 0 0 8px; }
.apercu-texte.document th, .apercu-texte.document td { border: 1px solid var(--line); padding: 4px 7px; }

/* =====================================================================
   Mon compte
   ===================================================================== */
.compte-layout {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: 300px minmax(0, 1fr);
}
.compte-carte {
  padding: 20px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  position: sticky; top: 96px;
}
.compte-avatar {
  width: 60px; height: 60px; margin: 0 auto 12px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--gold-warm);
  font-size: 21px; font-weight: 700; letter-spacing: .04em;
}
.compte-nom { text-align: center; font-size: 16px; font-weight: 700; color: var(--navy); }
.compte-login {
  text-align: center; font-size: 12px; color: var(--ink-3);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; margin-top: 2px;
}
.compte-profil { text-align: center; margin-top: 9px; }

.compte-faits { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.compte-faits > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 0;
}
.compte-faits dt { font-size: 11.5px; color: var(--ink-3); }
.compte-faits dd {
  margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}

.compte-societes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.compte-titre {
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px;
}
.compte-societe {
  display: flex; align-items: center; gap: 7px; padding: 3px 0;
  font-size: 12.5px; color: var(--ink-2);
}
.compte-societe svg { color: var(--ink-3); flex: none; }
.compte-societe .badge { margin-left: auto; }

/* Robustesse du mot de passe : indicative, jamais bloquante. */
.jauge-mdp {
  height: 4px; border-radius: 2px; background: var(--line);
  margin: 6px 0 4px; overflow: hidden;
}
.jauge-mdp-part { height: 100%; width: 0; transition: width var(--t), background var(--t); }
.jauge-mdp-part.faible { background: var(--danger); }
.jauge-mdp-part.moyen  { background: var(--gold); }
.jauge-mdp-part.fort   { background: var(--st1); }

/* --- Historique personnel ------------------------------------------- */
.histo { max-height: 60vh; overflow: auto; }
.histo-jour + .histo-jour { border-top: 1px solid var(--line); }
.histo-date {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 18px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 700; color: var(--navy);
  text-transform: capitalize;
}
.histo-date span { font-weight: 400; color: var(--ink-3); text-transform: none; }
.histo-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 9px 18px; border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.histo-item:hover { background: var(--gold-soft); }
.histo-heure {
  flex: none; width: 42px; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.histo-corps { flex: 1; min-width: 0; }
.histo-titre { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.histo-titre .badge { font-size: 10px; height: 17px; padding: 0 6px; }
.histo-detail { font-size: 12px; color: var(--ink-3); margin-top: 2px; word-break: break-word; }
.histo-ip {
  flex: none; font-size: 11px; color: var(--ink-3);
  font-family: ui-monospace, monospace; padding-top: 2px;
}
.histo-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}

@media (max-width: 900px) {
  .compte-layout { grid-template-columns: 1fr; }
  .compte-carte { position: static; }
  .histo-ip { display: none; }
}

/* =====================================================================
   Reporting
   ===================================================================== */

/* --- Onglets : six lectures, choisies d'un coup d'œil --------------- */
.rep-onglets {
  display: grid; gap: 8px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.rep-onglet {
  text-align: left; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: all var(--t-fast);
}
.rep-onglet:hover { border-color: var(--gold); background: var(--gold-soft); }
.rep-onglet.actif { background: var(--navy); border-color: var(--navy); }
.rep-onglet .t { display: block; font-size: 13px; font-weight: 600; color: var(--navy); }
.rep-onglet .s {
  display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); line-height: 1.35;
}
.rep-onglet.actif .t { color: #fff; }
.rep-onglet.actif .s { color: rgba(255,255,255,.7); }

/* --- Zone de réglage ------------------------------------------------ */
.rep-reglage { margin-bottom: 16px; }
.rep-bloc {
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
}
.rep-champ + .rep-champ { margin-top: 12px; }
.rep-champ > label {
  display: block; font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.rep-champ .field label.mini {
  font-size: 10.5px; text-transform: none; letter-spacing: 0; color: var(--ink-3);
}

/* La zone accueille les jetons déplacés : elle se signale au survol. */
.rep-zone {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 38px; padding: 6px 8px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); transition: all var(--t-fast);
}
.rep-zone.survol { border-color: var(--gold); background: var(--gold-soft); }
.rep-zone.pale { margin-top: 6px; background: var(--bg); opacity: .85; }
.rep-etiquette {
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.rep-vide { font-size: 12px; color: var(--ink-3); font-style: italic; }

.rep-jeton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; color: var(--ink-2); cursor: grab; user-select: none;
  transition: all var(--t-fast);
}
.rep-jeton:hover { border-color: var(--gold); color: var(--navy); }
.rep-jeton.actif { background: var(--navy); border-color: var(--navy); color: #fff; }
.rep-jeton.masquee { opacity: .6; border-style: dashed; }
.rep-jeton.porte { opacity: .35; cursor: grabbing; }
.rep-bascule { font-style: normal; opacity: .65; cursor: pointer; font-size: 13px; }
.rep-bascule:hover { opacity: 1; }

/* --- Tableau croisé -------------------------------------------------- */
.rep-tableau-wrap { overflow-x: auto; }
.rep-tableau { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-tableau th, .rep-tableau td { padding: 8px 11px; border-bottom: 1px solid var(--line); }
.rep-tableau thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--navy); color: #fff; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.rep-tableau th.right, .rep-tableau td.right { text-align: right; }
.rep-tableau .col-axe { min-width: 230px; }
.rep-tableau .col-total { background: var(--navy); }
.rep-tableau tfoot td {
  background: var(--surface-2); font-weight: 700; color: var(--navy);
  border-top: 2px solid var(--line-strong); border-bottom: 0;
}
.rep-tableau .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tableau .negatif { color: var(--danger); }

/* Une ligne se déplie : le chevron dit qu'il y a quelque chose dessous. */
.rep-ligne { cursor: pointer; transition: background var(--t-fast); }
.rep-ligne:hover { background: var(--gold-soft); }
.rep-chevron {
  display: inline-flex; width: 15px; color: var(--ink-3);
  transition: transform var(--t-fast); vertical-align: -2px;
}
.rep-ligne.ouverte .rep-chevron { transform: rotate(180deg); color: var(--gold); }
.rep-ligne.ouverte { background: var(--gold-soft); }
.rep-ligne .badge { margin-left: 7px; font-size: 10px; height: 17px; padding: 0 6px; }
.rep-detail > td { background: var(--bg); padding: 10px 14px; }
.rep-detail .mini { background: var(--surface); }
.rep-vide-cell { text-align: center; color: var(--ink-3); font-style: italic; padding: 22px; }

/* --- Trésorerie : bandeaux, saisie, synthèse ------------------------- */
.rep-tableau.treso td:first-child, .rep-tableau.treso th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
}
.rep-tableau.treso thead th:first-child { background: var(--navy); z-index: 2; }
.rep-bandeau td {
  background: var(--gold-soft); color: #96700E;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.rep-tableau.treso .rep-bandeau td:first-child { background: var(--gold-soft); }
.rep-total-ligne td {
  background: var(--navy); color: #fff; font-weight: 700;
}
.rep-tableau.treso .rep-total-ligne td:first-child { background: var(--navy); }
.rep-total-ligne .negatif { color: #FFB4B4; }
.rep-synthese td { background: var(--surface-2); font-weight: 500; }
.rep-tableau.treso .rep-synthese td:first-child { background: var(--surface-2); font-weight: 600; }
.rep-cumul td {
  background: var(--navy); color: var(--gold-warm); font-weight: 700;
  border-top: 2px solid var(--gold);
}
.rep-tableau.treso .rep-cumul td:first-child { background: var(--navy); }
.rep-cumul .negatif { color: #FFB4B4; }

/* La saisie est dans le tableau : pas de formulaire à part, on tape où
   l'on regarde. */
.rep-saisie {
  width: 100%; min-width: 68px; padding: 3px 6px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; text-align: right;
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.rep-saisie.libelle { text-align: left; min-width: 150px; font-weight: 500; }
.rep-saisie:hover { border-color: var(--line); background: var(--surface); }
.rep-saisie:focus {
  outline: none; border-color: var(--gold); background: var(--surface);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.rep-suppr {
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; opacity: 0; transition: opacity var(--t-fast);
}
.rep-tableau tr:hover .rep-suppr { opacity: 1; }
.rep-suppr:hover { color: var(--danger); }
.rep-ajout td { background: var(--surface-2); }
.rep-ajout .btn { margin-right: 10px; }

/* Une case qui cache des opérations le dit au survol. */
.rep-tableau td.depliable { cursor: zoom-in; }
.rep-tableau td.depliable:hover {
  background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold);
}
.rep-piece { cursor: zoom-in; }
.rep-piece:hover { background: var(--gold-soft); }

/* --- Dossier fournisseur -------------------------------------------- */
.rep-fiche { padding: 16px 18px; }
.rep-fiche-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.rep-fiche-nom { font-size: 17px; font-weight: 700; color: var(--navy); }
.rep-jauge {
  position: relative; width: 190px; height: 22px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
}
.rep-jauge-part { height: 100%; background: var(--st1); }
.rep-jauge span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--navy);
}
.rep-sous {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 7px;
}

/* --- Graphe ---------------------------------------------------------- */
.graphe { width: 100%; height: auto; display: block; }
.graphe .g-grille { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.graphe .g-axe { font-size: 11px; fill: var(--ink-3); }
.graphe .g-ligne { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.graphe .g-point { stroke: var(--surface); stroke-width: 1.5; }
.graphe .g-liaison { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.graphe .g-barre { transition: fill-opacity var(--t-fast); }
.graphe .g-barre:hover { fill-opacity: 1; }
.g-legende {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-bottom: 10px; font-size: 12px; color: var(--ink-2);
}
.g-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.g-legende-item .puce { width: 10px; height: 10px; border-radius: 3px; }
.graphe-vide {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px; color: var(--ink-3); font-size: 13px;
}

@media (max-width: 900px) {
  .rep-onglets { grid-template-columns: 1fr 1fr; }
  .rep-tableau .col-axe { min-width: 170px; }
}

/* --- Vignettes de numérisation (retrait) --------------------------- */
.scan-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px; margin: 12px 0;
}
.scan-case {
  display: flex; gap: 10px; align-items: center;
  padding: 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}
/* L'aperçu est petit mais suffit à voir qu'on n'a pas scanné la mauvaise
   face : c'est la seule erreur que la vignette doit rattraper. */
.scan-apercu {
  width: 74px; height: 52px; flex: none; border-radius: 5px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-3);
}
.scan-apercu img { width: 100%; height: 100%; object-fit: cover; }
.scan-info { flex: 1; min-width: 0; }
.scan-libelle { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.scan-etat { margin-bottom: 5px; word-break: break-all; }

/* --- Formule en circulation d'un paiement -------------------------- */
.formule-vive {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--gold-soft); border: 1px solid var(--gold);
}
.formule-vive .lbl {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #96700E;
}
/* Le numéro se lit à distance : c'est lui qu'on épelle au téléphone. */
.formule-num {
  font-size: 22px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-top: 2px;
}
.formule-etat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* --- Valideurs d'un niveau ---------------------------------------- */
.valideurs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 1; min-width: 0; }
.valideur-jeton {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 9px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2); white-space: nowrap;
}
.valideur-jeton.suppleant { border-style: dashed; color: var(--ink-3); }
.valideur-jeton .retirer { cursor: pointer; display: flex; color: var(--ink-3); }
.valideur-jeton .retirer:hover { color: var(--danger); }
.valideurs .ajouter {
  padding: 3px 9px; border-radius: 20px; border: 1px dashed var(--line);
  background: transparent; font-size: 11.5px; color: var(--gold);
  cursor: pointer; white-space: nowrap;
}
.valideurs .ajouter:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--navy); }
.valideurs .aucun { font-size: 11.5px; color: var(--ink-3); font-style: italic; }

.ligne-editable.avec-valideurs { flex-wrap: wrap; }
.ligne-editable.avec-valideurs .valideurs { width: 100%; padding-left: 38px; margin-top: 6px; }

@media (max-width: 1100px) {
  .atelier { grid-template-columns: minmax(0,1fr); }
  .palette-corps { max-height: 220px; }
}

@media (max-width: 900px) {
  .param-layout { grid-template-columns: 1fr; }
  .param-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .param-nav-groupe { display: contents; }
  .param-nav h5 { width: 100%; padding: 6px 8px 2px; }
  .droits-grille { grid-template-columns: 1fr; }
}

/* Respect de la préférence système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .chrome, .fab-zone, .sel-toolbar, .filters, #toasts, .drawer-overlay { display: none !important; }
  #main { padding: 0; }
  .table-wrap { border: 0; box-shadow: none; }
  table.grid thead th { background: #EEE !important; color: #000 !important; }
}