/* ============ SAFIR — styles ============ */

:root {
  --ink: #1a1450;          /* indigo très profond SAFIR (texte, titres) */
  --ink-soft: #6a6690;     /* indigo-gris atténué */
  --paper: #f5f4fa;        /* fond général, indigo très clair */
  --card: #ffffff;
  --ledger: #4a3fb5;       /* indigo/violet SAFIR (accent principal) */
  --ledger-dark: #372e8f;  /* indigo foncé pour survol */
  --ledger-soft: #ecebf8;  /* indigo très clair (fonds, badges) */
  --ledger-line: #cdc9ee;  /* indigo clair (bordures) */
  --navy: #2a1f6e;         /* indigo intermédiaire (bandeaux) */
  --navy-soft: #eceafb;    /* indigo clair (fonds secondaires) */
  --gold: #e8a02c;         /* doré SAFIR (accent secondaire) */
  --gold-dark: #c9861a;    /* doré foncé */
  --gold-soft: #fdf1dc;    /* doré très clair */
  --line: #e0def0;
  --red: #d64545;
  --red-soft: #fbe6e6;
  /* doublon potentiel (rouge plus soutenu, distinct du rouge clair "0€") */
  --red-dark: #b23030;
  --red-dark-soft: #f6cfcf;
  --green: #2e9e6b;
  --green-soft: #e3f5ec;
  /* brouillon (jaune, distinct du doré manuel/0€ et du bleu facture importée) */
  --draft: #b89b00;
  --draft-dark: #7a6600;
  --draft-soft: #faf3c9;
  /* facture importée depuis une saisie de temps (bleu, remplace l'ancien
     indicateur "validée par l'admin" — le suivi de validation se lit
     désormais via la jauge verte progressive) */
  --blue: #2f6fed;
  --blue-dark: #1f4fb0;
  --blue-soft: #e7eefc;
  /* frais importé depuis une saisie de temps (bleu foncé, distinct du bleu
     facture et du --navy des bandeaux) — conservée pour compatibilité, plus
     utilisée par défaut depuis v2.3 (voir --violet ci-dessous) */
  --cobalt: #1b3a8a;
  --cobalt-dark: #142a63;
  --cobalt-soft: #dbe4f7;
  /* identité "Frais" (v2.3, remplace le cobalt ci-dessus) : violet, utilisé à
     la fois pour le volet "Frais ?" de la Saisie et pour les lignes importées
     de l'onglet Frais — pendant du bleu ci-dessus pour "Facture" */
  --violet: #8b3fd1;
  --violet-dark: #6b2fa3;
  --violet-soft: #f1e4fb;
  /* bouton "Réinitialiser" des barres de filtres (v2.5) : couleur dédiée,
     fixe quel que soit le thème, pour rester bien visible à côté des
     graphiques et filtres — l'ancien style (fond transparent, bordure fine)
     se fondait trop dans le fond de la carte. */
  --reset: #e8632c;
  --reset-dark: #c94f1f;
}

* { box-sizing: border-box; }

/* L'attribut [hidden] doit toujours l'emporter, même sur des éléments dont une
   règle plus spécifique (ex. .btn-link { display: inline-block }) fixe déjà
   `display` — sans ce !important, un bouton masqué par rôle (ex. Export
   Pennylane pour un collaborateur) resterait visible et cliquable malgré
   `hidden`, l'API refusant seulement la requête côté serveur. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px 60px; transition: max-width .15s; }
/* v2.8 : conteneur élargi pour l'onglet "Power BI" (vue en paysage, tableaux
   de bord denses) — activé/désactivé en JS par setTab(), voir app.js. */
.wrap-wide { max-width: 1500px; }
@media (max-width: 1560px) {
  .wrap-wide { max-width: calc(100% - 40px); }
}

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

/* ---- entête ---- */

.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding-top: 26px;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* Logo SAFIR : sur une plaque blanche pour rester lisible quel que soit le
   thème (le fichier fourni a un texte gris/marine pensé pour un fond clair). */
.logo-chip {
  display: inline-flex; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px;
}
.logo-img { display: block; height: 22px; width: auto; }
.login-brand .logo-chip { padding: 7px 16px; }
.login-brand .logo-img { height: 30px; }
.brand-sub { color: var(--ink-soft); font-size: 14px; }
.whoami { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.linklike {
  background: none; border: none; color: var(--ledger);
  text-decoration: underline; font-size: 14px; padding: 0; cursor: pointer;
}

/* Logo AGIS Conseil : masqué par défaut, affiché uniquement quand le thème
   Bordeaux (AGIS) est actif, à la place du logo SAFIR. */
.logo-img-agis { display: none; }
html[data-theme="agis"] .logo-img-default { display: none; }
html[data-theme="agis"] .logo-img-agis { display: block; }

/* sélecteur de thème à 4 (classique / sombre / vif / bordeaux AGIS) */
.theme-switch {
  display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
}
.theme-opt {
  background: var(--card); border: none; border-right: 1px solid var(--line);
  padding: 4px 9px; font-size: 13px; cursor: pointer; line-height: 1;
}
.theme-opt:last-child { border-right: none; }
.theme-opt:hover { background: var(--ledger-soft); }
.theme-opt.active { background: var(--ledger-soft); box-shadow: inset 0 0 0 1px var(--ledger); }
.theme-opt-agis { font-size: 9px; font-weight: 700; letter-spacing: 0.2px; padding: 4px 6px; }

/* ---- champs & boutons ---- */

input, select, textarea, button { font-family: inherit; }
input, select {
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px;
  font-size: 14px; background: #fff; color: var(--ink); outline: none; width: 100%;
}
input:focus, select:focus {
  border-color: var(--ledger); box-shadow: 0 0 0 3px var(--ledger-soft);
}
/* Les cases à cocher/radio ne doivent pas hériter du style "champ de saisie"
   ci-dessus (bordure, fond, width:100%) — sans ça elles s'affichent comme une
   grande boîte rectangulaire au lieu d'une case classique. */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; min-width: 16px; padding: 0; border: none;
  background: none; accent-color: var(--ledger); flex: none;
}
button { cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ledger); outline-offset: 2px; }

.btn-primary {
  background: var(--ledger); color: #fff; border: none; border-radius: 8px;
  padding: 11px 20px; font-size: 15px; font-weight: 700;
}
.btn-primary:hover { background: var(--ledger-dark); }

/* ---- identification ---- */

.identify-card {
  max-width: 420px; margin: 70px auto 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 32px;
}
.identify-card h1 { margin: 0 0 6px; font-size: 24px; }
.identify-card p { font-size: 14px; line-height: 1.5; }
.identify-card label { font-size: 13px; font-weight: 600; display: block; margin: 14px 0 6px; }
.identify-card .btn-primary { width: 100%; margin-top: 14px; }

/* ---- onglets ---- */

.tabs { display: flex; gap: 4px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 10px 16px; font-size: 14px; font-weight: 500;
  background: none; border: none; color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab.active { font-weight: 700; color: var(--ink); border-bottom-color: var(--ledger); }

.tab-panel { margin-top: 22px; }

/* ---- sous-onglets (ex. Administration, pour regrouper de nombreuses cartes) ---- */

.admin-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.admin-subtab {
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
}
.admin-subtab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.admin-subpanel { margin-top: 4px; }

/* ---- sous-onglets réutilisables (ex. Saisie des temps, Mon équipe) : mêmes
   règles visuelles que .admin-subtab ci-dessus, sous des classes distinctes
   pour éviter tout croisement avec les sous-onglets de l'Administration
   (querySelectorAll séparés, voir setAdminSubtab / setSubtab dans app.js). ---- */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.subtab {
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
}
.subtab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.subpanel { margin-top: 4px; }

/* ---- accueil ---- */

.hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
  background: linear-gradient(120deg, var(--ink) 0%, var(--navy) 100%);
  border: 1px solid var(--navy); border-radius: 12px; padding: 28px; color: #fff;
}
.hero h1 { margin: 0 0 8px; font-size: 30px; color: #fff; }
.hero p { margin: 0 0 18px; line-height: 1.55; color: #d7e2f0; }
.hero .eyebrow { color: var(--gold); }
.hero .btn-primary { background: var(--gold); color: var(--ink); }
.hero .btn-primary:hover { background: var(--gold-dark); }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ledger); margin-bottom: 8px;
}
.hero-stats { display: grid; gap: 12px; }
.stat {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: 12px 16px;
}
.stat-value { font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.stat-value.ok { color: #7be8b3; }
.stat-value.warn { color: #ffd685; }
.stat-value.danger { color: #ff9a94; }
.stat-label { font-size: 13px; color: #cfe0f0; }

/* navigation mois par mois pour les statistiques mensuelles de l'accueil */
.hero-stats-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-stats-nav .wk-btn {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff;
}
.hero-stats-nav .wk-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }
.hero-stats-nav .wk-btn:disabled { opacity: .35; cursor: not-allowed; }
.hero-stats-nav .wk-label { color: #fff; font-size: 13px; text-transform: capitalize; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; }
.steps { margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px; }

.recent-list { display: grid; gap: 8px; font-size: 14px; }
.recent-item {
  display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.recent-item:last-child { border-bottom: none; padding-bottom: 0; }

/* ---- bandeau semaine ---- */

.weekbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; background: var(--ledger-soft); border: 1px solid var(--ledger-line);
  border-radius: 10px; padding: 12px 16px;
}
.weeknav { display: flex; align-items: center; gap: 10px; }
.wk-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--ledger-line);
  background: #fff; font-size: 16px; line-height: 1; color: var(--ink);
}
.wk-label { font-weight: 700; font-size: 15px; }
.wk-today {
  background: none; border: 1px solid var(--ledger-line); border-radius: 6px;
  padding: 4px 10px; font-size: 13px; color: var(--ledger); font-weight: 600;
}
.weektotal { display: flex; align-items: baseline; gap: 8px; }
.wk-total { font-size: 22px; font-weight: 800; }

/* ---- formulaire de saisie ---- */

.entry-form { margin-top: 16px; scroll-margin-top: calc(var(--sticky-cal-h, 260px) + 14px); }
.card-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 12px;
}
.entry-form-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.entry-form-header .card-title { margin-bottom: 0; }

/* ---- interrupteur « brouillon » ---- */
.draft-switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  user-select: none; margin-bottom: 12px;
}
.draft-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.draft-switch-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--draft-dark, #0b6d61);
}
.switch-track {
  position: relative; display: inline-block; width: 38px; height: 20px;
  background: var(--line); border-radius: 999px; transition: background .15s ease;
  flex: none;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.draft-switch input:checked + .switch-track { background: var(--draft, #12897a); }
.draft-switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.draft-switch input:focus-visible + .switch-track { outline: 2px solid var(--draft-dark, #0b6d61); outline-offset: 2px; }

/* modales : l'interrupteur brouillon partage la ligne d'en-tête avec le titre et la croix */
.modal-head .draft-switch { margin-bottom: 0; margin-left: auto; margin-right: 6px; }

.form-row { display: grid; gap: 10px; align-items: end; }
.form-row-main { grid-template-columns: 150px 1fr 190px 110px; }
/* Descriptif des temps passés : toujours juste sous la ligne d'ajustement
   rapide (+15 min etc.), avant le choix de facturation qui suit. */
.form-row-comment {
  grid-template-columns: 1fr; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.form-row-bottom { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  display: flex; justify-content: space-between; margin-bottom: 5px;
}
.field .hint { font-weight: 400; }
.field-dur input { text-align: right; }

.select-search { margin-bottom: 5px; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }

.combo { position: relative; }
.combo-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  margin-top: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  max-height: 240px; overflow-y: auto;
}
.combo-item { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.combo-item:hover, .combo-item.hl { background: var(--ledger-soft); }
.combo-item b { font-variant-numeric: tabular-nums; }
.combo-empty { padding: 12px; font-size: 13px; color: var(--ink-soft); }

/* ---- lignes de la semaine ---- */

.day-block { margin-top: 18px; }
.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 4px 6px; font-size: 14px;
}
.day-head b { font-weight: 700; }
.day-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

table { border-collapse: collapse; width: 100%; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
tr:last-child td { border-bottom: none; }

.badge {
  background: var(--ledger-soft); color: var(--ledger); font-weight: 700;
  font-size: 12px; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.td-code { width: 90px; }
.td-dur { width: 70px; font-weight: 700; text-align: right; white-space: nowrap; }
.td-del { width: 40px; text-align: right; }
.btn-del { background: none; border: none; color: var(--ink-soft); font-size: 16px; padding: 2px; }
.btn-del:hover { color: var(--red); }
.entry-client { font-weight: 600; }
.entry-comment { font-size: 13px; color: var(--ink-soft); }
.entry-invoice { font-size: 12px; color: var(--gold, #9a7b1f); margin-top: 2px; font-variant-numeric: tabular-nums; }
.entry-expense { font-size: 12px; color: var(--green, #2e9e6b); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ligne de saisie en mode brouillon : reste pleinement visible pour son auteur, teintée
   en jaune, propre au brouillon — jamais la couleur du doré (manuel/0€)
   ni celle du bleu des factures/frais importés, pour éviter toute confusion. */
tr.is-draft { background: var(--draft-soft, #faf3c9); }
tr.is-draft .entry-client, tr.is-draft .entry-comment { font-style: italic; }
.entry-draft-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--draft-dark, #7a6600);
  margin-top: 2px;
}
/* Le brouillon doit toujours ressortir, même sur une ligne qui porte aussi un autre
   repère de statut (0€ à compléter, doublon, importée) : ces sélecteurs combinés
   (spécificité plus élevée que les règles à une seule classe ci-dessous)
   garantissent que le jaune du brouillon l'emporte dans tous les cas, dans les
   tableaux Facturation et Frais. */
tr.is-draft.row-noprice,
tr.is-draft.row-duplicate,
tr.is-draft.row-gauge,
tr.is-draft.row-imported,
tr.is-draft.row-imported-frais { background: var(--draft-soft, #faf3c9); }
tr.is-draft.row-noprice:hover,
tr.is-draft.row-duplicate:hover,
tr.is-draft.row-gauge:hover,
tr.is-draft.row-imported:hover,
tr.is-draft.row-imported-frais:hover { background: var(--draft-soft, #faf3c9); }
tr.is-draft.row-noprice td:first-child,
tr.is-draft.row-duplicate td:first-child { box-shadow: inset 4px 0 0 var(--draft-dark, #7a6600); }
.td-actions .draft-switch { margin-bottom: 0; margin-right: 2px; }
.td-actions .draft-switch .draft-switch-label { display: none; }

.empty-week {
  text-align: center; color: var(--ink-soft); font-size: 14px; padding: 36px 0;
  border: 1px dashed var(--line); border-radius: 10px; background: #fff; margin-top: 18px;
}

/* ---- toast ---- */

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; z-index: 50; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.toast.err { background: var(--red); }

/* ---- récapitulatif ---- */

.recap-controls {
  display: flex; gap: 14px; align-items: end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
}
.recap-controls .field { min-width: 170px; }
.recap-total { margin-left: auto; text-align: right; }
.recap-total-value { font-size: 26px; font-weight: 800; color: var(--ledger); }
.recap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.recap-col { display: grid; gap: 16px; align-content: start; }
/* Rangée de tuiles KPI à nombre variable (v2.5, "Mes équipes") : s'adapte
   d'elle-même à la largeur disponible (jamais de colonnes coupées sur un
   écran étroit), contrairement à un grid-template-columns fixe posé en style
   inline qui l'empêcherait. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-item { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rank-item:last-child { border-bottom: none; }
.rank-item .rank-pos { font-weight: 800; color: var(--ledger); margin-right: 6px; }
.rank-item .rank-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.team-row-clickable { cursor: pointer; }
.team-row-clickable:hover { background: var(--ledger-soft); }

/* Indicateurs cliquables (v2.6, "Mes équipes") : chaque carte KPI sert aussi
   de bouton pour changer le graphique en dessous — l'indicateur actif reste
   repéré par une bordure de couleur, pour qu'on comprenne d'un coup d'œil
   quel graphique on regarde. */
.kpi-clickable { cursor: pointer; border: 2px solid transparent; transition: border-color .12s, transform .08s; }
.kpi-clickable:hover { border-color: var(--ledger-soft); }
.kpi-clickable.active { border-color: var(--ledger); }
.recap-label { font-weight: 600; }
.td-pct { width: 55px; text-align: right; font-size: 13px; }

/* Lignes de tableau cliquables pour filtrer/ouvrir un détail (ex. "Mon
   récapitulatif" v2.3, "Mes dossiers") : curseur + survol, seul repère visuel
   qui manquait jusque-là (la classe existait déjà côté script sans styliser). */
tr.row-clickable { cursor: pointer; }
tr.row-clickable:hover { background: var(--ledger-soft); }

/* ---- tarification des codes article (facturation) ---- */
.pricing-list { overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pricing-table th { position: sticky; top: 0; background: var(--card); }
.pricing-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.pricing-table td:first-child { white-space: normal; min-width: 220px; }
.pricing-group td { background: var(--ledger-soft); font-weight: 700; padding: 7px 8px; }
.pricing-table input, .pricing-table select { padding: 5px 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 5px; }
.pricing-table .pr-price { width: 80px; }
.pricing-table .pr-unit { width: 100px; }
.pricing-table .pr-vat { width: 65px; }
.pricing-table .pr-pennylane { width: 120px; }

/* ---- grille de répartition codes tarif × missions ---- */
.tariff-matrix-wrap { overflow: auto; }
.tariff-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tariff-matrix th, .tariff-matrix td { border-bottom: 1px solid var(--line); padding: 5px 7px; text-align: center; }
.tariff-matrix thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.tariff-matrix .tm-code-col, .tariff-matrix .tm-code-cell { text-align: left; white-space: nowrap; min-width: 220px; position: sticky; left: 0; background: var(--card); z-index: 1; }
.tariff-matrix .tm-label { cursor: pointer; border-bottom: 1px dotted var(--ledger); }
.tariff-matrix .tm-label:hover { color: var(--ledger); }
.tariff-matrix .tm-mission-head { display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 700; }
.tariff-matrix .tm-col-actions { display: flex; gap: 3px; }
.tariff-matrix .tm-col-all, .tariff-matrix .tm-col-none {
  background: none; border: 1px solid var(--line); border-radius: 4px; font-size: 10px;
  padding: 0 4px; cursor: pointer; color: var(--ink-soft); line-height: 1.6;
}
.tariff-matrix .tm-col-all:hover { border-color: var(--green); color: var(--green); }
.tariff-matrix .tm-col-none:hover { border-color: var(--red); color: var(--red); }
.tariff-matrix .tm-check { width: 16px; height: 16px; accent-color: var(--ledger); cursor: pointer; }
.tariff-matrix tbody tr:hover td { background: var(--ledger-soft); }
.tariff-matrix tbody tr:hover .tm-code-cell { background: var(--ledger-soft); }
/* Boutons cocher/décocher toute une ligne (matrice client × missions, v2.11) :
   même style que tm-col-all/tm-col-none, affichés en ligne à côté du nom. */
.tariff-matrix .cm-row-actions { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }

/* ---- rentabilité : mise de côté avant le 1er septembre, styles retirés ---- */

/* ---- administration ---- */

.admin-gate { margin-top: 30px; }
.admin-note {
  background: var(--navy-soft); border: 1px solid #c5d5e8; color: var(--navy);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.import-help { margin: 0 0 8px; line-height: 1.5; }
textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px;
  font-size: 13px; font-family: Consolas, monospace; resize: vertical; outline: none;
}
textarea:focus { border-color: var(--ledger); box-shadow: 0 0 0 3px var(--ledger-soft); }
.btn-block { width: 100%; margin-top: 10px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.admin-entries { margin-top: 16px; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-link { text-decoration: none; display: inline-block; text-align: center; }
.btn-secondary {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 11px 20px; font-size: 15px; font-weight: 600;
}
.btn-danger {
  background: #fff; color: var(--red); border: 1px solid var(--red);
  border-radius: 8px; padding: 11px 20px; font-size: 15px; font-weight: 600;
}
.btn-gold {
  background: var(--gold); color: #fff; border: none; border-radius: 8px;
  padding: 11px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-gold:hover { background: var(--gold-dark); }
.btn-green {
  background: var(--green); color: #fff; border: none; border-radius: 8px;
  padding: 11px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-green:hover { filter: brightness(0.9); }
th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--ink);
}
.th-right { text-align: right; }
code { background: var(--ledger-soft); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ---- boutons d'ajustement rapide ---- */

.quick-adjust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.quick-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.qa-btn {
  background: var(--ledger-soft); color: var(--ledger); border: 1px solid var(--ledger-line);
  border-radius: 6px; padding: 6px 11px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qa-btn:hover { background: var(--ledger); color: #fff; }
.qa-minus {
  background: #fff; color: var(--ink-soft); border-color: var(--line);
}
.qa-minus:hover { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
.qa-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.qa-reset {
  background: none; color: var(--ink-soft); border: none; text-decoration: underline;
  font-weight: 500; margin-left: auto; padding: 6px 4px;
}
.qa-reset:hover { color: var(--red); background: none; }

/* ---- saisie sur une période (v2.11) : lien discret à côté du champ Date,
   qui ouvre une petite ligne "Du ... au ..." sous le formulaire habituel —
   volontairement minimal puisque très occasionnel (congés, déplacement...).
   Le reste du formulaire (client, mission, durée...) ne change pas : une
   ligne identique est simplement créée pour chaque jour retenu. ---- */
.f-date-range-link { font-size: 11px; font-weight: 500; white-space: nowrap; }
.f-date-range-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--line);
  background: var(--ledger-soft); border-radius: 8px;
}
.f-date-range-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.f-date-range-inline input[type="date"] { font-size: 13px; padding: 5px 7px; }
.f-date-range-workdays { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
/* Modifier une ligne existante porte toujours sur un seul jour précis (voir
   startEdit(), qui force aussi setDateRangeMode(false)) : le lien n'a pas sa
   place dans ce mode-là. */
.entry-form.editing .f-date-range-link { display: none; }

/* ---- bascules "Facture ?" / "Frais ?" de la Saisie (v2.9.5) ----
   Regroupées sur une seule ligne compacte (puces à icône, un clic pour
   activer/désactiver) au lieu de deux lignes séparées avec chacune un
   groupe Non/Oui — sur demande explicite, peu de collaborateurs utilisant
   Frais au cabinet. Couleurs par identité inchangées : bleu pour Facture
   (même bleu que les lignes importées dans l'onglet Facturation), violet
   pour Frais (même violet que les lignes importées dans l'onglet Frais). */
.quick-toggle-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--line);
}
.chip-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip-toggle .chip-ico { font-size: 14px; line-height: 1; }
.chip-toggle-inv.chip-on {
  background: var(--blue-soft); border-color: #c7d7f8; color: var(--blue-dark);
}
.chip-toggle-exp.chip-on {
  background: var(--violet-soft); border-color: #ddc3f2; color: var(--violet-dark);
}
.invoice-fields {
  background: var(--blue-soft); border: 1px solid #c7d7f8;
  border-radius: 8px; margin-top: -4px;
  padding: 0 14px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, padding .28s ease, margin .28s ease;
}
.invoice-fields.open {
  max-height: 640px; opacity: 1; padding: 14px; margin-top: 10px; overflow-y: auto;
}
.invoice-line {
  display: flex; align-items: end; gap: 14px; flex-wrap: nowrap;
}
.invoice-line + .invoice-line { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #c7d7f8; }
/* flex-shrink partout : garantit un seul rang par ligne, même dans une fenêtre
   étroite (les champs rétrécissent plutôt que de passer à la ligne). */
.invoice-fields .field { min-width: 0; flex: 0 1 160px; }
.invoice-fields .field.grow { flex: 2 1 200px; min-width: 0; }
.field-inv-num { flex: 0 1 110px; min-width: 0; }
.invoice-total {
  font-weight: 800; font-size: 16px; color: var(--blue-dark);
  padding: 8px 0; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.il-remove {
  align-self: end; background: none; border: 1px solid #b7cbf5; color: var(--blue-dark);
  border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-weight: 700;
  flex: 0 0 34px;
}
.il-remove:hover { background: #dbe7fd; }
.btn-add-invline {
  background: none; border: none; color: var(--blue-dark); font-weight: 700;
  cursor: pointer; padding: 10px 0 2px; text-decoration: underline;
}
.btn-add-invline:hover { color: var(--ink); }
.invoice-grand-total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #c7d7f8;
  font-weight: 800; font-size: 17px; color: var(--blue-dark);
}
.invoice-grand-total .label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }

/* ---- volet de frais associé à une saisie (v2.1) — même principe visuel que la
   facturation ci-dessus. v2.3 : violet en permanence (identité "Frais", la
   même teinte que les lignes importées de l'onglet Frais), que la ligne soit
   en brouillon ou non — sur demande explicite, en remplacement du vert utilisé
   jusque-là ; le violet reste distinguable du bleu ci-dessus quand les deux
   volets sont ouverts en même temps sous la même saisie. La bascule elle-même
   (bouton) est désormais dans .quick-toggle-row/.chip-toggle ci-dessus. ---- */
.expense-fields {
  background: var(--violet-soft); border: 1px solid #ddc3f2;
  border-radius: 8px; margin-top: -4px;
  padding: 0 14px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, padding .28s ease, margin .28s ease;
}
.expense-fields.open {
  /* v2.4 : plusieurs lignes de frais possibles (bouton « + »), comme la
     facturation ci-dessus — même plafond qu'elle (.invoice-fields.open). */
  max-height: 640px; opacity: 1; padding: 14px; margin-top: 10px; overflow-y: auto;
}
.expense-line {
  display: flex; align-items: end; gap: 14px; flex-wrap: nowrap;
}
.expense-line + .expense-line { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ddc3f2; }
.expense-fields .field { min-width: 0; flex: 0 1 160px; }
.expense-fields .field.grow { flex: 2 1 200px; min-width: 0; }
.expense-total, .expense-total-row {
  font-weight: 800; font-size: 16px; color: var(--violet-dark);
}
.expense-total { padding: 8px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expense-total-row {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #ddc3f2;
  font-size: 17px;
}
.expense-total-row .label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.el-remove {
  align-self: end; background: none; border: 1px solid #ddc3f2; color: var(--violet-dark);
  border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-weight: 700;
  flex: 0 0 34px;
}
.el-remove:hover { background: #f1e4fb; }
.btn-add-expline {
  background: none; border: none; color: var(--violet-dark); font-weight: 700;
  cursor: pointer; padding: 10px 0 2px; text-decoration: underline;
}
.btn-add-expline:hover { color: var(--ink); }
.expense-grand-total {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #ddc3f2;
  font-weight: 800; font-size: 17px; color: var(--violet-dark);
}
.expense-grand-total .label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }

/* ---- pop-up (ajouter/modifier une facture depuis l'onglet Facturation) ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(30, 27, 60, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--card); border-radius: 12px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(30,27,60,.35);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 17px; margin: 0; color: var(--ledger); }
.modal-close {
  background: none; border: none; font-size: 16px; color: var(--ink-soft);
  cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.modal-close:hover { background: var(--ledger-soft); color: var(--ledger); }
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-row { display: flex; gap: 14px; }
.modal-row .field { flex: 1; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line);
}
.modal-check-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft);
  cursor: pointer; margin-top: 4px;
}
.modal-check-row input { cursor: pointer; }

/* Cadre "brouillon" des pop-up Facturation/Frais (même principe que
   .entry-form.draft-mode ci-dessus) : tout le cadre se teinte, en-tête et
   pied compris, plutôt que le seul interrupteur. */
.modal-box.draft-mode {
  background: var(--draft-soft, #e1f5f2);
  border: 2px solid var(--draft, #12897a);
  box-shadow: 0 20px 60px rgba(30, 27, 60, .35), 0 0 0 3px var(--draft-soft, #e1f5f2);
}
.modal-box.draft-mode .modal-head,
.modal-box.draft-mode .modal-foot { border-color: var(--draft, #12897a); }
.modal-box.draft-mode .modal-head h2 { color: var(--draft-dark, #0b6d61); }

/* ---- annonces admin (communication interne) : éditeur riche + pop-up ---- */
.ann-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px;
}
.ann-tb-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 14px;
}
.ann-tb-btn:hover { background: var(--ledger-soft); }
.ann-toolbar select, .ann-toolbar input[type="color"] {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 13px; background: #fff; cursor: pointer;
}
.ann-toolbar input[type="color"] { padding: 2px; width: 40px; height: 34px; }
.ann-img-btn {
  display: inline-flex; align-items: center; cursor: pointer; margin: 0;
}
.ann-editor {
  min-height: 140px; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; line-height: 1.55; background: #fff;
  overflow-y: auto; max-height: 320px;
}
.ann-editor:focus { outline: 2px solid var(--ledger-line); }
.ann-editor img, .ann-view img { max-width: 100%; border-radius: 8px; margin: 6px 0; display: block; }
.ann-view { font-size: 15px; line-height: 1.6; word-break: break-word; }
#announcement-modal .modal-head { border-bottom: none; padding-bottom: 6px; }
#announcement-modal .modal-head h2 { font-size: 19px; }
.ann-view.small { font-size: 13px; line-height: 1.5; }

/* éditeur riche des bandeaux Accueil (même style que celui des annonces) */
.bnr-tb-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 14px;
}

/* bandeau épinglé sur l'Accueil : pas de bouton de fermeture (toujours visible
   tant qu'actif côté admin), plusieurs empilables — voir loadHomeBanners(). */
#home-banners { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.home-banner {
  background: var(--ledger-soft); border: 1px solid var(--ledger-line); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; line-height: 1.55; word-break: break-word;
}
.home-banner img { max-width: 100%; border-radius: 8px; margin: 6px 0; display: block; }
.home-banner:empty { display: none; }

/* ---- pop-up : mes horaires types (planning hebdomadaire personnel) ---- */
.modal-box-wide { max-width: 760px; }
.sched-summary {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--ledger-soft); border: 1px solid var(--ledger-line); border-radius: 8px;
  padding: 10px 14px; font-size: 13px;
}
.sched-summary b { font-variant-numeric: tabular-nums; }
.sched-note { font-weight: 700; }
.sched-note.ok { color: var(--green); }
.sched-note.warn { color: var(--red); }
.sched-days { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.sched-day-row { display: flex; align-items: center; gap: 10px; }
.sched-day-label { width: 78px; font-size: 13px; font-weight: 600; color: var(--ink-soft); flex-shrink: 0; }
.sched-track {
  position: relative; flex: 1; height: 34px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 7px;
  cursor: crosshair; user-select: none; -webkit-user-select: none;
}
.sched-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.sched-tick span { position: absolute; top: -16px; left: 2px; font-size: 10px; color: var(--ink-soft); }
.sched-block {
  position: absolute; top: 3px; bottom: 3px; background: var(--ledger); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; min-width: 6px;
  cursor: grab; transition: box-shadow .12s ease, opacity .12s ease;
}
.sched-block:active { cursor: grabbing; }
.sched-block-dragging { box-shadow: 0 6px 16px rgba(20, 14, 70, .3); opacity: .96; z-index: 5; }
.sched-block-label {
  color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.sched-handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.sched-handle-l { left: -3px; }
.sched-handle-r { right: -3px; }
.sched-block-del {
  position: absolute; top: -8px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff; border: 2px solid var(--card); font-size: 10px;
  line-height: 1; cursor: pointer; padding: 0; display: none;
}
.sched-block:hover .sched-block-del { display: block; }
/* pendant un glisser, on fige le curseur choisi sur toute la page (même si la
   souris passe momentanément au-dessus d'un autre élément) pour un rendu fluide */
body.sched-dragging-move, body.sched-dragging-move * { cursor: grabbing !important; }
body.sched-dragging-resize, body.sched-dragging-resize * { cursor: ew-resize !important; }
.sched-day-total {
  width: 54px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sched-day-add {
  flex-shrink: 0; background: none; border: 1px dashed var(--ledger-line); color: var(--ledger);
  border-radius: 6px; width: 24px; height: 24px; font-size: 15px; line-height: 1; cursor: pointer;
}
.sched-day-add:hover { background: var(--ledger-soft); }

/* ---- bandeau réglages personnels ---- */

.settingsbar {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.settingsbar .setting { flex: 0 0 auto; }
.settingsbar .setting-fav { flex: 1 1 260px; }
.setting label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  display: block; margin-bottom: 6px;
}
.setting .hint { font-weight: 400; }
.setting-inline { display: flex; gap: 8px; align-items: center; }
.setting-inline select, .setting-inline input { width: auto; }
#set-weekly-custom { width: 80px; }
.setting-fav { border-left: 1px solid var(--line); padding-left: 20px; }
.btn-sm { padding: 8px 12px; font-size: 13px; }

.fav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.fav-chip {
  display: inline-flex; align-items: stretch; border: 1px solid var(--gold);
  border-radius: 6px; overflow: hidden;
}
.fav-use {
  background: var(--gold-soft); color: var(--gold-dark); font-weight: 700;
  font-size: 13px; border: none; padding: 5px 10px;
}
.fav-use:hover { background: #fae8c8; }
.fav-del {
  background: var(--gold-soft); color: var(--ink-soft); border: none;
  border-left: 1px solid var(--gold); padding: 5px 8px; font-size: 12px;
}
.fav-del:hover { color: var(--red); background: #fae8c8; }

/* ---- calendrier du mois ---- */

.calendar-section {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 28px;
}
/* Calendrier personnel de l'onglet Saisie : reste visible pendant qu'on
   parcourt les écritures plus bas (figé/sticky en haut de l'écran). Un léger
   ombré indique visuellement qu'il "flotte" au-dessus du reste une fois
   accroché. Ne s'applique qu'à ce calendrier-là (pas à celui, en lecture
   seule, de Suivi collaborateur). */
.calendar-section.cal-sticky {
  position: sticky; top: 10px; z-index: 6;
  box-shadow: 0 6px 18px rgba(26, 20, 80, .1);
}
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 10px;
}
.cal-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-green { background: var(--green); }
.lg-gold { background: var(--gold); }
.lg-red { background: var(--red); }
.cal-legend .lg:not(:first-child) { margin-left: 10px; }

.cal-grid-head, .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.cal-grid-head {
  margin-bottom: 6px;
}
.cal-grid-head div {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); text-align: center; padding: 4px 0;
}
.cal-cell {
  min-height: 44px; border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 6px; position: relative; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .05s;
}
.cal-cell[data-date]:hover { border-color: var(--ledger); }
.cal-cell[data-date]:active { transform: scale(.98); }
/* Calendriers "Suivi collaborateur" (lecture seule, v2.6) : mêmes repères
   visuels que le calendrier de saisie personnel au clic, sur data-iso. */
.cal-cell-clickable:hover { border-color: var(--ledger); }
.cal-cell-clickable:active { transform: scale(.98); }
.cal-empty { border: none; background: transparent; cursor: default; }
.cal-num { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.cal-hours { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; align-self: flex-end; }
.cal-weekend { background: #faf9fd; }
.cal-today { outline: 2px solid var(--ledger); outline-offset: -2px; }

.cal-green { background: var(--green-soft); border-color: #b8e6cf; }
.cal-green .cal-hours { color: var(--green); }
.cal-gold { background: var(--gold-soft); border-color: #f2ddb0; }
.cal-gold .cal-hours { color: var(--gold-dark); }
.cal-red { background: #fbe6e6; border-color: #f0c0c0; }
.cal-red .cal-hours { color: var(--red); }

/* Jour avec des heures brouillon en plus des heures réelles (ou à leur place) :
   la case est coupée en diagonale (réel en bas à droite, dans sa couleur de
   rythme habituelle ; brouillon en haut à gauche, toujours en teal, jamais
   compté dans le rythme — voir loadCalendar()). Les 3 couleurs de rythme
   (vert/doré/rouge) ont chacune leur variante coupée. */
.cal-cell.cal-split-green { background: linear-gradient(135deg, var(--draft-soft) 50%, var(--green-soft) 50%); border-color: #b8e6cf; }
.cal-cell.cal-split-gold { background: linear-gradient(135deg, var(--draft-soft) 50%, var(--gold-soft) 50%); border-color: #f2ddb0; }
.cal-cell.cal-split-red { background: linear-gradient(135deg, var(--draft-soft) 50%, var(--red-soft) 50%); border-color: #f0c0c0; }
.cal-split-green .cal-hours, .cal-split-gold .cal-hours, .cal-split-red .cal-hours { align-self: flex-end; }
.cal-split-green .cal-hours { color: var(--green); }
.cal-split-gold .cal-hours { color: var(--gold-dark); }
.cal-split-red .cal-hours { color: var(--red); }
/* Jour 100% brouillon (aucune heure réelle posée) : pas de coupe, fond teal uni. */
.cal-cell.cal-draft-only { background: var(--draft-soft); border-color: var(--draft); }
/* Rangée du haut : numéro du jour + heures brouillon (coin haut-droit, toujours
   dans la zone teal de la coupe diagonale) ; les heures réelles restent en bas
   à droite comme avant (voir .cal-hours), inchangées. */
.cal-top-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.cal-hours-draft { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--draft-dark); }

.cal-note { margin-top: 12px; }

/* Marge de défilement des blocs "jour" de la liste d'écritures, pour qu'un
   saut vers un jour ne le fasse pas apparaître caché sous le calendrier
   sticky. La variable --sticky-cal-h est recalculée en JS selon la hauteur
   réelle du calendrier (nombre de semaines variable selon le mois). */
.day-block { scroll-margin-top: calc(var(--sticky-cal-h, 260px) + 14px); }

/* ---- responsive ---- */

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr; }
  .form-row-main { grid-template-columns: 1fr 1fr; }
  .recap-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .settingsbar { flex-direction: column; }
  .setting-fav { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .cal-cell { min-height: 48px; padding: 4px 5px; }
  .cal-hours { font-size: 12px; }
  .qa-reset { margin-left: 0; }
  .qa-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- aperçu d'import ---- */
.preview { margin-top: 6px; min-height: 16px; }

/* ============ Page de connexion ============ */

.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
}
.login-card {
  width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 32px;
  box-shadow: 0 10px 40px rgba(26, 20, 80, .08);
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .logo { font-size: 32px; }
.login-brand .brand-sub { margin-top: 6px; }
.login-card label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--ink); }
.login-card input { width: 100%; box-sizing: border-box; }
.login-hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.login-welcome { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.btn-block { width: 100%; margin-top: 18px; }
.login-error {
  margin-top: 14px; padding: 9px 12px; border-radius: 7px;
  background: #fbe6e6; border: 1px solid #f0c0c0; color: var(--red); font-size: 13px;
}
.btn-link-plain {
  width: 100%; background: none; border: none; color: var(--ink-soft);
  margin-top: 10px; font-size: 13px; padding: 6px;
}
.btn-link-plain:hover { color: var(--ledger); }
.login-foot { margin-top: 18px; }

/* ============ Gestion des comptes ============ */

.user-form {
  display: grid; grid-template-columns: 1.4fr 160px 200px auto;
  gap: 12px; align-items: end;
}
.field-note { margin-top: 5px; min-height: 15px; }
.user-note { margin-top: 12px; }

.mini-select {
  padding: 5px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; max-width: 170px;
}
.mini-input {
  padding: 5px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; width: 100px;
}
/* Dates d'entrée / sortie (v2.10, gestion des comptes) : deux petits champs
   date empilés dans la même cellule, plutôt que deux colonnes distinctes. */
.dates-cell { display: flex; flex-direction: column; gap: 4px; }
.mini-date {
  padding: 4px 6px; font-size: 12px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; width: 132px; color: var(--ink);
}
.row-actions { white-space: nowrap; display: flex; gap: 6px; }
.mini-btn {
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
.mini-btn:hover:not(:disabled) { border-color: var(--ledger); color: var(--ledger); }
.mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.mini-danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
/* Bouton ✎ (corriger le prénom/nom) collé au nom dans la liste des comptes :
   plus compact qu'un mini-btn classique, pour ne pas casser l'alignement. */
.mini-rename { padding: 1px 6px; font-size: 12px; vertical-align: middle; border-radius: 4px; }
/* Bouton "Options" (v2.12, gestion des comptes) : seule action restée dans
   la ligne du tableau, ouvre la pop-up qui regroupe tout le reste — légèrement
   mis en évidence puisque c'est désormais le seul point d'entrée par compte. */
.mini-options { border-color: var(--ledger-line); color: var(--ledger); font-weight: 700; }
.mini-options:hover { background: var(--ledger-soft); border-color: var(--ledger); color: var(--ledger); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}
.pill-ok, .pill-active { background: var(--green-soft); color: var(--green); }
.pill-wait { background: var(--gold-soft); color: var(--gold-dark); }
.pill-off { background: #f0eef8; color: var(--ink-soft); }
/* v2.4 : variante cliquable du badge ci-dessus (ex. Facturable/Temps effectif
   des codes article) — neutralise juste le style natif du <button>, la couleur
   reste posée par .pill-active/.pill-off comme un badge normal. */
button.pill-toggle { border: none; cursor: pointer; font-family: inherit; }
.row-inactive { opacity: .55; }
.tag-self {
  font-size: 11px; background: var(--ledger-soft); color: var(--ledger);
  padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px;
}
.tag-manual {
  font-size: 11px; background: var(--gold-soft); color: var(--gold-dark);
  padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px;
}
/* brouillon : couleur propre (jaune), distincte du doré "manuelle" ci-dessus */
.tag-draft {
  font-size: 11px; background: var(--draft-soft); color: var(--draft-dark);
  padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px;
}
/* v2.2 : repère "exportée" visible en permanence à côté du libellé (et non plus
   seulement au survol de la case à cocher) — couleur ledger, cohérente avec
   l'accent déjà utilisé pour cette case (voir .chk-exported ci-dessous). */
.tag-exported {
  font-size: 11px; background: var(--ledger-soft); color: var(--ledger);
  padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px;
}

/* onglet Facturation : validation par le chef/admin (case à cocher) */
.td-validate { width: 34px; text-align: center; }
.chk-validate { width: 17px; height: 17px; cursor: pointer; accent-color: var(--green); }

/* Administration > Facturation : tableau à 2 colonnes reprenant les 2 sous-onglets,
   une ligne par mission avec une flèche pour la basculer d'une colonne à l'autre. */
.fg-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg-col h3 { margin: 0 0 8px; font-size: 14px; }
.fg-col-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.fg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
@media (max-width: 820px) {
  .fg-matrix { grid-template-columns: 1fr; }
}

/* Double validation (mode "double" — voir FacturationGroups) et suivi export :
   une colonne étroite par étape (Admin | Gestion interne | Exportée), chacune
   une case à cocher dédiée — plus lisible qu'un badge/bouton texte noyé dans
   la cellule Libellé. Case désactivée + grisée quand le visiteur n'a pas le
   droit d'agir sur cette étape précise, mais reste visible pour montrer l'état
   réel (voir renderFactTable/renderFraisTable). */
.td-validate-stage { width: 40px; text-align: center; }
.td-validate-stage input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
.td-validate-stage input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
/* Case "Exportée" : couleur distincte (indigo/ledger) pour ne pas la confondre
   visuellement avec les cases de validation (vert) — action différente (suivi
   d'export, pas une validation métier). */
.chk-exported, .chk-fr-exported { accent-color: var(--ledger) !important; }

/* repère facture/frais "normale" (ni brouillon, ni doublon, ni 0 €) : bleu pour
   les factures, violet pour les frais de l'entreprise — même couleur que les
   volets "Facture ?"/"Frais ?" de la Saisie des temps (voir .invoice-fields/
   .expense-fields), pour une identité cohérente entre les deux onglets. v2.3 :
   s'applique désormais aussi bien aux lignes provenant automatiquement de la
   Saisie qu'aux lignes ajoutées manuellement dans Facturation/Frais — seul le
   badge .tag-manual distingue encore l'origine, la couleur ne le fait plus. */
tr.row-imported { --row-bg: var(--blue-soft); }
tr.row-imported-frais { --row-bg: var(--violet-soft); }

/* repère facture au prix non renseigné (0 €) : à compléter avant facturation réelle */
tr.row-noprice { --row-bg: var(--red-soft); }
tr.row-noprice td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.price-warn { color: var(--red-dark); font-weight: 700; white-space: nowrap; }
.fact-noprice-banner {
  background: var(--red-soft); border: 1px solid var(--red); color: var(--red-dark);
  font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 8px; margin: 0 0 10px;
}

/* repère doublon probable (même client + mission + montant qu'une autre facture) :
   rouge plus soutenu que le 0 € ci-dessus, pour bien les distinguer. */
tr.row-duplicate { --row-bg: var(--red-dark-soft); }
tr.row-duplicate td:first-child { box-shadow: inset 4px 0 0 var(--red-dark); }
.tag-duplicate { color: var(--red-dark); font-weight: 700; font-size: 11px; margin-top: 2px; }
.dup-ignore-btn {
  background: none; border: 1px solid var(--red-dark); color: var(--red-dark); font-weight: 600;
  font-size: 10px; padding: 1px 6px; border-radius: 20px; margin-left: 6px; cursor: pointer;
}
.dup-ignore-btn:hover { background: var(--red-dark); color: #fff; }
.fact-dup-banner {
  background: var(--red-dark-soft); border: 1px solid var(--red-dark); color: var(--red-dark);
  font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 8px; margin: 0 0 10px;
}

/* v2.2 : bandeau récapitulatif "prêt à exporter / déjà exporté" (Facturation +
   Frais entreprise) — couleur ledger, neutre et informative, pour ne pas se
   confondre avec les bandeaux d'alerte (0 €, doublon) ci-dessus. */
.fact-export-banner {
  background: var(--ledger-soft); border: 1px solid var(--ledger); color: var(--ledger);
  font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 8px; margin: 0 0 10px;
}

/* Jauge de validation progressive (v2.2) : le vert avance de la droite vers la
   gauche à mesure que les cases de validation sont cochées (mode simple :
   Validée + Exportée = 2 étapes → 50 % puis 100 % ; mode double : Admin + GI +
   Exportée = 3 étapes → 33 % puis 66 % puis 100 %). --fill (ex. "50%") est posé
   en style inline par renderFactTable/renderFraisTable. Le reste de la ligne
   garde sa couleur d'identité éventuelle (0 €, doublon, importée — posée via
   --row-bg par les classes ci-dessus, une seule à la fois) pour que les deux
   repères restent visibles simultanément. */
tr.row-gauge {
  background: linear-gradient(90deg,
    var(--row-bg, transparent) 0%, var(--row-bg, transparent) calc(100% - var(--fill, 0%)),
    var(--green-soft) calc(100% - var(--fill, 0%)), var(--green-soft) 100%);
}
tr.row-gauge:hover {
  background: linear-gradient(90deg,
    var(--row-bg, transparent) 0%, var(--row-bg, transparent) calc(100% - var(--fill, 0%)),
    var(--green-soft) calc(100% - var(--fill, 0%)), var(--green-soft) 100%);
}
/* Le brouillon reste prioritaire sur la jauge et les couleurs d'identité :
   une ligne brouillon garde un fond jaune uni, sans mélange (cf. tr.is-draft
   plus haut et sa liste de sélecteurs combinés). */

.btn-hist-inv {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; line-height: 1;
}
.btn-hist-inv:hover { border-color: var(--navy); color: var(--navy); }
.invhist-timeline { list-style: none; margin: 0; padding: 0; }
.invhist-timeline li {
  padding: 10px 0 10px 16px; border-left: 2px solid var(--line); position: relative; font-size: 13px;
}
.invhist-timeline li::before {
  content: ""; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ledger);
}
.invhist-timeline li:last-child { border-left-color: transparent; }

/* vue équipe groupée (Gestion des comptes) : chef/admin en évidence, équipe indentée en dessous */
.row-manager { background: var(--ledger-soft); }
.row-manager td:first-child { font-weight: 700; }
.row-indented td:first-child { padding-left: 26px; }
.team-indent-mark { color: var(--ink-soft); margin-right: 2px; }

/* Teinte par rang hiérarchique (Gestion des comptes) : administrateurs et
   gestion interne se distinguent chacun par une couleur de fond dédiée,
   au-dessus de la mise en gras générique de .row-manager ci-dessus. Les
   membres d'une équipe (rangée indentée) gardent la teinte de leur rang. */
.row-role-admin { background: var(--navy-soft); }
.row-role-admin td:first-child { border-left: 3px solid var(--navy); }
.row-role-gi { background: var(--gold-soft); }
.row-role-gi td:first-child { border-left: 3px solid var(--gold-dark); }
/* v2.14 : repère visuel "hors équipe" dans le détail des saisies de "Mon
   équipe > Suivi" (chef de mission CAC) — même traitement (fond + liseré)
   que .row-role-gi ci-dessus, mais sémantique différente (pas un rôle, une
   provenance hors équipe directe), d'où une classe dédiée. */
.row-outside-team { background: var(--gold-soft); }
.row-outside-team td:first-child { border-left: 3px solid var(--gold-dark); }
/* v2.14.3 : petites pastilles "(vous)" / "(hors équipe)" à côté d'un nom, sur
   "Mon équipe > Suivi" (Récapitulatif + Détail des saisies) — remplace le
   simple texte gris utilisé jusqu'ici pour "(hors équipe)", pas assez visible
   pour bien distinguer ces lignes d'un simple membre de l'équipe. */
.team-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: middle; }
.team-tag-outside { background: var(--gold-soft); color: var(--gold-dark); }
.team-tag-self { background: var(--ledger-soft); color: var(--ledger); }

@media (max-width: 820px) {
  .user-form { grid-template-columns: 1fr; }
  .row-actions { flex-wrap: wrap; }
}

/* ============ Interface complète v6 ============ */

.role-badge {
  display: inline-block; background: var(--ledger-soft); color: var(--ledger);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: 4px;
}

/* ajout manuel client/prestation */
.manual-add { display: flex; gap: 8px; margin-bottom: 12px; }
.manual-add .mc-code { width: 120px; }
.manual-add .mc-name { flex: 1; }
.manual-add input { padding: 7px 9px; font-size: 13px; }

.client-search {
  width: 100%; padding: 8px 10px; margin: 4px 0 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff);
}

/* listes de référence avec suppression */
.ref-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.ref-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.ref-item:last-child { border-bottom: none; }
.ref-item b { font-variant-numeric: tabular-nums; }
.ref-group-title { background: var(--ledger-soft); font-weight: 700; font-size: 13px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.ref-del {
  background: none; border: none; color: var(--ink-soft); font-size: 14px;
  padding: 2px 6px; border-radius: 4px;
}
.ref-del:hover { color: var(--red); background: #fbe6e6; }
.ref-item-client { flex-wrap: wrap; gap: 8px; }
.ref-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.row-archived { opacity: .45; font-style: italic; }

/* bloc import repliable */
.import-block { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.import-block summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ledger); padding: 4px 0;
}
.import-block summary:hover { color: var(--ledger-dark); }
.import-block textarea {
  width: 100%; box-sizing: border-box; margin-top: 8px; font-family: Consolas, monospace; font-size: 13px;
}

/* configuration des dossiers */
.dossier-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; margin-top: 14px; align-items: start; }
.dc-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--line); font-size: 13px; cursor: pointer; user-select: none;
}
.dc-chip:hover { border-color: var(--ledger); }
.dc-chip.checked { background: var(--ledger-soft); border-color: var(--ledger); color: var(--ledger); font-weight: 700; }
.dc-chip input { accent-color: var(--ledger); }
.dc-exceptions-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

@media (max-width: 820px) {
  .dossier-grid { grid-template-columns: 1fr; }
}

/* export */
.export-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.export-controls .field { min-width: 160px; }
.btn-link { text-decoration: none; display: inline-block; text-align: center; }

/* vue équipe */
.team-detail-controls { margin-bottom: 8px; }
.team-detail-controls select { max-width: 320px; }
.admin-note a { margin-left: 8px; }

@media (max-width: 820px) {
  .manual-add { flex-wrap: wrap; }
  .manual-add .mc-code, .manual-add .mc-name { width: 100%; }
}

/* ============ Améliorations v7 : horloge, alerte, exercice, édition ============ */

/* horloge en direct */
.live-clock { font-size: 15px; color: #d7e2f0; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.clock-date { text-transform: capitalize; }
.clock-time { font-weight: 700; color: #fff; }

/* bandeau dernière saisie */
.last-entry-banner {
  margin: 16px 0 0; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.last-entry-banner.ok { background: var(--green-soft); border: 1px solid #b8e6cf; color: var(--green); }
.last-entry-banner.warn { background: var(--gold-soft); border: 1px solid #f2ddb0; color: var(--gold-dark); }
.last-entry-banner.danger { background: #fbe6e6; border: 1px solid #f0c0c0; color: var(--red); }

/* tag exercice */
.ex-tag {
  display: inline-block; background: var(--navy-soft); color: var(--navy);
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* champ exercice dans le formulaire */
.form-row-main { grid-template-columns: 120px 1fr 90px 140px 140px 100px; }
.field-ex select { width: 100%; }

/* boutons édition sur les lignes */
.td-actions { width: 70px; text-align: right; white-space: nowrap; }
.btn-edit {
  background: none; border: none; color: var(--ink-soft); font-size: 15px; padding: 2px 4px;
}
.btn-edit:hover { color: var(--ledger); }
.btn-dup {
  background: none; border: none; color: var(--ink-soft); font-size: 14px; padding: 2px 4px;
}
.btn-dup:hover { color: var(--ledger); }
.entry-form.editing { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* Cadre "brouillon" : le cadre entier (pas seulement le petit interrupteur)
   se teinte du bleu-vert du brouillon dès qu'il est actif — impossible à
   manquer, même en cours de saisie. Placée après .editing ci-dessus, donc
   prioritaire sur elle si les deux s'appliquent (on modifie une ligne qui est
   aussi un brouillon) : le brouillon doit toujours rester le repère le plus
   visible, comme dans les tableaux Facturation/Frais. */
.entry-form.draft-mode {
  background: var(--draft-soft, #e1f5f2);
  border-color: var(--draft, #12897a);
  box-shadow: 0 0 0 3px var(--draft-soft, #e1f5f2);
}
/* v2.3 (retour à la version précédente, sur retour utilisateur) : les volets
   "Facture ?"/"Frais ?" gardent leur couleur d'identité (bleu/violet, voir
   ci-dessous) même en brouillon — seul le cadre du formulaire ci-dessus passe
   au jaune du brouillon ("le fond du carré de ma ligne"). Un essai précédent
   forçait aussi les volets en jaune quand ils étaient ouverts ; jugé peu
   lisible ("tout jaune"), il a été retiré. */
#btn-cancel-edit { margin-left: 8px; }

/* chips exercices en admin */
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ex-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--navy-soft);
  color: var(--navy); font-weight: 700; padding: 4px 6px 4px 12px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.ex-del { background: none; border: none; color: var(--ink-soft); font-size: 12px; padding: 2px 4px; }
.ex-del:hover { color: var(--red); }

/* vue admin tous les temps */
.allentries-controls { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-bottom: 6px; }
.allentries-controls .field { min-width: 150px; }
.role-mini { font-size: 11px; color: var(--ink-soft); }

@media (max-width: 820px) {
  .form-row-main { grid-template-columns: 1fr 1fr; }
}

/* ============ Composants v8 : filtres, graphiques ============ */

/* barre de filtres */
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quick-filter-btn {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.quick-filter-btn:hover { border-color: var(--ledger); color: var(--ledger); }
.quick-filter-btn.active { background: var(--ledger); border-color: var(--ledger); color: #fff; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.filter-bar .field { min-width: 140px; }
.filter-bar .field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 5px; }
/* v2.9.6 : filtre "Frais du mois de" (Mes frais) mis en valeur — c'est le
   filtre à utiliser en priorité pour se placer sur le cycle officiel du
   cabinet (21 du mois précédent au 20 du mois), donc plus visible que les
   simples champs Du/Au à côté. */
.filter-bar .field-highlight {
  background: var(--ledger-soft); border: 1px solid var(--ledger-line);
  border-radius: 8px; padding: 8px 12px;
}
.filter-bar .field-highlight label { color: var(--ledger); font-weight: 700; }
.filter-bar .field-highlight select { border-color: var(--ledger-line); font-weight: 600; }
.filter-total { margin-left: auto; text-align: right; }
.filter-total-value { font-size: 24px; font-weight: 800; color: var(--ledger); font-variant-numeric: tabular-nums; }
/* v2.14 : quand la sélection contient des brouillons (ex. des IK saisies à
   l'avance pour un mois futur), le total affiché devient une estimation
   incluant ces brouillons, avec le détail "dont X € brouillon / Y € réel" en
   dessous, en jaune (couleur --draft), pour ne jamais confondre projection et
   montant définitif. */
.filter-total-draft {
  margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--draft-dark);
  font-variant-numeric: tabular-nums;
}
/* v2.5 : fond plein (au lieu du contour transparent qui se fondait dans la
   carte) pour que "Réinitialiser" reste repérable au premier coup d'œil sur
   toutes les barres de filtres, quel que soit le thème actif. */
.btn-reset-filters {
  background: var(--reset); border: 1px solid var(--reset-dark); border-radius: 6px;
  padding: 8px 12px; font-size: 13px; color: #fff; font-weight: 700; height: 38px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.btn-reset-filters:hover { background: var(--reset-dark); border-color: var(--reset-dark); }

/* v2.14 : panneau "Statut & validation" (onglet Frais > Mes frais) — regroupe les
   5 filtres de circuit de validation (Statut, Brouillons, Validé admin, Validé
   gestion interne, Export comptable), auparavant des <select> perdus dans la
   barre de filtres générale, sous forme de pastilles cliquables. Lignes empilées
   verticalement (une par filtre) à la demande de l'utilisateur, plutôt qu'en
   grille qui les faisait passer à la ligne de façon peu lisible. Couleurs reprises
   du code déjà utilisé ailleurs dans SAFIR (vert = validé, doré = en attente/non
   validé, bleu = exporté, jaune "draft" = brouillon). */
.status-panel {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ledger);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 16px;
}
.status-panel-title-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.status-panel-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}
/* Réinitialisation propre à ce panneau uniquement (ne touche pas Du/Au, Clients,
   Catégories, ni les doublons — ceux-là restent sous "Réinitialiser" de la barre
   de filtres générale). */
.status-panel-reset {
  background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.status-panel-reset:hover { border-color: var(--reset); color: var(--reset-dark); }
.status-rows { display: flex; flex-direction: column; gap: 10px; }
.status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-row .srlabel { font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 170px; }
.status-chip {
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  transition: background .12s, border-color .12s, color .12s;
}
.status-chip:hover { border-color: var(--ledger); color: var(--ledger); }
.status-chip.on-gray.active { background: var(--ledger-soft); border-color: var(--ink-soft); color: var(--ink); }
.status-chip.on-green.active { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.status-chip.on-gold.active { background: var(--gold-soft); border-color: var(--gold-dark); color: var(--gold-dark); }
.status-chip.on-blue.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); }
.status-chip.on-draft.active { background: var(--draft-soft); border-color: var(--draft); color: var(--draft-dark); }

/* menu multi-sélection */
.ms-wrap { position: relative; min-width: 150px; }
.ms-button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 14px; color: var(--ink); gap: 8px;
}
.ms-button:hover { border-color: var(--ledger-line); }
.ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-arrow { color: var(--ink-soft); font-size: 11px; }
.ms-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; min-width: 260px;
}
.ms-search-wrap { padding: 4px 6px 6px; }
.ms-search {
  width: 100%; padding: 7px 9px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 6px; outline: none;
}
.ms-search:focus { border-color: var(--ledger); box-shadow: 0 0 0 3px var(--ledger-soft); }
.ms-options { max-height: 240px; overflow-y: auto; }
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 14px; cursor: pointer; border-radius: 5px;
}
.ms-item:hover { background: var(--ledger-soft); }
.ms-item input { width: auto; }
.ms-all { border-bottom: 1px solid var(--line); font-weight: 600; margin-bottom: 2px; }
.ms-empty { padding: 12px; font-size: 13px; color: var(--ink-soft); }

/* graphique en barres */
.barchart { width: 100%; height: auto; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-axis { fill: var(--ink-soft); font-size: 11px; }
.bc-bar { fill: var(--ledger); transition: fill .15s; cursor: pointer; }
.bc-bar:hover, .bc-bar-active { fill: var(--ledger-dark); }
.bc-val { fill: var(--ink); font-size: 10px; font-weight: 700; }
.bc-lbl { fill: var(--ink-soft); font-size: 11px; }

/* info-bulle partagée camembert/barres (survol) */
.chart-tooltip {
  position: fixed; z-index: 9999; background: var(--navy, #1a1450); color: #fff;
  font-size: 12px; line-height: 1.5; padding: 7px 11px; border-radius: 7px;
  box-shadow: 0 6px 16px rgba(0,0,0,.28); pointer-events: none; max-width: 240px;
}
.chart-tooltip b { font-weight: 700; }

/* camembert */
.pie-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.piechart { width: 220px; height: 220px; flex-shrink: 0; }
.pie-legend { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.pie-leg-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; transition: background .12s; }
.pie-leg-item:hover, .pie-leg-active { background: var(--ledger-soft, rgba(74,63,181,.1)); }
.pie-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.pie-leg-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-leg-val { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
.pie-slice { cursor: pointer; transition: opacity .12s; }
.pie-slice-dim { opacity: .3; }

/* sélecteur de bascule (camembert prestation/dossier) */
.toggle-group { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.toggle-group button {
  background: #fff; border: none; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.toggle-group button.active { background: var(--ledger); color: #fff; }

/* graphique accueil */
.home-chart-card { margin-top: 16px; }
.chart-year-nav { display: flex; align-items: center; gap: 8px; }

/* ============ Mode sombre — bleu nuit SAFIR ============ */

/* Sombre — Anthracite doré : gris anthracite neutre (au lieu du bleu nuit
   indigo précédent) avec le doré SAFIR en accent principal, pour un rendu plus
   feutré/premium type cabinet d'audit. */
html[data-theme="dark"] {
  --ink: #ece7dd;          /* texte clair, blanc cassé chaud */
  --ink-soft: #a8a29a;     /* texte atténué, gris chaud */
  --paper: #181715;        /* fond général, anthracite quasi noir */
  --card: #221f1c;         /* cartes, un cran plus clair */
  --ledger: #d9ad55;       /* doré (accent principal, remplace le violet) */
  --ledger-dark: #ecc478;  /* doré éclairci pour le survol */
  --ledger-soft: #362b1c;  /* fond doré sombre discret */
  --ledger-line: #4a3c26;  /* bordures dorées */
  --navy: #211d18;         /* bandeaux */
  --navy-soft: #2c2721;    /* fonds secondaires */
  --gold: #f0b84c;         /* doré vif (accent secondaire, alertes) */
  --gold-dark: #e8a02c;
  --gold-soft: #3d2f1a;    /* fond doré sombre */
  --line: #3a352e;         /* bordures générales */
  --red: #f0716b;
  --red-soft: #402625;
  --red-dark: #ff9d97;
  --red-dark-soft: #4d2422;
  --green: #52c48f;
  --green-soft: #21362b;
  --draft: #e8d54a;
  --draft-dark: #f5e896;
  --draft-soft: #3a3418;
  --blue: #6fa8f5;
  --blue-dark: #8fbdf7;
  --blue-soft: #16233a;
  --cobalt: #4d7fd6;
  --cobalt-dark: #6f9be0;
  --cobalt-soft: #182750;
  --violet: #c084f5;
  --violet-dark: #d8aefa;
  --violet-soft: #33234a;
  --reset: #ff8a50;
  --reset-dark: #ffab7a;
}

/* ajustements spécifiques au mode sombre */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(24,23,21,.6); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] .ms-button,
html[data-theme="dark"] .ms-panel,
html[data-theme="dark"] .combo-list,
html[data-theme="dark"] .day-card,
html[data-theme="dark"] .cal-cell { background: var(--card); }
html[data-theme="dark"] .hero { border-color: var(--ledger-line); }
html[data-theme="dark"] .cal-weekend { background: #201d19; }
html[data-theme="dark"] .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .toast { background: var(--card); border: 1px solid var(--line); }
html[data-theme="dark"] .bc-bar { fill: var(--ledger); }
html[data-theme="dark"] .login-card { box-shadow: 0 10px 40px rgba(0,0,0,.4); }
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .mini-btn,
html[data-theme="dark"] .qa-minus { background: var(--card); }
/* corrige plusieurs fonds blancs codés en dur, invisibles (texte clair sur
   fond blanc) une fois le mode sombre activé — notamment les flèches ‹ › de
   navigation (semaine, calendrier, année, mois de l'accueil). */
html[data-theme="dark"] .wk-btn,
html[data-theme="dark"] .empty-week,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .mini-select,
html[data-theme="dark"] .mini-input,
html[data-theme="dark"] .mini-date,
html[data-theme="dark"] .toggle-group button,
html[data-theme="dark"] .sc-logo-preview { background: var(--card); }

/* ============ Mode vif — Émeraude ============ */
/* Thème clair comme le classique (mêmes fonds blancs, aucun des ajustements
   du mode sombre ci-dessus n'est nécessaire) : seul l'accent principal change,
   de l'indigo SAFIR vers un vert émeraude. Le doré SAFIR reste identique. */
html[data-theme="vif"] {
  --ink: #123524;
  --ink-soft: #4f7864;
  --paper: #f4fbf7;
  --card: #ffffff;
  --ledger: #129a6b;
  --ledger-dark: #0d7a54;
  --ledger-soft: #e1f5ec;
  --ledger-line: #b9e6cf;
  --navy: #0c2e22;
  --navy-soft: #e1f5ec;
  --gold: #e8a02c;
  --gold-dark: #c9861a;
  --gold-soft: #fdf1dc;
  --line: #d8ecdf;
  --red: #d64545;
  --red-soft: #fbe6e6;
  --red-dark: #b23030;
  --red-dark-soft: #f6cfcf;
  --green: #129a6b;
  --green-soft: #e1f5ec;
  --draft: #b89b00;
  --draft-dark: #7a6600;
  --draft-soft: #faf3c9;
  --blue: #2f6fed;
  --blue-dark: #1f4fb0;
  --blue-soft: #e7eefc;
  --cobalt: #1b3a8a;
  --cobalt-dark: #142a63;
  --cobalt-soft: #dbe4f7;
  --violet: #8b3fd1;
  --violet-dark: #6b2fa3;
  --violet-soft: #f1e4fb;
  --reset: #e8632c;
  --reset-dark: #c94f1f;
}
html[data-theme="vif"] .hero {
  background: linear-gradient(120deg, #0c2e22 0%, #129a6b 100%); border-color: #0c2e22;
}

/* ============ Mode Bordeaux — AGIS Conseil ============ */
/* Couleurs reprises du site du cabinet de paie partenaire AGIS Conseil :
   bordeaux #AE0721 (accent principal), vert #78B22C (accent secondaire de
   leur logo), charcoal #2A3335 (titres). Important : --green reste le vert
   AGIS, bien distinct du bordeaux/rouge — les indicateurs d'objectif
   atteint/dépassé restent donc verts et ne se confondent jamais avec
   l'accent de marque (bordeaux) ni avec --red (rouge danger, inchangé). */
html[data-theme="agis"] {
  --ink: #2a1015;
  --ink-soft: #7a5a5f;
  --paper: #faf6f6;
  --card: #ffffff;
  --ledger: #ae0721;
  --ledger-dark: #8a0519;
  --ledger-soft: #f7e3e6;
  --ledger-line: #edc7cd;
  --navy: #2a3335;
  --navy-soft: #eceeee;
  --gold: #e8a02c;
  --gold-dark: #c9861a;
  --gold-soft: #fdf1dc;
  --line: #ecdfe1;
  --red: #d64545;
  --red-soft: #fbe6e6;
  --red-dark: #b23030;
  --red-dark-soft: #f6cfcf;
  --green: #78b22c;
  --green-soft: #eaf5dc;
  --draft: #b89b00;
  --draft-dark: #7a6600;
  --draft-soft: #faf3c9;
  --blue: #2f6fed;
  --blue-dark: #1f4fb0;
  --blue-soft: #e7eefc;
  --cobalt: #1b3a8a;
  --cobalt-dark: #142a63;
  --cobalt-soft: #dbe4f7;
  --violet: #8b3fd1;
  --violet-dark: #6b2fa3;
  --violet-soft: #f1e4fb;
  --reset: #e8632c;
  --reset-dark: #c94f1f;
}
html[data-theme="agis"] .hero {
  background: linear-gradient(120deg, #2a3335 0%, #ae0721 100%); border-color: #2a3335;
}

/* bouton bascule thème */
.theme-toggle {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: 13px; color: var(--ink-soft); cursor: pointer;
  margin-right: 8px;
}
.theme-toggle:hover { border-color: var(--ledger); color: var(--ledger); }

/* ============ Alertes de retard hiérarchiques ============ */
.late-alert-card { border-left: 4px solid var(--red); }
.late-alert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.late-alert-icon { font-size: 20px; }
.late-alert-head h2 { margin: 0; color: var(--red); }
.late-alert-card table { width: 100%; }
.late-alert-card td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.late-alert-card tr:last-child td { border-bottom: none; }
.late-days { text-align: right; font-weight: 700; color: var(--red); white-space: nowrap; }

/* ============ Export : périodes rapides ============ */
.export-shortcuts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip-btn {
  background: var(--ledger-soft); border: 1px solid var(--ledger-line); border-radius: 20px;
  padding: 5px 14px; font-size: 13px; font-weight: 600; color: var(--ledger); cursor: pointer;
}
.chip-btn:hover { background: var(--ledger); color: #fff; }
html[data-theme="dark"] .chip-btn { background: var(--ledger-soft); color: var(--ledger); }

/* ============ Raccourcis applications ============ */

/* section accueil */
.shortcuts-section { margin: 16px 0; }
.shortcuts-title { color: var(--ink); font-size: 18px; margin: 0 0 12px; }
.shortcuts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.shortcut-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.shortcut-tile:hover {
  transform: translateY(-3px); border-color: var(--ledger-line);
  box-shadow: 0 8px 24px rgba(26, 20, 80, .12);
}
.shortcut-visual {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
}
.shortcut-logo { max-width: 56px; max-height: 56px; object-fit: contain; }
.shortcut-letter {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--ledger); color: #fff; font-size: 26px; font-weight: 800;
}
.shortcut-label { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; }

/* gestion admin */
.sc-form { display: grid; grid-template-columns: 180px 1fr 200px auto; gap: 12px; align-items: end; }
.sc-logo-pick { display: flex; align-items: center; gap: 10px; }
.sc-logo-preview { width: 36px; height: 36px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: #fff; }
.sc-admin-list { margin-top: 14px; display: grid; gap: 8px; }
.sc-admin-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px;
}
.sc-mini-visual { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-mini-logo { max-width: 36px; max-height: 36px; object-fit: contain; }
.sc-mini-letter {
  width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--ledger); color: #fff; font-size: 18px; font-weight: 800;
}
.sc-admin-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.sc-admin-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-order-btns { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sc-order-btns .mini-btn { padding: 1px 7px; line-height: 1.3; }

@media (max-width: 820px) {
  .sc-form { grid-template-columns: 1fr; }
}

/* ============ Réimport des temps ============ */
.reimport-card { border-left: 4px solid var(--gold); }
.reimport-warning {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px;
  background: var(--gold-soft); border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.reimport-warning-icon { font-size: 18px; flex-shrink: 0; }
.reimport-controls { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.reimport-controls .field { min-width: 180px; }
.reimport-preview {
  margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper);
}
.reimport-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.reimport-unknown {
  padding: 10px 12px; background: var(--gold-soft); border-radius: 7px;
  font-size: 13px; color: var(--gold-dark); margin-bottom: 12px;
}
.reimport-confirm-box {
  padding: 14px; background: #fbedec; border: 1px solid #f0c0c0; border-radius: 8px;
}
.reimport-confirm-box p { font-size: 13px; line-height: 1.5; margin: 0 0 12px; color: #333; }
.btn-danger {
  background: var(--red); color: #fff; border: none; border-radius: 7px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-danger:hover { background: #b83a3a; }
html[data-theme="dark"] .reimport-confirm-box { background: #3a1f1f; border-color: #5a2e2e; }
html[data-theme="dark"] .reimport-confirm-box p { color: #f0d0d0; }

/* ============ Tableau de bord de complétude ============ */
.comp-legend { line-height: 1.5; }
.comp-tbl { width: 100%; }
.comp-tbl th, .comp-tbl td { padding: 10px 12px; }
.comp-tbl tbody tr { border-bottom: 1px solid var(--line); }
.comp-tbl tbody tr:last-child { border-bottom: none; }
.comp-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.comp-bar-track {
  flex: 1; height: 12px; background: var(--ledger-soft); border-radius: 8px; overflow: hidden;
}
.comp-bar-fill { height: 100%; border-radius: 8px; transition: width .3s; }
.comp-rate { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.comp-late { color: var(--red); font-weight: 700; font-size: 13px; }
html[data-theme="dark"] .comp-bar-track { background: rgba(255,255,255,.1); }

/* mention mois en cours (complétude) */
.comp-partial-note {
  margin-top: 6px; padding: 8px 12px; background: var(--ledger-soft); color: var(--ledger);
  border-radius: 7px; font-size: 13px; font-weight: 600; display: inline-block;
}

/* ============ "Mon équipe" — Absentéisme / Facturable (v2.6) ============
   Contrairement à la barre de Complétude ci-dessus (une seule couleur, remplie
   au prorata d'un taux, le reste en gris), ici la barre représente TOUJOURS
   100 % de la largeur, coupée en 2 segments dont la somme fait 100 % : vert
   pour la proposition mise en avant (présence, ou facturable), jaune pour le
   reste (absence, ou non facturable) — jamais de zone grise "non atteinte". */
.split-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.split-bar-track {
  flex: 1; height: 12px; border-radius: 8px; overflow: hidden; display: flex;
  background: var(--ledger-soft);
}
.split-bar-green { height: 100%; background: var(--green); }
.split-bar-yellow { height: 100%; background: var(--gold); }
.split-rate { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }