/* ==========================================================================
   JETONS DE CONCEPTION — fondation (audit charte, 19/09/2026).
   Source de vérité UNIQUE des couleurs, dérivées de la charte PYTHEAS CONSEIL.
   Les anciennes variables (--muted, --ok, --btn-anneau…) deviennent des ALIAS
   de ces jetons : on ne corrige donc qu'ICI pour agir dans toute l'application.
   Étapes suivantes de la migration : voir docs/audit/RAPPORT_AUDIT_CHARTE_2026-09-19.md
   ========================================================================== */
:root {
  /* Palette du cabinet */
  --pyt-blue-600: #1F5FA9; --pyt-blue-800: #174A85; --pyt-blue-50: #EAF1F9;
  --pyt-taupe-500: #8C8477; --pyt-taupe-700: #6E675B;   /* 700 : texte secondaire lisible */
  --pyt-sand-100: #F3F1EE;  --pyt-sand-50: #F8F7F5;
  --pyt-ink-800: #3C3C3C;   --pyt-ink-600: #6B6B6B;
  --pyt-line-300: #D9D9D6;  --pyt-line-200: #E8E7E3;

  /* Couleurs sémantiques (à préférer dans tout nouveau style) */
  --color-bg: var(--pyt-sand-100);
  --color-surface: #ffffff;
  --color-surface-muted: var(--pyt-sand-50);
  --color-text: var(--pyt-ink-800);            /* 9,8:1 sur sable */
  --color-text-muted: var(--pyt-ink-600);      /* 4,7:1 sur sable */
  --color-text-subtle: var(--pyt-taupe-700);   /* 5,0:1 sur sable — remplace la taupe claire en texte */
  --color-border: var(--pyt-line-300);
  --color-border-strong: var(--pyt-taupe-500); /* champs, cases (≥ 3:1) */
  --color-accent: var(--pyt-blue-600);
  --color-accent-hover: var(--pyt-blue-800);
  --color-accent-subtle: var(--pyt-blue-50);
  /* Fond des GRANDES surfaces bleues (bouton primaire, en-tête de tableau) : en
     clair = accent ; en sombre, reste assez foncé pour le texte blanc (5,3:1). */
  --color-accent-solid: var(--color-accent);
  --color-success: #0f6e56; --color-success-bg: #e1f5ee;
  --color-warning: #854f0b; --color-warning-bg: #faeeda;
  --color-danger: #a32d2d;  --color-danger-bg: #fcebeb;
  /* Bordures d'état (teinte claire de chaque état), pour remplacer les ambres,
     verts et rouges de bordure codés en dur hors charte. */
  --color-success-border: color-mix(in srgb, var(--color-success) 35%, #fff);
  --color-warning-border: color-mix(in srgb, var(--color-warning) 38%, #fff);
  --color-danger-border:  color-mix(in srgb, var(--color-danger) 35%, #fff);
  --color-overlay: rgb(23 74 133 / .35);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);

  /* Échelle d'empilement nommée (audit charte, lot 5). Avant, la modale (20)
     passait SOUS les menus et popovers (60) : une fenêtre pouvait être masquée. */
  --z-sticky: 10; --z-dropdown: 100; --z-drawer: 200; --z-modal: 300; --z-palette: 400; --z-toast: 500;

  /* Alias historiques → jetons (agir en un seul endroit). --ok/--ok-bg n'étaient
     définis nulle part : 9 usages retombaient sur un vert hors charte trop pâle. */
  --ok: var(--color-success);  --ok-bg: var(--color-success-bg);
  /* Texte/traits POSÉS SUR une couleur pleine (bouton bleu, en-tête bleu,
     pastille) : restent clairs, ne basculent pas en mode sombre. */
  --color-on-accent: #ffffff;
}

:root {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-2: var(--color-text-muted);
  --muted: var(--color-text-subtle);   /* remappé : le texte secondaire passe à ≥ 4,9:1 partout */
  --accent: var(--color-accent);
  --accent-bg: var(--color-accent-subtle);
  --taupe: var(--pyt-taupe-500);                     /* reste clair : filets et décors uniquement */
  --taupe-bg: var(--color-bg);
  --taupe-line: var(--color-border);
  --danger: var(--color-danger);
  --danger-bg: var(--color-danger-bg);
  --success: var(--color-success);
  --success-bg: var(--color-success-bg);
  --warn: var(--color-warning);
  --warn-bg: var(--color-warning-bg);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--taupe-line);
  border-top: 3px solid var(--accent);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }
.logo { font-size: 20px; }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-sub { font-size: 13px; color: var(--taupe); font-weight: 400; padding-left: 12px; border-left: 1px solid var(--taupe-line); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.inline { display: inline; margin: 0; }

.status { font-size: 13px; color: var(--muted); }
.status.ok { color: var(--success); }
.status.off { color: var(--danger); }

.btn {
  padding: 8px 14px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--color-accent-solid); border-color: var(--color-accent-solid); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--color-surface); }

.container { max-width: 1080px; margin: 0 auto; padding: 20px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card { background: var(--taupe-bg); border: 1px solid var(--taupe-line); border-radius: 12px; padding: 14px 16px; }
.card .label { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.card .value { font-size: 24px; font-weight: 500; }
.card .value.danger { color: var(--danger); }
.card .value.small { font-size: 15px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.toolbar-right { display: flex; gap: 8px; }

.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: auto; position: sticky; top: var(--stick-h, 150px); max-height: calc(100vh - var(--stick-h, 150px) - 16px); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; }
th { background: var(--taupe-bg); font-weight: 500; color: var(--pyt-taupe-500); font-size: 13px; border-bottom: 1px solid var(--taupe-line); }
/* En-têtes de colonnes FIGÉS : restent visibles quand on défile dans le tableau (fond th opaque). */
.table-wrap thead th { position: sticky; top: 0; z-index: 3; }
/* Angle haut-gauche (en-tête de la 1ʳᵉ colonne, elle-même figée) au-dessus de tout le reste. */
#tva-table thead th.col-rs, #is-table thead th.col-rs, #cloture-table thead th.col-rs, #greffe-table thead th.col-rs, #urssaf-table thead th.col-rs, #habil-table thead th.col-rs { z-index: 6; }
/* Cases cliquables de l'onglet « Sociétés civiles » (✗ à suivre · ⏳ en attente · ✅ signé). */
.civil-mark { cursor: pointer; display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: 6px; border: 1px solid transparent; }
.civil-mark:hover { background: var(--accent-bg); border-color: var(--accent); }
/* Repli du suivi d'avancement (Clôture) : .home-people a display:flex, qui neutraliserait
   l'attribut [hidden] ; on force donc le masquage (id + attribut = plus spécifique). */
#cloture-people-body[hidden] { display: none; }
/* Onglet Dossiers : ligne en cours d'édition (roue crantée activée). */
#dos-table tr.row-editing > td { background: var(--accent-bg); }
.icon-btn.on { color: var(--accent); background: var(--accent-bg); border-radius: 6px; }
/* Bandeau « dernière vérification incomplète » (TVA/IS/INPI/URSSAF), persistant jusqu'au prochain lancement. */
.runwarn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--color-warning-border); border-radius: 8px; padding: 9px 14px; margin: 0 0 12px; font-size: 13.5px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th .arrow { font-size: 10px; color: var(--accent); }
tbody tr { border-top: 1px solid var(--border); }
tbody tr:first-child { border-top: 0; }
td.center, th.center { text-align: center; }
.rs { font-weight: 500; }
.siren { color: var(--text-2); font-variant-numeric: tabular-nums; }
.resp { color: var(--text-2); }
.msg { color: var(--text); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.none { color: var(--muted); }

.badge { display: inline-block; min-width: 22px; padding: 2px 9px; border-radius: 20px; font-weight: 500; font-size: 13px; }
.badge.unread { background: var(--danger-bg); color: var(--danger); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--danger-bg); color: var(--danger); }
.badge.zero { color: var(--muted); }

.value.warn { color: var(--warn); }
.msg.warn { color: var(--warn); font-weight: 500; }
tr.row-warn { background: var(--color-warning-bg); }

.row-actions { display: flex; gap: 6px; justify-content: center; }
.icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; color: var(--text-2); }
.icon-btn:hover { background: var(--surface-2); }

.empty { text-align: center; color: var(--muted); padding: 32px; }
.foot { color: var(--muted); font-size: 12px; margin-top: 12px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border-radius: 12px; width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto; }
.modal-card.large { width: min(1040px, 94vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--taupe-line); }
.modal-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
#modal-close { padding: 0; width: 30px; height: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--muted); border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
#modal-close:hover { background: var(--surface-2); color: var(--text); }
/* Padding porté par le conteneur #modal-body → toute modale est espacée, qu'elle enveloppe son contenu dans .modal-body ou non (fini le « texte collé aux bords »). */
#modal-body { padding: 20px 22px 22px; }
.modal-body { padding: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; background: var(--surface); color: var(--text); }
.field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23005DAB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--color-accent); }
.field-check { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text); user-select: none; }
.field-check:hover { border-color: var(--accent); background: var(--accent-bg); }
.field-check input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Documents d'entrée en relation (modale) */
.doc-head { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.doc-warn { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.doc-sec { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding-bottom: 5px; margin: 18px 0 10px; }
.doc-sec small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.doc-grid .field { margin-bottom: 12px; }
.doc-grid .field > span { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.doc-grid .field > span small { color: var(--muted); }
.doc-wide { grid-column: 1 / -1; }
.doc-check { display: flex; align-items: center; gap: 8px; }
.doc-check > span { margin: 0 !important; }
.doc-check input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.doc-mp-head { font-size: 13px; color: var(--text-2); margin: 6px 0; }
.doc-res { margin-top: 14px; }
.doc-done { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.doc-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.doc-pick .doc-check { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; cursor: pointer; }
.doc-pick .doc-check:hover { border-color: var(--accent); background: var(--accent-bg); }
.doc-pick .doc-check small { color: var(--muted); }
.doc-files { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.doc-file-row { display: flex; align-items: center; gap: 8px; }
.doc-file-row .doc-file-dl { flex: 1; text-align: left; }
.doc-topdf { flex: 0 0 auto; white-space: nowrap; }
.doc-journal { display: flex; flex-direction: column; gap: 2px; }
.doc-jrow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.doc-jref { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.doc-jmeta { color: var(--muted); white-space: nowrap; }
.doc-jrow.annule { opacity: .6; }
.doc-jrow.annule .doc-jref { text-decoration: line-through; }
.doc-env { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.doc-env.sbx { background: var(--color-warning-bg); color: var(--color-warning); }
.doc-env.prod { background: #D8F0DE; color: #1B6B34; }
.doc-sign-status { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.doc-sign-files { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.doc-sign-files .doc-check { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.ged-banner { background: var(--accent-bg, var(--color-accent-subtle)); border: 1px solid var(--accent); border-radius: 8px; padding: 9px 13px; margin-bottom: 12px; font-size: 14px; color: var(--text); }
.ged-banner a { color: var(--accent); margin-left: 6px; white-space: nowrap; }
.abo-alert { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.abo-alert-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.abo-alert-row button { flex: 0 0 auto; }
@media (max-width: 620px) { .doc-grid, .doc-pick { grid-template-columns: 1fr; } }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.captcha-img { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; max-width: 100%; }

.card.clickable { cursor: pointer; transition: border-color .12s; }
.card.clickable:hover { border-color: var(--accent); }
.card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.badge.clickable, .msg-link { cursor: pointer; }
.msg-link { color: var(--accent); text-decoration: none; }
.msg-link:hover { text-decoration: underline; }

.msg-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.msg-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.msg-item-obj { font-weight: 500; }
.msg-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.msg-status { font-size: 12px; font-weight: 500; color: var(--danger); white-space: nowrap; }
.msg-status.lu-ok { color: var(--muted); }
.rs-link { color: var(--text); text-decoration: none; cursor: pointer; }
.rs-link:hover { color: var(--accent); text-decoration: underline; }

.badge-count { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: var(--color-on-accent); font-size: 11px; font-weight: 500; }
.icon-btn.flagged { color: var(--warn); }
.suivi-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.suivi-item.due { border-color: var(--danger); background: var(--danger-bg); }
.suivi-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.suivi-head .rs-link { font-weight: 500; }
.suivi-resp { font-size: 12px; color: var(--muted); }
.suivi-date { font-size: 12px; color: var(--text-2); margin-left: auto; }
.suivi-head .hl-danger { margin-left: auto; }
.suivi-note { font-size: 13px; color: var(--text); margin-top: 6px; white-space: pre-wrap; }
.suivi-actions { margin-top: 8px; }
.msg-item-actions { display: flex; gap: 8px; margin-top: 10px; }
.msg-item-body { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.conv { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.conv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-from { font-size: 12px; font-weight: 500; color: var(--text-2); }
.conv-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.conv-obj { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.conv-text { font-size: 14px; line-height: 1.6; white-space: normal; }
.conv-pj { font-size: 12px; color: var(--text-2); margin-top: 8px; }
.pj-link { display: inline-block; color: var(--accent); text-decoration: none; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); margin: 2px 0; }
.pj-link:hover { border-color: var(--accent); text-decoration: underline; }
.pj-nolink { color: var(--muted); }
.suivi-msgref { font-size: 12px; color: var(--accent); margin-top: 4px; }

/* Bandeau + onglets figés en haut, sur TOUTE LA LARGEUR de l'écran. .tabbar est placée hors
   de .container (donc pleine largeur) ; les onglets restent alignés sur le contenu via un
   max-width interne. --topbar-h (hauteur du bandeau) est mise à jour en JS (varie en mobile). */
.tabbar { position: sticky; top: var(--topbar-h, 63px); z-index: 4; background: var(--bg); border-bottom: 1px solid var(--border); }
.nav-burger { display: none; }   /* bouton menu : mobile uniquement (cf. @media) */

/* Lecture seule (droit « Lecture » sur l'onglet affiché) : on masque les actions d'écriture.
   Seul l'onglet visible est concerné (les autres vues sont déjà masquées). */
body.access-ro .toolbar-right,
body.access-ro .todo-toolbar .toolbar-right,
body.access-ro .fs-modif,
body.access-ro #fs-editid,
body.access-ro #fs-del { display: none !important; }
.tabs { display: flex; gap: 4px; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tab { padding: 10px 18px; border: 0; background: transparent; font-size: 14px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); font-weight: 500; border-bottom-color: var(--accent); }

.maj-info { font-size: 12px; color: var(--muted); margin: -6px 0 14px; }
.maj-inline { color: var(--accent); opacity: 0.8; }
.tva-banner { padding: 10px 14px; background: var(--accent-bg); border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: var(--accent); }
.tva-banner strong { color: var(--accent); }
.hl-danger { color: var(--danger); font-weight: 500; }
.tva-filtre { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tva-filtre.actif { background: var(--accent); color: var(--color-on-accent); padding: 1px 6px; border-radius: 10px; text-decoration: none; }

#tva-table { width: auto; min-width: 100%; table-layout: auto; }
#tva-table th, #tva-table td { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
#tva-table .mois-col { min-width: 92px; vertical-align: top; }
#tva-table .col-resp { min-width: 42px; }
#tva-table .col-pay { min-width: 76px; }
#tva-table .col-ns { min-width: 120px; }
/* Colonne "Raison sociale" figée à gauche pendant le défilement horizontal. */
#tva-table .col-rs, #tva-table td.rs { position: sticky; left: 0; z-index: 2; white-space: normal; min-width: 190px; max-width: 230px; }
#tva-table th.col-rs { background: var(--taupe-bg); }
#tva-table td.rs { background: var(--surface); }
/* L'onglet TVA occupe toute la largeur de la page (déborde du conteneur centré). */
#view-tva .table-wrap { width: 100%; }
.siren-sub { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* Toggle « TVA faite par le client » (onglet TVA, sous le responsable) */
.tva-client-toggle { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); color: var(--muted); background: transparent; white-space: nowrap; }
.tva-client-toggle:hover { border-color: var(--accent); color: var(--accent); }
.tva-client-toggle.on { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
/* Statut TVA remonté de Pennylane (sous la raison sociale, onglet TVA) */
.pl-tva { font-size: 11px; margin-top: 3px; color: #6b4d9a; font-weight: 500; }
.pl-tva.paid { color: var(--color-success); }
.pl-tva.apayer { color: var(--color-warning); background: var(--color-warning-bg); display: inline-block; padding: 1px 6px; border-radius: 6px; }
.pl-tva.in-cell { margin-top: 2px; font-size: 10.5px; line-height: 1.2; }
/* Habilitations : statuts et ligne « titulaire tiers » */
.hab-encours { color: var(--accent); }
.hab-tiers { cursor: help; }
.hab-consultable { cursor: help; color: var(--success); font-weight: 600; }   /* non titulaire mais consultable (✓*) */
.hab-tiers-line { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hab-tiers-name { font-weight: 500; color: var(--text); }
.hab-tiers-one { display: inline-flex; flex-direction: column; line-height: 1.25; }
.hab-tiers-num { font-size: 10.5px; color: var(--muted); }
.hab-deleg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.hab-deleg input { margin: 0; }
.hab-deleg-ok { color: var(--success); }
.tva-ok { color: var(--success); }
.tva-non { color: var(--danger); font-weight: 500; }
.tva-alert { color: var(--danger); }
.tva-neutre { color: var(--muted); }
.tva-pay { font-weight: 500; }
.ech-lab { font-size: 11px; color: var(--muted); margin-bottom: 1px; }
.col-prog { font-size: 11px; font-weight: 400; color: var(--text-2); margin-top: 2px; text-transform: none; }

.tva-filtres { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.flt-label { font-size: 12px; color: var(--text-2); }
.resp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px 3px 3px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; color: var(--text-2); user-select: none; background: var(--color-surface); vertical-align: middle; }
.resp-chip:hover { border-color: var(--accent); }
.resp-chip .rp-av { width: 20px; height: 20px; border-radius: 50%; color: var(--color-on-accent); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; letter-spacing: .2px; }
.resp-chip .rp-name { padding-right: 2px; }
.resp-chip.actif, .resp-chip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.resp-chip.clear { border-color: var(--danger); color: var(--danger); padding: 3px 11px; }
.resp-color-edit { cursor: pointer; text-decoration: none; font-size: 14px; margin-left: 4px; opacity: .75; }
.resp-color-edit:hover { opacity: 1; }
.rc-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.rc-row { display: flex; align-items: center; gap: 10px; }
.rc-row .rp-av { width: 24px; height: 24px; border-radius: 50%; color: var(--color-on-accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rc-row .rc-name { flex: 1; font-size: 13px; }
.rc-row input[type=color] { width: 46px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--color-surface); cursor: pointer; padding: 2px; }
.rc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* Pastilles de couleur (modale « Ma couleur ») — clic direct fiable */
.mc-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 2px; }
.mc-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.mc-swatch.sel { border-color: var(--text); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 0 0 2px var(--surface); }
.mc-custom { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--surface-2); border: 1px dashed var(--border); box-shadow: none; position: relative; overflow: hidden; }
.mc-custom input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mc-preview-row { display: flex; align-items: center; gap: 11px; margin: 14px 0 16px; }
.mc-name { color: var(--text-2); }
.mc-customrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.mc-customrow input[type=color] { width: 42px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.svc-creds { background: var(--accent-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.svc-sum { list-style: none; cursor: pointer; padding: 9px 13px; font-size: 13px; display: flex; align-items: center; gap: 10px; user-select: none; }
.svc-sum::-webkit-details-marker { display: none; }
.svc-sum::before { content: "▸"; color: var(--muted); font-size: 11px; }
details[open] .svc-sum::before { content: "▾"; }
.svc-body { padding: 2px 13px 12px; }
.svc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.svc-status.ok { color: var(--success); font-size: 12px; font-weight: 600; }
.svc-status.off { color: var(--warn); font-size: 12px; font-weight: 600; }
.svc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.svc-in { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; min-width: 190px; }
.svc-note { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

#tva-table thead th { vertical-align: top; }
.mois-filtre { margin-top: 4px; font-size: 11px; padding: 1px 2px; max-width: 100%; font-weight: 400; }
.tva-na { color: var(--muted); font-size: 12px; }
.tva-att { color: var(--warn, #b26a00); font-size: 12px; font-weight: 500; font-style: italic; }
.tva-toggle { font-size: 12px; color: var(--muted); cursor: pointer; text-decoration: none; white-space: nowrap; }
.tva-toggle:hover { color: var(--accent); text-decoration: underline; }

/* Onglet IS (acomptes 2571 + solde 2572) */
#is-table { width: auto; min-width: 100%; table-layout: auto; }
#is-table th, #is-table td { white-space: nowrap; padding-left: 12px; padding-right: 12px; vertical-align: top; }
#is-table .mois-col { min-width: 118px; }
#is-table .col-resp { min-width: 42px; }
#is-table .col-ns { min-width: 120px; }
#is-table .col-rs, #is-table td.rs { position: sticky; left: 0; z-index: 2; white-space: normal; min-width: 190px; max-width: 230px; }
#is-table th.col-rs { background: var(--taupe-bg); }
#is-table td.rs { background: var(--surface); }
#view-is .table-wrap { width: 100%; }
.is-ok { color: var(--success); font-weight: 500; }
.is-att { color: var(--warn); font-weight: 500; }
.is-ref { color: var(--accent); font-weight: 500; }
.hint-manuel { font-size: 11px; color: var(--muted); }
#cloture-table { width: auto; min-width: 100%; }
#cloture-table th, #cloture-table td { white-space: nowrap; }
#cloture-table .col-rs, #cloture-table td.rs { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 260px; white-space: normal; }
#cloture-table th.col-rs { background: var(--taupe-bg); }
#cloture-table td.rs { background: var(--surface); }
#view-cloture .table-wrap { width: 100%; }
/* Onglets « données » : cartes + tableau à la même largeur (96vw), tout aligné. */
#view-dossiers, #view-tva, #view-is, #view-cloture, #view-greffe, #view-echeancier, #view-urssaf, #view-inpi, #view-habilitations { width: 96vw; max-width: 96vw; margin-left: calc(50% - 48vw); }
/* Matrice Habilitations : 1re colonne (dossier) figée + colonnes de service compactes. */
#habil-table .col-rs, #habil-table td.rs { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 190px; max-width: 240px; white-space: normal; }
#habil-table th.svc, #habil-table td.svc { min-width: 58px; text-align: center; font-size: 12px; }
#habil-table th.svc { vertical-align: bottom; line-height: 1.15; color: var(--pyt-taupe-500); }
.btn-sm { font-size: 12px; padding: 3px 10px; }
.urssaf-lie { font-size: 11.5px; color: var(--muted); }
.urssaf-delier { color: var(--danger); cursor: pointer; text-decoration: none; margin-left: 4px; font-size: 12px; }
.urssaf-lier { border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent); border-radius: 6px; cursor: pointer; }
.ul-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.ul-fld input { width: 100%; }
.pm-row.ul-pick { grid-template-columns: 1fr; cursor: pointer; }
.pm-row.ul-pick:hover { background: var(--accent-bg); }
.ul-pick .pm-rs { white-space: normal; word-break: normal; }
.ap-type { color: var(--accent); font-size: 10px; }
.dir-cell { max-width: 230px; }
.dir-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--taupe-bg); border-radius: 6px; padding: 1px 5px; margin: 1px 2px; font-size: 11px; color: var(--text); }
.dir-move, .dir-unlink { cursor: pointer; text-decoration: none; font-weight: 700; }
.dir-move { color: var(--accent); }
.dir-unlink { color: var(--danger); }
.muted-dash { color: var(--muted); }
#dos-table, #greffe-table { width: 100%; }
#greffe-table .col-rs, #greffe-table td.rs { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 190px; max-width: 260px; white-space: normal; }
#greffe-table th.col-rs { background: var(--taupe-bg); }
.is-grise { color: var(--muted); }
.badge-avance { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #eaf3de; color: #27500a; white-space: nowrap; }
.badge-retard { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--color-danger-bg); color: var(--color-danger); white-space: nowrap; }
.cloture-act { margin-left: 4px; }

/* Onglet Rappels / To-Do */
.todo-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.seg { display: inline-flex; border: 1px solid var(--border, var(--color-border)); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: var(--color-surface); padding: 7px 12px; font-size: 13px; cursor: pointer; color: var(--muted, var(--color-text-muted)); border-left: 1px solid var(--border, #eee); }
.seg-btn:first-child { border-left: 0; }
.seg-btn.active { background: var(--color-accent); color: var(--color-on-accent); }
/* Barres d'onglets autonomes (posées directement au-dessus du contenu) : de l'air en dessous, sinon ça colle aux cartes. */
#inpi-seg, #greffe-sub-seg { margin: 2px 0 18px; }
.todo-form { background: var(--surface-2, var(--color-surface-muted)); border: 1px solid var(--taupe-line, var(--color-border)); border-radius: 12px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
/* Le même formulaire, mais rendu dans la modale de modification : pas de carte dans la carte. */
.todo-form.todo-in-modal { background: transparent; border: 0; padding: 0; margin: 0; max-width: none; }
.modal-card:has(.todo-in-modal) { width: 560px; }
.todo-form.todo-in-modal .search { width: 100%; box-sizing: border-box; }
.todo-form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical; }
.todo-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.todo-form-row label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted, var(--color-text-muted)); gap: 4px; }
.todo-form-row input, .todo-form-row select { padding: 7px 9px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; }
.todo-form-actions { display: flex; gap: 8px; }
.todo-check-lbl { flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px !important; color: var(--text, var(--color-text)) !important; }
.todo-check-lbl input { width: auto; }
.todo-remind-tag { color: var(--accent); }
.todo-list { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.todo-item { display: flex; align-items: flex-start; gap: 10px; background: var(--color-surface); border: 1px solid var(--border, var(--color-border)); border-radius: 10px; padding: 10px 12px; }
.todo-item.done { opacity: 0.6; }
.todo-item.done .todo-title { text-decoration: line-through; }
.todo-check { margin-top: 3px; width: 18px; height: 18px; cursor: pointer; }
.todo-star { border: 0; background: none; font-size: 18px; cursor: pointer; color: #c9a227; line-height: 1; padding: 0 2px; }
.todo-star:not(.on) { color: #c7c5bd; }
.todo-main { flex: 1; min-width: 0; }
.todo-title { font-weight: 500; font-size: 15px; }
.todo-desc { font-size: 13px; color: var(--muted, var(--color-text-muted)); margin-top: 2px; white-space: pre-wrap; }
.todo-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted, var(--color-text-muted)); margin-top: 6px; }
.todo-retard { color: var(--color-danger); font-weight: 500; }
.todo-deleg { color: var(--accent, var(--color-accent)); }
.todo-dossier-tag { color: #6b4d9a; cursor: pointer; }
.todo-dossier-tag:hover { text-decoration: underline; }
.todo-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, var(--pyt-taupe-500)); margin: 18px 0 4px; }
.todo-section-title:first-child { margin-top: 4px; }
.todo-section-count { background: var(--taupe-bg, var(--color-bg)); color: var(--taupe, var(--pyt-taupe-500)); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.todo-sub-empty { font-size: 13px; color: var(--muted, var(--pyt-taupe-500)); margin: 4px 0 0; }
/* Pièces jointes — chips dans la liste */
.todo-atts { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.todo-att { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-bg, var(--color-accent-subtle)); color: var(--accent, var(--color-accent)); border: 1px solid var(--pyt-blue-200); text-decoration: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-att:hover { text-decoration: underline; }
.todo-att.purged { background: var(--taupe-bg, var(--color-bg)); color: var(--muted, var(--pyt-taupe-500)); border-color: var(--taupe-line, var(--color-border)); white-space: normal; max-width: none; cursor: default; }
/* Champ « joindre » dans le formulaire de création */
.todo-file-row { align-items: center; }
.todo-file-lbl { cursor: pointer; }
.todo-file-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.todo-file-chip { font-size: 12px; background: var(--taupe-bg, var(--color-bg)); border: 1px solid var(--taupe-line, var(--color-border)); border-radius: 999px; padding: 3px 9px; }
.todo-file-chip em { color: var(--muted, var(--pyt-taupe-500)); font-style: normal; }
/* Bloc pièces jointes dans la modale de modification */
.todo-att-block { border-top: 1px solid var(--taupe-line, var(--color-border)); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.todo-att-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, var(--pyt-taupe-500)); }
.todo-att-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2, var(--color-surface-muted)); border: 1px solid var(--taupe-line, var(--color-border)); border-radius: 8px; padding: 6px 10px; }
.todo-att-row .todo-att { border: 0; background: none; padding: 0; }
.todo-att-row.purged { background: transparent; }
.todo-att-info { font-size: 12.5px; color: var(--muted, var(--pyt-taupe-500)); flex: 1; }
.todo-att-size { font-size: 11.5px; color: var(--muted, var(--pyt-taupe-500)); margin-left: auto; }
.todo-att-del { border: 0; background: none; color: var(--danger, var(--color-danger)); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.todo-att-empty { font-size: 12.5px; color: var(--muted, var(--pyt-taupe-500)); }
.todo-att-block .todo-file-lbl { align-self: flex-start; }
/* Greffe — sous-section « À facturer » */
.fact-sum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin: 4px 0 12px; align-items: center; }
.fact-sum b { font-variant-numeric: tabular-nums; }
.fact-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.fact-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.fact-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 0 12px 4px; font-weight: 700; }
.fact-table td { background: var(--color-surface); padding: 10px 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: middle; }
.fact-table td:first-child { border-left: 1px solid var(--border); border-radius: 10px 0 0 10px; }
.fact-table td:last-child { border-right: 1px solid var(--border); border-radius: 0 10px 10px 0; }
.fact-rs { font-weight: 600; }
.fact-siren { font-size: 11.5px; color: var(--muted); }
.fact-exo b { font-size: 13.5px; display: block; }
.fact-exo span { font-size: 11.5px; color: var(--muted); }
.fact-amount { font-variant-numeric: tabular-nums; }
.fact-amount.empty { color: var(--muted); }
.fact-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.fact-badge.ok { background: var(--success-bg); color: var(--success); }
.fact-badge.wait { background: var(--warn-bg); color: var(--warn); }
.fact-badge.doc { background: #fbe4c6; color: #9a5b12; }
.fact-row-doc td { background: #fdf1e2; border-color: #f2d1a8; }
.fact-act a { color: var(--accent); cursor: pointer; text-decoration: none; font-size: 12.5px; }
.fact-act a:hover { text-decoration: underline; }
.hs-val.warn-val { color: var(--color-warning); }
/* Toasts de confirmation (coin bas-droit) */
#toast-host { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: var(--z-toast); }
.toast { padding: 10px 15px; border-radius: 9px; color: var(--color-on-accent); font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 18px rgba(0,0,0,.16); opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; max-width: 360px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: var(--success, var(--color-success)); }
.toast-err { background: var(--danger, var(--color-danger)); }
.todo-actions { display: flex; gap: 10px; font-size: 12px; white-space: nowrap; }
.todo-actions a { color: var(--color-accent); cursor: pointer; text-decoration: none; }
.todo-actions a:hover { text-decoration: underline; }
.todo-actions a.todo-del { color: var(--color-danger); }

/* ===== Page d'accueil ===== */
#view-accueil { max-width: 1080px; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 14px; }
.home-head h1 { font-size: 22px; font-weight: 500; color: var(--color-text); margin: 0; }
.home-date { font-size: 13px; color: var(--taupe); text-transform: capitalize; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.home-stat { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--taupe-line); border-left: 4px solid var(--taupe); border-radius: 12px; padding: 16px 18px; transition: box-shadow .15s, transform .1s; }
.home-stat.clickable:hover { box-shadow: 0 3px 12px rgba(140,132,119,.18); transform: translateY(-1px); }
.home-stat .hs-icon { font-size: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--taupe-bg); border-radius: 10px; }
.home-stat .hs-val { font-size: 26px; font-weight: 600; color: var(--color-text); line-height: 1; }
.home-stat .hs-val.danger { color: var(--danger); }
.home-stat .hs-lab { font-size: 13px; color: var(--muted); margin-top: 3px; }
.home-card { background: var(--surface); border: 1px solid var(--taupe-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.home-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.home-card-head h2 { font-size: 17px; font-weight: 500; color: var(--color-text); margin: 0; }
.home-card-head h2 span { color: var(--accent); }
.home-link { font-size: 13px; color: var(--accent); text-decoration: none; cursor: pointer; }
.home-link:hover { text-decoration: underline; }
.home-tva-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.home-pie { flex: 0 0 auto; }
.home-people { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.hp-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hp-name { font-weight: 500; color: var(--color-text); }
.hp-bar { height: 8px; background: var(--taupe-bg); border-radius: 6px; overflow: hidden; }
.hp-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.hp-num { color: var(--muted); white-space: nowrap; }
.hp-num .danger { color: var(--danger); }
.home-empty { color: var(--muted); font-size: 14px; padding: 12px 0; }

.home-head-right { display: flex; align-items: center; gap: 14px; }
.home-scope { display: inline-flex; }
.home-scope-lbl { font-size: 12px; color: var(--muted); }

/* ===== Onglets — un peu plus de vie ===== */
.tabs .tab.active { color: var(--accent); }
.tabs .tab:hover { color: var(--accent); }

/* ===== Panneau de progression des vérifications (flottant à droite) ===== */
#verif-panel { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-drawer); display: flex; flex-direction: column; gap: 8px; width: 240px; }
#verif-panel[hidden] { display: none; }   /* sinon le display:flex ci-dessus écrase l'attribut hidden → bandeau impossible à fermer */
.vp-item { background: var(--surface); border: 1px solid var(--taupe-line); border-left: 4px solid var(--taupe); border-radius: 10px; padding: 9px 12px; box-shadow: 0 4px 14px rgba(60,60,60,.14); }
.vp-item.run { border-left-color: var(--accent); }
.vp-item.fini { border-left-color: var(--color-success); }
.vp-item.err { border-left-color: var(--danger); }
.vp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.vp-head span:first-child { font-weight: 500; color: var(--color-text); }
.vp-status { font-size: 12px; color: var(--muted); }
.vp-item.fini .vp-status { color: var(--color-success); }
.vp-item.err .vp-status { color: var(--danger); }
.vp-bar { height: 6px; background: var(--taupe-bg); border-radius: 4px; overflow: hidden; }
.vp-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.vp-item.fini .vp-fill { background: var(--color-success); }
.vp-header { display: flex; justify-content: flex-start; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--taupe-line); border-radius: 10px; padding: 7px 8px 7px 12px; box-shadow: 0 4px 14px rgba(60,60,60,.14); }
.vp-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-right: auto; }
.vp-toggle, .vp-close { border: 0; background: var(--taupe-bg); color: var(--muted); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.vp-toggle:hover { background: var(--accent-bg); color: var(--accent); }
.vp-close:hover { background: var(--color-danger-bg); color: var(--danger); }
.vp-body { display: flex; flex-direction: column; gap: 8px; }

.dom-cac { color: #7a3ea3; font-weight: 500; }
.row-cac { background: var(--color-surface-muted); }   /* jeton : bascule correctement en mode sombre */
.value.cat-count { font-size: 19px; }
.col-filtre { display: block; margin-top: 5px; font-size: 11px; padding: 2px 4px; border: 1px solid var(--taupe-line); border-radius: 6px; background: var(--surface); color: var(--muted); max-width: 130px; cursor: pointer; }
.col-filtre:hover { border-color: var(--accent); color: var(--accent); }
.hp-row.clickable { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.hp-row.clickable:hover { background: var(--accent-bg); }
.hp-reste { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hp-reste:hover { filter: brightness(0.85); }
.home-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.card .card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.charge-wrap { overflow-x: auto; }
.card-collapse { border: 1px solid var(--taupe-line); background: var(--surface); cursor: pointer; font-size: 14px; color: var(--text); width: 26px; height: 26px; border-radius: 7px; line-height: 1; margin-right: 9px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: background .12s, border-color .12s; }
.card-collapse:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.hab-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hab-select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--taupe-line); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; }
.hab-perso { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.hab-perso[hidden] { display: none; }
.hab-perso input { font-size: 12px; padding: 3px 5px; border: 1px solid var(--taupe-line); border-radius: 6px; background: var(--surface); color: var(--text); }
.greffe-mark { cursor: pointer; border-radius: 4px; padding: 0 4px; }
.greffe-mark:hover { background: var(--accent-bg); outline: 1px solid var(--accent); }
.ech-attente { color: var(--color-warning); }
/* Cases TVA/IS « je l'ai fait » : libellé attendu cliquable + pastille ⏳ cliquable (pour annuler). */
.ech-clic { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.ech-clic:hover { text-decoration: underline; }
.ech-mark { cursor: pointer; white-space: nowrap; font-weight: 600; }
#greffe-tbody select { font-size: 12px; padding: 3px 6px; border: 1px solid var(--taupe-line); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; }
#greffe-tbody select.g-tiers { background: #f6efe2; color: #8a6d1f; border-color: #e3d3a8; }
/* Compteur d'écarts sur le bouton « Vérifier les périodicités » */
.pc-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--color-danger); color: var(--color-on-accent); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
#btn-periodicites.has-ecarts { border-color: var(--color-danger); color: var(--color-danger); }
/* ===== Modal « Vérifier les périodicités » ===== */
.pm-overlay { position: fixed; inset: 0; background: rgba(40,36,30,.45); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pm-box { background: var(--surface); border-radius: 12px; width: min(620px, 96vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.pm-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 6px; font-size: 16px; font-weight: 600; }
.pm-close { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--muted); }
.pm-sub { font-size: 12.5px; color: var(--muted); padding: 4px 22px 8px; margin: 0; }
.pm-list { overflow-y: auto; padding: 4px 22px; }
.pm-selall { padding: 6px 18px 0; font-size: 12px; color: var(--muted); }
.pm-selall label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pm-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--taupe-line); }
.pm-lab { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px 10px; flex: 1; min-width: 0; font-size: 13px; cursor: pointer; }
.pm-ignore { color: var(--muted); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.pm-ignore:hover { color: var(--color-danger); text-decoration: underline; }
.pm-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-rs { font-weight: 600; color: var(--text); }
.pm-resp { font-size: 11px; color: var(--muted); background: var(--taupe-bg); border-radius: 4px; padding: 0 6px; font-weight: 400; }
.pm-just { font-size: 10.5px; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-chg { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pm-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 16px 22px 20px; }
.pm-count { margin-right: auto; font-size: 12px; color: var(--muted); }
/* ===== Échéancier unifié ===== */
.ech-topbar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 10px; }
.ech-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ech-collabs { display: flex; gap: 5px; flex-wrap: wrap; }
.ech-nav { margin-left: auto; font-size: 14px; color: var(--text); }
.ech-navbtn { border: 1px solid var(--taupe-line); background: var(--surface); border-radius: 6px; cursor: pointer; padding: 2px 9px; color: var(--text); }
.ech-navbtn:hover { background: var(--accent-bg); }
.ech-hint { font-size: 12px; color: var(--muted); }
.ech-filtres { margin-bottom: 6px; }
.ech-agenda { display: flex; flex-direction: column; }
.ech-horizon-wrap { text-align: center; margin-top: 16px; }
.ech-horizon { border: 1px solid var(--taupe-line); background: var(--surface); border-radius: 8px; padding: 8px 18px; cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 500; }
.ech-horizon:hover { background: var(--accent-bg); border-color: var(--accent); }
.ech-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 4px; }
.ech-grp.dgr { color: var(--danger); }
.ech-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--taupe-line); }
.ech-item.rap { background: color-mix(in srgb, var(--taupe-bg) 55%, transparent); }
.ech-date { text-align: center; line-height: 1.05; }
.ech-date b { font-size: 16px; display: block; color: var(--text); }
.ech-date span { font-size: 10px; color: var(--muted); }
.ech-client { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ech-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ech-badge { color: var(--color-on-accent); border-radius: 4px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ech-role { border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 600; }
.ech-role.resp { background: #efe6d3; color: #8a6d1f; }
.ech-role.exec { background: var(--color-accent-subtle); color: var(--color-accent-hover); }
.ech-tag { font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; border: 1px solid var(--accent); color: var(--accent); }
.ech-prev { font-size: 10px; color: var(--color-accent-hover); white-space: nowrap; }
.ech-right { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ech-st { font-size: 11.5px; font-weight: 600; }
.ech-st.todo { color: var(--muted); } .ech-st.late { color: var(--danger); } .ech-st.rep { color: var(--color-warning); } .ech-st.done { color: var(--color-success); }
.ech-check { font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.ech-check.on { color: var(--color-success); }
.ech-check.ech-attente { color: var(--color-warning); }
.ech-box { color: var(--muted); }
.ech-check:hover { color: var(--accent); }
.ech-check:hover .ech-box { color: var(--accent); }
.ech-deleg-btn { border: 1px solid var(--taupe-line); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 13px; padding: 1px 7px; color: var(--muted); }
.ech-deleg-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.ech-delegmenu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 2px 0 6px; background: var(--taupe-bg); border: 1px dashed var(--taupe-line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.ech-delegsel { border: 1px solid var(--taupe-line); border-radius: 6px; padding: 3px 7px; background: var(--surface); color: var(--text); font-weight: 600; }
.ech-radio { display: inline-flex; align-items: center; gap: 4px; }
.ech-delegok { padding: 3px 12px; font-size: 12px; }
.ech-delegclear { color: var(--danger); cursor: pointer; text-decoration: underline; font-size: 11.5px; }
.ech-clickable { cursor: pointer; }
.ech-mid.ech-clickable:hover .ech-client { text-decoration: underline; }
.hab-list { display: flex; flex-direction: column; gap: 9px; }
.hab-row { display: grid; grid-template-columns: 116px 1fr 56px; align-items: center; gap: 10px; }
.hab-name { font-size: 13px; color: var(--text); font-weight: 500; }
.hab-stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 10.5px; background: var(--taupe-bg); }
.hab-stack span { display: flex; align-items: center; justify-content: center; color: var(--color-on-accent); font-weight: 600; min-width: 0; }
.hab-moy { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.hab-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.hab-k { display: inline-flex; align-items: center; gap: 5px; }
.hab-kd { width: 11px; height: 11px; border-radius: 3px; }
@media (max-width: 820px) { .hab-row { grid-template-columns: 84px 1fr 48px; } }
.charge-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.charge-table th, .charge-table td { padding: 8px 12px; border-bottom: 1px solid var(--taupe-line); text-align: left; white-space: nowrap; }
.charge-table th { color: var(--pyt-taupe-500); font-weight: 500; background: var(--taupe-bg); }
.charge-table td.center, .charge-table th.center { text-align: center; }
.charge-table td.right, .charge-table th.right { text-align: right; }
.charge-table tr.charge-total td { border-top: 2px solid var(--taupe-line); font-weight: 500; background: var(--surface-2); }

/* ===== Adaptation mobile (téléphone) ===== */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topbar-actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .topbar-actions .btn { font-size: 13px; padding: 7px 10px; }
  .container { padding: 0 10px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 0 10px; }
  .tabs .tab { flex: 0 0 auto; }
  .home-head { flex-wrap: wrap; gap: 8px; }
  .home-head-right { flex-wrap: wrap; }
  .home-cards { grid-template-columns: 1fr; }
  .home-tva-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .home-people { min-width: 0; }
  .home-pie { align-self: center; }
  #verif-panel { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { flex-wrap: wrap; }
  #view-dossiers, #view-tva, #view-is, #view-cloture, #view-greffe, #view-echeancier, #view-urssaf { width: 100%; max-width: 100%; margin-left: 0; }
  .ech-cal { font-size: 9px; }
  .ech-item { grid-template-columns: 38px 1fr auto !important; }
  .todo-form-row { flex-direction: column; }
  .modal-card { max-width: 94vw; }
}
.is-date { font-size: 11px; color: var(--muted); margin-top: 1px; font-weight: 400; }

/* Onglet Dossiers (base maître) */
#dos-table select, #dos-table input.hon { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-family: inherit; }
#dos-table input.hon { width: 104px; text-align: right; }
#dos-table input.ech { width: 56px; text-align: center; }
#dos-table select.p-non { color: var(--muted); }

/* Ligne d'un dossier en offboarding (sortie en cours) : rouge pastel */
#dos-table tr.row-offboarding td { background: var(--color-danger-bg); }   /* jetons : lisibles en mode sombre */
#dos-table tr.row-offboarding:hover td { background: color-mix(in srgb, var(--color-danger-bg) 88%, var(--color-text)); }
.off-tag { font-size: 11px; color: var(--danger); border: 1px solid #e6b8b8; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.hono-cell { white-space: normal; }
/* Liste dossiers : compacter (largeur AUTO conservée pour ne rien couper — les boutons d'action restent).
   On borne juste les colonnes larges (raison sociale, dirigeants) et on réduit padding/police. */
#dos-table th, #dos-table td { padding: 7px 8px; font-size: 12.5px; }
#dos-table thead th { font-size: 11.5px; }
#dos-table td.rs { max-width: 200px; white-space: normal; word-break: break-word; line-height: 1.2; }
#dos-table td.dir-cell { max-width: 160px; white-space: normal; }
#dos-table td.siren { white-space: nowrap; font-size: 12px; }
#dos-table select, #dos-table input.hon { padding: 4px 6px; font-size: 12px; }
#dos-table input.hon { width: 78px; }
#dos-table input.ech { width: 46px; }
#dos-table .col-filtre { max-width: 108px; font-size: 10.5px; }
#dos-table .row-actions { white-space: nowrap; }
#dos-table .dir-chip { font-size: 10px; padding: 1px 4px; margin: 1px; }
.hono-pill { margin-left: 4px; font-size: 12px; cursor: help; }
/* Table des dossiers archivés */
#arch-table { width: 100%; border-collapse: collapse; }
#arch-table th, #arch-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
#arch-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; text-align: left; }
#arch-table td.center, #arch-table th.center { text-align: center; }
#arch-table td.rs { font-weight: 600; }
#arch-table .abo-siren { font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Sous-onglet Dossiers › Abonnement */
#abo-table { width: 100%; border-collapse: collapse; }
#abo-table th, #abo-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
#abo-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
#abo-table td.center, #abo-table th.center { text-align: center; }
#abo-table td.rs { font-weight: 600; }
#abo-table .abo-siren { font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.abo-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.abo-card { flex: 1 1 150px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--surface); }
.abo-card-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abo-card-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
.abo-card.clickable { cursor: pointer; transition: border-color .12s, background .12s; }
.abo-card.clickable:hover { border-color: var(--accent); }
.abo-card.clickable.active { border-color: var(--accent); background: var(--accent-bg); }
.abo-card-val.danger { color: var(--danger); }
.endreq-panel { border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-bg); padding: 12px 14px; margin: 0 0 14px; }
.endreq-head { font-weight: 600; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.endreq-count { background: var(--accent); color: var(--color-on-accent); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.endreq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid rgba(31,95,169,.15); }
.endreq-info { font-size: 13.5px; }
.endreq-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.abo-card-lbl small { color: var(--muted); }
#abo-table th:first-child, #abo-table td:first-child { width: 34px; text-align: center; }
/* (lot 2c) les cases à cocher de l’abonnement sont désormais celles du composant de liste */
#abo-table td.abo-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
#abo-table .abo-per { color: var(--muted); font-size: 11px; margin-left: 3px; }
#abo-table .abo-lines-cell { font-size: 12px; }
#abo-table .abo-linechip { padding: 1px 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
#abo-table th.sortable { cursor: pointer; user-select: none; }
#abo-table tfoot .abo-foot td { border-top: 2px solid var(--border); border-bottom: none; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--taupe-bg); }
.abo-badge { font-size: 12px; white-space: nowrap; }
.abo-badge.on { color: var(--success, var(--color-success)); }
.abo-badge.off { color: var(--muted); }
.abo-gear { cursor: pointer; white-space: nowrap; }
/* Fenêtre de paramétrage d'abonnement */
.abo-note { font-size: 13px; margin-bottom: 12px; color: var(--text-2); }
.abo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.abo-grid .field { margin: 0; }
.abo-grid .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.abo-grid .field small { color: var(--muted); font-weight: 400; }
.abo-grid .field input, .abo-grid .field select { width: 100%; padding: 7px 9px; font-size: 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-family: inherit; }
.abo-grid .abo-grid-wide { grid-column: 1 / -1; }
.abo-lines-head { font-weight: 600; font-size: 13px; margin: 6px 0 8px; }
.abo-lines-head small { font-weight: 400; color: var(--muted); }
.abo-line { display: grid; grid-template-columns: 1fr 110px 70px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.abo-line select, .abo-line input { padding: 7px 9px; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-family: inherit; }
.abo-line .abo-l-price, .abo-line .abo-l-qty { text-align: right; }
.abo-modal-res { margin: 10px 0 2px; min-height: 18px; font-size: 13px; }
#abo-push-res { margin: 8px 0; }
#abo-push-res .abo-res { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
#abo-push-res .uact-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
#abo-push-res .uact-table th, #abo-push-res .uact-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.err-line { color: var(--danger); }

#dos-table select.is-non { color: var(--danger); }
.dos-resp-chip { display: inline-block; font-size: 12px; padding: 2px 9px; margin: 0 4px 4px 0; border: 1px solid var(--taupe-line); border-radius: 20px; color: var(--text-2); background: var(--taupe-bg); }
.dos-resp-chip strong { color: var(--text); font-weight: 500; }

/* ===== Onglet INPI (scopé, sans collision avec le reste) ===== */
/* INPI « à compléter / en attente » : l'orange vif #d98a2b était hors charte et
   échouait au contraste (2,76:1 en texte et sur fond blanc). Remappé vers le brun
   d'avertissement de la charte — conforme, et plus sobre pour les filets. (audit charte, lot 3) */
:root { --iorange: var(--color-warning); --iorange-bg: var(--color-warning-bg); }
.inpi-cnt { display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:var(--iorange); color: var(--color-on-accent); font-size:11px; font-weight:700; }
#inpi-seg .seg-btn.active .inpi-cnt { background:rgba(255,255,255,.28); }
.istat { background: var(--color-surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; border-left:4px solid var(--accent); transition:box-shadow .12s, transform .12s; text-align:left; }
.istat:hover { box-shadow:0 3px 12px rgba(0,0,0,.07); transform:translateY(-1px); }
.istat.sel { box-shadow:0 0 0 2px var(--accent); }
.istat.acomp { border-left-color:var(--iorange); }
.istat.acomp.sel { box-shadow:0 0 0 2px var(--iorange); }
.istat .v { font-size:24px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.istat.acomp .v { color:var(--iorange); }
.istat .l { font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.2; }
.istat .sub { font-style:italic; font-size:10.5px; color:var(--muted); }
.ipanel { border:1px solid var(--border); border-radius:12px; background: var(--color-surface); margin-bottom:14px; overflow:hidden; }
.ipanel-head { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--taupe-bg); border:0; border-bottom:1px solid var(--border); padding:12px 15px; cursor:pointer; font-size:15px; font-weight:600; color:var(--text); }
.ipanel-head .chev { color:var(--muted); font-size:12px; transition:transform .15s; }
.ipanel-head.collapsed { border-bottom:0; }
.ipanel-head.collapsed .chev { transform:rotate(-90deg); }
.pc { background:var(--accent); color: var(--color-on-accent); border-radius:20px; padding:1px 10px; font-size:12.5px; font-weight:700; }
.pc.zero { background:var(--muted); }
.ipanel-body { padding:14px; }
.ipanel-body.hidden { display:none; }
/* Suivi INPI : cartes en grille multi-colonnes (plus étroites, on en voit plus par page). */
#inpi-suivi-panels .ipanel-body:not(.hidden) { display:grid; grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); gap:12px; align-items:start; }
#inpi-suivi-panels .ipanel-body .icard { margin-bottom:0; }
#inpi-suivi-panels .ipanel-body .empty-line { grid-column:1 / -1; }
.icard { background: var(--color-surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:13px 15px; margin-bottom:11px; }
.icard:last-child { margin-bottom:0; }
.icard.noresp, .icard.tocomplete { border-left-color:var(--iorange); background:var(--iorange-bg); }
.icard.rej { border-left-color:var(--danger); }
.ic-top { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.ic-name { font-size:15px; font-weight:600; color:var(--accent); margin:0; }
.ic-type { font-style:italic; color:var(--color-text-muted); font-size:12.5px; margin:2px 0 0; }
.ic-right { text-align:right; font-size:12.5px; color:var(--color-text-muted); line-height:1.55; white-space:nowrap; }
.ic-right .amt { font-weight:600; color:var(--text); }
.ic-meta { display:flex; gap:13px; flex-wrap:wrap; align-items:center; margin-top:9px; font-size:12.5px; color:var(--color-text-muted); }
.noresp-tag { color:var(--iorange); font-weight:600; font-size:12px; }
.rej-pdf { color:var(--danger); cursor:pointer; text-decoration:underline; font-size:12px; font-weight:600; }
/* Bouton « 📄 Documents » (neutre) + modale de listing des PDF INPI */
.rej-pdf[data-inpidocs] { color: var(--accent); }
.inpi-docs-load { display: flex; align-items: center; gap: 16px; padding: 22px 6px; min-height: 72px; }
.mc-spinner { width: 30px; height: 30px; border: 3px solid var(--taupe-line); border-top-color: var(--accent); border-radius: 50%; animation: mc-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.inpi-docs { margin-top: 4px; }
.modal-card:has(.inpi-docs), .modal-card:has(.inpi-docs-load) { width: 580px; }
.inpi-doc-row { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--border); }
.inpi-doc-row:last-child { border-bottom: 0; }
.inpi-doc-row:hover { background: var(--surface-2); }
.inpi-doc-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.inpi-doc-nom { font-size: 13px; font-weight: 500; word-break: break-all; }
.inpi-doc-type { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.inpi-doc-size { font-size: 11px; color: var(--muted); }
.rej-mark { color:var(--muted); cursor:pointer; text-decoration:underline; font-size:12px; }
.badge-nl { background:var(--danger); color: var(--color-on-accent); border-radius:20px; padding:1px 8px; font-size:10.5px; font-weight:700; }
.ipill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.ipill.val { background:#e7f1ee; color:var(--success); }
.ipill.wait { background:var(--accent-bg); color:var(--accent); }
.ipill.sign { background:#efeafb; color:#5b3fb0; }
.ipill.pay { background:#fdeee6; color:#b5651d; }
.ipill.reg { background:#fbe9e9; color:var(--danger); }
.ipill.rej { background:#f6dede; color:var(--danger); }
.ipill.doc { background:var(--iorange-bg); color:var(--iorange); border:1px solid var(--color-warning-border); }
.ipill.enatt { background:var(--color-bg); color:var(--pyt-taupe-500); }
.iedit { margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.ifld label { font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); display:block; margin-bottom:4px; font-weight:600; }
.itypes-btn { border:1px solid var(--border); background: var(--color-surface); border-radius:7px; padding:6px 9px; font-size:12.5px; cursor:pointer; min-width:190px; text-align:left; color:var(--text); }
.itypes-btn.empty { color:var(--muted); }
.inum { width:96px; padding:6px 8px; border:1px solid var(--border); border-radius:7px; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }
.inet { font-size:15px; font-weight:700; color:var(--success); font-variant-numeric:tabular-nums; }
.inet .lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); font-weight:600; display:block; margin-bottom:2px; }
.itypes-pop { position:absolute; z-index: var(--z-dropdown); background: var(--color-surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.16); padding:8px; min-width:290px; max-height:300px; overflow:auto; }
.itypes-pop label { display:flex; align-items:center; gap:9px; padding:7px; border-radius:7px; font-size:13px; cursor:pointer; }
.itypes-pop label:hover { background:var(--taupe-bg); }
.itypes-pop input { width:16px; height:16px; }
.itypes-pop .tp { margin-left:auto; color:var(--muted); font-size:12px; }
.itype-special { border-bottom:1px solid var(--border); margin-bottom:4px; padding-bottom:4px; }
/* Types = articles Pennylane JURIDIQUE-xx : filtre + code article + prix */
.itypes-pop { width:450px; max-height:440px; }
.itype-filter { width:100%; box-sizing:border-box; padding:7px 9px; margin:4px 0 6px; border:1px solid var(--border); border-radius:7px; font:inherit; font-size:13px; }
.itypes-pop .icode { flex:0 0 96px; font-size:11.5px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.itypes-pop label[hidden] { display:none; }
.itarif-art td.code { font-weight:600; color:var(--accent); white-space:nowrap; font-variant-numeric:tabular-nums; }
.itype-special input[type=radio] { width:15px; height:15px; }
.ifact-sum { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; margin:0 0 12px; align-items:center; }
.fdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
/* Filtres de statut cliquables (À facturer) */
.ffilter { display:inline-flex; align-items:center; cursor:pointer; padding:5px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:var(--text-2); font-size:12.5px; }
.ffilter:hover { background: var(--surface-2); }
.ffilter.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.ffilter b { margin-right: 5px; color: var(--text); font-weight: 700; }
.ffilter.on b { color: var(--accent); }
.ffilter .fdot { margin-right: 6px; }
.ffilter.clear { color: var(--muted); border-style: dashed; }
.gear { cursor: pointer; text-decoration: none; font-size: 15px; opacity: .5; }
.gear:hover, .gear.on { opacity: 1; }
.factu-export { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--taupe-line); border-radius: 10px; font-size: 13px; }
.factu-export .fx-lbl { color: var(--text-2); font-weight: 500; }
/* Pennylane (facturation) : séparateur dans la barre + modales export/mapping */
.factu-export .fx-sep { flex: 1 1 auto; }
/* Modales Pennylane : sobres et aérées — pas de bandeaux ni de cadres autour du texte/boutons. */
.modal-card:has(.penny-modal) { width: 600px; }
.penny-sum { color: var(--text-2); font-size: 13.5px; margin: 2px 0 18px; }
.penny-opt { margin: 18px 0; }
.penny-opt .penny-lbl { font-weight: 600; margin-bottom: 7px; }
.radiol { display: block; padding: 5px 0; cursor: pointer; }
.radiol input { margin-right: 9px; }
.penny-check { display: flex; align-items: center; gap: 9px; margin: 20px 0 2px; font-size: 13.5px; cursor: pointer; }
.penny-check input { margin: 0; flex: 0 0 auto; }
.penny-token { margin-bottom: 20px; }
.penny-modal > .hint:first-child { margin: 0 0 14px; }
.penny-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--taupe-line); margin: 22px -22px -22px; padding: 15px 22px; }
.penny-note { margin-top: 16px; font-size: 13px; color: var(--text-2); border-left: 3px solid var(--iorange); padding-left: 12px; }
.penny-note.ok { border-left-color: var(--success); }
.penny-note ul { margin: 6px 0 0; padding-left: 16px; }
.penny-note li { margin: 3px 0; }
tr.tocomplete { background:var(--iorange-bg); }
.inpi-lock { display:inline-flex; align-items:center; gap:6px; background:var(--accent-bg); color:var(--accent); border-radius:7px; padding:6px 11px; font-size:12.5px; margin-bottom:14px; }
.itarif-h { font-size:15px; margin:0 0 2px; color:var(--text); }
.empty-line { color:var(--muted); font-size:13px; padding:4px 2px; }

/* Journal des vérifications (Accueil) */
.veriflog { width:100%; border-collapse:collapse; font-size:13.5px; }
.veriflog td { padding:5px 10px; border-bottom:1px solid var(--border); }
.veriflog tr:last-child td { border-bottom:0; }
.vl-when { color:var(--muted); white-space:nowrap; width:1%; }
.vl-what { font-weight:600; color:var(--text); }
.vl-who { text-align:right; }
.vl-who .tag { background:var(--accent-bg); color:var(--accent); border-radius:6px; padding:1px 7px; font-size:12px; }

/* Communications (Outlook / WhatsApp Business) */
.comm-privacy { background:var(--accent-bg); color:var(--text); border-radius:10px; padding:12px 16px; margin-bottom:18px; font-size:14px; }
.comm-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.comm-card { border:1px solid var(--border); border-radius:12px; padding:18px; }
.comm-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comm-head h2 { margin:0; font-size:17px; flex:1; }
.comm-icon { font-size:22px; }
.comm-badge { font-size:12px; border-radius:20px; padding:2px 10px; }
.comm-badge.on { background:var(--color-success-bg); color:var(--color-success); }
.comm-badge.off { background:var(--border); color:var(--muted); }
.comm-desc { color:var(--muted); font-size:13.5px; margin:0 0 14px; }
.comm-sub { font-size:14px; margin:0 0 10px; }
.comm-warn { color:var(--color-warning); background:var(--color-warning-bg); border-radius:8px; padding:8px 10px; font-size:13px; margin:0; }
.comm-connect { display:flex; gap:8px; flex-wrap:wrap; }
.comm-admin { margin-top:26px; border-top:1px solid var(--border); padding-top:18px; }
.comm-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:12px; }
.comm-form { border:1px solid var(--border); border-radius:10px; padding:14px; }
.comm-form h3 { margin:0 0 10px; font-size:15px; display:flex; align-items:center; gap:8px; }
.comm-form label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.comm-form input { display:block; width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--border); border-radius:7px; font-size:13px; box-sizing:border-box; }
.comm-test { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
.comm-test-lbl { font-size:12.5px; color:var(--muted); margin-bottom:6px; }

/* ===== Navigation — sobre, mono bleu Pythéas (mise en couleur au survol) ===== */
/* Onglets simples : texte neutre, survol + actif en bleu Pythéas (comme le site) */
.tabs > .tab { padding: 10px 14px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px; }
.tabs > .tab.active { color: var(--accent); background: transparent; border-bottom-color: var(--accent); }
.tabs > .tab:hover, .tabs > .tab.active:hover { color: var(--color-on-accent); background: var(--accent); border-bottom-color: transparent; }
/* Entêtes de menu : même logique sobre */
.navmenu { position: relative; display: inline-flex; align-items: center; }
.navmenu-head { padding: 10px 14px; border: 0; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 8px; }
.navmenu.active .navmenu-head { color: var(--accent); border-bottom-color: var(--accent); }
.navmenu:hover .navmenu-head, .navmenu:focus-within .navmenu-head { color: var(--color-on-accent); background: var(--accent); border-bottom-color: transparent; }
/* Panneau déroulant : blanc, sobre ; items en bleu au survol */
.navmenu-drop { position: absolute; top: 100%; left: 0; min-width: 210px; display: none; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); z-index: var(--z-dropdown); }
.navmenu:hover .navmenu-drop, .navmenu:focus-within .navmenu-drop { display: flex; }
.navmenu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.navmenu-drop .subtab { text-align: left; color: var(--text); background: transparent; border: 0; border-bottom: 0; border-radius: 7px; margin: 0; padding: 9px 12px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.navmenu-drop .subtab.active { color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.navmenu-drop .subtab:hover, .navmenu-drop .subtab.active:hover { color: var(--color-on-accent); background: var(--accent); }

/* Suivi Pennylane (sous-onglet Dossiers) */
.suivi-bank { display:inline-block; font-size:12.5px; border-radius:6px; padding:2px 7px; margin:1px 2px; background:var(--taupe-bg); border:1px solid var(--taupe-line); }
.suivi-bank.ok { background:var(--success-bg); border-color:#bfe3d4; color:var(--success); }
.suivi-bank.bad { background:var(--danger-bg); border-color:#f0c3c3; color:var(--danger); font-weight:600; }
.suivi-row-alert td { background:rgba(163,45,45,.045); }
.suivi-num { color:var(--warn); font-weight:600; }
#suivi-table td { vertical-align:middle; }

/* Onboarding / Offboarding */
.onb-card { border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--surface); }
.onb-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.onb-head b { font-size:15px; }
.onb-head .siren { color:var(--muted); font-size:12.5px; }
.onb-prog { font-size:12.5px; background:var(--accent-bg); color:var(--accent); border-radius:20px; padding:2px 10px; font-weight:600; }
.onb-prog.full { background:var(--success-bg); color:var(--success); }
.onb-actions { margin-left:auto; }
.onb-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px 18px; margin:12px 0; }
.onb-step { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.onb-note { width:100%; min-height:52px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13.5px; box-sizing:border-box; font-family:inherit; }
.onb-filter { -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:8px 32px 8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--text); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23005DAB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
.onb-filter:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 2px var(--color-accent); }
.onb-list { display:flex; flex-direction:column; gap:8px; }
.onb-item { border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.onb-item.open { border-color:var(--accent); box-shadow:0 2px 10px rgba(31,95,169,.08); }
.onb-row { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.onb-row:hover { background:var(--accent-bg); }
.onb-caret { color:var(--accent); font-size:12px; width:14px; flex:0 0 auto; }
.onb-name { font-size:15px; }
.onb-row .siren { color:var(--muted); font-size:12.5px; }
.onb-row .onb-prog { margin-left:auto; }
.onb-panel { padding:2px 16px 16px 30px; border-top:1px solid var(--border); }
.onb-panel-actions { margin-top:10px; }
/* Onboarding : date d'entrée (classement + ancienneté J+n) et responsable */
.onb-row { flex-wrap:wrap; }
.onb-resp { font-size:11.5px; font-weight:600; color:var(--taupe); background:var(--taupe-bg); border-radius:5px; padding:1px 7px; }
.onb-row .onb-entree { margin-left:auto; font-size:12.5px; color:var(--accent); background:var(--accent-bg); border-radius:20px; padding:2px 10px; white-space:nowrap; }
.onb-row .onb-entree + .onb-prog { margin-left:0; }
.onb-entree.warn { color:var(--warn); background:var(--warn-bg); }
.onb-entree.late { color:var(--danger); background:var(--danger-bg); }
.onb-entree.missing { color:var(--danger); background:var(--danger-bg); font-weight:600; }
.onb-item.no-date { border-left:4px solid var(--danger); }
.onb-entree-edit { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 4px; font-size:13.5px; font-weight:600; color:var(--text); }
.onb-entree-edit input { padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; }
.onb-recap-l { padding:7px 0; border-bottom:1px solid var(--line-2, var(--pyt-line-200)); font-size:14px; }
.onb-recap-l:last-child { border-bottom:0; }
.onb-fold { display:flex; gap:6px; flex:0 0 auto; }
@media (max-width: 820px) { .onb-fold .btn { flex:1; text-align:center; } }   /* mobile : barre d'outils en colonne → 2 boutons côte à côte, pleine largeur */

/* ===== Bourséas — jeu boursier ===== */
.tab.tab-bourseas { color:var(--accent); font-weight:600; }
.tab.tab-bourseas.active, .tab.tab-bourseas:hover { color: var(--color-on-accent); background:var(--accent); }
.bs-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.bs-title { font-size:24px; margin:0; }
.bs-sub { color:var(--muted); font-size:13px; margin:4px 0 0; }
.bs-seg { flex-wrap:wrap; }
.bs-up { color:var(--color-success); }
.bs-down { color:var(--color-danger); }
.bs-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.bs-kpis-sm { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.bs-kpi { border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--surface); }
.bs-kpi-l { font-size:12.5px; color:var(--text-2); margin-bottom:6px; }
.bs-kpi-v { font-size:22px; font-weight:700; display:flex; align-items:baseline; gap:8px; }
.bs-kpi-sub { font-size:13px; font-weight:600; }
.bs-cta { margin:8px 0 14px; display:flex; gap:8px; }
.bs-table { width:100%; border-collapse:collapse; }
.bs-table th, .bs-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:14px; text-align:left; }
.bs-table th.right, .bs-table td.right { text-align:right; }
.bs-table th { font-size:12px; color:var(--text-2); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.bs-table tbody tr:hover { background:var(--accent-bg); }
.bs-table-sm th, .bs-table-sm td { padding:7px 10px; font-size:13px; }
.bs-a b { display:block; }
.bs-tick { color:var(--muted); font-size:12px; }
.bs-sub2 { display:block; font-size:12px; }
.bs-empty { text-align:center; color:var(--muted); padding:22px; }
.bs-me { background:rgba(31,95,169,.08); }
.bs-me td { font-weight:600; }
.bs-rank { font-size:16px; }
.bs-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.bs-badge.buy { background:var(--accent-bg); color:var(--accent); }
.bs-badge.sell { background:#fdeceb; color:var(--color-danger); }
/* Passage d'ordre */
.bs-order-grid { display:grid; grid-template-columns:minmax(240px,1fr) minmax(300px,1.4fr); gap:18px; }
.bs-lbl { display:block; font-size:12.5px; color:var(--text-2); margin:10px 0 6px; }
.bs-input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; box-sizing:border-box; background:var(--surface); color:var(--text); }
.bs-input:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 2px var(--color-accent); }
select.bs-input { -webkit-appearance:none; appearance:none; padding-right:32px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23005DAB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
.bs-inline { display:flex; gap:8px; align-items:flex-end; }
.bs-inline > div { flex:1; }
.bs-results { margin-top:8px; display:flex; flex-direction:column; gap:4px; max-height:420px; overflow:auto; }
.bs-searching { color:var(--muted); font-size:13px; padding:8px 4px; }
.bs-res { text-align:left; border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:8px 11px; cursor:pointer; }
.bs-res:hover { border-color:var(--accent); background:var(--accent-bg); }
.bs-res b { display:block; font-size:13.5px; }
.bs-res span { color:var(--muted); font-size:12px; }
.bs-asset-col { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface); min-height:120px; }
.bs-fiche-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.bs-fiche-head b { font-size:16px; }
.bs-fiche-cours { text-align:right; }
.bs-cours { font-size:20px; font-weight:700; }
.bs-spark { width:100%; height:48px; margin:12px 0; display:block; }
.bs-fiche-meta { font-size:13px; color:var(--text-2); margin-bottom:8px; }
.bs-held { font-size:13px; background:var(--accent-bg); color:var(--accent); border-radius:8px; padding:8px 11px; margin-bottom:10px; }
.bs-sideseg { margin:6px 0 12px; }
.bs-preview { border:1px dashed var(--border); border-radius:8px; padding:10px 12px; margin:12px 0; min-height:20px; }
.bs-preview-err { border-style:solid; border-color:#e0a3a0; color:var(--color-danger); font-size:13px; }
.bs-prev-row { display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; }
.bs-prev-total { border-top:1px solid var(--border); margin-top:5px; padding-top:7px; font-size:15px; }
.bs-valider { width:100%; }
.bs-valider:disabled { opacity:.5; cursor:not-allowed; }
/* Admin */
.bs-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:16px; }
.bs-card { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface); }
.bs-card h3 { margin:0 0 12px; font-size:15px; }
.bs-card h4.bs-h4 { margin:16px 0 6px; font-size:13px; color:var(--text-2); }
.bs-card .btn { margin-top:12px; }
.bs-danger { background:var(--danger); color: var(--color-on-accent); border-color:var(--danger); }
.bs-disclaimer { margin-top:24px; padding-top:14px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); font-style:italic; }
@media (max-width:720px){ .bs-order-grid { grid-template-columns:1fr; } }

/* ===== Taxe fonciere ===== */
.tf-table { width:100%; border-collapse:collapse; table-layout:fixed; }
/* Largeurs de colonnes : Dossier réduit (les noms longs passent sur 2 lignes), Montant/Date en une ligne. */
.tf-table col.tf-c-dos { width:19%; }
.tf-table col.tf-c-an { width:7%; }
.tf-table col.tf-c-com { width:16%; }
.tf-table col.tf-c-mnt { width:11%; }
.tf-table col.tf-c-dl { width:11%; }
.tf-table col.tf-c-pay { width:23%; }
.tf-table col.tf-c-avis { width:13%; }
.tf-table th, .tf-table td { padding:9px 12px; border-bottom:1px solid var(--border); font-size:14px; text-align:left; vertical-align:top; }
.tf-table td.rs { word-break:break-word; }
.tf-table td.right { white-space:nowrap; }
.tf-table th.right, .tf-table td.right { text-align:right; }
.tf-table th.center, .tf-table td.center { text-align:center; }
.tf-table th { font-size:12px; color:var(--text-2); text-transform:uppercase; letter-spacing:.02em; }
.tf-table td.rs b { display:block; }
.tf-table .siren-sub { color:var(--muted); font-size:12px; }
.tf-row-due { background:#fdeceb; }
.tf-apayer { color:var(--color-danger); font-weight:600; }
.tf-preleve { color:var(--color-success); font-weight:500; }
.tf-paid { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); margin-left:8px; }
.tf-adh { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); margin-top:6px; cursor:pointer; }
.tf-pdf { color:var(--accent); text-decoration:none; font-size:13px; }
.tf-pdf:hover { text-decoration:underline; }
.tf-send { font-weight:600; display:inline-block; margin-top:3px; }

/* ===== Fiches sociétés & dirigeants ===== */
.fs .fs-head { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.fs-ava { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color: var(--color-on-accent); font-weight:700; font-size:15px; flex:0 0 auto; }
.fs-ava.sm { width:30px; height:30px; font-size:12px; }
.fs-title { font-size:20px; margin:0; }
.fs-meta { color:var(--muted); font-size:13px; margin-top:3px; }
.fs-cols { display:grid; gap:16px; }
@media (min-width:840px){ .fs-cols { grid-template-columns:1.5fr 1fr; align-items:start; } }
.fs-colmain, .fs-colside { display:grid; gap:14px; align-content:start; }
.fs-card { border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface); }
.fs-sec { font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.fs-sec small { font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.fs-sec .count { margin-left:auto; color:var(--muted); font-size:12px; font-weight:600; }
.fs-people { display:flex; flex-direction:column; gap:8px; }
.fs-person { display:flex; gap:11px; align-items:center; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.fs-person:hover { border-color:var(--accent); background:var(--accent-bg,var(--color-accent-subtle)); }
.fs-person-wrap { display:flex; gap:6px; align-items:stretch; }
.fs-person-wrap .fs-person { flex:1; min-width:0; }
.fs-detach { flex:0 0 auto; width:40px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--danger); cursor:pointer; font-size:15px; font-weight:700; line-height:1; }
.fs-detach:hover { border-color:var(--danger); background:var(--danger-bg); }
/* Colonne LM (liste dossiers) + encart « chargement manuel » des documents signés (fiche) */
.lm-ok { color:var(--success,var(--color-success)); font-weight:700; }
.lm-no { color:var(--danger,var(--color-danger)); font-weight:700; }
.fs-signed { margin-top:10px; border-top:1px dashed var(--border); padding-top:12px; }
.fs-signed-note { font-size:12px; color:var(--muted); margin:0 0 10px; }
.srow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2,#eef1f6); }
.srow:last-child { border-bottom:0; }
.srow .s-main { flex:1; min-width:0; }
.srow .s-lbl { font-weight:600; font-size:13.5px; }
.srow .s-opt { color:var(--muted); font-weight:400; font-size:12px; }
.srow .s-state { font-size:12px; margin-top:2px; }
.srow .s-state.no { color:var(--muted); }
.srow .s-state.yes { color:var(--success,var(--color-success)); font-weight:600; }
.srow .s-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.srow .mini { border:1px solid var(--border); background:var(--surface); border-radius:7px; font-family:inherit; font-size:12px; padding:6px 9px; cursor:pointer; color:var(--text); white-space:nowrap; }
.srow .mini.up { border-color:var(--accent); color:var(--accent); font-weight:600; }
.srow .mini.up:hover { background:var(--accent-bg); }
.srow .mini.del { color:var(--danger); border-color:transparent; }
.srow .mini.view { color:var(--accent); border-color:transparent; text-decoration:none; display:inline-block; }
.fs-pnm { font-weight:700; }
.fs-prole { color:var(--muted); font-size:12.5px; }
.fs-arrow { margin-left:auto; color:var(--muted); font-weight:700; }
.fs-mini { display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.mini { font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px; background:var(--ok-bg,var(--color-success-bg)); color:var(--ok,var(--color-success)); }
.mini.u { background:var(--accent-bg,var(--color-accent-subtle)); color:var(--accent); }
.fs-addp { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.fs-addp input { flex:1; min-width:70px; padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-family:inherit; font-size:13px; }
.pick-wrap { display:flex; gap:6px; flex-basis:100%; }
.pick-wrap input:first-child { flex:1; }
.pick-list { display:flex; flex-direction:column; gap:5px; flex-basis:100%; margin-top:7px; max-height:230px; overflow-y:auto; }
.pick-item { display:flex; align-items:baseline; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); width:100%; text-align:left; cursor:pointer; font-family:inherit; font-size:13px; }
.pick-item:hover { border-color:var(--accent); background:var(--accent-bg,var(--color-accent-subtle)); }
.pick-item.cur { border-color:var(--accent); background:var(--accent-bg,var(--color-accent-subtle)); }
.pick-nm { font-weight:600; }
.pick-sub { color:var(--muted); font-size:11.5px; margin-left:auto; }
.fs-note { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.fs-note:last-child { border-bottom:none; }
.fs-who { width:26px; height:26px; border-radius:50%; color: var(--color-on-accent); display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:0 0 auto; }
.fs-stamp { font-size:11.5px; color:var(--muted); margin-top:2px; }
.fs-stat { margin-left:auto; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--surface-2,var(--color-surface-muted)); color:var(--muted); }
.fs-stat.on { color:var(--ok,var(--color-success)); background:var(--ok-bg,var(--color-success-bg)); }
.fs-stat.wait { color:var(--warn,#b7791f); background:var(--warn-bg,#fbf1dd); }
.fs-stat.off { color:var(--muted); }
.fs-files { display:flex; flex-direction:column; gap:5px; margin:4px 0 4px; }
.fs-file { display:block; color:var(--accent); text-decoration:none; font-size:13.5px; padding:5px 9px; border:1px solid var(--border); border-radius:7px; }
.fs-file:hover { background:var(--accent-bg,var(--color-accent-subtle)); }
.fs-contact-row { display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; align-items:center; }
.fs-contact-row select, .fs-contact-row input { padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-family:inherit; font-size:13px; }
.fs-contact-row .fsc-type { flex:0 0 auto; }
.fs-contact-row .fsc-nom, .fs-contact-row .fsc-sous { flex:1; min-width:120px; }
.fs-contact-row .fsc-mail { flex:1; min-width:130px; }
.fs-contact-row .fsc-tel { width:110px; }
.ok-line { color:var(--ok,var(--color-success)); font-size:13px; font-weight:600; display:inline-block; margin:8px 0; }
.note-add { display:flex; gap:8px; margin-bottom:10px; }
.note-add input { flex:1; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; }
.abo-lignes { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.abo-btn { width:100%; }
/* contrats (fiche dirigeant) */
.contrats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.contrat { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface); text-align:left; cursor:pointer; font-family:inherit; }
.contrat .dot { width:9px; height:9px; border-radius:50%; background:var(--border); flex:0 0 auto; }
.contrat.on { border-color:var(--ok,var(--color-success)); background:var(--ok-bg,var(--color-success-bg)); }
.contrat.on .dot { background:var(--ok,var(--color-success)); }
.contrat .t { font-weight:600; font-size:13.5px; }
.contrat .s { font-size:11px; color:var(--muted); }
.contrat.on .s { color:var(--ok,var(--color-success)); }
@media (max-width:560px){ .contrats { grid-template-columns:1fr; } }

#dos-tbody tr.dos-row-click { cursor: pointer; }
/* fiche : bascule lecture / édition */
.fs .fs-edit-actions { display:inline-flex; gap:8px; }
.fs:not(.editing) .fs-rw { display:none; }
.fs:not(.editing) .fs-edit-actions { display:none; }
.fs.editing .fs-ro { display:none; }
.fs.editing .fs-modif { display:none; }
.fs-kv { display:grid; grid-template-columns:minmax(130px,auto) 1fr; gap:7px 16px; margin:0; }
.fs-kv dt { color:var(--muted); font-size:12.5px; }
.fs-kv dd { margin:0; color:var(--text); font-size:14px; }
.fs-contact { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line-2,var(--pyt-line-200)); }
.fs-contact:last-child { border-bottom:none; }
.fs-ctype { font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--taupe,var(--pyt-taupe-500)); background:var(--surface-2,var(--color-surface-muted)); padding:2px 7px; border-radius:5px; flex:0 0 auto; margin-top:2px; }
.fs-cnm { font-weight:600; font-size:14px; }
.fs-ci { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; background:var(--surface-2,var(--color-surface-muted)); border:1px solid var(--line,var(--color-border)); flex:0 0 auto; }
.fs-ctype-sm { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--taupe,var(--pyt-taupe-500)); margin-left:4px; }
.ct-etab-h > span:first-child { display:inline-flex; align-items:center; gap:8px; }
.ct-etab-toggle { cursor:pointer; }
.ct-arrow { color:var(--muted); font-size:12px; width:12px; display:inline-block; }
.ct-etab-h .fs-ci { width:26px; height:26px; font-size:13px; }
.fs-abo { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.fs-abo-l { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:6px 0; border-bottom:1px solid var(--line-2,var(--pyt-line-200)); }
.fs-abo-l:last-child { border-bottom:none; }
.fs-abo-lbl { color:var(--text); }
.fs-abo-px { white-space:nowrap; font-weight:600; }
.fs-abo-l.tot { font-weight:700; color:var(--accent); border-top:1px solid var(--border); margin-top:2px; padding-top:8px; }
/* gestionnaire de contacts (répertoire partagé) */
.ct-etab { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.ct-etab-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ct-ils { display:flex; flex-direction:column; gap:4px; }
.ct-il { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; padding:3px 2px; }
.ct-il input { flex:0 0 auto; accent-color:var(--accent); width:16px; height:16px; }
.ct-newil { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.ct-newil input { flex:1; min-width:90px; padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); font-family:inherit; font-size:13px; }
.ct-add { display:flex; flex-direction:column; gap:8px; }
.ct-add select, #ct-net-nom { padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; }
#ct-newetab { display:flex; gap:6px; flex-wrap:wrap; }
#ct-newetab input { flex:1; min-width:120px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; }

/* ============================================================
   RESPONSIVE MOBILE — passe globale sur tous les onglets.
   (Bloc final : prioritaire à specificité égale. Desktop intact.)
   ============================================================ */
@media (max-width: 820px) {
  /* ---- Bandeau du haut : logo + actions compacts ---- */
  .brand-logo { height: 30px; }
  .topbar-actions { justify-content: flex-start; }
  .topbar-actions .btn { flex: 1 1 auto; text-align: center; }
  .topbar-actions .inline { flex: 1 1 auto; display: flex; }
  .topbar-actions .inline .btn { width: 100%; }
  #user-name, #status { flex-basis: 100%; }

  /* ---- Un peu d'air sous les onglets ---- */
  .container { padding: 12px 10px 24px; }

  /* ---- Onglets de "données" à pleine largeur (dont INPI & Habilitations, oubliés) ---- */
  #view-inpi, #view-habilitations { width: 100%; max-width: 100%; margin-left: 0; }

  /* ---- Navigation mobile : bouton « Menu » (hamburger) ----
     Fermé, la barre d'onglets = une seule ligne « ☰ Menu » (zéro encombrement). Ouvert, un
     panneau vertical propre se SUPERPOSE au contenu (ne le décale pas). Fiable iOS : le panneau
     (.tabs) est enfant de .tabbar (sticky, PAS un conteneur qui défile) → aucun clipping ; à
     l'intérieur, tout est en flot normal (le panneau défile si besoin). Ouverture des sous-menus
     pilotée en JS (classe .open). */
  .nav-burger {
    display: block; width: 100%; text-align: left; padding: 12px 16px;
    background: var(--surface); border: 0; border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 600; color: var(--accent); cursor: pointer; font-family: inherit;
  }
  .nav-burger::before { content: "☰"; margin-right: 10px; font-weight: 400; }
  .tabbar.nav-open .nav-burger::before { content: "✕"; }
  .tabs { display: none; }
  .tabbar.nav-open .tabs {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; top: var(--stick-h, 108px); left: 0; right: 0;
    max-height: calc(100vh - var(--stick-h, 108px)); overflow-y: auto;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 16px 30px rgba(0,0,0,.16); z-index: var(--z-dropdown); padding: 8px 10px 16px;
  }
  .tabbar.nav-open .tabs > .tab,
  .tabbar.nav-open .navmenu-head {
    width: 100%; text-align: left; padding: 13px 14px; border-radius: 9px;
    border-bottom: 0; margin: 0; font-size: 15px;
  }
  .tabbar.nav-open .navmenu { position: static; display: block; width: 100%; }
  .navmenu:hover > .navmenu-drop { display: none; }   /* neutralise le survol du desktop sur mobile */
  .tabbar.nav-open .navmenu.open > .navmenu-drop {
    display: flex; position: static; width: 100%; min-width: 0;
    box-shadow: none; border: 0; background: transparent;
    margin: 2px 0 6px; padding: 0 0 0 12px; max-height: none;
  }
  .tabbar.nav-open .navmenu-drop .subtab { padding: 11px 14px; font-size: 14.5px; }
  .navmenu.open .navmenu-head, .navmenu.active .navmenu-head {
    color: var(--color-on-accent); background: var(--accent); border-bottom-color: transparent;
  }
  .navmenu-drop .subtab { padding: 12px 14px; font-size: 15px; }

  /* ---- Tableaux : défilement horizontal fluide + un peu plus denses ---- */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  th, td { padding: 9px 10px; }
  /* Les tableaux à colonnes fixes/nombreuses défilent au lieu d'être écrasés */
  .tf-table { min-width: 680px; table-layout: auto; }
  .bs-table { min-width: 560px; }
  #suivi-table { min-width: 640px; }
  #abo-table { min-width: 620px; }
  .charge-table { min-width: 520px; }

  /* ---- Barres d'outils : recherche + boutons pleine largeur, tapables ---- */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .search, .toolbar select, .toolbar > select { max-width: none !important; width: 100%; }
  .toolbar-right { width: 100%; flex-wrap: wrap; }
  .toolbar-right .btn, .toolbar-right select { flex: 1 1 140px; text-align: center; }

  /* ---- Segments (sous-onglets) : passent à la ligne ---- */
  .seg { flex-wrap: wrap; width: 100%; }
  .seg-btn { flex: 1 1 auto; text-align: center; }

  /* ---- Modales : quasi pleine largeur, actions qui s'enroulent ---- */
  .modal { align-items: flex-start; padding: 10px 0; }
  .modal-card, .modal-card.large { width: 96vw; max-width: 96vw; max-height: calc(100vh - 20px); }
  #modal-body { padding: 16px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }
  /* Anti-zoom iOS sur les champs où l'on saisit vraiment (≥16px = pas de zoom auto) */
  .search, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
  .note-add input, .pick-wrap input, .bs-input { font-size: 16px; }

  /* ---- Abonnement (grilles admin) ---- */
  .abo-grid { grid-template-columns: 1fr; }
  .abo-line { grid-template-columns: 1fr 64px 34px; }
  .abo-line > :first-child { grid-column: 1 / -1; }

  /* ---- Agenda / échéancier ---- */
  .ech-topbar { gap: 8px 12px; }
  .ech-nav { margin-left: 0; }

  /* ---- Popover INPI (types) : borné à l'écran ---- */
  .itypes-pop { max-width: calc(100vw - 24px); }

  /* ---- Accueil ---- */
  .home-head h1 { font-size: 20px; }
  .home-card { padding: 15px 14px; }
}

/* Téléphones étroits */
@media (max-width: 560px) {
  .bs-kpis, .home-cards { grid-template-columns: 1fr; }
  .fact-sum, .ifact-sum { gap: 8px 14px; }
  .topbar-actions .btn { font-size: 12.5px; padding: 7px 8px; }
  .tabs > .tab, .navmenu-head { padding: 10px 12px; }
  .fs-title { font-size: 18px; }
  .home-stat { padding: 13px 14px; }
}

/* ============================================================
   CHARTE GRAPHIQUE PYTHEAS CONSEIL (septembre 2026)
   Modèle : « Plan de formation 2026/2027 » (compétence charte-presentation-pytheas).
   Polices : Poppins (titres, navigation, boutons, chiffres) · Calibri / Carlito (texte courant).
   Palette : bleu var(--color-accent) · marine var(--color-accent-hover) · taupe var(--pyt-taupe-500) · texte var(--color-text) · gris var(--color-text-muted)
             bleu clair var(--color-accent-subtle) · bleu pâle var(--pyt-blue-200) · sable var(--color-bg) · filets var(--color-border).
   Les couleurs d'ÉTAT (rouge / orange / vert) restent inchangées.
   Bloc volontairement en FIN de feuille ; polices libres (OFL) dans /static/fonts/.
   ============================================================ */
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600 800; font-display: swap; src: url("fonts/Poppins-Bold.ttf") format("truetype"); }
/* Calibri si installée (Office), sinon Carlito (métriquement identique). */
@font-face { font-family: "PytheasTexte"; font-weight: 300 500; font-display: swap; src: local("Calibri"), url("fonts/Carlito-Regular.ttf") format("truetype"); }
@font-face { font-family: "PytheasTexte"; font-weight: 600 800; font-display: swap; src: local("Calibri Bold"), local("Calibri-Bold"), url("fonts/Carlito-Bold.ttf") format("truetype"); }

:root {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-2: var(--color-text-muted);
  --muted: var(--color-text-subtle);
  --accent: var(--color-accent);
  --accent-bg: var(--color-accent-subtle);
  --marine: var(--color-accent-hover);
  --taupe: var(--pyt-taupe-500);
  --taupe-bg: var(--color-bg);
  --taupe-line: var(--color-border);
  --line: var(--color-border);
  --line-2: var(--pyt-line-200);
  --titre: "Poppins", "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: "PytheasTexte", Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--bg) url("boussole_fond_clair.png") no-repeat right -70px bottom -90px / 300px auto fixed;
}

/* ---- Poppins : titres, navigation, boutons, chiffres clés, en-têtes ---- */
h1, h2, h3, .btn, .tab, .navmenu-head, .subtab, .seg-btn, th, .nav-burger, .badge-count,
.modal-head h2, .fs-title, .fs-sec, .doc-sec, .home-date, .hs-val, .hs-lab, .card .value, .card .label,
.pm-head, .comm-head h2, .bs-title, .bs-kpi-v, .bs-cours, .abo-card-val, .istat .v, .ech-date b,
.todo-section-title, .todo-att-title, .ech-grp, .itarif-h {
  font-family: var(--titre);
}
.btn, .seg-btn { font-size: 13px; font-weight: 500; border-radius: 6px; }
.btn-primary { background: var(--color-accent-solid); border-color: var(--color-accent-solid); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--marine); border-color: var(--marine); }
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.seg-btn.active { background: var(--accent); color: var(--color-on-accent); }
.search { border-color: var(--border); border-radius: 6px; font-family: inherit; }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--color-accent); }

/* ---- Bandeau du haut et onglets ---- */
.topbar { border-top: 4px solid var(--accent); border-bottom: 1px solid var(--border); }
.tabbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.tabs > .tab, .navmenu-head { font-size: 13.5px; font-weight: 500; color: var(--text-2); padding: 11px 12px; white-space: nowrap; }
.tabs > .tab.active, .navmenu.active .navmenu-head { color: var(--accent); border-bottom: 3px solid var(--accent); }
.tabs > .tab:hover, .tabs > .tab.active:hover, .navmenu:hover .navmenu-head, .navmenu:focus-within .navmenu-head { background: var(--accent); color: var(--color-on-accent); }
.tab.tab-bourseas { color: var(--accent); }
.navmenu-drop { border-radius: 8px; }
.navmenu-drop .subtab { font-size: 13.5px; }

/* ---- Titres de page : Poppins Bold bleu précédé du trait vertical bleu ---- */
.home-head { align-items: center; }
.home-head h1, .bs-title { font-size: 24px; font-weight: 700; color: var(--accent); border-left: 5px solid var(--accent); padding-left: 12px; line-height: 1.25; }
.home-date { color: var(--taupe); font-size: 12.5px; }
.fs-title { font-weight: 700; color: var(--accent); }
.modal-head h2, .pm-head { color: var(--accent); font-weight: 700; }
.modal-card { border-radius: 8px; border-top: 4px solid var(--accent); }
.comm-head h2, .itarif-h { color: var(--marine); font-weight: 500; }

/* ---- Cartes, encadrés ---- */
.home-card, .fs-card, .ct-etab, .table-wrap, .conv, .msg-item, .suivi-item { border-color: var(--border); border-radius: 8px; }
.suivi-item.due { border-color: var(--danger); }
.ct-etab { background: var(--surface); }
.home-card-head h2 { font-size: 16px; font-weight: 500; color: var(--marine); }
.home-card-head h2 span { color: var(--accent); }
.home-stat { border: 1px solid var(--border); border-left-width: 5px; border-radius: 8px; }
.home-stat .hs-icon { background: var(--accent-bg); border-radius: 8px; }
.home-stat .hs-val { font-weight: 700; }
.home-stat .hs-val:not(.danger):not(.warn-val) { color: var(--accent); }
.home-stat .hs-lab { font-size: 12px; font-weight: 500; color: var(--marine); }
.hp-name { color: var(--marine); font-weight: 600; }
.hp-bar { background: var(--accent-bg); }

/* Chiffres clés des onglets (Messagerie, Habilitations…) : carte bleu clair à bandeau bleu,
   comme la page « chiffres » du modèle. */
.card { background: var(--accent-bg); border: 0; border-top: 5px solid var(--accent); border-radius: 8px; }
.card .label { font-size: 12px; font-weight: 500; color: var(--marine); }
.card .value { font-weight: 700; }
.card .value:not(.danger):not(.warn) { color: var(--accent); }
.card.clickable:hover { box-shadow: 0 3px 12px rgba(31,95,169,.18); }
.card.active { box-shadow: inset 0 0 0 2px var(--accent); }

/* Rubriques : petites capitales taupe */
.fs-sec, .doc-sec, .todo-section-title, .todo-att-title, .ech-grp { font-weight: 500; letter-spacing: .07em; color: var(--taupe); }

/* ---- Tableaux ----
   Par défaut (tableaux secondaires, modales, facturation, Bourséas…) : en-tête sable, texte taupe.
   Tableaux de données principaux : en-tête bleu plein, texte blanc (gabarit « tableau » de la charte). */
th { background: var(--taupe-bg); color: var(--taupe); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--border); }
:is(#dos-table, #table, #tva-table, #is-table, #cloture-table, #greffe-table, #civil-table, #urssaf-table, #habil-table, #suivi-table, #arch-table, #abo-table) thead th,
:is(#dos-table, #table, #tva-table, #is-table, #cloture-table, #greffe-table, #civil-table, #urssaf-table, #habil-table, #suivi-table, #arch-table, #abo-table) thead th[class] {
  background: var(--color-accent-solid); color: var(--color-on-accent); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 0;
}
:is(#dos-table, #table, #tva-table, #is-table, #cloture-table, #greffe-table, #civil-table, #urssaf-table, #habil-table, #suivi-table, #arch-table, #abo-table) thead th.sortable:hover { background: var(--marine); color: var(--color-on-accent); }
:is(#dos-table, #table, #tva-table, #is-table, #cloture-table, #greffe-table, #civil-table, #urssaf-table, #habil-table, #suivi-table, #arch-table, #abo-table) thead th .arrow { color: var(--pyt-blue-200); }
/* Unification (audit charte, 19/09/2026) : TOUT tableau du composant de liste
   (classe .liste-table : Dossiers, TVA, Clôture, Facturation électronique…) a
   l'en-tête bleu de la charte. Avant, les écrans sans identifiant listé ci-dessus
   (ex. Facturation électronique) avaient une ligne de titres sable au-dessus
   d'une ligne de filtres bleue — deux styles dans le même tableau. */
.liste-table thead th, .liste-table thead th[class] {
  background: var(--color-accent-solid); color: var(--color-on-accent); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 0;
}
.liste-table thead th.liste-th.triable:hover { background: var(--marine); color: var(--color-on-accent); }
.liste-table thead th .liste-tri, .liste-table thead th .arrow { color: var(--pyt-blue-200); }
tbody tr { border-top: 1px solid var(--border); }
.rs { font-weight: 700; }
.foot, .hint { color: var(--text-2); }

@media (max-width: 820px) {
  .nav-burger { color: var(--accent); font-family: var(--titre); }
  .home-head h1, .bs-title { font-size: 20px; }
  body { background-size: 200px auto; }
  .tabbar.nav-open .tabs > .tab, .tabbar.nav-open .navmenu-head { white-space: normal; border-bottom: 0; }
}

/* --- Fil d'Ariane (lot 1a : navigation par URL) --- */
.fil-ariane { max-width: 1080px; margin: 0 auto; padding: 8px 20px 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fil-ariane[hidden] { display: none; }
.fa-seg { border: 0; background: none; padding: 0; font-family: var(--titre); font-size: 12.5px; color: var(--accent); cursor: pointer; }
.fa-seg:hover { text-decoration: underline; }
.fa-actuel { color: var(--text-2); cursor: default; }
.fa-actuel:hover { text-decoration: none; }
.fa-sep { color: var(--muted); }
@media (max-width: 820px) { .fil-ariane { padding: 6px 10px 0; } }

/* --- Panneau latéral des fiches (lot 1b) ---
   Réutilise la modale existante (#modal / .modal-card) : la classe .panneau la transforme en tiroir
   à droite, la liste reste visible et utilisable. Aucune structure DOM nouvelle. */
.modal.panneau { justify-content: flex-end; background: rgba(0,0,0,.18); }
.modal.panneau .modal-card {
  width: clamp(480px, 40vw, 760px); max-width: 100vw; height: 100vh; max-height: 100vh;
  border-radius: 0; border-top: 0; border-left: 4px solid var(--accent);
  box-shadow: -12px 0 30px rgba(0,0,0,.16); display: flex; flex-direction: column;
}
.modal.panneau.plein .modal-card { width: min(1180px, 96vw); }
.modal.panneau .modal-head { flex: 0 0 auto; }
.modal.panneau #modal-body { flex: 1 1 auto; overflow: auto; }
.pan-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pan-nav .btn { padding: 5px 9px; font-size: 12.5px; }
.pan-fil { font-size: 12px; color: var(--muted); padding: 6px 22px 0; }
@media (max-width: 820px) {
  .modal.panneau .modal-card, .modal.panneau.plein .modal-card { width: 100vw; border-left: 0; }
}

/* --- Palette de commandes (lot 1b) --- */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.palette[hidden] { display: none; }
.palette-boite { background: var(--surface); width: min(640px, 94vw); border-radius: 10px; border-top: 4px solid var(--accent); box-shadow: 0 16px 50px rgba(0,0,0,.28); overflow: hidden; }
.palette-champ { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--text); }
.palette-champ:focus { outline: none; }
.palette-liste { max-height: 52vh; overflow: auto; padding: 6px; }
.palette-groupe { font-family: var(--titre); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--taupe); padding: 8px 10px 4px; }
.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.palette-item:hover, .palette-item.actif { background: var(--accent-bg); }
.palette-item .sec { margin-left: auto; font-size: 12px; color: var(--muted); }
.palette-vide { padding: 18px; color: var(--muted); font-size: 13.5px; text-align: center; }
.palette-aide { border-top: 1px solid var(--border); padding: 8px 14px; font-size: 11.5px; color: var(--muted); display: flex; gap: 14px; }
.touche { font-family: var(--titre); font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text-2); }

/* ===== Composant de liste unique — lot 2a =====
   Barre de filtres, en-têtes figés, poignées de largeur, groupes, totaux, états.
   Couleurs uniquement par variables de la charte. */
.liste-barre-zone { margin: 0 0 8px; }
.liste-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.liste-barre .liste-btn { padding: 4px 10px; font-size: 12.5px; }
.liste-barre-fin { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.liste-compteur { white-space: nowrap; }
.liste-op { font-family: var(--titre); font-size: 11px; font-weight: 600; color: var(--marine); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 7px; cursor: pointer; }
.liste-pastille { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-bg); border: 1px solid var(--accent); color: var(--marine); border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 12.5px; cursor: pointer; }
.liste-pastille-groupe { background: var(--bg); border-color: var(--border); color: var(--text); cursor: default; }
.liste-pastille-groupement { background: var(--taupe-bg, var(--bg)); border-color: var(--taupe); color: var(--text); cursor: default; }
.liste-pastille-x { border: 0; background: none; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; padding: 2px; border-radius: 50%; }
.liste-pastille-x:hover { background: var(--color-surface); }

.liste-table { border-collapse: separate; border-spacing: 0; }
.liste-table th.liste-th { position: sticky; top: 0; z-index: 3; white-space: nowrap; }
.liste-table th.liste-th.triable { cursor: pointer; }
.liste-table th.liste-th .liste-th-lib { margin-right: 4px; }
.liste-table .liste-tri { font-size: 10px; opacity: .95; }
.liste-table .liste-tri sup { font-size: 9px; margin-left: 1px; }
.liste-table tr.liste-raccourcis th { position: sticky; top: 34px; z-index: 3; background: var(--color-accent-solid); padding-top: 0; }
.liste-table .liste-raccourci { max-width: 100%; }
.liste-table td.liste-fige-col, .liste-table th.liste-fige-col { position: sticky; left: 0; z-index: 2; }
.liste-table th.liste-fige-col { z-index: 4; }
.liste-table td.liste-fige-col { background: var(--color-surface); }
.liste-table tr:hover td.liste-fige-col { background: var(--accent-bg); }
.liste-poignee { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; }
.liste-table th.liste-th { position: sticky; }
.liste-table th { position: relative; }

.liste-groupe td { background: var(--bg); font-size: 13px; padding: 5px 8px; border-top: 1px solid var(--border); }
.liste-groupe-btn { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--text-2); margin-right: 4px; }
.liste-sous-total td { background: var(--bg); font-size: 12.5px; color: var(--text-2); }
.liste-total td, .liste-tf { position: sticky; bottom: 0; z-index: 2; background: var(--taupe-bg, var(--bg)); border-top: 1px solid var(--border); font-size: 12.5px; cursor: pointer; }
.liste-total td.liste-fige-col { z-index: 3; }
.liste-agr-val { font-weight: 600; color: var(--marine); }
.liste-message td { padding: 22px 12px; text-align: center; color: var(--text-2); }
.liste-vide b { color: var(--text); }
.liste-plus { color: var(--text-2); font-size: 13px; }
.liste-squelette .liste-sq { display: block; height: 11px; border-radius: 5px; background: linear-gradient(90deg, var(--line-2), var(--bg), var(--line-2)); background-size: 200% 100%; animation: liste-sq 1.2s linear infinite; }
@keyframes liste-sq { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.liste-popover { position: absolute; z-index: var(--z-dropdown); background: var(--color-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.liste-pop { padding: 12px; min-width: 260px; max-width: 340px; font-size: 13px; }
.liste-pop-titre { font-family: var(--titre); font-weight: 600; color: var(--marine); margin-bottom: 8px; }
.liste-pop-ligne { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.liste-pop-ligne select, .liste-pop-ligne input.liste-val { flex: 1 1 120px; min-width: 0; }
.liste-choix-liste { max-height: 200px; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; width: 100%; }
.liste-choix { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.liste-col-ligne { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.liste-col-ligne label { display: flex; align-items: center; gap: 6px; flex: 1; }
.liste-col-fleches button { border: 1px solid var(--border); background: var(--color-surface); border-radius: 5px; cursor: pointer; padding: 0 5px; color: var(--text-2); }
.liste-col-fleches button[disabled] { opacity: .35; cursor: default; }
.liste-pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.liste-pop-avance { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 8px; font-size: 12px; color: var(--text-2); }

@media (max-width: 820px) {
  .liste-barre-fin { margin-left: 0; width: 100%; }
  .liste-popover { left: 8px !important; right: 8px; max-width: calc(100vw - 16px); }
  .liste-pop { max-width: none; }
  .liste-table td.liste-fige-col, .liste-table th.liste-fige-col { position: static; }
}

/* ===== Lot 2b : sélection, actions groupées, édition en ligne ===== */
.liste-sel-cell { text-align: center; padding-left: 6px; padding-right: 6px; }
.liste-table td.liste-fige-col-2, .liste-table th.liste-fige-col-2 { left: 34px; }
.liste-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 10px; background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 8px; }
.liste-actions-nb { font-size: 13px; color: var(--marine); margin-right: 4px; }
.liste-actions .liste-btn { padding: 3px 10px; font-size: 12.5px; background: var(--color-surface); }
.liste-td.liste-editable { cursor: text; }
.liste-td.liste-editable:hover { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 4px; }
.liste-td.liste-editable:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.liste-edit { width: 100%; min-width: 60px; font: inherit; padding: 2px 4px; border: 1px solid var(--accent); border-radius: 4px; }
.liste-en-cours { color: var(--text-2); font-size: 12px; }
.liste-pop-texte { margin: 0 0 8px; font-size: 13px; }
.liste-champ { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.liste-champ input { font: inherit; color: var(--text); }
@media (max-width: 820px) {
  .liste-table td.liste-fige-col-2, .liste-table th.liste-fige-col-2 { position: static; }
}

/* Lot 2c : sous-titre d'en-tête (compteur d'avancement des colonnes mensuelles TVA/IS/Clôture). */
.liste-table .liste-sous-titre { font-weight: 400; font-size: 11px; opacity: .95; margin-top: 2px; }
.liste-table .liste-sous-titre .col-prog { color: var(--color-on-accent); }
.liste-table .liste-sous-titre .hl-danger { color: #FFD7CF; font-weight: 600; }   /* lisible sur len-tête bleu */
.liste-table th.mois-col { min-width: 130px; }

/* Lot 3 : sélecteur de vues enregistrées dans la barre de liste. */
.liste-vues { display: inline-flex; align-items: center; gap: 6px; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--line-2); }
.liste-vues-lbl { font-size: 12px; color: var(--text-2); }
.liste-vue-select { max-width: 220px; font-size: 12.5px; }
.liste-vue-modif { font-size: 12px; color: var(--warn); background: var(--warn-bg); border-radius: 10px; padding: 1px 8px; }
.liste-vues .btn.btn-sm, .liste-actions .btn.btn-sm { padding: 2px 8px; font-size: 12px; }
.liste-pop-vue .liste-champ input { width: 100%; }
@media (max-width: 820px) { .liste-vues { border-right: 0; width: 100%; flex-wrap: wrap; } }

/* ===== Lot 4a : tableau (kanban) Onboarding / Offboarding, éditeur d'étapes ===== */
.onb-affichage { flex-shrink: 0; }
.kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-col { flex: 0 0 240px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; display: flex; flex-direction: column; max-height: 72vh; }
.kanban-col.kanban-cible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.kanban-col-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line-2); background: var(--accent); color: var(--surface); border-radius: 9px 9px 0 0; }
.kanban-col-titre { font-family: var(--titre); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kanban-compte { font-size: 11.5px; font-weight: 600; background: var(--surface); color: var(--accent); border-radius: 10px; padding: 0 7px; }
.kanban-col:last-child .kanban-col-tete { background: var(--success); }
.kanban-col:last-child .kanban-compte { color: var(--success); }
.kanban-col-corps { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kanban-carte { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; cursor: grab; position: relative; }
.kanban-carte:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kanban-carte.kanban-glissee { opacity: .45; }
.kanban-carte.kanban-attente { opacity: .6; cursor: progress; }
.kanban-carte-corps { cursor: pointer; }
.kanban-titre { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 5px; overflow-wrap: anywhere; }
.kanban-infos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.kanban-infos .onb-entree { font-size: 11.5px; color: var(--accent); background: var(--accent-bg); border-radius: 20px; padding: 1px 8px; }
.kanban-infos .onb-entree.warn { color: var(--warn); background: var(--warn-bg); }
.kanban-infos .onb-entree.late, .kanban-infos .onb-entree.missing { color: var(--danger); background: var(--danger-bg); }
.kanban-infos .onb-prog { font-size: 11.5px; padding: 1px 8px; }
.kanban-bouton { margin-top: 7px; font: inherit; font-size: 11.5px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.kanban-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kanban-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 4px; background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; }
.kanban-menu-choix { font: inherit; font-size: 12.5px; text-align: left; background: none; border: 0; border-radius: 4px; padding: 5px 7px; cursor: pointer; color: var(--text); }
.kanban-menu-choix:hover, .kanban-menu-choix:focus { background: var(--accent-bg); outline: none; }
.etapes-liste { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: etape; }
.etapes-ligne { display: flex; align-items: center; gap: 6px; counter-increment: etape; }
.etapes-ligne::before { content: counter(etape) "."; min-width: 22px; text-align: right; font-size: 13px; color: var(--text-2); }
.etapes-libelle { flex: 1; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.etapes-libelle:focus { border-color: var(--accent); outline: none; }
.etapes-ligne .icon-btn[disabled] { opacity: .3; cursor: default; }
@media (max-width: 820px) {
  .kanban { flex-direction: column; overflow-x: visible; }
  .kanban-col { flex-basis: auto; width: 100%; max-height: none; }
}

/* ===== Lot 4b : calendrier générique (listes et Agenda) ===== */
:root { --violet: #7E6FD1; }
.liste-affichage { flex-shrink: 0; }
.liste-cal-col { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.liste-cal-col select { font-size: 12.5px; max-width: 200px; }
.liste-calendrier { margin-top: 8px; }
.cal { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; }
.cal-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.cal-nav { display: inline-flex; gap: 4px; }
.cal-titre { font-family: var(--titre); font-size: 16px; font-weight: 600; color: var(--marine); margin: 0; }
.cal-titre::first-letter, .cal-jour-tete b::first-letter { text-transform: uppercase; }
.cal-compte { margin-right: auto; }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: center; font-weight: 600; padding: 2px 0; }
.cal-case { min-height: 84px; border: 1px solid var(--taupe-line); border-radius: 7px; padding: 3px 4px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-semaine .cal-case { min-height: 220px; }
.cal-case.cal-we { background: var(--taupe-bg); }
.cal-case.cal-hors { background: transparent; border-style: dashed; }
.cal-case.cal-hors .cal-num, .cal-case.cal-hors .cal-ev { opacity: .55; }
.cal-case.cal-auj { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-case.cal-ouverte { background: var(--accent-bg); }
.cal-num { align-self: flex-start; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 0 2px; border-radius: 4px; cursor: pointer; }
.cal-auj .cal-num { color: var(--accent); }
.cal-num:hover, .cal-num:focus-visible { color: var(--accent); text-decoration: underline; outline: none; }
.cal-ev { display: block; width: 100%; text-align: left; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.35; border: 0; border-left: 3px solid var(--accent); border-radius: 4px; padding: 1px 5px; background: var(--accent-bg); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-ev:hover { filter: brightness(.95); }
.cal-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-ev.cal-ev-is { border-left-color: var(--violet); background: var(--taupe-bg); }
.cal-ev.cal-ev-rappel { border-left-color: var(--text-2); background: var(--taupe-bg); }
.cal-ev.cal-ev-ok { border-left-color: var(--success); background: var(--success-bg); }
.cal-ev.cal-ev-retard { color: var(--danger); border-left-color: var(--danger); background: var(--danger-bg); }
.cal-ev.cal-ev-marque { font-style: italic; opacity: .8; }
.cal-plus { align-self: flex-start; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; }
.cal-jour { margin-top: 10px; border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
.cal-jour-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cal-jour-tete b { display: inline-block; }
.cal-jour-tete .icon-btn { margin-left: auto; }
.cal-jour-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.cal-jour-liste .cal-ev { font-size: 12px; padding: 3px 7px; }
.cal-vide { margin: 8px 0 0; }
@media (max-width: 820px) {
  .cal { padding: 6px; }
  .cal-grille { gap: 2px; }
  .cal-case { min-height: 58px; padding: 2px; }
  .cal-ev { font-size: 9px; padding: 0 3px; }
  .cal-semaine { grid-template-columns: 1fr; }
  .cal-semaine .cal-case { min-height: 0; }
}

/* ===== Lot 5 : assistant d'import de dossiers ===== */
.imp-etapes { display: flex; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; flex-wrap: wrap; }
.imp-etape { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); padding: 4px 10px 4px 4px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2); }
.imp-etape-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); color: var(--text-2); font-weight: 600; font-size: 12px; }
.imp-etape.active { color: var(--marine); border-color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.imp-etape.active .imp-etape-n { background: var(--accent); color: var(--surface); }
.imp-etape.faite .imp-etape-n { background: var(--success-bg); color: var(--success); }
.imp-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; text-align: center; color: var(--marine); }
.imp-zone:hover, .imp-zone.imp-survol { border-color: var(--accent); background: var(--accent-bg); }
.imp-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imp-input:focus-visible + .hint, .imp-zone:focus-within { outline: 2px solid var(--accent); }
.imp-resume { margin: 12px 0 6px; font-size: 13.5px; }
.imp-apercu { max-height: 42vh; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; margin: 8px 0; }
.imp-apercu-haut { max-height: 50vh; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-table th { position: sticky; top: 0; background: var(--accent); color: var(--surface); text-align: left; font-weight: 600; padding: 6px 8px; white-space: nowrap; z-index: 1; }
.imp-table td { padding: 5px 8px; border-top: 1px solid var(--line-2); vertical-align: top; max-width: 320px; overflow-wrap: anywhere; }
.imp-n { color: var(--text-2); text-align: right; width: 1%; white-space: nowrap; }
.imp-exemple { color: var(--text-2); font-style: italic; }
.imp-corresp select { min-width: 220px; font-size: 13px; }
.imp-ignoree td:first-child b { color: var(--text-2); font-weight: 500; }
.imp-origine { font-size: 11px; color: var(--success); background: var(--success-bg); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.imp-soucis { margin: 8px 0; padding: 8px 12px 8px 28px; background: var(--danger-bg); color: var(--danger); border-radius: 8px; font-size: 13px; }
.imp-attente { margin: 10px 0; }
.imp-cartes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.imp-carte { display: inline-flex; align-items: baseline; gap: 6px; font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; color: var(--text); }
.imp-carte-n { font-family: var(--titre); font-size: 17px; font-weight: 600; }
.imp-carte.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-bg); }
.imp-carte.imp-st-creation .imp-carte-n { color: var(--success); }
.imp-carte.imp-st-maj .imp-carte-n { color: var(--accent); }
.imp-carte.imp-st-erreur .imp-carte-n { color: var(--danger); }
.imp-st { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.imp-st.imp-st-creation { color: var(--success); background: var(--success-bg); }
.imp-st.imp-st-maj { color: var(--accent); background: var(--accent-bg); }
.imp-st.imp-st-inchange { color: var(--text-2); background: var(--surface-2); }
.imp-st.imp-st-erreur { color: var(--danger); background: var(--danger-bg); }
.imp-detail { margin: 0; padding-left: 16px; }
.imp-detail li { margin: 1px 0; }
.imp-err { color: var(--danger); }
.imp-avert { color: var(--warn); }
.imp-chg { color: var(--text); }
.imp-choix-import { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.imp-option { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.imp-fin { padding: 8px 0; }
.imp-fin-titre { font-family: var(--titre); font-size: 18px; color: var(--success); margin: 0 0 8px; }
@media (max-width: 820px) {
  .imp-corresp select { min-width: 0; width: 100%; }
  .imp-table { font-size: 11.5px; }
}

/* ===== Boutons modernisés (18/09/2026) =====
   Un seul système pour les ~270 boutons de l'application :
   - hauteurs communes (36 px ; 30 px en petit ; 40 px sur écran tactile), arrondi 8 px ;
   - hiérarchie nette : principal (plein), secondaire (contour), discret (sans contour), danger ;
   - états complets : survol, appui (léger enfoncement), focus clavier visible, désactivé ;
   - transitions courtes, coupées si le poste demande « moins d'animations ».
   Couleurs de la charte uniquement (variables), teintes dérivées par color-mix. */
:root {
  --btn-h: 36px;
  --btn-h-sm: 30px;
  --btn-radius: 8px;
  --btn-anneau: var(--focus-ring);   /* anneau net (audit charte) : liseré blanc + bleu, bien visible au clavier */
  --btn-ombre: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
  --btn-teinte: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
/* Un bouton masqué reste masqué (sinon « display: inline-flex » l'emporterait sur l'attribut hidden). */
.btn[hidden], .icon-btn[hidden], .seg-btn[hidden], .liste-btn[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--btn-h); padding: 0 14px;
  font-family: var(--titre); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .005em;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--btn-radius);
  box-shadow: var(--btn-ombre);
  cursor: pointer; text-decoration: none; white-space: nowrap; vertical-align: middle;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
/* Secondaire (par défaut) : contour discret, teinte bleue au survol. */
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):hover { background: var(--btn-teinte); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--btn-anneau); border-color: var(--accent); }

/* Principal : plein, bleu de la charte ; marine au survol. */
.btn-primary { color: var(--color-on-accent); background: var(--color-accent-solid); border-color: var(--color-accent-solid); font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface) 14%, transparent); }
.btn-primary:hover { background: var(--marine); border-color: var(--marine); color: var(--surface); }
.btn-primary:focus-visible { box-shadow: var(--btn-anneau); }

/* Discret : ni fond ni contour ; fond léger au survol. */
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* Danger : rouge de la charte, plein au survol. */
.btn-danger { color: var(--danger); background: var(--surface); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn-danger:hover { color: var(--surface); background: var(--danger); border-color: var(--danger); }

/* Désactivé : visible mais clairement inactif. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-primary:disabled:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* Petite taille (barres de liste, vues, actions groupées). */
.btn.btn-sm, .liste-vues .btn.btn-sm, .liste-actions .btn.btn-sm { min-height: var(--btn-h-sm); padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.liste-barre .liste-btn, .liste-actions .liste-btn { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.liste-actions .liste-btn { background: var(--surface); }

/* Boutons-icônes (⚙ ✕ ↑ ↓ 🗑…) : cible de 32 px, centrés. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 0 6px;
  border: 0; border-radius: var(--btn-radius); background: transparent; color: var(--text-2);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--btn-anneau); }
.icon-btn:disabled, .icon-btn[disabled] { opacity: .3; cursor: default; background: transparent; }

/* Sélecteur segmenté (Liste / Tableau, Mois / Semaine, Agenda / Calendrier…) :
   rail gris, option choisie en « carte » blanche surélevée, texte bleu. */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; overflow: visible; }
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: var(--btn-h-sm); padding: 0 12px;
  font-family: var(--titre); font-size: 13px; font-weight: 500;
  color: var(--text-2); background: transparent; border: 0; border-left: 0; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.seg-btn.active, .seg-btn[aria-pressed="true"] { color: var(--accent); background: var(--surface); font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent); }
.seg-btn:focus-visible { outline: none; box-shadow: var(--btn-anneau); }

/* Écrans tactiles : cibles de 40 px au moins (recommandation d'accessibilité). */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.btn-sm, .seg-btn { min-height: 36px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
}
/* Poste réglé sur « moins d'animations » : aucune transition. */
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .seg-btn { transition: none; }
  .btn:active:not(:disabled), .icon-btn:active:not(:disabled) { transform: none; }
}
/* Écran étroit : un libellé long peut passer à la ligne plutôt que déborder. */
@media (max-width: 820px) { .btn { white-space: normal; text-align: center; } }

/* ===== Dossiers › Facturation électronique =====
   Couleurs uniquement par variables de la charte ; barres en <progress> (aucun style en ligne). */
.fe-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fe-titre { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.fe-sous { margin: 0; color: var(--text-2); font-size: 13px; }
.fe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fe-pct { font-size: 13px; font-weight: 400; color: var(--text-2); }
.card .value.ok { color: var(--success); }
.fe-tuiles .card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.fe-ecran [hidden] { display: none !important; }
.fe-progression { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.fe-progression progress { flex: 1; max-width: 420px; }
.fe-ecran progress { appearance: none; -webkit-appearance: none; height: 8px; border: 0; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.fe-ecran progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 4px; }
.fe-ecran progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.fe-ecran progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }

.fe-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.fe-bloc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.fe-bloc-titre { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.fe-rien { margin: 0; color: var(--text-2); font-size: 13px; }


.fe-repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.fe-rep { width: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(60px, 2fr) auto; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.fe-rep:hover { background: var(--surface-2); }
.fe-rep.active { background: var(--accent-bg); border-color: var(--accent); }
.fe-rep:focus-visible { outline: none; box-shadow: var(--btn-anneau); }
.fe-rep-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-rep--a-qualifier .fe-rep-nom { color: var(--warn); font-style: italic; }
.fe-rep-barre { width: 100%; }
.fe-rep-nb { white-space: nowrap; font-weight: 500; text-align: right; }

.fe-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.fe-pill--ok { background: var(--success-bg); color: var(--success); }
.fe-pill--alerte, .fe-pill--erreur { background: var(--danger-bg); color: var(--danger); }
.fe-pill--anomalie { background: var(--warn-bg); color: var(--warn); }
.fe-lien { color: var(--accent); text-decoration: none; font-weight: 500; }
.fe-lien:hover { text-decoration: underline; }
.fe-siren { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-vide { color: var(--text-2); }
.fe-a-qualifier { color: var(--warn); font-style: italic; }

.fe-admin { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.fe-admin-entete .fe-sous { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fe-admin-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }
.fe-admin h4 { margin: 12px 0 8px; font-size: 13px; font-weight: 600; }
.fe-admin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.fe-admin-liste li { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.fe-admin-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fe-admin-form select, .fe-admin-form input { min-height: 32px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; font: inherit; background: var(--surface); color: var(--text); max-width: 100%; }
.fe-case { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.fe-journal { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
/* Consultation libre d'un SIREN et motifs d'hôte (connecteur SIREN → plateforme agréée). */
.fe-consultation { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.fe-consultation-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fe-consultation-form label { font-weight: 600; font-size: 13px; }
.fe-consultation-form input { min-height: 34px; width: 16em; max-width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 0 10px; font: inherit; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.fe-consultation-resultat { margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
.fe-motifs { margin: 0; padding-left: 22px; max-height: 320px; overflow-y: auto; font-size: 13px; display: grid; gap: 2px; }
.fe-motifs li { display: list-item; }
.fe-motifs .btn { margin-left: 4px; }
.fe-motif-eteint { color: var(--text-2); text-decoration: line-through; }
.fe-case select, .fe-case input[type="number"] { min-height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 6px; font: inherit; background: var(--surface); color: var(--text); }
.fe-case input[type="number"] { width: 6em; }

/* ==========================================================================
   Fondation (audit charte, 19/09/2026) — couche de base transverse.
   ========================================================================== */

/* Focus clavier visible PARTOUT. Les composants qui posent déjà leur propre
   anneau (boutons, champs, cartes de liste…) ont une règle plus spécifique et
   gardent le leur ; cette règle rattrape les liens, onglets et éléments qui
   n'avaient aucun focus visible. Ne s'affiche qu'au clavier (:focus-visible). */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Poste réglé sur « réduire les animations » : on coupe transitions et
   animations dans toute l'application (le bloc boutons ne le faisait que pour
   eux). Confort et accessibilité (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Champs de formulaire — base commune (audit charte, lot 2, 19/09/2026).
   ========================================================================== */

/* Style de base des champs. `:where(...)` a une spécificité NULLE : il n'habille
   que les champs SANS style propre — les <select> nus de la barre de liste, du
   calendrier, des filtres et des menus. Tout champ déjà habillé (.field, .search,
   .bs-input…) garde le sien : on ne casse rien. Cases à cocher, boutons radio,
   curseurs et sélecteurs de fichier sont exclus (ils ne doivent pas être bordés). */
:where(
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
  select, textarea
) {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  min-height: 32px;
  padding: 4px 9px;
}
:where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* Bordure conforme (≥ 3:1 au lieu de 1,4:1) sur les champs DÉJÀ habillés : on ne
   change QUE la couleur du trait, pas le gabarit (padding, largeur, rayon gardés).
   Les états :hover/:focus qui virent au bleu ne sont pas touchés. */
.search, .svc-in, .hab-select, .inum,
.field input, .field select, .field textarea,
.abo-grid .field input, .abo-grid .field select, .abo-line select, .abo-line input,
.onb-filter, .bs-input, .etapes-libelle,
.comm-form input, .fs-addp input, .note-add input, .ct-newil input,
.col-filtre {
  border-color: var(--color-border-strong);
}

/* ==========================================================================
   Fenêtres de confirmation / d'alerte (audit charte, lot JS). <dialog> natif :
   superposition en top-layer, focus géré, voile intégré.
   ========================================================================== */
.mp-dialogue {
  border: 0; border-radius: var(--radius-lg, 12px); padding: 0;
  max-width: 440px; width: calc(100vw - 32px);
  color: var(--color-text); background: var(--color-surface);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--color-text) 20%, transparent);
}
.mp-dialogue::backdrop { background: var(--color-overlay); }
.mp-dialogue-titre { margin: 0; padding: 16px 20px 0; font-family: var(--titre); font-size: 16px; font-weight: 600; }
.mp-dialogue-message { padding: 16px 20px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.mp-dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 16px; }

/* Icônes SVG (audit charte) : monochromes, héritent de la couleur du texte,
   alignées sur la ligne de base, ne rétrécissent pas dans un conteneur flex. */
.mp-ic { display: inline-block; vertical-align: -0.15em; flex: none; }
.mp-ic--ok { color: var(--color-success); }
.mp-ic--danger { color: var(--color-danger); }
.mp-ic--warning { color: var(--color-warning); }

/* ==========================================================================
   MODE SOMBRE (audit charte, lot 8b). Ne redéfinit QUE les jetons : tout ce qui
   utilise var(--color-*) bascule. S'active selon la préférence du système, ou
   forcé par data-theme sur <html> (clair / sombre), piloté par l'interrupteur.
   Quelques teintes décoratives (fonds pastel) ne basculent pas encore : à affiner.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --color-bg: #16191d;
    --color-surface: #1e2328;
    --color-surface-muted: #232a31;
    --color-text: #e8e6e1;
    --color-text-muted: #b3aea5;
    --color-text-subtle: #9a948a;
    --color-border: #3a3f45;
    --color-border-strong: #7a818a;
    --color-accent: #4c8dd8;
    --color-accent-hover: #6ba0e0;
    --color-accent-subtle: #1e2b3b; --color-accent-solid: #2f6db5;
    --color-success: #5cc5a0; --color-success-bg: #14312a;
    --color-warning: #e0a95a; --color-warning-bg: #33280f;
    --color-danger: #e58a8a;  --color-danger-bg: #331a1a;
    --color-overlay: rgb(0 0 0 / .6);
    --pyt-line-200: #2c3238;
    --pyt-taupe-500: #9a948a;
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --color-bg: #16191d;
  --color-surface: #1e2328;
  --color-surface-muted: #232a31;
  --color-text: #e8e6e1;
  --color-text-muted: #b3aea5;
  --color-text-subtle: #9a948a;
  --color-border: #3a3f45;
  --color-border-strong: #7a818a;
  --color-accent: #4c8dd8;
  --color-accent-hover: #6ba0e0;
  --color-accent-subtle: #1e2b3b; --color-accent-solid: #2f6db5;
  --color-success: #5cc5a0; --color-success-bg: #14312a;
  --color-warning: #e0a95a; --color-warning-bg: #33280f;
  --color-danger: #e58a8a;  --color-danger-bg: #331a1a;
  --color-overlay: rgb(0 0 0 / .6);
  --pyt-line-200: #2c3238;
  --pyt-taupe-500: #9a948a;
  color-scheme: dark;
}
/* Boussole de fond claire : retirée en sombre (elle ressortirait sur fond foncé). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) body { background-image: none; } }
:root[data-theme="sombre"] body { background-image: none; }

/* ==========================================================================
   MODE « VOIR EN TANT QUE » (visualisation en lecture seule, administrateurs)
   ========================================================================== */
.mp-vetq-banniere:not([hidden]) {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 14px; line-height: 1.4;
  background: var(--color-warning-bg); color: var(--color-text);
  border-bottom: 2px solid var(--color-warning-border, var(--color-warning));
}
.mp-vetq-banniere .mp-ic { color: var(--color-warning); flex: none; }
.mp-vetq-banniere .mp-vetq-retour { margin-left: auto; }
/* Rappel visuel permanent : liseré d'avertissement sous la barre du haut pendant la simulation. */
body.mp-simulation .topbar { box-shadow: inset 0 -3px 0 var(--color-warning); }

.mp-vetq-select .mp-vetq-liste { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; max-height: 50vh; overflow: auto; }
.mp-vetq-item {
  text-align: left; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.mp-vetq-item:hover { background: var(--color-surface-muted); border-color: var(--color-accent); }

/* Logo cliquable (retour à l'accueil) : léger retour visuel au survol. */
.brand { transition: opacity .15s ease; }
.brand:hover { opacity: .82; }
.brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   CURSEUR « MAIN » (pointer) sur TOUT élément cliquable — uniformisation.
   Éléments interactifs natifs + classes cliquables + cibles de clic déléguées
   (attributs data-* interceptés par closest() dans app.js).
   ========================================================================== */
button, [role="button"], [role="tab"], [role="link"], [role="menuitem"],
a, label, summary, select,
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="submit"], input[type="button"], input[type="color"],
.clickable, [class*="clickable"], .tab, .subtab, .navmenu-head, .dossub-item,
.seg-btn, .istat, .resp-chip, .gear, .icon-btn, .dos-row-click, .kanban-carte,
[data-aboedit],[data-abononconf],[data-chargeby],[data-clcard],[data-cvmark],[data-del],[data-doscard],[data-dossub],[data-echcheck],[data-echcollab],[data-echdeleg],[data-echdelegclear],[data-echdelegok],[data-echhorizon],[data-echmark],[data-echopen],[data-echscope],[data-echview],[data-edit],[data-etape-act],[data-etape-i],[data-fa-onglet],[data-fact-edit],[data-fiche],[data-filter],[data-fullmess],[data-gmark],[data-goto],[data-greffe-gestion],[data-greffesub],[data-gyear],[data-hcard],[data-imp],[data-imp-filtre],[data-inpidocs],[data-inpiview],[data-istat],[data-liasse-annuler],[data-liasse-envoye],[data-lire],[data-mp-dlg],[data-msgflag],[data-msgs],[data-pal],[data-pan],[data-pers],[data-person],[data-releveone],[data-resp],[data-reste],[data-scope],[data-setstatus],[data-suivi],[data-suiviedit],[data-suivimess],[data-tab],[data-tftest],[data-todo-del],[data-todo-dossier],[data-todo-edit],[data-todo-fav],[data-todo-toggle],[data-todofilter],[data-todoview],[data-togglestatus],[data-tvaclient],[data-tvafilter],[data-ul-pick],[data-unarchive],[data-urssaf-delier],[data-urssaf-lier],[data-urssafcard],[data-urssafview] {
  cursor: pointer;
}
/* Éléments désactivés : pas de main (curseur d'interdiction). */
button:disabled, [disabled], [aria-disabled="true"], .is-disabled, .bs-valider:disabled { cursor: not-allowed; }
/* Champs de saisie texte : conserver le curseur texte. */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], textarea { cursor: text; }

/* ==========================================================================
   THÈME « V2 » — aperçu de la nouvelle interface, DÉMO UNIQUEMENT.
   Porté par body.mp-v2 (posé seulement quand state.status.demo). La production
   n'a jamais cette classe → aucun impact. Poppins + cartes douces + onglets pastilles.
   ========================================================================== */
body.mp-v2 h1, body.mp-v2 h2, body.mp-v2 h3, body.mp-v2 h4,
body.mp-v2 .brand, body.mp-v2 .card .value, body.mp-v2 .card .label,
body.mp-v2 .tabs > .tab, body.mp-v2 .navmenu-head, body.mp-v2 .btn {
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
}
body.mp-v2 h1, body.mp-v2 h2, body.mp-v2 h3 { letter-spacing: -.3px; }

/* En-tête plus aéré, posé sur surface */
body.mp-v2 .topbar { padding: 13px 22px; background: var(--surface); border-bottom: 1px solid var(--taupe-line); }

/* Onglets en PASTILLES (au lieu du soulignement) — le signe le plus visible de la v2 */
body.mp-v2 .tabs { gap: 6px; }
body.mp-v2 .tabs > .tab, body.mp-v2 .navmenu-head {
  border-radius: 999px; border-bottom: 2px solid transparent !important; margin-bottom: 0;
  padding: 9px 16px; font-weight: 500; transition: background .12s, color .12s;
}
body.mp-v2 .tabs > .tab.active, body.mp-v2 .navmenu.active .navmenu-head {
  background: var(--accent-bg); color: var(--accent); border-bottom-color: transparent !important;
}
body.mp-v2 .tabs > .tab:hover, body.mp-v2 .navmenu:hover .navmenu-head,
body.mp-v2 .navmenu:focus-within .navmenu-head, body.mp-v2 .tabs > .tab.active:hover {
  background: var(--accent); color: var(--color-on-accent); border-bottom-color: transparent !important;
}

/* Cartes plus douces et arrondies */
body.mp-v2 .cards { gap: 16px; }
body.mp-v2 .card {
  border-radius: 16px; border: 1px solid var(--taupe-line); background: var(--surface);
  box-shadow: 0 1px 2px rgba(60,60,60,.04), 0 10px 26px -16px rgba(60,60,60,.20); padding: 18px 20px;
}
body.mp-v2 .card .value { font-size: 27px; font-weight: 600; letter-spacing: -.5px; }
body.mp-v2 .card.clickable { transition: transform .1s, box-shadow .12s, border-color .12s; }
body.mp-v2 .card.clickable:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(60,60,60,.05), 0 16px 32px -16px rgba(31,95,169,.30);
}

/* Tableaux, panneaux, modales arrondis */
body.mp-v2 .table-wrap { border-radius: 16px; box-shadow: 0 1px 2px rgba(60,60,60,.04), 0 12px 30px -18px rgba(60,60,60,.18); }
body.mp-v2 .modal { border-radius: 18px; }
body.mp-v2 .navmenu-drop { border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(60,60,60,.28); }

/* Boutons / champs plus doux */
body.mp-v2 .btn { border-radius: 11px; font-weight: 600; }
body.mp-v2 .search, body.mp-v2 .field input:not([type=checkbox]):not([type=radio]),
body.mp-v2 .field select, body.mp-v2 .field textarea { border-radius: 11px; }
body.mp-v2 .icon-btn { border-radius: 10px; }

/* Badge « Mode démo » mis en valeur (pastille bleu clair) */
body.mp-v2 #status.status { background: var(--accent-bg); color: var(--accent); font-weight: 600; padding: 4px 12px; border-radius: 999px; }

/* ===== BARRE LATÉRALE V2 (démo) — body.mp-v2 ============================= */
body.mp-v2 { padding-left: 252px; }
body.mp-v2 .tabbar { display: none !important; }
body.mp-v2 .topbar .brand { display: none; }
body.mp-v2 .v2-burger { display: none; }

body.mp-v2 .v2-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 252px; z-index: 40;
  background: var(--surface); border-right: 1px solid var(--taupe-line);
  display: flex; flex-direction: column;
}
body.mp-v2 .v2-brand { padding: 18px 18px 12px; }
body.mp-v2 .v2-brand img { height: 34px; width: auto; display: block; }
body.mp-v2 .v2-brand span { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 9px; }
body.mp-v2 .v2-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
body.mp-v2 .v2-grp { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 15px 10px 6px; }
body.mp-v2 .v2-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: 13.5px; cursor: pointer; transition: background .12s, color .12s; }
body.mp-v2 .v2-item svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; transition: color .12s; }
body.mp-v2 .v2-item:hover { background: var(--surface-2); color: var(--text); }
body.mp-v2 .v2-item:hover svg { color: var(--text-2); }
body.mp-v2 .v2-item.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
body.mp-v2 .v2-item.on svg { color: var(--accent); }
body.mp-v2 .v2-user { border-top: 1px solid var(--taupe-line); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
body.mp-v2 .v2-av { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: 0 0 auto; }
body.mp-v2 .v2-user b { font-size: 13.5px; }
body.mp-v2 .v2-user small { display: block; color: var(--muted); font-size: 11.5px; }

/* Responsive : la barre latérale devient un panneau coulissant */
@media (max-width: 900px) {
  body.mp-v2 { padding-left: 0; }
  body.mp-v2 .v2-side { transform: translateX(-100%); transition: transform .2s; z-index: 60; box-shadow: 0 14px 40px -12px rgba(60,60,60,.4); }
  body.mp-v2.v2-open .v2-side { transform: none; }
  body.mp-v2.v2-open::before { content: ""; position: fixed; inset: 0; background: rgba(30,27,20,.4); z-index: 55; }
  body.mp-v2 .v2-burger { display: grid; }
}

/* ===== V2 (démo) — finitions : hero d'accueil, badges, masquages ========= */
/* Hero d'accueil : carte arrondie + boussole en filigrane */
body.mp-v2 .home-head {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--taupe-line);
  border-radius: 22px; padding: 24px 28px; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(60,60,60,.04), 0 10px 26px -18px rgba(60,60,60,.18);
}
body.mp-v2 .home-head::after {
  content: ""; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  width: 240px; height: 240px; background: url(/static/boussole_fond_clair.png) center/contain no-repeat;
  opacity: .45; pointer-events: none;
}
body.mp-v2 .home-head > * { position: relative; z-index: 1; }
body.mp-v2 #home-hello { font-family: "Poppins","Segoe UI",sans-serif; font-size: 29px; font-weight: 600; letter-spacing: -.6px; }
body.mp-v2 #home-date { color: var(--taupe-700); font-weight: 500; }

/* Badges de comptage dans la barre latérale */
body.mp-v2 .v2-item .v2-badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; background: var(--accent-bg); color: var(--accent); }
body.mp-v2 .v2-item.on .v2-badge { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Masquer les bandeaux « connexion automatique … à configurer » (pas de creds en démo) */
body.mp-v2 .svc-creds { display: none !important; }

/* Lien « Bac à sable » redondant DANS la démo → masqué */
body.mp-v2 #demo-link { display: none; }