/* ══════════════════════════════════════════════════════════════
   FX — Factures V1 (J2). Préfixe .fx- UNIQUEMENT — jamais de fuite.
   Réutilise les composants DUX (.dux-sheet, .dux-btn 56px, .dux-actions…)
   et les variables du thème existant.
   Règles : boutons ≥ 48 px, critiques ≥ 56 px ; pastilles mot+contraste.
   ══════════════════════════════════════════════════════════════ */

/* ── Bandeaux ── */
.fx-bandeau {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line, #e5ddcf); border-radius: 16px;
  background: var(--card, #fff); padding: 14px 16px; margin: 0 0 10px;
  min-height: 64px; cursor: pointer; color: inherit; font: inherit;
}
.fx-bandeau:active { transform: scale(0.99); }
.fx-bandeau-top { display: flex; align-items: baseline; gap: 8px; }
.fx-bandeau-amount { font-size: 24px; font-weight: 800; }
.fx-bandeau-sub { font-size: 15px; font-weight: 600; }
.fx-bandeau-lines { margin-top: 4px; font-size: 14px; color: var(--ink-2, #555); }
.fx-bandeau.fx-bandeau-rel { border-color: var(--gold-line, #c9a96a); background: var(--gold-weak, #faf5ea); }
.fx-bandeau.fx-bandeau-dev { border-style: dashed; }

/* ── Puces de filtre (48 px, 1 tap, choix persisté) ── */
#fx-chips .chip { min-height: 48px; }

/* ── Recherche ── */
.fx-search-row { display: flex; gap: 8px; margin: 4px 0 12px; }
.fx-search-row .search-input { flex: 1; }
.fx-mic {
  flex: none; width: 52px; min-height: 48px; border-radius: 14px;
  border: 1px solid var(--line, #e5ddcf); background: var(--card, #fff);
  font-size: 22px; cursor: pointer;
}
.fx-mic.fx-rec { background: #fde8e8; border-color: #c0392b; }

/* ── Cartes facture ── */
.fx-card {
  border: 1px solid var(--line, #e5ddcf); border-radius: 16px;
  background: var(--card, #fff); padding: 14px 16px; margin: 0 0 10px;
  min-height: 112px; cursor: pointer;
}
.fx-card:active { transform: scale(0.995); }
.fx-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fx-client { font-size: 17px; font-weight: 700; }
.fx-card-mid { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.fx-reste-label { font-size: 14px; color: var(--ink-2, #555); }
.fx-reste { font-size: 24px; font-weight: 800; }
.fx-card-sub { margin-top: 6px; font-size: 13px; color: var(--ink-3, #777); }
.fx-rappel { color: var(--gold-bright, #8a6d2f); font-weight: 600; }
/* FIX-PASS J2 (P2) : chips « Rappel le… » tappables — aspect d'origine conservé */
button.fx-chipbtn { font: inherit; cursor: pointer; }
button.fx-rappel { background: none; border: none; padding: 0; }
.fx-recu { color: #7a5c00; font-weight: 600; }

/* ── Pastilles : mot + contraste, jamais couleur seule ── */
.fx-pill {
  flex: none; display: inline-flex; align-items: center;
  min-height: 48px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong, #999); background: #f4f1ea;
  color: #1a1a1a; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.fx-pill-warn { border-color: #8a3d00; background: #fdeeda; color: #7a3400; }
.fx-pill-ok { border-color: #1e6b3a; background: #e3f3e8; color: #14522c; }
.fx-pill-part { border-color: #8a6d2f; background: #faf3df; color: #6d551f; }
.fx-pill-brouillon { border-color: #666; background: #eee; color: #333; }
.fx-pill-file { border-color: #2f5f8a; background: #e2eefb; color: #1d4568; }
.fx-pill-litig { border-color: #8a1f1f; background: #fbe3e3; color: #701616; }
.fx-pill-tropp { border-color: #5b2f8a; background: #efe6fb; color: #47216e; }

/* ── FAB ＋ 64 px ── */
.fx-fab {
  position: fixed; right: 18px; bottom: calc(var(--nav-h, 76px) + 18px); z-index: 40;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold, #c9a96a); border: 0; color: #1a1a1a;
  font-size: 34px; font-weight: 300; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.fx-fab:active { transform: scale(0.94); }

/* ── Fiche ── */
.fx-fiche-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.fx-fiche-client { font-size: 22px; margin: 0; }
.fx-menu-btn {
  flex: none; width: 52px; min-height: 52px; border-radius: 14px;
  border: 1px solid var(--line, #e5ddcf); background: var(--card, #fff);
  font-size: 22px; letter-spacing: 2px; cursor: pointer; color: inherit;
}
.fx-fiche-pastille { margin: 4px 0 10px; }
.fx-fiche-montant {
  border: 1px solid var(--line, #e5ddcf); border-radius: 16px;
  padding: 16px; margin-bottom: 12px; background: var(--card, #fff);
}
.fx-fiche-montant span { display: block; font-size: 15px; color: var(--ink-2, #555); }
.fx-fiche-montant strong { font-size: 32px; font-weight: 800; }
.fx-fiche-montant.fx-trop { border-color: #5b2f8a; background: #f6f0fd; }
.fx-fiche-montant.fx-solde { border-color: #1e6b3a; background: #eef7f0; }
.fx-timeline { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fx-tl {
  font-size: 13px; padding: 6px 10px; border-radius: 999px;
  background: #f4f1ea; border: 1px solid var(--line, #e5ddcf); color: #333;
}
.fx-tl-ok { background: #e3f3e8; border-color: #1e6b3a; color: #14522c; font-weight: 600; }
.fx-sticky-action {
  position: sticky; bottom: calc(var(--nav-h, 76px) + 8px); z-index: 30;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.fx-sticky-action .dux-btn { width: 100%; }
.fx-file-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line-faint, #eee); font-size: 15px;
}
.fx-file-row:first-of-type { border-top: 0; }

/* ── Checklist de validation (fail-closed) ── */
.fx-check {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 8px 0; border-bottom: 1px solid var(--line-faint, #eee); font-size: 16px;
}
.fx-check-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.fx-check.ok .fx-check-ico { background: #e3f3e8; color: #14522c; }
.fx-check.ko .fx-check-ico { background: #fbe3e3; color: #701616; }
.fx-check .btn-ghost { margin-left: auto; }
.fx-manque { color: #9c2b2b; font-weight: 700; font-size: 15px; margin-top: 10px; }

/* ── Aperçu + numéro ── */
.fx-apercu {
  border: 1px solid var(--line, #e5ddcf); border-radius: 14px; padding: 14px;
  margin-bottom: 12px; background: var(--bg-inset, #fafafa); font-size: 15px;
}
.fx-numero-ok { text-align: center; margin-bottom: 14px; }
.fx-numero { font-size: 34px; font-weight: 800; letter-spacing: 1px; }

/* ── Chips de moyen / motif (48 px) ── */
.fx-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.fx-mode {
  min-height: 48px; padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid var(--line-strong, #999); background: none;
  font-size: 16px; font-weight: 600; cursor: pointer; color: inherit;
}
.fx-mode.sel { border-color: var(--ink, #2a241d); background: var(--ink, #2a241d); color: #fff; }
.fx-mode:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-mode small { font-weight: 400; font-size: 12px; }

/* ── Pavé numérique : grand, lisible avec des gants ── */
.fx-pad { font-size: 22px !important; min-height: 56px; text-align: left; }

/* ── Batch ── */
.fx-batch-list { max-height: 46vh; overflow-y: auto; margin: 0 -4px 8px; padding: 0 4px; }
.fx-batch-row {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line, #e5ddcf); border-radius: 14px;
  padding: 12px; margin-bottom: 8px; cursor: pointer; font-size: 15px;
}
.fx-batch-row input[type="checkbox"] { width: 28px; height: 28px; flex: none; margin-top: 2px; accent-color: var(--gold, #c9a96a); }
.fx-batch-row.excl { opacity: 0.75; background: #fafafa; }
.fx-batch-info small { display: block; color: var(--ink-3, #777); font-size: 13px; margin-top: 2px; }
.fx-excl { color: #8a3d00 !important; font-weight: 600; }
.fx-batch-texte { margin-top: 6px; }
.fx-batch-texte summary { font-size: 14px; color: var(--gold-bright, #8a6d2f); cursor: pointer; min-height: 32px; }
.fx-batch-recap { font-size: 17px; font-weight: 800; text-align: center; margin: 10px 0; }

/* ── 360 px : la nav à 6 items ne scrolle jamais ── */
@media (max-width: 380px) {
  .nav-item { font-size: 0.66rem; padding: 6px 0; }
  .nav-item svg { width: 21px; height: 21px; }
}

/* ═══ J3 — V2 « Le droit sans douleur et l'échelle » ═══ */
/* Bandeau « Entretiens à refacturer » : rappel doux, pas une alerte */
.fx-bandeau.fx-bandeau-ent { border-style: dashed; border-color: var(--gold-line, #c9a96a); background: var(--gold-weak, #faf5ea); }
/* Tour de caisse du soir */
.fx-bandeau.fx-bandeau-tdc { border-color: #5a4a7a; background: #f3f1f8; }
.fx-tdc-list { max-height: 52vh; overflow-y: auto; margin: 0 -4px 8px; padding: 0 4px; }
.fx-tdc-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px solid var(--line, #e5ddcf); border-radius: 14px;
  padding: 12px; margin-bottom: 8px;
}
.fx-tdc-info { display: flex; flex-direction: column; gap: 4px; font-size: 15px; min-width: 0; }
.fx-tdc-info strong { font-size: 16px; }
.fx-tdc-row .dux-btn { flex: none; }
/* Conformité 2027 honnête : texte neutre, JAMAIS un badge vert */
.fx-info-line {
  border: 1px solid var(--line, #e5ddcf); background: #f4f1ea; border-radius: 12px;
  padding: 10px 12px; font-size: 15px; margin: 10px 0;
}
/* « Bientôt » : badge honnête sur les boutons non encore actifs */
.fx-bientot {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: #eee; color: #555; margin-left: 6px; vertical-align: middle;
}
/* TVA à reverser — tableau lisible par un non-comptable */
.fx-tva-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.fx-tva-table th, .fx-tva-table td { padding: 10px 4px; text-align: left; font-size: 15px; }
.fx-tva-table th { font-weight: 400; color: var(--ink-2, #555); }
.fx-tva-table td { text-align: right; white-space: nowrap; }
.fx-tva-table td strong { font-size: 26px; font-weight: 800; }
.fx-tva-table tr:first-child { border-bottom: 1px solid var(--line, #e5ddcf); }
/* Champ nombre en grand (entretiens : prix modifiable) */
.input.fx-pad { font-size: 22px; font-weight: 700; padding: 14px; }

/* ═══ J4 — V3 « La voix » (honnête) ═══ */
/* L1 « Qui appeler » : lisible d'un coup d'œil, zone pouce, bouton 56 px (dux-btn). */
.fx-appel-card {
  border: 1px solid var(--line, #e5ddcf); border-radius: 16px;
  background: var(--card, #fff); padding: 14px 16px; margin-bottom: 12px;
}
.fx-appel-card h2 { font-size: 17px; margin: 0 0 6px; }
.fx-appel-ligne { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.fx-appel-card .dux-muted { margin: 10px 0 0; }
/* Lien tel: habillé en bouton : <a> a besoin du display bloc, jamais de style inline. */
a.fx-telbtn { display: block; text-align: center; text-decoration: none; }
/* L2 « Léa prévient » (courtoisie) — UI prête, état « Bientôt » honnête. */
.fx-lea-card { margin-bottom: 12px; }
.fx-lea-card h2 { font-size: 17px; margin: 0 0 6px; }
.fx-courtoisie {
  border: 1px dashed var(--line-strong, #999); border-radius: 12px;
  padding: 12px; margin: 8px 0 12px; font-size: 15px; background: var(--bg-inset, #fafafa);
}