/* =============================================================================
   Lenuta — Design system (server-rendered, sans framework CSS).
   Refonte présentation pilote Margo : palette sobre/premium, échelle d'espacement
   et typographie cohérentes, composants réutilisables.

   Principe : ce fichier est un SURENSEMBLE. Il style aussi bien les classes
   canoniques (.btn, .badge, .data-table) que les variantes historiques
   (.lenuta-btn, .btn--primary, .badge-active, .status-ocr_review, …) pour
   couvrir toutes les pages sans renommer les classes dans les templates
   (donc sans toucher la logique HTMX/Alpine).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs — crème / neutres chauds (papeterie premium, inspiration Margo) */
  --c-bg:          #f4f2ea;   /* fond crème chaud */
  --c-surface:     #ffffff;
  --c-surface-2:   #f8f6ef;   /* lignes alternées, pieds de tableau */
  --c-ink:         #20231d;   /* texte principal (~13:1 sur blanc) */
  --c-ink-soft:    #3d4136;
  --c-muted:       #5e6356;   /* texte secondaire (AA sur blanc & crème) */
  --c-line:        #e7e3d8;   /* filets fins */
  --c-line-strong: #d3cdbd;

  /* Marque — teal-turquoise Méditerranée (Ithaki) */
  --c-primary:      #0a6060;
  --c-primary-700:  #073f3f;  /* survol / actif */
  --c-primary-50:   #e2f5f5;  /* fonds teintés (info, nav active) */
  --c-primary-100:  #b8e6e6;

  /* Accent turquoise vif — décoratif uniquement (filets, soulignés), jamais en texte */
  --c-accent:      #0d9488;

  /* Sémantique */
  --c-success:     #1e7a3a;  --c-success-bg: #e7f3ec;  --c-success-ink: #176231;
  --c-warning:     #8a5a00;  --c-warning-bg: #fbeecb;  --c-warning-ink: #7a4f00;
  --c-danger:      #b3261e;  --c-danger-bg:  #fbe9e7;  --c-danger-ink:  #8f1d17;
  --c-info-bg:     var(--c-primary-50); --c-info-ink: var(--c-primary);
  --c-neutral-bg:  #ecebe2;  --c-neutral-ink: #5e6356;

  /* Focus visible (a11y) */
  --c-focus:       #2563a8;

  /* Rayons */
  --radius-sm:  5px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* Espacement (échelle 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.75rem;
  --gap: var(--sp-4); /* alias historique */

  /* Typographie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --lh-tight: 1.25;
  --lh:       1.55;

  /* Élévation */
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 23, 28, 0.08);
  --shadow-overlay: 0 24px 60px rgba(20, 23, 28, 0.28);

  /* Layout */
  --maxw: 1080px;
  --tap: 44px; /* cible tactile mini (iPad) */
}

/* -----------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[x-cloak] { display: none !important; } /* évite le flash des éléments Alpine avant init */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); color: var(--c-ink); }
h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
h3 { font-size: var(--fs-lg); font-weight: 600; margin: var(--sp-6) 0 var(--sp-3); }
h4 { font-size: var(--fs-base); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }

a { color: var(--c-primary); text-decoration-color: var(--c-line-strong); text-underline-offset: 2px; }
a:hover { color: var(--c-primary-700); }

p { margin: 0 0 var(--sp-4); }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
  color: var(--c-ink-soft);
}
pre { overflow-x: auto; }

.muted, .subtle, .hint { color: var(--c-muted); }
.hint { font-size: var(--fs-sm); }
.warn { color: var(--c-danger-ink); }

/* Focus visible homogène (a11y) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   3. En-tête applicatif + navigation
   -------------------------------------------------------------------------- */
.app-header,
.lenuta-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-header { border-top: 3px solid var(--c-primary); }

/* LENUTA-F-180 — lien footer /confidentialite (gardé derrière un flag, cf. base.html). */
.app-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4);
  text-align: center;
}
.app-footer a {
  color: var(--c-muted);
  font-size: 0.85rem;
}

.app-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.app-brand-h { margin: 0; line-height: 1; }
.app-brand,
.lenuta-brand {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  text-decoration: none;
}
.app-brand:hover { color: var(--c-ink); }
.app-brand__mark { color: var(--c-primary); }

.app-nav {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-left: auto;
}
.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.app-nav a:hover { background: var(--c-surface-2); color: var(--c-ink); }
.app-nav a.active {
  color: var(--c-primary);
  background: var(--c-primary-50);
  box-shadow: inset 0 -2px 0 var(--c-primary);
}

/* Sous-navigation contextuelle (legacy .lenuta-nav dans header_extra) */
.lenuta-header { display: block; }
.lenuta-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-2);
  display: flex;
  gap: var(--sp-4);
}
.lenuta-nav a {
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: var(--sp-1) 0;
}
.lenuta-nav a:hover { color: var(--c-primary); }
.lenuta-nav a.active { color: var(--c-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--c-primary); }

/* -----------------------------------------------------------------------------
   4. Conteneur principal
   -------------------------------------------------------------------------- */
.lenuta-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-10);
}

.page-header,
.report__header,
.home__header,
.factures-list__header,
.crm-list__header,
.receipts-list__header,
.receipt-new__header,
.facture-detail__header,
.receipt-detail__header,
.lot-header { margin-bottom: var(--sp-6); }

/* En-têtes de page avec action à droite */
.crm-list__header,
.factures-list__header,
.receipts-list__header,
.receipt-new__header,
.facture-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
/* Groupe d'actions à droite de l'en-tête fiche (Modifier / Carnet) — F-041 */
.crm-detail__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.crm-list__header h2,
.factures-list__header h2,
.receipts-list__header h2,
.page-header h2,
.report__header h2,
.home__header h2 { margin: 0 0 var(--sp-1); }
.page-header .subtle,
.report__header .muted,
.home__header .muted { margin: 0; max-width: 64ch; }

.lenuta-auth {
  max-width: 380px;
  margin: var(--sp-10) auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-8);
}
.lenuta-auth h2 { font-size: var(--fs-xl); }

/* -----------------------------------------------------------------------------
   LENUTA-F-095 — Écrans d'authentification Fable (centrés, minimalistes).
   /auth/* est exclu de la sidebar et de desktop.css (base.html) : on pose ici
   une coque autonome sur les tokens --c-* existants (palette Fable crème/olive).
   Portée stricte : body.auth-page (posé par les templates auth/*), donc aucun
   impact sur les autres pages. Pas de wrapper .dsk-layout, pas de sidebar.
   -------------------------------------------------------------------------- */
body.auth-page { background: var(--c-bg); }
/* Chrome applicatif masqué : header de marque + bandeau env (branding repris
   dans la carte, discret). La nav est déjà exclue de /auth côté base.html. */
.auth-page .app-header,
.auth-page .envbar { display: none; }
.auth-page .app-shell { display: block; }
/* Centrage vertical plein écran (dvh pour la barre d'URL mobile iOS). */
.auth-page .app-shell__main {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

/* Branding discret au-dessus de la carte. */
.auth-brand { text-align: center; margin-bottom: var(--sp-6); }
.auth-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}
.auth-brand__name {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--c-ink);
}
.auth-brand__sub { font-weight: 400; color: var(--c-muted); }

/* Carte : sur auth-page, le centrage vient du main → on annule la marge et on
   élargit un peu par rapport au réglage historique (380 px). */
.auth-page .lenuta-auth {
  margin: 0;
  width: 100%;
  max-width: 400px;
}
.auth-page .lenuta-auth h2 {
  text-align: center;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.auth-page .lenuta-form button { width: 100%; }

/* Message d'aide sous le champ. */
.auth-hint {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  margin: calc(var(--sp-1) * -1) 0 0;
}
.auth-hint strong { color: var(--c-ink-soft); }

/* Erreur de saisie (code invalide/expiré). */
.auth-page .error {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-danger-bg);
  color: var(--c-danger-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Champ code : grands chiffres espacés, format tabulaire monospace. Le
   letter-spacing décale le contenu vers la droite → padding gauche compensé. */
.auth-code-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
  padding-left: calc(var(--sp-3) + 0.4em);
}
.auth-code-input::placeholder { letter-spacing: 0.4em; color: var(--c-line-strong); }

/* Lien secondaire discret (renvoyer le code). */
.auth-alt {
  text-align: center;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
}

/* -----------------------------------------------------------------------------
   5. Boutons (unifie .btn / .lenuta-btn / .btn--x / .btn-x)
   -------------------------------------------------------------------------- */
.btn, .lenuta-btn,
button[type="submit"]:not(.app-nav *):not(.facture-tabs *),
.lot-actions button,
.filters button,
.modal button,
.card-button {
  /* base partagée par tous les boutons stylés */
  font: inherit;
}

.btn,
.lenuta-btn,
.lenuta-form button,
.factures-filters button,
.report-filters button,
.crm-filters button,
.filters button,
.lot-actions button,
.modal-body button,
.facture-detail button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover,
.lenuta-btn:hover,
.lenuta-form button:hover,
.lot-actions button:hover,
.modal-body button:hover { background: var(--c-primary-700); color: #fff; }

/* Variantes primaires explicites */
.btn-primary, .btn--primary, .lenuta-btn-primary, .btn-validate {
  background: var(--c-primary); color: #fff;
}
.btn-validate { background: var(--c-success); }
.btn-validate:hover { background: var(--c-success-ink); }

/* Variante secondaire / contour */
.lenuta-btn-secondary,
.btn-secondary, .btn--secondary,
.report-filters .lenuta-btn-secondary,
a.btn:not(.btn--primary):not(.btn-primary),
.facture-detail__header .btn {
  background: var(--c-surface);
  color: var(--c-primary);
  border-color: var(--c-line-strong);
}
.lenuta-btn-secondary:hover,
.btn-secondary:hover, .btn--secondary:hover,
a.btn:not(.btn--primary):not(.btn-primary):hover {
  background: var(--c-primary-50);
  color: var(--c-primary-700);
  border-color: var(--c-primary);
}

/* Variante ghost (texte seul) */
.btn--ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* Variante danger */
.btn--danger {
  background: var(--c-surface);
  color: var(--c-danger-ink);
  border-color: var(--c-danger);
}
.btn--danger:hover { background: var(--c-danger); color: #fff; }

/* LENUTA-BUG-047 — CTA « + Ajouter » (summary stylé en .btn dans une .crm-card).
   Sans règle dédiée, `.crm-card details summary` (color: var(--c-primary),
   spécificité 0-1-2) l'emporte sur le blanc de base `.btn` → texte + icône vert
   sur fond vert (contraste ~1:1, invisible). On rétablit le texte clair avec une
   spécificité 0-2-0 (`.btn.btn--brass`) qui bat la règle qui fuit.
   Fond vert primaire + texte blanc = contraste 8.7:1 (WCAG AAA). */
.btn.btn--brass { background: var(--c-primary); color: #fff; }
.btn.btn--brass:hover { background: var(--c-primary-700); color: #fff; }

/* LENUTA-F-100 — action secondaire « inline » (Modifier / Archiver / Restaurer).
   Petit, discret, aligné : icône SVG 16 px + libellé, hauteur fixe, fond
   transparent au repos → teinte ambiante au survol. Pattern global des actions
   secondaires (à distinguer des CTA primaires). */
.btn-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 4px 10px;
  font-size: 0.85em;
  line-height: 1;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-inline-action:hover {
  color: var(--c-primary-700);
  background: var(--c-primary-50);
  border-color: var(--c-primary);
}
.btn-inline-action .ico-inline { flex: 0 0 auto; }
/* Utilisé sur un <summary> : masquer le marqueur natif du disclosure. */
summary.btn-inline-action { list-style: none; }
summary.btn-inline-action::-webkit-details-marker { display: none; }

/* Taille réduite (actions en ligne dans tableaux) — reste ≥40px pour le tactile iPad */
.btn--sm {
  min-height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}

/* Boutons d'action lots / tabs : reset base puis style */
.lot-actions button:disabled,
.btn:disabled, .lenuta-btn:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Lien-action discret (table « Ouvrir → ») — souligné permanent (ne pas distinguer par la seule couleur) */
.link, td .link { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.link:hover { color: var(--c-primary-700); }

/* -----------------------------------------------------------------------------
   6. Cartes
   -------------------------------------------------------------------------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.home-card,
.card-button,
.po-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home-card:hover,
.card-button:hover,
.po-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.home-card__title { margin: 0 0 var(--sp-2); color: var(--c-primary); font-size: var(--fs-lg); font-weight: 600; }
.home-card__desc { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.home-card__cta { margin-top: auto; font-weight: 600; color: var(--c-primary); font-size: var(--fs-sm); }

.home-actions { margin-top: var(--sp-6); }

.crm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.crm-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.crm-card {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.crm-card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); color: var(--c-ink); }
.crm-card details summary { cursor: pointer; color: var(--c-primary); margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 500; }
/* Masque le marqueur natif ▸ des <details> (le libellé porte déjà « + … ») */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.crm-card .lenuta-form { margin-top: var(--sp-3); }

/* KPI */
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); }
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  min-width: 11rem;
}
.kpi-card__value { font-size: var(--fs-2xl); font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-card__label { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card__unit { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink-soft); }
.kpi-card__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.kpi-card__hint a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Carte « total à l'honneur » (encart mis en avant, inspiration sidebar) */
.kpi-card--feature {
  background: var(--c-primary);
  border-color: var(--c-primary-700);
  border-left-color: var(--c-accent);
}
.kpi-card--feature .kpi-card__label { color: #a0d8d8; }
.kpi-card--feature .kpi-card__value { color: #fff; }
.kpi-card--feature .kpi-card__unit  { color: #a0d8d8; }
.kpi-card--feature .kpi-card__hint  { color: #87caca; }
/* Carte attention (actions à traiter) */
.kpi-card--warn { border-left-color: var(--c-warning); }
.kpi-card--warn .kpi-card__value { color: var(--c-warning-ink); }

/* -----------------------------------------------------------------------------
   6.b Tableau de bord d'accueil (LENUTA-F-020)
   -------------------------------------------------------------------------- */
.dashboard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.dashboard__header h2 { margin: 0 0 var(--sp-1); }
.dashboard__header .muted { margin: 0; }
.dashboard__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.dashboard__kpis .kpi-card { min-width: 0; }
/* L'encart total occupe deux colonnes quand la place le permet */
.kpi-card--feature { grid-column: span 2; }

.dashboard__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
@media (max-width: 760px) {
  .dashboard__cols { grid-template-columns: 1fr; }
  .kpi-card--feature { grid-column: span 1; }
}

.panel {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.panel__head h3 { margin: 0; font-size: var(--fs-lg); color: var(--c-ink); }

/* Barres de répartition horizontales proportionnelles */
.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.bar-item__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}
.bar-item__label { color: var(--c-ink-soft); font-weight: 500; }
.bar-item__value { color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  min-width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-700));
}

.dashboard__modules { margin-top: var(--sp-2); }
.dashboard__modules > h3 { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); color: var(--c-ink); }
.home-card h4.home-card__title { margin: 0 0 var(--sp-2); }

/* Choix de mode (nouveau BR) */
.receipt-new__mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.card-button strong { font-size: var(--fs-base); color: var(--c-ink); margin-bottom: var(--sp-1); }
.card-button span { color: var(--c-muted); font-size: var(--fs-sm); }

.po-picker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.po-card { gap: var(--sp-1); }
.po-card strong { font-size: var(--fs-base); }
.po-card span { color: var(--c-muted); font-size: var(--fs-sm); }

/* -----------------------------------------------------------------------------
   7. Tableaux de données (unifie toutes les tables)
   -------------------------------------------------------------------------- */
.crm-table, .report-table,
.factures-table, .receipts-table, .receipt-table,
.lots-table, .lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.crm-table th, .report-table th,
.factures-table th, .receipts-table th, .receipt-table th,
.lots-table th, .lines-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--c-line-strong);
  white-space: nowrap;
}
.crm-table td, .report-table td,
.factures-table td, .receipts-table td, .receipt-table td,
.lots-table td, .lines-table td {
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--c-surface-2); }

/* Cellules numériques alignées à droite + chiffres tabulaires */
.num, th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pied de tableau (totaux rapports) */
.report-table tfoot td { background: var(--c-surface-2); }
.report-table tfoot .report-total td { font-weight: 700; color: var(--c-ink); border-top: 2px solid var(--c-line-strong); }

td a { color: var(--c-primary); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

/* Permet le défilement horizontal des grands tableaux sans casser la page */
.report, .factures-list, .receipts-list, .receipt-detail__lines, .lots-list, .facture-detail__section {
  overflow-x: auto;
}

/* -----------------------------------------------------------------------------
   8. Badges de statut (unifie .status-badge / .badge / .role-badge + variantes)
   -------------------------------------------------------------------------- */
.status-badge, .badge, .role-badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.18em 0.6em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--c-neutral-bg);
  color: var(--c-neutral-ink);
}
.badge--lg { font-size: var(--fs-sm); padding: 0.3em 0.8em; }
.tag { font-weight: 500; }

/* — Positif (validé / matché / actif / OK) */
.status-validated, .status-matched, .status-ocr_done,
.badge--validated, .badge-active, .badge--active, .badge--success,
.status-active {
  background: var(--c-success-bg); color: var(--c-success-ink);
}

/* — Information / en cours */
.status-ocr_processing, .status-uploading, .status-ocr_pending,
.badge--open, .badge-shipped, .badge--shipped,
.role-interaction {
  background: var(--c-info-bg); color: var(--c-info-ink);
}

/* — Attention (à vérifier / mismatch / brouillon / re-sign) */
.status-ocr_review, .status-qty_mismatch, .status-price_mismatch,
.badge--draft, .badge-draft, .badge--warning, .badge--pending,
.status-manual_override {
  background: var(--c-warning-bg); color: var(--c-warning-ink);
}

/* — Erreur / annulé / rebut / sans rapprochement */
.status-ocr_failed, .status-no_receipt, .status-no_po,
.badge--cancelled, .badge-cancelled, .badge-scrapped, .badge--scrapped {
  background: var(--c-danger-bg); color: var(--c-danger-ink);
}

/* — Neutre (archivé / consommé / fusionné) */
.status-archived, .status-archived.role-badge,
.badge-consumed, .badge--consumed, .badge-merged_into_other {
  background: var(--c-neutral-bg); color: var(--c-neutral-ink);
}

/* Rôles CRM (teintes douces distinctes) */
.role-badge { background: var(--c-primary-50); color: var(--c-primary); }
.role-invoice { background: #fef3e7; color: #9a5b00; }
.role-interaction { background: var(--c-primary-50); color: var(--c-primary); }

/* -----------------------------------------------------------------------------
   9. Formulaires
   -------------------------------------------------------------------------- */
.lenuta-form { display: flex; flex-direction: column; gap: var(--sp-3); }
label { font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* Contrôles : style global homogène */
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="search"], input[type="password"],
input:not([type]), select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) 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);
}
textarea { min-height: 4.5rem; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--c-surface-2);
  color: var(--c-muted);
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: #9aa1ab; }
label small { display: block; font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* Cases à cocher : largeur auto */
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; margin-right: var(--sp-1); accent-color: var(--c-primary); }
label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 400; }

/* Champ labellisé (macro form_field) */
.lenuta-field { display: flex; flex-direction: column; gap: var(--sp-1); }

/* Grilles de filtres */
.crm-filters, .report-filters, .factures-filters, .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.report-filters label, .filters label, .factures-filters label, .crm-filters label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.crm-filters input[type="search"] { flex: 1 1 14rem; }
.crm-filters input, .crm-filters select { min-width: 9rem; }
.report-filters input, .report-filters select,
.filters input, .filters select,
.factures-filters input, .factures-filters select { min-width: 8rem; width: auto; }

/* LENUTA-F-141 — panneau de filtres repliable (factures émises).
   <details> natif : utilisable au pouce (mobile Margo), zéro JS. */
.ci-filtres { margin-bottom: var(--sp-5); }
.ci-filtres__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
  list-style: none;
  user-select: none;
}
.ci-filtres__summary::-webkit-details-marker { display: none; }
.ci-filtres__summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--c-muted);
  transition: transform 0.15s ease;
}
.ci-filtres[open] .ci-filtres__summary::after { transform: rotate(180deg); }
.ci-filtres[open] .ci-filtres__summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}
.ci-filtres__badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: #fff;
}
.ci-filtres[open] .filters { margin-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.filters__actions { display: flex; align-items: flex-end; gap: var(--sp-2); }
.ci-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Onglets de filtre (réceptions) */
.receipts-list__filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.filter-tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--c-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.filter-tab:hover { color: var(--c-ink); background: var(--c-surface-2); }
.filter-tab--active { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-primary); }

/* Grille de formulaire (factures détail, nouveau BR) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  border: 0;
  padding: 0;
  margin: 0;
}
.form-grid label { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-grid__full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }

/* Fieldset générique */
fieldset { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
legend { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); padding: 0 var(--sp-2); }
.crm-fieldset { display: flex; flex-direction: column; gap: var(--sp-2); }
.crm-fieldset legend { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; }

.inline-form { display: inline; }

/* -----------------------------------------------------------------------------
   10. Alertes & bannières
   -------------------------------------------------------------------------- */
.lenuta-alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
}
.lenuta-alert-success { background: var(--c-success-bg); color: var(--c-success-ink); border-color: #bfe0cb; }
.lenuta-alert-danger  { background: var(--c-danger-bg);  color: var(--c-danger-ink);  border-color: #f0c5c0; }
.lenuta-alert-warning { background: var(--c-warning-bg); color: var(--c-warning-ink); border-color: #ecd9a8; }
.lenuta-alert-info    { background: var(--c-info-bg);    color: var(--c-info-ink);    border-color: var(--c-primary-100); }

/* -----------------------------------------------------------------------------
   10bis. Primitives génériques manquantes (LENUTA-F-139)
   Les templates bons de commande (F-133 liste, F-134 réconciliation, F-139
   détail) référençaient .card / .table / .alert — jamais définies → rendu brut
   non stylé (diagnostic session maquette F-139). Posées ici, au niveau du design
   system, plutôt qu'en CSS inline jetable dans les templates. (Les fiches
   clé/valeur du rail F-139 utilisent .kvr, scopé sous .bc-atelier.)
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  border: 1px solid #f0dca0;
  background: var(--c-warning-bg);
  color: var(--c-warning-ink);
  font-size: var(--fs-sm);
}

/* Table de données sobre (mêmes tokens que .data-table). */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.table th {
  color: var(--c-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }

/* LENUTA-BUG-049 — Erreur de validation inline, ancrée sous un champ (ex. n° TVA
   déjà utilisé). Discrète mais lisible : pas une bannière pleine largeur, juste
   un rappel rouge collé à l'input fautif. */
.form-field-error {
  margin: calc(var(--sp-1) * -1) 0 var(--sp-3);
  color: var(--c-danger-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.lenuta-form input.is-invalid,
.lenuta-form input[aria-invalid="true"] {
  border-color: var(--c-danger-ink);
}

/* Bandeau revue OCR (faible confiance) */
.review-banner {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-warning-bg);
  color: var(--c-warning-ink);
  border: 1px solid #efd79a;
  border-left: 4px solid var(--c-warning);
  font-size: var(--fs-sm);
}
/* LENUTA-BUG-008 : revue par confirmation de partie (pas faible confiance OCR)
   → ton informatif, pas alarmant. */
.review-banner--party {
  background: var(--c-info-bg);
  color: var(--c-info-ink);
  border: 1px solid var(--c-primary-100);
  border-left: 4px solid var(--c-primary);
}
/* LENUTA-BUG-082 — CTA de rapprochement client (« Confirmer le rapprochement
   avec <fiche> ») : le nom de fiche est variable et long. Sans ces bornes,
   .btn (white-space:nowrap, largeur au contenu) laisse le bouton grandir à sa
   guise → il déborde du cadre vert (iPad 1194) et sort du viewport (iPhone 390).
   On borne à la largeur de la bannière et on autorise le nom à passer à la ligne.
   Couvre les DEUX gabarits du bandeau : `.verif-reconcile` (revue staging,
   factures_clients_revue.html) et `.verif-actions__row` (detail OCR). Portée
   limitée au bandeau rapprochement — aucun autre .btn touché. */
.review-banner--party .verif-reconcile button,
.review-banner--party .verif-actions__row .btn {
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
  white-space: normal;
}
/* LENUTA-F-127 : erreur garde-fou suppression (liée à rapprochement). */
.review-banner--error {
  background: var(--c-danger-bg, #fff0f0);
  color: var(--c-danger-ink);
  border: 1px solid var(--c-danger);
  border-left: 4px solid var(--c-danger);
}
.review-hint { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-5); }

/* -----------------------------------------------------------------------------
   11. États vides / erreurs
   -------------------------------------------------------------------------- */
.empty-state {
  margin: var(--sp-6) 0;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  text-align: center;
  color: var(--c-muted);
}
.empty-state__title { margin: 0 0 var(--sp-2); color: var(--c-ink); font-size: var(--fs-lg); font-weight: 600; }
.empty-state__msg { margin: 0 auto var(--sp-5); max-width: 48ch; }

.error-page { max-width: 30rem; margin: var(--sp-10) auto; text-align: center; }
.error-page__code { margin: 0; font-size: 4rem; font-weight: 700; color: var(--c-line-strong); letter-spacing: 0.05em; }
.error-page__title { margin: var(--sp-2) 0 var(--sp-3); }
.error-page__msg { margin: 0 auto var(--sp-6); color: var(--c-muted); max-width: 44ch; }

.dev-only {
  margin-top: var(--sp-6);
  padding: var(--sp-3);
  background: #fff7d6;
  border: 1px solid #f0d98a;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  word-break: break-all;
}
.dev-only summary { cursor: pointer; color: var(--c-warning-ink); font-weight: 500; }

/* -----------------------------------------------------------------------------
   12. Factures — onglets, détail, lignes, audit
   -------------------------------------------------------------------------- */
.facture-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-5); }
.facture-tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
}
.facture-tabs button:hover { color: var(--c-ink); background: var(--c-surface-2); }
.facture-tabs button.active { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-primary); }

.facture-detail__section { margin-bottom: var(--sp-6); }
/* LENUTA-F-058 : colonne droite de la revue côte à côte (min-width:0 → les
   tables larges scrollent au lieu de pousser la grille .ci-sbs). */
.facture-detail__fields { min-width: 0; }
.facture-meta, .crm-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-sm);
}
.facture-meta dt, .crm-dl dt { color: var(--c-muted); font-weight: 500; }
.facture-meta dd, .crm-dl dd { margin: 0; }
.facture-meta dd.error { color: var(--c-danger-ink); }

/* Piste d'audit */
.audit-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.audit-trail__item {
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.audit-trail__time { color: var(--c-muted); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.audit-trail__type { font-weight: 600; }
.audit-trail__actor { color: var(--c-muted); margin-left: var(--sp-2); }
.audit-trail__payload, .payload pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

/* -----------------------------------------------------------------------------
   13. Upload de factures (dropzone)
   -------------------------------------------------------------------------- */
.factures-upload__help { color: var(--c-muted); max-width: 60ch; }
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-5);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.dropzone:hover { border-color: var(--c-primary); }
.dropzone--active { border-color: var(--c-primary); background: var(--c-primary-50); }
.dropzone__icon { display: flex; justify-content: center; margin: 0; color: var(--c-primary); }
.dropzone__icon .ico-inline { width: 28px; height: 28px; }
.dropzone__text { margin: 0; font-weight: 600; }
.dropzone__text em { color: var(--c-muted); font-weight: 400; font-style: normal; }
.dropzone__meta { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }

.filelist { list-style: none; margin: var(--sp-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.filelist__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.filelist__size { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.upload-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

.htmx-indicator { display: none; margin-top: var(--sp-4); color: var(--c-muted); }
.htmx-indicator.htmx-request, .htmx-request .htmx-indicator { display: block; }

.upload-results { margin-top: var(--sp-6); }
.upload-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.upload-results__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.upload-results__item--ok { border-left-color: var(--c-success); }
.upload-results__item--duplicate { border-left-color: var(--c-warning); }
.upload-results__item--error { border-left-color: var(--c-danger); }
.upload-results__filename { font-weight: 600; }

/* LENUTA-F-090 / F-172 — dépôt vivant (split asymétrique capture / suivi) --- */
.depot-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-5);
}
@media (max-width: 900px) {
  .depot-split { grid-template-columns: 1fr; }
}

.depot-split__live { position: sticky; top: var(--sp-4); }

/* F-172 : état vide = panneau plein et calme (plus de pointillés jumeaux),
   avec la légende des 4 étapes (ci-stepper) pour annoncer le suivi. */
.depot-vivant__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.depot-vivant__empty-icon { display: flex; color: var(--c-primary); margin-bottom: var(--sp-1); }
.depot-vivant__empty-icon .ico-inline { width: 24px; height: 24px; }
.depot-vivant__empty-title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); }
.depot-vivant__empty p { margin: 0; max-width: 34ch; }
.depot-vivant__empty .ci-stepper { justify-content: center; margin-top: var(--sp-2); gap: var(--sp-2) var(--sp-3); }
/* en légende, pas de connecteurs (le wrap sur rail étroit laisserait des tirets orphelins) */
.depot-vivant__empty .ci-step + .ci-step::before { display: none; }

/* F-172 : séparateur « ou » entre les deux entrées de capture */
.capture-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.capture-sep::before, .capture-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

/* F-172 : entrée secondaire « scanner la facture papier » */
.scan-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  flex-wrap: wrap;
}
.scan-entry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--c-primary-50);
  color: var(--c-primary);
}
.scan-entry__body { flex: 1 1 12rem; min-width: 0; }
.scan-entry__title { margin: 0; font-weight: 600; }
.scan-entry__tips {
  border: 0;
  padding: 0;
  margin-top: 2px;
  background: none;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.scan-entry__tips:hover { color: var(--c-ink); }
.scan-entry__btn { flex: 0 0 auto; }
.scan-entry ~ .scan-guide, .scan-entry ~ .blur-warning { margin-top: var(--sp-3); margin-bottom: 0; }

.depot-vivant__title { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.depot-vivant__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.depot-vivant__foot { margin-top: var(--sp-4); font-size: var(--fs-sm); }

.depot-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.depot-card--ok { border-left-color: var(--c-primary); }
.depot-card--duplicate { border-left-color: var(--c-warning); }
.depot-card--error { border-left-color: var(--c-danger); }
.depot-card__filename {
  font-weight: 600;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-card__msg { margin: 0; font-size: var(--fs-sm); }
.depot-card__msg--dup { color: var(--c-warning-ink); }
.depot-card__msg--err { color: var(--c-danger-ink); }

.depot-etat { display: flex; flex-direction: column; gap: var(--sp-3); }
/* F-172 : rail de suivi plus étroit (split 3/2) → stepper compact dans les
   cartes pour tenir sur une ligne (connecteurs raccourcis). */
.depot-etat .ci-stepper { gap: var(--sp-1); }
.depot-etat .ci-step + .ci-step::before { width: var(--sp-2); }
.depot-etat__status { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* -----------------------------------------------------------------------------
   14. Réceptions — détail, lignes, pièces jointes, historique
   -------------------------------------------------------------------------- */
.receipt-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.receipt-detail__meta { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.receipt-detail__status { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.receipt-detail__lines, .receipt-detail__attachments, .receipt-detail__events { margin-top: var(--sp-6); }
.receipt-detail__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.receipt-detail__actions form { display: inline; }

.attachments-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }

.events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-line-strong);
  background: var(--c-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
}
.event time { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.event code { font-size: var(--fs-xs); }

/* Formulaire de scission de ligne */
.split-form { padding: var(--sp-4); margin: var(--sp-2) 0; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius); }
.split-form__hint { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-3); }
.split-form__part { display: flex; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-2); flex-wrap: wrap; }
.split-form__part label { flex: 1 1 8rem; }
.split-form__actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.split-form__total { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.split-form__total.is-ok { color: var(--c-success-ink); }
.split-form__total.is-warn { color: var(--c-warning-ink); }

/* -----------------------------------------------------------------------------
   15. Lots — résumé, timeline, arborescence
   -------------------------------------------------------------------------- */
.lot-header h2, .facture-detail__header h2, .receipt-detail__header h2 { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lot-summary { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.lot-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-5) 0; }
.lot-actions button, .lot-actions .btn-secondary {
  /* hérite du style bouton secondaire */
  background: var(--c-surface);
  color: var(--c-primary);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lot-actions button:hover:not(:disabled), .lot-actions .btn-secondary:hover { background: var(--c-primary-50); border-color: var(--c-primary); }

.timeline, .crm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.evt, .crm-timeline__item {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-line-strong);
  font-size: var(--fs-sm);
}
.evt time, .crm-timeline__date { color: var(--c-muted); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.evt-type { font-weight: 600; }
.crm-timeline__date { display: block; font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
.crm-timeline__item--transaction { border-left-color: var(--c-primary); }
.qty-delta { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }

.tree { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); font-family: var(--font-mono); }
.tree li { padding: var(--sp-1) 0; }
.tree .branch { color: var(--c-muted); }

.crm-people, .crm-addresses, .crm-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }

/* LENUTA-F-097 — CRUD par section : en-tête (titre + « Ajouter »), actions par
   entrée (Modifier/Archiver), zone repliable des entrées archivées. */
.crm-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.crm-section__head h3 { margin: 0; }
.crm-add > summary { list-style: none; display: inline-flex; margin-top: 0; }
.crm-add > summary::-webkit-details-marker { display: none; }
.crm-entry__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-start; margin-top: var(--sp-2); }
.crm-edit > summary { list-style: none; display: inline-flex; margin-top: 0; }
.crm-edit > summary::-webkit-details-marker { display: none; }
.crm-archived { margin-top: var(--sp-3); border-top: 1px solid var(--c-border); padding-top: var(--sp-2); }
.crm-archived > summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.crm-people--archived li, .crm-addresses--archived li { opacity: 0.7; }

/* LENUTA-F-106 — actions inline icône-seule alignées à DROITE (entrées CRM).
   Chaque <li> devient une ligne flex : contenu à gauche (.crm-entry__lead),
   actions icône-seule poussées à droite (.row-actions-right), et le formulaire
   d'édition (.crm-entry__edit, révélé par Alpine x-show) se déplie en pleine
   largeur sous la ligne. Miroir du pattern catalogue `.cat-act` (desktop.css).
   Pattern générique documenté dans docs/style-guide.md. */
.crm-people > li,
.crm-addresses > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-1) var(--sp-3);
}
.crm-entry__lead { flex: 1 1 auto; min-width: 0; }
.crm-entry__edit { flex: 1 1 100%; }
.row-actions-right {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.row-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.row-act:hover,
.row-act:focus-visible {
  opacity: 1;
  color: var(--c-primary-700);
  background: var(--c-primary-50);
}
.row-act .ico-inline { width: 16px; height: 16px; display: block; }

/* -----------------------------------------------------------------------------
   16. Modales (Alpine) — overlay centré
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(20, 23, 28, 0.45);
}
.modal-body, .modal > form {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.modal-body h3, .modal > form h3 { margin-top: 0; }
.modal-body form, .modal > form { display: flex; flex-direction: column; gap: var(--sp-3); }
.modal-body label, .modal > form label { display: flex; flex-direction: column; gap: var(--sp-1); }
.modal-body .warn, .modal > form .warn {
  background: var(--c-warning-bg);
  color: var(--c-warning-ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
/* boutons en pied de modale alignés */
.modal-body button + button, .modal > form button + button { margin-left: var(--sp-3); }
/* Pied de modale : actions espacées (réduit le tap erroné sur action destructive) */
.modal-body form > button:last-of-type, .modal > form > button:last-of-type { margin-top: var(--sp-2); }

/* -----------------------------------------------------------------------------
   17. Responsive (iPad + mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .lenuta-main { padding: var(--sp-6) var(--sp-3) var(--sp-8); }
  h2 { font-size: var(--fs-xl); }
  .app-header__inner { gap: var(--sp-3); }
  .app-nav { margin-left: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .app-nav a { white-space: nowrap; }
  .crm-grid { grid-template-columns: 1fr; }
  .facture-meta, .crm-dl { grid-template-columns: 1fr; gap: var(--sp-1); }
  .facture-meta dt, .crm-dl dt { margin-top: var(--sp-2); }
  /* tableaux : autoriser le scroll horizontal plutôt que d'écraser les colonnes */
  .crm-table, .report-table, .factures-table, .receipts-table,
  .receipt-table, .lots-table, .lines-table { font-size: var(--fs-xs); }
}

@media print {
  .app-header, .lenuta-nav, .report-filters, .lot-actions, .receipt-detail__actions, .home-actions { display: none; }
  body { background: #fff; }
}

/* ──────────────────────────────────────────────────────────────────────────
   LENUTA-F-021 — Écran de revue « Parties » (émetteur / destinataire)
   Réutilise les tokens crème/olive ; n'introduit aucune classe historique.
   ────────────────────────────────────────────────────────────────────────── */
.parties-form { display: flex; flex-direction: column; gap: var(--sp-6); }

.party-card {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--sp-5);
}
.party-card__head h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.party-card__head small { color: var(--c-muted); font-weight: 400; }

.party-card__resolution { margin-bottom: var(--sp-4); }
.party-resolution { margin: 0 0 var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); }
.party-resolution--ok    { background: var(--c-success-bg); color: var(--c-success-ink); }
.party-resolution--warn  { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.party-resolution--new   { background: var(--c-info-bg);    color: var(--c-info-ink); }
.party-resolution--alert { background: var(--c-danger-bg);  color: var(--c-danger-ink); }
.party-resolution__supplier { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

.party-card__actions {
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.party-card__actions legend { font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink-soft); padding: 0 var(--sp-2); }
.party-card__actions label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }

.party-card__fields { gap: var(--sp-3); }
.party-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.party-field__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* Badge de confiance OCR par champ (vert ≥80 % / ambre ≥50 % / rouge <50 %). */
.conf-badge {
  font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: 0.15em 0.5em; border-radius: var(--radius-pill);
}
.conf-badge.conf--high { background: var(--c-success-bg); color: var(--c-success-ink); }
.conf-badge.conf--med  { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.conf-badge.conf--low  { background: var(--c-danger-bg);  color: var(--c-danger-ink); }
.conf-badge.conf--none { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }

/* Liseré gauche sur les champs douteux pour guider la relecture. */
.conf-input { border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); padding: var(--sp-2); }
.conf-input.conf--low  { border-left: 3px solid var(--c-danger); }
.conf-input.conf--med  { border-left: 3px solid var(--c-warning); }
.conf-input.conf--high { border-left: 3px solid var(--c-success); }

/* -----------------------------------------------------------------------------
   LENUTA-F-040 — Chrome env/version, layout 3 domaines, tableau de bord
   (couleurs domaines inspirées du mockup validé ; classes nouvelles, aucun
   renommage du design system existant).
   -------------------------------------------------------------------------- */
:root {
  --c-fourn:     #2f6fb5;  --c-fourn-bg: #eaf1f9;
  --c-stock:     #8a5a00;  --c-stock-bg: #faf3e2;
  --c-client:    #1d8f6b;  --c-client-bg: #e7f4ee;
  --c-prix:      #b45309;  --c-prix-bg:  #fef3e2;
  --c-ops:       #6b51b0;
}

/* ── Bandeau d'environnement (F-046) ── */
.envbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 5px var(--sp-4);
  color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
}
.envbar--dev  { background: #475569; }   /* ardoise neutre : développement (F-050) */
.envbar--test { background: #b8770f; }   /* ambre : environnement de test (pré-prod) — couleur d'alerte qui ressort */
.envbar--prod { background: #1f2937; }   /* encre sobre : production Margo réelle (F-059, ex-vert #1d8f6b) — discret, ne distrait pas du travail réel */
.envbar__ver { font-family: var(--font-mono); font-weight: 600; opacity: 0.95; letter-spacing: 0; }

/* ── Layout coquille : nav latérale + contenu ── */
.app-shell { display: flex; align-items: flex-start; }
.app-shell__main { flex: 1 1 auto; min-width: 0; margin: 0; }

/* ── Navigation par domaines ── */
.domnav {
  flex: none; width: 248px;
  align-self: stretch;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  padding: var(--sp-4) var(--sp-3);
}
.domnav__group { margin-bottom: var(--sp-5); }
.domnav__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.69rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
}
.domnav__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.domnav__group--fourn  .domnav__head { color: var(--c-fourn);  background: var(--c-fourn-bg); }
.domnav__group--fourn  .domnav__dot  { background: var(--c-fourn); }
.domnav__group--stock  .domnav__head { color: var(--c-stock);  background: var(--c-stock-bg); }
.domnav__group--stock  .domnav__dot  { background: var(--c-stock); }
.domnav__group--client .domnav__head { color: var(--c-client); background: var(--c-client-bg); }
.domnav__group--client .domnav__dot  { background: var(--c-client); }
.domnav__group--prix   .domnav__head { color: var(--c-prix);   background: var(--c-prix-bg); }
.domnav__group--prix   .domnav__dot  { background: var(--c-prix); }
.domnav__group--param  .domnav__head { color: var(--c-muted);  background: var(--c-neutral-bg); }
.domnav__group--param  .domnav__dot  { background: var(--c-muted); }
.domnav__head--plain { color: var(--c-muted); background: transparent; }
.domnav__subhead {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-muted); padding: var(--sp-2) var(--sp-3) 0;
}

.domnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 36px; padding: var(--sp-2) var(--sp-3); margin: 2px 0;
  border-radius: var(--radius-sm);
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm);
}
a.domnav__link:hover { background: var(--c-surface-2); }
a.domnav__link.is-active { background: var(--c-primary); color: #fff; }
.domnav__sub { font-size: var(--fs-xs); color: var(--c-muted); }
a.domnav__link.is-active .domnav__sub { color: rgba(255,255,255,0.8); }
.domnav__link.is-disabled { color: var(--c-line-strong); cursor: default; }
.domnav__badge {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--c-neutral-bg); color: var(--c-muted);
}
.domnav__badge--dev { background: var(--c-stock-bg); color: var(--c-stock); border: 1px solid #ecdca8; }

/* ── Tableau de bord transversal (F-040) ── */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.dash-kpi {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-line-strong); border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.dash-kpi--ops    { border-top-color: var(--c-ops); }
.dash-kpi--fourn  { border-top-color: var(--c-fourn); }
.dash-kpi--client { border-top-color: var(--c-client); }
.dash-kpi__k { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-1); }
.dash-kpi__v { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; }
.dash-kpi__u { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.dash-kpi__s { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-1); }
.dash-kpi__s--muted { color: var(--c-line-strong); }
.dash-wide { grid-column: span 3; display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
.dash-row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-sm); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line);
}
.dash-row:last-child { border-bottom: 0; }
.dash-row--muted { color: var(--c-muted); }
.dash-empty { font-size: var(--fs-sm); color: var(--c-muted); padding: var(--sp-2) 0; }
.dash-legend { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-5); }

/* ── Responsive : nav repliée au-dessus du contenu sur petit écran ── */
@media (max-width: 860px) {
  .app-shell { display: block; }
  .domnav { width: auto; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-wide { grid-column: span 2; grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-wide { grid-column: span 1; }
}

/* LENUTA-F-040 (retouche) — placeholder « à venir » (Paramètres / mise en service) */
.placeholder__card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-6); max-width: 560px;
}
.placeholder__badge {
  display: inline-block; font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--c-stock-bg); color: var(--c-stock);
  border: 1px solid #ecdca8; padding: 2px 8px; border-radius: var(--radius-pill);
  margin: 0 0 var(--sp-3);
}

/* ───────────────────────────────────────────────────────────────────────
   LENUTA-F-024 — Ingestion factures client : upload + revue côte à côte
   (réutilise .btn / .badge / .panel / .data-table ; n'ajoute que le spécifique)
   ─────────────────────────────────────────────────────────────────────── */
.crumb { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-2); }
.crumb a { color: var(--c-muted); }

.btn--small { padding: 0.25em 0.7em; font-size: var(--fs-sm); }

.badge--muted { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }

/* Zone d'upload (drag-drop) */
.ci-drop {
  border: 2px dashed var(--c-line-strong);
  background: var(--c-surface-2);
  text-align: center;
}
.ci-drop--over { border-color: var(--c-primary); background: var(--c-primary-50); }
.ci-drop__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.ci-drop__hint { font-weight: 600; margin: 0; }
.ci-drop__pickers { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.ci-drop__formats { margin: 0; }

.ci-upload-report .ci-report-list { list-style: none; margin: 0; padding: 0; }
.ci-report-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line);
}
.ci-report-item__name { font-family: var(--font-mono); font-size: var(--fs-sm); }

.ci-row-actions { display: flex; gap: var(--sp-2); align-items: center; }
.ci-row-actions form { display: inline; margin: 0; }
.ci-phase-note { margin-top: var(--sp-4); }

/* Revue côte à côte */
.ci-sbs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .ci-sbs { grid-template-columns: 1fr; } }
.ci-sbs__doc { position: sticky; top: var(--sp-3); }
.ci-doc-view { width: 100%; height: 78vh; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; }
.ci-doc-note { margin-top: var(--sp-2); font-size: 0.85rem; }

.ci-sbs__form fieldset {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-3); margin: 0 0 var(--sp-4);
}
.ci-sbs__form legend { font-weight: 700; padding: 0 var(--sp-2); }
.field { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--sp-2); }
.field > span { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.field input {
  padding: 0.4em 0.6em; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); font: inherit; background: var(--c-surface);
}
.field input:focus { outline: 2px solid var(--c-focus); border-color: var(--c-primary); }
.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 90px; }
/* Champ à faible confiance : mise en évidence (Q4) */
.field--low input {
  background: var(--c-warning-bg); border-color: var(--c-warning);
}
.field--low > span::after { content: " ⚠"; color: var(--c-warning-ink); }

.ci-lines input { width: 100%; padding: 0.3em 0.4em; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font: inherit; }
.ci-lines .ci-num { text-align: right; }
/* LENUTA-F-064 : badge type de facturation (à l'heure / forfait).
   LENUTA-BUG-048 : posé INLINE à droite du <select> (flex) au lieu d'être sous
   le dropdown — supprime la hauteur en trop qui décalait la baseline des autres
   colonnes de la ligne de facture. */
.ci-article-cell { display: flex; align-items: center; gap: var(--sp-2); }
.ci-article-cell select { flex: 1 1 auto; min-width: 0; }
.ci-billing-badge { flex: 0 0 auto; padding: 0.05em 0.45em; border-radius: var(--radius-sm); background: var(--c-prix-bg); color: var(--c-prix); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.ci-review__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-3); }

/* ── Suivi d'étapes d'ingestion (LENUTA-F-060) ───────────────────────────── */
.ci-stepper {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-1) 0;
  padding: 0;
  font-size: var(--fs-xs);
}
.ci-step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--c-muted);
  white-space: nowrap;
}
/* connecteur entre étapes */
.ci-step + .ci-step::before {
  content: "";
  width: var(--sp-4);
  height: 1px;
  background: var(--c-line-strong);
  margin-right: var(--sp-1);
}
.ci-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--c-muted);
}
.ci-step__label { font-size: var(--fs-xs); }
/* états */
.ci-step--done .ci-step__dot {
  background: var(--c-success); border-color: var(--c-success); color: #fff;
}
.ci-step--done .ci-step__label { color: var(--c-success-ink); }
.ci-step--current .ci-step__dot {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.ci-step--current .ci-step__label { color: var(--c-ink); font-weight: 600; }
.ci-step--error .ci-step__dot {
  background: var(--c-danger); border-color: var(--c-danger); color: #fff;
}
.ci-step--error .ci-step__label { color: var(--c-danger-ink); font-weight: 600; }
.ci-review__steps { margin-top: var(--sp-2); }

/* ── Catalogue éditable (LENUTA-F-061) ───────────────────────────────────── */
.review-banner--ok { border-color: var(--c-success); background: var(--c-success-bg); color: var(--c-success-ink); }
.ci-add { margin-top: var(--sp-3); }
.ci-add > summary { cursor: pointer; color: var(--c-primary); font-size: var(--fs-sm); }
.ci-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-3);
}

/* ── Catalogue en cartes Fable (LENUTA-F-091) ────────────────────────────────
   Grid de cartes éditables (2 niveaux F-084 : standard global / propre client),
   remplace le tableau dense. Tokens uniquement, aucune valeur en dur. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-3);
}
.cat-card {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-warning); /* filet laiton — univers Ventes */
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.cat-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.cat-card__head input { min-width: 10ch; flex: 1 1 auto; font-weight: 600; }
/* LENUTA-BUG-091 : badge client (nom potentiellement long) tronqué + tooltip
   plutôt que d'écraser le champ libellé (flex-shrink par défaut à 0 sur un
   inline-flex avec white-space:nowrap sinon). */
.cat-card__head .status-badge {
  min-width: 0;
  max-width: 55%;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
}
.cat-fields > span { font-size: var(--fs-sm); color: var(--c-muted); }
.cat-fields select, .cat-fields input { width: 100%; }
.cat-card__meta { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cat-card__foot { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* ── Gammes de production par service (LENUTA-F-176) ──────────────────────────
   Bloc « étapes de production » d'une carte service + éditeur de gamme. Tokens
   uniquement. .gamme-edit sert aussi le panneau « Gammes de production ». */
.cat-card__gamme { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-sm); }
.cat-gamme__steps { color: var(--c-muted); }
.gamme-edit { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.gamme-edit textarea { width: 100%; font-family: inherit; resize: vertical; }

/* ── Moteur OCR par tenant (LENUTA-F-062) ─────────────────────────────────── */
.ocr-settings .field__input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  font: inherit;
  color: var(--c-ink);
  max-width: 32rem;
}
.ocr-settings .field__input:focus {
  outline: 2px solid var(--c-focus);
  border-color: var(--c-primary);
}
.ocr-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
.ocr-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface-2);
  padding: var(--sp-4);
}
.ocr-card--active {
  border-color: var(--c-primary);
  background: var(--c-primary-50);
  box-shadow: var(--shadow-sm);
}
.ocr-card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.ocr-card ul { margin: 0 0 var(--sp-3); padding-left: 1.2rem; font-size: var(--fs-sm); }
.ocr-card__pros li { color: var(--c-success-ink); }
.ocr-card__cons li { color: var(--c-warning-ink); }
.ocr-card__pros li::marker { content: "+ "; }
.ocr-card__cons li::marker { content: "− "; }

/* LENUTA-F-206 — bandeau « moteur actif » + avertissement de disponibilité. */
.ocr-active { margin: var(--sp-4) 0; }
.ocr-active p { margin: 0; }
.ocr-warn {
  margin: var(--sp-3) 0 0;
  color: var(--c-warning-ink);
  font-size: var(--fs-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   LENUTA-F-074 — Écran de vérification (refonte Fable)
   Mockup source : oscar/docs/audits/2026-07-02-audit-ux-margo/B-mockups-desktop/04-verification-desktop.html
   Palette : réutilise les tokens app existants (--c-primary olive,
   --c-warning laiton, --c-line filet crème). AUCUNE nouvelle valeur en dur.
   ────────────────────────────────────────────────────────────────────── */

.verif { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Header (breadcrumb + titre + badge) */
.verif-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.verif-head__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.verif-head__title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; }
/* LENUTA-F-127 : badge statut + bouton Supprimer côte à côte dans le header. */
.verif-head__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.verif-crumb { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.verif-crumb a { color: var(--c-muted); text-decoration: none; }
.verif-crumb a:hover { color: var(--c-ink); text-decoration: underline; }

/* Split 60/40 — colonnes fluides, s'empilent < 900px (Fable mobile-first).
   Le PDF prend la moitié gauche, les décisions à droite. `min-width:0`
   empêche les enfants (tables, embeds) de casser la grille. */
.verif-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--sp-6);
  align-items: stretch;
}
@media (max-width: 900px) {
  .verif-split { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Aperçu document (gauche) */
.verif-doc {
  display: flex; flex-direction: column;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden; min-width: 0;
  position: sticky; top: var(--sp-3); align-self: start;
  max-height: calc(100vh - var(--sp-8));
}
@media (max-width: 900px) { .verif-doc { position: static; max-height: none; } }
.verif-doc__tools {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-neutral-bg);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-muted);
}
.verif-doc__hint { flex: 1; }
.verif-doc__link { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.verif-doc__link:hover { text-decoration: underline; }
.verif-doc__embed {
  flex: 1; width: 100%; min-height: 480px; height: 78vh;
  background: #fff; border: 0;
}
.verif-doc--empty .verif-doc__embed { display: none; }
.verif-doc__placeholder {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8); text-align: center; min-height: 320px;
}

/* Colonne décisions (droite) */
.verif-fields { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.verif-intro { margin: 0; font-weight: 700; font-size: var(--fs-lg); }

/* Étapes d'ingestion sous le header (LENUTA-F-082) */
.verif-head__steps { margin-top: var(--sp-1); }

/* Groupes logiques d'une revue à champs multiples (client / facture / lignes).
   Introduits par LENUTA-F-082 pour porter les ~17 champs éditables d'une
   ancienne facture cliente dans le patron F-074 sans onglets ni fieldsets
   maison. `verif-form-edit` fournit déjà le flux vertical ; ces groupes
   n'ajoutent qu'un intitulé et un léger regroupement. */
.verif-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.verif-group__legend {
  margin: 0;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
/* Rangée de champs courts côte à côte (dates, montants, NPA/Ville/Pays).
   S'empile sous 900px comme le reste du split. */
.verif-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.verif-row > .verif-field { flex: 1; min-width: 8rem; }

/* Table de lignes éditable — scroll horizontal isolé (ne casse pas le split). */
.verif-lines-edit { overflow-x: auto; }

/* Champs — reprend le style .field du mockup Fable (tokens app) */
.verif-field {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* Champ douteux — surligné laiton, comme .field--doubt du mockup. */
.verif-field--doubt {
  border-width: 2px;
  border-color: var(--c-warning);
  background: var(--c-warning-bg);
}
.verif-field__label {
  display: block; font-size: var(--fs-sm); color: var(--c-ink-soft);
  margin: 0;
}
.verif-field__hint { color: var(--c-warning-ink); font-weight: 700; }
.verif-field input,
.verif-field textarea {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font: inherit;
  font-size: 1.05rem;
}
.verif-field--doubt input,
.verif-field--doubt textarea {
  font-size: 1.2rem; font-weight: 700;
  border-color: var(--c-warning);
}
.verif-field input:focus,
.verif-field textarea:focus {
  outline: 2px solid var(--c-focus);
  border-color: var(--c-primary);
}
.verif-field__help { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Form /update — bouton discret « Enregistrer les modifs » à droite */
.verif-form-edit { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.verif-form-edit__save { display: flex; justify-content: flex-end; margin-top: var(--sp-1); }

/* Panneau fournisseur — question directe (mockup Fable) */
.verif-supplier {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.verif-supplier__q { margin: 0 0 var(--sp-3); font-weight: 600; }
.verif-supplier__q--new { color: var(--c-warning-ink); }
.verif-supplier__name { color: var(--c-primary); }
.verif-supplier__actions {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
}
.verif-supplier__actions .btn { flex: 1; min-width: 120px; padding: var(--sp-3) var(--sp-4); }
.verif-supplier__match { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.verif-supplier__quickform { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.verif-supplier__picker { margin-top: var(--sp-3); }
.verif-supplier__picker--always { margin-top: 0; }
.verif-supplier__back { align-self: flex-start; margin-bottom: var(--sp-3); }

/* Panneau d'actions (client invoices — cycle de vie) */
.verif-actions {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.verif-actions__title { margin: 0; font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.verif-actions__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.verif-actions__form { margin: 0; display: inline-flex; }
.verif-actions__row .btn { flex: 0 0 auto; }

/* Groupes repliés — style de <details> pour rappel du .card mockup */
.verif-collapsed {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.verif-collapsed[open] { padding-bottom: var(--sp-4); }
.verif-collapsed > summary {
  cursor: pointer;
  color: var(--c-muted);
  font-weight: 600;
  list-style: none;
  padding: var(--sp-1) 0;
}
.verif-collapsed > summary::-webkit-details-marker { display: none; }
.verif-collapsed[open] > summary { color: var(--c-ink); margin-bottom: var(--sp-3); }
.verif-collapsed > summary:hover { color: var(--c-ink); }

/* Champs sûrs — dl compact, lignes discrètes */
.verif-safe { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.verif-safe dt { color: var(--c-muted); font-size: var(--fs-sm); }
.verif-safe dd { margin: 0; font-variant-numeric: tabular-nums; }
.verif-safe__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

.verif-meta { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.verif-meta dt { color: var(--c-muted); font-size: var(--fs-sm); }
.verif-meta dd { margin: 0; }

.verif-lines { font-size: var(--fs-sm); }
.verif-audit { margin: 0; padding-left: 1.1rem; }

/* CTA final — grand bouton primaire + secondaire discret */
.verif-cta {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.verif-cta__form { margin: 0; display: flex; }
.verif-cta__primary {
  flex: 1;
  padding: var(--sp-4) var(--sp-6);
  font-size: 1.1rem;
  font-weight: 700;
}
.verif-cta__quiet { align-self: center; }

/* btn--quiet (mockup Fable — bordure grise pâle, texte muet).
   Défini ici car F-074 est le premier écran à l'utiliser (le mockup Fable
   distingue « quiet » de « ghost » : quiet a une bordure discrète, ghost
   n'en a pas). Cohérent avec .btn/.btn--secondary tokens. */
.btn--quiet {
  background: transparent;
  color: var(--c-muted);
  border: 2px solid var(--c-line-strong);
  font-weight: 600;
}
.btn--quiet:hover {
  background: var(--c-surface-2);
  color: var(--c-ink);
  border-color: var(--c-muted);
}

/* Alpine cloak — cache les blocs `x-cloak` tant qu'Alpine ne s'est pas
   monté (évite le flash du picker complet côté fournisseur). */
[x-cloak] { display: none !important; }

/* -----------------------------------------------------------------------------
   Réglages — accueil paramètres + zone « Réglages avancés (technicien) »
   (LENUTA-F-076, PR 10). Réutilise .card-button / .dashboard__header / tokens ;
   n'ajoute que le spécifique à la zone repliée et au bandeau technicien.
   -------------------------------------------------------------------------- */
.settings { display: flex; flex-direction: column; gap: var(--sp-5); }
.settings__group { display: flex; flex-direction: column; gap: var(--sp-3); }
.settings__title {
  margin: 0; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted);
}

/* Zone repliée « réservé au technicien » — filet ambré = visuellement distincte. */
.settings-adv {
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-warning);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--sp-3) var(--sp-4);
}
.settings-adv[open] { padding-bottom: var(--sp-4); }
.settings-adv__summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) 0; color: var(--c-ink); font-weight: 600;
}
.settings-adv__summary::-webkit-details-marker { display: none; }
.settings-adv__icon { font-size: 1.2rem; line-height: 1; }
.settings-adv__label { display: block; }
.settings-adv__hint {
  display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted);
}
.settings-adv[open] .settings-adv__summary { margin-bottom: var(--sp-2); }

/* Bandeau « réservé au technicien » — partagé accueil Réglages + écran moteur. */
.settings-adv__banner {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-warning-bg); color: var(--c-warning-ink);
  border-radius: var(--radius); font-size: var(--fs-sm);
}

/* -----------------------------------------------------------------------------
   LENUTA-F-078 — Refonte Fable « facture que j'envoie » (plan F, item 1/5).
   Réutilise le patron split F-074 (.verif / .verif-split / .verif-doc /
   .verif-fields) — ce bloc n'ajoute QUE le spécifique à l'émission : les
   fieldsets de saisie et l'aperçu LIVE de la facture (pas de PDF, la facture
   n'existe pas encore). Tokens app uniquement, aucune valeur en dur.
   -------------------------------------------------------------------------- */

/* Fieldsets de saisie (colonne droite) — carte bordée, cohérente verif-*. */
.ci-fieldset {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4); margin: 0;
  min-width: 0;  /* laisse la colonne grid rétrécir → la table de lignes scrolle
                    dans son wrapper au lieu d'élargir la page. */
}
.ci-fieldset legend { font-weight: 700; padding: 0 var(--sp-2); }

/* Émission : la saisie est le travail → on inverse le ratio F-074 (l'aperçu
   passe à ~40%, le formulaire à ~60%) pour laisser respirer la table de lignes
   (8 colonnes). Gardé sous @media ≥901px : sinon cette règle (postérieure au
   `@media (max-width:900px){.verif-split{1fr}}` de F-074) l'emporterait et
   empêcherait l'empilement mobile. */
@media (min-width: 901px) {
  .verif-split--emission { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
/* La table de lignes déborde la colonne sur écrans étroits → scroll horizontal
   CONTENU dans la colonne (jamais la page). */
.ci-lines-wrap { overflow-x: auto; }
.ci-lines-wrap .ci-lines { min-width: 640px; }

/* Aperçu LIVE : contrairement à F-074 (embed PDF qui gère son propre scroll),
   le rendu papier grandit avec le nombre de lignes. `.verif-doc` plafonne à
   100vh + overflow:hidden → sur une facture longue les totaux seraient CLIPPÉS.
   On rend donc l'aperçu scrollable à l'intérieur du panneau sticky. */
.verif-doc--live { overflow-y: auto; }

/* Aperçu LIVE (colonne gauche) — rendu « papier » d'une facture qui se remplit
   à la saisie. Vit dans .verif-doc (bordure + sticky + fond surface-2). */
.ci-preview {
  background: var(--c-surface); margin: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: var(--sp-5); font-size: var(--fs-sm);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ci-preview__masthead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); border-bottom: 2px solid var(--c-primary);
  padding-bottom: var(--sp-3);
}
.ci-preview__from strong { display: block; color: var(--c-ink); }
.ci-preview__vat { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.ci-preview__doclabel {
  font-weight: 700; letter-spacing: 0.08em; color: var(--c-primary);
  font-size: var(--fs-lg);
}
.ci-preview__meta {
  margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-4);
}
.ci-preview__meta dt { color: var(--c-muted); }
.ci-preview__meta dd { margin: 0; }
.ci-preview__lines { width: 100%; border-collapse: collapse; }
.ci-preview__lines th {
  text-align: left; color: var(--c-muted); font-weight: 600;
  font-size: var(--fs-xs); border-bottom: 1px solid var(--c-line);
  padding: var(--sp-1) var(--sp-2);
}
.ci-preview__lines td {
  padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.ci-preview__lines .ci-num { text-align: right; font-variant-numeric: tabular-nums; }
.ci-preview__totals {
  margin: 0; display: grid; grid-template-columns: 1fr max-content;
  gap: var(--sp-1) var(--sp-4); align-self: flex-end; min-width: 55%;
}
.ci-preview__totals dt { color: var(--c-muted); }
.ci-preview__totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ci-preview__grand { font-weight: 700; color: var(--c-ink); font-size: var(--fs-lg); }
.ci-preview__note { margin: 0; font-size: var(--fs-xs); }

/* LENUTA-F-083 — indicateur d'autosave discret (bas du panneau d'édition). */
.ci-autosave { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); min-height: 1.2em; }
.ci-autosave__saving { color: var(--c-muted); }
.ci-autosave__ok { color: var(--c-success-ink); }
.ci-autosave__err { color: var(--c-danger-ink); }

/* -----------------------------------------------------------------------------
   LENUTA-F-080 — Réceptions & lots au chrome Fable (plan F, item 3/5).
   Réutilise le patron split F-074 (.verif / .verif-split / .verif-doc /
   .verif-fields). Réceptions et lots n'ont pas de PDF serveur unique : la
   colonne gauche porte un RÉCAPITULATIF (« le bon / le lot en bref ») au lieu
   d'un embed. Ce bloc n'ajoute QUE le spécifique récap. Tokens app uniquement.
   -------------------------------------------------------------------------- */

/* Groupe d'actions à droite d'un `.main-head` (liste réceptions : export + CTA). */
.main-head__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* Variante récap de `.verif-doc` : pas d'embed → on retire la hauteur plafonnée
   et le sticky (une provenance longue ne doit pas être clippée), on laisse la
   carte suivre le flux. Bordure + fond surface-2 hérités de `.verif-doc`. */
.verif-doc--recap { position: static; max-height: none; }
.verif-recap { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }
.verif-recap__dl {
  margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4); align-items: baseline;
}
.verif-recap__dl dt { color: var(--c-muted); font-size: var(--fs-sm); }
.verif-recap__dl dd { margin: 0; }
.verif-recap__h {
  margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: 0.04em;
}
.verif-recap__docs, .verif-recap__tree { border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.verif-recap__upload { margin-top: var(--sp-3); display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ─────────────────────────────────────────────────────────────────────────
   LENUTA-F-112 — Page Feedback / Nouveautés (/feedback)
   Réutilise les tokens du thème (couleurs, radius, espacements). Badges de
   statut feedback + type + importance nouveauté, cartes et lignes.
   ───────────────────────────────────────────────────────────────────────── */
.fbk-page { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.fbk-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.fbk-section__h { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.fbk-section__lead { margin: 0 0 var(--sp-2); color: var(--c-muted); font-size: var(--fs-sm); }
.fbk-empty { color: var(--c-muted); font-style: italic; padding: var(--sp-4) 0; }

/* Badges — socle commun + variantes */
.fbk-badge {
  display: inline-block; padding: 0.12em 0.6em; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--c-neutral-bg); color: var(--c-neutral-ink);
}
/* Statut feedback */
.fbk-status--new         { background: var(--c-info-bg);    color: var(--c-info-ink); }
.fbk-status--in_progress { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.fbk-status--resolved    { background: var(--c-success-bg); color: var(--c-success-ink); }
.fbk-status--wont_fix    { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
/* Type feedback */
.fbk-type--bug      { background: var(--c-danger-bg);  color: var(--c-danger-ink); }
.fbk-type--feature  { background: var(--c-success-bg); color: var(--c-success-ink); }
.fbk-type--question { background: var(--c-info-bg);    color: var(--c-info-ink); }
.fbk-type--other    { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
/* Env d'origine feedback (LENUTA-F-115) — BDD partagée cross-env : le badge
   désambiguïse l'env de saisie (prod = vert, test = ambre, dev = neutre). */
.badge-env-prod { background: var(--c-success-bg); color: var(--c-success-ink); letter-spacing: 0.04em; }
.badge-env-test { background: var(--c-warning-bg); color: var(--c-warning-ink); letter-spacing: 0.04em; }
.badge-env-dev  { background: var(--c-neutral-bg); color: var(--c-neutral-ink); letter-spacing: 0.04em; }
/* Catégorie sémantique feedback (LENUTA-F-122 Volet 1) */
.fbk-cat--bug      { background: var(--c-danger-bg);  color: var(--c-danger-ink); }
.fbk-cat--idee     { background: var(--c-success-bg); color: var(--c-success-ink); }
.fbk-cat--question { background: var(--c-info-bg);    color: var(--c-info-ink); }
/* Réaction Margo sur la réponse Stef (LENUTA-F-122 Volet 3) */
.fbk-react--up   { background: var(--c-success-bg); color: var(--c-success-ink); }
.fbk-react--down { background: var(--c-danger-bg);  color: var(--c-danger-ink); }
/* Importance nouveauté (badge) */
.fbk-imp-badge--low    { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
.fbk-imp-badge--normal { background: var(--c-info-bg);    color: var(--c-info-ink); }
.fbk-imp-badge--high   { background: var(--c-warning-bg); color: var(--c-warning-ink); }

/* Formulaires (feedback + admin nouveauté) */
.fbk-form { display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4); }
.fbk-form__row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.fbk-form__actions { display: flex; justify-content: flex-end; }
.fbk-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 8rem; }
.fbk-field--grow { flex: 1 1 14rem; }
.fbk-field__lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fbk-field input, .fbk-field select, .fbk-field textarea {
  font: inherit; padding: 0.5em 0.65em; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-ink); width: 100%;
}
.fbk-field textarea { resize: vertical; }

/* Liste feedback */
.fbk-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fbk-row { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.fbk-row__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fbk-row__subject { font-weight: 600; color: var(--c-ink); }
/* LENUTA-F-125 — titre sur sa propre ligne, un cran plus lisible. */
.fbk-row__title { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--c-ink); }
.fbk-row__title-pre { color: var(--c-muted); font-weight: 600; }
.fbk-row__date { color: var(--c-muted); font-size: var(--fs-xs); }
.fbk-row__body { margin: 0; color: var(--c-ink-soft); white-space: pre-wrap; }
/* LENUTA-F-191 — miniature de la capture d'écran jointe (feedback Margo #26). */
.fbk-row__attachment { display: inline-block; }
.fbk-row__attachment-thumb {
  max-width: 220px;
  max-height: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  object-fit: contain;
}
/* LENUTA-F-125 — ligne identité (tous) : email + date, discrète, rien d'actionnable. */
.fbk-row__identity { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fbk-row__author { color: var(--c-muted); font-size: var(--fs-xs); }
.fbk-row__identity .badge-env-test,
.fbk-row__identity .badge-env-prod,
.fbk-row__identity .badge-env-dev { margin-left: auto; }
/* LENUTA-F-125 — bloc triage (Stef only), séparé visuellement de la carte Margo. */
.fbk-row__triage-block { margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-line-strong); }
.fbk-row__triage-lbl { display: block; font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-2); }
/* Mobile : grille 2 colonnes (statut/priorité, puis répondre/archiver) au lieu
   du wrap en escalier. Desktop élargit via desktop.css. */
.fbk-row__triage-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3); align-items: start; }
.fbk-row__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fbk-row__triage { display: flex; flex-direction: column; gap: var(--sp-1); }
.fbk-row__triage select { padding: 0.3em 0.5em; border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); font: inherit; background: var(--c-surface); }

/* Nouveautés */
.fbk-nouv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fbk-nouv { background: var(--c-surface); border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong);
  border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.fbk-nouv.fbk-imp--high   { border-left-color: var(--c-warning); }
.fbk-nouv.fbk-imp--normal { border-left-color: var(--c-primary); }
.fbk-nouv.fbk-imp--low    { border-left-color: var(--c-line-strong); }
.fbk-nouv__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fbk-nouv__title { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--c-ink); }
.fbk-nouv__date { margin-left: auto; color: var(--c-muted); font-size: var(--fs-xs); }
.fbk-nouv__cat { color: var(--c-accent); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.fbk-nouv__body { margin: 0; color: var(--c-ink-soft); white-space: pre-wrap; }
.fbk-nouv__draft { align-self: flex-start; font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-warning-ink); background: var(--c-warning-bg); padding: 0.1em 0.5em; border-radius: var(--radius-pill); }

/* Barre admin (publication nouveauté) */
.fbk-admin { border: 1px dashed var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); }
.fbk-admin__summary { cursor: pointer; font-weight: 600; color: var(--c-primary); font-size: var(--fs-sm); }
.fbk-admin__form { margin-top: var(--sp-3); }

/* F-120 archive/reply ------------------------------------------------------- */
.fbk-row--archived { opacity: 0.7; }

.fbk-row__reply { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface); border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--radius) var(--radius) 0; }
.fbk-row__reply-lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary);
  text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: var(--sp-1); }
.fbk-row__reply-text { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-sm); white-space: pre-wrap; }
.fbk-row__reply-date { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--sp-1); display: block; }
/* Pied de la zone réponse : date + badge réaction Margo côte à côte (F-122) */
.fbk-row__reply-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); }
/* Zone boutons réaction Margo (F-122 Volet 3) */
.fbk-row__reactions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.fbk-row__react-lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* LENUTA-F-125 — cible tactile ≥ 44 px pour l'usage iPhone atelier. */
.fbk-react-btn { background: none; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); min-width: 44px; min-height: 44px; padding: 0.4em 0.6em; font-size: 1.25rem; cursor: pointer; line-height: 1; transition: background 0.12s; }
.fbk-react-btn:hover { background: var(--c-surface-2); }
.fbk-react-btn--active { background: var(--c-primary-light, var(--c-info-bg)); border-color: var(--c-primary); }
/* Champ type-de-retour (formulaires page + widget) — F-122 Volet 1 */
.fbk-form__cat { border: none; padding: 0; margin: 0; }
.fbk-form__cat-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
/* LENUTA-F-125 — segmented control tactile : cible ≥ 44 px (guideline iOS),
   boutons souples (flex: 1) sur mobile atelier. */
.fbk-form__cat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
  flex: 1 1 6rem; min-height: 44px; padding: 0.5em 0.9em;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  cursor: pointer; font-size: var(--fs-base); user-select: none;
  background: var(--c-surface); color: var(--c-ink); transition: background 0.12s; }
.fbk-form__cat-btn:has(input:checked) { background: var(--c-primary-light, var(--c-info-bg)); border-color: var(--c-primary); font-weight: 600; }
.fbk-form__cat-btn input[type="radio"] { display: none; }

.fbk-row__reply-form { margin-top: var(--sp-2); }
.fbk-row__reply-summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-accent); user-select: none; }
.fbk-row__reply-textarea { width: 100%; min-height: 4rem; margin-top: var(--sp-2);
  font-family: inherit; font-size: var(--fs-sm); padding: var(--sp-2);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: var(--c-bg); color: var(--c-ink); resize: vertical; }
.fbk-row__reply-btn { margin-top: var(--sp-2); }

.fbk-row__archive-btn { font-size: var(--fs-xs); }

/* ── LENUTA-F-142 — Fil de conversation feedback ──────────────────────────── */
/* Statut « en attente de précisions » : accent d'attention (ambre soutenu). */
.fbk-status--awaiting_reply { background: var(--c-warning-bg); color: var(--c-warning-ink); }
/* Signal Stef « Margo a répondu ». */
.fbk-msg-new { background: var(--c-info-bg); color: var(--c-info-ink); }
/* Fil : messages empilés, plus ancien en haut. Bulles distinctes par auteur. */
.fbk-row__thread { display: flex; flex-direction: column; gap: var(--sp-2);
  margin: var(--sp-2) 0 0; }
.fbk-msg { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--c-surface-2); border: 1px solid var(--c-line); }
/* Stef aligné à gauche (accent primaire), Margo décalé (accent neutre). */
.fbk-msg--stef  { border-left: 3px solid var(--c-primary); }
.fbk-msg--margo { border-left: 3px solid var(--c-accent); margin-left: var(--sp-4); }
.fbk-msg__head { display: flex; align-items: center; gap: var(--sp-2); }
.fbk-msg__author { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink); }
.fbk-msg__date { font-size: var(--fs-xs); color: var(--c-muted); margin-left: auto; }
.fbk-msg__body { margin: var(--sp-1) 0 0; color: var(--c-ink-soft); font-size: var(--fs-sm); white-space: pre-wrap; }
/* LENUTA-F-147 — bouton effacer un message du fil (discret, confirmation HTMX). */
.fbk-msg__del-form { display: inline-flex; margin: calc(-1 * var(--sp-1)) 0; }
.fbk-msg__del { background: none; border: none; cursor: pointer; padding: 0 var(--sp-1);
  min-width: 2rem; min-height: 2rem; font-size: 0.95rem; line-height: 1; opacity: 0.55;
  border-radius: var(--radius-sm); transition: opacity 0.12s, background 0.12s; }
.fbk-msg__del:hover { opacity: 1; background: var(--c-danger-bg); }
/* LENUTA-BUG-079 — badge réaction Margo affiché sous le fil (signal « elle a lu »). */
.fbk-row__react-badge { margin-top: var(--sp-2); }
/* Zone de réponse Margo (droit de réponse quand précisions demandées). */
.fbk-row__margo-reply { margin-top: var(--sp-2); padding: var(--sp-3);
  background: var(--c-warning-bg); border: 1px solid var(--c-warning);
  border-radius: var(--radius); }
.fbk-row__margo-prompt { margin: 0 0 var(--sp-2); font-size: var(--fs-sm);
  font-weight: 600; color: var(--c-warning-ink); }
/* LENUTA-BUG-079 — actions de triage (réponse + archivage) en pleine largeur,
   HORS de la grille 2-col : le form réponse était réduit à une colonne étroite
   et décentrée sur desktop (grid-column max-content). Ici pleine largeur. */
.fbk-row__triage-actions { display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-3); }
.fbk-row__triage-actions .fbk-row__reply-form { margin-top: 0; }
/* Barre d'actions sous le textarea (bouton aligné à droite). */
.fbk-row__reply-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-2); }
.fbk-row__reply-actions .fbk-row__reply-btn { margin-top: 0; }
.fbk-row__archive { display: flex; }
/* Case « demander des précisions » (form réponse Stef). */
.fbk-row__clarif { display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); cursor: pointer; }
.fbk-row__clarif input { width: auto; min-width: 20px; min-height: 20px; }

.fbk-archive-toggle { display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.fbk-archive-toggle__label { font-size: var(--fs-sm); color: var(--c-muted); font-style: italic; }

/* ── LENUTA-F-087 — UX scan mobile ────────────────────────────────────────── */
.scan-bar { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); flex-wrap: wrap; }
.scan-bar__btn { display: inline-flex; align-items: center; gap: 0.4em; }
.scan-bar__guide { min-width: 2rem; padding: 0.3em 0.6em; font-size: 1rem; line-height: 1; border-radius: 50%; }

.scan-guide { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.scan-guide__title { font-weight: 600; margin: 0 0 var(--sp-2); }
.scan-guide__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--sp-1); }

.blur-warning { background: var(--c-warning-bg, #fff8e0); border: 1px solid var(--c-warning, #e9a800); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.blur-warning p { margin: 0 0 var(--sp-2); font-weight: 500; }
.blur-warning__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.scan-preview { margin-top: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.scan-preview__img-wrap { position: relative; background: var(--c-surface-2); }
.scan-preview__img { display: block; max-width: 100%; max-height: 55vh; object-fit: contain; margin: 0 auto; }
.scan-preview__badge { position: absolute; top: var(--sp-2); right: var(--sp-2); background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 0.2em 0.5em; }
.scan-preview__no-img { padding: var(--sp-4); text-align: center; }
.scan-preview__fields { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); }
.scan-preview__fields-title { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--sp-2); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.scan-preview__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.scan-preview__dl dt { font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.scan-preview__dl dd { margin: 0; }
.scan-preview__no-fields { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.scan-preview__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }

.scan-preview-loading { padding: var(--sp-4); text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }

/* ── LENUTA-F-126 — page /scan standalone ─────────────────────────────────── */
.scan-pg { min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-bg); }
.scan-pg__hd { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.scan-pg__brand { font-weight: 700; font-size: 1.1rem; color: var(--c-accent, #0a6060); text-decoration: none; }
.scan-pg__guide-btn { background: none; border: 1px solid var(--c-line); border-radius: 50%; width: 2rem; height: 2rem; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--c-text); }
.scan-pg__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }

.scan-choice { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-4); }
.scan-choice__title { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 0; }
.scan-choice__subtitle { font-size: var(--fs-sm); color: var(--c-muted); text-align: center; margin: 0; }
.scan-choice__btns { display: flex; flex-direction: column; gap: var(--sp-3); }
.scan-choice__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 72px; padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface); border: 2px solid var(--c-line);
  border-radius: var(--radius); cursor: pointer;
  font-size: 1.05rem; font-weight: 600; color: var(--c-text);
  text-align: left; transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.scan-choice__btn:hover, .scan-choice__btn:focus-visible { border-color: var(--c-accent, #0a6060); background: var(--c-surface-2); }
.scan-choice__btn-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.scan-choice__guide { width: 100%; max-width: 480px; }

.scan-pg__loading { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); color: var(--c-muted); }
.scan-pg__loading-icon { font-size: 2rem; animation: scan-spin 1s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }

.scan-pg__preview { width: 100%; max-width: 480px; }

.scan-pg__success { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
.scan-pg__success-icon { font-size: 3rem; }
.scan-pg__success-title { font-size: 1.4rem; font-weight: 700; margin: 0; }
.scan-pg__success-sub { color: var(--c-muted); margin: 0; }

.scan-pg__error { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.scan-pg__error-icon { font-size: 2.5rem; }
.scan-pg__error-msg { color: var(--c-muted); margin: 0; font-size: var(--fs-sm); }

/* ── /scan v2 « guichet » (LENUTA-F-159, variante A validée Stef 13/07) ──────
   Hub 2 sections + destination annoncée + écrans post-envoi honnêtes.
   Couleurs de flux : réutilise --c-fourn / --c-client / --c-prix (:root). */

/* Variables de flux (portées par un ancêtre .flux-* ou l'élément lui-même) */
.flux-fourn { --flux: var(--c-fourn); --flux-bg: var(--c-fourn-bg); }
.flux-emise { --flux: var(--c-client); --flux-bg: var(--c-client-bg); }
.flux-bc    { --flux: var(--c-prix);  --flux-bg: var(--c-prix-bg); }
/* IDEA-004 — pile de documents mélangés (transverse, couleur accent) */
.flux-pile  { --flux: var(--c-accent); --flux-bg: var(--c-info-bg); }

/* Topbar olive (coque v2 mobile) */
.scan-top {
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.scan-top__brand { color: #fff; font-weight: 800; font-size: var(--fs-base); text-decoration: none; letter-spacing: 0.02em; }
.scan-top__brand small { font-weight: 400; opacity: 0.75; margin-left: var(--sp-1); }
.scan-top__actions { display: flex; align-items: center; gap: var(--sp-3); }
.scan-top__guide-btn {
  background: none; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff;
  border-radius: 50%; width: 2rem; height: 2rem; font-size: 1rem; line-height: 1; cursor: pointer;
}
.scan-top__exit { color: #fff; opacity: 0.85; font-size: var(--fs-sm); text-decoration: none; }

/* Corps : le hub s'étire (plus de centrage vertical du choix binaire F-126) */
.scan-pg__body--guichet { justify-content: flex-start; align-items: center; }

/* Hub */
.scan-hub { width: 100%; max-width: 480px; display: flex; flex-direction: column; }
.scan-hub__title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-1); }
.scan-hub__sub { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.hub-sec {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); margin: var(--sp-4) 0 var(--sp-2);
}
.hub-sec--mes { color: var(--c-accent); }
.hub-sec small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* Guichet : rangée pleine largeur, bord gauche couleur du flux, destination */
.guichet {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  background: var(--c-surface); border: 1px solid var(--c-line); border-left: 5px solid var(--flux);
  border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-3);
  font: inherit; color: var(--c-ink); cursor: pointer; min-height: 88px;
}
.guichet:hover, .guichet:focus-visible { background: var(--c-surface-2); }
.guichet__icon { font-size: 1.7rem; flex: none; }
.guichet__txt { flex: 1 1 auto; min-width: 0; }
.guichet__name { display: block; font-weight: 700; font-size: var(--fs-base); }
.guichet__what { display: block; color: var(--c-muted); font-size: var(--fs-sm); margin-top: 2px; }
.guichet__dest {
  display: inline-flex; align-items: center; margin-top: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--flux);
  background: var(--flux-bg); border-radius: var(--radius-pill); padding: 2px 10px;
}
.guichet__cam { flex: none; color: var(--c-muted); font-size: 1.2rem; }

/* Badge de flux (rappel du type sur chaque écran post-capture) */
.flux-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 700; color: var(--flux);
  background: var(--flux-bg); border-radius: var(--radius-pill); padding: 3px 12px;
}

/* Attentes (netteté / envoi) */
.scan-wait { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 480px; }
.scan-wait__msg { font-weight: 600; margin: var(--sp-3) 0 0; }
.scan-wait__sub { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; line-height: var(--lh); }

/* Écran post-envoi : carte statut + stepper + destination */
.scan-done { width: 100%; max-width: 480px; display: flex; flex-direction: column; }
.done-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-4);
}
.done-card__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.done-card__check { font-size: 2rem; line-height: 1; }
.done-card__title { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-2) 0 var(--sp-1); }
.done-card__status { color: var(--c-ink-soft); font-size: var(--fs-sm); margin: 0; line-height: var(--lh); }
.done-card__where {
  margin-top: var(--sp-4); background: var(--c-surface-2); border-radius: var(--radius);
  padding: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: var(--lh);
}
.done-card__where a { color: var(--c-primary); font-weight: 600; }

/* Stepper compact (pastilles — mêmes états que le stepper F-060/F-158) */
.scan-steps { display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-4) 0 0; flex-wrap: wrap; }
.scan-step {
  font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--c-neutral-bg); color: var(--c-muted);
  border: 1px solid transparent;
}
.scan-step--done { background: var(--c-success-bg); color: var(--c-success-ink); }
.scan-step--current { background: var(--c-primary-50); color: var(--c-primary); border-color: var(--c-primary-100); }
.scan-step--error { background: var(--c-danger-bg); color: var(--c-danger); }
.scan-steps__arrow { color: var(--c-line-strong); font-size: var(--fs-xs); }

/* CTA pleine largeur + lien discret « changer de type » + compteur session */
.scan-cta { display: block; width: 100%; text-align: center; margin-top: var(--sp-3); min-height: 48px; font-size: var(--fs-base); }
.scan-switch {
  background: none; border: none; color: var(--c-muted); font: inherit; font-size: var(--fs-sm);
  text-decoration: underline; cursor: pointer; margin-top: var(--sp-3); align-self: center;
}
.scan-tally {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm); color: var(--c-muted);
}
.scan-tally--hub { margin-top: auto; }

/* LENUTA-F-162 — pages du document (boucle multi-photos) */
.scan-pages { display: flex; flex-direction: column; }
.scan-pages__title { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); }
.scan-pages__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2); margin: 0 0 var(--sp-2);
}
.scan-pages__item { margin: 0; }
.scan-pages__item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius, 6px);
  background: var(--c-surface);
}
.scan-pages__item figcaption {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px;
}
.scan-pages__remove {
  background: none; border: none; color: var(--c-muted); font: inherit;
  cursor: pointer; padding: 2px 6px; min-height: 32px;
}
.scan-pages__hint { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-3); }
.scan-pages__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.scan-pages__actions .btn { min-height: 48px; }

/* ── LENUTA-IDEA-004 — écran de confirmation du découpage de la pile ──────── */
.hub-sec--pile { color: var(--c-accent); }
.scan-batch { display: flex; flex-direction: column; }
.scan-batch__title { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); }
.scan-batch__sub { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); line-height: var(--lh); }
.scan-batch__blocked {
  background: var(--c-warning-bg, var(--c-neutral-bg)); color: var(--c-ink-soft);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); margin: 0 0 var(--sp-2);
}

/* Carte « un document proposé » */
.scan-doc {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 5px solid var(--c-line-strong); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.scan-doc--uncertain { border-left-color: var(--c-accent); }
.scan-doc--todo { border-left-color: var(--c-danger, var(--c-accent)); }
.scan-doc__hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.scan-doc__n { font-weight: 700; font-size: var(--fs-base); }
.scan-doc__pages { font-size: var(--fs-xs); color: var(--c-muted); }
.scan-doc__thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-2); margin: var(--sp-2) 0;
}
.scan-doc__thumb {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius, 6px); background: var(--c-surface);
}
.scan-doc__type { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.scan-doc__type select {
  flex: 1; min-height: 44px; font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 0 var(--sp-2);
  background: var(--c-surface); color: var(--c-ink);
}
.scan-doc__num { font-size: var(--fs-xs); color: var(--c-muted); margin: var(--sp-1) 0 0; }
.scan-doc__warn { font-size: var(--fs-sm); color: var(--c-accent); margin: var(--sp-2) 0 0; line-height: var(--lh); }
.scan-doc--todo .scan-doc__warn { color: var(--c-danger, var(--c-accent)); }
.scan-doc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.scan-doc__act {
  background: var(--c-surface-2); border: 1px solid var(--c-line); color: var(--c-ink-soft);
  font: inherit; font-size: var(--fs-sm); border-radius: var(--radius-pill);
  padding: 8px 14px; min-height: 44px; cursor: pointer;
}
.scan-doc__act:hover, .scan-doc__act:focus-visible { background: var(--c-surface); }

/* Récap de fin de lot */
.scan-recap { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.scan-recap__item {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
}
.scan-recap__item--err { border-color: var(--c-danger, var(--c-line-strong)); }
.scan-recap__label { font-weight: 600; font-size: var(--fs-sm); flex: 1; }
.scan-recap__link { color: var(--c-primary); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.scan-recap__err { color: var(--c-danger, var(--c-muted)); font-size: var(--fs-xs); width: 100%; }

/* ── LENUTA-F-168 · Zone danger (suppression / annulation de BC) ──────────────
   Mobile-first. La carte .bc-danger reprend .card puis reçoit un accent rouge.
   .btn--danger (outline rouge) existe déjà ; on ajoute la variante pleine
   .btn--danger-solid pour la suppression définitive (action la plus grave). */
.bc-danger {
  border: 1px solid var(--c-danger);
  border-top: 3px solid var(--c-danger);
}
.bc-danger-title { color: var(--c-danger-ink); margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.bc-danger .muted { margin: 0 0 var(--sp-3); }

/* Bloc de confirmation replié (disclosure natif — pas de JS pour l'ouverture). */
.bc-danger-confirm { margin-top: var(--sp-3); }
.bc-danger-confirm > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;               /* cible tactile iPad */
  cursor: pointer;
  list-style: none;
}
.bc-danger-confirm > summary::-webkit-details-marker { display: none; }
.bc-danger-confirm[open] > summary { margin-bottom: var(--sp-3); }

.bc-danger-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.bc-danger-form label { font-size: var(--fs-sm); }
.bc-danger-form textarea,
.bc-danger-form input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md, 8px);
  font: inherit;
}
.bc-danger-form textarea { min-height: 88px; resize: vertical; }
.bc-danger-list { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); }
.bc-danger-list li { margin-bottom: var(--sp-1); }
.bc-danger-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Bloc « suppression définitive » — séparé visuellement de l'action standard. */
.bc-danger-ultimate {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-danger);
}

/* Bouton plein rouge — réservé à la suppression définitive (action ultime). */
.btn--danger-solid {
  background: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}
.btn--danger-solid:hover { background: var(--c-danger-ink); border-color: var(--c-danger-ink); color: #fff; }
.btn--danger-solid:disabled { background: var(--c-line-strong); border-color: var(--c-line-strong); color: var(--c-muted); cursor: not-allowed; }

/* -----------------------------------------------------------------------------
   LENUTA-F-171 — Cockpit factures émises
   Bandeau « pipeline » du cycle de vie (brouillon → encaissée + archivées en
   segment détaché), barre de tri, badges de statut factures émises, actions de
   ligne. Layout scopé .ci-emission ; primitives (.ci-st, .sr-only) globales.
   -------------------------------------------------------------------------- */

/* Texte lecteur d'écran uniquement (en-tête de colonne Actions, etc.). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Badges statut factures émises (draft → cancelled) + dérivés cockpit. */
.ci-st--draft { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
.ci-st--issued { background: var(--c-primary-50); color: var(--c-primary); }
.ci-st--sent { background: var(--c-primary-100); color: var(--c-primary-700); }
.ci-st--partially_paid { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.ci-st--paid { background: var(--c-success-bg); color: var(--c-success-ink); }
.ci-st--cancelled { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.ci-st--imported { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
.ci-st--relance { background: var(--c-warning); color: #fff; }
.ci-st--archivee { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }

/* Bandeau pipeline. Le flux = grille à joints fins (gap 1px sur fond ligne) ;
   « Archivées » = carte détachée en pointillés (hors du flux courant). */
.ci-emission .ckpt {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.ci-emission .ckpt__flow {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ci-emission .ckpt__step { display: flex; background: var(--c-surface); min-width: 0; }
.ci-emission .ckpt__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-surface);
}
.ci-emission .ckpt__card:hover { background: var(--c-surface-2); }
.ci-emission .ckpt__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.ci-emission .ckpt__count {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ci-emission .ckpt__amount {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
/* Relance en souffrance : teinte alerte (ambre), lisible sans crier. */
.ci-emission .ckpt__card.is-alert { background: var(--c-warning-bg); }
.ci-emission .ckpt__card.is-alert .ckpt__label,
.ci-emission .ckpt__card.is-alert .ckpt__count { color: var(--c-warning-ink); }
.ci-emission .ckpt__card.is-alert:hover { background: #f6e5b8; }
/* Segment actif = filtre posé (re-cliquer l'enlève). */
.ci-emission .ckpt__card.is-active { background: var(--c-primary); }
.ci-emission .ckpt__card.is-active .ckpt__label { color: rgba(255, 255, 255, 0.8); }
.ci-emission .ckpt__card.is-active .ckpt__count,
.ci-emission .ckpt__card.is-active .ckpt__amount { color: #fff; }
/* Archivées : hors flux, discret. */
.ci-emission .ckpt__card--aside {
  flex: 0 0 auto;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  background: transparent;
  min-width: 130px;
}
.ci-emission .ckpt__card--aside .ckpt__count { color: var(--c-muted); }
.ci-emission .ckpt__card--aside .ckpt__amount { color: var(--c-muted); }
.ci-emission .ckpt__card--aside.is-active { border-style: solid; }

/* Liens secondaires (coordonnées, modèle) sous le bandeau. */
.ci-emission .ckpt-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

/* Barre de tri + toggle archivées. */
.ci-emission .ckpt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ci-emission .ckpt-toolbar__sort { display: flex; align-items: flex-end; gap: var(--sp-3); }
.ci-emission .ckpt-toolbar__sort label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.ci-emission .ckpt-toolbar__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.ci-emission .ckpt-toolbar__toggle.is-on { color: var(--c-primary); font-weight: 600; }

/* Table : défilement horizontal sans casser la page (motif .report). */
.ci-emission .ckpt-table { overflow-x: auto; }

/* LENUTA-BUG-092 — surcouche de la grammaire `.tbl` (desktop.css, référence
   factures reçues) : hiérarchie typo (numéro/montant gras, client intermédiaire,
   date discrète), chips homogènes, actions compactes qui ne dominent plus. */
.ci-emission .ckpt-client { font-weight: 500; }
/* Respiration entre le montant et la colonne d'actions. */
.ci-emission .tbl td.num { padding-right: var(--sp-5); }
.ci-emission .ckpt-statut { white-space: nowrap; }
.ci-emission .ckpt-statut .ci-st { margin-right: var(--sp-1); min-height: 22px; }
.ci-emission .ckpt-actions form { display: inline; margin: 0; }
/* Famille d'action unique (esprit .cat-act du catalogue, en verbe texte) :
   discrète au repos, révélée au survol de la ligne — la lecture reste sur
   les données, pas sur le bouton. */
.ci-emission .ckpt-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ci-emission tbody tr:hover .ckpt-act { opacity: 0.9; }
.ci-emission .ckpt-act:hover { opacity: 1; color: var(--c-primary-700); border-color: var(--c-primary); }
/* Focus clavier : pleine visibilité, symétrique au hover (l'outline global
   :focus-visible d'app.css fournit déjà l'anneau). */
.ci-emission .ckpt-act:focus-visible { opacity: 1; }
/* iPad / tactile : cible tap pleine + action toujours visible (pas de hover). */
@media (pointer: coarse) {
  .ci-emission .ckpt-act { min-height: var(--tap); opacity: 1; }
}
.ci-emission tr.is-archived td { opacity: 0.62; }
.ci-emission tr.is-cancelled td { color: var(--c-muted); }
.ci-emission tr.is-cancelled td a { color: var(--c-muted); }

/* Mobile / iPad portrait étroit : le pipeline passe en 2 colonnes. */
@media (max-width: 680px) {
  .ci-emission .ckpt { flex-direction: column; }
  .ci-emission .ckpt__flow { grid-template-columns: repeat(2, 1fr); }
  /* 5 segments en 2 colonnes : le dernier prend la rangée entière (pas de
     cellule vide qui laisse voir le fond de la grille). */
  .ci-emission .ckpt__step:last-child { grid-column: 1 / -1; }
  .ci-emission .ckpt__card--aside { min-width: 0; }
  .ci-emission .ckpt-toolbar { align-items: stretch; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   LENUTA-F-177 — Paiement des factures REÇUES.
   Bandeau synthèse (grammaire cockpit F-171, scindé `.fr-ckpt` scopé
   `.factures-recues` pour ne pas toucher `.ci-emission` — restyle BUG-092 en
   cours côté émises), chips paiement (`.fr-pay`, primitives globales : la
   page détail vit sous `.verif`) et barre d'action détail (`.fr-paybar`).
   -------------------------------------------------------------------------- */
.fr-pay--paye { background: var(--c-success-bg); color: var(--c-success-ink); }
.fr-pay--ambre { background: var(--c-warning); color: #fff; }
.fr-pay--rouge { background: var(--c-danger); color: #fff; }

.factures-recues .fr-ckpt { margin: 0 0 var(--sp-5); }
.factures-recues .fr-ckpt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.factures-recues .fr-ckpt__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
/* Toggle de période (année / mois) — segmented control discret. */
.factures-recues .fr-ckpt__periods {
  display: inline-flex;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.factures-recues .fr-ckpt__period {
  padding: 0.3em 0.9em;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-muted);
}
.factures-recues .fr-ckpt__period.is-on {
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
}
/* Les 3 cartes : grille à joints fins (même motif que le pipeline F-171). */
.factures-recues .fr-ckpt__flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.factures-recues .fr-ckpt__step { display: flex; background: var(--c-surface); min-width: 0; }
.factures-recues .fr-ckpt__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-surface);
}
.factures-recues .fr-ckpt__card:hover { background: var(--c-surface-2); }
.factures-recues .fr-ckpt__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.factures-recues .fr-ckpt__count {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.factures-recues .fr-ckpt__amount {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.factures-recues .fr-ckpt__sub { font-size: var(--fs-xs); color: var(--c-danger-ink); }
/* Retard ≥ 25 j dans « encore à payer » : teinte alerte (ambre). */
.factures-recues .fr-ckpt__card.is-alert { background: var(--c-warning-bg); }
.factures-recues .fr-ckpt__card.is-alert .fr-ckpt__label,
.factures-recues .fr-ckpt__card.is-alert .fr-ckpt__count { color: var(--c-warning-ink); }
.factures-recues .fr-ckpt__card.is-alert:hover { background: #f6e5b8; }
/* Carte active = filtre posé (re-cliquer l'enlève). */
.factures-recues .fr-ckpt__card.is-active { background: var(--c-primary); }
.factures-recues .fr-ckpt__card.is-active .fr-ckpt__label { color: rgba(255, 255, 255, 0.8); }
.factures-recues .fr-ckpt__card.is-active .fr-ckpt__count,
.factures-recues .fr-ckpt__card.is-active .fr-ckpt__amount,
.factures-recues .fr-ckpt__card.is-active .fr-ckpt__sub { color: #fff; }

/* Table : défilement horizontal dans son conteneur (motif .ckpt-table F-171). */
.factures-recues .fr-table { overflow-x: auto; }
/* Colonne État : chip statut + chip paiement côte à côte. */
.factures-recues .fr-statut .badge,
.factures-recues .fr-statut .status-badge { margin-right: var(--sp-1); }
/* Actions de ligne : forms inline à côté du bouton Supprimer. */
.factures-recues .td-actions { white-space: nowrap; }
.factures-recues .td-actions form { display: inline; margin: 0; }

/* Barre paiement de la page détail (sous `.verif`). */
.fr-paybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.fr-paybar form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.fr-paybar label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Mobile / iPad portrait étroit (coque v2) : cartes empilées. */
@media (max-width: 680px) {
  .factures-recues .fr-ckpt__flow { grid-template-columns: 1fr; }
}