/* Gestion Dossier — feuille de style unique de l'application. */

:root {
  --bg:        #f4f6fb;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --border:    #e3e8f0;
  --text:      #16202f;
  --muted:     #6b7a90;
  --accent:    #3557f6;
  --accent-2:  #eaefff;
  --ok:        #0f9d63;
  --ok-bg:     #e6f6ef;
  --warn:      #b7791f;
  --warn-bg:   #fdf5e4;
  --danger:    #d64545;
  --danger-bg: #fdecec;
  --sidebar:   #101827;
  --sidebar-2: #1a2436;
  /* Geist : caractere d'interface concu pour les produits denses. Plus ouvert
     et plus contemporain qu'Inter a petit corps, avec des chiffres tabulaires
     nets — ce qui compte ici, ou presque chaque colonne est un montant.
     Volontairement differente de la Lexend d'Altica Space : le module reste
     identifiable d'un coup d'oeil. */
  --police: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Geist Mono pour les seuls chiffres qui se lisent en colonne : montants,
     heures, totaux. Toutes les glyphes ont la meme largeur, donc l'unite, la
     dizaine et le millier tombent exactement l'un sous l'autre d'une ligne a
     l'autre — on compare deux montants d'un coup d'oeil, sans les lire.
     Reserve aux nombres : en prose, une chasse fixe se lit mal. */
  --police-chiffres: "Geist Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(16, 24, 39, .06), 0 8px 24px rgba(16, 24, 39, .06);
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours cacher. Sans cette règle, toute classe qui
   pose un `display` (.btn est en inline-flex) l'emporte sur la feuille du
   navigateur et l'élément reste visible — d'où les correctifs au cas par cas
   qu'on trouve plus bas, désormais redondants. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: 14px/1.55 var(--police);
  /* Chiffres de meme largeur : les colonnes de montants s'alignent au pixel,
     et une valeur qui change ne fait plus « sauter » la ligne. */
  font-variant-numeric: tabular-nums;
  letter-spacing: -.006em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ ossature */

.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 252px;
  flex: 0 0 252px;
  /* Un fond très légèrement dégradé : la barre garde sa profondeur sans
     devenir un aplat mort sur les grands écrans. */
  background: linear-gradient(178deg, #131c2f 0%, var(--sidebar) 46%, #0c1220 100%);
  color: #97a5ba;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width .18s ease, flex-basis .18s ease;
}
/* Filet de séparation, plus fin qu'une bordure pleine. */
.sidebar::after {
  content: "";
  position: absolute; inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
  margin: 0 10px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar__logo {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  display: block;
  box-shadow: 0 4px 14px rgba(79, 107, 255, .38);
}

.sidebar__section {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 20px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #59677d;
  font-weight: 700;
}
/* Trait qui prolonge l'intitulé : sépare les blocs sans ajouter de bordure. */
.sidebar__section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.09), transparent);
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 16px;
  scrollbar-width: thin;
  scrollbar-color: #2b3549 transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: #2b3549; border-radius: 3px; }

.navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin: 2px 0;
  border-radius: 9px;
  color: #9aa8bd;
  cursor: pointer;
  font-size: 13.5px;
  user-select: none;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.navlink:hover {
  background: rgba(255, 255, 255, .055);
  color: #e8edf5;
}
.navlink:active { transform: scale(.985); }

.navlink--actif {
  /* L'élément actif est un « galet » plutôt qu'une bande : plus lisible
     quand plusieurs onglets se suivent. */
  background: linear-gradient(100deg, rgba(91, 124, 255, .26), rgba(91, 124, 255, .10));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(122, 148, 255, .22);
}
/* Repère vertical du côté gauche, aligné sur le galet. */
.navlink--actif::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: #6d8cff;
  box-shadow: 0 0 10px rgba(109, 140, 255, .8);
}

.navlink svg {
  flex: 0 0 17px; width: 17px; height: 17px;
  opacity: .7;
  transition: opacity .14s ease;
}
.navlink:hover svg { opacity: .95; }
.navlink--actif svg { opacity: 1; color: #a8bcff; }

.navlink__badge {
  margin-left: auto;
  background: rgba(255, 255, 255, .08);
  color: #9fb0c9;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.navlink--actif .navlink__badge { background: rgba(255, 255, 255, .16); color: #e6ecfa; }

/* --- pied : le compte connecté, repris d'Altica Space --- */

.sidebar__pied {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.compte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}

.compte__avatar {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f6bff, #7b5cff);
}

.compte__ident { min-width: 0; line-height: 1.25; }
.compte__nom {
  color: #e8edf5;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compte__role { color: #66748a; font-size: 10.5px; }

.compte__sortie {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7b8aa1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.compte__sortie:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.compte__sortie svg { width: 15px; height: 15px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  height: 60px;
  flex: 0 0 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__titre { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.topbar__sous  { color: var(--muted); font-size: 12.5px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.contenu { flex: 1; overflow: auto; padding: 22px; }

/* ------------------------------------------------------------------ éléments */

.champ {
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.champ:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53, 87, 246, .12); }
select.champ { cursor: pointer; }

.recherche { position: relative; }
.recherche .champ { padding-left: 32px; width: 260px; }
.recherche svg {
  position: absolute; left: 10px; top: 9px;
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}

.btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: 15px; height: 15px; }
.btn--primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primaire:hover { background: #2647e0; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: #bf3535; }
.btn--fantome { background: transparent; border-color: transparent; color: var(--muted); }
.btn--fantome:hover { background: var(--surface-2); color: var(--text); }
.btn--petit { height: 28px; padding: 0 9px; font-size: 12px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.barre-outils {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.barre-outils__fin { margin-left: auto; display: flex; gap: 9px; align-items: center; }

/* --------------------------------------------------------------- statistiques */

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat { padding: 16px 18px; }
.stat__libelle { color: var(--muted); font-size: 12px; font-weight: 550; }
.stat__valeur {
  font-family: var(--police-chiffres);
  font-size: 27px; font-weight: 600; letter-spacing: -.03em;
  margin-top: 4px;
}
.stat__detail { color: var(--muted); font-size: 12px; margin-top: 2px; }

.grille-repartition {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.repartition { padding: 16px 18px; }
.repartition h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.repartition__ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.repartition__nom { width: 130px; flex: 0 0 130px; color: var(--muted); }
.repartition__barre { flex: 1; height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.repartition__barre span { display: block; height: 100%; background: linear-gradient(90deg, #4f6bff, #7b5cff); border-radius: 4px; }
.repartition__n { width: 34px; text-align: right; font-weight: 500;
                  font-family: var(--police-chiffres); font-size: 12.5px; }

/* -------------------------------------------------------------------- tableau */

.tableau-enveloppe {
  overflow: auto;
  max-height: calc(100vh - 190px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

table.grille { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.grille tbody td, table.grille thead th { font-variant-numeric: tabular-nums; }

table.grille thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
  text-align: left;
  font-weight: 620;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
table.grille thead tr.groupes th {
  top: 0;
  z-index: 4;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: #eef2f9;
  color: #46536b;
}
table.grille thead tr.groupes + tr th { top: 33px; }

table.grille tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef1f6;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.grille tbody tr:hover td { background: #f7f9ff; }

table.grille .col-client {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  font-weight: 600;
  border-right: 1px solid var(--border);
  min-width: 210px;
  max-width: 240px;
}
table.grille tbody tr:hover .col-client { background: #f7f9ff; }
table.grille thead .col-client { z-index: 5; background: var(--surface-2); }

/* Les dossiers d'un même groupe se suivent : un trait marque le début du bloc. */
table.grille tbody tr.groupe-debut td { border-top: 1px solid #d6dded; }
table.grille tbody tr:first-child td { border-top: none; }

.col-client__groupe {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  margin-left: 6px;
}

/* Glisser-déposer : une ligne prise emmène tout son groupe. */
table.grille tbody tr.deplacable .col-client { cursor: grab; }
table.grille tbody tr.deplacable .col-client::before {
  content: '⠿';
  color: #c3cbdb;
  margin-right: 7px;
  font-size: 12px;
  vertical-align: 1px;
}
table.grille tbody tr.en-deplacement td { opacity: .45; }
table.grille tbody tr.cible-avant td { box-shadow: inset 0 2px 0 0 var(--accent); }
table.grille tbody tr.cible-apres td { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* Colonnes déduites : lecture seule, pour qu'on voie qu'elles ne se saisissent pas. */
td.cellule-calculee {
  background: var(--surface-2);
  color: #46536b;
  cursor: default;
}
td.cellule-calculee.vide::after { content: '—'; color: #c6cfdd; }

td.cellule-editable { cursor: text; }
td.cellule-editable:hover { box-shadow: inset 0 0 0 1px var(--accent-2); }
td.cellule-editable.vide::after { content: '—'; color: #c6cfdd; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

td .saisie-cellule {
  width: 100%;
  border: none;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
  background: #fff;
}

.puce {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.puce--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: #c7ead9; }
.puce--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: #f0e0bb; }
.puce--danger { background: var(--danger-bg); color: var(--danger); border-color: #f5cccc; }
.puce--accent { background: var(--accent-2);  color: var(--accent); border-color: #d3ddff; }
.puce--neutre { background: rgba(255, 255, 255, .72); color: #55617a; border-color: rgba(16, 24, 39, .12); }

.vide-message { padding: 44px; text-align: center; color: var(--muted); }

/* --------------------------------------------------------------------- modale */

.voile {
  position: fixed; inset: 0;
  background: rgba(16, 24, 39, .45);
  display: grid; place-items: center;
  z-index: 50;
  padding: 20px;
}
.voile[hidden] { display: none !important; }

.modale {
  background: var(--surface);
  border-radius: 14px;
  width: min(920px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(16, 24, 39, .28);
}
.modale--etroite { width: min(440px, 100%); }
.modale__entete {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modale__titre { font-size: 16px; font-weight: 600; }
.modale__corps { padding: 20px 22px; overflow: auto; }
.modale__pied {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 9px; justify-content: flex-end;
  background: var(--surface-2);
  border-radius: 0 0 14px 14px;
}

.formulaire { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.formulaire__groupe { display: flex; flex-direction: column; gap: 5px; }
.formulaire__groupe--large { grid-column: 1 / -1; }
.formulaire__groupe label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.formulaire__groupe .champ { width: 100%; }
.formulaire__groupe textarea.champ { height: 74px; padding: 8px 11px; resize: vertical; }
.formulaire__titre {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-top: 6px;
}

/* ------------------------------------------------- couleurs de cellule (Excel) */

/*
 * Reprise des teintes du classeur : vert = fait, gris = non concerné,
 * rouge = à traiter, orange/jaune/bleu = répartition entre collaborateurs.
 * Elles s'appliquent en fond, indépendamment de la mise en forme métier.
 */
:root {
  --couleur-vert:      #c5e0b4;
  --couleur-vertclair: #e2f0d9;
  --couleur-jaune:     #fff2cc;
  --couleur-orange:    #fbe5d6;
  --couleur-rouge:     #ffc7ce;
  --couleur-bleu:      #dae3f3;
  --couleur-violet:    #e4dfec;
  --couleur-gris:      #d9d9d9;
  --couleur-grisclair: #f2f2f2;
}

td.c-vert      { background: var(--couleur-vert)      !important; }
td.c-vertclair { background: var(--couleur-vertclair) !important; }
td.c-jaune     { background: var(--couleur-jaune)     !important; }
td.c-orange    { background: var(--couleur-orange)    !important; }
td.c-rouge     { background: var(--couleur-rouge)     !important; }
td.c-bleu      { background: var(--couleur-bleu)      !important; }
td.c-violet    { background: var(--couleur-violet)    !important; }
td.c-gris      { background: var(--couleur-gris)      !important; color: #5b6472; }
td.c-grisclair { background: var(--couleur-grisclair) !important; }

.palette {
  position: fixed;
  z-index: 90;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(16, 24, 39, .22);
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(5, 26px);
  gap: 6px;
}
.palette[hidden] { display: none !important; }
.palette__ton {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(16, 24, 39, .16);
  cursor: pointer;
}
.palette__ton:hover { transform: scale(1.12); }
.palette__ton--aucune {
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--danger); font-weight: 700; font-size: 15px; line-height: 1;
}
.palette__legende {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding-top: 2px;
}

/* ------------------------------------------------------ mise en forme métier */

td.montant {
  text-align: right;
  font-family: var(--police-chiffres);
  /* la chasse fixe paraît plus grosse a taille egale : on compense */
  font-size: .93em;
  font-weight: 600;
  letter-spacing: -.02em;
  font-feature-settings: "ss01";   /* zero barre, non confondu avec la lettre O */
}
td.montant.negatif { color: var(--danger); }
td.montant .devise { color: var(--muted); font-weight: 500; margin-left: 2px; }
/* Une colonne de montants accueille parfois une mention plutot qu'un nombre
   (« CLIENT QUI LE FAIT », « N/A »). Elle revient au texte courant : la chasse
   fixe est faite pour aligner des chiffres, pas pour se lire en phrase. */
td.montant .puce {
  font-family: var(--police);
  font-size: 11px;
  letter-spacing: normal;
}

tr.ligne-hors-champ td:not(.col-client) { opacity: .45; }
tr.ligne-hors-champ .col-client { color: var(--muted); font-weight: 500; }

.aide-outils {
  color: var(--muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aide-outils svg { width: 14px; height: 14px; }

.legende { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.legende__item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.legende__pastille { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(16,24,39,.14); }

/* ------------------------------------------- repères posés sur le nom du dossier */

/*
 * Un repère qualifie le dossier lui-même (vert = nouveau, rouge = sortant ou en
 * cours) : il apparaît donc sur la colonne Client de tous les onglets.
 */
td.col-client.nom-vert,
td.col-client.nom-rouge { border-left: 4px solid transparent; }
td.col-client.nom-vert  { border-left-color: #4a9d5f; color: #1f7a41; }
td.col-client.nom-rouge { border-left-color: #d64545; color: #b33232; }
.reglages__nom.nom-vert  { color: #1f7a41; }
.reglages__nom.nom-rouge { color: #b33232; }

/* ---------------------------------------------------- réglages (tableau de bord) */

.reglages { padding: 18px; margin-top: 14px; }
.reglages__entete {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.reglages__entete h3 { margin: 0 0 3px; font-size: 13px; font-weight: 600; }
.reglages__entete p { margin: 0; color: var(--muted); font-size: 12.5px; max-width: 62ch; }
.reglages__compteurs { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.reglages__liste {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.reglages__ligne {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 160px) auto auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #eef1f6;
  font-size: 13px;
}
.reglages__ligne:last-child { border-bottom: none; }
.reglages__ligne:hover { background: #f7f9ff; }
.reglages__nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reglages__groupe { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reglages__tons { display: flex; gap: 5px; }
.reglages__ton {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(16, 24, 39, .16);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.reglages__ton--aucun { color: var(--muted); font-weight: 700; line-height: 1; }
.reglages__ton--actif { outline: 2px solid var(--accent); outline-offset: 1px; }
.reglages__cvae {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer;
}
.reglages__cvae input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* ------------------------------------------------ pastilles des collaborateurs */

/*
 * Une teinte par jeu d'initiales, attribuée par le serveur à la première
 * rencontre (gd_collaborateurs) : deux collaborateurs n'ont jamais la même.
 */
:root {
  --collab-c1: #dbe7ff;  --collab-c1-texte: #1c46b8;
  --collab-c2: #d8f3e3;  --collab-c2-texte: #17724a;
  --collab-c3: #ffe4d6;  --collab-c3-texte: #a84b16;
  --collab-c4: #fbe0ee;  --collab-c4-texte: #a51e64;
  --collab-c5: #e6e0fb;  --collab-c5-texte: #5533b8;
  --collab-c6: #fff3c9;  --collab-c6-texte: #8a6100;
  --collab-c7: #d3f1f5;  --collab-c7-texte: #12667a;
  --collab-c8: #e8ecd6;  --collab-c8-texte: #5b6b1f;
  --collab-c9: #ffdada;  --collab-c9-texte: #b02323;
  --collab-c10: #ddd9f7;  --collab-c10-texte: #3f36a3;
  --collab-c11: #d6f5d0;  --collab-c11-texte: #2f6b1c;
  --collab-c12: #f5e0c9;  --collab-c12-texte: #8a5520;
  --collab-c13: #d9e2ec;  --collab-c13-texte: #3b4c63;
  --collab-c14: #f7d9f2;  --collab-c14-texte: #8f2380;
  --collab-c15: #cfe9dd;  --collab-c15-texte: #16624c;
  --collab-c16: #ece4d0;  --collab-c16-texte: #6f5a22;
}

.collab {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .02em;
  border: 1px solid rgba(16, 24, 39, .1);
  background: var(--surface-2);
  color: var(--muted);
}
.collab--c1 { background: var(--collab-c1); color: var(--collab-c1-texte); }
.collab--c2 { background: var(--collab-c2); color: var(--collab-c2-texte); }
.collab--c3 { background: var(--collab-c3); color: var(--collab-c3-texte); }
.collab--c4 { background: var(--collab-c4); color: var(--collab-c4-texte); }
.collab--c5 { background: var(--collab-c5); color: var(--collab-c5-texte); }
.collab--c6 { background: var(--collab-c6); color: var(--collab-c6-texte); }
.collab--c7 { background: var(--collab-c7); color: var(--collab-c7-texte); }
.collab--c8 { background: var(--collab-c8); color: var(--collab-c8-texte); }
.collab--c9 { background: var(--collab-c9); color: var(--collab-c9-texte); }
.collab--c10 { background: var(--collab-c10); color: var(--collab-c10-texte); }
.collab--c11 { background: var(--collab-c11); color: var(--collab-c11-texte); }
.collab--c12 { background: var(--collab-c12); color: var(--collab-c12-texte); }
.collab--c13 { background: var(--collab-c13); color: var(--collab-c13-texte); }
.collab--c14 { background: var(--collab-c14); color: var(--collab-c14-texte); }
.collab--c15 { background: var(--collab-c15); color: var(--collab-c15-texte); }
.collab--c16 { background: var(--collab-c16); color: var(--collab-c16-texte); }

.equipe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 14px;
}
.equipe__titre { color: var(--muted); font-size: 12px; font-weight: 600; }
.equipe__membre { cursor: pointer; border: 1px solid rgba(16, 24, 39, .1); }
.equipe__membre:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

.palette--collab .palette__ton { border-radius: 20px; }

/* ---------------------------------------------------------------- export Excel */

.menu-export { position: relative; }
.menu-export__choix {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: 310px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(16, 24, 39, .22);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-export__choix[hidden] { display: none !important; }
.menu-export__choix button {
  text-align: left;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-export__choix button:hover { background: var(--accent-2); }
.menu-export__choix strong { font-size: 13px; font-weight: 620; color: var(--text); }
.menu-export__choix span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------------- cercle de confiance */

.cercle-vue {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}
.cercle-vue__cible { padding: 14px; }
.cible { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.cible__anneau { cursor: pointer; transition: opacity .15s ease; }
.cible__anneau:hover { stroke-opacity: .9; }
.cible__anneau--terne { opacity: .35; }
.cible__point {
  cursor: pointer;
  stroke: #fff;
  stroke-width: 1.2;
  transition: opacity .15s ease;
}
.cible__point:hover { stroke: var(--text); stroke-width: 2; }
.cible__point--terne { opacity: .25; }
.cible__num {
  font: 600 11px var(--police);
  fill: #55617a;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 3px;
}

.legende-cercle { padding: 16px 18px; }
.legende-cercle h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.legende-cercle__ligne {
  display: grid;
  grid-template-columns: 12px 110px 1fr 36px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  margin: 0 -8px;
  background: none;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-sizing: content-box;
}
.legende-cercle__ligne:hover { background: var(--surface-2); }
.legende-cercle__ligne--actif { background: var(--accent-2); }
.legende-cercle__pastille { width: 12px; height: 12px; border-radius: 50%; }
.legende-cercle__barre { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.legende-cercle__barre span { display: block; height: 100%; border-radius: 4px; }
.legende-cercle__n { text-align: right; font-family: var(--police-chiffres); font-size: 12.5px; }
.legende-cercle__note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

table.grille-cercle thead th small {
  display: block;
  font-weight: 450;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
td.note-cercle { padding-top: 5px; padding-bottom: 5px; }
td.note-cercle.en-cours { opacity: .5; pointer-events: none; }
.note-cercle__choix { display: inline-flex; gap: 3px; }
.note-cercle__btn {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: 550 12px var(--police-chiffres);
  cursor: pointer;
}
.note-cercle__btn:hover { border-color: var(--ton); color: var(--ton); }
.note-cercle__btn--choisi,
.note-cercle__btn--choisi:hover { background: var(--ton); border-color: var(--ton); color: #fff; }

.badge-cercle {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ton);
  background: var(--fond);
  border: 1px solid var(--ton);
}
.badge-cercle--vide { color: var(--muted); background: var(--surface-2); border: 1px dashed #c3cad6; font-weight: 500; }

@keyframes ligne-signalee { from { background: #fff3bf; } to { background: transparent; } }
table.grille tbody tr.ligne-signalee td { animation: ligne-signalee 1.8s ease-out; }

@media (max-width: 900px) {
  .cercle-vue { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- heures */

.repartition__note {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.capacite { padding: 16px 18px; margin-bottom: 14px; }
.capacite h3 { margin: 0 0 3px; font-size: 13px; font-weight: 600; }
.capacite p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.capacite__champs { display: flex; gap: 16px; flex-wrap: wrap; }
.capacite__champs label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.capacite__champs .champ { width: 140px; }

.alertes { padding: 14px 18px; margin-bottom: 14px; }
.alerte { font-size: 13px; line-height: 1.6; }
.alerte + .alerte { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.alerte__liste { display: block; color: var(--muted); font-size: 12px; }

/* Colonnes de charge mensuelle, avec le trait de capacité en surimpression. */
.courbe {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 170px;
  padding-top: 8px;
}
.courbe__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.courbe__barre {
  background: linear-gradient(180deg, #7b5cff, #4f6bff);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.courbe__barre--depasse { background: linear-gradient(180deg, #f08080, var(--danger)); }
.courbe__mois {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
  padding-top: 5px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.courbe__seuil {
  position: absolute;
  left: 0; right: 0;
  border-top: 2px dashed #b7791f;
  pointer-events: none;
}

td.total-evalue { font-weight: 700; background: var(--surface-2); }
td.heure-editable { cursor: text; }
td.heure-editable:hover { box-shadow: inset 0 0 0 1px var(--accent-2); }
td.heure-editable.vide::after { content: '—'; color: #c6cfdd; }

/* -------------------------------------------------------------------- journal */

table.grille.journal tbody td { white-space: normal; }
.journal__quand  { color: var(--muted); white-space: nowrap !important; width: 150px; }
.journal__cible  { font-weight: 600; }
.journal__detail {
  color: var(--text);
  min-width: 420px;
  white-space: normal !important;
  line-height: 1.45;
}


/* -------------------------------------------------------------------- notices */

.notices { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.notice {
  background: #16202f; color: #fff;
  padding: 10px 15px; border-radius: 9px;
  font-size: 13px; box-shadow: 0 8px 24px rgba(16, 24, 39, .3);
  animation: notice-entree .18s ease;
}
.notice--erreur { background: var(--danger); }
.notice--ok { background: var(--ok); }
@keyframes notice-entree { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 900px) {
  .sidebar { width: 62px; flex-basis: 62px; }
  .sidebar__brand span, .navlink span, .sidebar__section,
  .navlink__badge, .compte__ident { display: none; }
  .sidebar__brand { margin: 0 6px; padding: 16px 8px; justify-content: center; }
  .sidebar__nav { padding: 6px; }
  .navlink { justify-content: center; padding: 10px 0; }
  .navlink--actif::before { left: -6px; }
  .compte { justify-content: center; padding: 6px; }
  .compte__sortie { display: none; }
  .navlink { justify-content: center; padding: 11px 0; }
  .formulaire { grid-template-columns: 1fr; }
  .recherche .champ { width: 150px; }
}

/* ============================================================ portefeuilles */

/* Le nom de l'équipe, sous la marque : on doit savoir dans quel portefeuille
   on travaille sans avoir à ouvrir les paramètres. */
.sidebar__marque { min-width: 0; }
.sidebar__portefeuille {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #7f8ea6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- fenêtre d'ouverture du portefeuille --- */

/* Le flou porte sur ce qu'il y a derrière la fenêtre. Ce n'est pas décoratif :
   sans lui, le tableau de bord resterait lisible sous le voile, et le mot de
   passe ne protégerait plus rien. Le fond opaque assure le repli sur les
   navigateurs sans backdrop-filter. */
.voile--verrou {
  background: rgba(232, 236, 246, .82);
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  z-index: 90;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .voile--verrou { background: #eef1f8; }
}

.verrou {
  width: min(400px, 100%);
  padding: 30px 30px 22px;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(16, 24, 39, .07), 0 24px 60px rgba(16, 24, 39, .16);
}

.verrou__ecusson {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #4f6bff, #7b5cff);
  box-shadow: 0 8px 22px rgba(79, 107, 255, .34);
}
.verrou__ecusson svg { width: 25px; height: 25px; }

.verrou__titre {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
.verrou__nom {
  margin-top: 5px;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}
.verrou__texte {
  margin: 9px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.verrou__champ {
  width: 100%;
  text-align: center;
  font-size: 15px;
  padding: 11px 12px;
  letter-spacing: .08em;
}
.verrou__champ::placeholder { letter-spacing: normal; }

.verrou__valider { width: 100%; justify-content: center; margin-top: 10px; padding: 10px; }

.verrou__erreur {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #f5cccc;
}

.verrou__pied {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
.verrou__lien { color: var(--accent); text-decoration: none; }
.verrou__lien:hover { text-decoration: underline; }

/* --- écran Paramètres --- */

.parametres { display: grid; gap: 14px; max-width: 760px; }
.parametres .carte { padding: 18px 20px; }
.parametres h3 { margin: 0 0 3px; font-size: 13px; font-weight: 600; }
.parametres .sous { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.equipe { display: flex; flex-wrap: wrap; gap: 7px; }
.equipe__membre {
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.equipe__membre--moi {
  background: var(--accent-2);
  border-color: #d3ddff;
  color: var(--accent);
  font-weight: 600;
}

/* La pastille d'un membre porte sa croix de retrait : l'action est là où se
   trouve la personne, pas dans une liste séparée à mettre en correspondance. */
.equipe__membre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 5px;
}
.equipe__retirer {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.equipe__retirer:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.equipe__retirer:disabled { opacity: .3; cursor: not-allowed; }
.equipe__membre--moi .equipe__retirer { color: var(--accent); }

.membre-form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: flex-start;
  margin-top: 15px;
}
.membre-form .champ { flex: 1 1 240px; }
.membre-form .btn { flex: 0 0 auto; }

.mdp-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-start; }
.mdp-form .champ { flex: 1 1 190px; }
.mdp-form .btn { flex: 0 0 auto; }
.mdp-note {
  margin-top: 11px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- fenêtre d'entrée : choix, création --- */

/* Le nom du portefeuille, dans la marge, sert de bouton de bascule. */
.sidebar__portefeuille { cursor: pointer; border-radius: 5px; transition: color .14s ease; }
.sidebar__portefeuille:hover { color: #b9c6db; }

.verrou__liste { display: grid; gap: 7px; margin-bottom: 4px; }

.verrou__choix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.verrou__choix:hover {
  background: var(--accent-2);
  border-color: #c3d0ff;
}
.verrou__choix:active { transform: scale(.99); }
.verrou__choix-nom { font-weight: 600; font-size: 13.5px; }
.verrou__choix-n {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--police-chiffres);
}

/* Le préfixe « Portefeuille » est posé par le système : on le montre en clair
   devant le champ, plutôt que de laisser deviner ce qui sera enregistré. */
.verrou__prefixe {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 9px;
  background: #fff;
}
.verrou__prefixe > span {
  display: grid;
  place-items: center;
  padding: 0 11px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.verrou__prefixe .champ {
  flex: 1;
  border: 0;
  border-radius: 0;
  text-align: left;
}
.verrou__prefixe .champ:focus { outline: none; box-shadow: none; }

#verrou-creation .verrou__champ { margin-bottom: 9px; text-align: left; letter-spacing: normal; }
#verrou-creation .verrou__champ::placeholder { letter-spacing: normal; }

.verrou__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

/* --- paramètres : zone de suppression --- */

.carte--danger { border-color: #f0cccc; }
.carte--danger h3 { color: var(--danger); }

/* La phrase à recopier : donnée en évidence, sélectionnable, jamais tronquée. */
.confirmation__phrase {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--police-chiffres);
  font-size: 13px;
  user-select: all;
}

.parametres .equipe { margin-bottom: 12px; }
.parametres__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.parametres__boutons .btn svg { width: 15px; height: 15px; }
button.equipe__membre { cursor: pointer; font: inherit; font-size: 12px; }
button.equipe__membre:hover { border-color: #c3d0ff; }

/* ================================================= prise en main (vide) */

.demarrage {
  max-width: 900px;
  margin: 8px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 26px 28px 24px;
}

.demarrage__entete {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.demarrage__ecusson {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #4f6bff, #7b5cff);
  box-shadow: 0 7px 18px rgba(79, 107, 255, .3);
}
.demarrage__ecusson svg { width: 23px; height: 23px; }
.demarrage__entete h2 {
  margin: 2px 0 4px;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
}
.demarrage__entete p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Deux colonnes tant que la place le permet ; l'une sous l'autre ensuite. */
.demarrage__voies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding-top: 20px;
}

.voie { position: relative; padding-left: 34px; }
.voie__numero {
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-2);
  color: var(--accent);
  font-size: 12px; font-weight: 700;
}
.voie h3 { margin: 2px 0 6px; font-size: 14px; font-weight: 600; }
.voie p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.voie__etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.voie__fleche { color: var(--muted); font-size: 11.5px; }

/* Compte rendu de l'import : il doit pouvoir s'allonger sans casser la carte. */
.demarrage__note {
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.6;
}
.demarrage__note--ok {
  background: var(--ok-bg);
  border-color: #c7ead9;
  color: #0b6b45;
}
.demarrage__note--ko {
  background: var(--danger-bg);
  border-color: #f5cccc;
  color: #97302f;
}
.demarrage__refus {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(0, 0, 0, .09);
  font-size: 12px;
}

/* ------------------------------------------ filtres de colonnes (Dossiers) */
/* Entonnoir discret dans chaque en-tête, bleu plein quand le filtre est actif. */
.filtre-col {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 4px; padding: 0;
  border: 1px solid transparent; border-radius: 5px; background: none;
  color: var(--muted); cursor: pointer; vertical-align: middle; opacity: .5;
}
.filtre-col svg { width: 12px; height: 12px; }
th:hover .filtre-col, .filtre-col:focus-visible { opacity: 1; }
.filtre-col:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.filtre-col--actif { opacity: 1; color: var(--accent); background: var(--accent-2); }

.filtre-pop {
  position: fixed; z-index: 60; width: 250px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 13px; color: var(--text);
}
.filtre-pop__recherche { width: 100%; height: 30px; margin-bottom: 6px; }
.filtre-pop__liste {
  max-height: 260px; overflow-y: auto;
  border-top: 1px solid var(--border); padding-top: 4px;
}
.filtre-pop__ligne {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filtre-pop__ligne[hidden] { display: none; }
.filtre-pop__ligne:hover { background: var(--surface-2); }
.filtre-pop__ligne em { color: var(--muted); }
.filtre-pop__tout { font-weight: 600; }
.filtre-pop__vide { color: var(--muted); padding: 6px; }
.filtre-pop__actions {
  display: flex; justify-content: flex-end; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}

/* Tri d'affichage : boutons en tête de la fenêtre de filtre, flèche dans l'en-tête. */
.filtre-pop__tri {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.filtre-pop__tri button {
  text-align: left; background: none; border: 0; padding: 5px 6px; border-radius: 6px;
  font: inherit; color: var(--text); cursor: pointer;
}
.filtre-pop__tri button:hover { background: var(--surface-2); }
.filtre-pop__tri button.actif { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.tri-col { margin-left: 4px; color: var(--accent); font-weight: 700; }

/* ----------------------------------------- sélection groupée (onglet Dossiers) */
/* La case est figée à gauche comme la colonne Client, qu'elle décale d'autant. */
table.grille .col-coche {
  position: sticky; left: 0; z-index: 2;
  width: 36px; min-width: 36px; max-width: 36px;
  padding: 0; text-align: center; background: var(--surface);
}
table.grille thead .col-coche { z-index: 5; background: var(--surface-2); }
table.grille.grille--coches .col-client { left: 36px; }

/* Forme juridique des onglets fiscaux : figée à gauche avant le client, qu'elle
   décale d'autant, comme la case à cocher de l'onglet Dossiers. */
table.grille .col-forme {
  position: sticky; left: 0; z-index: 2;
  width: 72px; min-width: 72px; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--surface); color: var(--muted); font-size: 12px;
}
table.grille thead .col-forme { z-index: 5; background: var(--surface-2); }
table.grille.grille--forme .col-client { left: 72px; }
table.grille tbody tr:hover .col-forme { background: #f7f9ff; }

/* TVA « mensuelle et trimestrielle » : un titre par tableau. */
.titre-tableau {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 8px; font-size: 13.5px; font-weight: 620;
}
.titre-tableau--suite { margin-top: 22px; }
table.grille .col-coche input {
  width: 15px; height: 15px; cursor: pointer; vertical-align: middle; accent-color: var(--accent);
}
table.grille tbody tr:hover .col-coche { background: #f7f9ff; }
table.grille tbody tr.selectionne td,
table.grille tbody tr.selectionne .col-client,
table.grille tbody tr.selectionne .col-coche { background: var(--accent-2); }

.barre-selection {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 10px; padding: 8px 12px;
  background: var(--accent-2); border: 1px solid #c9d4ff; border-radius: var(--radius);
}
.barre-selection[hidden] { display: none; }
.barre-selection__compte { font-weight: 600; color: var(--accent); margin-right: 4px; }
.liste-suppression {
  margin: 8px 0; padding-left: 18px; max-height: 180px; overflow-y: auto; font-size: 13px;
}