@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

/* ============================================================
   NOCIKA — Design System v2.0
   Police  : DM Sans
   Périmètre : Hub + module Devis (liste + édition)

   Guide de lecture
   - Les classes `nk-*` sont les briques "modernes" partagées entre modules.
   - Les classes sans préfixe ou avec préfixes courts (`sb-`, `ud-`, `rcard`, ...)
     sont surtout des couches legacy Hub encore en migration.
   - Les sections sont ordonnées du plus transversal (tokens, primitives) au plus
     spécifique (clients, hub, compatibilité).
   - Quand une classe est pensée comme variante, elle complète une base au lieu
     de la remplacer (`.nk-btn` + `.nk-btn--primary`, `.nk-kpi` + `.nk-kpi--cyan`).
   ============================================================ */

/* ── TOKENS ───────────────────────────────────────────────────
   Source unique des couleurs, rayons, ombres, z-index et timings.
   Toute nouvelle primitive doit d'abord consommer ces variables avant
   d'introduire une nouvelle valeur "en dur".
*/
:root {

  /* Typographie de référence de tout le back-office. */
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Palette chaude principale : CTA et accents de premier niveau. */
  --orange:    #E8651A;
  --orange-h:  #c95214;
  --orange-l:  #fff3e8;
  --orange-m:  #f5c094;

  /* Palette froide secondaire : états interactifs, focus, liens métier. */
  --cyan:      #0ea5b0;
  --cyan-h:    #0c8b94;
  --cyan-l:    #e0f7f9;
  --cyan-d:    #0c6571;

  /* Couleurs sémantiques utilisées par badges, KPI et feedbacks. */
  --success:   #16a34a;
  --success-l: #f0fdf4;
  --success-b: #bbf7d0;

  --danger:    #dc2626;
  --danger-l:  #fef2f2;
  --danger-b:  #fecaca;

  --warning:   #d97706;
  --warning-l: #fffbeb;
  --warning-b: #fde68a;

  --ia:        #7c3aed;
  --ia-l:      #ede9fe;
  --ia-d:      #4c1d95;
  --ia-b:      #ddd6fe;

  --manual:    #185FA5;
  --manual-l:  #E6F1FB;
  --manual-d:  #0C447C;

  --ps:        #0F6E56;
  --ps-l:      #E1F5EE;
  --ps-d:      #085041;

  --navy:      #0f172a;
  --slate:     #64748b;
  --muted:     #475569;
  --border:    #e2e8f0;
  --border-d:  #cbd5e1;
  --surface:   #f8fafc;
  --bg:        #f1f5f9;
  --white:     #ffffff;

  /* Alias de compatibilité pour les anciens modules Hub.
     Ne pas réutiliser sur du nouveau code : préférer les tokens "canoniques"
     ci-dessus afin d'éviter d'étendre la dette de migration.
  */
  --nv:        var(--navy);
  --nv2:       #1a3a60;
  --cy:        var(--cyan);
  --cy-lt:     var(--cyan-l);
  --or:        var(--orange);
  --or-lt:     var(--orange-l);
  --text:      var(--navy);
  --muted2:    var(--muted);
  --border2:   var(--border-d);

  /* Rayons communs, du chip compact au conteneur principal. */
  --r-sm:  5px;
  --r-md:  8px;
  --r-lg:  11px;
  --r-xl:  14px;

  /* Ombres par profondeur visuelle croissante. */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  /* Anneau de focus standard applique sur inputs/selects. */
  --focus-ring: 0 0 0 3px rgba(14,165,176,.2);

  /* Durées d'animation limitees aux interactions UI courtes. */
  --t-fast: .14s ease;
  --t-std:  .18s ease;

  /* Ordre de superposition global. */
  --z-bar:     100;
  --z-topbar:  200;
  --z-drawer:  600;
  --z-modal:   800;
  --z-toast:   1000;
  --z-tooltip: 1200;

  /* Dimensions du shell Hub : sidebar large/compacte + topbar. */
  --sb:    265px;
  --sb-sm: 62px;
  --top:   62px;
}

/* ── RESET ─────────────────────────────────────────────────────
   Reset minimaliste : on normalise les box models et on retire les
   contrôles natifs qui gênent les composants numériques maison.
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ── BASE ──────────────────────────────────────────────────────
   Le shell occupe toute la hauteur du viewport et délègue le scroll
   aux zones internes (`.nk-list__content`, sidebars, drawers...).
*/
html { height: 100vh; overflow: hidden; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--bg);
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

input, select, textarea, button { font-family: var(--font); font-size: inherit; }
a { color: inherit; text-decoration: none; }
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }

/* ============================================================
   BOUTONS
   Primitive de base pour toutes les actions.
   Les variantes ne doivent modifier que la sémantique visuelle
   (couleur, fond, bord), jamais la structure du bouton.
   ============================================================ */
.nk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.nk-btn:disabled { opacity: .5; cursor: not-allowed; }
.nk-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.nk-btn--primary { background: var(--orange); color: var(--white); }
.nk-btn--primary:not(:disabled):hover { background: var(--orange-h); }

.nk-btn--success { background: var(--success); color: var(--white); }
.nk-btn--success:not(:disabled):hover { background: #15803d; }

.nk-btn--danger { background: var(--danger); color: var(--white); }
.nk-btn--danger:not(:disabled):hover { background: #b91c1c; }

.nk-btn--outline { background: var(--white); color: var(--slate); border-color: var(--border); }
.nk-btn--outline:not(:disabled):hover { border-color: var(--border-d); color: var(--navy); }

.nk-btn--ghost { background: transparent; color: var(--navy); }
.nk-btn--ghost:not(:disabled):hover { background: rgba(15,23,42,.06); }

.nk-btn--pdf { background: #b45309; color: var(--white); }
.nk-btn--pdf:not(:disabled):hover { background: #92400e; }

.nk-btn--sm { padding: 5px 10px; font-size: 11px; }
.nk-btn--sm svg { width: 12px; height: 12px; }

.nk-btn--icon {
  width: 30px; height: 30px;
  padding: 0;
  justify-content: center;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--slate);
  border-radius: var(--r-md);
}
.nk-btn--icon:hover           { border-color: var(--border-d); background: var(--bg); }
.nk-btn--icon-edit:hover      { border-color: var(--cyan);    color: var(--cyan);    background: var(--cyan-l); }
.nk-btn--icon-clone:hover     { border-color: var(--warning); color: var(--warning); background: var(--warning-l); }
.nk-btn--icon-del:hover       { border-color: var(--danger);  color: var(--danger);  background: var(--danger-l); }
.nk-btn--icon-ia:hover        { border-color: var(--ia); color: var(--ia); background: var(--ia-l); }

/* ============================================================
   BADGES
   Capsules courtes pour états métier, statuts ou affiliations.
   Les tailles compactes et variantes "site" servent surtout dans
   les tableaux et blocs client.
   ============================================================ */
.nk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.nk-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.nk-badge--success { color: var(--success); background: var(--success-l); border-color: var(--success-b); }
.nk-badge--danger  { color: var(--danger);  background: var(--danger-l);  border-color: var(--danger-b); }
.nk-badge--warning { color: var(--warning); background: var(--warning-l); border-color: var(--warning-b); }
.nk-badge--cyan    { color: var(--cyan-d);  background: var(--cyan-l);    border-color: var(--cyan); }
.nk-badge--grey    { color: var(--slate);   background: var(--surface);   border-color: var(--border); }
.nk-badge--ia      { color: var(--ia);      background: var(--ia-l);      border-color: var(--ia-b); }

.nk-badge--site {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

.nk-badge-group     { display: flex; gap: 2px; flex-wrap: wrap; }
.nk-badge--disabled { background: var(--surface); color: var(--border-d); border-color: transparent; }

.nk-badge--price { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); background: var(--cyan-l); color: var(--cyan-d); margin-left: 4px; }
.nk-badge--price-ht { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); background: var(--warning-l); color: var(--warning); margin-left: 4px; }

/* ============================================================
   BADGES SITE — couleurs métier
   Mapping visuel stable entre site e-commerce et couleur.
   Ces classes sont volontairement séparées des badges génériques car
   elles portent une convention métier, pas seulement une couleur.
   ============================================================ */
.nk-site--fs     { background: #fce8e0; color: #b33a0f; }
.nk-site--oma    { background: #deeaf5; color: #002c50; }
.nk-site--oma-de { background: #ede8fb; color: #3d1f8a; }
.nk-site--oma-it { background: #d4f5e2; color: #0a6b3a; }
.nk-site--ng     { background: #d8f2f8; color: #005f77; }
.nk-site--src    { background: #e6f5f4; color: #1e6b65; }
.nk-site--nk     { background: #fffbeb; color: #92400e; }

/* ============================================================
   FORMULAIRES
   Primitives de saisie réutilisées dans Hub, devis, clients et modales.
   La densité est pensée pour du back-office compact.
   ============================================================ */
.nk-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 4px;
}

.nk-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 9px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nk-input:focus { border-color: var(--cyan); box-shadow: var(--focus-ring); }
.nk-input::placeholder { color: var(--muted); }
.nk-input:placeholder-shown:not(:focus) { border-color: var(--border); background: var(--surface); }
.nk-input--sm { padding: 4px 7px; font-size: 12px; border-radius: var(--r-sm); }

.nk-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 26px 6px 9px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--navy);
  background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.nk-select:focus { border-color: var(--cyan); box-shadow: var(--focus-ring); }

.nk-form-group { display: flex; flex-direction: column; gap: 4px; }
.nk-form-row   { display: flex; gap: 10px; flex-wrap: wrap; }
.nk-form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nk-required   { color: var(--danger); }

/* Message d'erreur inline masqué par défaut puis affiché par JS
   via ajout de contenu ou classe utilitaire. */
.nk-form-error {
  display: none;
  padding: 7px 10px;
  background: var(--danger-l);
  border: 1px solid var(--danger-b);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--danger);
}
.nk-form-warning {
  padding: 8px 12px;
  background: var(--warning-l);
  border: 1px solid var(--warning-b);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--warning);
  line-height: 1.5;
}

/* Helpers de composition rapides pour petits formulaires legacy. */
.nk-row      { display: flex; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.nk-field    { flex: 1; min-width: 70px; }
.nk-field--sm { flex: 0 0 80px; }
.nk-field--md { flex: 0 0 130px; }
.nk-field--lg { flex: 0 0 200px; }

/* Champ avec indicateur de statut asynchrone (loading, check, erreur). */
.nk-ref-wrap { position: relative; }
.nk-ref-wrap .nk-input { padding-right: 26px; }
.nk-ref-status {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
  line-height: 1;
}
.nk-ref-status--loading { animation: nk-spin .7s linear infinite; display: inline-block; }

/* Tooltip d'erreur ancré sous un champ positionné relativement. */
.nk-tooltip-err {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  z-index: var(--z-tooltip);
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
}
.nk-tooltip-err::before {
  content: '';
  position: absolute;
  bottom: 100%; left: 10px;
  border: 5px solid transparent;
  border-bottom-color: var(--danger);
}

@keyframes nk-spin { to { transform: rotate(360deg); } }

/* ============================================================
   CARDS
   Conteneurs standards pour sections éditoriales ou métiers.
   `.nk-card-head` est cliquable et peut servir de déclencheur de repli.
   ============================================================ */
.nk-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.nk-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
}

.nk-card-head-icon {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  background: var(--orange);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.nk-card-head-chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  transition: transform var(--t-std);
}
.nk-card-head.open .nk-card-head-chevron { transform: rotate(180deg); }

.nk-card-body { padding: 14px 16px; }

/* Variante "panel" plus plate utilisée dans quelques sous-sections
   où l'on veut un en-tête compact sans vraie carte complète. */
.nk-panel__head {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.nk-panel__head.open .nk-panel__chevron { transform: rotate(180deg); }
.nk-panel__title   { font-size: 13px; font-weight: 600; color: var(--navy); }
.nk-panel__meta    { font-size: 11px; color: var(--muted); }
.nk-panel__chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  transition: transform var(--t-std);
}

/* ============================================================
   KPI
   Cartes de synthèse compactes.
   Chaque KPI embarque ses propres variables CSS pour décliner la même
   structure avec plusieurs palettes sans dupliquer le markup.
   ============================================================ */
.nk-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 5px;
  padding: 6px 16px 5px;
  flex-shrink: 0;
}

.nk-kpi {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color var(--t-fast);

  --kpi-bg:     var(--surface);
  --kpi-color:  var(--slate);
  --kpi-border: var(--border);
}
.nk-kpi:hover  { border-color: var(--border-d); }
.nk-kpi.active { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }

/* Variantes sémantiques.
   Elles alimentent `--kpi-*`, ensuite consommées par les sous-éléments. */
.nk-kpi--grey    { --kpi-bg: var(--surface);   --kpi-color: var(--slate);   --kpi-border: var(--border); }
.nk-kpi--cyan    { --kpi-bg: var(--cyan-l);    --kpi-color: var(--cyan-d);  --kpi-border: var(--cyan); }
.nk-kpi--success { --kpi-bg: var(--success-l); --kpi-color: var(--success); --kpi-border: var(--success-b); }
.nk-kpi--warning { --kpi-bg: var(--warning-l); --kpi-color: var(--warning); --kpi-border: var(--warning-b); }
.nk-kpi--danger  { --kpi-bg: var(--danger-l);  --kpi-color: var(--danger);  --kpi-border: var(--danger-b); }

/* Éléments enfants — consomment les variables du parent */
.nk-kpi__head  { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.nk-kpi__icon  { width: 20px; height: 20px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--kpi-bg); }
.nk-kpi__icon svg { width: 10px; height: 10px; color: var(--kpi-color); }
.nk-kpi__label { font-size: 9px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .5px; }
.nk-kpi__value { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 3px; }
.nk-kpi__chip  { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: var(--r-sm); border: 1px solid var(--kpi-border); background: var(--kpi-bg); color: var(--kpi-color); }
.nk-kpi__dot   { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 2px; vertical-align: middle; }
.nk-kpi__empty { font-size: 11px; color: var(--muted); }

/* ============================================================
   LISTE DEVIS
   Shell vertical commun aux pages de listing.
   Utilise une barre de contexte fixe puis une zone de contenu scrollable.
   ============================================================ */
.nk-list {
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.nk-list__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 20px;
  gap: 12px;
}

/* Ligne de filtres et d'actions secondaires au-dessus des tableaux. */
.nk-list__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Wrapper visuel du champ de recherche.
   L'input réel vit à l'intérieur pour garder l'icône et les clear buttons. */
.nk-list__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  min-width: 200px;
  flex: 1;
  max-width: 320px;
  height: 32px;
  transition: border-color var(--t-fast);
}
.nk-list__search:focus-within { border-color: var(--cyan); }
.nk-list__search svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.nk-list__search input {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 12px; color: var(--navy);
  flex: 1; min-width: 0; height: 100%;
}
.nk-list__search input::placeholder { color: var(--muted); }

/* Select compact pour filtres de listing. */
.nk-list__select {
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 12px;
  color: var(--navy);
  background: var(--white);
  outline: none;
  cursor: pointer;
  height: 32px;
  transition: border-color var(--t-fast);
}
.nk-list__select:focus { border-color: var(--cyan); }

.nk-list__count { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }

.nk-list__check-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--slate);
  cursor: pointer;
}

.nk-td--margin      { text-align: right; white-space: nowrap; font-size: 12px; font-weight: 700; }
.nk-td--margin-sub  { font-size: 11px; margin-top: 1px; }

/* ============================================================
   TABLEAU — composant unique réutilisable
   Tableau de back-office par défaut.
   Les variantes de cellules (`.nk-td--*`) servent à changer la présentation
   sans recréer de styles par écran.
   ============================================================ */
.nk-table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}

table.nk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 13px;
  color: var(--navy);
}

/* En-tête sticky visuellement, mais pas techniquement fixé : la logique de
   scroll reste portée par `.nk-table-wrap` pour simplifier les écrans. */
table.nk-table thead tr { background: var(--surface); }
table.nk-table thead th {
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

table.nk-table tbody tr {
  border-top: 1px solid var(--surface);
  cursor: pointer;
  transition: background var(--t-fast);
}
table.nk-table tbody tr:hover   { background: var(--surface); }
table.nk-table tbody tr.deleted { opacity: .4; }

table.nk-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  font-family: var(--font);
  font-size: 13px;
  color: var(--navy);
  font-weight: 400;
}

/* Variante dense — lignes compactes pour les listes à fort volume */
table.nk-table.nk-table--dense thead th { padding: 6px 10px; }
table.nk-table.nk-table--dense tbody td { padding: 6px 10px; font-size: 11px; }
table.nk-table.nk-table--dense tbody tr { border-top: 1px solid var(--border); }

/* Modificateurs de cellule — surchargent uniquement ce qui change */
.nk-td--num     { font-size: 12px; color: #64748b; white-space: nowrap; }
.nk-td--muted   { font-size: 11px; color: var(--muted); }
.nk-td--right   { text-align: right; white-space: nowrap; }
.nk-td--center  { text-align: center; }
.nk-td--bold    { font-weight: 700; }
.nk-td--nowrap  { white-space: nowrap; }
.nk-td--sub        { font-size: 11px; color: #475569; margin-top: 2px; }
.nk-td--client     { font-size: 13px; font-weight: 600; color: #0f172a; }
.nk-td--amount     { font-size: 13px; font-weight: 700; color: #0f172a; }
.nk-td--amount-ht  { font-size: 11px; color: #94a3b8; margin-top: 2px; }

.nk-td--date       { vertical-align: middle; }
.nk-td--date-day   { font-size: 12px; color: #475569; font-weight: 500; }
.nk-td--date-time  { font-size: 10px; color: #94a3b8; margin-top: 1px; }

.nk-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* Indicateur de tri ajouté dynamiquement par les modules JS. */
.nk-th__sort        { opacity: .3; font-size: 9px; margin-left: 3px; }
.nk-th__sort.active { opacity: 1; color: var(--cyan); }

/* Marge — couleurs sémantiques */
.nk-margin--good    { color: #16a34a; }
.nk-margin--ok      { color: #65a30d; }
.nk-margin--warning { color: var(--warning); }
.nk-margin--bad     { color: var(--danger); }

/* Menu d'actions contextuelles ancré aux lignes de tableau. */
.nk-row-menu { position: fixed; z-index: var(--z-tooltip); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 4px; min-width: 160px; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
.nk-row-menu.open { opacity: 1; pointer-events: auto; }
.nk-row-menu__item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--navy); border: none; background: transparent; width: 100%; text-align: left; font-family: var(--font); }
.nk-row-menu__item:hover { background: var(--surface); }
.nk-row-menu__item.danger { color: var(--danger); }
.nk-row-menu__item.danger:hover { background: var(--danger-l); }
.nk-row-menu__item svg { width: 13px; height: 13px; flex-shrink: 0; }
.nk-row-menu__sep { height: 1px; background: var(--surface); margin: 3px 0; }

.nk-list__state {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  padding: 60px 20px;
  color: var(--muted); font-size: 13px; text-align: center;
}
.nk-list__state svg       { width: 32px; height: 32px; stroke: var(--border-d); flex-shrink: 0; }
.nk-list__state.error     { color: var(--danger); }
.nk-list__state.error svg { stroke: var(--danger-b); }

/* ============================================================
   DRAWER
   Panneau latéral hors flux, utilisé pour détails ou formulaires secondaires.
   Il doit rester monté hors des conteneurs à `overflow:hidden`.
   ============================================================ */
.nk-drawer__overlay { position: fixed; inset: 0; background: rgba(15,39,68,.35); z-index: var(--z-drawer); opacity: 0; transition: opacity var(--t-std); pointer-events: none; }
.nk-drawer__overlay.open { opacity: 1; pointer-events: auto; }
.nk-drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: var(--white); border-left: 1px solid var(--border); z-index: calc(var(--z-drawer) + 1); transform: translateX(100%); transition: transform .2s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.nk-drawer.open { transform: translateX(0); }
.nk-drawer__head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--white); position: sticky; top: 0; z-index: 10; }
.nk-drawer__num { font-size: 11px; font-weight: 700; font-family: monospace; color: var(--navy); background: var(--surface); padding: 2px 7px; border-radius: var(--r-sm); flex-shrink: 0; }
.nk-drawer__client { flex: 1; min-width: 0; }
.nk-drawer__client-name { font-weight: 600; font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-drawer__client-email { font-size: 11px; color: var(--muted); }
.nk-drawer__close { width: 26px; height: 26px; border-radius: var(--r-sm); border: none; background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--slate); flex-shrink: 0; }
.nk-drawer__close svg { width: 12px; height: 12px; }
.nk-drawer__body { padding: 14px 16px; flex: 1; overflow-y: auto; }
.nk-drawer__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--surface); font-size: 12px; }
.nk-drawer__row:last-child { border-bottom: none; }
.nk-drawer__lbl { color: var(--slate); font-size: 11px; }
.nk-drawer__val { font-weight: 500; color: var(--navy); font-size: 12px; }
.nk-drawer__section { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 12px 0 6px; }
.nk-drawer__line { display: flex; align-items: flex-start; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--surface); font-size: 11px; }
.nk-drawer__line:last-child { border-bottom: none; }
.nk-drawer__item-ref { font-family: monospace; font-size: 10px; color: var(--muted); flex-shrink: 0; min-width: 52px; }
.nk-drawer__item-name { flex: 1; color: var(--navy); line-height: 1.4; }
.nk-drawer__item-qty { font-size: 10px; color: var(--muted); }
.nk-drawer__item-price { flex-shrink: 0; font-weight: 600; color: var(--navy); white-space: nowrap; }
.nk-drawer__total { background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; margin-top: 12px; }
.nk-drawer__total-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.nk-drawer__total-row.main { font-weight: 700; font-size: 14px; border-top: 1px solid var(--border); margin-top: 5px; padding-top: 7px; }
.nk-drawer__actions { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: var(--white); position: sticky; bottom: 0; }
.nk-drawer__actions-row { display: flex; gap: 7px; }

/* ============================================================
   MODALES
   Overlay centré, tailles pilotées par modificateurs.
   Les composants métier ajoutent ensuite leurs propres variantes de largeur
   ou de priorité de z-index.
   ============================================================ */
.nk-modal__overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-std);
}
.nk-modal__overlay.open { opacity: 1; pointer-events: auto; }

.nk-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  width: 92%; max-width: 460px;
  transform: scale(.97);
  transition: transform var(--t-std);
  font-family: var(--font);
}
.nk-modal__overlay.open .nk-modal { transform: scale(1); }

.nk-modal--sm { max-width: 360px; }
.nk-modal--lg { max-width: 600px; }

.nk-modal__head  { padding: 15px 18px 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.nk-modal__title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.nk-modal__sub   { font-size: 12px; color: var(--slate); margin-bottom: 18px; line-height: 1.5; }
.nk-modal__body  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.nk-modal__foot  { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   CONTEXT BAR
   Barre d'identité de module : titre, sélecteurs, statut, actions rapides.
   Elle reste compacte pour laisser la place au contenu des écrans métier.
   ============================================================ */
.nk-context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 50px;
  background: #e8ecf2;
  border-bottom: 2px solid var(--border-d);
  flex-shrink: 0; width: 100%;
}

.nk-context-bar__sep    { width: 1px; height: 22px; background: var(--border-d); flex-shrink: 0; }
.nk-context-bar__num    { font-size: 13px; font-weight: 700; color: var(--navy); }

.nk-context-bar__select {
  height: 28px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--border-d);
  border-radius: var(--r-md);
  background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--navy);
  outline: none; cursor: pointer;
  transition: border-color var(--t-fast);
}
.nk-context-bar__select:focus { border-color: var(--cyan); }

.nk-context-bar__status               { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.nk-context-bar__status--ok           { color: var(--success); }
.nk-context-bar__status--dirty        { color: var(--warning); }

.nk-context-bar__title { font-size: 13px; font-weight: 600; color: var(--navy); }
.nk-context-bar__sep   { color: var(--muted); margin: 0 6px; }
.nk-context-bar__sub   { color: var(--slate); font-weight: 400; font-size: 14px; }
.nk-context-bar__tabs  { display: flex; gap: 4px; margin-left: 16px; }

.nk-btn--outline.on {
  background: var(--surface);
  border-color: var(--border-d);
  color: var(--navy);
  font-weight: 600;
}

/* ============================================================
   LAYOUT ÉDITION DEVIS
   Structure trois zones : colonne principale, récapitulatif droit et éventuel
   drawer poussé dans le flux (`.nk-drawer--push`).
   ============================================================ */
.nk-devis-body  { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.nk-devis-cols  { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.nk-col-left {
  flex: 1; align-self: stretch;
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
  padding: 10px 12px; gap: 9px;
}
.nk-col-left > * { flex-shrink: 0; }

.nk-col-right {
  width: 275px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--white);
  overflow-y: auto; overflow-x: hidden;
}

.nk-drawer--push {
  position: relative;
  width: 0;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: 0 solid var(--border);
  background: var(--white);
  transform: none;
  transition: width .2s cubic-bezier(.4,0,.2,1), border-left-width .2s;
  z-index: 1;
}
.nk-drawer--push.open {
  width: 300px;
  border-left-width: 1px;
  overflow-y: auto;
}

/* ============================================================
   STATUT DEVIS
   Micro-composant dédié au changement d'état d'un devis.
   ============================================================ */
.nk-status { display: flex; align-items: center; gap: 8px; }
.nk-status__label { font-size: 11px; font-weight: 700; color: var(--slate); white-space: nowrap; }
.nk-status__select { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; font-family: var(--font); color: var(--navy); background: var(--white); outline: none; cursor: pointer; }
.nk-status__select:focus { border-color: var(--cyan); }

/* ============================================================
   SÉLECTEUR DE SITE
   Tuiles de sélection de site utilisées au démarrage d'un devis ou d'un flux
   nécessitant un contexte boutique explicite.
   ============================================================ */
.nk-site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.nk-site-pick { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); background: var(--white); }
.nk-site-pick:hover { border-color: var(--navy); background: var(--surface); }
.nk-site-pick.selected { border-color: var(--navy); background: var(--cyan-l); }
.nk-site-pick__code { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-sm); align-self: flex-start; margin-bottom: 2px; }
.nk-site-pick__name { font-size: 13px; font-weight: 600; color: var(--navy); }
.nk-site-pick__url { font-size: 11px; color: var(--muted); }

/* ============================================================
   SPINNER
   Loader simple réutilisable dans les zones d'attente courtes.
   ============================================================ */
.nk-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: nk-spin .75s linear infinite;
}
.nk-spinner--inline {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: nk-spin .75s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ============================================================
   RESPONSIVE
   Deux paliers :
   - 1080px : on compresse surtout la colonne droite.
   - 720px  : on bascule les mises en page à colonnes en pile verticale.
   ============================================================ */
@media (max-width: 1080px) {
  .nk-kpis { flex-wrap: wrap; }
  .nk-col-right { width: 240px; }
}

@media (max-width: 720px) {
  .nk-devis-cols  { flex-direction: column; }
  .nk-col-right   { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .nk-drawer      { width: 100%; }
  .nk-context-bar { padding: 0 14px; gap: 6px; }
  .nk-list__content { padding: 10px 14px; }
}

/* ============================================================
   HUB — composants spécifiques
   À migrer progressivement vers les classes nk-* ci-dessus
   Cette zone regroupe encore plusieurs familles historiques :
   - shell global du Hub (topbar, sidebar, workspace)
   - tuiles de home et listes admin
   - drawers/modales maison antérieures au design system `nk-*`
   - composants clients/hub encore en compatibilité
   ============================================================ */

/* Shell principal du Hub : topbar fixe, logo, horloge et pilule utilisateur. */
.topbar{height:var(--top);background:var(--nv);display:flex;align-items:center;padding:0 18px 0 0;flex-shrink:0;z-index:var(--z-topbar);gap:0}
.menu-ico{display:flex;flex-direction:column;justify-content:space-between;width:18px;height:14px;flex-shrink:0}
.brand-label{font-family:var(--font);font-weight:900;font-size:14px;color:#fff;white-space:nowrap;letter-spacing:.5px;transition:opacity .15s,max-width .22s;max-width:120px;overflow:hidden}
body.sb-off .brand-label{max-width:0;opacity:0}
.tb-logo{display:flex;align-items:center;gap:11px;height:100%;width:var(--sb);padding:0 16px;cursor:pointer;flex-shrink:0;transition:width .22s,background .15s;text-decoration:none;background:#091c35;overflow:hidden}
.tb-logo:hover{background:rgba(255,255,255,.06)}
.tb-svg{height:22px;width:auto;display:block}
.tb-sep{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 14px;flex-shrink:0}
.tb-section{font-size:12px;font-weight:600;color:rgba(255,255,255,.65);padding-left:18px;white-space:nowrap}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.clk{text-align:right;cursor:default}
.clk-h{font-family:var(--font);font-size:14px;font-weight:900;color:#fff;line-height:1}
.clk-d{font-size:10px;color:rgba(255,255,255,.5);margin-top:1px}
.tb-divider{width:1px;height:20px;background:rgba(255,255,255,.15)}
.upill{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border:1px solid rgba(255,255,255,.2);border-radius:30px;cursor:pointer;background:rgba(255,255,255,.08);transition:all var(--t-fast)}
.upill:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.nk-avatar{width:28px;height:28px;border-radius:50%;background:var(--avatar-bg,var(--cyan-l));color:var(--avatar-color,var(--cyan-d));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.uav{width:26px;height:26px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.un{font-size:12px;font-weight:600;color:rgba(255,255,255,.9)}
.logout-btn{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;padding:5px 8px;border-radius:6px;transition:all var(--t-fast);line-height:1}
.logout-btn:hover{color:#fff;background:rgba(255,255,255,.1)}

/* Structure générale du workspace : sidebar gauche + contenu principal. */
.ws{display:flex;flex:1;overflow:hidden;min-height:0}
.sb{width:var(--sb);background:#1e2d3d;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden;transition:width .22s}
body.sb-off .sb{width:var(--sb-sm)}
body.sb-off .tb-logo{width:var(--sb-sm)}
.sb-sec{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}.sb-sec:last-child{border-bottom:none}
.sb-lbl{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.28);padding:5px 13px 3px;white-space:nowrap;transition:opacity var(--t-fast);overflow:hidden}
body.sb-off .sb-lbl{opacity:0}
.si{display:flex;align-items:center;height:38px;cursor:pointer;border-left:3px solid transparent;transition:all var(--t-fast);white-space:nowrap;overflow:hidden;position:relative;text-decoration:none}
.si:hover{background:rgba(255,255,255,.06)}
.si.active{border-left-color:var(--dc,var(--cyan));background:rgba(14,165,176,.15);border:0.5px solid rgba(14,165,176,.25);border-left:3px solid var(--dc,var(--cyan))}
.si-strip{width:3px;height:20px;border-radius:2px;background:var(--dc,var(--border-d));flex-shrink:0;opacity:.3;margin:0 11px;transition:all var(--t-fast)}
.si.active .si-strip{opacity:1}
.si-t{flex:1;overflow:hidden;padding-right:10px;transition:opacity .15s,max-width .22s;max-width:200px}
.si-n{font-size:12px;font-weight:500;color:rgba(255,255,255,.7);line-height:1.2}.si.active .si-n{color:#fff;font-weight:600}
.si-s{font-size:10px;color:rgba(255,255,255,.35)}
.si-ico{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:var(--dc,var(--muted));transition:all var(--t-fast);position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;font-family:var(--font)}
body.sb-off .si-strip{opacity:0;width:0;margin:0}
body.sb-off .si-t{max-width:0;opacity:0}
body.sb-off .si-ico{opacity:1;pointer-events:auto}
body.sb-off .si{justify-content:center;padding:0;border-left:none}
body.sb-off .si.active{background:color-mix(in srgb,var(--dc,var(--cyan)) 12%,white)}
body.sb-off .si.active .si-ico{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--dc,var(--cyan))}
body.sb-off .si::after{content:attr(data-tip);position:absolute;left:calc(var(--sb-sm) + 8px);top:50%;transform:translateY(-50%);background:var(--navy);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t-fast);z-index:999}
body.sb-off .si:hover::after{opacity:1}
.sb-bottom{margin-top:auto;border-top:1px solid var(--border)}
.main{flex:1;overflow:hidden;min-height:0;display:flex;flex-direction:column}
#nk-module,#hub-views{background:#f5f5ed}
.view{display:none;padding:24px 28px 52px;animation:fup .18s ease}
.view.active{display:block}
@keyframes fup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* Home Hub : titres de service et tuiles de microservices / liens externes. */
.ph{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ph-name{font-family:var(--font);font-size:20px;font-weight:900;color:var(--navy)}
.ph-sub{font-size:12px;color:var(--muted);margin-top:3px}
.svc-block{margin-bottom:22px}
.blk-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.blk-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);white-space:nowrap}
.blk-line{flex:1;height:1px;background:var(--border)}
.blk-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.bb-ms{background:var(--cyan-l);color:var(--cyan)}.bb-ext{background:var(--bg);color:var(--muted);border:1px solid var(--border)}.bb-int{background:var(--orange-l);color:var(--orange)}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.ms-tile{grid-column:span 2;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;align-items:center;box-shadow:var(--shadow-sm);transition:all .16s;overflow:hidden}
.ms-tile-link{cursor:pointer}
.ms-tile-inactive{cursor:default}
.ms-tile:hover{border-color:var(--tc,var(--cyan));box-shadow:0 4px 14px rgba(15,39,68,.1),0 0 0 1.5px var(--tc,var(--cyan))}
.ms-bar{width:3px;align-self:stretch;background:var(--tc,var(--cyan));flex-shrink:0}
.ms-ico{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:10px 10px 10px 12px}
.ms-body{flex:1;min-width:0;padding:10px 12px 10px 0}
.ms-name{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-desc{font-size:10px;color:var(--muted);margin-top:2px}
.link-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;display:block;text-decoration:none;transition:all .16s;position:relative}
.link-tile:hover{border-color:var(--tc,var(--cyan));background:#fff;box-shadow:var(--shadow-md)}
.lt-name{font-size:12px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px}
.lt-host{font-size:10px;color:var(--muted);margin-top:2px}
.lt-note{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:4px;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff}
.nk-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:var(--bg)}

/* Outils de listes admin legacy : toolbar, recherche, tableau simplifie. */
.tbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tbar-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.sbox{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 10px;transition:border-color var(--t-fast);position:relative}
.sbox:focus-within{border-color:var(--cyan);box-shadow:var(--focus-ring)}
.sbox input{border:none;background:none;outline:none;font-size:12px;color:var(--navy);font-family:var(--font);width:180px}
.sbox input::placeholder{color:var(--muted)}
.sbox-ico{font-size:11px;color:var(--muted)}
.sbox-clear{font-size:12px;color:var(--muted);cursor:pointer;display:none;border:none;background:none;padding:0 2px;line-height:1}
.sbox-clear:hover{color:var(--navy)}
.tbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.thd{padding:9px 16px;background:#f0f4f8;border-bottom:1px solid var(--border-d);font-size:11px;font-weight:600;color:var(--slate);display:grid;gap:12px;align-items:center;cursor:pointer;user-select:none}
.trow{display:grid;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);transition:background var(--t-fast)}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--surface)}
.trow.inactive{opacity:.5}
.cell-name{font-size:13px;font-weight:600;color:var(--navy)}
.cell-sub{font-size:10px;color:var(--muted);margin-top:2px}
.cell-email{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbadge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-block}
.rbadge.admin{background:#fef9c3;color:#854d0e}.rbadge.user{background:var(--cyan-l);color:var(--cyan)}
.stk-live{background:#dcfce7;color:#15803d;font-size:9px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.stk-beta{background:#fef9c3;color:#854d0e;font-size:9px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.stk-soon{background:var(--surface);color:var(--muted);font-size:9px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.pole-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.act-btns{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.act-btn{width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);color:var(--slate);flex-shrink:0;line-height:1}
.act-btn:hover{border-color:var(--border-d);background:var(--bg)}
.act-btn.edit:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-l)}
.act-btn.del:hover{border-color:var(--danger);background:var(--danger-l);color:var(--danger)}
.sp-on{background:#dcfce7;color:#15803d;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.sp-arc{background:#fef9c3;color:#854d0e;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}

/* Primitives legacy de boutons et modales encore utilisees par certains modules. */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-md);font-size:12px;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:all .16s;font-family:var(--font)}
.btn-g{background:#fff;border:1px solid var(--border);color:var(--navy)}.btn-g:hover{border-color:var(--border-d);background:var(--bg)}
.btn-cy{background:var(--cyan);color:#fff}.btn-cy:hover{background:var(--cyan-h)}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-del{background:var(--danger);color:#fff}.btn-del:hover{background:#b91c1c}
.mov{display:none;position:fixed;inset:0;z-index:var(--z-modal);background:rgba(15,39,68,.28);backdrop-filter:blur(3px);align-items:center;justify-content:center}
.mov.open{display:flex}
.modal{background:#fff;border:1px solid var(--border);border-radius:14px;width:480px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg);animation:mIn .17s ease}
.modal.sm{width:420px}.modal.xs{width:380px}
@keyframes mIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1)}}
.mhd{padding:15px 18px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mhd-title{font-family:var(--font);font-size:14px;font-weight:900;color:var(--navy)}
.mcl{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .12s}
.mcl:hover{background:var(--bg)}
.mbody{padding:18px;display:flex;flex-direction:column;gap:12px}
.mfoot{padding:11px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

/* ── hub-index : modal note ── */
.nk-mn-url{margin-bottom:10px;font-size:12px}
.nk-mn-body{white-space:pre-wrap;font-size:13px;line-height:1.6;min-height:60px;color:var(--text)}
.nk-mn-footer{display:flex;justify-content:flex-end;margin-top:12px}
.nk-mn-link{color:var(--cy)}
.nk-mn-type{color:var(--muted)}

/* Helpers de formulaires courts utilises dans les drawers/modales legacy. */
.fr{display:flex;gap:10px}.fg{display:flex;flex-direction:column;gap:5px;flex:1}
.fl{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.fi,.fs,.fta{padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--navy);font-size:12px;font-family:var(--font);outline:none;width:100%;transition:all var(--t-fast)}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--cyan);box-shadow:var(--focus-ring);background:#fff}
.fta{resize:vertical}
.rcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rcard{border:1.5px solid var(--border);border-radius:var(--r-lg);padding:11px 13px;cursor:pointer;transition:all var(--t-fast);background:var(--bg)}
.rcard:hover{border-color:var(--border-d);background:#fff}.rcard.on{border-color:var(--cyan);background:var(--cyan-l)}
.rcard-title{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:3px}
.rcard-desc{font-size:10px;color:var(--muted)}

/* Selection de services / poles dans le drawer utilisateur. */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.sc{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);background:var(--bg)}
.sc:hover{border-color:var(--border-d);background:#fff}.sc.on{border-color:var(--cyan);background:var(--cyan-l)}
.sc input{display:none}.sc-name{font-size:11px;font-weight:600;color:var(--navy)}
.sc-ck{margin-left:auto;font-size:10px;color:var(--cyan);opacity:0}.sc.on .sc-ck{opacity:1}
/* ── note interne (drawer utilisateur) ── */
.note-section{margin-top:12px}
.note-section-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.note-section-title{font-size:12px;font-weight:600;color:var(--navy)}
.note-section-badge{font-size:10px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:1px 6px}
.note-section-body{display:flex;flex-direction:column}

/* Choix de couleur/type/statut pour certaines entites Hub. */
.col-row{display:flex;gap:7px;flex-wrap:wrap}
.co{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:all .12s}
.co:hover,.co.on{transform:scale(1.18);border-color:var(--navy)}
.type-row{display:flex;gap:6px}
.topt{flex:1;padding:7px 6px;border:1.5px solid var(--border);border-radius:var(--r-md);text-align:center;cursor:pointer;font-size:11px;font-weight:600;transition:all var(--t-fast);background:var(--bg);color:var(--muted)}
.topt.on{border-color:var(--cyan);background:var(--cyan-l);color:var(--cyan)}
.sopt{flex:1;padding:6px 8px;border:1.5px solid var(--border);border-radius:var(--r-md);text-align:center;cursor:pointer;font-size:11px;font-weight:700;transition:all var(--t-fast);background:var(--bg)}
.sopt.on.live{border-color:var(--success);background:var(--success-l);color:var(--success)}
.sopt.on.beta{border-color:#854d0e;background:#fef9c3;color:#854d0e}
.sopt.on.soon{border-color:var(--muted);background:var(--surface);color:var(--muted)}

/* Drawer utilisateur legacy (`ud-*`) : edition d'utilisateurs admin. */
.ud{position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:-4px 0 20px rgba(15,39,68,.1);z-index:var(--z-drawer);display:flex;flex-direction:column;transition:right .22s cubic-bezier(.25,.8,.25,1)}
.ud.open{right:0}
.ud-hd{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.ud-av{width:36px;height:36px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.ud-name{font-family:var(--font);font-size:13px;color:var(--navy);font-weight:900}
.ud-sub{font-size:10px;color:var(--muted)}
.ud-close{margin-left:auto;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.ud-close:hover{background:var(--bg)}
.ud-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.ud-field{display:flex;flex-direction:column;gap:4px}
.ud-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.ud-inp{padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);font-size:12px;font-family:var(--font);background:var(--bg);color:var(--navy);outline:none;transition:all var(--t-fast);width:100%}
.ud-inp:focus{border-color:var(--cyan);background:#fff;box-shadow:var(--focus-ring)}
.ud-hint{font-size:10px;color:var(--muted);font-style:italic;line-height:1.4;margin-top:2px}
.ud-hint--strong{font-size:12px;color:var(--navy);font-style:normal;font-weight:500;margin-top:4px}
.ud-sep{height:1px;background:var(--border)}
.ud-foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.ud-foot-row{display:flex;gap:8px;justify-content:flex-end}
.btn-logout{width:100%;padding:8px;border-radius:var(--r-md);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--danger-b);background:var(--danger-l);color:var(--danger);font-family:var(--font);text-align:center;text-decoration:none;display:block}
.btn-logout:hover{background:#fee2e2}
.sb-admin-toggle{display:flex;align-items:center;padding:5px 13px;cursor:pointer;gap:6px;transition:background var(--t-fast)}
.sb-admin-toggle:hover{background:var(--bg)}
.sb-admin-arrow{font-size:14px;font-weight:800;color:var(--orange);flex-shrink:0;transition:transform .2s;line-height:1}
.sb-admin-arrow.open{transform:rotate(45deg)}
body.sb-off .sb-admin-toggle .sb-lbl{opacity:0}
body.sb-off .sb-admin-toggle .sb-admin-arrow{display:none}

/* ── CLIENT PAGE — classes spécifiques ────────────────────────
   Fiche client Hub : grille 2 colonnes, cartes métiers, adresses et actions.
   On reste ici car ces classes sont encore très liées au markup historique
   de `nk-client-page.js`.
*/
.nk-cp-grid         { display: grid; grid-template-columns: 1fr 260px; flex: 1; min-height: 0; overflow: hidden; }
.nk-cp-left         { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nk-cp-right        { overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 0; }
.nk-cp-cname        { font-size: 13px; font-weight: 700; color: var(--navy); text-align: center; }
.nk-cp-cemail       { font-size: 10px; color: var(--muted); text-align: center; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.nk-cp-sec          { background: var(--white); border: 0.5px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 8px; }
.nk-cp-sec--center  { text-align: center; }
.nk-cp-sec-hd       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nk-cp-sec-title    { font-size: 12px; font-weight: 500; color: var(--navy); border-left: 2px solid var(--cyan); padding-left: 6px; }
.nk-cp-sec-title::before { display: none; }
.nk-cp-sites        { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--border); }
.nk-cp-note         { font-size: 10px; color: var(--slate); font-style: italic; background: #fffbf0; border-radius: var(--r-md); padding: 6px 8px; border: 0.5px solid #e8e0c0; line-height: 1.5; }
.nk-cp-addr         { font-size: 12px; color: #374151; line-height: 1.6; background: var(--surface); border-radius: var(--r-md); padding: 9px; border: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.nk-cp-addr-body    { font-size: 12px; line-height: 1.6; }
.nk-cp-addr-actions { display: flex; gap: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.nk-cp-addr-label   { font-size: 11px; font-weight: 500; color: var(--slate); margin-bottom: 4px; }
.nk-cp-addr--add    { border-style: dashed; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; font-weight: 500; min-height: 80px; }
.nk-cp-addr--add:hover { background: var(--white); color: var(--cyan); border-color: var(--cyan); }

/* Carte adresse radio (sélecteur dans devis) */
/* Variante compacte d'adresse utilisable comme carte selectionnable. */
.nk-addr-card           { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; font-size: 11px; line-height: 1.5; color: var(--navy); transition: border-color var(--t-fast); }
.nk-addr-card:hover     { border-color: var(--border-d); }
.nk-addr-card.selected  { border-color: var(--cyan); background: var(--cyan-l); }
.nk-addr-card--add      { border-style: dashed; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 500; min-height: 50px; }
.nk-addr-card--add:hover { color: var(--cyan); border-color: var(--cyan); }

/* Bandeau de la modale d'adresse : type + aide contextuelle. */
.nk-am-type-bar     { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; }
.nk-am-type-radios  { display: flex; gap: 16px; }
.nk-am-type-hint    { font-size: 11px; color: var(--muted); font-style: italic; margin: -8px 0 12px; }

/* Poignee de redimensionnement pour sidebars pilotées en JS.
   - `align-self: stretch` : indispensable pour que la poignée prenne toute
     la hauteur de la cellule grid, même si le parent a `align-items: start`.
     Sans ça, la poignée n'a pas de hauteur intrinsèque et se rend à 0px.
   - Au repos : trait fin gris-bleu, juste assez visible pour signaler que la
     zone est interactive sans dominer le layout.
   - Au hover : trait + fond cyan pour donner un feedback fort que la zone
     est draggable. */
.nk-resize-handle       { width: 6px; cursor: col-resize; background: transparent; flex-shrink: 0; align-self: stretch; min-height: 100%; border-left: 1px solid var(--border-d); transition: background var(--t-fast), border-color var(--t-fast); }
.nk-resize-handle:hover { background: var(--cyan-l); border-color: var(--cyan); }

/* Barre de module partagée sur quelques écrans hors shell principal. */
.nk-module-bar      { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.nmb-btn            { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-md); border: none; background: var(--border); color: var(--navy); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.nmb-btn:hover      { background: var(--border-d); }
.nmb-sep            { width: 1px; height: 18px; background: var(--border-d); flex-shrink: 0; }
.nmb-num            { font-size: 13px; font-weight: 700; color: var(--navy); }

/* Couche de compatibilité.
   Elle évite de retoucher immédiatement les templates/JS qui utilisent encore
   les anciennes classes de boutons, badges ou helpers inline.
*/
.btn-add,
.btn-save,
.btn-cancel,
.btn-delete-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-add:hover,
.btn-save:hover,
.btn-cancel:hover,
.btn-delete-confirm:hover { text-decoration: none; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-add,
.btn-save { background: var(--orange); color: var(--white); }
.btn-add:hover,
.btn-save:hover { background: var(--orange-h); }
.btn-cancel {
  background: var(--white);
  color: var(--slate);
  border-color: var(--border);
}
.btn-cancel:hover {
  border-color: var(--border-d);
  color: var(--navy);
  background: var(--bg);
}
.btn-delete-confirm { background: var(--danger); color: var(--white); }
.btn-delete-confirm:hover { background: #b91c1c; }

/* Statuts compacts normalisés pour devis, reprises et wallet. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-badge.sb-live   { color: var(--success); background: var(--success-l); border-color: var(--success-b); }
.status-badge.sb-encours,
.status-badge.sb-relire { color: var(--cyan-d); background: var(--cyan-l); border-color: var(--cyan); }
.status-badge.sb-refuse { color: var(--danger); background: var(--danger-l); border-color: var(--danger-b); }
.status-badge--xs { padding: 1px 7px; font-size: 9px; }

.site-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.site-badge.site-fs  { background: #fce8e0; color: #b33a0f; }
.site-badge.site-oma { background: #deeaf5; color: #002c50; }
.site-badge.site-ng  { background: #d8f2f8; color: #005f77; }
.site-badge.site-src { background: #e6f5f4; color: #1e6b65; }
.site-badge--xs { padding: 1px 6px; font-size: 9px; }
.site-badge--sm { padding: 3px 9px; font-size: 11px; }
.site-badge--muted { background: var(--surface); color: var(--border-d); }
.site-badge--clickable { cursor: pointer; }

/* Utilitaires visuels tres simples pour etats vides, alignements et micro-helpers. */
.nk-list-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.nk-cell-title { font-size: 12px; font-weight: 600; color: var(--navy); }
.nk-cell-muted { font-size: 11px; color: var(--slate); }
.nk-cell-date { font-size: 11px; color: var(--slate); white-space: nowrap; }
.mu { color: var(--muted); }

.nk-grow { flex: 1; min-width: 0; }
.nk-module-host { flex: 1; overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.nk-hidden { display: none !important; }
.nk-inline-row { display: flex; align-items: center; gap: 8px; }
.nk-inline-row--top { align-items: flex-start; }
.nk-inline-row--wrap { flex-wrap: wrap; }
.nk-inline-row--between { justify-content: space-between; }
.nk-inline-row--end { justify-content: flex-end; }
.nk-stack-sm { display: flex; flex-direction: column; gap: 5px; }
.nk-search-clear {
  display: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}
.nk-search-clear.is-visible { display: block; }
.nk-search-clear:hover { color: var(--navy); }
.nk-count-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--cyan-l);
  color: var(--cyan);
  font-size: 9px;
  font-weight: 700;
}
.nk-text-link { color: var(--cyan); text-decoration: none; font-size: 12px; }
.nk-text-link:hover { text-decoration: underline; }
.nk-text-link--sm { font-size: 10px; }
.nk-textarea-vertical { resize: vertical; }
.nk-input--disabled { opacity: .6; cursor: not-allowed; }
.nk-checkbox-accent { width: 15px; height: 15px; cursor: pointer; accent-color: var(--cyan); }
.nk-form-row--top { align-items: flex-start; gap: 14px; }
.nk-form-error.is-visible { display: block; }
.nk-modal--danger { border-left: 4px solid var(--danger); }
.nk-modal__overlay--high { z-index: 1001; }
.nk-modal__overlay--higher { z-index: 1002; }
.nk-modal__overlay--highest { z-index: 1003; }
.nk-warning-copy {
  padding: 8px 10px;
  border: 1px solid var(--danger-b);
  border-radius: 6px;
  background: var(--danger-l);
  color: var(--danger);
  font-size: 11px;
  line-height: 1.5;
}
.nk-list__state--sm { padding: 40px 20px; font-size: 13px; }
.nk-empty-inline {
  padding: 8px 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.nk-host-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.nk-dash-muted { color: var(--border-d); }
.nk-section-pad-bottom { padding-bottom: 24px; }
.nk-sort-head { cursor: pointer; }
.nk-sort-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nk-sort-arrow { color: var(--cyan); }
.nk-sort-arrow--muted { opacity: .25; }
.nk-td--sub-strong { font-weight: 600; }
.nk-pole-list { display: flex; flex-wrap: wrap; gap: 2px; }
.nk-copy-note { margin-bottom: 10px; }
.nk-helper-title {
  margin-bottom: 6px;
  color: var(--slate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nk-sub-handle { color: var(--muted); font-size: 11px; cursor: grab; }

/* Bloc client partage (`NkClientBlock`) : recherche, resume client, liens BO. */
.nk-cb-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.nk-cb-panel { padding: 10px 12px; }
.nk-cb-heading {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.nk-cb-input-row { display: flex; align-items: center; gap: 6px; position: relative; }
.nk-cb-input { flex: 1; padding-right: 24px; font-size: 11px; }
.nk-cb-clear {
  position: absolute;
  right: 46px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.nk-cb-clear:hover { color: var(--navy); }
.nk-cb-msg { display: none; margin-top: 4px; font-size: 11px; }
.nk-cb-msg.is-visible { display: block; }
.nk-cb-msg--muted { color: var(--slate); }
.nk-cb-msg--danger { color: var(--danger); }
.nk-cb-create {
  margin-top: 4px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--cyan);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.nk-cb-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.nk-cb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #deeaf5;
  color: #002c50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.nk-cb-name { font-size: 12px; font-weight: 600; color: var(--navy); }
.nk-cb-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--slate);
}
.nk-cb-actions { display: flex; align-items: center; gap: 4px; }
.nk-cb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 10px 6px;
  background: #e2f4e8;
  border-top: 1px solid #a7f3d0;
}
.nk-icon-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.nk-icon-btn--info { background: #deeaf5; border: 1px solid #b8d4e8; color: #002c50; }
.nk-icon-btn--unlink { background: #f1f5f9; border: 1px solid #d0d5dd; color: var(--muted); }
.nk-icon-btn--unlink:hover { background: var(--danger-l); border-color: #fca5a5; color: var(--danger); }
.nk-cb-mono-chip {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--cyan-l);
  color: var(--cyan);
  font-family: monospace;
}
.nk-cb-bo-modal { z-index: 2000; }
.nk-cb-unlink-modal { z-index: 1500; }
.nk-cb-bo-dialog { width: 340px; max-width: 96vw; }
.nk-cb-bo-head { display: flex; align-items: flex-start; gap: 6px; }
.nk-cb-bo-meta { margin-left: 6px; }
.nk-cb-bo-site { font-size: 12px; font-weight: 700; color: var(--navy); }
.nk-cb-bo-id { font-size: 10px; color: var(--muted); }
.nk-cb-bo-list { display: flex; flex-direction: column; gap: 5px; }
.nk-cb-bo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eef0f3;
  border-radius: 7px;
  background: var(--white);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nk-cb-bo-link:hover { background: #f0f9fa; border-color: var(--cyan); }
.nk-cb-bo-ico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nk-cb-bo-lbl { font-size: 12px; font-weight: 700; color: var(--navy); }
.nk-cb-bo-sub { margin-top: 1px; font-size: 10px; color: var(--muted); }
.nk-cb-bo-arr { margin-left: auto; font-size: 11px; color: var(--muted); }
.nk-cb-unlink-copy { font-size: 12px; color: var(--slate); }
.nk-avatar--client { --avatar-bg: #deeaf5; --avatar-color: #002c50; }

/* Raffinements visuels specifiques a la fiche client. */
.nk-cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nk-cp-kpi-label { font-size: 11px; }
.nk-cp-kpi-value { font-size: 20px; font-weight: 500; }
.nk-card-head--between { justify-content: space-between; }
.nk-cp-note-body { font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.nk-cp-note-empty { font-size: 12px; font-style: italic; }
.nk-cp-card-head {
  background: var(--cp-card-bg, var(--surface));
  border-bottom: 1px solid var(--cp-card-border, var(--border));
}
.nk-cp-card-head-main { display: flex; align-items: center; gap: 8px; }
.nk-cp-card-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--cp-card-accent-bg, var(--surface));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nk-cp-card-title { font-size: 12px; font-weight: 500; color: var(--navy); }
.nk-cp-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.nk-cp-count-badge--cyan { background: rgba(14,165,176,.13); color: var(--cyan); }
.nk-cp-count-badge--blue { background: rgba(26,74,138,.13); color: #1a4a8a; }
.nk-cp-balance { margin-left: 4px; font-size: 11px; font-weight: 700; }
.nk-cp-balance--good { color: var(--success); }
.nk-cp-balance--bad { color: var(--danger); }
.nk-cp-arrow { color: var(--cyan); font-size: 11px; }
.nk-cp-empty { padding: 12px; font-size: 13px; }
.nk-modal--md { max-width: 420px; }
.nk-cp-modal { width: 440px; }
.nk-cp-modal--sm { width: 400px; }
.nk-drawer__val--accent { color: var(--cyan); }
.nk-btn--ghost-danger { color: var(--danger); }
.nk-btn--ghost-danger:hover { background: var(--danger-l); }

/* Etat vide Hub quand aucun pole n'est disponible pour l'utilisateur. */
.nk-no-pole {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0f172a;
  color: #e2e8f0;
}
.nk-no-pole__card {
  width: 100%;
  max-width: 560px;
  padding: 28px 32px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  background: rgba(15,23,42,.92);
  box-shadow: 0 18px 48px rgba(15,23,42,.35);
}
.nk-no-pole__eyebrow {
  margin: 0 0 10px;
  color: #94a3b8;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nk-no-pole__title { margin: 0 0 12px; font-size: 28px; line-height: 1.15; }
.nk-no-pole__text { margin: 0 0 18px; color: #cbd5e1; line-height: 1.6; }
.nk-no-pole__hint { margin: 0 0 24px; color: #94a3b8; line-height: 1.6; }
.nk-no-pole__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nk-no-pole__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.nk-no-pole__btn--primary { background: #f8fafc; color: #0f172a; }
.nk-no-pole__btn--secondary { border: 1px solid rgba(148,163,184,.35); color: #e2e8f0; }
.nk-menu-ico__line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
  transition: all .22s;
}
.nk-topbar-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: none;
  color: rgba(255,255,255,.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .14s;
}
.nk-topbar-btn:hover { background: rgba(255,255,255,.1); }
.nk-link-reset { color: inherit; text-decoration: none; }
.nk-breadcrumb { display: flex; align-items: center; gap: 4px; }
.nk-hub-main { display: flex; flex-direction: column; padding: 0; }
.nk-hub-scroll { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }
.ud-lbl-note {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted2);
}
.ud-row { display: flex; gap: 8px; }
.ud-field--grow { flex: 1; }
.sb-admin-label {
  flex: 1;
  color: var(--muted2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nk-mn-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============================================================
   ALERTES — boîtes contextuelles (info, danger, warning, success, ia)
   ============================================================ */
.nk-alert {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border-left: 4px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--navy);
}
.nk-alert--success { background: var(--success-l); border-left-color: var(--success); color: var(--success); }
.nk-alert--danger  { background: var(--danger-l);  border-left-color: var(--danger);  color: var(--danger); }
.nk-alert--warning { background: var(--warning-l); border-left-color: var(--warning); color: var(--warning); }
.nk-alert--ia      { background: var(--ia-l);      border-left-color: var(--ia);      color: var(--ia); }

/* ============================================================
   SWITCH — toggle binaire (on/off) avec track + thumb animé.
   Utilisation :
     <label class="nk-switch"><input type="checkbox">
       <span class="nk-switch__track"></span>
       <span class="nk-switch__label">Libellé dynamique</span>
     </label>
   Le JS coche/décoche l'input ; CSS gère l'apparence via :checked.
   ============================================================ */
.nk-switch {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--slate); cursor: pointer; user-select: none;
  position: relative;
}
.nk-switch input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nk-switch__track {
  width: 28px; height: 16px; border-radius: 999px;
  background: var(--border-d); position: relative;
  transition: background .15s ease; flex-shrink: 0;
}
.nk-switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: left .15s ease;
}
.nk-switch input:checked ~ .nk-switch__track { background: var(--cyan); }
.nk-switch input:checked ~ .nk-switch__track::after { left: 14px; }
.nk-switch__label { font-weight: 600; }

/* ============================================================
   SEGMENTED TOGGLE — bascule 2 boutons (icône + texte) en pill
   Utilisation :
     <div class="nk-seg">
       <button class="is-on">icon Libellé A</button>
       <button>icon Libellé B</button>
     </div>
   ============================================================ */
.nk-seg {
  display: inline-flex; background: #fff; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 2px; gap: 2px; white-space: nowrap;
  /* Évite que le drag HTML5 remonte au parent draggable=true (ex. dans un bloc
     composant) et réordonne le groupe sur simple clic. */
  -webkit-user-drag: none;
}
.nk-seg button { -webkit-user-drag: none; }
.nk-seg button {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600;
  border-radius: 4px; font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.nk-seg button.is-on { background: var(--cyan); color: #fff; }
.nk-seg button:not(.is-on):hover { color: var(--navy); background: #f3f5f8; }
.nk-seg svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ============================================================
   STOCK PILL — indicateur stock en pastille colorée compacte
   Valeurs : .nk-stock--ok (vert), --low (orange), --out (rouge)
   Alias visuel de nk-badge mais plus petit et dédié stock.
   ============================================================ */
.nk-stock {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap;
}
.nk-stock--ok  { background: var(--success-l); color: var(--success); }
.nk-stock--low { background: var(--warning-l); color: var(--warning); }
.nk-stock--out { background: var(--danger-l);  color: var(--danger);  }

/* ============================================================
   NCPACK — MODALE « Ajouter un composant au pack »
   Layout A2 : article + déclinaisons dépliables inline, sélection
   multiple, filtre marque, footer persistant. Utilisée par
   `NkNcpackShared.openProductPicker` (cf ncpack-shared.js).
   ============================================================ */
.nk-pp-modal { max-width: 720px; width: 92vw; display: flex; flex-direction: column; max-height: 86vh; }
.nk-pp-head  { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.nk-pp-search { display: flex; gap: 8px; margin-bottom: 10px; }
.nk-pp-search__input { flex: 1; margin-bottom: 0; }
.nk-pp-brand { height: 34px; min-width: 180px; max-width: 240px; }
.nk-pp-results {
  flex: 1; min-height: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white);
}
.nk-pp-empty {
  padding: 18px; text-align: center; color: var(--muted); font-size: 12px;
}
.nk-pp-empty--err { color: var(--danger); }

/* Ligne produit */
.nk-pp-prod {
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
}
.nk-pp-prod:last-child { border-bottom: 0; }
.nk-pp-prod--single {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px;
  align-items: center; padding: 10px 12px; cursor: pointer;
}
.nk-pp-prod--single:hover,
.nk-pp-prod--parent:hover > .nk-pp-prod__head { background: #f8fbfd; }
.nk-pp-prod.is-selected { background: #f5fbfe; }

.nk-pp-prod__head {
  display: grid; grid-template-columns: 20px 16px 1fr; gap: 8px;
  align-items: center; padding: 10px 12px; cursor: pointer;
}
.nk-pp-prod__meta { min-width: 0; }
.nk-pp-prod__name {
  font-size: 13px; font-weight: 600; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.nk-pp-prod__sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.nk-pp-prod__stock { min-width: 0; }
.nk-pp-hidden { color: var(--muted); flex-shrink: 0; }
.nk-pp-brand-tag {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  background: var(--surface); color: var(--slate); border: 1px solid var(--border);
}
.nk-pp-counter {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  background: var(--cyan-l); color: var(--cyan-d);
}

/* Checkbox custom (3 états) */
.nk-pp-cb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border-d); background: var(--white);
  cursor: pointer; padding: 0; color: #fff; transition: all .12s ease;
  flex-shrink: 0;
}
.nk-pp-cb:hover { border-color: var(--cyan); }
.nk-pp-cb.is-on,
.nk-pp-cb.is-indeterminate { background: var(--cyan); border-color: var(--cyan); }
.nk-pp-cb__dash {
  display: block; width: 9px; height: 2px; border-radius: 1px; background: #fff;
}

/* Chevron déploiement */
.nk-pp-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
}
.nk-pp-chev:hover { color: var(--navy); }

/* Volet déclinaisons */
.nk-pp-decl-panel {
  background: var(--surface); border-top: 1px dashed var(--border);
  padding: 4px 0 4px 28px;
}
.nk-pp-decl {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 10px;
  align-items: center; padding: 6px 12px; cursor: pointer;
  border-radius: 4px;
}
.nk-pp-decl:hover { background: var(--white); }
.nk-pp-decl.is-selected { background: #f0f8fc; }
.nk-pp-decl__label {
  font-size: 12px; color: var(--navy); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-pp-decl__ref {
  font-size: 10px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Footer persistant */
.nk-pp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-top: 1px solid var(--border);
  padding: 12px 0 0; margin-top: 12px;
}
.nk-pp-foot__info { font-size: 12px; color: var(--slate); font-weight: 500; }
.nk-pp-foot__actions { display: flex; gap: 8px; }

/* Skeleton de chargement — pendant le fetch de search_products.
   Lignes fantômes shimmer (pas de saut visuel). */
.nk-pp-skel-row {
  display: grid; grid-template-columns: 20px 16px 1fr auto;
  gap: 8px; align-items: center; padding: 12px;
  border-bottom: 1px solid var(--border);
}
.nk-pp-skel {
  display: inline-block; height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: nk-pp-shimmer 1.2s ease-in-out infinite;
}
.nk-pp-skel--cb   { width: 18px; height: 18px; border-radius: 4px; }
.nk-pp-skel--chev { width: 12px; height: 12px; }
.nk-pp-skel--pill { width: 60px; height: 16px; border-radius: 999px; }
.nk-pp-skel--text { height: 12px; }
@keyframes nk-pp-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Dernier palier mobile des écrans clients. */
@media (max-width: 720px) {
  .nk-cp-grid  { grid-template-columns: 1fr; }
  .nk-cp-right { border-left: none; border-top: 1px solid var(--border); }
}

/* ============================================================
   TREE PICKER — Modale de sélection dans une arborescence
   Composant : frontend/shared/nk-category-picker.js
   Contrat : conteneur .nk-tree-picker (overlay), panneau fixe, corps
   scrollable, classes .nk-tree__node pour chaque ligne.
   ============================================================ */
.nk-tree-picker { align-items: center; padding: 24px; }
.nk-tree-picker__panel {
  width: 640px; max-width: 100%;
  max-height: min(640px, calc(100vh - 48px));
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.nk-tree-picker__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nk-tree-picker__title {
  font-size: 14px; font-weight: 700; color: var(--navy);
}

/* Indicateur de chargement async des compteurs nb_products_recursive.
   Visible uniquement pendant que loadCounts est en cours (5-10 s typique).
   Le dot et le texte pulsent en décalé pour rendre l'animation lisible
   sans être agressive. `margin-right: auto` pousse le bouton close à droite. */
.nk-tree-picker__counts-loading {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--muted);
  margin-left: 12px; margin-right: auto;
  animation: nk-pulse-soft 1.4s ease-in-out infinite;
}
.nk-tree-picker__counts-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  animation: nk-pulse-dot 1.0s ease-in-out infinite;
}
@keyframes nk-pulse-soft { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes nk-pulse-dot  { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.45; } }
.nk-tree-picker__close,
.nk-tree-picker__refresh {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate); cursor: pointer;
  transition: all var(--t-fast);
}
.nk-tree-picker__close:hover  { border-color: var(--border-d); color: var(--navy); }
.nk-tree-picker__refresh      { margin-left: auto; }
.nk-tree-picker__refresh:hover{ border-color: var(--cyan);    color: var(--cyan-d); background: var(--cyan-l); }

.nk-tree-picker__toolbar {
  display: flex; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nk-tree-picker__search {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--slate);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nk-tree-picker__search:focus-within { border-color: var(--cyan); box-shadow: var(--focus-ring); background: var(--white); }
.nk-tree-picker__search-input {
  flex: 1; border: 0; background: transparent; outline: 0;
  padding: 8px 0; font: inherit; font-size: 13px; color: var(--navy);
}
.nk-tree-picker__ref {
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nk-tree-picker__ref:focus-within { border-color: var(--cyan); box-shadow: var(--focus-ring); background: var(--white); }
.nk-tree-picker__ref.is-invalid,
.nk-tree-picker__ref-input.is-invalid { border-color: var(--danger); }
.nk-tree-picker__ref-label {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate);
  padding: 0 8px; border-right: 1px solid var(--border);
  align-self: stretch; display: flex; align-items: center;
}
.nk-tree-picker__ref-input {
  width: 80px; border: 0; background: transparent; outline: 0;
  padding: 8px 4px; font: inherit; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy);
}

/* Barre d'options optionnelle (toggle « catégories cachées »). */
.nk-tree-picker__options {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.nk-tree-picker__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--slate);
  cursor: pointer; user-select: none;
}
.nk-tree-picker__toggle-input {
  width: 14px; height: 14px; accent-color: var(--cyan);
  cursor: pointer; margin: 0;
}
.nk-tree-picker__toggle:hover { color: var(--navy); }

.nk-tree-picker__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  min-height: 280px;
}

.nk-tree-picker__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.nk-tree-picker__summary {
  flex: 1;
  font-size: 12px; color: var(--navy);
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk-tree-picker__summary--empty { color: var(--muted); font-style: italic; }
.nk-tree-picker__summary-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  margin-left: 2px;
}
.nk-tree-picker__summary-crumb { color: var(--slate); font-size: 11px; }
.nk-tree-picker__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* États vides / erreur du corps. */
.nk-tree-picker__empty,
.nk-tree-picker__error {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 16px;
  color: var(--slate);
  font-size: 13px; text-align: center;
}
.nk-tree-picker__error { color: var(--danger); }
.nk-tree-picker__error-msg { color: var(--muted); font-size: 12px; }

/* ─── Lignes d'arbre (.nk-tree__node) ─── */
.nk-tree__node {
  display: grid;
  grid-template-columns: 20px 20px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 8px;
  font-size: 13px; color: var(--navy);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
  border-radius: 0;
}
.nk-tree__node:hover { background: var(--surface); }
.nk-tree__node--selected {
  background: var(--cyan-l);
  font-weight: 600;
}
.nk-tree__node--selected:hover { background: var(--cyan-l); }
.nk-tree__node:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

.nk-tree__chev {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--slate); cursor: pointer; padding: 0;
  border-radius: var(--r-sm);
}
.nk-tree__chev:hover:not(.nk-tree__chev--placeholder) { background: rgba(15,23,42,.06); color: var(--navy); }
.nk-tree__chev--placeholder { cursor: default; pointer-events: none; }
.nk-tree__chev svg { transition: transform var(--t-fast); }

.nk-tree__icon { flex-shrink: 0; }
.nk-tree__icon--folder { color: #ea580c; }
.nk-tree__icon--file   { color: var(--slate); }
.nk-tree__node--selected .nk-tree__icon--folder { color: var(--cyan-d); }

.nk-tree__label {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk-tree__mark { background: #fef3c7; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Catégorie cachée (active=0) : visuel discret pour ne pas confondre
   avec une catégorie normale à l'œil. */
.nk-tree__node--hidden .nk-tree__label,
.nk-tree__node--hidden .nk-tree__count { color: var(--muted); font-style: italic; }
.nk-tree__node--hidden .nk-tree__icon--folder,
.nk-tree__node--hidden .nk-tree__icon--file { opacity: .55; }
.nk-tree__badge-hidden {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px; font-weight: 600;
  color: var(--warning); background: var(--warning-l);
  border: 1px solid var(--warning-b);
  padding: 0 5px; border-radius: var(--r-sm);
  font-style: normal; letter-spacing: .02em;
  vertical-align: middle;
}

.nk-tree__count {
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
}
.nk-tree__count--empty { padding: 0; }

.nk-tree__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--slate);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}

/* ─── Skeleton de chargement ─── */
.nk-tree__skel-row {
  display: grid;
  grid-template-columns: 20px 20px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 14px 8px 8px;
}
.nk-tree__skel {
  display: inline-block; height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, #eef2f7 0%, #f7f9fc 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: nk-pp-shimmer 1.2s ease-in-out infinite;
}
.nk-tree__skel--chev { width: 12px; height: 12px; }
.nk-tree__skel--icon { width: 14px; height: 14px; border-radius: 3px; }
.nk-tree__skel--pill { width: 32px; height: 14px; border-radius: 999px; }

/* ════════════════════════════════════════════════════════════════
   Sidebar catalogue (NkCatalogSidebar)
   2 modes : expanded (240 px) / collapsed (56 px). Le mode `hidden`
   historique a été retiré pour éviter une sidebar invisible sans
   porte de sortie — la bascule reste portée par le toggle interne.
   Réutilise le skin du picker — nœuds rendus en .nk-tree__*.
   Spec : docs/audit-catalogue-refonte.md §5.2.
   ════════════════════════════════════════════════════════════════ */
.nk-cat-sidebar {
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  position: relative;
  height: 100%;
}
/* Mode déplié : la sidebar remplit pile sa cellule grid parente (la
   poignée drag pilotée par NocikaShared.initResizableSidebar pose la
   largeur côté grid via gridTemplateColumns, la sidebar suit en width:100%).
   Pas de min/max ici : la borne minLeft est appliquée côté handler de drag.
   Le mode collapsed garde une largeur fixe (pastilles 3 lettres). */
.nk-cat-sidebar--expanded  { width: 100%; }
.nk-cat-sidebar--collapsed { width: 56px; }

.nk-cat-sidebar__head {
  height: 40px;
  display: flex; align-items: center;
  padding: 0 6px 0 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.nk-cat-sidebar__title {
  flex: 1;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted);
  white-space: nowrap; overflow: hidden;
}

/* Site picker (header sidebar) — remplace .nk-cat-sidebar__title quand
   l'opt siteSelector est fournie. Trigger inline dans le header,
   dropdown attaché au body via .nk-cat-sidebar__site-menu. */
.nk-cat-sidebar__site-trigger {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  font-size: 12px; font-weight: 600;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--navy);
  overflow: hidden;
  text-align: left;
  font-family: inherit;
}
.nk-cat-sidebar__site-trigger:hover { border-color: var(--border-d); background: var(--surface); }
.nk-cat-sidebar__site-trigger.is-open { border-color: var(--cyan); background: var(--cyan-l); }
.nk-cat-sidebar__site-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.nk-cat-sidebar__site-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk-cat-sidebar__site-chev { color: var(--muted); flex-shrink: 0; }

/* Mode collapsed : trigger réduit à la pastille seule (cliquable). */
.nk-cat-sidebar--collapsed .nk-cat-sidebar__site-trigger {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  flex: 0 0 auto;
}
.nk-cat-sidebar--collapsed .nk-cat-sidebar__site-label,
.nk-cat-sidebar--collapsed .nk-cat-sidebar__site-chev { display: none; }
.nk-cat-sidebar--collapsed .nk-cat-sidebar__site-dot { width: 12px; height: 12px; }

/* Dropdown menu sites — attaché au <body> pour échapper à l'overflow. */
.nk-cat-sidebar__site-menu {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15,39,68,.18);
  min-width: 220px;
  z-index: 200;
  overflow: hidden;
  font-family: inherit;
}
.nk-cat-sidebar__site-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: 13px; color: var(--navy);
  cursor: pointer;
  background: var(--white);
  border: 0; width: 100%; text-align: left;
  font-family: inherit;
}
.nk-cat-sidebar__site-item:hover { background: var(--surface); }
.nk-cat-sidebar__site-item.is-active { background: var(--cyan-l); font-weight: 600; }
.nk-cat-sidebar__toggle {
  width: 26px; height: 26px;
  border: 0; background: transparent;
  color: var(--slate); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.nk-cat-sidebar__toggle:hover { background: rgba(15,23,42,.06); color: var(--navy); }
.nk-cat-sidebar__body {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 0;
}
.nk-cat-sidebar--collapsed .nk-cat-sidebar__title { display: none; }
.nk-cat-sidebar--collapsed .nk-cat-sidebar__head  { padding: 0 6px; justify-content: center; }

/* Mode collapsed : pastilles 3 lettres + badge compteur sous le label */
.nk-cat-sidebar__pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; cursor: pointer;
  font-size: 10px; font-weight: 700; color: var(--slate);
  text-transform: uppercase; letter-spacing: .5px;
  border-left: 3px solid transparent;
  transition: background var(--t-fast);
  user-select: none;
  text-align: center;
  line-height: 1.2;
}
.nk-cat-sidebar__pill:hover { background: var(--surface); color: var(--navy); }
.nk-cat-sidebar__pill--active {
  background: var(--cyan-l); color: var(--cyan-d);
  border-left-color: var(--cyan);
}
.nk-cat-sidebar__pill-badge {
  margin-top: 4px;
  font-size: 9px; font-weight: 700;
  min-width: 18px;
  padding: 1px 5px; border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nk-cat-sidebar__pill-badge--has {
  background: var(--warning-l); color: var(--warning);
}

/* Indicateur de scan dans le node tree (révision 2026-05-01).
   Visuel binaire sobre, sans fond/bordure :
     - `.nk-tree__defect-icon--direct` → triangle orange, défaut détecté
       directement sur cette catégorie.
     - `.nk-tree__defect-icon--ok` → check vert, catégorie auditée et propre.
   Variante `--inherited` (gris atténué) retirée : avec l'auto-expand
   post-scan, l'utilisateur voit le défaut directement sur les feuilles,
   pas besoin de signal sur les ancêtres. */
.nk-tree__defect-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.nk-tree__defect-icon--direct {
  color: var(--danger, #dc2626);
}
.nk-tree__defect-icon--ok {
  color: var(--success, #16a34a);
}
/* État « non audité » : `?` gris, dimensions identiques à un SVG 14px
   pour aligner verticalement avec ✓/✗. Signale explicitement « inconnu »
   plutôt qu'omettre le glyph (qui se lirait comme « propre »). */
.nk-tree__defect-icon--unknown {
  color: var(--muted);
  width: 14px;
  height: 14px;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
}

/* ─── Audit catalogue : table flat (refonte 2026-05-01) ─── */

/* Pastille type catégorie (folder/file) en première colonne. Disque clair
   encadrant l'icône, aligné verticalement sur le titre + sous-titre de la
   cellule catégorie. Le code couleur distingue les deux natures :
     - `--intermediate` → violet/indigo (catégorie container)
     - `--final` → vert (catégorie feuille où sont classés les produits) */
.nk-cat-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nk-cat-type-badge--intermediate {
  background: #ede9fe;
  color: #6366f1;
}
.nk-cat-type-badge--final {
  background: var(--success-l, #f0fdf4);
  color: var(--success, #16a34a);
}

/* Cellule catégorie : titre principal + sous-titre « Intermédiaire · niveau X/Y ».
   `nk-cat-row__name` n'apporte rien hors d'éviter un wrapping bizarre du
   badge `cachée`. `nk-cat-row__sub` reprend la couleur du badge type pour
   renforcer le code visuel. */
.nk-cat-row__name {
  display: inline;
  line-height: 1.3;
}
.nk-cat-row__sub {
  font-size: 11px;
  margin-top: 2px;
  font-weight: 500;
}
.nk-cat-row__sub--intermediate {
  color: #6366f1;
}
.nk-cat-row__sub--final {
  color: var(--success, #16a34a);
}
.nk-cat-row__sub-sep {
  margin: 0 4px;
  color: var(--muted);
  opacity: 0.6;
}

/* Barre de progression % dispo. Couleur déterminée par variante (success /
   warning / danger). Compactée 2026-05-02 pour gagner de la place
   horizontale dans la table audit catalogue (4 colonnes numériques + 2
   barres + défauts + liens = beaucoup). */
.nk-cat-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 70px;
}
.nk-cat-progress__bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  min-width: 40px;
  max-width: 70px;
}
.nk-cat-progress__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .25s ease;
}
.nk-cat-progress__label {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* Compactage scopé audit catalogue : la table peut dépasser le container
   horizontalement, on laisse `.nk-table-wrap { overflow:auto }` (défaut
   nocika.css) gérer le scrollbar. Sans ça, `width:100%` du `table.nk-table`
   tassait les colonnes et masquait visuellement les dernières.
   `min-width: max-content` force le respect de la largeur intrinsèque. */
.nk-audit-cat table.nk-table {
  min-width: max-content;
}
.nk-audit-cat table.nk-table th,
.nk-audit-cat table.nk-table td {
  white-space: nowrap;
}
/* Cellules numériques (Total/Stock/Rupture/Gam2) : padding réduit, elles
   n'affichent que 1-4 chiffres, le padding standard 14px était excessif. */
.nk-audit-cat table.nk-table td.nk-td--center,
.nk-audit-cat table.nk-table th[data-sort="produits_actifs"],
.nk-audit-cat table.nk-table th[data-sort="produits_en_stock"],
.nk-audit-cat table.nk-table th[data-sort="produits_rupture"],
.nk-audit-cat table.nk-table th[data-sort="produits_gam2"] {
  padding-left: 8px;
  padding-right: 8px;
}

/* Cellule indicateurs combinée (Dispo + Gam2 empilés). Chaque ligne porte
   son libellé en préfixe + sa barre de progression. Largeur fixe pour
   garder l'alignement vertical des barres entre lignes du tableau. */
.nk-cat-rates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}
.nk-cat-rates__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.nk-cat-rates__label {
  color: var(--muted);
  font-weight: 600;
  min-width: 38px;
  flex-shrink: 0;
}

/* Cellule défauts : grid à 2 colonnes max pour limiter à 2 chips par ligne.
   Les chips au-delà du 2e wrappent sur la ligne suivante (refonte 2026-05-02).
   On override `white-space:nowrap` (posé sur tous les td en mode audit-cat)
   pour autoriser le wrap intra-cellule. */
.nk-audit-cat table.nk-table td:has(.nk-cat-defects-grid) {
  white-space: normal;
}
.nk-cat-defects-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 3px 4px;
  justify-content: start;
  align-items: start;
}
.nk-cat-defect-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  /* Tronque proprement si un chip très long (URL en erreur (HTTP 404)) tombe
     sur une cellule étroite — sinon le grid déborde. */
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nk-cat-progress--success .nk-cat-progress__fill { background: var(--success, #16a34a); }
.nk-cat-progress--success .nk-cat-progress__label { color: var(--success, #16a34a); }
.nk-cat-progress--warning .nk-cat-progress__fill { background: var(--warning, #d97706); }
.nk-cat-progress--warning .nk-cat-progress__label { color: var(--warning, #d97706); }
.nk-cat-progress--danger  .nk-cat-progress__fill { background: var(--danger, #dc2626); }
.nk-cat-progress--danger  .nk-cat-progress__label { color: var(--danger, #dc2626); }

/* Pastille « catalogue scanné » sur les nœuds niveau-1 dont le sous-arbre
   est dans la portée d'un scan en cache. Indique à l'utilisateur que le
   clic ouvre le drill-down sans relancer de scan (UX 2026-05-01). */
.nk-cat-sidebar__scanned-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   Shell audit catalogue (NkAuditShell)
   Layout : sidebar gauche + zone main avec topbar + KPI + content.
   Display:grid pour permettre l'insertion de .nk-resize-handle entre
   les 2 colonnes (poignée Hub partagée — NocikaShared.initResizableSidebar).
   Spec : docs/audit-catalogue-refonte.md §5.3.
   ════════════════════════════════════════════════════════════════ */
.nk-audit-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  /* La row implicite `auto` prendrait la hauteur du contenu intrinsèque,
     ce qui fait sauter le scroll interne du body sidebar (`flex:1`) parce
     qu'il n'a plus de hauteur de référence. minmax(0, 1fr) force la row
     à occuper exactement la hauteur du conteneur, ce qui propage la
     contrainte au sidebar-host puis à la sidebar et son body scrollable. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.nk-audit-shell__main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
}
.nk-audit-shell__topbar {
  height: 48px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.nk-audit-shell__crumb {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-audit-shell__crumb b { color: var(--navy); font-weight: 600; }
.nk-audit-shell__tabs { display: flex; gap: 4px; }
.nk-audit-shell__tab {
  padding: 4px 12px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.nk-audit-shell__tab:hover { color: var(--navy); border-color: var(--border-d); }
.nk-audit-shell__tab--active {
  background: var(--cyan-l); color: var(--cyan-d);
  border-color: var(--cyan);
}
.nk-audit-shell__refresh {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 12px;
}

.nk-audit-shell__body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 16px;
}
.nk-audit-shell__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.nk-audit-shell__kpi {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.nk-audit-shell__kpi-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.nk-audit-shell__kpi-value {
  margin-top: 6px;
  font-size: 22px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.nk-audit-shell__kpi-sub { font-size: 11px; color: var(--slate); margin-top: 2px; }

.nk-audit-shell__alert {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--warning-l);
  border: 1px solid var(--warning-b);
  color: var(--warning);
  font-size: 12px;
}

/* Bandeau fraîcheur du scan affiché : visible quand techData vient du
   cache sessionStorage et a > 30 min. Invite à relancer pour avoir frais. */
.nk-audit-shell__freshness {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--warning-l);
  border: 1px solid var(--warning-b);
  color: var(--warning);
  font-size: 12px;
}
.nk-audit-shell__freshness span { flex: 1; }
.nk-audit-shell__freshness button { color: var(--warning); }
.nk-audit-shell__viewtoggle {
  display: inline-flex; gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.nk-audit-shell__viewtoggle button {
  padding: 6px 14px;
  font-size: 12px; font-weight: 500;
  border: 0; background: var(--white);
  color: var(--slate); cursor: pointer;
}
.nk-audit-shell__viewtoggle button.active {
  background: var(--cyan-l); color: var(--cyan-d);
  font-weight: 600;
}
.nk-audit-shell__viewtoggle button + button { border-left: 1px solid var(--border); }

.nk-audit-shell__content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 200px;
  padding: 16px;
}
.nk-audit-shell__placeholder {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 48px 24px;
}
.nk-audit-shell__placeholder svg { display: block; margin: 0 auto 12px; opacity: .35; }

/* Squelette mode Commercial / Complet (état « En construction » / wrapper). */
.nk-audit-types-stub {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 64px 24px;
}
.nk-audit-types-stub svg { display: block; margin: 0 auto 12px; opacity: .4; color: var(--cyan); }
.nk-audit-types-stub h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy); }

/* ══════ Tooltip global (NkTooltip) ══════
   Singleton dark, déclenché au hover par data-nk-tt-title. Cf.
   docs/UX.md § « Tooltips / info-bulles » et frontend/shared/nk-tooltip.js.
   La position est gérée en JS (top/left absolute), la flèche pointe
   vers l'ancre via --nk-tt-arrow-x (défini par place()). */
.nk-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 280px;
  padding: 10px 12px;
  background: #0f172a;
  color: #ffffff;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  pointer-events: auto;
}
.nk-tooltip__title {
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 4px;
}
.nk-tooltip__desc {
  color: #cbd5e1;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.nk-tooltip__rule {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #67e8f9; /* cyan-300 */
  word-break: break-word;
}
/* Flèche : triangle CSS pointant vers le bas (tooltip au-dessus de l'ancre).
   La position horizontale est pilotée par --nk-tt-arrow-x (set par JS). */
.nk-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: var(--nk-tt-arrow-x, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0f172a;
}
/* Variante « tooltip en dessous de l'ancre » (fallback faute de place
   au-dessus). La flèche se retrouve en haut, pointant vers le haut. */
.nk-tooltip--below::after {
  bottom: auto;
  top: -6px;
  border-top: 0;
  border-bottom: 6px solid #0f172a;
}

/* Petite icône-lien cyan (par ex. lien fiche produit PS dans NCPACK) :
   hover propre via :hover plutôt que via attributs JS `onmouseover` inline,
   pour rester compatible avec une CSP stricte (`script-src 'self'`). */
.nk-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--cyan-d, #0096BD);
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 4px;
  background: transparent;
  transition: background 120ms ease-out;
}
.nk-icon-link:hover { background: #e0f7fd; }