/* ===== 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; }
/* L'attribut `hidden` PRIME TOUJOURS. Sans cette règle, tout style qui pose un `display`
   (ex. `.nav-dd-menu .nav-link { display: block }`) le rend inopérant : les menus réservés aux
   admins / gestionnaires s'affichaient chez tout le monde. Une seule règle, pour tous les écrans. */
[hidden] { display: none !important; }
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; }

/* ===== Plans d'affichage (z-index), du fond vers l'avant =====
   onglets des volets 1390 < volets Synthèses / Factu auto 1400 < leurs bandeaux 1500
   < en-tête 1450… (sans chevauchement avec les volets, qui commencent sous lui ; ses menus
   déroulants, eux, passent devant) < modales 2000 < menus et popups (filtres, favoris,
   colonnes, sommes) 2100 < notifications 3000 < écran d'authentification 4000. */
/* ===== Topbar (charte Spekty — identique integrations) =====
   HAUTEUR : 60 px exactement, bordure basse (3 px) comprise — box-sizing: border-box. La
   mise en page en dépend : pages en calc(100vh - 60px), volets latéraux à top: 60px.
   Trois colonnes : logo à gauche, menu CENTRÉ sur la barre, outils à droite (les deux
   colonnes latérales ont la même largeur, d'où un centrage vrai, pas « dans l'espace
   restant »). */
.app-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  height: 60px; flex: 0 0 auto;   /* jamais rétrécie : body est une colonne flex, et une page longue (Guide) l’écrasait */
  background: #1f2c54; border-bottom: 3px solid #3d92d1;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  padding: 0 1.4rem; position: sticky; top: 0; z-index: 1450;
}
.app-header > .app-brand { justify-self: start; }
.app-header > .topbar-right { justify-self: end; }
.app-header nav { align-items: center; justify-content: 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; }
.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; }
/* Detail des factures : picto document AVEC un €, sans contour ni fond — c'est un
   signe cliquable dans la cellule, pas un bouton de barre d'outils. */
.doc-facture {
  border: 0; background: none; padding: 0; margin-left: .3rem; cursor: pointer;
  color: var(--navy-2, #0d3a8f); vertical-align: -3px; line-height: 0;
}
.doc-facture:hover { color: #b5470f; }
.doc-facture .ico { width: 16px; height: 16px; }
/* Les libelles courts (« En vigueur », une date) ne doivent pas se casser lettre a
   lettre : la modale est etroite, c'est au tableau de s'adapter, pas au texte. */
.fm-table { width: 100%; }
.fm-table th, .fm-table td { white-space: nowrap; }
.fm-table td:last-child, .fm-table th:last-child { width: 1%; text-align: right; }
.fm-annulee td { opacity: .55; text-decoration: line-through; }
.fm-annulee td:last-child { text-decoration: none; }

.fd-manque { color: #7a3a04; }

/* Alerte specifique : date de creation, entre le flag de portee et la corbeille. */
.spec-date { position: absolute; top: .55rem; right: 2.6rem; font-size: .78rem;
  color: var(--muted); white-space: nowrap; }

/* Avoir et refacturation : numeros et dates sur deux colonnes. */
.ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
@media (max-width: 560px) { .ar-grid { grid-template-columns: 1fr; } }

/* Menu Dump : carte d'import des dates de facture (export Dataverse). */
.dump-import { margin: .9rem .2rem .2rem; padding: .7rem .8rem; border: 1px solid var(--line-2, #cbd3dd);
  border-radius: 10px; background: #f7f9fc; }
.dump-import-row { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .4rem; flex-wrap: wrap; }
.dump-import-row input[type=file] { flex: 1; min-width: 200px; font-size: .85rem; }
.dump-import-state { font-size: .84rem; }

/* Guide : sommaire + regroupement par theme (le guide depassait 20 sections a plat). */
.guide-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; }
.guide-toc-link { display: inline-block; padding: .3rem .7rem; font-size: .88rem; text-decoration: none;
  color: var(--navy, #0d3a8f); background: #eef2f8; border: 1px solid var(--line-2, #cbd3dd); border-radius: 999px; }
.guide-toc-link:hover { background: #e2e9f4; }
.guide-group { margin: 0 0 2.4rem; scroll-margin-top: 1rem; }
.guide-group-title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 2.2rem 0 .2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-2, #cbd3dd); }
.guide-badge { text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 600;
  color: #7a3a04; background: #fdebd6; border: 1px solid #f0c391; border-radius: 999px; padding: .1rem .5rem;
  vertical-align: middle; margin-left: .4rem; }
.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;
  /* NE PAS RÉTRÉCIR. La page est une colonne flex de hauteur fixe : sans cela, une rangée
     qui passe à deux lignes est comprimée jusqu'à son `min-height`, et la seconde ligne
     (les bascules de périmètre) disparaît sous le bandeau de facturation. C'est la grille,
     et elle seule, qui absorbe la hauteur restante. */
  flex: 0 0 auto;
}
.lots-search, .facturation-bar { flex: 0 0 auto; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
/* Les bascules de périmètre s'empilent plutôt que de sortir de la rangée. */
.toolbar-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.35rem; }
/* 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; }
/* Séparateur vertical entre deux groupes de boutons de la barre d'outils. */
.tb-sep { display: inline-block; width: 1px; height: 22px; background: var(--line-2); margin: 0 0.15rem; }
/* 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-item:disabled { opacity: .45; cursor: not-allowed; background: #fff; border-color: var(--line-2); }
.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; }
/* Tokens API : dernière utilisation d'un endpoint. */
.tok-used { font-size: 0.78rem; color: #1a7f37; white-space: nowrap; }
.tok-used.tok-never { color: var(--muted); }
/* Prise de RdV : un élément par ligne (plus récent en haut), 3 lignes visibles dans la grille. */
.cell-rdv { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
/* Éditeur de la Prise de RdV (modale de modification) : une ligne par élément. */
.rdv-edit { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.rdv-rows { display: flex; flex-direction: column; gap: 0.3rem; max-height: 40vh; overflow-y: auto; }
.rdv-row { display: grid; grid-template-columns: 9.5rem 6.2rem 1fr auto; gap: 0.3rem; align-items: center; }
.rdv-row input { min-width: 0; }
.rdv-edit .rdv-add { align-self: flex-start; }
.rdv-note { font-size: 0.78rem; }
/* « Des résultats ici » : rond posé sur une bascule quand la vue courante n'a rien trouvé.
   Il surgit (assez pour qu'on le voie arriver), puis clignote doucement. Placé DANS le
   bouton : le groupe (.seg3) coupe ce qui dépasse. */
.seg-btn.gv-hint { position: relative; }
.seg-btn.gv-hint::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: #e8590c; box-shadow: 0 0 0 2px #fff;
  animation: gvHintPop .7s cubic-bezier(.2, 1.7, .4, 1) both, gvHintPulse 1.8s ease-in-out .8s infinite;
}
@keyframes gvHintPop { 0% { transform: scale(0); } 55% { transform: scale(2.2); } 100% { transform: scale(1); } }
@keyframes gvHintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .seg-btn.gv-hint::after { animation: none; } }
#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; }
/* Message « aucune ligne » DANS le tableau (les entêtes/filtres restent affichés). */
.gv-empty-cell { text-align: center; padding: 1.4rem; color: var(--muted); }
.gv-empty-row td { border-bottom: none; background: #fff; }
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. */
.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; }
/* Client avec une alerte « à paramétrer » active : fond orange pâle (survol/sélection priment). */
tr.lot-row.row-alert-param td { background: #fff3e0; }
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: 2100; 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; }
/* 2e valeur (« et ») affichée uniquement pour « Entre » / « Pas entre » : le display:flex
   ci-dessus l'emportait sur l'attribut [hidden] → on le rétablit explicitement. */
.filter-numcrit label[hidden] { display: none; }
.filter-daterange input, .filter-numcrit input, .filter-numcrit select { padding: 0.3rem; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }

/* ===== Filtres favoris (toutes les vues de listes) ===== */
.fav-pop { width: 280px; padding: 0.5rem; }
.fav-pop .fav-add { width: 100%; margin-bottom: 0.45rem; }
.fav-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.fav-empty { padding: 0.35rem 0.2rem; font-size: 0.85rem; }
.fav-item { display: flex; align-items: center; gap: 0.3rem; }
.fav-item .fav-apply {
  flex: 1 1 auto; text-align: left; border: 1px solid transparent; background: transparent;
  padding: 0.32rem 0.45rem; border-radius: 6px; cursor: pointer; font-size: 0.86rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-item .fav-apply:hover { background: #eef2ff; border-color: var(--line-2); }
.fav-item .fav-del {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: var(--muted);
  padding: 0.2rem 0.35rem; border-radius: 6px; font-size: 0.9rem; line-height: 1;
}
.fav-item .fav-del:hover { background: #fee2e2; color: var(--red); }
.fav-name-row { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.7rem; }
.fav-name-row .fav-name { padding: 0.4rem 0.5rem; border: 1px solid var(--line-2); border-radius: 6px; font-weight: 400; font: inherit; }
.fav-recap { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; font-size: 0.85rem; }
.fav-recap ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.fav-recap li { margin: 0.12rem 0; }
.fav-bounds { margin-top: 0.8rem; }
.fav-bounds-help { font-size: 0.85rem; margin: 0 0 0.45rem; }
.fav-bound-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.3rem 0; font-size: 0.85rem; }
.fav-bound-row .fav-bound-lbl { flex: 1 1 auto; }
.fav-bound-row .fav-bound-sel { flex: 0 0 auto; max-width: 55%; padding: 0.28rem 0.4rem; 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 {
  /* Au-dessus des volets Synthèses / Factu auto (1400) et de leurs bandeaux (1500). */
  position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 2000;
  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; }
/* Libellé trop long : le TEXTE du bouton passe sur deux lignes, les boutons restent sur une
   seule rangée — plutôt que de déborder de la modale. */
.modal-footer .btn { white-space: normal; text-align: center; justify-content: center; min-width: 0; }
.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-orange { background: #e8770c; color: #fff; border-color: #e8770c; }
/* Sans cette règle, le `.btn:hover` générique repose un fond CLAIR sous le texte blanc
   du bouton orange : il devient illisible au survol. Vaut pour tous les `.fa-orange`
   (Tarifs DIVERS, Tarifs PM, « Passer à Facturée sans numéro »). */
.fa-orange:hover:not(:disabled) { background: #cf6a0a; border-color: #cf6a0a; color: #fff; }
.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; }
/* Les trois boutons d'action de la facturation tiennent sur UNE ligne, sous « Détails des
   contrôles » : à quatre sur la même rangée, le retour à la ligne les séparait en deux
   groupes illisibles. */
.fa-actions-end { justify-content: flex-end; margin-top: 0.4rem; }
.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[hidden] { display: none !important; }   /* hidden doit primer sur display:flex */
.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; }
/* Destinataire rattaché par son pôle : coché, verrouillé, et visiblement pas modifiable ici. */
.pole-check-list label.par-pole { opacity: 0.75; font-style: italic; }

/* Bouton portant un compteur (ex. 👥 destinataires d'une alerte). */
.btn-badged { position: relative; overflow: visible; }
.btn-badged .btn-badge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--navy); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 16px; text-align: center;
}

/* Résumé des critères d'une alerte spécifique (bouton ℹ). */
.crit-text { font-size: 0.88rem; line-height: 1.55; max-height: 60vh; overflow: auto;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 0.7rem 0.8rem; }

/* Fenêtre « Rapports à relire » : accès à la liste des missions, par périmètre. Les deux
   boutons reprennent les couleurs des alertes de cohorte — même geste, même code. */
.alert-link { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Fenêtre « Rapports à relire » : date du dernier calcul, en retrait du titre. */
.alerts-lastrun { margin: -0.5rem 0 0.8rem; font-size: 0.78rem; color: var(--muted); }

/* ===== 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; }
/* Facturation mixte EN PRÉPARATION. Fluo : c'est un état transitoire pendant lequel les
   boutons habituels sont neutralisés — il doit sauter aux yeux, et rappeler qu'on attend
   quelque chose de l'utilisateur. */
.factu-attente {
  background: #ccff00; border: 2px solid #1c2733; border-radius: 8px;
  padding: 0.55rem 0.7rem; margin: 0 0 0.6rem; color: #1c2733;
}
.factu-attente[hidden] { display: none; }
.factu-attente .fa-att-t { font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }
.factu-attente .fa-att-l { font-size: 0.85rem; margin: 0.15rem 0 0.4rem; }
.factu-attente .fa-att-b { display: flex; gap: 0.35rem; flex-wrap: wrap; }
/* La coche « Ajouter des commandes indiv » du pavé Facturation des lots. */
.fa-avec-cmd { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }

.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; }
.synth-item .row-acts { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
/* Fichiers de la synthèse : étiquettes à glisser (bureau, mail) ou à cliquer. */
.synth-files { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.synth-file { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.5rem; font-size: 0.78rem;
  border: 1px dashed var(--line-2); border-radius: 999px; background: #fff; cursor: grab; user-select: none; }
.synth-file:hover { border-style: solid; background: var(--bg); }
.synth-file:active { cursor: grabbing; }
.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); }
/* Facture « Vacations » émise : quantités à compléter dans Axonaut. */
.synth-item.vac { border-left-color: #d63384; background: #fdeef6; }
.synth-item .msg-vac { color: #a3195b; margin-top: 0.25rem; font-weight: 600; }
/* Proforma (devis Axonaut) prête : violet, comme le badge des proformas. */
.synth-item.pf { border-left-color: #7d3c98; background: #f5eefa; }
/* Relance des tarifs : avancement. */
.rt-box { background: #fff; border-radius: 10px; padding: 1rem 1.4rem; min-width: 320px; max-width: 90vw; }
.rt-l { display: flex; gap: .7rem; align-items: center; }
.rt-bar { height: 6px; background: var(--line); border-radius: 3px; margin-top: .6rem; overflow: hidden; }
.rt-bar > div { height: 100%; background: var(--orange, #e8590c); transition: width .3s; }
.rt-cur { font-size: .8rem; margin-top: .35rem; min-height: 1em; word-break: break-all; }
/* Type d'une proforma : violet = devis Axonaut, vert = annexe Excel. */
.pf-badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; }
.pf-badge.pf-devis { background: #7d3c98; }
.pf-badge.pf-excel { background: #198754; }
/* Modale « Avoir » : le choix du geste, en tête. */
.ar-seg { display: inline-flex; margin: 0 0 .4rem; }
.fa-deja { background: #e7f1ff; color: #084298; border-left: 4px solid #0d6efd; border-radius: 7px; padding: 0.5rem 0.7rem; font-size: 0.86rem; margin: 0.4rem 0; }
.fa-vac-note { background: #fdeef6; color: #a3195b; border-radius: 7px; padding: 0.5rem 0.7rem; font-size: 0.84rem; }
.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 KPI (onglet Missions) ===== */
.kpi-panel {
  position: fixed; top: 60px; right: 0; width: 430px; max-width: 94vw; 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;
}
.kpi-panel[hidden] { display: none !important; }
.kpi-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); background: #f1f5f9; }
.kpi-count { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.kpi-head-actions { display: flex; align-items: center; gap: 0.4rem; }
.kpi-panel-head #kpi-panel-close { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); }
.kpi-panel-head #kpi-panel-close:hover { color: var(--text); }
/* 3 sections empilées verticalement ; scroll interne si trop long (flex:1 + min-height:0). */
.kpi-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.kpi-sec { flex: 0 0 auto; }
.kpi-empty, .kpi-note { color: var(--muted); font-size: 0.88rem; padding: 0.3rem 0; }
.kpi-sec-t { font-size: 0.9rem; margin: 0 0 0.5rem; color: var(--text); }
.kpi-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
.kpi-cfg-note { font-size: 0.76rem; color: var(--muted); font-style: italic; margin: -0.3rem 0 0.5rem; cursor: help; }
.kpi-cfg-i { font-style: normal; }
.kpi-donut-wrap { display: flex; align-items: center; gap: 1rem; }
.kpi-donut { flex: 0 0 auto; }
.kpi-donut-c { font-size: 20px; font-weight: 700; fill: var(--text); }
.kpi-legend { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
.kpi-leg-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.kpi-sw { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.kpi-leg-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-leg-val { color: var(--muted); flex: 0 0 auto; }
.kpi-hidden { display: none !important; }
.kpi-more { align-self: flex-start; margin-top: 0.25rem; border: 0; background: none; padding: 0.1rem 0; color: #2563eb; cursor: pointer; font-size: 0.8rem; }
.kpi-more:hover { text-decoration: underline; }
.kpi-expandable { display: flex; flex-direction: column; }
/* Répartition lots : jauges empilées (Lots / Opérations / Contrôles), segments colorés. */
.kpi-stack { display: flex; flex-direction: column; gap: 0.3rem; }
.kpi-stleg { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.2rem; }
.kpi-stleg-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.kpi-stbar { display: flex; align-items: center; gap: 0.5rem; }
.kpi-stbar-lbl { flex: 0 0 70px; font-size: 0.76rem; color: var(--muted); }
.kpi-stbar-track { flex: 1 1 auto; display: flex; height: 20px; border-radius: 5px; overflow: hidden; background: #eef2f7; }
.kpi-stbar-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.72rem; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; }
.kpi-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.kpi-bar-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.kpi-bar-lbl { flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-bar-track { flex: 1 1 auto; height: 12px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.kpi-bar-fill { display: block; height: 100%; background: #4e79a7; border-radius: 6px; }
.kpi-bar-val { flex: 0 0 auto; color: var(--muted); white-space: nowrap; }
/* Onglet flottant « ‹ 📊 KPI » collé au bord droit (comme Synthèses / Factu auto). */
.kpi-reopen {
  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);
}
.kpi-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; }

/* Toggle TEMPORAIRE Orange/Bleu (modale Dump) : `html.theme-blue` neutralise l'override
   orange ci-dessus → retour à la charte navy/bleu de base. (À retirer à terme.) */
html.theme-blue .app-header { background: #1f2c54; border-bottom-color: #3d92d1; }
html.theme-blue .app-header nav a.nav-link.active { text-decoration-color: #3d92d1; }
html.theme-blue .nav-dropdown .nav-dd-menu { background: #17224a; }
html.theme-blue .app-header .nav-dd-menu a.nav-link:hover,
html.theme-blue .app-header .nav-dd-menu a.nav-link.active { background: rgba(255,255,255,.12); }

/* ===== 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 */
/* « Afficher les autres alertes actives » : un DÉPLIANT, pas un bouton d'action — d'où les
   chevrons de part et d'autre, qui annoncent le volet qui s'ouvre juste en dessous. */
.spec-autres {
  width: 100%; margin-top: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.82rem; color: var(--muted);
  background: #f8fafc; border: 1px dashed var(--line-2); border-radius: 8px;
}
.spec-autres:hover { background: var(--bg); color: var(--text); border-color: var(--gray); }
.spec-autres .ico { width: 14px; height: 14px; transition: transform 0.15s; }
/* Volet ouvert : les chevrons se retournent, comme partout ailleurs. */
.spec-autres.ouvert .ico { transform: rotate(180deg); }

.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; }
/* Une alerte dont tout tient dans ses boutons n'a pas de texte : pas de marge non plus. */
.spec-alert-text:empty { display: none; }
/* Compte d'une section : c'est le chiffre qu'on vient lire, il se détache du libellé. */
.spec-btn-n { color: #b06a00; font-weight: 700; }
/* Section à zéro : le bouton reste (la question a été posée), mais il n'ouvre rien. */
.spec-btn-vide { opacity: 0.5; cursor: default; }
.spec-alert-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* Sections d'une alerte de cohorte : une ligne par section — son libellé, puis un bouton
   par périmètre. Une grille, pour que les boutons s'alignent d'une ligne à l'autre. */
.spec-secs {
  display: grid; grid-template-columns: 1fr max-content max-content;
  gap: 0.35rem 0.5rem; align-items: center; margin: 0.35rem 0 0.4rem;
}
.spec-secs.spec-secs-1 { grid-template-columns: 1fr max-content; }
.spec-secs .spec-sec-lbl { font-size: 0.88rem; }
/* Un bouton ne se coupe jamais ; un libellé peut aller à la ligne, mais l'échéance (« J+7 »)
   reste collée au mot qui la précède (espace insécable posé au rendu). */
.spec-secs .spec-btn { width: 100%; white-space: nowrap; }
/* Les deux périmètres se distinguent par la couleur ET par leur libellé (le nom du pôle,
   ou « Mes pôles », face à « Tous») : la couleur aide à les retrouver d'une ligne à l'autre,
   le libellé dit lequel est lequel — pas besoin de légende. */
.spec-btn-pole { background: #eef3fb; border-color: #b9cdea; }
.spec-btn-tous { background: #fff7ed; border-color: #f0c99a; }
/* Sur un écran étroit, le libellé prend sa ligne et les boutons se placent dessous. */
@media (max-width: 620px) {
  .spec-secs { grid-template-columns: 1fr 1fr; }
  .spec-secs.spec-secs-1 { grid-template-columns: 1fr; }
  .spec-secs .spec-sec-lbl { grid-column: 1 / -1; }
}
.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: 2100; 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; }

/* ===== Porte d'authentification ===============================================
   Tant que /auth/me n'a pas confirmé une session valide, le shell (header + app)
   reste masqué et #auth-gate occupe l'écran. boot() retire `.auth-pending` en cas
   de succès, sinon redirige vers le SSO. Empêche tout affichage (dont menus admin)
   à un visiteur non authentifié. */
body.auth-pending > header.app-header,
body.auth-pending > main#app { display: none !important; }
#auth-gate { display: none; }
body.auth-pending > #auth-gate {
  display: flex; position: fixed; inset: 0; z-index: 4000;
  align-items: center; justify-content: center;
  background: #f4f6f9; color: #1c2733;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
}
.auth-gate-card { text-align: center; }
.auth-gate-card p { margin: 1rem 0 0; font-size: 0.95rem; color: #55606c; }
.auth-gate-spin {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  border: 3px solid #d9dee6; border-top-color: #b5470f;
  animation: auth-gate-spin 0.8s linear infinite;
}
@keyframes auth-gate-spin { to { transform: rotate(360deg); } }
#auth-gate .auth-gate-retry {
  display: inline-block; margin-top: 0.9rem; padding: 0.45rem 1rem;
  background: #b5470f; color: #fff; border-radius: 0.4rem;
  text-decoration: none; font-size: 0.85rem;
}

/* ===== Formulaire « Diffuser un rapport Word » ============================== */
.diff-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.5rem; }
.diff-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.diff-field > span { font-weight: 600; color: #33404d; }
.diff-field .req { color: #b5470f; }
.diff-field em { font-weight: 400; color: #7a8794; }
.diff-form input[type=file], .diff-form select, .diff-form input[type=text],
.diff-form input[type=date], .diff-form textarea {
  padding: 0.4rem 0.55rem; border: 1px solid #cfd6df; border-radius: 0.4rem;
  font: inherit; background: #fff;
}
.diff-form textarea { resize: vertical; }
.rev-box { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; }
.rev-box .rev-old { color: #c0392b; text-decoration: line-through; }
.rev-box .rev-arrow { color: #7a8794; font-weight: 400; }
.rev-box .rev-new { color: #1e8449; }
.diff-rel { display: flex; align-items: center; gap: 0.7rem; }
.diff-rel input[type=text] { flex: 1; }
.diff-rel-unlock { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: #55606c; white-space: nowrap; }
/* Couleur du select Conclusion selon le choix (réutilise c-green/red/gray). */
.diff-form select.c-green { color: #1e8449; font-weight: 600; }
.diff-form select.c-red { color: #c0392b; font-weight: 600; }
.diff-form select.c-gray { color: #7a8794; font-weight: 600; }

/* ---- Tarif d'une mission (admins / users Facturation) ----
   Une seule colonne « Tarif HT » : le montant, puis un cadenas qui dit si le prix est
   définitif (fermé, vert) ou provisoire (ouvert, orange). Aucun cadenas = rien récupéré. */
.tarif-cell { display: flex; align-items: center; gap: 0.35rem; }
.tarif-lock { font-size: 0.9em; line-height: 1; }
.tarif-lock.ok { filter: hue-rotate(75deg); }
.tarif-lock.ko { opacity: 0.75; }

/* ---- Produits Axonaut (paramétrage de la facturation auto) ---- */
.axo-pid { width: 8rem; padding: 0.25rem 0.4rem; border: 1px solid #cfd6df; border-radius: 0.3rem; font: inherit; }
tr.axo-missing .axo-pid { border-color: #c0392b; background: #fdf3f1; }

/* ---- « Factu auto » (moteur intégré) : bouton rouge, le temps de la bascule ---- */
.btn.btn-factu-v2 { border-color: #c0392b; color: #fff; background: #c0392b; }
.btn.btn-factu-v2:hover:not(:disabled) { background: #a93226; border-color: #a93226; }
.btn.btn-factu-v2:disabled { background: #e6b3ad; border-color: #e6b3ad; color: #fff; }
/* Choix « Proforma » (modale de facturation) */
.btn.btn-violet { border-color: #7d3c98; color: #fff; background: #7d3c98; }
/* Choix « Facturer en vacations » : le rose des factures Vacations du volet. */
.btn.btn-rose { border-color: #d63384; color: #fff; background: #d63384; }
/* « Annexe Excel » (client pré-facturé par annexe) : pousser vers l'annexe. */
.btn.btn-vert { border-color: #198754; color: #fff; background: #198754; }
.btn.btn-vert:hover:not(:disabled) { background: #157347; border-color: #157347; }
.btn.btn-rose:hover:not(:disabled) { background: #b02a6f; border-color: #b02a6f; }
.btn.btn-violet:hover:not(:disabled) { background: #6c3483; border-color: #6c3483; }

/* ---- Saisie des quantités manquantes (Factu auto) ---- */
.fq-wrap { max-height: 55vh; overflow: auto; }
.fq-lot { margin-bottom: 0.9rem; }
.fq-lot-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.25rem; }

/* Choix de tarif d'un lot bouclé en moins de 48 h : trois options exclusives,
   et le commentaire du lot en infobulle juste à côté de sa référence. */
.dc-opts { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.2rem; }
.dc-opts label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.dc-opts input[type="number"] { width: 130px; }
.dc-opts input[type="number"]:disabled { opacity: 0.45; }
/* `cursor: help` DIT qu'il y a quelque chose à survoler : une infobulle qu'on ne
   soupçonne pas n'est jamais lue. */
.dc-com { cursor: help; font-size: 0.85rem; border-bottom: 1px dotted currentColor; }
.fq-all { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; }
.fq-all input, .fq-input { width: 7rem; padding: 0.22rem 0.4rem; border: 1px solid #cfd6df; border-radius: 0.3rem; font: inherit; }

/* ---- Modale Facturation : montants issus de l'outil de tarification ---- */
.fa-warn { margin: 0.5rem 0; padding: 0.45rem 0.6rem; border-left: 3px solid #c0392b;
           background: #fdf3f1; color: #8d2b1e; font-size: 0.86rem; border-radius: 0.2rem; }
.fa-crit { font-size: 0.76rem; color: #7a8794; margin-top: 0.1rem; }
.fa-warn-act { margin-top: 0.4rem; }

/* ---- « Super premium » : lot bouclé en délai court, dans la colonne Délai ----
   Il REMPLACE la valeur Zen/Premium : le lot n'est plus dans le régime affiché, et la
   facturation lui demandera un tarif à part. Même orange que la mention Premium. */
.sp-delai { line-height: 1.25; word-break: normal; overflow-wrap: normal; }
/* Le BOUCLIER porte la couleur, pas le texte : il signale, le libellé se lit comme les
   autres valeurs de la colonne. `vertical-align` plutôt qu'un flex, pour que l'icône
   suive la première ligne du texte au lieu d'être centrée sur la hauteur de la case. */
.sp-delai svg { width: 0.95em; height: 0.95em; color: #e8770c; vertical-align: -0.15em;
                margin-right: 0.15em; }
/* Dans la modale de facturation, « Super premium » se signale en ROUGE : c'est là que se
   prend la décision de tarif, il doit accrocher l'œil plus que la mention Premium. */
.sp-delai-modal { display: inline-flex; align-items: center; gap: 0.25rem; color: #c0392b; font-weight: 700; }
.sp-delai-modal svg { width: 0.95em; height: 0.95em; flex: 0 0 auto; }


/* ---- Champs numériques : pas de flèches ----
   Les petites flèches d'incrément n'apportent rien sur des montants ou des quantités, et
   se cliquent par erreur (elles bordent le champ). La saisie reste numérique — seul le
   widget disparaît. Le garde-fou molette vit dans app.js. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Spécifique Calife ===== */
/* Sous-titre sous « Calife vX » dans la barre de menu. */
.app-brand-stack { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand-sub { color: rgba(255,255,255,.6); font-size: .68rem; font-weight: 400; font-style: italic; }

/* Visualiseur des pièces (js/visionneuse.js) */
.visio-overlay { z-index: 2000; }
.visio-box { position: fixed; inset: 2.5vh 2.5vw; background: #fff; border-radius: 10px; display: flex;
  flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
.visio-tete { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid #e3e6ee; }
.visio-titre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visio-tete .modal-close-x { position: static; }
.visio-corps { flex: 1; overflow: auto; background: #f4f5f8; }
.visio-pdf { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.visio-image { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 1rem; }
.visio-image img { max-width: 100%; max-height: calc(95vh - 4rem); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.visio-texte { margin: 1rem; padding: 1rem; background: #fff; white-space: pre-wrap; font-size: .9rem; }
.visio-docx { padding: 1rem 0; }
.visio-onglets { display: flex; gap: .25rem; padding: .5rem .75rem 0; flex-wrap: wrap; }
.visio-feuille { padding: .5rem .75rem 1rem; overflow: auto; }
table.visio-xl { border-collapse: collapse; table-layout: fixed; background: #fff; font-family: Calibri, Arial, sans-serif;
  font-size: 11pt; }
table.visio-xl td { border: 1px solid #e6e6e6; padding: 1px 4px; overflow: hidden; vertical-align: bottom; }
.visio-feuille table:not(.visio-xl) { border-collapse: collapse; background: #fff; }
.visio-feuille table:not(.visio-xl) td { border: 1px solid #ddd; padding: 2px 6px; }

/* Fiche collaborateur (js/fiche.js) */
.fiche-tete { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .25rem; }
.fiche-tete h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.fiche-actions { margin-left: auto; }
.fiche-resume { margin-bottom: .5rem; }
.fiche-h { margin: .75rem 0 .25rem; color: var(--navy); font-size: 1.05rem; }
.fiche-groupe { margin: .6rem 0 1rem; }
.fiche-groupe h4 { margin: 0 0 .35rem; font-size: .92rem; color: #3b4566; border-bottom: 1px solid #e3e6ee; padding-bottom: .2rem; }
.fiche-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .5rem; }
.fiche-pastille { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 10px; background: #e9ecf3; color: #3b4566; }
.fiche-pastille.ok { background: #dcf3e3; color: #17663a; }
.fiche-pastille.ko { background: #fde2e1; color: #a12a24; }
.fiche-pastille.attente { background: #fff2cc; color: #6b5300; }
.fiche-pastille.neutre { background: #e7e9f2; color: #4b5577; }
.case { border: 1px solid #e3e6ee; border-left: 4px solid #c9cfdd; border-radius: 7px; padding: .45rem .55rem; background: #fff; }
.case.case-ok { border-left-color: #2e9e5b; }
.case.case-ko { border-left-color: #d64541; }
.case.case-attente { border-left-color: #e0b100; }
.case.case-libre { border-left-color: #3b7ddd; background: #fbfcff; }
.fiche-pastille.bleu { background: #e3eefc; color: #1f4f9c; }
.case.survol, .zone-depot.survol { outline: 2px dashed var(--navy); outline-offset: 2px; background: #f3f6ff; }
.case-tete { display: flex; align-items: center; gap: .4rem; }
.case-tete .fiche-pastille { margin-left: auto; }
.case-attendu, .case-dispense { font-size: .82rem; margin-top: .15rem; }
.case-dispense { color: #4b5577; }
.zone-depot { border: 1px dashed #9fb0d6; border-radius: 8px; padding: 1.6rem .6rem; text-align: center; color: #4b5a85;
  font-size: .9rem; margin: .35rem 0; background: #eef3fc; }
.zone-depot.petite { padding: .3rem; font-size: .8rem; background: #f4f7fd; border-radius: 6px; }
.piece { display: flex; align-items: center; gap: .5rem; font-size: .84rem; padding: .15rem 0; border-top: 1px dotted #eceef4; }
.piece:first-of-type { border-top: 0; }
.piece-grise { opacity: .55; }
.piece[draggable="true"] { cursor: grab; }
.piece[draggable="true"]:active { cursor: grabbing; }
.piece-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.piece-actions { margin-left: auto; display: flex; gap: .15rem; flex: none; }
.btn-icone { border: 0; background: transparent; cursor: pointer; padding: .1rem .25rem; border-radius: 4px; text-decoration: none; color: inherit; font-size: .9rem; }
.btn-icone:hover { background: #eef1f8; }
.btn-icone.danger:hover { background: #fde2e1; }
.petit { font-size: .78rem; margin-top: .3rem; }
.modal-warn { background: #fff2cc; color: #6b5300; padding: .4rem .6rem; border-radius: 6px; margin: .3rem 0 .5rem; font-size: .88rem; }

/* Fiche — lot 5 : onboarding, qualifs et parcours (js/fiche_qualifs.js) */
.onb { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .4rem; }
.onb-barre { flex: 0 0 260px; height: 8px; background: #e7e9f2; border-radius: 4px; overflow: hidden; }
.onb-barre span { display: block; height: 100%; background: #2e9e5b; }
.onb-liste { display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .84rem; margin-bottom: .4rem; }
.onb-item { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; font-size: .84rem; }
.fiche-h-actions { float: right; font-weight: 400; }
.qcarte { border: 1px solid #e3e6ee; border-left: 4px solid #c9cfdd; border-radius: 7px; padding: .5rem .6rem; background: #fff; }
.qcarte-ok { border-left-color: #2e9e5b; } .qcarte-attente { border-left-color: #e0b100; }
.qcarte-ko { border-left-color: #b9c0d4; opacity: .85; } .qcarte-neutre { border-left-color: #8a93b2; }
.qcarte-infos { font-size: .82rem; margin-top: .15rem; }
/* Cartes de qualif : grille à demi-colonnes ; un parcours en cours est 1,5 fois plus large (JA, 27/10). */
.fiche-cases.qcartes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.qcartes > .qcarte { grid-column: span 2; }
.qcartes > .qcarte-encours { grid-column: span 3; }
@media (max-width: 560px) { .qcartes > .qcarte, .qcartes > .qcarte-encours { grid-column: 1 / -1; } }
.qcarte-actions { margin-top: .45rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.parcours { margin-top: .4rem; border-top: 1px dotted #e3e6ee; padding-top: .35rem; font-size: .85rem; }
.parcours-bloc { margin: .3rem 0; }
.parcours-bloc > strong { display: block; font-size: .8rem; color: #3b4566; margin-bottom: .15rem; }
.parcours-ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .15rem 0; }
.parcours-ligne input[type=date] { padding: .15rem .3rem; }
.parcours-reste { margin: .1rem 0 0 1.1rem; padding: 0; }
.fiche-historique { margin-top: .5rem; } .fiche-historique summary { cursor: pointer; color: #4b5577; font-size: .88rem; }
.modal-warn.rouge { background: #fde2e1; color: #a12a24; }


/* Liste Qualifications : colonne « Qualification » mise en évidence (JA, 27/10). */
table.lots-grid thead th.th-cell[data-col="date_qualification"] { background: #cfe0fb; }
table.lots-grid thead th.th-cell[data-col="date_qualification"] .th-label { color: #0d3a8f; font-weight: 700; }
table.lots-grid td.col-evidence { font-weight: 700; }
table.lots-grid tr.ligne-ko td { color: #a12a24; }
table.lots-grid tr.ligne-attente td { color: #6b5300; }
/* Fiche — lot 6 : supervisions (js/fiche_supervisions.js) */
.sup-bloc { margin: .2rem 0 .6rem; }
.sup-bloc > h4 { margin: .3rem 0; font-size: .9rem; color: #3b4566; }
.gv-annee { padding: .2rem .4rem; border: 1px solid #c9cfdd; border-radius: 6px; background: #fff; font-size: .85rem; }
.eq-regle { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; border: 1px solid var(--line-2);
  border-radius: 6px; padding: .35rem .5rem; margin-bottom: .35rem; font-size: .85rem; }
/* Import en masse (Documents manquants) */
.import-non { max-height: 320px; overflow: auto; margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.import-non li { margin: .15rem 0; }
/* Page « Reprise initiale » (Admin) */
.reprise-bloc { margin: .6rem 0 .9rem; }
.reprise-bloc > h3 { font-size: .95rem; margin: .2rem 0 .4rem; color: #3b4566; }
.reprise-code { background: #fff2cc; color: #6b5300; border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; }
.reprise-code-valeur { font-size: 1.2rem; letter-spacing: .12rem; }
.reprise-journal { max-height: 320px; overflow: auto; background: #f6f7fb; border: 1px solid #e3e6ee; border-radius: 6px;
  padding: .5rem .6rem; font-size: .8rem; white-space: pre-wrap; }
/* Visualiseur : cadre isolé des classeurs et documents Word (audit B-01) */
.visio-cadre { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; display: block; }
.visio-feuille { flex: 1; display: flex; min-height: 60vh; }
.visio-cadre-corps { margin: 0; padding: .4rem; background: #fff; }
.visio-cadre-corps table:not(.visio-xl) { border-collapse: collapse; background: #fff; }
.visio-cadre-corps table:not(.visio-xl) td { border: 1px solid #ddd; padding: 2px 6px; }