/* ============================================================
   Écran Caisses v4 — maquette 19-caisses (Claude Design)
   Toutes les classes préfixées x4-caisses- : zéro collision.
   Jetons v2 partout (tokens-v2.css, portée [data-v2]) avec repli.
   Seule encre nommée : --sur-accent sur l'aplat ambre.
   La table de données est sur --panel-solid (règle dure), les
   bandes de groupe sur --inset.
   ============================================================ */

.x4-caisses {
  /* #kanban-container (v2-coque.css) pose déjà `20px 30px`. MESURÉ :
     dans la maquette la barre d'onglets saigne d'un bord à l'autre du
     <main> (x 228, large de 1362) et colle sous l'en-tête (y 73 = bas
     de l'en-tête) ; ici elle tombait à x 258 / y 109, large de 1304, et
     la table à 1244 au lieu de 1302. Les marges négatives rendent ces
     20 px (haut) et 30 px (côtés) au module. */
  margin: -20px -30px 0;
  font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  min-width: 1180px;
  letter-spacing: -0.01em;
  /* Interligne MESURÉ maquette : 1,2 partout (17px→20, 13,5px→16,
     12,5px→15, 11px→13, 19px→23) ; l'app hérite ~1,4 et gonflait tout :
     bande 73 au lieu de 68, tête de table 38 au lieu de 36, bande de
     groupe 39 au lieu de 36, lignes 63 au lieu de 58. */
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

/* [hidden] doit rester masqué même sur du flex */
.x4-caisses [hidden] { display: none !important; }

/* La feuille UA pose `font:` sur <button> : la police ET l'interligne
   repartent à zéro. Sans `line-height: inherit`, les libellés de bouton
   gardaient l'interligne `normal` (12,5px → 18 au lieu des 15 mesurés). */
.x4-caisses button { font-family: inherit; line-height: inherit; }
.x4-caisses button:focus-visible {
  outline: 2px solid var(--accent-bright, #f5d547);
  outline-offset: 2px;
}

/* ── Onglets du module ──────────────────────────────────────── */
.x4-caisses-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 30px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  background: var(--panel-2, rgba(255, 255, 255, .42));
}
.x4-caisses-tab {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-3, #6b6f76);
  background: none;
  border: 0;
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: color .14s;
}
.x4-caisses-tab:hover { color: var(--v2-text, #16171a); }
.x4-caisses-tab.est-actif {
  font-weight: 620;
  color: var(--v2-text, #16171a);
  box-shadow: inset 0 -2px 0 0 var(--accent-bright, #f5d547);
}
.x4-caisses-tab-n {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-3, #6b6f76);
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.x4-caisses-tab-n.est-actif {
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d);
}
.x4-caisses-ref {
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: 99px;
  background: none;
  border: 0;
  color: var(--v2-text-3, #6b6f76);
  font-size: 12px;
}
.x4-caisses-ref:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text-2, #55595f); }

/* ── Corps ──────────────────────────────────────────────────── */
.x4-caisses-corps {
  /* 18px 30px 86px dans la maquette ; le conteneur rend déjà 20px en
     bas, d'où 66 ici (66 + 20 = les 86 mesurés). */
  padding: 18px 30px 66px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Bande d'alerte manquants ───────────────────────────────── */
.x4-caisses-bande {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}
.x4-caisses-bande-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm, 12px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-caisses-bande-ic[data-tone="neg"]    { background: var(--neg-soft, rgba(193, 75, 64, .11)); color: var(--neg-fg, #a74137); }
.x4-caisses-bande-ic[data-tone="pos"]    { background: var(--pos, rgba(23, 128, 81, .15)); color: var(--pos-fg, #136d45); }
.x4-caisses-bande-ic[data-tone="accent"] { background: var(--accent-soft, rgba(245, 213, 71, .26)); color: var(--v2-accent, #7d640d); }
.x4-caisses-bande-txt { flex: 1 1 0%; min-width: 0; }
.x4-caisses-bande-titre {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.025em;
}
.x4-caisses-bande-reste { font-weight: 550; color: var(--v2-text-2, #55595f); }
.x4-caisses-bande-sous {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: 2px;
}

/* Bouton vert contour : compléter depuis la réserve */
.x4-caisses-btn-vert {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* MESURÉ maquette : 38 de haut, bord compris (36 ici). */
  height: 38px;
  padding: 0 15px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--pos-fg, #136d45);
  color: var(--pos-fg, #136d45);
  font-size: 12.5px;
  font-weight: 620;
  flex-shrink: 0;
  transition: background .14s;
}
.x4-caisses-btn-vert:hover { background: var(--pos, rgba(23, 128, 81, .15)); }

/* Bouton ambre : aplat --accent-bright, encre --sur-accent */
.x4-caisses-btn-ambre {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 99px;
  background: linear-gradient(170deg, var(--accent-bright, #f5d547), #e4c033);
  border: 0;
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 640;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  flex-shrink: 0;
}
.x4-caisses-btn-ambre:hover { filter: brightness(1.04); }

/* ── Filtres par type + aide ────────────────────────────────── */
.x4-caisses-filtres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.x4-caisses-chip {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* MESURÉ maquette : 32 de haut, bord compris (30 ici) — la rangée de
     filtres passe donc de 30 à 32. */
  height: 32px;
  padding: 0 13px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  color: var(--v2-text-2, #55595f);
  font-size: 12.5px;
  font-weight: 550;
  transition: background .14s;
}
.x4-caisses-chip:hover:not(:disabled):not(.est-actif) { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-caisses-chip.est-actif {
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  border-color: transparent;
  color: var(--v2-accent, #7d640d);
}
.x4-caisses-chip:disabled { opacity: .45; cursor: default; }
.x4-caisses-chip-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.x4-caisses-chip.est-actif .x4-caisses-chip-n { background: rgba(0, 0, 0, .07); }
[data-app-theme="dark"] .x4-caisses .x4-caisses-chip.est-actif .x4-caisses-chip-n { background: rgba(255, 255, 255, .1); }

.x4-caisses-nouvelle { margin-left: auto; height: 32px; padding: 0 14px; }
.x4-caisses-aide { margin-left: auto; position: relative; }
.x4-caisses-nouvelle + .x4-caisses-aide { margin-left: 0; }
.x4-caisses-aide-btn {
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 99px;
  background: none;
  border: 0;
  color: var(--v2-text-3, #6b6f76);
  font-size: 12px;
}
.x4-caisses-aide-btn:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-caisses-aide-tip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  padding: 12px 14px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v2-text-2, #55595f);
  z-index: 20;
}
.x4-caisses-aide:hover .x4-caisses-aide-tip,
.x4-caisses-aide:focus-within .x4-caisses-aide-tip { display: block; }

/* ── Table des caisses (données sur --panel-solid, règle dure) ─ */
.x4-caisses-table {
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  overflow: hidden;
}
.x4-caisses-thead {
  display: grid;
  grid-template-columns: 118px minmax(160px, 1fr) minmax(300px, 1.5fr) 112px 122px;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 22px;
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-2, rgba(255, 255, 255, .42));
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-caisses-thead-note {
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}
.x4-caisses-table-vide {
  padding: 28px 22px;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
}

/* Bandes de groupe sur --inset (règle dure) */
.x4-caisses-groupe {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 18px 10px 22px;
  position: relative;
  background: var(--inset, rgba(0, 0, 0, .035));
  border-top: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-caisses-groupe-pt { width: 7px; height: 7px; border-radius: 99px; }
.x4-caisses-groupe-pt[data-tone="neg"] { background: var(--neg-fg, #a74137); }
.x4-caisses-groupe-pt[data-tone="pos"] { background: var(--pos-fg, #136d45); }
.x4-caisses-groupe-lbl {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.01em;
}
.x4-caisses-groupe-lbl[data-tone="neg"] { color: var(--neg-fg, #a74137); }
.x4-caisses-groupe-lbl[data-tone="pos"] { color: var(--pos-fg, #136d45); }
.x4-caisses-groupe-n {

  color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
}

/* Lignes */
.x4-caisses-row {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(160px, 1fr) minmax(300px, 1.5fr) 112px 122px;
  align-items: center;
  gap: 14px;
  padding: 11px 18px 11px 22px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  cursor: pointer;
  transition: background .14s;
}
.x4-caisses-row:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-caisses-row:last-child { border-bottom: 0; }

/* Liseré d'état à gauche : rouge ≥ 3 manquants, ambre 1-2 ou en
   route, vert complète, neutre quand le standard est vide */
.x4-caisses-barre {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.x4-caisses-barre[data-tone="neg"]    { background: var(--neg-fg, #a74137); }
.x4-caisses-barre[data-tone="accent"] { background: var(--accent-bright, #f5d547); }
.x4-caisses-barre[data-tone="pos"]    { background: var(--pos-fg, #136d45); }
.x4-caisses-barre[data-tone="vide"]   { background: var(--stroke, rgba(20, 20, 25, .075)); }

.x4-caisses-num { display: flex; align-items: baseline; gap: 4px; }
.x4-caisses-num small { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-caisses-num b {
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.x4-caisses-type {
  font-size: 11px;
  color: var(--v2-text-3, #6b6f76);
  margin-top: -1px;
}

.x4-caisses-cell-tech { min-width: 0; }
.x4-caisses-tech { display: flex; align-items: center; gap: 9px; min-width: 0; }
.x4-caisses-tech-rond {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-2, #55595f);
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-caisses-tech-nom {
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-caisses-note { font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }

.x4-caisses-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.x4-caisses-etats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x4-caisses-noms {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  color: var(--v2-text-2, #55595f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x4-caisses-past {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
  white-space: nowrap;
}
.x4-caisses-past[data-tone="pos"]   { color: var(--pos-fg, #136d45); background: var(--pos, rgba(23, 128, 81, .15)); }
.x4-caisses-past[data-tone="neg"]   { color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-caisses-past[data-tone="route"] { color: var(--v2-accent, #7d640d); background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-caisses-past[data-tone="cmd"]   { color: var(--info-fg, #285aa0); background: var(--info-soft, rgba(40, 90, 160, .12)); }
.x4-caisses-past[data-tone="plus"]  { color: var(--v2-text-2, #55595f); background: var(--inset, rgba(0, 0, 0, .035)); }

.x4-caisses-date {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
}
.x4-caisses-act { display: flex; justify-content: flex-end; }
.x4-caisses-btn-check {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* MESURÉ maquette : 32 de haut, bord compris (30 ici). */
  height: 32px;
  padding: 0 13px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  color: var(--v2-text, #16171a);
  font-size: 12.5px;
  font-weight: 620;
  transition: background .14s;
}
.x4-caisses-btn-check:hover { background: var(--inset, rgba(0, 0, 0, .035)); }

/* ── État vide : aucune caisse ──────────────────────────────── */
.x4-caisses-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 20px;
  border-radius: var(--r-lg, 26px);
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  text-align: center;
}
.x4-caisses-vide-ic {
  width: 46px;
  height: 46px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-3, #6b6f76);
  display: grid;
  place-items: center;
}
.x4-caisses-vide-titre {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.x4-caisses-vide-sous {
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
  max-width: 380px;
}
.x4-caisses-vide .x4-caisses-btn-ambre { margin-top: 8px; }

/* Le geste nommé, à la place du constat : une caisse sans titulaire
   appelle une affectation (règle du 02/09/2026). Il montre qu'il est
   cliquable — c'est la règle n° 2 appliquée dans les deux sens. */
.x4-caisses-affecter {
  padding: 3px 10px; border-radius: 99px;
  border: 1px dashed var(--stroke, rgba(20, 20, 25, .075));
  background: transparent;
  color: var(--v2-text-2, #55595f);
  font-family: inherit; font-size: 11.5px; font-weight: 620; cursor: pointer;
}
.x4-caisses-affecter:hover {
  border-style: solid; border-color: var(--v2-accent, #7d640d);
  color: var(--v2-accent, #7d640d);
}

/* Les lignes appartiennent à leur groupe : 40 px d'indentation le
   disent, là où un même bord gauche les mettait au même rang que la
   bande (audit du 02/09/2026). */
.x4-caisses-row { padding-left: 40px; }
.x4-caisses-groupe-n {
  font-size: 12px;
  color: var(--v2-text-3, #6b6f76);
}

/* Le point vit dans la marge : dans le flux, il poussait le nom du
   groupe jusqu'au bord du contenu des lignes et l'indentation
   disparaissait (mesuré 39 px contre 40). */
.x4-caisses-groupe-pt { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }

/* ════════════════════════════════════════════════════════════
   Maquette validée du 24/09/2026 : la liste en lignes, le check-up
   en pleine page, la liste de référence. Tout en jetons v2 avec repli,
   graisses sur l'échelle (550 / 620 / 680), rayons par jetons ou 99px.
   ════════════════════════════════════════════════════════════ */

/* ── Liste : barre d'outils (recherche, types, nouvelle caisse) ── */
.x4-caisses-outils {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.x4-caisses-outils .x4-caisses-filtres { margin: 0; padding: 0; flex: 1 1 auto; }
.x4-caisses-cherche {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 340px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  color: var(--v2-text-3, #6b6f76);
}
.x4-caisses-cherche:focus-within { border-color: var(--accent-bright, #f5d547); }
.x4-caisses-cherche input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--v2-text, #16171a);
}
.x4-caisses-cherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Liste : groupes et lignes ─────────────────────────────── */
.x4-caisses-groupe-titre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 4px 0;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.x4-caisses-groupe-titre[data-tone="neg"] { color: var(--neg-fg, #a74137); }
.x4-caisses-groupe-titre[data-tone="pos"] { color: var(--pos-fg, #136d45); }
.x4-caisses-groupe-titre .x4-caisses-groupe-n {
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-text-3, #6b6f76);
}
.x4-caisses-table + .x4-caisses-groupe-titre { margin-top: 18px; }
.x4-caisses .x4-caisses-row {
  grid-template-columns: 92px 150px minmax(160px, 1fr) auto 22px;
  gap: 16px;
  min-height: 62px;
  padding: 8px 16px 8px 22px;
}
.x4-caisses .x4-caisses-row:focus-visible { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -2px; }
.x4-caisses-etat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.x4-caisses-etat-mot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 680;
}
.x4-caisses-etat-mot[data-tone="neg"]  { color: var(--neg-fg, #a74137); }
.x4-caisses-etat-mot[data-tone="cmd"]  { color: var(--info-fg, #285aa0); }
.x4-caisses-etat-mot[data-tone="pos"]  { color: var(--pos-fg, #136d45); }
.x4-caisses-etat-mot[data-tone="mute"] { color: var(--v2-text-3, #6b6f76); font-weight: 550; }
.x4-caisses-etat-sep { color: var(--v2-text-3, #6b6f76); }
.x4-caisses-chev { display: grid; place-items: center; color: var(--v2-text-3, #6b6f76); }
.x4-caisses-table.x4-caisses-table-vide { padding: 28px 22px; }

/* Le lien texte : un geste discret, jamais un bouton de plus. */
.x4-caisses-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--v2-accent, #7d640d);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  cursor: pointer;
}
.x4-caisses-lien:hover { color: var(--v2-text, #16171a); text-decoration: underline; }
.x4-caisses-pied { margin-top: 10px; }

/* Bouton blanc : le frère calme du bouton ambre. */
.x4-caisses-btn-blanc {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  color: var(--v2-text, #16171a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  flex-shrink: 0;
  transition: background .14s;
}
.x4-caisses-btn-blanc:hover { background: var(--inset, rgba(0, 0, 0, .035)); }

/* ── Check-up en pleine page ───────────────────────────────── */
.x4-ck-retour { align-self: flex-start; }
.x4-ck-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.x4-ck-tete-g { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.x4-ck-titre {
  margin: 0;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.x4-ck-qui {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--v2-text-2, #55595f);
}
.x4-ck-qui .x4-caisses-tech-nom { font-weight: 680; color: var(--v2-text, #16171a); }
.x4-ck-actions { display: flex; gap: 8px; flex-shrink: 0; }
.x4-ck-actions .x4-caisses-btn-ambre, .x4-ck-actions .x4-caisses-btn-blanc { height: 38px; }

.x4-ck-progres {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md, 18px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-ck-progres.est-vide { color: var(--v2-text-2, #55595f); font-size: 13px; }
.x4-ck-progres-n { font-size: 15px; font-weight: 680; white-space: nowrap; }
.x4-ck-barre {
  flex: 1 1 auto;
  display: flex;
  height: 8px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .06));
  overflow: hidden;
}
.x4-ck-barre-p { height: 100%; background: var(--pos-fg, #136d45); transition: width .25s; }
.x4-ck-barre-c { height: 100%; background: var(--info-fg, #285aa0); transition: width .25s; }
.x4-ck-compte { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.x4-ck-progres-btns { display: flex; gap: 6px; }
.x4-ck-trop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-md, 18px);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d);
  font-size: 12.5px;
}
.x4-ck-trop span { flex: 1 1 auto; }
.x4-ck-trop b { font-weight: 680; }

.x4-ck-liste {
  border-radius: var(--r-md, 18px);
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  overflow: hidden;
}
.x4-ck-nature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 6px;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}
.x4-ck-nature span { font-weight: 550; letter-spacing: 0; }
.x4-ck-outil {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 6px 14px 6px 20px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  cursor: pointer;
  transition: background .12s;
}
.x4-ck-nature + .x4-ck-outil { border-top: 0; }
.x4-ck-outil:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-ck-outil.est-manquant { background: var(--neg-soft, rgba(193, 75, 64, .11)); }
.x4-ck-outil.est-commande { background: var(--info-soft, rgba(40, 90, 160, .12)); }
.x4-ck-outil.est-manquant:hover { background: color-mix(in srgb, var(--neg-soft, rgba(193, 75, 64, .11)), var(--inset, rgba(0, 0, 0, .035))); }
.x4-ck-outil.est-commande:hover { background: color-mix(in srgb, var(--info-soft, rgba(40, 90, 160, .12)), var(--inset, rgba(0, 0, 0, .035))); }
.x4-ck-outil:focus-visible { outline: 2px solid var(--accent-bright, #f5d547); outline-offset: -2px; }
.x4-ck-case {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: var(--r-xs, 9px);
  display: grid;
  place-items: center;
  color: #fff;
}
.x4-ck-case.est-present  { background: var(--pos-fg, #136d45); }
.x4-ck-case.est-commande { background: var(--info-fg, #285aa0); }
.x4-ck-case.est-manquant { border: 2px solid var(--neg-fg, #a74137); background: var(--panel-solid, #fff); }
.x4-ck-photo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--r-xs, 9px);
  background: #fff;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
}
.x4-ck-photo.est-vide {
  display: grid;
  place-items: center;
  color: var(--v2-text-3, #6b6f76);
  background: var(--inset, rgba(0, 0, 0, .035));
}
.x4-ck-outil-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.x4-ck-outil-txt b { font-size: 14px; font-weight: 620; }
.x4-ck-outil.est-present .x4-ck-outil-txt b { font-weight: 550; }
.x4-ck-outil-txt small { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-ck-outil-droite { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.x4-ck-mot { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 680; }
.x4-ck-mot[data-tone="neg"] { color: var(--neg-fg, #a74137); }
.x4-ck-mot[data-tone="cmd"] { color: var(--info-fg, #285aa0); }
.x4-ck-mot small { font-size: 12px; font-weight: 550; }
.x4-ck-panier {
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
  color: var(--info-fg, #285aa0);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.x4-ck-panier:hover { background: var(--info-soft, rgba(40, 90, 160, .12)); border-color: var(--info-fg, #285aa0); }
.x4-ck-arrive { height: 36px; padding: 0 14px; }
.x4-ck-annule {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: transparent;
  color: var(--v2-text-3, #6b6f76);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.x4-ck-annule:hover { color: var(--neg-fg, #a74137); border-color: var(--neg-fg, #a74137); }
.x4-ck-journal { display: flex; flex-direction: column; gap: 10px; }
.x4-ck-journal:empty { display: none; }

/* ── La modale des infos d'une caisse ──────────────────────── */
.x4-ck-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif);
}
.x4-ck-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.x4-ck-champ > span {
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}
.x4-ck-champ-large { grid-column: 1 / -1; }
.x4-ck-nouveau { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
.x4-ck-nouveau[hidden] { display: none; }
.x4-ck-nouveau input { flex: 1 1 auto; min-width: 0; }
.x4-ck-segs {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 3px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .05));
}
.x4-ck-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 99px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2, #55595f);
  cursor: pointer;
}
.x4-ck-seg:hover { color: var(--v2-text, #16171a); }
.x4-ck-seg.est-actif { background: var(--accent-bright, #f5d547); color: var(--sur-accent, #1b1a12); font-weight: 680; }
.x4-ck-seg-n { font-size: 11px; opacity: .75; }
.x4-ck-aide { min-height: 14px; font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-ck-aide.est-ok { color: var(--pos-fg, #136d45); }
.x4-ck-aide.est-erreur { color: var(--neg-fg, #a74137); }
.x4-ck-num-libre {
  padding: 1px 8px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 620;
  color: var(--v2-text, #16171a);
  cursor: pointer;
}
.x4-ck-statut { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.x4-ck-statut-cause { color: var(--v2-text-2, #55595f); }

/* ── Liste de référence ────────────────────────────────────── */
.x4-std-tete { display: flex; flex-direction: column; gap: 6px; }
.x4-std-intro { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.45; color: var(--v2-text-2, #55595f); }
.x4-std-segs { margin: 2px 0 4px; }
.x4-std-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 6px 10px 6px 20px;
  border-top: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-ck-nature + .x4-std-row { border-top: 0; }
.x4-std-row .x4-ck-photo { width: 40px; height: 40px; }
.x4-std-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.x4-std-txt b { font-size: 14px; font-weight: 620; }
.x4-std-txt small { font-size: 11.5px; color: var(--v2-text-3, #6b6f76); }
.x4-std-ico {
  width: 40px;
  height: 40px;
  border-radius: 99px;
  border: 0;
  background: transparent;
  color: var(--v2-text-3, #6b6f76);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.x4-std-ico:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a); }
.x4-std-suppr.est-sur {
  width: auto;
  padding: 0 12px;
  color: var(--neg-fg, #a74137);
  font-family: inherit;
  font-size: 12px;
  font-weight: 680;
}
.x4-std-ajout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-2, rgba(255, 255, 255, .42));
}
.x4-std-ajout input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-solid, #fff);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--v2-text, #16171a);
}
.x4-std-ajout input:focus { outline: 0; border-color: var(--accent-bright, #f5d547); }