/* -----------------------------------------------------------------------------
   LENUTA-F-067 — Vague 1 refonte desktop (mockups B-mockups-desktop, audit UX
   Margo 2026-07-02). Feuille ADDITIVE à app.css : ne redéfinit aucun token,
   réutilise la palette crème/olive/laiton existante (:root de app.css).

   Portée : coque sidebar + main (≥ 1024 px), composants desktop (boutons XL,
   tableaux, fil de messages, ligne d'étapes, aperçu document). Mobile < 1024 px :
   la sidebar disparaît, le rendu existant (header + domnav) reste inchangé
   (dégradation temporaire acceptée — Vague 3 refera le mobile proprement).
   -------------------------------------------------------------------------- */
:root {
  --dsk-r: 14px;
  --dsk-r-lg: 20px;
  --dsk-sidebar-w: 232px;
  /* LENUTA-F-088 : tons des deux univers factures, lisibles sur la sidebar
     turquoise (--c-primary). Achats = teal clair, Ventes = cyan-teal clair.
     Discrets mais distincts — servent aux titres de groupe + filet d'accent. */
  --dsk-tone-buy: #b8e4e4;
  --dsk-tone-sell: #8dd4cc;
  /* LENUTA-F-098 : composantes RVB du ton Ventes (cyan-teal) pour les fonds teintés
     à faible opacité de la vue tableau catalogue (zébrures / hover). */
  --dsk-tone-sell-tint: 141 212 204;
}

/* ---- Coque application : sidebar + colonne de contenu ---------------------- */
.dsk-sidebar { display: none; }

@media (min-width: 1024px) {
  .dsk-layout { display: flex; align-items: stretch; min-height: 100vh; }

  .dsk-sidebar {
    width: var(--dsk-sidebar-w);
    flex-shrink: 0;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .dsk-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

  /* Écrans « mockup-fidèles » (home, dépôt factures émises) : la sidebar est
     la seule navigation — header et domnav s'effacent au profit du layout
     sidebar + main du mockup. Les autres écrans gardent leur chrome existant. */
  .dsk-clean .app-header,
  .dsk-clean .domnav { display: none; }
  .dsk-clean .app-shell__main { padding: 34px 44px; max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  /* Sidebar compacte : icônes seules (patron mockup _style.css). */
  .dsk-sidebar { width: 74px; padding: 22px 10px 16px; }
  .dsk-sidebar .dsk-logo { font-size: 1rem; text-align: center; padding-bottom: 16px; }
  .dsk-sidebar .dsk-logo small,
  .dsk-sidebar .lbl,
  .dsk-sidebar .sprofile__id { display: none; }
  .dsk-sidebar .snav a, .dsk-sidebar .dsk-add { justify-content: center; padding: 12px 8px; }
  .dsk-sidebar .sprofile { justify-content: center; }
}
@media (min-width: 1700px) {
  .dsk-clean .app-shell__main { padding: 40px 64px; }
}

/* ---- Sidebar : logo, bouton d'action, navigation, profil ------------------- */
.dsk-logo {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0 10px 20px;
  letter-spacing: .3px;
  color: #fff;
  text-decoration: none;
}
.dsk-logo small { display: block; font-size: .75rem; font-weight: 400; opacity: .7; margin-top: 2px; }

.dsk-add {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .98rem;
  padding: 13px 14px;
  border-radius: 12px;
  margin-bottom: 22px;
}
.dsk-add:hover { color: #fff; filter: brightness(1.07); }

.snav { display: flex; flex-direction: column; gap: 2px; }
.snav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .98rem;
}
.snav a .nico { font-size: 1.15rem; width: 24px; text-align: center; }
.snav a.active { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; }
.snav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---- LENUTA-F-088 : deux univers factures (Achats / Ventes) --------------- */
/* Groupes visuellement distincts : titre teinté + espacement + filet fin.
   Pas de cadre lourd — séparation par un hairline et le ton du titre. */
.snav__group { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.snav__group--misc { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.snav__title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 12px 6px;
  color: rgba(255, 255, 255, .5);
}
.snav__group--buy .snav__title { color: var(--dsk-tone-buy); }
.snav__group--sell .snav__title { color: var(--dsk-tone-sell); }
/* LENUTA-F-158 : section d'amorçage « Mise en service » — accent discret (laiton)
   pour signaler un chemin temporaire, sans cadre lourd. Filet d'accent sur l'item
   actif, cohérent avec les univers Achats/Ventes ci-dessus. */
.snav__group--onboarding .snav__title { color: rgba(141, 212, 204, .85); }
.snav__group--onboarding a.active { box-shadow: inset 3px 0 0 rgba(141, 212, 204, .9); }
/* Filet d'accent au ton de l'univers sur l'item actif (discret). */
.snav__group--buy a.active { box-shadow: inset 3px 0 0 var(--dsk-tone-buy); }
.snav__group--sell a.active { box-shadow: inset 3px 0 0 var(--dsk-tone-sell); }

/* Raccourci discret « assistant » (ex-bouton laiton F-073), poussé en bas. */
.snav__assist {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-size: .9rem;
  border-radius: 10px;
}
.snav__assist:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.snav__assist.active { background: rgba(255, 255, 255, .12); color: #fff; }

/* Mode compact (icônes seules, 1024–1180 px) : masquer titres + libellé assist. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .dsk-sidebar .snav__title { display: none; }
  .dsk-sidebar .snav__group--misc { border-top: none; padding-top: 0; }
  .dsk-sidebar .snav__assist { justify-content: center; padding: 12px 8px; }
}

.sprofile {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .9rem;
}
.sprofile .avatar {
  width: 38px; height: 38px;
  border-radius: 99px;
  background: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.sprofile__logout {
  display: inline;
  border: none; background: none; padding: 0;
  color: rgba(255, 255, 255, .65);
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
}
.sprofile__logout:hover { color: #fff; text-decoration: underline; }

/* ---- Tête de page ----------------------------------------------------------- */
.main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.main-head h1, .main-head h2 { font-size: 1.55rem; font-weight: 700; margin: 0; }
.main-head .date { color: var(--c-muted); font-size: .95rem; }
.crumb { color: var(--c-muted); font-size: .92rem; margin: 0 0 var(--sp-2); }
.crumb a { color: var(--c-muted); }

/* ---- Carte / boutons XL (héros accueil) ------------------------------------- */
.dsk-card { background: var(--c-surface); border-radius: var(--dsk-r); padding: 20px; border: 1px solid var(--c-line); }
.dsk-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .dsk-hero { grid-template-columns: 1fr; } }

.btn-xl {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 22px;
  border: none;
  border-radius: var(--dsk-r-lg);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
.btn-xl .ico {
  font-size: 1.7rem;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-xl small { display: block; font-size: .9rem; font-weight: 400; margin-top: 3px; opacity: .85; }
.btn-xl.btn-primary { background: var(--c-primary); color: #fff; }
.btn-xl.btn-primary:hover { background: var(--c-primary-700); color: #fff; }
.btn-xl.btn-primary .ico { background: rgba(255, 255, 255, .15); }
.btn-xl.btn-secondary { background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-primary); }
.btn-xl.btn-secondary .ico { background: var(--c-bg); }

/* ---- Tableaux desktop -------------------------------------------------------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tbl th {
  text-align: left;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-line);
}
.tbl td { padding: 14px; border-bottom: 1px solid var(--c-surface-2); vertical-align: middle; }
.tbl tr.row-link { cursor: pointer; }
.tbl tr.row-link:hover td { background: var(--c-surface-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.num { font-weight: 600; }

.tick { color: var(--c-muted); }
.tick--done { color: var(--c-success); font-weight: 700; }

/* ---- En-têtes triables + pagination (LENUTA-F-089) --------------------------- */
.tbl th.th-sort { padding: 0; }
.tbl th.th-sort a {
  display: block;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
}
.tbl th.th-sort a:hover { color: var(--c-ink); }
.tbl th.th-sort.is-sorted a { color: var(--c-ink); }
.sort-caret { margin-left: 4px; font-size: .7rem; }
/* LENUTA-F-127 : colonne Actions (bouton supprimer, largeur minimale). */
.tbl th.th-actions { width: 1%; white-space: nowrap; text-align: right; }
.tbl td.td-actions { width: 1%; white-space: nowrap; text-align: right; padding-left: 0; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: var(--sp-4);
  font-size: .92rem;
  color: var(--c-muted);
}
.pager__info { font-variant-numeric: tabular-nums; }
.pager__btn {
  text-decoration: none;
  color: var(--c-primary);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--dsk-r);
}
.pager__btn:hover { background: var(--c-surface-2); }
.pager__btn.is-disabled { color: var(--c-line-strong); pointer-events: none; }

/* ---- Fil de messages (écran dépôt / suivi) ----------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--dsk-r);
  padding: 20px;
}
.bubble {
  max-width: 92%;
  padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 1rem;
  line-height: 1.45;
}
.bubble p { margin: 0; }
.bubble p + p { margin-top: 5px; }
.bubble--me {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: #d6eeec;
  border-color: #b8e0dc;
}
.bubble--action { border: 2px solid var(--c-warning); }
.progress { height: 8px; background: #eee; border-radius: 99px; margin-top: 10px; overflow: hidden; }
.progress > div { height: 100%; background: var(--c-accent); border-radius: 99px; }
.progress--wait > div { width: 40%; animation: dsk-slide 1.4s ease-in-out infinite alternate; }
@keyframes dsk-slide { from { margin-left: 0; } to { margin-left: 60%; } }

/* ---- Ligne d'étapes ----------------------------------------------------------- */
.steps { display: flex; align-items: center; gap: 6px; font-size: .82rem; text-align: center; }
.steps .st { flex: 1; }
.steps .st .pin {
  width: 28px; height: 28px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 5px;
  color: #fff;
  background: #ddd;
}
.steps .st.done .pin { background: var(--c-success); }
.steps .st.now .pin { background: var(--c-warning); }
.steps .st.next { color: var(--c-muted); }
.steps .bar { flex: 1; height: 2px; background: #ddd; margin-bottom: 20px; }
.steps .bar.done { background: var(--c-success); }
.steps .bar.now { background: var(--c-warning); }

/* ---- Aperçu document ----------------------------------------------------------- */
.docpane {
  background: #e8f4f3;
  border: 1px solid var(--c-line);
  border-radius: var(--dsk-r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 520px;
}
.docpane .doctools {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #c4e8e6;
  background: #ddf0ef;
  font-size: .9rem;
  color: var(--c-muted);
}
.docpane .docembed { flex: 1; width: 100%; border: none; min-height: 520px; }
.docpane .docempty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  padding: 34px;
  text-align: center;
}

/* ---- Grille dépôt : fil 460 px + aperçu à droite ------------------------------- */
.ci-desk { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1024px) {
  .ci-desk { display: grid; grid-template-columns: 460px 1fr; gap: 26px; align-items: start; }
}
.ci-desk__fil { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Zone de dépôt intégrée au fil (bulle « moi ») — garde les hooks BUG-033. */
.ci-drop--fil {
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--dsk-r);
  background: var(--c-surface);
}
.ci-drop--fil.ci-drop--over { border-color: var(--c-primary); background: var(--c-primary-50); }

/* ---- LENUTA-F-098 — Vue tableau du catalogue (tabulaire complète) -----------
   Présentation soignée, ton laiton (Ventes). Table dense, zébrures discrètes,
   hover, grisage des lignes inactives, en-têtes triables, colonne d'actions.
   Additif — n'ajoute que le spécifique `.cat-table`. */
.cat-table__scroll { overflow-x: auto; }
.cat-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.cat-table thead th {
  text-align: left;
  padding: 8px 12px;
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-line-strong);
}
/* Lignes denses (~36 px) pour tenir 20+ items sans scroll excessif. */
.cat-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
  height: 36px;
  box-sizing: border-box;
}
.cat-table tbody tr:last-child td { border-bottom: 0; }
/* Zébrures discrètes (ligne paire) + hover, teintés laiton à faible opacité. */
.cat-table tbody tr:nth-child(even) td { background: rgb(var(--dsk-tone-sell-tint) / 0.05); }
.cat-table tbody tr:hover td { background: rgb(var(--dsk-tone-sell-tint) / 0.10); }
/* Ligne inactive : atténuée + laisse voir le badge « Inactif » en tête. */
.cat-table tbody tr.row-inactive { opacity: 0.55; }
.cat-table tbody tr.row-inactive:hover { opacity: 0.85; }

/* En-têtes triables : reprend le motif F-089 (`.th-sort`) sur `.cat-table`. */
.cat-table th.th-sort { padding: 0; }
.cat-table th.th-sort a {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
.cat-table th.th-sort a:hover { color: var(--c-ink); }
.cat-table th.th-sort.is-sorted a { color: var(--c-ink); }
.cat-table .sort-caret { margin-left: 4px; font-size: 0.7rem; opacity: 0.7; }

/* Cellules : alignements par colonne. */
.cat-table td.num, .cat-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-table .cat-t__label a { color: var(--c-ink); font-weight: 600; text-decoration: none; }
.cat-table .cat-t__label a:hover { text-decoration: underline; }
.cat-table .cat-t__flag { margin-left: 6px; }
.cat-table .cat-t__desc { max-width: 22ch; }
.cat-table .cat-t__scope { text-align: center; }
.cat-table .cat-t__active { text-align: center; }

/* Badges Type (couleurs distinctes par nature). */
.cat-kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.cat-kind--travaux { background: rgb(var(--dsk-tone-sell-tint) / 0.22); color: #0a4f4a; }
.cat-kind--piece { background: rgba(184, 228, 228, 0.35); color: #0a4545; }
.cat-bill { white-space: nowrap; color: var(--c-muted); }

/* Bascule Actif inline (HTMX) : petit interrupteur. */
.cat-toggle {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 18px;
  padding: 2px;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-surface-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
.cat-toggle__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-muted);
  transition: transform 0.12s ease, background 0.12s ease;
}
.cat-toggle.is-on { background: var(--dsk-tone-sell); border-color: var(--dsk-tone-sell); }
.cat-toggle.is-on .cat-toggle__dot { transform: translateX(16px); background: #fff; }

/* Colonne Actions : icônes discrètes, révélées au hover de la ligne. */
.cat-table .cat-t__actions { text-align: right; white-space: nowrap; min-width: 72px; }
.cat-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 3px 4px;
  color: var(--c-ink, inherit);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.12s ease;
}
/* LENUTA-F-100 : icônes SVG uniformes (Feather 16 px) en lieu des emoji. */
.cat-act .ico-inline { width: 16px; height: 16px; display: block; }
.cat-act:hover { opacity: 1; }
.cat-table tbody tr:hover .cat-act { opacity: 0.9; }
.cat-table tbody tr:hover .cat-act:hover { opacity: 1; }
.cat-act__form { display: inline; }

/* ---- LENUTA-F-099 — polish UX vue tableau : respiration + édition inline -----
   Feedback Margo post-F-098 : (1) tableau collé au bord gauche, (2) colonnes
   trop proches, (3) édition inline directe. */

/* (1)+(2) Respiration : padding intérieur + colonnes espacées (16→20 px). */
.cat-table thead th,
.cat-table tbody td { padding-left: 16px; padding-right: 16px; }
.cat-table thead th:first-child,
.cat-table tbody td:first-child { padding-left: 20px; }
.cat-table thead th:last-child,
.cat-table tbody td:last-child { padding-right: 20px; }
/* En-têtes triables : le padding vit sur le lien interne (th.th-sort = padding 0). */
.cat-table th.th-sort a { padding-left: 16px; padding-right: 16px; }
.cat-table th.th-sort:first-child a { padding-left: 20px; }
/* min-width pour forcer la respiration des colonnes chiffrées serrées. */
.cat-table .cat-t__price { min-width: 7ch; }
.cat-table .cat-t__vat { min-width: 5ch; }

/* (2b) LENUTA-F-173 — Prix négociés par client, harmonisé sur `.cat-table`.
   Additif et scopé `.cat-np` : libellé service en gras (le sélecteur label du
   tableau du haut ne stylait que les <a>), pastilles alignées, prix négocié en
   évidence, résumé « + Prix négocié » rendu comme un bouton (marker masqué). */
.cat-np .cat-np__label { font-weight: 600; }
.cat-np .cat-np__service .cat-kind,
.cat-np .cat-np__service .badge { margin-left: 6px; vertical-align: middle; }
.cat-np .cat-np__price { font-weight: 600; min-width: 7ch; }
.cat-np .cat-np__since { white-space: nowrap; color: var(--c-muted); }
.cat-np .cat-np__note { color: var(--c-muted); max-width: 22ch; }
.cat-np__add > summary { list-style: none; }
.cat-np__add > summary::-webkit-details-marker { display: none; }
.cat-np__add[open] > summary { margin-bottom: var(--sp-3); }

/* (3) Cellule éditable inline : cursor pointer + hover ambient laiton. */
.ci-edit {
  display: inline-block;
  min-width: 1ch;
  padding: 1px 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.cat-table .ci-edit:hover,
.ci-edit:focus-visible {
  background: rgb(var(--dsk-tone-sell-tint) / 0.25);
  box-shadow: inset 0 0 0 1px rgb(var(--dsk-tone-sell-tint) / 0.55);
  outline: none;
}
.ci-edit__input {
  width: 100%;
  min-width: 7ch;
  font: inherit;
  padding: 2px 4px;
  box-sizing: border-box;
  border: 1px solid var(--c-line-strong);
  border-radius: 4px;
}
.ci-edit.is-editing { background: transparent; box-shadow: none; cursor: default; }
/* Flash vert bref au succès (400 ms), puis retour transparent. */
.ci-edit.is-ok { animation: ciEditFlash 0.4s ease; }
.ci-autosave--ok { animation: ciEditFlash 0.5s ease; }
@keyframes ciEditFlash {
  0% { background: rgba(120, 190, 120, 0.55); }
  100% { background: transparent; }
}
/* Erreur de validation : bordure rouge persistante + tooltip (title/data-error). */
.ci-edit.is-err { box-shadow: inset 0 0 0 1px #d33; background: rgba(211, 51, 51, 0.09); }

/* ---- LENUTA-F-110 : Widget feedback flottant ---------------------------------- */
.fbk-widget { display: none; }

@media (min-width: 1024px) {
  .fbk-widget { display: block; }

  /* Bouton rond FAB bottom-right */
  .fbk-widget__fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
  }
  .fbk-widget__fab:hover { background: var(--c-primary-700); transform: scale(1.05); }
  .fbk-widget__fab:active { transform: scale(0.97); }

  /* Overlay semi-transparent */
  .fbk-widget__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 20, 0.38);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Transition entrée (via x-transition classes Alpine) */
  .fbk-widget-enter { transition: opacity 0.18s ease, transform 0.18s ease; }
  .fbk-widget-enter-from { opacity: 0; }
  .fbk-widget-enter-to   { opacity: 1; }

  /* Carte modale */
  .fbk-widget__card {
    background: var(--c-surface);
    border-radius: var(--dsk-r-lg);
    padding: 24px 28px;
    width: 440px;
    max-width: calc(100vw - 48px);
    box-shadow: var(--shadow-overlay);
  }

  .fbk-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .fbk-widget__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
    color: var(--c-ink);
  }
  .fbk-widget__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-muted);
    font-size: 1rem;
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--radius-sm);
  }
  .fbk-widget__close:hover { background: var(--c-surface-2); color: var(--c-ink); }

  /* LENUTA-F-125 — le fieldset « Priorité » du widget a été retiré (Margo ne
     saisit plus de priorité). Les styles .fbk-widget__prio-* associés sont
     supprimés avec lui. */

  /* LENUTA-F-122 Volet 1 — Type de retour dans le widget */
  .fbk-widget__category {
    border: none;
    padding: 0;
    margin: 0 0 14px;
  }
  .fbk-widget__category legend {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    width: 100%;
  }
  .fbk-widget__cat-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .fbk-widget__cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 1.5px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--fs-sm);
    white-space: nowrap;
    color: var(--c-ink-soft);
    transition: background 0.1s, border-color 0.1s;
  }
  .fbk-widget__cat-btn input[type="radio"] { display: none; }
  .fbk-widget__cat-btn:has(input:checked) {
    background: var(--c-primary-50);
    border-color: var(--c-primary);
    color: var(--c-primary);
    font-weight: 600;
  }

  /* Actions */
  .fbk-widget__actions { gap: var(--sp-2); }

  /* LENUTA-F-125 — sur desktop, le bloc triage Stef s'étale en ligne
     (le forçage 2 colonnes est une contrainte mobile). */
  .fbk-row__triage-grid {
    grid-template-columns: repeat(auto-fit, minmax(9rem, max-content));
    align-items: end;
  }
}
.ci-autosave--err { outline: 1px solid #d33; outline-offset: 0; }

/* ---- LENUTA-F-123 — Bouton + (FAB catalogue) + en-tête modal --------------- */
.cat-add-fab {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.cat-modal-head h3 { margin: 0; }

/* ---- LENUTA-F-124 — Barre de filtres catalogue (client + toggle inactifs) -- */
.cat-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: rgb(var(--dsk-tone-sell-tint) / 0.07);
  border: 1px solid rgb(var(--dsk-tone-sell-tint) / 0.25);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.cat-filters__label { color: var(--c-muted); white-space: nowrap; }
.cat-filters__select { font-size: var(--fs-sm); padding: 2px 6px; }
.cat-filters__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
  user-select: none;
}

/* =============================================================================
   LENUTA-F-139 — Détail bon de commande « Atelier » (variante C validée 12/07).
   Fil d'étapes + colonne de travail (lignes + réconciliation F-134 inline) +
   rail fiche (client / conditions / totaux / message). Portée sous .bc-atelier
   pour ne pas toucher les autres usages de .steps / .card. Rail sticky ≥1024px ;
   sous les lignes en pile mobile (ordre DOM : work puis rail).
   ============================================================================= */
.bc-atelier .card { border-radius: var(--dsk-r); }  /* 14px — parité maquette V-C */

/* Topbar mobile (<1024px) : retour + contexte, en pleine largeur. Cachée
   quand la sidebar desktop prend le relais. Le margin négatif annule le padding
   du <main> (var(--sp-6)/(--sp-3) ≤768px ; var(--sp-8)/(--sp-4) 769-1023px)
   pour coller aux bords, comme la .mobile-topbar de la maquette. */
.bc-atelier .bc-topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--c-primary); color: #fff;
  padding: 12px var(--sp-4);
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-3)) var(--sp-4);
  position: sticky; top: 0; z-index: 40;
}
@media (min-width: 769px) and (max-width: 1023px) {
  .bc-atelier .bc-topbar { margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-4)) var(--sp-4); }
}
.bc-atelier .bc-topbar a { color: #fff; text-decoration: none; font-size: 1.3rem; line-height: 1; padding: 6px; }
.bc-atelier .bc-topbar strong { font-size: var(--fs-base); }
.bc-atelier .bc-topbar span { opacity: .75; font-size: var(--fs-sm); }
@media (min-width: 1024px) { .bc-atelier .bc-topbar { display: none; } }

.bc-atelier .crumb { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.bc-atelier .crumb a { color: var(--c-muted); }

.bc-atelier .page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.bc-atelier .page-head h1 { margin: 0; font-size: 1.55rem; font-weight: 700; }
.bc-atelier .page-head h1 small { font-weight: 400; color: var(--c-muted); font-size: var(--fs-base); }
/* LENUTA-F-165 : actions d'en-tête (bouton document persistant + badge statut). */
.bc-atelier .page-head .ph-actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.bc-atelier .bc-doc-trigger { cursor: pointer; white-space: nowrap; }

/* LENUTA-F-165 : carte « Document d'origine » repliable (rail du détail BC +
   écran de réconciliation). Le viewer partagé `.docv` (sombre) est encadré à
   hauteur de carte pour rester consultable pendant le rapprochement/réconciliation
   sans dominer la colonne. Classe propre à F-165 → non scopée. */
.doc-card { padding: 0; overflow: hidden; }
.doc-card > summary {
  cursor: pointer; list-style: none; padding: 10px 14px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; color: var(--c-ink);
}
.doc-card[open] > summary { border-bottom: 1px solid var(--c-line); }
.doc-card > summary::-webkit-details-marker { display: none; }
.doc-card > summary::after {
  content: "▾"; margin-left: auto; color: var(--c-muted); transition: transform .12s;
}
.doc-card[open] > summary::after { transform: rotate(180deg); }
.doc-card .docv { border-radius: 0; }
.doc-card embed.docv-media { height: 46vh; }
.doc-card img.docv-media { width: min(100%, 480px); }

/* Fil d'étapes présenté en carte (base .steps fournit flex/pin/bar). */
.bc-atelier .steps {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--dsk-r); box-shadow: var(--shadow-sm);
  padding: var(--sp-4) var(--sp-3) var(--sp-3); margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
}
.bc-atelier .steps .st .pin { font-weight: 700; }
.bc-atelier .steps .st .lbl-s { display: none; }
@media (max-width: 520px) {
  .bc-atelier .steps .st .lbl-l { display: none; }
  .bc-atelier .steps .st .lbl-s { display: inline; }
}

/* Grille travail / rail. */
.bc-atelier .split { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 1024px) {
  .bc-atelier .split { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
  .bc-atelier .rail { position: sticky; top: 24px; }
}

.bc-atelier .work > h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.bc-atelier .work > h2 .badge { vertical-align: 2px; margin-left: var(--sp-2); }
.bc-atelier .empty-lines { padding: var(--sp-5); text-align: center; }

/* Carte ligne (réconciliation inline). */
.bc-atelier .wline { padding: 0; overflow: hidden; }
.bc-atelier .wline .head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.bc-atelier .wline .head .no {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--c-primary-50); color: var(--c-primary); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bc-atelier .wline .head .t { flex: 1; min-width: 0; }
.bc-atelier .wline .head .des { font-weight: 700; margin: 0; }
.bc-atelier .wline .head .ops { color: var(--c-muted); font-size: var(--fs-sm); margin: 2px 0 0; }
.bc-atelier .wline .head .ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
.bc-atelier .wline .facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm);
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.bc-atelier .wline .facts b { font-variant-numeric: tabular-nums; }
.bc-atelier .wline .facts .lab { color: var(--c-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.bc-atelier .wline .facts .warn { color: var(--c-warning-ink); }

.bc-atelier .wline .recon { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.bc-atelier .wline .recon .state { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.bc-atelier .wline .recon .recon-task { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.bc-atelier .wline .recon .acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.bc-atelier .wline .cands { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.bc-atelier .wline .cands li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.bc-atelier .wline .cands .cand-label { min-width: 0; }
.bc-atelier .wline .create-task { margin-top: var(--sp-1); }
.bc-atelier .wline .create-task summary { cursor: pointer; font-size: var(--fs-sm); color: var(--c-primary); }
.bc-atelier .wline .create-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.bc-atelier .wline .create-form label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--c-muted); }
.bc-atelier .wline .create-form input, .bc-atelier .wline .create-form select {
  min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius); font-size: var(--fs-base); background: var(--c-surface); color: var(--c-ink);
}
@media (max-width: 520px) { .bc-atelier .wline .recon .acts .btn { flex: 1; } }

/* LENUTA-F-140 : estimation de charge de la ligne (heures/pièce + ajustement). */
.bc-atelier .wline .line-hours {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line); font-size: var(--fs-sm);
}
.bc-atelier .wline .line-hours .lh-est { color: var(--c-ink-soft); }
.bc-atelier .wline .line-hours .lh-est b { font-variant-numeric: tabular-nums; }
.bc-atelier .wline .line-hours .lh-est .badge { margin-left: 4px; vertical-align: 1px; }
.bc-atelier .wline .line-hours .lh-form { display: flex; gap: var(--sp-2); align-items: center; }
.bc-atelier .wline .line-hours .lh-form input {
  width: 6.5rem; min-height: var(--tap); padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font-size: var(--fs-base); background: var(--c-surface); color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .bc-atelier .wline .line-hours .lh-form { flex: 1; } .bc-atelier .wline .line-hours .lh-form input { flex: 1; width: auto; } }

/* LENUTA-BUG-076 : bande de confirmation finale (pleine largeur sous le fil). */
.bc-atelier .bc-confirm {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary);
  border-radius: var(--dsk-r); background: var(--c-surface-2);
}
.bc-atelier .bc-confirm .txt { flex: 1; min-width: 12rem; font-size: var(--fs-sm); }
.bc-atelier .bc-confirm .ico { font-size: 1.4rem; line-height: 1; }
.bc-atelier .bc-confirm .btn { white-space: nowrap; }
.bc-atelier .bc-confirm--done { border-left-color: var(--c-success); }
.bc-atelier .bc-confirm--wait { border-left-color: var(--c-warning); }
/* LENUTA-F-168 : BC annulé (record conservé). */
.bc-atelier .bc-confirm--cancelled { border-left-color: var(--c-danger); }
@media (max-width: 520px) { .bc-atelier .bc-confirm .btn { width: 100%; } }

/* LENUTA-F-137 (P5) : zone expédition — BL sans prix + facture depuis un BC. */
.bc-atelier .bc-expedition {
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary);
  border-radius: var(--dsk-r); background: var(--c-surface-2);
}
.bc-atelier .bc-expedition .exp-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.bc-atelier .bc-expedition .exp-head h2 { margin: 0; font-size: var(--fs-lg); }
.bc-atelier .exp-table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.bc-atelier .exp-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.bc-atelier .exp-table th.n, .bc-atelier .exp-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.bc-atelier .exp-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-surface); vertical-align: top; }
.bc-atelier .exp-table .des { display: block; font-weight: 600; }
.bc-atelier .exp-table .aff { display: block; font-size: var(--fs-xs); color: var(--c-muted); }
.bc-atelier .exp-table input { width: 5rem; text-align: right; padding: 4px 6px; }
.bc-atelier .exp-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.bc-atelier .exp-docs { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.bc-atelier .exp-doc-col { flex: 1; min-width: 14rem; }
.bc-atelier .exp-doc-col h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.bc-atelier .exp-doc-col ul { list-style: none; margin: 0; padding: 0; }
.bc-atelier .exp-doc-col li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--c-surface); font-size: var(--fs-sm); }
.bc-atelier .exp-doc-col .doc-no { font-weight: 600; }
@media (max-width: 520px) { .bc-atelier .exp-actions .btn { width: 100%; } }

/* Rail. */
.bc-atelier .rail .card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.bc-atelier .client-card { border-left: 4px solid var(--c-warning); }
.bc-atelier .client-card.resolved { border-left-color: var(--c-success); }
.bc-atelier .client-card .name { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-1); }
.bc-atelier .client-card p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-3); }
.bc-atelier .client-card p.small { font-size: var(--fs-xs); }
.bc-atelier .client-card p.ok { color: var(--c-success-ink); font-weight: 600; }
.bc-atelier .client-card form { margin-bottom: var(--sp-2); }
.bc-atelier .client-card .btn { width: 100%; }

.bc-atelier .kvr { margin: 0; }
.bc-atelier .kvr div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; border-bottom: 1px solid var(--c-surface-2); font-size: var(--fs-sm); }
.bc-atelier .kvr div:last-child { border-bottom: 0; }
.bc-atelier .kvr dt { color: var(--c-muted); }
.bc-atelier .kvr dd { margin: 0; font-weight: 600; text-align: right; }
.bc-atelier .kvr dd.pre { white-space: pre-line; }

.bc-atelier .totals-mini div { display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bc-atelier .totals-mini div span:first-child { color: var(--c-muted); }
.bc-atelier .totals-mini div.ttc { border-top: 2px solid var(--c-primary); margin-top: var(--sp-2); padding-top: var(--sp-2); font-weight: 700; font-size: var(--fs-base); }
.bc-atelier .totals-mini div.ttc span:first-child { color: var(--c-ink); }

.bc-atelier .msg-card p { white-space: pre-line; font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }

/* =============================================================================
   LENUTA-F-135 (P3) — estimation coût/délai + réponse client.
   Coût/écart par ligne (colonne travail) · carte « Estimation client » (rail) ·
   zone « Réponse au client » pleine largeur sous le split. Portée .bc-atelier.
   ============================================================================= */

/* Coût par ligne (sous la tâche rapprochée, colonne travail). */
.bc-atelier .wline .recon .line-cost {
  margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-ink-soft);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.bc-atelier .wline .recon .line-cost b { font-variant-numeric: tabular-nums; }
.bc-atelier .wline .recon .line-cost .badge { white-space: normal; }

/* Carte « Estimation client » (rail). */
.bc-atelier .est-card { border-left: 4px solid var(--c-primary); }
.bc-atelier .est-card .est-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: 6px 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.bc-atelier .est-card .est-row .est-lab { color: var(--c-muted); }
.bc-atelier .est-card .est-row .est-val { font-weight: 700; text-align: right; }
.bc-atelier .est-card .est-row.est-sub { padding-top: 0; }
.bc-atelier .est-card .est-row.est-sub .est-val { font-weight: 600; }
.bc-atelier .est-card .est-ecart { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-warning-ink); }
.bc-atelier .est-card .est-ok { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-success-ink); font-weight: 600; }
.bc-atelier .est-card .est-late { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-warning-ink); font-weight: 600; }
.bc-atelier .est-card .est-cap {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-surface-2);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.bc-atelier .est-card .est-cap label { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.bc-atelier .est-card .est-cap-input { display: flex; align-items: center; gap: var(--sp-2); }
.bc-atelier .est-card .est-cap-input input {
  width: 4.5rem; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 8px;
  font: inherit; font-variant-numeric: tabular-nums; background: var(--c-surface); color: var(--c-ink);
}
.bc-atelier .est-card .est-cap-input .unit { font-size: var(--fs-sm); color: var(--c-muted); }
.bc-atelier .est-card .est-cap-input .btn { margin-left: auto; }

/* Zone « Réponse au client » pleine largeur (sous le split). */
.bc-atelier .bc-reply { margin-top: 26px; padding: var(--sp-5); }
.bc-atelier .bc-reply-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.bc-atelier .bc-reply-head h2 { margin: 0; font-size: var(--fs-lg); }
.bc-atelier .bc-reply-meta { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0 0 var(--sp-3); line-height: 1.7; }
.bc-atelier .bc-reply-meta strong { color: var(--c-ink); }
.bc-atelier .bc-reply-form textarea {
  width: 100%; min-height: 16rem; padding: var(--sp-3); border: 1px solid var(--c-line);
  border-radius: var(--dsk-r); font: inherit; line-height: 1.6; resize: vertical;
  background: var(--c-surface); color: var(--c-ink); white-space: pre-wrap;
}
.bc-atelier .bc-reply-form .small { margin: var(--sp-2) 0 var(--sp-3); }
.bc-atelier .bc-reply-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 520px) {
  .bc-atelier .bc-reply-actions { flex-direction: column; }
  .bc-atelier .bc-reply-actions .btn { width: 100%; text-align: center; }
}

/* =============================================================================
   LENUTA-F-151 — Coque v2 mobile du flux import factures historiques (<1024px)
   -----------------------------------------------------------------------------
   Constat audit A2/P0 : la coque v2 (sidebar seule, header + domnav masqués) ne
   vivait que sous @media ≥1024px ; sur iPhone (<1024px) TOUT le flux « mise en
   service » rendait l'ANCIEN header + domnav empilés (~1500px de nav avant le
   contenu). Margo scanne au téléphone → régression majeure.

   Ici, sous `.imp-flux` (posé sur <body> par les pages du flux) :
     1. l'ancien chrome (`.app-header` + `.domnav`) ne paraît JAMAIS, à aucune
        largeur (≥1024px était déjà couvert par `.dsk-clean` plus haut ; on ferme
        le trou <1024px) ;
     2. une topbar compacte olive (retour ‹ + titre contextuel + compteur du lot)
        prend le relais <1024px, sticky en haut (patron `.topbar` des maquettes
        capture.html / liste.html, variante B « Cockpit de lot »).
   Scopé `.imp-flux` → n'affecte PAS les autres pages v2 (BC, scan, factures) ni
   leur comportement mobile actuel (leçon BUG-050/077 : périmètre explicite).
   ============================================================================= */
.imp-flux .app-header,
.imp-flux .domnav { display: none; }

/* LENUTA-F-172 — même traitement pour la page « Enregistrer une facture
   reçue » (scope explicite .fr-depot, leçon BUG-050/077 : on n'élargit pas
   .imp-flux, on nomme le périmètre). La topbar <1024px réutilise le composant
   .imp-topbar ci-dessous (page-agnostique). */
.fr-depot .app-header,
.fr-depot .domnav { display: none; }

.imp-topbar { display: none; }
@media (max-width: 1023px) {
  .imp-topbar {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--c-primary); color: #fff;
    padding: 12px var(--sp-4);
    position: sticky; top: 0; z-index: 40;
  }
  .imp-topbar__back {
    color: #fff; text-decoration: none; font-size: 1.4rem; line-height: 1;
    width: 30px; min-height: 44px; display: flex; align-items: center;
  }
  .imp-topbar__t {
    flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-base);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .imp-topbar__meta {
    white-space: nowrap; font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums; opacity: .95;
  }
}

/* =============================================================================
   LENUTA-F-155 — « Mes anciennes factures » : liste segmentée (variante B
   « Cockpit de lot », maquette liste.html). Remplace la table unique + le hero
   d'upload. Sert sous la coque v2 (desktop.css chargée seulement là). Tout est
   scopé `.ci-liste` / `.ci-liste__head` / `.addmore` → n'affecte pas les autres
   pages (leçon BUG-050/077 : périmètre explicite ; `.row`/`.card`/`.st` sont des
   noms génériques, donc STRICTEMENT scopés `.ci-liste`).
   Palette = tokens app.css (identiques à la maquette : --c-primary olive, etc.).
   ============================================================================= */

/* ── En-tête mission : intro (gauche) + carte d'avancement (droite) ───────── */
.ci-liste__head {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.ci-liste__intro { flex: 1; min-width: 240px; }
.ci-liste__intro h1 { font-size: 1.45rem; line-height: 1.25; margin: 2px 0 0; }
.ci-liste__sub { color: var(--c-muted); font-size: var(--fs-sm); margin-top: 4px; max-width: 52ch; }

/* ── Carte d'avancement : LE compteur unique de l'écran ───────────────────── */
.ci-progress {
  margin-left: auto; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); min-width: 270px;
}
.ci-progress__nums { display: flex; align-items: baseline; gap: 6px; }
.ci-progress__nums b { font-size: 1.85rem; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.ci-progress__nums span { color: var(--c-muted); font-size: var(--fs-sm); }
.ci-progress__bar {
  height: 8px; background: var(--c-primary-100); border-radius: var(--radius-pill);
  margin-top: var(--sp-2); overflow: hidden;
}
.ci-progress__bar i { display: block; height: 100%; background: var(--c-primary); transition: width .3s ease; }
.ci-progress__next { margin-top: var(--sp-3); }
.ci-progress__cta { width: 100%; justify-content: center; }
.ci-progress__done { margin-top: var(--sp-3); color: var(--c-success); font-size: var(--fs-sm); font-weight: 600; }

/* ── Bandeau d'ajout discret (l'upload n'est plus le héros) ────────────────── */
.addmore {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); background: var(--c-surface-2);
}
.addmore--over { border-color: var(--c-primary); background: var(--c-primary-50); }
.addmore__t { font-size: var(--fs-sm); color: var(--c-ink-soft); flex: 1; min-width: 200px; }
.addmore__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; position: relative; }
.addmore__formats { flex-basis: 100%; margin: 0; font-size: 0.78rem; }
.ci-upload-progress { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }

/* Feedback « dernier dépôt » (compact) après un upload. */
.ci-lastup { background: var(--c-primary-50); border: 1px solid var(--c-primary-100);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.ci-lastup__t { font-weight: 600; font-size: var(--fs-sm); margin: 0 0 var(--sp-1); }
.ci-lastup__list { list-style: none; margin: 0; padding: 0; }
.ci-lastup__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 2px 0; }
.ci-lastup__name { font-weight: 500; }

.ci-empty { background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-5); text-align: center; }
.ci-empty p { margin: 0 0 var(--sp-2); }

/* ── Sections par statut : l'œil trie tout seul ───────────────────────────── */
.ci-liste .grp { margin-bottom: var(--sp-5); }
.ci-liste .grp > h2 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-ink-soft); display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ci-liste .grp > h2 .n {
  background: var(--c-primary-100); color: var(--c-primary-700);
  border-radius: var(--radius-pill); font-size: 0.75rem; padding: 1px 9px; font-weight: 600;
}
.ci-liste .grp.warn > h2 .n { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.ci-liste .grp .toggle {
  margin-left: auto; background: none; border: none; color: var(--c-primary);
  font-weight: 600; text-decoration: underline; font-size: var(--fs-sm); min-height: 32px;
}
.ci-liste .grp__filet { font-size: 0.8rem; color: var(--c-muted); margin-top: var(--sp-2); }
.ci-liste .grp__empty { font-size: var(--fs-sm); padding: var(--sp-2) 0; }

.ci-liste .card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
}

/* ── Ligne de facture (grille) ────────────────────────────────────────────── */
.ci-liste .row {
  display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 92px 112px auto;
  gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line); min-height: 60px;
}
.ci-liste .row:last-child { border-bottom: none; }
.ci-liste .row.muted { background: var(--c-surface-2); }
.ci-liste .row.muted .file, .ci-liste .row.muted .cli { color: var(--c-muted); font-weight: 400; }
.ci-liste .row .file { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-liste .row .file small { display: block; font-weight: 400; color: var(--c-muted); font-size: 0.75rem; }
.ci-liste .row .cli { font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ci-liste .row .num, .ci-liste .row .ttc { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ci-liste .row .act { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.ci-liste .row .act form { margin: 0; }
.ci-liste .row .meta { display: none; }

/* ── Puces d'état ─────────────────────────────────────────────────────────── */
.ci-liste .st {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600;
  border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap;
}
.ci-liste .st.attente { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-line); }
.ci-liste .st.doute { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.ci-liste .st.pb { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.ci-liste .st.ok { background: var(--c-primary-50); color: var(--c-success-ink); }
.ci-liste .st.ecartee { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
/* LENUTA-F-156 : lecture figée (anti-zombie) — teinte alerte, distincte de
   « attente » (neutre) pour signaler que quelque chose ne va pas. */
.ci-liste .st.zombie { background: var(--c-warning-bg); color: var(--c-warning-ink); border: 1px solid var(--c-warning-ink); }
/* LENUTA-F-156 : détail d'erreur EN CLAIR à côté du badge (jamais en title=). */
.ci-liste .st-detail { display: block; width: 100%; font-size: 0.78rem; font-weight: 400; color: var(--c-muted); margin-top: 3px; }
/* LENUTA-F-156 : « Re-scanner » = input fichier caché déclenché par le label. */
.ci-liste .rescan { margin: 0; }
.ci-liste .rescan input[type="file"] { display: none; }
.ci-liste .rescan label { cursor: pointer; margin: 0; }

/* Lien-bouton « Retirer » (danger discret, sans fond). */
.ci-liste .btn-link-danger {
  background: none; border: none; color: var(--c-danger); text-decoration: underline;
  font-size: var(--fs-sm); padding: 0; min-height: 44px;
}

/* ── Pied de « Traitées » : bilan + garantie de préservation ──────────────── */
.ci-liste .donefoot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2);
  border-top: 1px solid var(--c-line); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--c-muted);
}
.ci-liste .donefoot b { color: var(--c-ink-soft); }

/* ── LENUTA-F-157 : dialogue de confirmation d'effacement + toast bilan ────── */
.ci-liste .purge-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); background: rgba(20, 18, 12, 0.55);
}
.ci-liste .purge-card {
  background: var(--c-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--c-line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  padding: var(--sp-5); max-width: 460px; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-3);
  color: var(--c-ink); font-size: var(--fs-sm);
}
.ci-liste .purge-card h3 { margin: 0; font-size: 1.15rem; color: var(--c-ink); }
.ci-liste .purge-guarantee {
  margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--c-success-bg, #e7f3ea); color: var(--c-success-ink, #1f6b3b);
  font-weight: 600;
}
.ci-liste .purge-scope { margin: 0; }
.ci-liste .purge-card b { color: var(--c-ink); }
.ci-liste .purge-opt {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--c-danger-bg); color: var(--c-danger-ink); cursor: pointer;
}
.ci-liste .purge-opt input { margin-top: 2px; flex: none; }
.ci-liste .purge-actions {
  display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2);
}
.ci-liste .purge-actions form { margin: 0; }
.ci-liste .ci-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--radius); border: 1px solid var(--c-success-ink, #1f6b3b);
  background: var(--c-success-bg, #e7f3ea); color: var(--c-success-ink, #1f6b3b);
  font-size: var(--fs-sm);
}
.ci-liste .ci-toast b { color: inherit; }
.ci-liste .ci-toast__x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: inherit;
}

/* ── Mobile (<1024px) : lignes à 2 niveaux (fichier + méta) ────────────────── */
@media (max-width: 1023px) {
  .ci-liste__head { gap: var(--sp-3); }
  .ci-progress { min-width: 100%; margin-left: 0; }
  /* Lignes empilées : fichier → méta → actions. Les actions passent en pleine
     largeur SOUS la méta (et non à droite) — une ligne peut porter jusqu'à 3
     actions (« À reprendre »), qui écraseraient sinon la méta à un caractère par
     ligne dans une grille 2 colonnes. */
  .ci-liste .row {
    grid-template-columns: 1fr;
    grid-template-areas: "file" "meta" "act";
    row-gap: var(--sp-2);
  }
  .ci-liste .row .file { grid-area: file; white-space: normal; }
  .ci-liste .row .cli, .ci-liste .row .num, .ci-liste .row .ttc { display: none; }
  .ci-liste .row .meta { grid-area: meta; display: block; font-size: 0.8rem; color: var(--c-muted); }
  .ci-liste .row .act { grid-area: act; justify-content: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════════
   LENUTA-F-165 — Composant document scanné réutilisable `.docv`
   Source UNIQUE du viewer « document d'origine » (markup : _components/
   document_viewer.html · comportement : static/js/doc_viewer.js). Décodé du
   cockpit factures F-152 (jadis inliné + scopé `.revue-cockpit`) pour être
   réutilisé par la revue facture cliente ET les pages bon de commande (F-165),
   sans coupler au cockpit. Look autonome (panneau sombre) — les hôtes n'ajoutent
   que des deltas (positionnement 50 % sticky du cockpit ; hauteur de carte du
   rail BC). Tokens app.css uniquement.
   ══════════════════════════════════════════════════════════════════════════ */
.docv {
  display: flex; flex-direction: column; background: #26291f;
  border-radius: var(--radius); overflow: hidden;
}
.docv-tools {
  display: flex; gap: 6px; align-items: center; padding: 8px 12px; color: #e8e6da;
}
.docv-fname {
  margin-right: auto; font-family: var(--font-mono); font-size: 12.5px; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docv-btn {
  width: 34px; height: 34px; background: transparent;
  border: 1px solid rgba(255,255,255,.25); color: #e8e6da; border-radius: var(--radius);
  cursor: pointer; font-size: 15px; line-height: 1; flex: none;
}
.docv-btn:hover { background: rgba(255,255,255,.1); }
.docv-open {
  color: #e8e6da; text-decoration: underline; font-size: 12.5px; white-space: nowrap;
  padding: 0 4px; opacity: .85;
}
.docv-open:hover { opacity: 1; }
.docv-view { flex: 1; overflow: auto; padding: 12px; cursor: grab; touch-action: none; }
.docv-view.grabbing { cursor: grabbing; }
.docv-canvas {
  width: 100%; min-height: 100%; transform-origin: top center;
  transition: transform .08s linear; display: flex; justify-content: center;
}
.docv-media { display: block; width: min(100%, 560px); border-radius: 3px; background: #fdfcf7; }
embed.docv-media { height: 60vh; }
img.docv-media { height: auto; box-shadow: 0 2px 14px rgba(0,0,0,.4); }
.docv:fullscreen { background: #26291f; }
.docv:fullscreen .docv-canvas { align-items: flex-start; }
.docv:fullscreen embed.docv-media { height: calc(100vh - 60px); }
.docv:fullscreen img.docv-media { width: min(100%, 900px); }

/* LENUTA-BUG-085 — « document indisponible » (fichier original disparu du
   stockage). Remplace un 404 dur / une éjection accueil par un état honnête. */
.docv-unavailable {
  max-width: 420px; margin: 6vh auto; text-align: center; color: #e9e7dc;
  padding: 24px 20px; border: 1px dashed rgba(255,255,255,.22); border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.docv-unavailable .du-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.docv-unavailable .du-msg { font-size: .9rem; line-height: 1.45; color: #c8c6ba; margin: 0 0 18px; }
.docv-unavailable .du-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.docv-unavailable .du-actions form { margin: 0; }
.docv-unavailable .du-actions .btn { cursor: pointer; }
.docv-unavailable .du-actions label.btn { display: inline-flex; align-items: center; }
/* Format non rendable inline (docx / inconnu) : renvoi vers l'ouverture directe. */
.docv-noinline {
  text-align: center; color: #e9e7dc; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 4vh auto;
}
.docv-noinline-t { font-weight: 600; margin: 0; }
.docv-noinline-m { font-size: .9rem; color: #c8c6ba; margin: 0 0 8px; max-width: 34ch; }

/* ══════════════════════════════════════════════════════════════════════════
   LENUTA-F-152 — Page de vérification v2 « Cockpit de lot » (maquette B)
   Scopé `.revue-cockpit` (posé sur <body> par factures_clients_revue.html).
   La coque v2 est verrouillée sur cette route → desktop.css toujours chargé.
   Tokens : app.css (:root). `--c-accent-soft` absent d'app.css → fallback.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cockpit plein écran : PAS de sidebar — le lot EST le contexte (mockup B).
   On neutralise la coque (sidebar + paddings dsk-clean) à toutes largeurs. */
.revue-cockpit .app-header,
.revue-cockpit .domnav { display: none; }
.revue-cockpit .app-shell { display: block; }
.revue-cockpit .app-shell__main,
.revue-cockpit .lenuta-main { padding: 0; max-width: none; margin: 0; }
@media (min-width: 1024px) {
  .revue-cockpit .dsk-sidebar { display: none; }
  .revue-cockpit .app-shell__main,
  .revue-cockpit .lenuta-main { padding: 0; }
}

/* [Z0] Pellicule du lot (haut, sticky, fond olive) */
.revue-cockpit .reel {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-primary); color: #fff;
  padding: 8px 12px; display: flex; align-items: center; gap: 10px; overflow: hidden;
}
.revue-cockpit .reel .quit {
  color: #fff; text-decoration: none; font-size: var(--fs-sm, 14px);
  font-weight: 600; white-space: nowrap; opacity: .9; padding: 8px 6px;
}
.revue-cockpit .reel .strip {
  flex: 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.revue-cockpit .reel .strip::-webkit-scrollbar { display: none; }
.revue-cockpit .frame {
  flex: none; width: 52px; height: 64px; border-radius: 6px;
  border: 2px solid transparent; background: rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; color: #fff; text-decoration: none;
  overflow: hidden; text-align: center; line-height: 1.15;
}
.revue-cockpit .frame .ic { font-size: 15px; }
.revue-cockpit .frame.done { opacity: .45; }
.revue-cockpit .frame.cur { border-color: #fff; background: rgba(255,255,255,.25); font-weight: 700; }
.revue-cockpit .frame.warn .ic { color: #ffd88a; }
.revue-cockpit .frame.err { background: rgba(179,38,30,.35); }
.revue-cockpit .reel .score {
  white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums;
}
.revue-cockpit .reel .score b { font-size: 15px; }

/* Bandeau d'erreur serveur (réutilise le style existant, marge cockpit) */
.revue-cockpit .review-banner { margin: 10px 16px 0; }

/* [Z1] Zone centrale : doc gauche 50% sticky + panneau décisions droite */
.revue-cockpit .stage {
  display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 80px);
}
/* LENUTA-F-165 : le viewer est désormais le composant partagé `.docv`
   (_components/document_viewer.html + doc_viewer.js) ; son look complet (dark,
   outils, canvas, media, fallback BUG-085) vit dans le bloc `.docv*` autonome
   ci-dessous. Le cockpit ne garde ici que les DELTAS de positionnement : panneau
   50 % sticky pleine hauteur (sans coins arrondis), hauteurs d'embed calées sur
   le viewport, sizing plein écran. Rien de visuel dupliqué. */
.revue-cockpit .docv {
  position: sticky; top: 80px; height: calc(100vh - 80px); border-radius: 0;
}
.revue-cockpit embed.docv-media { height: calc(100vh - 140px); }
.revue-cockpit .docv:fullscreen embed.docv-media { height: calc(100vh - 60px); }

/* Panneau décisions : table de travail dense, tout visible d'un coup */
.revue-cockpit .deck {
  padding: 16px 18px 120px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.revue-cockpit .deck h1 {
  font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--c-ink);
}
.revue-cockpit .deck-form { display: flex; flex-direction: column; gap: 14px; }
.revue-cockpit .badge {
  font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 10px;
}
.revue-cockpit .badge.warn { background: var(--c-accent-soft, #f3ead6); color: var(--c-warning); }
.revue-cockpit .hintwarn { font-size: 13px; color: var(--c-warning); margin: -6px 0 0; }

.revue-cockpit .zone {
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface);
}
.revue-cockpit .zone > header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--c-line); background: var(--c-surface-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.revue-cockpit .zone > header h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-soft); flex: 1; margin: 0;
}
.revue-cockpit .zone > header .st { font-size: 12.5px; font-weight: 600; color: var(--c-muted); }
.revue-cockpit .zone > header .st.ok { color: var(--c-success); }
.revue-cockpit .zone .in { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* [Z3] Client : bascule rattacher/créer en segmenté + fiche compacte inline */
.revue-cockpit .cli-seg {
  display: flex; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden;
}
.revue-cockpit .cli-seg button {
  flex: 1; padding: 11px 8px; background: #fff; border: none; font-size: 14px;
  color: var(--c-muted); cursor: pointer;
}
.revue-cockpit .cli-seg button.on { background: var(--c-primary); color: #fff; font-weight: 600; }
.revue-cockpit .cli-fiche {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--c-primary-100);
  background: var(--c-primary-50); border-radius: var(--radius); padding: 10px 12px;
}
.revue-cockpit .cli-fiche .av {
  width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--c-primary);
  color: #fff; display: grid; place-items: center; font-weight: 700;
}
.revue-cockpit .cli-fiche .who b { display: block; font-size: 15px; }
.revue-cockpit .cli-fiche .who small { color: var(--c-muted); font-size: 12.5px; }
.revue-cockpit .cli-fiche .sw {
  margin-left: auto; background: none; border: none; color: var(--c-primary);
  font-weight: 600; text-decoration: underline; font-size: 13px; cursor: pointer;
}
.revue-cockpit .hintline { font-size: 12.5px; color: var(--c-muted); }

/* Grille champs 2 col compacte */
.revue-cockpit .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.revue-cockpit .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.revue-cockpit .f label { font-size: 12px; font-weight: 600; color: var(--c-ink-soft); }
.revue-cockpit .f label .doubt { color: var(--c-warning); }
.revue-cockpit .f input {
  height: 38px; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: 0 9px; background: #fff; min-width: 0; font: inherit; color: var(--c-ink);
}
.revue-cockpit .f.doubt input { border-color: var(--c-accent); background: var(--c-accent-soft, #f3ead6); }

/* [Z4] Tâches : lignes de facture → catalogue, table éditable large */
.revue-cockpit .trow {
  display: grid; grid-template-columns: 24px 1fr 92px 148px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--c-line);
}
.revue-cockpit .trow:last-child { border-bottom: none; }
.revue-cockpit .trow input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--c-primary); }
.revue-cockpit .trow .d { font-size: 14px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.revue-cockpit .trow .d input.dline {
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 6px;
  font: inherit; background: transparent; min-width: 0; color: var(--c-ink);
}
.revue-cockpit .trow .d input.dline:focus { border-color: var(--c-line-strong); background: #fff; outline: none; }
.revue-cockpit .trow .d small { color: var(--c-success); font-size: 11.5px; font-weight: 600; }
.revue-cockpit .trow input.px {
  height: 36px; text-align: right; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: 0 8px; font-variant-numeric: tabular-nums; min-width: 0; font: inherit;
}
.revue-cockpit .trow select {
  height: 36px; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: #fff; padding: 0 6px; font-size: 13px; min-width: 0;
}
.revue-cockpit .trow.off .d input.dline,
.revue-cockpit .trow.off input,
.revue-cockpit .trow.off select { opacity: .5; }
.revue-cockpit .trow.off .d small { opacity: 1; }

/* [Z5] Montants : bande kv horizontale */
.revue-cockpit .sums { display: flex; gap: 8px; flex-wrap: wrap; }
.revue-cockpit .sums .s {
  flex: 1; min-width: 96px; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 8px 10px; background: var(--c-surface-2);
}
.revue-cockpit .sums .s label { display: block; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.revue-cockpit .sums .s input {
  width: 100%; border: none; background: transparent; font-size: 15.5px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--c-ink);
}
.revue-cockpit .sums .s input:focus { outline: 1px solid var(--c-line-strong); border-radius: 4px; }
.revue-cockpit .sums .s.ttc { border-color: var(--c-primary); background: var(--c-primary-50); }

/* [Z6] Passer cette facture */
.revue-cockpit .btn-skip {
  align-self: flex-start; background: transparent; border: none; color: var(--c-muted);
  text-decoration: underline; font-size: 13px; cursor: pointer; padding: 4px 0;
}

/* [Z7] Barre décision fixe : impact détaillé + double CTA */
.revue-cockpit .decide {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--c-surface);
  border-top: 2px solid var(--c-primary); padding: 10px 16px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.revue-cockpit .decide .impact {
  flex: 1; min-width: 220px; font-size: 12.5px; color: var(--c-ink-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.revue-cockpit .decide .impact b { color: var(--c-primary); }
.revue-cockpit .decide .impact .ln { display: block; }
.revue-cockpit .decide .impact .ln::before { content: "＋ "; color: var(--c-success); font-weight: 700; }
.revue-cockpit .decide .btn {
  border-radius: var(--radius); border: 1px solid transparent; min-height: var(--tap);
  padding: 0 16px; font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.revue-cockpit .decide .btn-primary { background: var(--c-primary); color: #fff; }
.revue-cockpit .decide .btn-ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-ink-soft); }

/* [Z8] iPhone : pellicule reste, doc en volet, zones empilées */
@media (max-width: 1023px) {
  .revue-cockpit .stage { display: block; }
  .revue-cockpit .docv { position: sticky; top: 80px; height: 34vh; z-index: 8; }
  .revue-cockpit embed.docv-media { height: calc(34vh - 60px); }
  .revue-cockpit .docv-media { width: min(100%, 400px); }
  .revue-cockpit .deck { padding: 12px 12px 150px; }
  .revue-cockpit .g2 { grid-template-columns: 1fr; }
  .revue-cockpit .trow { grid-template-columns: 24px 1fr 84px; grid-auto-rows: auto; }
  .revue-cockpit .trow select { grid-column: 2 / 4; }
  .revue-cockpit .decide { padding: 10px 12px; }
  .revue-cockpit .decide .impact { font-size: 11.5px; }
  .revue-cockpit .decide .impact .ln + .ln { display: none; } /* 1 seule ligne d'impact */
}

/* LENUTA-F-152 — addenda revue testeur/architecte : messages pipeline visibles,
   doute laiton sur les montants sensibles. (L'escape-hatch document `.docv-open`
   est désormais stylé par le composant partagé `.docv`, F-165.) */
.revue-cockpit .hintwarn-list {
  margin: -4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--c-warning);
  display: flex; flex-direction: column; gap: 2px;
}
.revue-cockpit .sums .s.doubt {
  border-color: var(--c-accent); background: var(--c-accent-soft, #f3ead6);
}
.revue-cockpit .sums .s.doubt label { color: var(--c-warning); }

/* ── LENUTA-F-154 — Écran de fin de lot (récap) ─────────────────────────────
   Servi sous coque v2 (imp-flux) dans la colonne .dsk-content (sidebar à gauche
   ≥1024px). Bilan des validations réelles du lot + relances vers Contacts /
   Catalogue / liste. Tokens partagés (app.css) — aucune couleur en dur. */
.ci-recap {
  max-width: 760px; margin: 0 auto; padding: 28px 20px 48px;
  display: flex; flex-direction: column; gap: 24px;
}
.ci-recap__head { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ci-recap__seal {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-success-bg); color: var(--c-success); font-size: 28px; font-weight: 700;
  margin-bottom: 4px;
}
.ci-recap__head .crumb { font-size: 12px; color: var(--c-ink-soft); margin: 0; }
.ci-recap__head h1 { font-size: 24px; line-height: 1.2; margin: 0; color: var(--c-ink); }
.ci-recap__sub { font-size: 14px; color: var(--c-ink-soft); margin: 0; max-width: 46ch; }
.ci-recap__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.ci-stat {
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.ci-stat b { font-size: 30px; line-height: 1; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.ci-stat span { font-size: 13px; color: var(--c-ink-soft); }
.ci-stat--amount { grid-column: 1 / -1; background: var(--c-primary-50); border-color: var(--c-primary-100); }
.ci-stat--amount b { color: var(--c-primary-700); }
.ci-recap__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ci-recap__link {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: #fff; border: 1px solid var(--c-line-strong); border-radius: 12px;
  padding: 14px 16px; color: var(--c-ink); transition: border-color .12s, background .12s;
}
.ci-recap__link:hover { border-color: var(--c-primary); background: var(--c-primary-50); }
.ci-recap__link .ic { font-size: 20px; }
.ci-recap__link .tx { display: flex; flex-direction: column; }
.ci-recap__link .tx b { font-size: 14px; }
.ci-recap__link .tx small { font-size: 11.5px; color: var(--c-ink-soft); }
.ci-recap__link--primary { border-color: var(--c-primary); background: var(--c-primary-50); }
@media (max-width: 640px) {
  .ci-recap { padding: 18px 14px 40px; gap: 18px; }
  .ci-recap__grid { grid-template-columns: 1fr; }
  .ci-recap__links { grid-template-columns: 1fr; }
  .ci-recap__head h1 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LENUTA-F-174 — cockpit Bons de commande (master–detail + modale scan).
   Scopé .bc-cockpit ; primitives transverses (.btn/.badge/.lenuta-alert)
   restent dans app.css. Mockup validé Stef : docs/mockups/
   LENUTA-F-174-bons-commande-refonte.html. Flat (pas d'ombre/gradient).
   ═══════════════════════════════════════════════════════════════════════ */
.bc-cockpit { max-width: 1400px; }
.bc-cockpit [x-cloak] { display: none !important; }
.bcc-main-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.bcc-main-head h2 { margin: 0; }

/* ── Barre outils ── */
.bcc-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.bcc-toolbar input[type="search"],
.bcc-toolbar input[type="date"],
.bcc-toolbar select {
  width: auto; /* bat le width:100% global des contrôles (app.css §Contrôles) */
  min-height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: var(--fs-sm);
}
.bcc-toolbar input[type="search"] { flex: 1 1 190px; min-width: 150px; }
.bcc-toolbar input[type="date"] { min-width: 8.5rem; }
.bcc-toolbar select { min-width: 8rem; }
.bcc-seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; margin-left: auto; }
.bcc-seg a {
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-muted); text-decoration: none; background: var(--c-surface);
}
.bcc-seg a + a { border-left: 1px solid var(--c-line); }
.bcc-seg a.on { background: var(--c-primary-50); color: var(--c-primary); }

/* ── Split master–detail (stacké <900px) ── */
.bcc-split { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 899px) { .bcc-split { grid-template-columns: 1fr; } }

/* ── Liste (master) ── */
.bcc-list { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--dsk-r); overflow: hidden; }
.bcc-row {
  display: block; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line); border-left: 3px solid transparent;
  text-decoration: none; color: var(--c-ink); cursor: pointer;
}
.bcc-row:hover { background: var(--c-surface-2); color: var(--c-ink); }
.bcc-row.sel { background: var(--c-primary-50); border-left-color: var(--c-primary); }
.bcc-row .l1 { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; }
.bcc-row .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.bcc-row .client { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.bcc-row .tot { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--c-ink-soft); white-space: nowrap; }
.bcc-row .l2 { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.bcc-empty-list { padding: var(--sp-5) var(--sp-4); margin: 0; }

/* Micro-stepper 5 points (liste) */
.mstep { display: inline-flex; align-items: center; gap: 4px; }
.mstep i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-neutral-bg); border: 1px solid var(--c-line-strong); }
.mstep i.done { background: var(--c-primary-100); border-color: var(--c-primary); }
.mstep i.cur { background: var(--c-primary); border-color: var(--c-primary); }
.mstep--action i.cur { background: var(--c-warning); border-color: var(--c-warning); }
.mstep--blocked i.cur { background: var(--c-danger); border-color: var(--c-danger); }
.mstep--settled i, .mstep--settled i.done { background: var(--c-success); border-color: var(--c-success); }
.bc-cockpit .step-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.bc-cockpit .step-label--action { color: var(--c-warning-ink); }
.bc-cockpit .step-label--blocked { color: var(--c-danger-ink); }
.bc-cockpit .step-label--settled { color: var(--c-success-ink); }

/* Badges délai */
.bc-cockpit .due { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; padding: 1px var(--sp-2); border-radius: var(--radius-pill); white-space: nowrap; }
.bc-cockpit .due--ok { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
.bc-cockpit .due--late { background: var(--c-danger-bg); color: var(--c-danger-ink); font-weight: 700; }
/* En attente (LENUTA-F-189) : retard suspendu, ton ambre. */
.bc-cockpit .due--waiting { background: var(--c-warning-bg); color: var(--c-warning-ink); font-weight: 600; }
/* Badge d'attente du panneau détail (scope .bc-cockpit, pas .prod). */
.bc-cockpit .badge--waiting { background: var(--c-warning-bg); color: var(--c-warning-ink); }

.bcc-legend { display: flex; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.bcc-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

/* ── Panneau détail ── */
.bcc-placeholder, .bcc-detail { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--dsk-r); padding: var(--sp-5); min-width: 0; }
.bcc-placeholder p { margin: 0; }
.bcc-crumb { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.bcc-crumb a { color: var(--c-muted); }
.bcc-crumb .sep { margin: 0 var(--sp-1); color: var(--c-line-strong); }
.bcc-crumb .here { color: var(--c-ink); font-weight: 600; }
.bcc-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.bcc-head h3 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.bcc-sub { color: var(--c-muted); font-size: var(--fs-sm); margin: 2px 0 0; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.bcc-amount { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcc-amount .unit { font-weight: 400; font-size: var(--fs-xs); color: var(--c-muted); }

/* Stepper détail (cycle réel) — vertical <600px */
.bcc-stepper { display: flex; margin: var(--sp-4) 0 var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.bcc-stepper .st {
  flex: 1 1 0; min-width: 0; padding: var(--sp-2) var(--sp-3);
  border: 0; border-left: 1px solid var(--c-line);
  font: inherit; font-size: var(--fs-xs); line-height: 1.35; text-align: left;
  background: var(--c-surface-2); color: var(--c-muted); text-decoration: none; display: block;
}
.bcc-stepper .st:first-child { border-left: 0; }
.bcc-stepper .st b { display: block; font-size: var(--fs-sm); color: inherit; font-weight: 600; }
.bcc-stepper .st .doc { display: block; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 2px; }
.bcc-stepper .st.done { background: var(--c-primary-50); color: var(--c-primary); cursor: pointer; }
.bcc-stepper .st.done:hover { background: var(--c-primary-100); }
.bcc-stepper .st.cur { background: var(--c-primary); color: #fff; }
.bcc-stepper .st.todo { background: var(--c-surface); color: var(--c-neutral-ink); }
.bcc-stepper .st.todo b { color: var(--c-line-strong); }
.bcc-stepper--cancelled .st.done, .bcc-stepper--cancelled .st.cur { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
@media (max-width: 599px) {
  .bcc-stepper { flex-direction: column; }
  .bcc-stepper .st { border-left: 0; border-top: 1px solid var(--c-line); }
  .bcc-stepper .st:first-child { border-top: 0; }
}

/* Onglets */
.bcc-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-line-strong); margin-bottom: var(--sp-4); }
.bcc-tabs button {
  border: 0; background: transparent; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.bcc-tabs button.on { color: var(--c-primary); border-bottom-color: var(--c-accent); }

/* Lignes */
.bcc-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bcc-lines th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line-strong); }
.bcc-lines td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.bcc-lines tbody tr:nth-child(even) td { background: var(--c-surface-2); }
.bcc-lines .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcc-lines .ref { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-family: var(--font-mono); }
.bcc-lines tfoot td { font-weight: 700; border-bottom: 0; }

/* Documents (hub navigation) */
.bcc-doccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
.bcc-doccard { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.bcc-doccard .kind { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); }
.bcc-doccard .ref { font-weight: 700; margin: 2px 0; }
.bcc-doccard .meta { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.bcc-doccard .acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.bcc-doccard--missing { border-style: dashed; color: var(--c-muted); background: var(--c-surface-2); }

/* Historique (timeline) */
.bcc-tl { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--c-line-strong); }
.bcc-tl li { position: relative; padding: 0 0 var(--sp-4) var(--sp-3); font-size: var(--fs-sm); }
.bcc-tl li::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 5px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary-100); border: 2px solid var(--c-primary);
}
.bcc-tl .when { font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }

.bcc-detail-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }

/* ── Modale scan ── */
.bcc-overlay {
  position: fixed; inset: 0; background: rgba(32, 35, 29, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-6) var(--sp-4); z-index: 60; overflow-y: auto;
}
.bcc-modal {
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--dsk-r); width: min(680px, 100%); padding: var(--sp-5);
}
.bcc-modal .mhead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bcc-modal .mhead h3 { margin: 0; font-size: var(--fs-lg); }
.bcc-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.bcc-dropzone {
  border: 2px dashed var(--c-line-strong); border-radius: var(--dsk-r);
  padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--c-muted);
  background: var(--c-surface-2); cursor: pointer;
}
.bcc-dropzone.over { border-color: var(--c-primary); background: var(--c-primary-50); }
.bcc-dropzone .big { font-size: var(--fs-lg); color: var(--c-ink-soft); font-weight: 600; margin-bottom: var(--sp-1); }
.bcc-dropzone .hint { font-size: var(--fs-xs); }
.bcc-scanwait {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface-2); font-size: var(--fs-sm);
}
.bcc-scanwait .spin {
  width: 14px; height: 14px; border: 2px solid var(--c-primary-100);
  border-top-color: var(--c-primary); border-radius: 50%;
  animation: bcc-spin 0.9s linear infinite; flex: 0 0 auto;
}
@keyframes bcc-spin { to { transform: rotate(360deg); } }
.bcc-verify-note { font-size: var(--fs-sm); color: var(--c-warning-ink); background: var(--c-warning-bg); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); }
.bcc-modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); }