/* ============================================================
   Écran Facturation v4 — coquille maquette (16-facturation)
   Toutes les classes sont préfixées x4-facturation- : zéro collision.
   Jetons v2 partout (tokens-v2.css, portée [data-v2]) avec repli —
   clair ET sombre suivent les jetons. Seule couleur écrite en dur :
   l'encre var(--sur-accent, #1b1a12) sur l'aplat ambre du bouton « Ajouter ».
   La courbe réutilisée (factGrapheMois → classes fx-*) est re-stylée
   plus bas sous l'ancêtre .x4-facturation, à l'identique du gabarit
   validé de v4-fiches.css.
   ============================================================ */

.x4-facturation {
  font-family: var(--font, 'Manrope', -apple-system, system-ui, sans-serif);
  color: var(--v2-text, #16171a);
  /* #kanban-container (v2-coque) apporte déjà `20px 30px` : ne pas les
     doubler. Mesure : blocs à x=288 et larges de 1244 au lieu de x=258
     et 1302. Maquette : contenu à 30px du bord, 1er bloc à 20px sous
     l'en-tête, 86px en bas (20 coque + 66 ici) — même règle que
     clients.css et todo.css. */
  padding: 0 0 66px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 1180 px est VOLONTAIRE (§1.1, commun.css) : ces écrans sont denses,
     ils défilent horizontalement plutôt que de se casser. Ne pas le
     borner à 100% — c'est une décision de design, pas un défaut.
     À signaler en revanche : ici la marge négative des onglets s'ajoute
     au plancher et sort de la FENÊTRE (1468 sur 1440, mesuré le
     03/09/2026), ce que les autres écrans ne font pas. En attente
     d'arbitrage. */
  min-width: 1180px;
  letter-spacing: -0.01em;
  /* Interligne MESURÉ maquette : 1,2 partout (11px→13, 12,5px→15,
     13,5px→16, 15px→18, 24px→28) ; l'app hérite ~1,4 et gonflait tout
     (11→15, 12,5→18, 24→33) : compteurs hauts de 102 au lieu de 93,
     carte Prévision 282 au lieu de 267, carte courbe 237 au lieu 225. */
  line-height: 1.2;
}

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

.x4-facturation-hors-service {
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--v2-text-3, #6b6f76);
}

/* Remise à zéro des <button> — sous :where() OBLIGATOIREMENT.
   Écrite `.x4-facturation button`, elle pesait (0,1,1) et écrasait
   TOUTES les règles de classe à (0,1,0) : les onglets retombaient à
   14px/400 en encre pleine au lieu de 13px/520 en --v2-text-2, les
   deux boutons du dépôt perdaient fond blanc, filet et 12,5px/550, et
   « Ajouter » perdait son aplat ambre (`background: none`). Mesuré au
   relevé : onglet fs=14/fw=400, btn-clair sans fond ni filet,
   btn-ajouter sans fond. À (0,0,0) elle ne gagne plus jamais.
   `padding: 0` en plus : la feuille UA pose 1px 6px, visible sur les
   flèches du sélecteur de mois (p=1px 6px au relevé, 0 en maquette). */
:where(.x4-facturation button) {
  font: inherit;
  letter-spacing: inherit;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

/* ── 1. Onglets du module ───────────────────────────────────── */
.x4-facturation-onglets {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 30px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  margin: -4px -30px 2px;
}
.x4-facturation-onglet {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px 10px;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 550;
  color: var(--v2-text-2, #55595f);
}
.x4-facturation-onglet svg { flex-shrink: 0; }
.x4-facturation-onglet:hover { color: var(--v2-text, #16171a); }
.x4-facturation-onglet.actif {
  border-bottom-color: var(--accent-bright, #f5d547);
  font-weight: 640;
  color: var(--v2-accent, #7d640d);
}
.x4-facturation-onglet-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--inset, rgba(0, 0, 0, .035));
  font-size: 10.5px;
  font-weight: 680;
  display: grid;
  place-items: center;
  color: var(--v2-text-2, #55595f);
}

/* ── 2. Sélecteur de mois + zone de dépôt (une seule ligne) ─── */
.x4-facturation-l1 { display: flex; align-items: stretch; gap: 12px; }

.x4-facturation-sel {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  flex-shrink: 0;
}
.x4-facturation-fleche {
  cursor: pointer;
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm, 12px);
  color: var(--v2-text-2, #55595f);
}
.x4-facturation-fleche:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a); }
.x4-facturation-sel-c { min-width: 116px; text-align: center; }
.x4-facturation-sel-mois { font-size: 15px; font-weight: 620; letter-spacing: -0.01em; }
.x4-facturation-sel-nb { font-size: 11px; color: var(--v2-text-3, #6b6f76); margin-top: -1px; }

.x4-facturation-depot {
  flex: 1;
  min-width: 0;
  border-radius: var(--r-md, 18px);
  background: var(--panel, rgba(255, 255, 255, .66));
  border: 1px dashed var(--stroke, rgba(20, 20, 25, .075));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.x4-facturation-depot.survol {
  border-color: var(--v2-accent, #7d640d);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
}
.x4-facturation-depot-off { cursor: default; opacity: .75; }
.x4-facturation-depot-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm, 12px);
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-facturation-depot-txt { min-width: 0; flex: 1; }
.x4-facturation-depot-titre { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; }
.x4-facturation-depot-sous { font-size: 11px; color: var(--v2-text-3, #6b6f76); margin-top: 1px; }
.x4-facturation-btn-clair,
.x4-facturation-btn-nu {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 34 MESURÉ en maquette : elle déclare 32 sur un <button> repassé en
     content-box par sa remise à zéro, + 2 de filet. Ici, box-border. */
  height: 34px;
  padding: 0 13px;
  border-radius: 99px;
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  font-size: 12.5px;
  font-weight: 550;
  flex-shrink: 0;
}
.x4-facturation-btn-clair { background: var(--panel-solid, #fff); color: var(--v2-text, #16171a); }
.x4-facturation-btn-nu { background: transparent; color: var(--v2-text-2, #55595f); }
.x4-facturation-btn-clair:hover,
.x4-facturation-btn-nu:hover { border-color: var(--v2-text-3, #6b6f76); }

/* ── 3. Saisie manuelle — une bande, pas un formulaire ──────── */
.x4-facturation-saisie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r-md, 18px);
  background: var(--panel-2, rgba(255, 255, 255, .42));
  border: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
}
.x4-facturation-saisie-lbl {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
  padding: 0 5px;
  flex-shrink: 0;
}
.x4-facturation-pilule {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  font: inherit;
  font-size: 12.5px;
  color: var(--v2-text, #16171a);
}
.x4-facturation-pilule::placeholder { color: var(--v2-text-3, #6b6f76); }
.x4-facturation-pilule:focus-visible { outline: 2px solid var(--v2-accent, #7d640d); outline-offset: 1px; }
.x4-facturation-f-client { flex: 1.4; min-width: 0; }
.x4-facturation-f-num { flex: 1; min-width: 0; }
.x4-facturation-f-mt { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.x4-facturation-f-date { width: 132px; gap: 8px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; }
.x4-facturation-f-date svg { color: var(--v2-text-3, #6b6f76); flex-shrink: 0; }
.x4-facturation-f-date input {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  min-width: 0;
  width: 100%;
  padding: 0;
}
.x4-facturation-f-date input:focus { outline: none; }
.x4-facturation-saisie .x4-facturation-champ-erreur { border-color: var(--neg-fg, #a74137); }
.x4-facturation-btn-ajouter {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 99px;
  background: linear-gradient(170deg, var(--accent-bright, #f5d547), #e4c033);
  color: var(--sur-accent, #1b1a12);                       /* encre validée sur aplat ambre */
  font-size: 12.5px;
  font-weight: 620;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  flex-shrink: 0;
}
.x4-facturation-btn-ajouter:hover { filter: brightness(1.04); }

/* ── 4. Les quatre compteurs — aucun fond coloré ────────────── */
.x4-facturation-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.x4-facturation-kpi {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 13px 16px 14px;
}
.x4-facturation-kpi-sur {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-facturation-kpi-ligne { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.x4-facturation-kpi-chiffre {
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text, #16171a);
  white-space: nowrap;
}
.x4-facturation-kpi-vide { color: var(--v2-text-3, #6b6f76); }
.x4-facturation-kpi-unite { font-size: 12.5px; font-weight: 550; color: var(--v2-text-3, #6b6f76); white-space: nowrap; }
.x4-facturation-kpi-sous { margin-top: 4px; font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-encre-pos { color: var(--pos-fg, #136d45); }
.x4-facturation-encre-accent { color: var(--v2-accent, #7d640d); }

/* ── 5. Graphiques ──────────────────────────────────────────── */
.x4-facturation-graphes { display: grid; grid-template-columns: 1.75fr 1fr; gap: 12px; }
.x4-facturation-g {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 14px 16px 12px;
  min-width: 0;
}
.x4-facturation-g-clients { padding-bottom: 13px; display: flex; flex-direction: column; gap: 12px; }
/* Mesure : 8px de gouttière sur « Par client » et sur « Prévision »,
   11px sur la seule tête de « Facturé par mois » (elle porte cinq
   légendes + la lecture du mois). */
.x4-facturation-g-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.x4-facturation-g-mois .x4-facturation-g-tete { gap: 11px; }
.x4-facturation-g-titre { font-size: 13.5px; font-weight: 620; letter-spacing: -0.01em; }
.x4-facturation-g-note { font-size: 11px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-g-vide { padding: 30px 0; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--v2-text-2, #55595f);
}
.x4-facturation-leg-ht { width: 15px; height: 3px; border-radius: 2px; background: var(--accent-bright, #f5d547); }
.x4-facturation-leg-ttc { width: 15px; height: 0; border-top: 2px dashed var(--v2-accent, #7d640d); }

/* « Par client » */
.x4-facturation-cl-liste { display: flex; flex-direction: column; gap: 8px; }
.x4-facturation-cl-vide { font-size: 12px; color: var(--v2-text-3, #6b6f76); padding: 8px 0; }
.x4-facturation-cl-l { display: flex; align-items: baseline; gap: 8px; }
.x4-facturation-cl-nom {
  font-size: 12.5px;
  font-weight: 550;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-facturation-cl-mt { font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.x4-facturation-cl-piste {
  margin-top: 5px;
  height: 6px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
}
.x4-facturation-cl-fill { height: 100%; border-radius: 99px; background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-facturation-cl-fill.premier { background: var(--accent-bright, #f5d547); }

/* ── 6. Prévision — 4 mois à venir ──────────────────────────── */
.x4-facturation-prev {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-md, 18px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 14px 16px 15px;
}
.x4-facturation-prev-tot { margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px; }
.x4-facturation-prev-tot + .x4-facturation-prev-sep + .x4-facturation-prev-tot { margin-left: 0; }
.x4-facturation-prev-tot-lbl {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}
.x4-facturation-prev-tot-val {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.x4-facturation-prev-sep { width: 1px; height: 14px; background: var(--stroke, rgba(20, 20, 25, .075)); align-self: center; }
.x4-facturation-prev-vide { margin-top: 12px; font-size: 12px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-prev-grille {
  display: grid;
  grid-template-columns: 112px 130px 132px 132px 1fr;
  align-items: center;
  gap: 12px;
}
.x4-facturation-prev-grille .d { text-align: right; }
.x4-facturation-prev-head {
  margin-top: 12px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-facturation-prev-ligne { padding: 9px 2px; border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05)); }
.x4-facturation-prev-mois { font-size: 12.5px; font-weight: 620; letter-spacing: -0.01em; }
.x4-facturation-prev-acquis { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--v2-text-2, #55595f); white-space: nowrap; }
.x4-facturation-prev-pipe { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--v2-accent, #7d640d); white-space: nowrap; }
.x4-facturation-prev-total {
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.x4-facturation-prev-bouge { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x4-facturation-prev-piste {
  flex: 1;
  min-width: 60px;
  max-width: 180px;
  height: 6px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
  display: flex;
}
.x4-facturation-prev-fill-a { background: var(--accent-bright, #f5d547); }
.x4-facturation-prev-fill-p { background: var(--accent-soft, rgba(245, 213, 71, .26)); }
/* Mesuré : la note qui porte un évènement est en --v2-text-2 ;
   « rien ne bouge » descend d'un cran, en --v2-text-3. */
.x4-facturation-prev-note { font-size: 11.5px; color: var(--v2-text-2, #55595f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x4-facturation-prev-note-vide { color: var(--v2-text-3, #6b6f76); }
.x4-facturation-prev-legende { margin-top: 11px; display: flex; align-items: flex-start; gap: 9px; }
.x4-facturation-prev-legende svg { flex-shrink: 0; margin-top: 1px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-prev-legende div { font-size: 11.5px; line-height: 1.45; color: var(--v2-text-3, #6b6f76); }

/* ── 7. Le tableau du mois ─────────────────────────────────────
   Mesuré en maquette : le cadre est --panel (blanc .66) posé sur du
   verre dépoli, pas --panel-solid ; ses deux bandes (tête et total)
   sont --panel-2 (blanc .42), pas --inset. */
.x4-facturation-t {
  background: var(--panel, rgba(255, 255, 255, .66));
  backdrop-filter: blur(20px);
  border: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  border-radius: var(--r-lg, 26px);
  box-shadow: var(--shadow, 0 1px 1px rgba(0, 0, 0, .03), 0 10px 30px -12px rgba(0, 0, 0, .14));
  overflow: hidden;
}
.x4-facturation-grille {
  display: grid;
  grid-template-columns: minmax(215px, 1.25fr) 155px 175px 132px 132px 178px 34px;
  align-items: center;
  gap: 12px;
}
.x4-facturation-grille .d { text-align: right; }
.x4-facturation-head {
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke, rgba(20, 20, 25, .075));
  background: var(--panel-2, rgba(255, 255, 255, .42));   /* bande de groupe */
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-facturation-row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--stroke-2, rgba(20, 20, 25, .05));
  cursor: pointer;
  transition: background .14s;
}
.x4-facturation-row:hover { background: var(--inset, rgba(0, 0, 0, .035)); }
.x4-facturation-c-client { display: flex; align-items: center; gap: 12px; min-width: 0; }
.x4-facturation-init {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs, 9px);
  background: var(--inset, rgba(0, 0, 0, .035));
  color: var(--v2-text-2, #55595f);
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-facturation-client {
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-facturation-c-num { font-size: 12.5px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; }
.x4-facturation-decale {
  display: inline-block;
  margin-left: 7px;
  font-size: 10.5px;
  color: var(--v2-text-3, #6b6f76);
}
.x4-facturation-c-par { display: flex; align-items: center; gap: 8px; min-width: 0; }
.x4-facturation-avatar {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--accent-soft, rgba(245, 213, 71, .26));
  color: var(--v2-accent, #7d640d);
  font-size: 11px;
  font-weight: 680;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.x4-facturation-par-txt { min-width: 0; }
.x4-facturation-par-txt span {
  display: block;
  font-size: 12.5px;
  color: var(--v2-text-2, #55595f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x4-facturation-par-txt small { display: block; font-size: 11px; color: var(--v2-text-3, #6b6f76); font-variant-numeric: tabular-nums; }
.x4-facturation-par-inconnu { font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-c-ht {
  font-size: 13.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.x4-facturation-c-ttc { font-size: 12.5px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x4-facturation-c-marge { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.x4-facturation-marge { display: inline-flex; align-items: center; gap: 8px; }
.x4-facturation-marge.passee { opacity: .72; }
.x4-facturation-marge-piste {
  width: 42px;
  height: 5px;
  border-radius: 99px;
  background: var(--track, rgba(20, 20, 25, .07));
  overflow: hidden;
  display: block;
}
.x4-facturation-marge-fill { display: block; height: 100%; border-radius: 99px; }
.x4-facturation-marge-fill.pos { background: var(--pos-fg, #136d45); }
.x4-facturation-marge-fill.acc { background: var(--v2-accent, #7d640d); }
.x4-facturation-marge-pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 23px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.x4-facturation-marge-pastille small { opacity: .68; font-weight: 550; font-size: 12.5px; }
.x4-facturation-marge-pastille.pos { color: var(--pos-fg, #136d45); background: var(--pos, rgba(23, 128, 81, .15)); }
.x4-facturation-marge-pastille.acc { color: var(--v2-accent, #7d640d); background: var(--accent-soft, rgba(245, 213, 71, .26)); }
.x4-facturation-marge-vide {
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
}
.x4-facturation-marge-vide:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a); }

/* Chevron au repos, actions au survol de la ligne */
.x4-facturation-act { position: relative; display: flex; justify-content: flex-end; }
/* Le chevron est mesuré au BORD GAUCHE de la 7e colonne (x=1507 pour une
   colonne 1507→1541) : en maquette c'est un <svg> nu posé dans la grille.
   `margin-right: auto` le remet là sans déplacer les boutons de survol,
   qui eux restent alignés à droite. */
.x4-facturation-act-chev { color: var(--v2-text-3, #6b6f76); display: grid; place-items: center; margin-right: auto; }
.x4-facturation-act-btns { display: none; align-items: center; gap: 2px; }
.x4-facturation-row:hover .x4-facturation-act-chev { display: none; }
.x4-facturation-row:hover .x4-facturation-act-btns { display: inline-flex; }
.x4-facturation-ico {
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-2, #55595f);
}
.x4-facturation-ico:hover { background: var(--inset, rgba(0, 0, 0, .035)); color: var(--v2-text, #16171a); }
.x4-facturation-ico.danger:hover { color: var(--neg-fg, #a74137); background: var(--neg-soft, rgba(193, 75, 64, .11)); }

.x4-facturation-total {
  padding: 13px 18px;
  background: var(--panel-2, rgba(255, 255, 255, .42));   /* bande de groupe */
}
.x4-facturation-total-l {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  color: var(--v2-text-3, #6b6f76);
  text-transform: uppercase;
}
.x4-facturation-total-s { font-size: 12.5px; color: var(--v2-text-3, #6b6f76); }
.x4-facturation-total-ht {
  font-size: 14.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.x4-facturation-total-ttc { font-size: 12.5px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x4-facturation-total-marge { font-size: 13px; font-weight: 640; color: var(--pos-fg, #136d45); font-variant-numeric: tabular-nums; white-space: nowrap; }

.x4-facturation-t-vide { padding: 44px 20px; text-align: center; }
.x4-facturation-t-vide-t { font-size: 13.5px; font-weight: 620; }
.x4-facturation-t-vide-s { margin-top: 4px; font-size: 12px; color: var(--v2-text-3, #6b6f76); }

/* ── La courbe réutilisée (factGrapheMois → classes fx-*) ─────
   Copie du gabarit validé de v4-fiches.css, portée sous
   .x4-facturation pour ne toucher à rien d'autre. ───────────── */
/* Gouttière mesurée : 7px entre chaque pièce de la lecture, et aucune
   marge propre sur le nom du mois (5 + 2 au relevé). */
.x4-facturation .fx-lecture { margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.x4-facturation .fx-lecture-mois {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v2-text-3, #6b6f76);
}
.x4-facturation .fx-lecture b { font-size: 13px; font-weight: 640; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.x4-facturation .fx-lecture-ttc { font-size: 12px; color: var(--v2-text-2, #55595f); font-variant-numeric: tabular-nums; }
/* Les deux « HT »/« TTC » : 11px en graisse normale au relevé maquette,
   pas 10px en 600 (ils étaient plus petits ET plus gras). */
.x4-facturation .fx-lecture small { font-size: 11px; font-weight: 400; color: var(--v2-text-3, #6b6f76); }

/* Colonne des graduations 34px, PUIS 8px de gouttière (mesure : les
   libellés finissent à 34 du bord de carte, le tracé démarre à 42).
   Le repli `right: 8px` posait les deux à 26 et 34. */
.x4-facturation .fx-courbe { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; margin-top: 10px; }
.x4-facturation .fx-courbe-grads { position: relative; height: 152px; }
.x4-facturation .fx-courbe-grads span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 10.5px;
  line-height: 1;
  color: var(--v2-text-3, #6b6f76);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.x4-facturation .fx-courbe-zone { min-width: 0; }
.x4-facturation .fx-courbe-boite { position: relative; height: 152px; }
.x4-facturation .fx-courbe-boite svg { display: block; width: 100%; height: 100%; overflow: visible; }
.x4-facturation .fx-pt { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.x4-facturation .fx-pt-ht {
  width: 10px;
  height: 10px;
  background: var(--accent-bright, #f5d547);
  border: 2px solid var(--panel-solid, #fff);
}
.x4-facturation .fx-pt-ttc {
  width: 8px;
  height: 8px;
  background: var(--panel-solid, #fff);
  border: 1.8px solid var(--v2-accent, #7d640d);
}
.x4-facturation .fx-courbe-mois { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 5px; }
/* Rangée des mois MESURÉE : 10,5px en graisse 500, --v2-text-2, AUCUN
   rembourrage — la rangée fait 12px de haut en maquette, 23 ici avec
   `3px 0 5px` et 11px/400, ce qui gonflait la carte de 11px. */
.x4-facturation .fx-mois-cell {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--v2-text-2, #55595f);
  cursor: pointer;
  text-align: center;
}
/* Les mois postérieurs au dernier tracé (le lavis « à venir » de la
   courbe) descendent d'un cran d'encre, comme en maquette. */
.x4-facturation .fx-mois-cell.x4-facturation-mois-avenir { color: var(--v2-text-3, #6b6f76); }
.x4-facturation .fx-mois-cell:hover { color: var(--v2-text, #16171a); }
/* Le mois lu se marque à l'encre et à la graisse — la maquette ne pose
   aucun soulignement ambre sous le libellé. */
.x4-facturation .fx-mois-cell.actif {
  color: var(--v2-text, #16171a);
  font-weight: 640;
}