/* Reconstitutions HTML de démonstration : palette de l'application, statuts, barre d'application,
   retards du copilote vocal. Les maquettes de la première direction (fiche client, preuve d'envoi,
   argent reçu) sont retirées le 2 octobre 2026 : plus aucune page ne les sert. */
.billing-benefits {
  --app-bg: oklch(21% .04 245); --app-surface: oklch(25% .043 245);
  --app-line: oklch(35% .045 220); --app-text: oklch(97% .006 240);
  --app-muted: oklch(74% .025 245); --app-accent: oklch(75% .13 183);
  --app-red: oklch(76% .15 15); --app-amber: oklch(82% .14 80);
}
.product-ui { background: var(--app-bg); color: var(--app-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.35; }
.product-ui strong { font-weight: 600; }
.product-status { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: .32em .65em; border-radius: .6em; font-size: .85em; white-space: nowrap; line-height: 1.2; }
.product-status.paid { color: var(--app-accent); background: oklch(31% .06 183); }
.capture-desktop, .capture-mobile { container-type: inline-size; background: var(--app-bg); }
.demo-appbar { display: flex; align-items: center; gap: 3cqw; height: 8cqw; padding: 0 4cqw; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 2.8cqw; }
.demo-appbar > span:first-child { font: 600 3.5cqw/1 var(--font-titre); color: var(--app-accent); letter-spacing: -.06em; }
.demo-appbar > strong { color: var(--app-text); font-size: 3.2cqw; }
.demo-appbar > span:last-child { margin-left: auto; }

/* Copilote vocal : les retards de paiement, première demande. */
.vd-retards { display: grid; gap: 3cqw; }
.vd-retards-titre { margin: 0; color: var(--app-red); font-size: 5cqw; font-weight: 600; }
.vd-retard { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; padding-top: 3cqw; border-top: 1px solid var(--app-line); }
.vd-retard strong { font-size: 5.4cqw; }
.vd-retard span { color: var(--app-muted); font-size: 4.4cqw; white-space: nowrap; }

.device-phone::after { background: var(--app-muted); }