/* ===== Base ===== */
:root {
  --navy: #062259;
  --navy-2: #0d3a8f;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --bg: #f5f7fa;
  --text: #1c2733;
  --muted: #64748b;
  --blue: #0d6efd;
  --lightblue: #7fbfff;
  --brown: #8a5a2b;
  --yellow: #f2c200;
  --red: #dc2626;
  --green: #16a34a;
  --gray: #94a3b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--text); background: var(--bg); font-size: 14px;
  display: flex; flex-direction: column; min-height: 100vh;
}
h1 { font-size: 1.3rem; margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: 0.85rem; }

/* ===== Topbar (charte Spekty — identique integrations) ===== */
.app-header {
  display: flex; align-items: center; gap: 1.5rem;
  background: #1f2c54; border-bottom: 3px solid #3d92d1;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  padding: .7rem 1.4rem; position: sticky; top: 0; z-index: 100;
}
.app-header nav { align-items: center; }
.app-brand { display: flex; align-items: center; gap: .65rem; font-weight: 700; }
.app-brand-logo-img { height: 34px; width: auto; display: block; }
.app-brand-name {
  color: rgba(255,255,255,.9); font-size: .95rem; font-weight: 600;
  padding-left: .65rem; border-left: 1px solid rgba(255,255,255,.28); white-space: nowrap;
}
.app-version { color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 500; margin-left: .15rem; }
.nav { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
.nav-link { padding: 0.4rem 0.7rem; border-radius: 6px; }
.app-header nav a.nav-link { color: #e7ecf6 !important; opacity: .82; font-weight: 500; }
.app-header nav a.nav-link:hover { color: #fff !important; opacity: 1; text-decoration: none; background: rgba(255,255,255,.1); }
.app-header nav a.nav-link.active {
  color: #fff !important; opacity: 1; font-weight: 700; background: transparent;
  text-decoration: underline; text-decoration-color: #3d92d1;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.app-header .logout-link { color: #ffc2c2 !important; }
.app-header .logout-link:hover { color: #fff !important; }
.nav-dropdown { position: relative; }
.nav-dd-toggle {
  background: transparent; border: 0; color: #e7ecf6; opacity: .82; font: inherit; font-weight: 500;
  cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 6px;
}
.nav-dd-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; opacity: 1; }
.nav-dd-menu {
  position: absolute; top: 100%; left: 0; background: #1f2c54;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); padding: 0.3rem; min-width: 210px;
  display: none; z-index: 200;
}
.nav-dropdown:hover .nav-dd-menu, .nav-dropdown.open .nav-dd-menu { display: block; }
.nav-dd-menu .nav-link { display: block; }
/* Menu déroulant sombre (charte integrations) : texte clair, item actif/survol en navy plus clair, sans soulignement. */
.app-header .nav-dd-menu a.nav-link {
  color: #e7ecf6 !important; opacity: .9; font-weight: 500;
  border-radius: 6px; text-decoration: none !important;
}
.app-header .nav-dd-menu a.nav-link:hover,
.app-header .nav-dd-menu a.nav-link.active {
  background: #2e4272; color: #fff !important; opacity: 1;
  font-weight: 500; text-decoration: none !important;
}
.topbar-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
#user-info { font-size: 0.9rem; color: #e7ecf6; }
.link-muted { color: #cdd8ec; font-size: 0.85rem; }
/* Menu profil : ouverture au CLIC uniquement (pas au survol), aligné à droite. */
.user-menu .user-menu-toggle { display: inline-flex; align-items: center; gap: 0.45rem; }
.user-menu .caret { font-size: 0.7rem; opacity: 0.8; }
.user-menu:hover .nav-dd-menu { display: none; }
.user-menu.open .nav-dd-menu { display: block; }
.user-menu .nav-dd-menu { left: auto; right: 0; min-width: 160px; }
/* Présence « qui est connecté » : petits ronds à initiales (légèrement chevauchés). */
.presence { display: inline-flex; align-items: center; }
.presence .presence-dot + .presence-dot { margin-left: -6px; }
.presence-dot {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700;
  color: #fff; border: 2px solid #14213f; box-sizing: border-box; cursor: default;
  text-transform: uppercase; letter-spacing: -0.02em;
}
.presence-dot.me { box-shadow: 0 0 0 2px #7cc4ff; }
.presence-dot.presence-more { background: #46578a !important; }

/* ===== Badges & buttons ===== */
.badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; }
.badge-admin { background: #fff; color: var(--navy); }
.badge-warn { background: var(--yellow); color: #5a4700; }
.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line-2); background: #fff;
  color: var(--text); padding: 0.4rem 0.8rem; border-radius: 7px; font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem;
}
.btn[hidden] { display: none !important; }   /* l'attribut hidden doit primer sur inline-flex */
.btn:hover:not(:disabled) { background: var(--bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover:not(:disabled) { background: var(--navy-2); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover:not(:disabled) { background: #eef2f7; }
.req { color: #d33; font-weight: 700; }   /* astérisque champ obligatoire */
/* Picto « exports prêts » dans l'en-tête (à côté de la clochette). */
.export-indicator { border: 0; background: none; cursor: pointer; color: #fff; position: relative;
  padding: 0.2rem 0.35rem; display: inline-flex; align-items: center; }
.export-indicator[hidden] { display: none; }   /* l'attribut hidden prime sur inline-flex */
.export-indicator svg { width: 20px; height: 20px; }
.export-indicator .exp-badge { position: absolute; top: -3px; right: -3px; background: #1a7f37; color: #fff;
  border-radius: 9px; font-size: 0.62rem; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
  padding: 0 3px; font-weight: 700; border: 1px solid #fff; }
.export-indicator.exp-running { opacity: 0.7; }
.export-indicator.exp-running svg { animation: exp-spin 1.4s linear infinite; }
@keyframes exp-spin { to { transform: rotate(360deg); } }
/* Multi-sélection de colonnes (modale d'export) */
.ms { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.4rem; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 1.5rem; align-items: center; }
.ms-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: #eef2f7; border: 1px solid var(--line-2);
  border-radius: 14px; padding: 0.1rem 0.5rem; font-size: 0.82rem; }
.ms-x { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0; }
.ms-rgpd { background: #fde2e2; color: #b23; border-radius: 4px; font-size: 0.62rem; padding: 0 0.3rem; font-weight: 700; }
.ms-add { position: relative; margin-top: 0.45rem; }
.ms-addbtn { border: 1px dashed var(--line-2); background: none; border-radius: 6px; cursor: pointer;
  padding: 0.22rem 0.6rem; font-size: 0.85rem; color: var(--navy, #062259); }
.ms-menu { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 2px; width: min(380px, 82vw);
  max-height: 42vh; overflow: auto; background: #fff; border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); padding: 0.3rem; }
.ms-search { width: 100%; box-sizing: border-box; padding: 0.3rem 0.5rem; border: 1px solid var(--line-2);
  border-radius: 6px; margin-bottom: 0.3rem; }
.ms-list { display: flex; flex-direction: column; }
.ms-opt { text-align: left; border: 0; background: none; cursor: pointer; padding: 0.32rem 0.4rem; border-radius: 6px; }
.ms-opt:hover { background: #eef2f7; }
/* Bouton icône Historique (⏱) sans contour, comme un simple picto cliquable. */
.hist-btn { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 0.95rem;
  line-height: 1; opacity: 0.6; }
.hist-btn:hover { opacity: 1; }
/* Historique des modifications (audit) */
.aud-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 60vh; overflow-y: auto; margin-top: 0.4rem; }
.aud-entry { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.5rem 0.7rem; }
.aud-head { font-size: 0.9rem; margin-bottom: 0.25rem; }
.aud-chg { font-size: 0.85rem; padding: 0.1rem 0; }
.aud-old { color: #b23; text-decoration: line-through; }
.aud-new { color: #197; font-weight: 600; }
.aud-detail { font-size: 0.85rem; color: var(--muted); font-style: italic; }
/* Guide (documentation fonctionnelle) */
.guide { max-width: 1000px; }
.guide-lede { color: var(--muted); font-size: 1.02rem; margin: 0 0 1.4rem; }
.guide-h2 { font-size: 1.3rem; margin: 1.8rem 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--navy, #0d3a8f); display: inline-block; }
.guide-h3 { font-size: 1.05rem; margin: 1.5rem 0 0.3rem; }
.guide-note { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.5rem; }
.guide-list { margin: 0.5rem 0 1rem; padding-left: 1.2rem; }
.guide-list li { margin: 0.3rem 0; }
.guide-tablewrap { overflow-x: auto; margin: 0.6rem 0 1rem; }
.guide-table { font-size: 0.86rem; }
.guide-table td:nth-child(4) { min-width: 320px; }
.guide-callout { border: 1px solid var(--line); border-left: 3px solid #b5470f; background: #fff; border-radius: 8px; padding: 0.8rem 1rem; margin: 1.2rem 0; font-size: 0.92rem; }
/* Kizeo — paramétrage des formulaires */
.kz-actions { white-space: nowrap; display: flex; gap: 0.3rem; }
.kz-check { display: block; margin: 0.6rem 0; font-size: 0.9rem; }
.kz-maph3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.kz-map-row { display: grid; grid-template-columns: 190px 1fr; gap: 0.6rem; align-items: center; margin: 0.35rem 0; }
.kz-map-row label { font-size: 0.85rem; color: var(--muted); }
.kz-map-row input, .kz-map-row textarea { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--line-2, #cbd3dd); border-radius: 6px; font: inherit; }
.kz-testlist { max-height: 40vh; overflow-y: auto; font-size: 0.85rem; line-height: 1.7; margin-top: 0.5rem; }
/* Tokens API — éditeur (checklist d'endpoints) */
.tok-presets { margin: 0.8rem 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.tok-eps { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.7rem; }
.tok-group { margin: 0.35rem 0 0.7rem; }
.tok-group-h { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.15rem; }
.tok-all { font-size: 0.72rem; border: 0; background: none; color: var(--navy-2, #0d3a8f); cursor: pointer; text-decoration: underline; padding: 0; }
.tok-ep { display: flex; align-items: center; gap: 0.4rem; padding: 0.14rem 0; font-size: 0.85rem; }
.tok-ep code { font-size: 0.8rem; }
.tok-m { font-family: ui-monospace, monospace; font-size: 0.64rem; font-weight: 700; color: #fff; padding: 0.06rem 0.34rem; border-radius: 4px; }
.tok-m-get { background: #1f6feb; } .tok-m-post { background: #1a7f37; }
.tok-m-patch { background: #9a6300; } .tok-m-delete { background: #b3261e; }
.guide-searchwrap { margin: 0 0 1.2rem; }
.guide-search { width: 100%; max-width: 460px; padding: 0.5rem 0.8rem; font-size: 0.95rem; border: 1px solid var(--line-2, #cbd3dd); border-radius: 8px; background: #fff; color: inherit; }
.guide-search:focus { outline: none; border-color: #b5470f; box-shadow: 0 0 0 3px rgba(181,71,15,.12); }
.guide-section { padding-bottom: 0.4rem; }
.guide-section[hidden] { display: none; }
.guide-empty { margin-top: 1rem; }
/* Modale Rapports d'une mission : révisions (Word+PDF groupés + métadonnées) */
.rap-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 62vh; overflow-y: auto; margin: 0.4rem 0 0.6rem; }
.rap-rev { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.5rem 0.7rem; }
.rap-rev-head { margin-bottom: 0.3rem; }
.rap-meta { font-size: 0.85rem; margin-bottom: 0.4rem; }
.rap-rev table.lot-details { margin: 0; }
/* Sélecteur de client (recherche) */
.cp-list { max-height: 45vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 0.3rem; }
.cp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  border: 1px solid transparent; background: none; cursor: pointer; padding: 0.4rem 0.5rem; border-radius: 6px; }
.cp-item:hover { background: #eef2f7; border-color: var(--line-2); }
.cp-rs { font-weight: 600; }
.cp-meta { font-size: 0.78rem; color: var(--muted); }
.field-err { color: #d33; font-size: 0.8rem; margin-top: 0.2rem; }
.input-invalid { border-color: #d33 !important; }
/* Champ « sélecteur » dans une modale d'édition (ex. Client) */
.epick { display: flex; align-items: center; gap: 0.5rem; }
.epick-val { flex: 1; padding: 0.4rem; border: 1px solid var(--line-2); border-radius: 6px; background: #f7f8fa; min-height: 1.15rem; }
.cp-parse { font-size: 0.82rem; margin-top: 0.3rem; padding: 0.35rem 0.5rem; background: #f2f8ff; border-radius: 6px; }
.cp-parse strong { color: var(--text); }
.input-pct { display: inline-flex; align-items: center; gap: 0.35rem; }
.input-pct input { flex: 1; }
.unit-pct { color: var(--muted); font-weight: 600; }
.btn-sm { padding: 0.28rem 0.55rem; font-size: 0.85rem; border-radius: 6px; }
/* Selects « boutonnés » (pagination Lignes, sélecteur de table Colonnes) : même
   hauteur / coins arrondis que les boutons .btn-sm voisins. */
.gv-limit, #colonnes-list {
  box-sizing: border-box; height: 1.7rem; font: inherit; font-size: 0.85rem;
  line-height: 1.2; cursor: pointer; padding: 0 0.5rem;
  border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--text);
}
.btn-danger { color: var(--red); border-color: #f3c2c2; }
/* Petits boutons icône supprimer/annuler : discrets (gris), fonction peu utilisée. */
/* Padding vertical = .btn (0.4rem) → même hauteur que les autres boutons de la barre ;
   horizontal réduit pour rester compact (bouton icône seule). */
.btn-icon-danger { color: var(--muted); border-color: var(--line-2); padding: 0.4rem 0.5rem; font-size: 0.95rem; }
.btn-icon-danger:hover { background: var(--bg); }

/* ===== Pages ===== */
.page-section { padding: 1rem 1.2rem; }
#page-lots, #page-missions { padding: 0.6rem 0.8rem; box-sizing: border-box; }
/* Quand l'onglet Lots / Missions est visible : occupe la hauteur sous l'en-tête et
   laisse la grille prendre l'espace restant (toolbar + en-tête figés, la grille
   défile — barres verticale et horizontale internes à la grille). */
#page-lots:not([hidden]), #page-missions:not([hidden]) { display: flex; flex-direction: column; height: calc(100vh - 60px); }
.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.page-head-actions { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; }
.link-ext { font-size: 0.85rem; }

/* ===== Lots toolbar ===== */
.lots-search {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
/* ⚙ Colonnes + ⟳ dans la barre de recherche : poussés à droite. Sur l'onglet Lots
   uniquement, on réserve 122px à droite pour l'onglet fixe « Synthèses »
   (position:fixed, right:0) — via l'option gridview `toolsReserveRight`. */
.lots-search-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; margin-right: 0; }
/* Bouton « Réinitialiser (config admin) » dans la modale de gestion des colonnes. */
.col-reset-row { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--line-2); }
/* Pictos en tête de cellule Commentaire (Lots) : ⚠️ attention, ↻ relance, € facturation. */
.cmt-ico { margin-right: 3px; }
.cmt-relance { color: var(--blue); }   /* bleu « A facturer » (picto en currentColor) */
.cmt-relance svg { width: 13px; height: 13px; vertical-align: -2px; }
.cmt-euro { color: #e8770c; font-weight: 700; }
/* Cellule Commentaire : crayon d'édition ancré à droite (iso frère). */
.cmt-cell { position: relative; }
.cmt-cell .cmt-wrap { display: block; padding-right: 16px; }
.cmt-edit {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--muted, #6b7280);
  font-size: 0.9rem; line-height: 1; padding: 0 2px; opacity: 0.55;
}
.cmt-edit:hover { opacity: 1; color: var(--navy, #1f2c54); }
/* Modale d'édition du commentaire : boutons « balises » + aide. */
.cmt-tags { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.cmt-help { margin-top: 0.5rem; line-height: 1.9; }
/* Config Colonnes (admin) : teinte des lignes selon la visibilité. */
.data-table tr.col-vis-optional td { background: #f3f4f6; }                 /* optional : gris léger */
.data-table tr.col-vis-hidden td { background: #d9dee6; color: #6b7280; }   /* hidden : gris lourd */
.data-table tr.col-vis-admin td { background: #fdecec; }                    /* admin : rouge léger */
.data-table tr.col-vis-always td { background: #e7f6ee; }                   /* always : vert léger */
/* Modale « Relectures restantes ». */
.relecture-section { margin: 0.7rem 0; }
.relecture-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.relecture-list { margin: 0.35rem 0 0; padding-left: 1.1rem; max-height: 30vh; overflow: auto; }
.relecture-list li { margin: 0.1rem 0; }
.lots-search input {
  flex: 0 1 315px; min-width: 180px; padding: 0.45rem 0.7rem;   /* -1/4 de largeur */
  border: 1px solid var(--line-2); border-radius: 7px; font: inherit;
}
.lots-search input:focus { outline: 2px solid #3d92d1; outline-offset: -1px; }
.lots-toolbar {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap;
  /* Réserve la hauteur d'un bouton même quand la rangée est vide → pas de saut de
     mise en page quand un bouton d'action apparaît (sélection, type…). */
  min-height: 1.95rem;
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.toolbar-right { margin-left: auto; }
/* Tous les boutons d'action de la rangée toolbar (toutes listes) à la même hauteur
   réduite que « Effacer les filtres » / les boutons de Facturation (= .btn-sm).
   Hauteur fixe → boutons texte ET icône seule (Poubelle) strictement identiques. */
.lots-toolbar .btn {
  height: 1.75rem; box-sizing: border-box; padding: 0 0.55rem;
  font-size: 0.85rem; border-radius: 6px;
}
.lots-actions-left { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Boutons PJ par ligne (commande, client…) : translucide si aucune PJ, vert si ≥1 PJ. */
/* Boutons icône des lignes (colonne figée) : sans contour, simples pictos cliquables. */
.fixed-inner .btn { border: 0; background: none; padding: 0 2px; opacity: 0.7; }
.fixed-inner .btn:hover:not(:disabled) { background: none; opacity: 1; }
/* PJ : translucide si absente ; présente = pleine opacité + pastille verte (trombone vert).
   NB : `.fixed-inner .doc-toggle` (0,2,0) doit primer sur `.fixed-inner .btn` (0,2,0) → placé après. */
.fixed-inner .doc-toggle { opacity: 0.4; }
.fixed-inner .doc-toggle.doc-green { opacity: 1; }
.doc-toggle.doc-green { color: #1a7f37; }   /* rapport présent → picto vert */
.fixed-inner .doc-toggle.doc-purple { opacity: 1; }
.doc-toggle.doc-purple { color: #8250df; }  /* synthèse (xlsx) présente → picto violet */
.miss-indiv-ico { color: var(--navy-2, #0d3a8f); font-size: 0.78rem; vertical-align: 1px; }

/* Menu Dump (dans le menu utilisateur) + suivi du dump. */
.user-menu-section { padding: 0.3rem 0.8rem 0.15rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.user-menu-sep { border-top: 1px solid var(--line-2); margin: 0.3rem 0; }
.dump-log { max-height: 50vh; overflow: auto; background: #0f172a; color: #e2e8f0; padding: 0.7rem; border-radius: 8px; font-size: 0.78rem; white-space: pre-wrap; margin: 0.5rem 0; }
.dump-devicecode { background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.dump-code { font-size: 1.1rem; font-weight: 700; background: #1f2937; color: #fff; padding: 0.1rem 0.4rem; border-radius: 5px; letter-spacing: 0.06em; }
.dump-menu { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.dump-menu-item { text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 0.6rem 0.8rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem; }
.dump-menu-item:hover { background: var(--bg); border-color: var(--navy); }
.dump-menu-label { font-weight: 600; }
.dump-menu-desc { font-size: 0.82rem; color: var(--muted); }
.toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }
/* Toggle 3 positions (périmètre des lots) */
.seg3 { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg3[hidden] { display: none; }
.seg-btn {
  font: inherit; font-size: 0.85rem; cursor: pointer; border: 0; background: #fff;
  color: var(--muted); padding: 0.35rem 0.75rem; border-right: 1px solid var(--line);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover:not(.active) { background: var(--bg); }
.seg-btn.active { background: var(--navy); color: #fff; font-weight: 600; }
#selection-count { font-size: 0.85rem; }
.facturation-bar {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  background: #eef3fb; border: 1px solid #d5e0f3; border-radius: 8px;
  padding: 0.4rem 0.6rem; margin-bottom: 0.5rem;
}
.facturation-bar .sep { width: 1px; height: 20px; background: #cbd5e1; margin: 0 0.2rem; }

/* ===== Grille type Excel ===== */
.grid-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; flex: 1 1 auto; min-height: 0; }
table.lots-grid {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: max-content; min-width: 100%;
}
/* Le texte des cellules reste sélectionnable (double-clic pour copier une réf) ;
   seule la sélection de texte au Maj+clic est neutralisée (cf. mousedown en JS). */
table.lots-grid th, table.lots-grid td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0.3rem 0.45rem; text-align: left; vertical-align: top; overflow: hidden;
}
table.lots-grid thead th {
  position: sticky; top: 0; z-index: 3; background: #f1f5f9; font-weight: 600; font-size: 0.82rem;
  white-space: nowrap; user-select: none;
}
.th-inner { display: flex; align-items: center; gap: 0.25rem; }
.th-label { cursor: pointer; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.th-sort { font-size: 0.7rem; color: var(--muted); }
/* Bouton de filtre d'en-tête : puce entonnoir (survol + état actif marqués). */
.th-filter {
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; color: #94a3b8;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.th-filter::before {
    content: ""; display: block; width: 13px; height: 13px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%205h18l-7%208v5l-4%202v-7z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%205h18l-7%208v5l-4%202v-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.th-filter:hover { background: #e8eef6; color: #334155; }
.th-filter.active { background: #dbeafe; color: #0d6efd; box-shadow: inset 0 0 0 1px #93c5fd; }
/* Colonne avec filtre actif : mise en évidence forte de l'en-tête. */
table.lots-grid thead th.th-cell.filtered {
  background: #dbeafe;
  box-shadow: inset 0 -3px 0 #0d6efd;
}
table.lots-grid thead th.th-cell.filtered .th-label { color: #0d3a8f; font-weight: 700; }
.col-resizer {
  position: absolute; right: -3px; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 4;
}
table.lots-grid thead th { position: sticky; }
.th-cell { position: relative; }

/* cellule multi-lignes : 4 lignes max + ellipsis */
.cell-clip {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25; max-height: 5em; word-break: break-word;
}
td.num, th.num { text-align: right; }
/* Dans la grille (table.lots-grid td est plus spécifique que td.num) : forcer l'alignement
   à droite des colonnes numériques / pourcentage / euro. */
table.lots-grid th.num, table.lots-grid td.num { text-align: right; }
table.lots-grid td.num .cell-clip { text-align: right; }
td.cell-red { color: var(--red); font-weight: 600; }
td.cell-green { color: var(--green); font-weight: 600; }

/* Statut coloré comme sa pastille (gras pour la lisibilité). */
.statut-txt { font-weight: 600; }
.statut-txt.c-blue { color: var(--blue); }
.statut-txt.c-lightblue { color: #3d92d1; }
.statut-txt.c-brown { color: var(--brown); }
.statut-txt.c-yellow { color: #b8860b; }
.statut-txt.c-red { color: var(--red); }
.statut-txt.c-gray { color: var(--gray); }
.statut-txt.c-black { color: #111827; }

/* colonne fixe : cases + pastille + alertes */
th.col-fixed, td.col-fixed {
  position: sticky; left: 0; z-index: 2; background: #fff; white-space: nowrap;
  border-right: 1px solid var(--line-2);
}
table.lots-grid thead th.col-fixed { z-index: 5; background: #f1f5f9; }
/* 1re colonne de données figée (juste après la marge, largeur fixe 118px). */
table.lots-grid th.col-frozen, table.lots-grid td.col-frozen {
  position: sticky; left: var(--gv-frozen-left, 118px); z-index: 2; background: #fff; border-right: 1px solid var(--line-2);
}
table.lots-grid thead th.col-frozen { z-index: 4; background: #f1f5f9; }
tr.lot-row.selected td.col-frozen { background: #dbeafe !important; }
tr.lot-row:hover td.col-frozen { background: #f8fafc; }
/* Ombre de défilement : apparaît uniquement quand la grille n'est plus tout à gauche,
   pour matérialiser la séparation colonne(s) figée(s) / colonnes défilantes. */
.grid-wrap.scrolled-x table.lots-grid th.col-frozen,
.grid-wrap.scrolled-x table.lots-grid td.col-frozen {
  box-shadow: 8px 0 8px -6px rgba(15, 23, 42, 0.22);
}
.fixed-inner { display: flex; align-items: center; gap: 0.35rem; width: max-content; }
/* Colonne figée (cases + pictos) : padding horizontal réduit → pas d'espace superflu à droite. */
th.col-fixed, td.col-fixed { padding-left: 6px; padding-right: 4px; }
/* Colonne tampon (dernière) : absorbe l'espace en trop sur écran large → les autres
   colonnes (dont la figée) gardent leur largeur exacte. */
table.lots-grid th.col-filler, table.lots-grid td.col-filler { border-right: 0; padding: 0; }
.pastille { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.pastille.blue { background: var(--blue); }
.pastille.lightblue { background: var(--lightblue); }
.pastille.brown { background: var(--brown); }
.pastille.yellow { background: var(--yellow); }
.pastille.red { background: var(--red); }
.pastille.gray { background: var(--gray); }
.pastille.black { background: #111827; }
/* Couleurs supplémentaires « Missions indiv » */
.pastille.beige { background: #d9c9a3; }
.pastille.green { background: #2e9e5b; }
.pastille.purple { background: #8b5cf6; }
.pastille.orange { background: #e8770c; }
.statut-txt.c-beige { color: #9c854e; }
.statut-txt.c-green { color: #2e9e5b; }
.statut-txt.c-purple { color: #7c3aed; }
.statut-txt.c-orange { color: #e8770c; }
.alert-ico { font-size: 0.95rem; line-height: 1; cursor: default; }
/* Grille Missions indiv */
.miss-title { font-size: 1.2rem; margin: 0; }
.miss-grid { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; table-layout: fixed; width: max-content; min-width: 100%; }
.miss-grid th, .miss-grid td { padding: 0.3rem 0.45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow: hidden; }
.miss-grid thead th { position: sticky; top: 0; background: #f1f5f9; z-index: 2; font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.miss-grid th.num, .miss-grid td.num { text-align: right; }
.miss-grid tr:hover td { background: #f8fafc; }
.miss-grid tbody tr.miss-row { cursor: pointer; }
.miss-grid tbody tr.miss-row.selected td { background: #dbeafe !important; }
.miss-past { text-align: center !important; padding-right: 0 !important; }
.miss-grid th.miss-chk, .miss-grid td.miss-chk { text-align: center; padding-right: 0; }
/* Colonnes figées (freeze panes) : marge (case + pastille) + 1re colonne de données. */
.miss-grid td.miss-chk, .miss-grid td.miss-past, .miss-grid td.miss-frozen { position: sticky; z-index: 1; background: #fff; }
.miss-grid td.miss-chk { left: 0; }
.miss-grid td.miss-past { left: 30px; }
.miss-grid thead th.miss-chk, .miss-grid thead th.miss-past, .miss-grid thead th.miss-frozen { position: sticky; z-index: 3; background: #f1f5f9; }
.miss-grid thead th.miss-chk { left: 0; }
.miss-grid thead th.miss-past { left: 30px; }
.miss-grid tr:hover td.miss-chk, .miss-grid tr:hover td.miss-past, .miss-grid tr:hover td.miss-frozen { background: #f8fafc; }
.miss-grid tbody tr.miss-row.selected td.miss-chk, .miss-grid tbody tr.miss-row.selected td.miss-past, .miss-grid tbody tr.miss-row.selected td.miss-frozen { background: #dbeafe !important; }
/* Ombre de défilement (voir grille des lots) sur la 1re colonne de données figée. */
.grid-wrap.scrolled-x .miss-grid th.miss-frozen,
.grid-wrap.scrolled-x .miss-grid td.miss-frozen {
  box-shadow: 8px 0 8px -6px rgba(15, 23, 42, 0.22);
}
#miss-btn-afacturer.active { background: var(--navy, #1f2c54); color: #fff; }
/* Pictogrammes monochromes en trait : héritent de la couleur du texte (sans couleur propre). */
.ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; flex: none; }
.btn .ico { margin-right: 4px; }
.btn-icon-danger .ico { margin-right: 0; }
#miss-fact-actions, #miss-tab-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
#miss-tab-actions { margin-left: 0.4rem; }
/* Modale facturation Calo : message multi-ligne lisible. */
.calo-msg { white-space: pre-wrap; word-break: break-word; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.4rem 0 0.2rem; font-size: 0.95rem; line-height: 1.45; font-family: inherit; }
.rg-doc-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
/* Picto entonnoir devant les boutons qui appliquent un filtre */
.has-filter-ico::before {
    content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%205h18l-7%208v5l-4%202v-7z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%205h18l-7%208v5l-4%202v-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

tr.lot-row { cursor: pointer; }
tr.lot-row:hover td { background: #f8fafc; }
tr.lot-row.selected td { background: #dbeafe !important; }
tr.lot-row.selected td.col-fixed { background: #dbeafe !important; }
.row-check { cursor: pointer; }
.pencil-btn { background: none; border: 0; cursor: pointer; font-size: 0.85rem; padding: 0 2px; color: var(--muted); }
.pencil-btn:hover { color: var(--navy); }

.empty-state { padding: 2rem; text-align: center; color: var(--muted); }

/* ===== Filtre dropdown ===== */
.filter-pop {
  position: absolute; z-index: 500; background: #fff; border: 1px solid var(--line-2);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 0.5rem; width: 240px;
}
.filter-pop input[type=text] { width: 100%; padding: 0.3rem; border: 1px solid var(--line-2); border-radius: 6px; margin-bottom: 0.4rem; }
.filter-list { max-height: 220px; overflow: auto; }
.filter-list label { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; font-size: 0.85rem; }
.filter-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
/* Bouton « Filtre numérique… » : poussé à gauche, séparé d'« Appliquer ». */
.filter-actions [data-act=numeric] { margin-right: auto; }
/* Filtre façon Excel : « (Sélectionner tout) » + « Ajouter la sélection actuelle ». */
.filter-all-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; font-size: 0.85rem; font-weight: 600; border-bottom: 1px solid var(--line-2); margin-bottom: 0.25rem; }
.filter-add { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.8rem; color: var(--muted); }
/* Filtre date « plage du… au… » / filtre numérique par critère. */
.filter-daterange, .filter-numcrit { display: flex; flex-direction: column; gap: 0.45rem; }
.filter-daterange label, .filter-numcrit label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.filter-daterange input, .filter-numcrit input, .filter-numcrit select { padding: 0.3rem; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }

/* ===== Tables génériques (admin/fiches) ===== */
table.data-table { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table.data-table th, table.data-table td { border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; font-size: 0.88rem; }
table.data-table thead th { background: #f1f5f9; font-weight: 600; }
table.data-table tr:hover td { background: #e9f2fe; }   /* survol : bleu pâle (prime sur les teintes de visibilité) */
table.data-table input[type=text], table.data-table input[type=number], table.data-table select {
  padding: 0.25rem; border: 1px solid var(--line-2); border-radius: 5px; font: inherit;
}

/* ===== Settings form ===== */
.settings-form { max-width: 640px; display: flex; flex-direction: column; gap: 1rem; }
.settings-form .field { display: flex; flex-direction: column; gap: 0.25rem; }
.settings-form label { font-weight: 600; font-size: 0.9rem; }
.settings-form input { padding: 0.45rem; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; }
.settings-form .hint { font-size: 0.8rem; color: var(--muted); }
.tag-ok { color: var(--green); font-weight: 600; }
.tag-ko { color: var(--muted); }

/* ===== Modales ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 1000;
  display: grid; place-items: center;
}
.modal-box { background: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; width: min(560px, 92vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
/* Uniquement les modales à en-tête/pied figés (construites via modal.build, qui
   enveloppe le contenu dans .modal-body) : mise en page flex, padding porté par le corps. */
.modal-box:has(> .modal-body) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
/* Corps défilant entre un titre figé en haut et un pied figé en bas. */
.modal-body { flex: 1 1 auto; overflow-y: auto; padding: 0 1.4rem 1.2rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; flex: 0 0 auto; padding: 0.8rem 1.4rem; border-top: 1px solid #e5e7eb; background: #fff; }
.modal-error { margin-top: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 7px; background: #f8d7da; color: #842029; font-size: 0.9rem; font-weight: 500; }
.modal-input { width: 100%; padding: 0.5rem; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; margin-top: 0.4rem; }
.modal-box h2 { font-size: 1.1rem; margin: 0 -1.4rem 0.8rem; padding: 1rem 1.4rem 0.6rem; position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid #eef2f7; }
.infos-tools { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.infos-tools .btn { justify-content: flex-start; text-align: left; }
.cumul-table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.cumul-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line-2); }
.cumul-table td:last-child { text-align: right; white-space: nowrap; }
.cumul-table tr:last-child td { border-bottom: none; }
/* Fiche lecture seule d'un lot (double-clic) */
.lot-details-box { position: relative; max-width: 620px; }
.modal-close-x { position: absolute; top: 0.5rem; right: 0.6rem; z-index: 5; border: none; background: transparent;
    font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0.2rem 0.35rem; border-radius: 6px; }
.modal-close-x:hover { color: #b02a37; background: #f1f5f9; }
.lot-details-wrap { max-height: 62vh; overflow: auto; margin-top: 0.5rem; }
.lot-details { width: 100%; border-collapse: collapse; }
.lot-details th { text-align: left; padding: 0.35rem 0.6rem; color: var(--muted); font-weight: 600;
    vertical-align: top; width: 42%; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.lot-details td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line-2); word-break: break-word; }
.lot-details tr:last-child th, .lot-details tr:last-child td { border-bottom: none; }
/* Picto ⓘ devant le client + modale de commentaire client */
.client-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    margin-right: 5px; border-radius: 50%; background: #1c2733; color: #fff; font: italic 700 10px/1 Georgia, "Times New Roman", serif;
    cursor: pointer; vertical-align: middle; flex: 0 0 auto; user-select: none; }
.client-info:hover { background: #3d92d1; }
.client-comment { margin-top: 0.5rem; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
/* Colonne Facture : « Pas de facture » (valeur 0 / 00000) en gris léger */
.fact-empty { color: #aab2bd; font-style: italic; }
/* Modale Facturation */
.fa-box { max-width: 720px; position: relative; }
.fa-head { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.fa-lbl { color: var(--muted); font-weight: 600; margin-right: 0.3rem; }
.fa-fiche { font-size: 1.6rem; font-weight: 800; margin: 0.4rem 0; letter-spacing: 0.5px; }
.fa-fiche-divers { color: #e8770c; }
.fa-divers-btns { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.fa-orange { background: #e8770c; color: #fff; border-color: #e8770c; }
.fa-comment { margin: 0.4rem 0; padding: 0.45rem 0.6rem; background: #f1f5f9; border-radius: 7px; white-space: pre-wrap; word-break: break-word; }
.fa-comment-red { color: #b02a37; font-weight: 700; background: #fbe9ea; }
.fa-premium { color: #e8770c; font-weight: 700; }
.fa-meta { margin: 0.4rem 0 0.7rem; }
.fa-table { width: 100%; border-collapse: collapse; margin-top: 0.3rem; }
.fa-table th, .fa-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line-2); text-align: left; }
.fa-table th.num, .fa-table td.num { text-align: right; white-space: nowrap; }
.fa-table th { color: var(--muted); font-weight: 600; }
.fa-total td { font-weight: 800; border-top: 2px solid var(--line-2); border-bottom: none; }
.fa-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.fa-spacer { flex: 1; }
.fa-tabs { display: flex; gap: 0.3rem; margin: 0.4rem 0 0; flex-wrap: wrap; }
.fa-tab { border: 1px solid var(--line-2); background: #fff; padding: 0.3rem 0.7rem; border-radius: 7px 7px 0 0; cursor: pointer; font: inherit; }
.fa-tab.active { background: #1f2c54; color: #fff; border-color: #1f2c54; }
.fa-details-txt { width: 100%; height: 45vh; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.85rem; padding: 0.6rem; border: 1px solid var(--line-2); border-radius: 0 7px 7px 7px; resize: vertical; box-sizing: border-box; }
.fa-proforma { display: block; margin: 0.7rem 0 0.2rem; font-weight: 600; }
.fa-numrow { display: flex; gap: 0.4rem; align-items: center; }
.fa-numrow input { flex: 1; min-width: 0; padding: 0.45rem; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; }
.fa-proforma-btn { margin: 0.3rem 0; }
.modal-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; }
.modal-field label { font-weight: 600; font-size: 0.85rem; }
.modal-field input, .modal-field select, .modal-field textarea { padding: 0.4rem; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }
.modal-field label.rl { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; margin-right: 1.2rem; }
.modal-field label.rl input { padding: 0; }
.rl-date { font-weight: 600; font-size: 1.05rem; color: var(--navy); padding: 0.2rem 0; }
.pole-check-list { display: flex; flex-direction: column; gap: 0.2rem; max-height: 200px; overflow: auto; border: 1px solid var(--line-2); border-radius: 6px; padding: 0.45rem; }
.pole-check-list label { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; font-size: 0.9rem; }

/* ===== Génération synthèses : bandeau + volet ===== */
.synth-banner {
  position: fixed; right: 0; bottom: 0; z-index: 1500;
  background: #1f2c54; color: #fff; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.9rem;
  border-top-left-radius: 8px; box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
  display: flex; align-items: center; gap: 0.5rem;
}
.synth-banner .spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.synth-panel {
  position: fixed; top: 60px; right: 0; width: 350px; max-width: 92vw; height: calc(100vh - 60px);
  background: #fff; border-left: 1px solid var(--line); box-shadow: -6px 0 18px rgba(0,0,0,0.12);
  z-index: 1400; display: flex; flex-direction: column;
}
.synth-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); background: #f1f5f9;
}
.synth-head-actions { display: flex; align-items: center; gap: 0.4rem; }
.synth-panel-head #synth-panel-close,
.synth-panel-head #factu-panel-close { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); }
.synth-panel-head #synth-panel-close:hover,
.synth-panel-head #factu-panel-close:hover { color: var(--text); }
#synth-list { overflow: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.synth-item { border: 1px solid var(--line); border-left: 4px solid var(--gray); border-radius: 7px; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.synth-item.ok { border-left-color: var(--green); }
.synth-item.err { border-left-color: var(--red); }
.synth-item .ref { font-weight: 700; font-family: ui-monospace, monospace; word-break: break-all; }
.synth-item .st { color: var(--muted); margin-top: 0.15rem; }
.synth-item .msg-err { color: var(--red); margin-top: 0.25rem; }
.synth-item .msg-warn { color: #856404; margin-top: 0.25rem; }
.synth-item .row-b { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35rem; }
.btn-validate { background: var(--yellow); border-color: #d9ae00; color: #5a4700; font-weight: 700; }
.btn-validate:hover { background: #e6b800; }
.synth-item .tm { color: var(--muted); font-size: 0.75rem; }
.synth-reopen {
  /* z-index < volets (1400) : les onglets flottants passent DERRIÈRE les volets
     (les volets restent au premier plan). */
  position: fixed; right: 0; top: 68px; z-index: 1390;
  background: #1f2c54; color: #fff; border: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
  padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.85rem; box-shadow: -3px 0 10px rgba(0,0,0,0.2);
}
#synth-list, .synth-list { overflow: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.synth-item.warn { border-left-color: var(--yellow); }
.synth-item .msg { margin-top: 0.25rem; }
.synth-item .row-links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
/* L'attribut `hidden` doit l'emporter sur les display: flex ci-dessus. */
.synth-panel[hidden], .synth-banner[hidden], .synth-reopen[hidden],
.factu-panel[hidden], .factu-banner[hidden], .factu-reopen[hidden] { display: none !important; }

/* Volet Facturation auto : même gabarit que Synthèses, décalé pour coexister.
   - bandeau en bas À GAUCHE (Synthèses est en bas à droite) ;
   - onglet flottant « Factu auto » attaché au bord droit (comme Synthèses), dont
     la position verticale (top) est alignée sur le bloc Facturation via JS ;
   - quand le volet Synthèses est ouvert (body.synth-open), le volet factu se
     décale à gauche de 358px pour ne pas le recouvrir. */
.factu-banner { right: auto; left: 0; border-top-left-radius: 0; border-top-right-radius: 8px; background: #155e75; }
.factu-panel { right: 0; }
body.synth-open .factu-panel { right: 358px; }
/* z-index < volet Synthèses (1400) : l'onglet Factu auto passe DERRIÈRE le volet
   Synthèses quand celui-ci est ouvert (il ne le recouvre pas). */
.factu-reopen { top: 112px; background: #155e75; z-index: 1390; }
/* Toggle admin « Tous les utilisateurs » dans l'en-tête des volets. */
.job-all { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.job-all[hidden] { display: none !important; }
.synth-item .st { color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; }

/* ===== Loader ===== */
.loader-box {
  background: #fff; border-radius: 12px; padding: 1.4rem 1.8rem;
  display: flex; align-items: center; gap: 1rem; font-weight: 500;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: spin 1s linear infinite; }

/* ===== Modale mail de relance ===== */
.mail-head {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: #f1f5f9; border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.8rem; font-size: 0.9rem;
}
.mail-head .mh-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mail-head .mh-lbl { color: var(--muted); min-width: 60px; }
.mail-head code { background: #fff; border: 1px solid var(--line-2); padding: 0.15rem 0.4rem; border-radius: 5px; }
.rt-toolbar {
  display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap;
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 7px 7px 0 0;
  padding: 0.35rem; background: #fafbfc; margin-top: 0.25rem;
}
.rt-toolbar button { border: 1px solid transparent; background: none; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 5px; font-size: 0.9rem; color: var(--text); min-width: 30px; }
.rt-toolbar button:hover { background: #eef2f7; }
.rt-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 0.2rem; }
.rt-editor { border: 1px solid var(--line-2); border-radius: 0 0 7px 7px; min-height: 170px; max-height: 40vh; overflow: auto; padding: 0.6rem; background: #fff; }
.rt-editor:focus { outline: 2px solid #3d92d1; outline-offset: -2px; }

/* ===== Toast ===== */
.flash-toast {
  position: fixed; top: 1rem; right: 1rem; z-index: 3000; padding: 0.7rem 1.1rem;
  border-radius: 8px; font-weight: 500; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  max-width: 460px; cursor: pointer; transition: opacity 0.3s;
}

/* ===== Login ===== */
.login-card { max-width: 420px; margin: 12vh auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2rem; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.login-card h1 { margin-bottom: 0.5rem; }

/* ===== Guide ===== */
.guide { max-width: 860px; }
/* Barre de recherche du Guide. */
.guide-search { max-width: 860px; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.guide-search input { flex: 1; padding: 0.45rem 0.7rem; border: 1px solid var(--line-2); border-radius: 8px; font-size: 0.9rem; }
/* Pavés distincts (cartes). */
.guide-section {
    border: 1px solid #e3e8ef; border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 0.8rem;
    background: #fff; box-shadow: 0 1px 3px rgba(15,35,80,0.06);
}
.guide-section[open] { box-shadow: 0 2px 10px rgba(15,35,80,0.09); }
.guide-section summary {
    font-weight: 700; cursor: pointer; color: #062259; font-size: 1.02rem;
    list-style: none; display: flex; align-items: center; gap: 0.45rem;
}
.guide-section summary::before { content: "▸"; color: #6b7a99; font-size: 0.9rem; transition: transform .15s; }
.guide-section[open] summary::before { transform: rotate(90deg); }
.guide-section summary::-webkit-details-marker { display: none; }
.guide-section ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.guide-section li { margin: 0.25rem 0; }
.guide-section p { margin: 0.4rem 0; }

/* ===== Alertes (rapports à relire) : cloche + modale + formulaire ===== */
.alert-bell {
  position: relative; background: none; border: 0; cursor: pointer; color: #e7ecf6;
  opacity: 0.9; padding: 0.2rem; display: inline-flex; align-items: center; border-radius: 6px;
}
.alert-bell:hover { background: rgba(255,255,255,0.12); color: #fff; opacity: 1; }
.alert-bell .ico { width: 20px; height: 20px; }
.alert-bell[hidden] { display: none !important; }
.alert-bell-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--red, #d33); color: #fff; font-size: 0.65rem; line-height: 16px; text-align: center;
  border-radius: 8px; font-weight: 700;
}
.alert-bell-badge[hidden] { display: none !important; }
.alert-block { border: 1px solid var(--line); border-left: 4px solid #1f2c54; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.6rem 0; }
.alert-title { font-weight: 700; }
.alert-subtitle { color: var(--muted); font-size: 0.9rem; margin: 0.1rem 0 0.4rem; }
.alert-content .alert-count { margin: 0.2rem 0; }
.alert-lines { margin: 0.2rem 0; padding-left: 1.2rem; }
.alert-lines li { margin: 0.15rem 0; }
.alert-grp { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.8rem; margin: 0.6rem 0; }
.alert-grp legend { font-weight: 600; padding: 0 0.4rem; }
.alert-grp[hidden] { display: none !important; }

/* Saisie multi-valeurs en « chips » (alertes : clients / codes prestation / reference_site). */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; cursor: text;
  border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; min-height: 34px; background: #fff;
}
.chip-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.chip-input .chip {
  display: inline-flex; align-items: center; gap: 3px; background: #eef2f7;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 1px 9px 1px 5px; font-size: 0.82rem;
}
.chip-input .chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.95rem; line-height: 1; padding: 0; }
.chip-input .chip-x:hover { color: var(--red); }
.chip-input .chip-input-field { border: 0; outline: none; flex: 1; min-width: 90px; font: inherit; padding: 2px; background: transparent; }

/* Cloche : au-delà de 99, on affiche un simple point rouge (sans nombre). */
.alert-bell-badge.dot { min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; top: 0; right: 0; }

/* ===== Messages / annonces ===== */
/* Éditeur texte enrichi */
.rich-editor { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem; background: #f1f5f9; border-bottom: 1px solid var(--line); align-items: center; }
.rich-toolbar button, .rich-toolbar select { font: inherit; cursor: pointer; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 0.2rem 0.5rem; }
.rich-color { display: inline-flex; align-items: center; gap: 0.2rem; border: 1px solid var(--line-2); border-radius: 6px; padding: 0.1rem 0.35rem; background: #fff; font-weight: 700; }
.rich-color input[type=color] { width: 22px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; }
.rich-area { min-height: 160px; max-height: 45vh; overflow: auto; padding: 0.6rem 0.7rem; outline: none; }
.rich-area img { max-width: 100%; height: auto; }
.rich-hint { padding: 0.3rem 0.6rem; background: #f8fafc; border-top: 1px solid var(--line); }
/* Aperçu message (table admin) */
.msg-preview { max-width: 380px; max-height: 60px; overflow: hidden; }
.msg-preview img { max-height: 40px; width: auto; vertical-align: middle; }
/* Modale messages */
.msg-item { border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; }
.msg-item.unread { border-left: 4px solid var(--blue); background: #f2f8ff; }
.msg-item-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; }
.msg-new { background: var(--blue); color: #fff; border-radius: 4px; padding: 0.05rem 0.35rem; font-weight: 700; font-size: 0.7rem; }
.msg-body img { max-width: 100%; height: auto; }

/* ============================================================================
   OVERRIDE Pilotage CEE (BDD) : header en ORANGE FONCÉ — SEULE différence de
   charte vs l'outil SharePoint actuel (le reste garde la charte navy/bleu).
   ============================================================================ */
.app-header { background: #b5470f; border-bottom-color: #e0761b; }
.app-header nav a.nav-link.active { text-decoration-color: #e0761b; }
.nav-dropdown .nav-dd-menu { background: #8f3809; }
.app-header .nav-dd-menu a.nav-link:hover,
.app-header .nav-dd-menu a.nav-link.active { background: #a84410; }

/* ===== Cloches de notification (messages / alertes spécifiques / rapports) ===== */
.alert-bell {
  position: relative; background: none; border: 0; cursor: pointer; color: #fff;
  opacity: 0.9; padding: 0.2rem; display: inline-flex; align-items: center; border-radius: 6px;
}
.alert-bell:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.alert-bell .ico { width: 20px; height: 20px; }
.alert-bell[hidden] { display: none !important; }
#warn-bell { color: #ffe08a; }              /* teinte warning (panneau) */
.alert-bell-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--red); color: #fff; font-size: 0.65rem; line-height: 16px; text-align: center;
  border-radius: 8px; font-weight: 700;
}
.alert-bell-badge[hidden] { display: none !important; }
.alert-bell-badge.dot { min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; top: 0; right: 0; }

/* Modale rapports à relire */
.alert-block { border: 1px solid var(--line); border-left: 4px solid #b5470f; border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0.6rem 0; }
.alert-title { font-weight: 700; }
.alert-subtitle { color: var(--muted); font-size: 0.9rem; margin: 0.1rem 0 0.4rem; }
.alert-content .alert-count { margin: 0.2rem 0; }
.alert-lines { margin: 0.2rem 0; padding-left: 1.2rem; }
.alert-lines li { margin: 0.15rem 0; }

/* Modale messages */
.msg-item { border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; }
.msg-item.unread { border-left: 4px solid var(--blue); background: #f2f8ff; }
.msg-item-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; }
.msg-new { background: var(--blue); color: #fff; border-radius: 4px; padding: 0.05rem 0.35rem; font-weight: 700; font-size: 0.7rem; }
.msg-body img { max-width: 100%; height: auto; }
.msg-err { color: var(--red); }

/* Modale alertes spécifiques */
.spec-alert-block {
  position: relative; border: 1px solid var(--line); border-left: 4px solid #e0a800;
  border-radius: 8px; padding: 0.6rem 2.2rem 0.6rem 0.8rem; margin: 0.6rem 0; background: #fffdf5;
}
.spec-scope { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.05rem 0.4rem; border-radius: 10px; margin-bottom: 0.3rem; }
.spec-scope.spec-coll { background: #fde7c9; color: #8a4b00; }
.spec-scope.spec-indiv { background: #e6eefb; color: #14468a; }
.spec-alert-title { font-weight: 700; margin-bottom: 0.15rem; }
.spec-alert-text { white-space: normal; margin: 0.15rem 0 0.5rem; line-height: 1.4; }
.spec-alert-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.spec-btn { padding: 0.15rem 0.7rem; }
.spec-trash {
  position: absolute; top: 0.5rem; right: 0.5rem; border: 0; background: none; cursor: pointer;
  color: var(--muted); padding: 0.15rem; border-radius: 6px; display: inline-flex;
}
.spec-trash:hover { color: var(--red); background: #fbeaea; }
.spec-trash .ico { width: 17px; height: 17px; }
.info-i { display: inline-block; cursor: help; color: var(--muted); font-size: 0.85em; margin-left: 0.2rem; }
.info-i:hover { color: var(--blue); }

/* Somme au survol de l'en-tete des colonnes nombre/euro (page affichee) */
.th-sumable { cursor: help; }
.col-sum-pop {
  position: fixed; z-index: 1600; background: #1f2c54; color: #fff;
  border-radius: 6px; padding: 0.35rem 0.55rem; font-size: 0.8rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28); pointer-events: none; max-width: 60vw;
}
.col-sum-pop[hidden] { display: none; }
.col-sum-pop .cs-row { display: flex; gap: 1rem; justify-content: space-between; white-space: nowrap; }
.col-sum-pop .cs-row span { opacity: 0.8; }
.col-sum-pop .cs-note { margin-top: 0.25rem; opacity: 0.7; font-size: 0.72rem; font-style: italic; white-space: nowrap; }

/* Tarifs CPC speciaux : bouton sous le champ dans la modale client */
.cpc-btn-row { margin-top: 0.35rem; }
.cpc-cell-btn { font-size: 0.72rem; }