/* ============================================================
   SHELL — Rail de navigation + topbar (chrome de l'app)
   Non scopé sous .kh : c'est le cadre qui entoure les vues. Couleurs
   de charte en dur (constantes de chrome). Restyle la sidebar/nav
   EXISTANTES sans toucher à leur markup (préserve tous les @click).
   ============================================================ */
.kh-shell { display: flex; min-height: 100vh; background: #ECEAE3; }
.kh-rail {
  width: 250px; flex: none; background: #16150F; color: #EFEAE0;
  display: flex; flex-direction: column;
  font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Marque (haut du rail) */
.kh-rail .kh-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; }
.kh-rail .kh-brand img { height: 30px; width: auto; object-fit: contain; }
.kh-rail .kh-brand .btxt b { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .03em; color: #fff; line-height: 1; display: block; }
.kh-rail .kh-brand .btxt span { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .18em; color: #F5B301; font-weight: 700; text-transform: uppercase; }
/* Repère à barres (logo simplifié de la maquette) */
.kh-rail .kh-mark { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 27px; height: 25px; flex: none; }
.kh-rail .kh-mark i { display: block; width: 100%; height: 5.5px; border-radius: 1.5px; }
.kh-rail .kh-mark i:nth-child(1) { background: #F5B301; }
.kh-rail .kh-mark i:nth-child(2) { background: #F5B301; opacity: .88; }
.kh-rail .kh-mark i:nth-child(3) { background: #6E6D64; }
/* Libellés de section du rail (casse titre, discret) */
.kh-rail .kh-navlabel { font-family: 'Public Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #7C7B72; margin: 0 0 10px; padding: 0 16px; }

/* Zone nav scrollable */
.kh-rail nav { flex: 1; overflow-y: auto; padding: 8px 12px 12px; }
/* Sur-titres de section (les <p> uppercase) */
.kh-rail nav p { color: #857E70 !important; font-size: 10px !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 14px 10px 6px !important; margin: 0 !important; }
/* Items de nav (restyle de .nav-item existant, dans le rail seulement) */
.kh-rail .nav-item { color: #B8B6AC !important; border-radius: 9px !important; padding: 9px 11px !important; font-weight: 500; position: relative; margin-bottom: 1px; }
.kh-rail .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; transform: none !important; }
.kh-rail .nav-item.active { background: linear-gradient(90deg, rgba(245,179,1,.14), rgba(245,179,1,.05)) !important; color: #F4D78A !important; border-left: 0 !important; font-weight: 600; }
.kh-rail .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #F5B301; }
/* Icônes : héritent la couleur de l'item (neutralise les text-*-600) */
.kh-rail .nav-item i { color: currentColor !important; opacity: .85; }
.kh-rail .nav-item.active i { opacity: 1; }
/* Séparateurs + entêtes de groupe Config */
.kh-rail nav hr { border: 0; border-top: 1px solid #2A281E; margin: 12px 4px; }
.kh-rail nav .bg-gray-100 { background: rgba(255,255,255,.05) !important; border-radius: 8px; }
.kh-rail nav .bg-gray-100 span { color: #A8A69C !important; }
.kh-rail nav .bg-gray-100 i { color: #857E70 !important; }
/* Identité mobile (bloc bg-gray-900 en haut) : masquée, l'avatar est dans le pied */
.kh-rail .bg-gray-900 { display: none; }

/* Pied du rail : avatar + rôle + langues + logout */
.kh-rail .kh-rail-foot { flex: none; border-top: 1px solid #2A281E; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #100F0A; }
.kh-rail .kh-user { display: flex; align-items: center; gap: 10px; }
.kh-rail .kh-user .av { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #2a1e06; background: linear-gradient(150deg, #F5C542, #D8931F); font-family: 'Archivo', sans-serif; }
.kh-rail .kh-user .who { min-width: 0; line-height: 1.25; }
.kh-rail .kh-user .who b { font-size: 12.5px; color: #EFEAE0; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-rail .kh-user .who span { font-size: 10px; color: #857E70; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kh-rail .kh-rail-foot .row { display: flex; align-items: center; gap: 8px; }
.kh-rail .kh-lang { display: inline-flex; background: rgba(255,255,255,.06); border-radius: 8px; padding: 2px; }
.kh-rail .kh-lang button { border: 0; background: transparent; font-family: inherit; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #B8B6AC; padding: 5px 8px; border-radius: 6px; }
.kh-rail .kh-lang button.on { background: #F5B301; color: #16150F; }
.kh-rail .kh-logout { margin-left: auto; border: 0; background: rgba(255,255,255,.06); color: #EFEAE0; cursor: pointer; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.kh-rail .kh-logout:hover { background: rgba(245,179,1,.15); color: #F4D78A; }

/* Colonne principale : topbar + contenu */
.kh-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kh-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #E2DFD6; background: #F7F5EF; position: sticky; top: 0; z-index: 30; }
.kh-topbar .sp { flex: 1; }
.kh-topbar .kh-tb-btn { border: 1px solid #E2DFD6; background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: #1A1917; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.kh-topbar .kh-tb-btn.on { background: #F5B301; border-color: #F5B301; color: #16150F; }
.kh-topbar .kh-tb-ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E2DFD6; background: #fff; cursor: pointer; display: grid; place-items: center; color: #6B6A63; }

/* Bouton hamburger : défini AVANT la media query (masqué par défaut sur desktop),
   puis affiché sur mobile par la media query qui suit (l'ordre compte : à
   spécificité égale, la dernière règle gagne). */
.kh-topbar .kh-burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E2DFD6; background: #fff; cursor: pointer; place-items: center; color: #1A1917; flex: none; }

/* Desktop : rail collant pleine hauteur d'écran. La nav défile en interne
   (flex:1 + overflow-y:auto) et le pied (nom/langues/déconnexion) reste
   TOUJOURS épinglé en bas de l'écran, visible, quelle que soit la longueur
   de la navigation ou du contenu de la page. */
@media (min-width: 1024px) {
  .kh-rail { position: sticky; top: 0; align-self: flex-start; height: 100vh; }
}

/* Menu mobile : le rail coulisse (comportement conservé via les classes Alpine) */
@media (max-width: 1023px) {
  .kh-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .kh-topbar .kh-burger { display: grid; }
}

/* Menu utilisateur de la topbar (mobile uniquement) : avatar → langues +
   déconnexion en un geste, sans ouvrir la navigation. Masqué sur desktop
   (le pied du rail y est toujours visible). */
.kh-topbar .kh-umenu { position: relative; display: none; }
@media (max-width: 1023px) { .kh-topbar .kh-umenu { display: block; } }
/* Tiroir ouvert : le pied du rail gère déjà langue/déconnexion, on masque
   l'avatar de la topbar pour éviter le doublon (via classe, pour ne pas
   écraser le display:none desktop). */
.kh-topbar .kh-umenu.kh-umenu-hidden { display: none; }
.kh-topbar .kh-umenu-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #E2DFD6; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.kh-topbar .kh-umenu-btn .av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #2a1e06; background: linear-gradient(150deg, #F5C542, #D8931F); font-family: 'Archivo', sans-serif; }
.kh-topbar .kh-umenu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 220px; background: #fff; border: 1px solid #E2DFD6; border-radius: 12px; box-shadow: 0 12px 40px -10px rgba(22,21,15,.35); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kh-topbar .kh-umenu-id { line-height: 1.3; }
.kh-topbar .kh-umenu-id b { display: block; font-size: 13.5px; color: #1A1917; font-weight: 700; }
.kh-topbar .kh-umenu-id span { font-size: 10.5px; color: #857E70; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kh-topbar .kh-umenu-lang { display: inline-flex; background: #F0EEE7; border-radius: 9px; padding: 3px; gap: 2px; }
.kh-topbar .kh-umenu-lang button { flex: 1; border: 0; background: transparent; font-family: inherit; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6B6A63; padding: 6px 0; border-radius: 6px; }
.kh-topbar .kh-umenu-lang button.on { background: #F5B301; color: #16150F; }
.kh-topbar .kh-umenu-logout { border: 0; background: #16150F; color: #fff; cursor: pointer; border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.kh-topbar .kh-umenu-logout:hover { background: #26241A; }

/* ============================================================
   KPI CONTROL — Charte visuelle (design system)
   Portée : TOUT est scopé sous « .kh ». Ces règles ne peuvent pas
   déborder sur les autres vues de l'app. Les tokens sont définis sur
   .kh (pas :root) pour éviter toute fuite globale.
   Première application : la vue Tableau de bord (« Vue consolidée »).
   ============================================================ */
.kh {
  /* Fontes (auto-hébergées) — cf. DESIGN_SYSTEM.md §3 */
  --kh-font:         'Public Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kh-font-display: 'Archivo', var(--kh-font);

  /* Neutres (fond clair) — valeurs EXACTES de la charte */
  --kh-bg:        #ECEAE3;
  --kh-surface:   #FFFFFF;
  --kh-surface-2: #FBFBF9;
  --kh-ink:       #1A1917;
  --kh-ink-2:     #6B6A63;
  --kh-ink-3:     #9A988E;
  --kh-line:      #E2DFD6;
  --kh-line-2:    #F0EEE7;

  /* Zones sombres (rail, bloc héro) */
  --kh-dark:      #16150F;
  --kh-dark-2:    #26241A;
  --kh-dark-ink:  #FFFFFF;
  --kh-dark-muted:#B8B6AC;

  /* Accent ambre — ACTION uniquement */
  --kh-accent:      #F5B301;
  --kh-accent-soft: #FBF1DC;
  --kh-accent-ink:  #C98A00;

  /* Statuts sémantiques (dot / fond doux / texte) */
  --kh-good: #1F9D5F;  --kh-good-soft: #E6F2EB;  --kh-good-ink: #14794E;
  --kh-warn: #E3A21C;  --kh-warn-soft: #FBF1DC;  --kh-warn-ink: #9C6B00;
  --kh-bad:  #D24A38;  --kh-bad-soft:  #FBEAE6;  --kh-bad-ink:  #B02B1E;
  --kh-info: #2A6FDB;  --kh-info-soft: #E7EEF9;  --kh-info-ink: #2A5F9E;
  --kh-intern:#8256D0; --kh-intern-soft:#EFEAF8; --kh-intern-ink:#6B4FA8;

  /* Catégories (alignées sur la palette sémantique) */
  --kh-cat-1: #1F9D5F;
  --kh-cat-2: #E3A21C;
  --kh-cat-3: #2A6FDB;
  --kh-cat-4: #8256D0;
  --kh-cat-5: #D24A38;
  --kh-cat-6: #14979A;

  --kh-radius:    16px;
  --kh-radius-sm: 10px;
  --kh-shadow:    0 1px 2px rgba(22,21,15,.04), 0 6px 20px -8px rgba(22,21,15,.10);
  --kh-shadow-sm: 0 1px 2px rgba(22,21,15,.04);

  color: var(--kh-ink);
  font-family: var(--kh-font);
  font-variant-numeric: tabular-nums;
}
.kh .num { font-variant-numeric: tabular-nums; }
/* Titres & grands chiffres en Archivo (display) */
.kh h1, .kh h2, .kh h3,
.kh .kh-score b, .kh .kh-fn .kh-sc, .kh .kh-health .kh-stat b,
.kh .kh-foc .kh-val, .kh .kh-cat .kh-v, .kh .kh-t .tot .tv { font-family: var(--kh-font-display); }

/* ---------- En-têtes de section ---------- */
.kh .kh-sec { display: flex; align-items: center; margin: 0 2px 12px; gap: 10px; }
.kh .kh-sec h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--kh-ink); }
.kh .kh-sec .kh-r { margin-left: auto; font-size: 12px; color: var(--kh-ink-3); font-weight: 500; }
.kh .kh-eyebrow { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--kh-ink-3); font-weight: 600; }

/* ---------- Carte générique ---------- */
.kh .kh-card {
  background: var(--kh-surface); border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius); box-shadow: var(--kh-shadow);
}
.kh .kh-card-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.kh .kh-card-h h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.kh .kh-card-h .kh-sub { font-size: 12px; color: var(--kh-ink-3); }
.kh .kh-card-h .kh-r { margin-left: auto; font-size: 12px; color: var(--kh-ink-3); font-weight: 500; }
.kh .kh-card-h .kh-r.kh-link { color: var(--kh-accent-ink); cursor: pointer; font-weight: 600; }

/* ---------- Sélecteur de période ---------- */
.kh .kh-period {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--kh-surface); border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius-sm); padding: 14px 16px; box-shadow: var(--kh-shadow-sm);
}
.kh .kh-period .kh-f { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
.kh .kh-period label { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--kh-ink-2); text-transform: uppercase; }
.kh .kh-period select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--kh-line-2); border-radius: 9px;
  font-size: 14px; font-family: inherit; color: var(--kh-ink); background: var(--kh-surface-2);
}
.kh .kh-btn {
  border: 0; font-family: inherit; cursor: pointer; font-weight: 650; font-size: 14px;
  padding: 10px 18px; border-radius: 9px; background: var(--kh-ink); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.kh .kh-btn:disabled { opacity: .5; cursor: not-allowed; }
.kh .kh-btn.kh-btn-accent { background: var(--kh-accent-soft); color: var(--kh-accent-ink); }

/* ---------- Grilles de rangée ---------- */
.kh .kh-row-top { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0,1fr); gap: 18px; }
.kh .kh-row-bot { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 18px; }
.kh .kh-col { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) {
  .kh .kh-row-top, .kh .kh-row-bot { grid-template-columns: 1fr; }
}

/* ---------- Carte Santé globale (sombre) ---------- */
.kh .kh-health {
  background:
    radial-gradient(circle at 88% -10%, rgba(245,179,1,.16), transparent 60%),
    linear-gradient(160deg, var(--kh-dark-2), var(--kh-dark));
  color: var(--kh-dark-ink); border-radius: var(--kh-radius);
  padding: 20px 22px; display: flex; flex-direction: column;
  border: 1px solid #ffffff0d; box-shadow: var(--kh-shadow); min-height: 210px;
}
.kh .kh-health .kh-eyebrow { color: var(--kh-dark-muted); }
.kh .kh-health .kh-score { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 2px; }
.kh .kh-health .kh-score b { font-size: 60px; font-weight: 750; letter-spacing: -.03em; line-height: .9; }
.kh .kh-health .kh-score i { font-size: 25px; font-style: normal; font-weight: 600; color: var(--kh-accent); }
.kh .kh-delta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; margin-top: 6px;
}
.kh .kh-delta.up   { background: #2f9e5f22; color: #7fd6a2; border: 1px solid #2f9e5f33; }
.kh .kh-delta.down { background: #d6483f22; color: #e8a49d; border: 1px solid #d6483f33; }
.kh .kh-delta.flat { background: #ffffff14; color: var(--kh-dark-muted); border: 1px solid #ffffff1a; }
.kh .kh-health .kh-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: auto; padding-top: 22px; }
.kh .kh-health .kh-stat { text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: inherit; }
.kh .kh-health .kh-stat b { font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -.01em; display: block; }
.kh .kh-health .kh-stat span { display: block; font-size: 11px; color: var(--kh-dark-muted); margin-top: 5px; }
.kh .kh-health .kh-stat.g b { color: #58c88a; } .kh .kh-health .kh-stat.a b { color: #edb64a; } .kh .kh-health .kh-stat.r b { color: #e8756c; }
.kh .kh-health .kh-stat:hover span { color: var(--kh-dark-ink); }

/* ---------- À traiter maintenant ---------- */
.kh .kh-todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; padding: 16px 20px 18px; }
.kh .kh-dot-t { width: 8px; height: 8px; border-radius: 50%; background: var(--kh-bad); display: inline-block; }
.kh .kh-alert {
  border: 1px solid var(--kh-line); border-radius: var(--kh-radius-sm);
  padding: 13px 14px 14px 16px; position: relative; overflow: hidden; background: var(--kh-surface-2);
  display: flex; flex-direction: column; min-height: 118px; text-align: left;
}
.kh .kh-alert::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.kh .kh-alert.r::before { background: var(--kh-bad); } .kh .kh-alert.a::before { background: var(--kh-warn); }
.kh .kh-alert .kh-b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-bottom: 9px; }
.kh .kh-alert.r .kh-b { background: var(--kh-bad-soft); color: var(--kh-bad); }
.kh .kh-alert.a .kh-b { background: var(--kh-warn-soft); color: #b47d16; }
.kh .kh-alert .kh-t { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.kh .kh-alert .kh-m { font-size: 11.5px; color: var(--kh-ink-3); margin-top: 3px; line-height: 1.35; }
.kh .kh-alert .kh-go {
  margin-top: 12px; align-self: flex-start; border: 0; font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; color: var(--kh-accent-ink); padding: 8px 11px; border-radius: 8px; background: var(--kh-accent-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.kh .kh-empty { padding: 22px 20px; color: var(--kh-ink-3); font-size: 13px; text-align: center; }

/* ---------- Cartes par fonction ---------- */
.kh .kh-fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.kh .kh-fn {
  background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius-sm);
  padding: 15px 15px 13px; box-shadow: var(--kh-shadow-sm); transition: transform .14s, box-shadow .14s;
  text-align: left; cursor: default;
}
.kh .kh-fn:hover { transform: translateY(-2px); box-shadow: var(--kh-shadow); }
.kh .kh-fn .kh-top { display: flex; align-items: flex-start; gap: 8px; }
.kh .kh-fn .kh-nm { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.kh .kh-fn .kh-sc { margin-left: auto; font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: .85; white-space: nowrap; }
.kh .kh-fn .kh-sc small { font-size: 11px; font-weight: 500; color: var(--kh-ink-3); }
.kh .kh-fn.g .kh-sc { color: var(--kh-good); } .kh .kh-fn.a .kh-sc { color: #c98a12; }
.kh .kh-fn.r .kh-sc { color: var(--kh-bad); } .kh .kh-fn.m .kh-sc { color: var(--kh-ink-3); }

.kh .kh-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 7px; margin-top: 9px; }
.kh .kh-tag i { width: 6px; height: 6px; border-radius: 50%; }
.kh .kh-tag.g { background: var(--kh-good-soft); color: #217a48; } .kh .kh-tag.g i { background: var(--kh-good); }
.kh .kh-tag.a { background: var(--kh-warn-soft); color: #99701a; } .kh .kh-tag.a i { background: var(--kh-warn); }
.kh .kh-tag.r { background: var(--kh-bad-soft); color: #b23a33; } .kh .kh-tag.r i { background: var(--kh-bad); }
.kh .kh-tag.m { background: #eee9e0; color: #7d766a; } .kh .kh-tag.m i { background: #b3aa98; }

.kh .kh-spark { display: flex; gap: 4px; align-items: flex-end; height: 30px; margin: 13px 0 12px; }
.kh .kh-spark span { flex: 1; background: var(--kh-line-2); border-radius: 3px; min-height: 4px; }
.kh .kh-fn.g .kh-spark span.on { background: var(--kh-good); }
.kh .kh-fn.a .kh-spark span.on { background: var(--kh-warn); }
.kh .kh-fn.r .kh-spark span.on { background: var(--kh-bad); }
.kh .kh-fn.m .kh-spark span.on { background: #c9a13a; }

.kh .kh-fn .kh-foot { display: flex; align-items: center; font-size: 11.5px; }
.kh .kh-fn .kh-foot .kh-l { color: var(--kh-ink-3); } .kh .kh-fn .kh-foot .kh-rr { margin-left: auto; font-weight: 650; }
.kh .kh-fn.g .kh-foot .kh-rr { color: var(--kh-good); } .kh .kh-fn.a .kh-foot .kh-rr { color: #c98a12; }
.kh .kh-fn.r .kh-foot .kh-rr { color: var(--kh-bad); } .kh .kh-fn.m .kh-foot .kh-rr { color: #b47d16; }

/* ---------- Focus critique ---------- */
.kh .kh-focus-list { padding: 8px 20px 18px; display: flex; flex-direction: column; }
.kh .kh-foc { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--kh-line); }
.kh .kh-foc:first-child { border-top: 0; }
.kh .kh-foc .kh-name { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.kh .kh-foc .kh-name i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.kh .kh-foc.r .kh-name i { background: var(--kh-bad); } .kh .kh-foc.a .kh-name i { background: var(--kh-warn); }
.kh .kh-foc .kh-fnm { font-size: 11.5px; color: var(--kh-ink-3); margin-left: 16px; grid-column: 1; }
.kh .kh-foc .kh-val { grid-row: 1; text-align: right; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.kh .kh-foc .kh-cible { grid-column: 2; text-align: right; font-size: 11px; color: var(--kh-ink-3); }
.kh .kh-foc .kh-cible b { font-weight: 700; }
.kh .kh-foc.r .kh-cible b { color: var(--kh-bad); } .kh .kh-foc.a .kh-cible b { color: #b47d16; }
.kh .kh-foc .kh-bar { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: var(--kh-line-2); overflow: hidden; margin-top: 6px; }
.kh .kh-foc .kh-bar > i { display: block; height: 100%; border-radius: 4px; }
.kh .kh-foc.r .kh-bar > i { background: var(--kh-bad); } .kh .kh-foc.a .kh-bar > i { background: var(--kh-warn); }

/* ---------- Tendance annuelle ---------- */
.kh .kh-trend-wrap { padding: 10px 16px 14px; position: relative; }
.kh .kh-trend { width: 100%; height: 168px; display: block; overflow: visible; }
.kh .kh-trend-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%,-115%);
  background: var(--kh-dark); color: var(--kh-dark-ink); font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; box-shadow: var(--kh-shadow); transition: opacity .12s;
}
.kh .kh-trend-tip b { color: var(--kh-accent); }

/* ---------- Par catégorie ---------- */
.kh .kh-cat-list { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 15px; }
.kh .kh-cat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.kh .kh-cat .kh-lab { font-size: 12.5px; font-weight: 600; }
.kh .kh-cat .kh-lab span { color: var(--kh-ink-3); font-weight: 500; }
.kh .kh-cat .kh-v { font-size: 15px; font-weight: 700; }
.kh .kh-cat .kh-track { grid-column: 1 / -1; height: 8px; border-radius: 5px; background: var(--kh-line-2); overflow: hidden; }
.kh .kh-cat .kh-track > i { display: block; height: 100%; border-radius: 5px; }

/* ---------- Divers ---------- */
.kh :focus-visible { outline: 2px solid var(--kh-accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .kh * { transition: none !important; } }

/* ============================================================
   Vue « Historique KPI » — tableaux mensuels par catégorie
   (les tokens de statut viennent du bloc principal ci-dessus)
   ============================================================ */

/* Colonne de contenu plafonnée + centrée (évite l'étirement sur grand écran,
   tout en restant pleinement responsive en dessous). Scopé à la vue Historique. */
.kh.kh-hist { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* En-tête de la vue */
.kh .kh-vhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.kh .kh-vhead h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: var(--kh-ink); }
.kh .kh-vhead .lead { margin: 5px 0 0; color: var(--kh-ink-2); font-size: 13.5px; }
.kh .kh-vhead .r { margin-left: auto; }

/* Filtres */
.kh .kh-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow); padding: 18px 20px; margin-bottom: 20px; }
.kh .kh-filters .kh-f label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kh-ink-3); margin-bottom: 6px; }
.kh .kh-filters .kh-f select { padding: 9px 12px; border: 1px solid var(--kh-line-2); border-radius: 9px; font-size: 14px; font-family: inherit; color: var(--kh-ink); background: var(--kh-surface-2); min-width: 180px; }
.kh .kh-filters .kh-f.yr select { min-width: 110px; }
.kh .kh-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13.5px; font-weight: 600; color: var(--kh-ink-2); border: 0; background: transparent; font-family: inherit; }
.kh .kh-sw { width: 38px; height: 22px; border-radius: 11px; background: var(--kh-line-2); position: relative; transition: background .15s; flex: none; }
.kh .kh-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.kh .kh-toggle.on .kh-sw { background: var(--kh-ink); }
.kh .kh-toggle.on .kh-sw::after { transform: translateX(16px); }
.kh .kh-legend { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--kh-ink-2); flex-wrap: wrap; }
.kh .kh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kh .kh-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Carte catégorie + tableau */
.kh .kh-cat-card { background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow); margin-bottom: 18px; overflow: hidden; }
.kh .kh-cat-hd { display: flex; align-items: center; gap: 10px; padding: 15px 20px 13px; }
.kh .kh-cat-hd .sq { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.kh .kh-cat-hd h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--kh-ink); }
.kh .kh-cat-hd .wt { font-size: 12px; color: var(--kh-ink-3); font-weight: 600; }
.kh .kh-cat-hd .kpn { margin-left: auto; font-size: 12px; color: var(--kh-ink-3); }

.kh .kh-scroll { overflow-x: auto; }
/* Pleine largeur (responsive) : remplit sa colonne. La colonne est plafonnée
   par .kh-hist (voir plus bas) pour éviter l'étirement sur très grand écran. */
.kh table.kh-t { width: 100%; border-collapse: collapse; }
.kh .kh-t th, .kh .kh-t td { padding: 8px 6px; text-align: center; font-size: 12.5px; }
.kh .kh-t thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kh-ink-3); border-bottom: 1px solid var(--kh-line); padding-bottom: 10px; }
.kh .kh-t .ind { text-align: left; width: 236px; min-width: 210px; position: sticky; left: 0; background: var(--kh-surface); padding-left: 20px; z-index: 1; }
.kh .kh-t .cible { width: 66px; color: var(--kh-ink-2); font-weight: 700; white-space: nowrap; }
.kh .kh-t thead .cible { color: var(--kh-ink-3); }
.kh .kh-t .tot { width: 96px; border-left: 1px solid var(--kh-line); }
.kh .kh-t thead .tot { color: var(--kh-accent-ink); }
.kh .kh-t tbody tr { border-bottom: 1px solid var(--kh-line); }
.kh .kh-t tbody tr.kh-krow:hover .ind { background: var(--kh-surface-2); }
.kh .kh-t .ind .nm { font-size: 13.5px; font-weight: 600; color: var(--kh-ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.kh .kh-t .ind .meta { font-size: 11px; color: var(--kh-ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kh .kh-t .ind .dir { font-weight: 700; }
.kh .kh-t .ind .dir.up { color: var(--kh-good); } .kh .kh-t .ind .dir.down { color: var(--kh-cat-3); }
.kh .kh-t .cible .edit { border: 0; background: transparent; cursor: pointer; color: var(--kh-accent); padding: 0 2px; font-size: 10px; }

.kh .kh-t .kh-cell { padding: 5px 4px; cursor: pointer; position: relative; min-width: 54px; }
.kh .kh-t .kh-cell .v { display: block; padding: 6px 2px; border-radius: 8px; font-weight: 650; color: var(--kh-ink); }
.kh .kh-t .kh-cell.g .v { background: var(--kh-good-soft); color: var(--kh-good-ink); }
.kh .kh-t .kh-cell.a .v { background: var(--kh-warn-soft); color: var(--kh-warn-ink); }
.kh .kh-t .kh-cell.r .v { background: var(--kh-bad-soft); color: var(--kh-bad-ink); }
.kh .kh-t .kh-cell .n1 { font-size: 10px; line-height: 1.2; margin-top: 2px; color: var(--kh-ink-3); display: flex; align-items: center; justify-content: center; gap: 3px; }
.kh .kh-t .kh-cell .cmt { position: absolute; top: 2px; right: 3px; width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; }
.kh .kh-t .kh-cell .cmt.on { background: var(--kh-cat-3); color: #fff; }
.kh .kh-t .kh-cell .cmt.add { color: var(--kh-ink-3); opacity: 0; }
.kh .kh-t .kh-cell:hover .cmt.add { opacity: .7; }

.kh .kh-t .tot .tv { font-size: 14px; font-weight: 700; }
.kh .kh-t .tot .tsub { font-size: 10px; color: var(--kh-ink-3); }
.kh .kh-t .tot.g { background: var(--kh-good-soft); } .kh .kh-t .tot.a { background: var(--kh-warn-soft); } .kh .kh-t .tot.r { background: var(--kh-bad-soft); }

/* Ligne Validation (bas de catégorie) */
.kh .kh-t tr.kh-valrow { border-top: 1px solid var(--kh-line); background: var(--kh-surface-2); }
.kh .kh-t tr.kh-valrow .ind { background: var(--kh-surface-2); color: var(--kh-ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.kh .kh-chk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--kh-good-soft); color: var(--kh-good); font-size: 12px; font-weight: 800; }
.kh .kh-chk.pend { background: transparent; color: var(--kh-line-2); }

/* ============================================================
   Vue « Saisie mensuelle » — mêmes tableaux que l'historique,
   avec champ de saisie + statut + direction + bouton enregistrer
   ============================================================ */
.kh .kh-t.kh-sai .ind { width: 34%; min-width: 200px; }
.kh .kh-t .kh-inp { width: 100px; padding: 7px 9px; border: 1px solid var(--kh-line-2); border-radius: 8px; font-size: 13px; font-family: inherit; text-align: center; background: var(--kh-surface); color: var(--kh-ink); font-variant-numeric: tabular-nums; }
.kh .kh-t .kh-inp:focus { outline: 2px solid var(--kh-accent); outline-offset: 1px; border-color: var(--kh-accent); }
.kh .kh-t .kh-inp:disabled { background: #F0EEE7; color: var(--kh-ink-3); cursor: not-allowed; }
.kh .kh-dir { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; border-radius: 7px; font-weight: 800; font-size: 13px; }
.kh .kh-dir.up { background: var(--kh-good-soft); color: var(--kh-good-ink); }
.kh .kh-dir.down { background: var(--kh-info-soft); color: var(--kh-info-ink); }
.kh .kh-st { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #EEE9E0; color: var(--kh-ink-3); }
.kh .kh-st.g { background: var(--kh-good-soft); color: var(--kh-good-ink); }
.kh .kh-st.a { background: var(--kh-warn-soft); color: var(--kh-warn-ink); }
.kh .kh-st.r { background: var(--kh-bad-soft); color: var(--kh-bad-ink); }
.kh .kh-save { border: 0; cursor: pointer; background: var(--kh-ink); color: #fff; border-radius: 8px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kh .kh-save:disabled { opacity: .4; cursor: not-allowed; }
/* Bloc validation dans la barre de filtres */
.kh .kh-filters .kh-fact { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kh .kh-filters .kh-vstatus { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 9px; background: var(--kh-good-soft); color: var(--kh-good-ink); font-size: 12.5px; font-weight: 600; }
.kh .kh-btn.kh-btn-danger { background: var(--kh-bad); color: #fff; }

/* ============================================================
   Couche de compatibilité charte — « .kh-auto »
   Applique la charte aux vues encore en Tailwind « brut » (config,
   rapports, incidents, employés, clients, documents…) SANS réécrire
   leur markup. Portée : uniquement sous .kh-auto — les 3 vues
   sur-mesure (Dashboard / Saisie / Historique, en .kh sans .kh-auto)
   ne sont pas affectées. Purement cosmétique : aucun binding Alpine,
   aucune structure modifiée. On réchauffe simplement surfaces,
   ombres, bordures, fonds et champs vers les tokens de la charte.
   ============================================================ */

/* Ombres réchauffées des cartes (shadow-sm/shadow/shadow-md uniquement).
   On NE touche PAS aux grandes ombres (shadow-lg/xl/2xl) : elles servent à
   l'élévation forte des modales/menus, qui doit rester marquée. */
.kh-auto .shadow-sm { box-shadow: var(--kh-shadow-sm) !important; }
.kh-auto .shadow, .kh-auto .shadow-md { box-shadow: var(--kh-shadow) !important; }

/* Bordures grises → ligne charte (chaude) */
.kh-auto .border-gray-100, .kh-auto .border-gray-200, .kh-auto .border-gray-300 { border-color: var(--kh-line) !important; }
.kh-auto .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.kh-auto .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--kh-line) !important; }

/* Fonds gris internes → surfaces charte (chaudes) */
.kh-auto .bg-gray-50 { background: var(--kh-surface-2) !important; }
.kh-auto .bg-gray-100 { background: var(--kh-line-2) !important; }

/* Rayon de carte un peu plus généreux (cartes seulement, pas les pastilles/pills) */
.kh-auto .bg-white.rounded-lg, .kh-auto .bg-white.rounded-xl, .kh-auto .bg-white.rounded-2xl { border-radius: var(--kh-radius-sm); }

/* Champs de formulaire : police héritée + anneau de focus charte */
.kh-auto input:not([type=checkbox]):not([type=radio]):not([type=range]),
.kh-auto select, .kh-auto textarea { font-family: inherit; }
/* Focus : anneau (outline) charte uniquement. On ne force PAS border-color
   pour ne pas écraser les bordures d'erreur (ex. border-red-500) pendant le
   focus — l'anneau suffit à indiquer le focus. */
.kh-auto input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.kh-auto select:focus, .kh-auto textarea:focus {
  outline: 2px solid var(--kh-accent); outline-offset: 1px;
}

/* Tableaux : chiffres alignés */
.kh-auto table { font-variant-numeric: tabular-nums; }

/* Focus accessible charte sur les actions */
.kh-auto button { font-family: inherit; }
.kh-auto :focus-visible { outline: 2px solid var(--kh-accent); outline-offset: 2px; }

/* Grands chiffres/titres en display (Archivo) dans les vues auto */
.kh-auto .text-2xl, .kh-auto .text-3xl, .kh-auto .text-4xl, .kh-auto .text-5xl { font-family: var(--kh-font-display); letter-spacing: -.02em; }

/* ============================================================
   Kit « chrome » charte réutilisable — en-tête de vue, segmented
   control (onglets), tuiles de stats cliquables, sélecteurs
   compacts et variantes de boutons. Sert à passer les vues
   restantes (Incidents, Rapports, Clients, Employés…) en
   sur-mesure sans toucher à leur logique.
   ============================================================ */
/* En-tête de vue : bloc d'actions à droite qui s'enroule */
.kh .kh-vhead .kh-vhactions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
.kh .kh-vhead h1 .kh-live { font-size: 12px; color: var(--kh-good); margin-left: 8px; vertical-align: middle; }
.kh .kh-vhead h1 .kh-live i { animation: khpulse 1.6s ease-in-out infinite; }
@keyframes khpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Sélecteur compact */
.kh .kh-selc { padding: 8px 10px; border: 1px solid var(--kh-line); border-radius: 9px; font-size: 13px; font-family: inherit; color: var(--kh-ink); background: var(--kh-surface); }

/* Variantes de boutons */
.kh .kh-btn.kh-btn-outline { background: var(--kh-surface); border: 1px solid var(--kh-line); color: var(--kh-ink); }
.kh .kh-btn.kh-btn-outline:hover { background: var(--kh-surface-2); }
.kh .kh-btn.kh-btn-amber { background: var(--kh-accent); color: #16150F; }
.kh .kh-btn.kh-btn-sm { padding: 8px 13px; font-size: 13px; }

/* Segmented control (onglets) */
.kh .kh-seg { display: inline-flex; background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: 12px; padding: 4px; gap: 2px; box-shadow: var(--kh-shadow-sm); }
.kh .kh-seg button { border: 0; background: transparent; font-family: inherit; cursor: pointer; padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--kh-ink-2); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.kh .kh-seg button:hover { color: var(--kh-ink); }
.kh .kh-seg button.on { background: var(--kh-ink); color: #fff; }

/* Tuiles de stats cliquables */
.kh .kh-stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; }
.kh .kh-stile { position: relative; overflow: hidden; text-align: left; cursor: pointer; font-family: inherit; background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius-sm); box-shadow: var(--kh-shadow-sm); padding: 15px 16px; transition: transform .14s, box-shadow .14s; }
.kh .kh-stile:hover { transform: translateY(-2px); box-shadow: var(--kh-shadow); }
.kh .kh-stile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kh-ink-3); }
.kh .kh-stile b { font-family: var(--kh-font-display); font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1; display: block; color: var(--kh-ink); }
.kh .kh-stile span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--kh-ink-2); }
.kh .kh-stile em { display: block; font-style: normal; font-size: 10.5px; color: var(--kh-ink-3); margin-top: 3px; }
.kh .kh-stile.r::before { background: var(--kh-bad); }    .kh .kh-stile.r b { color: var(--kh-bad-ink); }
.kh .kh-stile.a::before { background: var(--kh-warn); }   .kh .kh-stile.a b { color: var(--kh-warn-ink); }
.kh .kh-stile.g::before { background: var(--kh-good); }   .kh .kh-stile.g b { color: var(--kh-good-ink); }
.kh .kh-stile.i::before { background: var(--kh-info); }   .kh .kh-stile.i b { color: var(--kh-info-ink); }
.kh .kh-stile.p::before { background: var(--kh-intern); } .kh .kh-stile.p b { color: var(--kh-intern-ink); }
/* Variante statique (tuile non cliquable) */
.kh .kh-stile.stat { cursor: default; }
.kh .kh-stile.stat:hover { transform: none; box-shadow: var(--kh-shadow-sm); }
/* Compteur discret dans le sous-titre d'en-tête */
.kh .kh-vhead .lead .kh-count { color: var(--kh-ink-3); }

/* ============================================================
   Vue « Rapports » — liste : tuiles métriques à icône + carte-
   tableau (pastilles de filtre + action) + tableau charte.
   ============================================================ */
/* Tuiles métriques (total / brouillons / envoyés / conformité) */
.kh .kh-mcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.kh .kh-mcard { display: flex; align-items: center; gap: 14px; background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow-sm); padding: 17px 20px; }
.kh .kh-mcard .mi { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 17px; }
.kh .kh-mcard .mt b { font-family: var(--kh-font-display); font-size: 28px; font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--kh-ink); display: block; }
.kh .kh-mcard .mt span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--kh-ink-2); font-weight: 500; }
.kh .kh-mcard.n .mi { background: #EEEBE3; color: #6E6D64; }
.kh .kh-mcard.a .mi { background: var(--kh-warn-soft); color: var(--kh-warn-ink); }
.kh .kh-mcard.g .mi { background: var(--kh-good-soft); color: var(--kh-good-ink); }
.kh .kh-mcard.i .mi { background: var(--kh-info-soft); color: var(--kh-info-ink); }

/* Carte-tableau générique + en-tête (pastilles de filtre + action) */
.kh .kh-tcard { background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow); overflow: hidden; }
.kh .kh-tcard-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--kh-line); }
.kh .kh-tcard-h .kh-tcard-act { margin-left: auto; }
.kh .kh-fpills { display: inline-flex; background: var(--kh-surface-2); border: 1px solid var(--kh-line); border-radius: 10px; padding: 3px; gap: 2px; }
.kh .kh-fpills button { border: 0; background: transparent; font-family: inherit; cursor: pointer; padding: 6px 13px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--kh-ink-2); white-space: nowrap; }
.kh .kh-fpills button:hover { color: var(--kh-ink); }
.kh .kh-fpills button.on { background: var(--kh-surface); color: var(--kh-ink); box-shadow: var(--kh-shadow-sm); }

/* Tableau des rapports (habille la coquille, conserve les cellules) */
.kh table.kh-rt { width: 100%; border-collapse: collapse; }
.kh .kh-rt thead th { background: var(--kh-surface); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kh-ink-3); padding: 12px 14px; border-bottom: 1px solid var(--kh-line); white-space: nowrap; }
.kh .kh-rt tbody td { padding: 13px 14px; font-size: 13px; border-bottom: 1px solid var(--kh-line-2); vertical-align: middle; }
.kh .kh-rt tbody tr:last-child td { border-bottom: 0; }
.kh .kh-rt tbody tr:hover { background: var(--kh-surface-2); }
/* Pied « Voir plus » (pagination par pas de 50) */
.kh .kh-loadmore { padding: 14px; text-align: center; border-top: 1px solid var(--kh-line); }
.kh .kh-loadmore .kh-lm-count { opacity: .6; }