/* B3 tâche 022 — la page de facturation, côté Tellers.
 *
 * Portée de `app/views/mockups/recruiter/billing.html.erb` (bloc <style>),
 * mêmes classes et mêmes valeurs. La tâche 022 ne porte que ce que son écran
 * rend : la coque (`.wrap`, `h1`, `.sub`, `.grp-h`, `.sec`, `.card`, `.note`),
 * le capital (`.tel-*`, `.pot*`, `.ordre`) et l'historique (`.hist*`, `.hl*`,
 * `.state-tag`, `.pot-tag`). Le plan courant, le portail de paiement, le
 * plafond, les quotas, les factures et la modale de recharge arrivent avec les
 * tâches 018, 024 et 025, DANS CE FICHIER : une page, une feuille.
 *
 * Trois écarts avec la source, tous volontaires :
 *
 *   · les dorés et les gris passent par les jetons (`--gold-*`, `--n-*`,
 *     `--green*`) au lieu des hexadécimaux de la maquette, qui portaient les
 *     mêmes valeurs. C'est la règle du design system
 *     (`test/assets/design_system_test.rb`) ;
 *   · `.hist-empty` n'est plus masquée par défaut : le vide est rendu par le
 *     serveur, pas par du JavaScript qui compte des lignes déjà présentes.
 *     `.is-shown` prend le relais ;
 *   · `.hist-nav` et `.hist-range` sont ajoutées : la maquette offre un
 *     « Voir tout l'historique » qui ne mène nulle part, et 62 mouvements sur
 *     un mois (jeu canonique §4.15) demandent une vraie navigation de pages.
 *     Le bouton garde sa classe `.hist-more` et son dessin.
 */

.page-recruiter-billing { box-sizing: border-box; }
.page-recruiter-billing *, .page-recruiter-billing *::before, .page-recruiter-billing *::after { box-sizing: border-box; }
.page-recruiter-billing {
  /* On CONSOMME les jetons partagés (:root). Compléments locaux uniquement :
     l'orange et le bleu des trois états d'un Teller engagé n'ont pas de jeton,
     et le vert de pousse du pot « Rechargé » non plus. */
  --orange:#C0651F; --orange-50:#FBEFE2; --orange-200:#EBC9A6;
  --blue:#5B7A9B; --blue-50:#EEF2F6; --blue-200:#D3DEE8;
  --sprout:#5B6E42; --sprout-50:#EAF0E3; --sprout-200:#CBD8BA;
  --sprout-fill:linear-gradient(90deg,#9FB08A,#6E8055);
  --gold-satin:var(--gold-fill-deep);
  --font-sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --shadow-sm:0 1px 2px rgba(44,44,44,.05); --shadow-md:0 8px 28px rgba(44,44,44,.07);
  min-height:100vh; background:var(--n-0); font-family:var(--font-sans); color:var(--n-900);
  font-variant-numeric: tabular-nums;
}
.page-recruiter-billing a { text-decoration:none; color:inherit; }
.page-recruiter-billing button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
.page-recruiter-billing input, .page-recruiter-billing select { font-family:inherit; }

.page-recruiter-billing .wrap { max-width:1240px; margin:0 auto; padding:32px 26px 96px; }

/* Étiquette lue par les lecteurs d'écran seulement : la maquette n'affiche pas
   de libellé au-dessus de ses deux listes, un champ sans nom n'est pas
   annonçable. */
.page-recruiter-billing .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;
}

/* ── En-tête ── */
.page-recruiter-billing h1 { font-family:'Geist',system-ui,sans-serif; font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0; }
.page-recruiter-billing h1 em { font-style:italic; font-weight:600; display:inline-block; padding-right:.14em; margin-right:-.14em; background:var(--gold-text-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.page-recruiter-billing .sub { font-size:13.5px; color:var(--n-500); margin-top:6px; }
.page-recruiter-billing .grp-h { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); margin:0 0 14px; }

/* ── Sections ── */
.page-recruiter-billing .sec { margin-top:34px; }
.page-recruiter-billing .card { background:var(--n-0); border:1px solid var(--n-200); border-radius:16px; padding:22px 24px; }
.page-recruiter-billing .card + .card { margin-top:14px; }

/* ── Capital de Tellers ── */
.page-recruiter-billing .tel-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-recruiter-billing .tel-total { display:flex; align-items:flex-end; gap:10px; }
.page-recruiter-billing .tel-coin { width:34px; height:34px; flex-shrink:0; }
.page-recruiter-billing .tel-total b { font-family:'Geist',system-ui,sans-serif; font-size:38px; font-weight:700; color:var(--gold-700); line-height:1; }
.page-recruiter-billing .tel-total span { font-size:13px; color:var(--n-500); margin-left:6px; padding-bottom:4px; }
.page-recruiter-billing .pots { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:700px){ .page-recruiter-billing .pots { grid-template-columns:1fr; } }
.page-recruiter-billing .pot-h { display:flex; align-items:baseline; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.page-recruiter-billing .pot-n { font-size:8.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; background:var(--gold-100); color:var(--gold-700); border:1px solid var(--gold-200); border-radius:5px; padding:3px 8px; }
.page-recruiter-billing .pot-n.rech { background:var(--sprout-50); color:var(--sprout); border-color:var(--sprout-200); }
.page-recruiter-billing .pot-h b { font-size:17px; font-weight:700; }
.page-recruiter-billing .pot-h span { font-size:12px; color:var(--n-500); }
.page-recruiter-billing .pot-track { height:9px; background:var(--n-100); border-radius:99px; overflow:hidden; border:1px solid rgba(163,133,67,.1); }
.page-recruiter-billing .pot-fill { height:100%; background:var(--gold-satin); border-radius:99px; }
.page-recruiter-billing .pot-fill.rech { background:var(--sprout-fill); }
.page-recruiter-billing .pot-d { font-size:11.5px; color:var(--n-500); margin-top:7px; line-height:1.5; }
.page-recruiter-billing .ordre { display:flex; gap:10px; background:var(--gold-50); border:1px solid var(--gold-200); border-radius:11px; padding:13px 15px; font-size:12.5px; color:var(--n-700); line-height:1.55; margin-top:18px; }
.page-recruiter-billing .ordre svg { width:16px; height:16px; color:var(--gold-700); flex-shrink:0; margin-top:1px; }
.page-recruiter-billing .ordre b { color:var(--n-900); }

/* ── Historique ── */
.page-recruiter-billing .hist-h { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-recruiter-billing .hist-f { display:flex; gap:8px; }
.page-recruiter-billing .hist-f select { border:1px solid var(--n-200); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:12px; background:var(--n-50); color:var(--n-900); }
.page-recruiter-billing .hist-sum { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
@media(max-width:700px){ .page-recruiter-billing .hist-sum { grid-template-columns:repeat(2,1fr); } }
.page-recruiter-billing .hist-sum div { background:var(--n-50); border:1px solid var(--n-200); border-radius:11px; padding:12px 14px; }
.page-recruiter-billing .hist-sum b { font-size:21px; font-weight:700; color:var(--gold-700); display:block; }
.page-recruiter-billing .hist-sum span { font-size:11.5px; color:var(--n-500); }
.page-recruiter-billing .hist { border:1px solid var(--n-200); border-radius:12px; overflow:hidden; }
.page-recruiter-billing .hl { display:flex; align-items:center; gap:13px; padding:13px 15px; border-bottom:1px solid var(--n-100); transition:background var(--t); }
.page-recruiter-billing .hl:last-child { border-bottom:none; }
.page-recruiter-billing .hl.credit { background:var(--n-50); }
.page-recruiter-billing .hl-d { font-size:11.5px; color:var(--n-500); width:58px; flex-shrink:0; font-weight:600; }
.page-recruiter-billing .hl-b { flex:1; min-width:0; }
.page-recruiter-billing .hl-t { font-size:13.5px; font-weight:600; }
.page-recruiter-billing .hl-s { font-size:11.5px; color:var(--n-500); margin-top:1px; }
.page-recruiter-billing .hl-tags { display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.page-recruiter-billing .pot-tag { font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--gold-100); color:var(--gold-700); border:1px solid var(--gold-200); border-radius:5px; padding:3px 8px; white-space:nowrap; }
.page-recruiter-billing .pot-tag.rech { background:var(--n-100); color:var(--n-700); border-color:var(--n-200); }
.page-recruiter-billing .state-tag { font-size:9.5px; font-weight:700; letter-spacing:.3px; border-radius:5px; padding:3px 8px; white-space:nowrap; }
.page-recruiter-billing .state-tag.attendue { background:var(--orange-50); color:var(--orange); border:1px solid var(--orange-200); }
.page-recruiter-billing .state-tag.acceptee { background:var(--green-50); color:var(--green); border:1px solid var(--green-200); }
.page-recruiter-billing .state-tag.rendue { background:var(--blue-50); color:var(--blue); border:1px solid var(--blue-200); }
/* Review passe 1, T1 — R3-30.9. Le Teller rendu APRES le terme de son pot :
   il revient et repart dans le meme geste. Teinte neutre, pas la bleue du
   retour : le solde n'a pas bouge. */
.page-recruiter-billing .state-tag.rendu_perime { background:var(--n-100); color:var(--n-700); border:1px solid var(--n-200); }
.page-recruiter-billing .hl-a { font-size:14.5px; font-weight:700; color:var(--n-900); width:38px; text-align:right; flex-shrink:0; }
.page-recruiter-billing .hl-a.plus { color:var(--green); }
.page-recruiter-billing .hl-a.mut { color:var(--n-400); font-weight:500; font-size:11px; }
@media(max-width:720px){
  .page-recruiter-billing .hl { flex-wrap:wrap; gap:6px 10px; }
  .page-recruiter-billing .hl-d { order:1; }
  .page-recruiter-billing .hl-b { order:2; flex:1 1 100%; }
  .page-recruiter-billing .hl-tags { order:3; justify-content:flex-start; }
  .page-recruiter-billing .hl-a { order:4; width:auto; margin-left:auto; }
}
.page-recruiter-billing .hist-empty { text-align:center; padding:34px 20px; color:var(--n-500); font-size:13px; display:none; line-height:1.6; }
.page-recruiter-billing .hist-empty.is-shown { display:block; }
.page-recruiter-billing .hist-empty b { color:var(--n-900); font-size:14px; }
.page-recruiter-billing .hist-nav { display:flex; gap:10px; margin-top:12px; }
.page-recruiter-billing .hist-more { flex:1; display:block; text-align:center; border:1px solid var(--n-200); background:var(--n-0); border-radius:11px; padding:11px; font-size:12.5px; font-weight:600; color:var(--n-700); cursor:pointer; transition:all var(--t); }
.page-recruiter-billing .hist-more:hover { border-color:var(--gold-300); background:var(--gold-50); color:var(--gold-700); }
.page-recruiter-billing .hist-range { text-align:center; font-size:11.5px; color:var(--n-500); margin-top:8px; }

/* ── Note bas de page ── */
.page-recruiter-billing .note { font-size:12px; color:var(--n-500); margin-top:26px; padding:12px 14px; background:var(--n-50); border:1px solid var(--n-200); border-radius:10px; line-height:1.5; }
.page-recruiter-billing .note b { color:var(--n-700); }

/* ═══ B3 tâche 018 — informations de facturation, plan courant, portail de
 * paiement, plafonds et enveloppes.
 *
 * Portées du bloc <style> de `app/views/mockups/recruiter/billing.html.erb`
 * (`:113-165`, `:273-294`), mêmes classes et mêmes valeurs, les dorés et les
 * gris passés aux jetons. La tâche 022 avait laissé la place : une page, une
 * feuille.
 *
 * Quatre classes n'existent pas dans la maquette, et chacune répond à un écart
 * inscrit dans `decisions.md` : `.pc-status` (l'état du paiement, que la
 * maquette ne montre pas), `.cap-field` / `.cap-input` / `.cap-unit` (le champ
 * de montant, que la maquette code en dur), `.pay-off` et `.pay-warn` (le
 * portail indisponible et la carte qui expire avant l'échéance).
 * ═══ */

/* ── Informations de facturation ── */
.page-recruiter-billing .bi-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.page-recruiter-billing .bi-head .grp-h { margin:0; }
.page-recruiter-billing .bi-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; }
@media(max-width:700px){ .page-recruiter-billing .bi-grid { grid-template-columns:1fr; } }
.page-recruiter-billing .bi-f { min-width:0; }
.page-recruiter-billing .bi-f.full { grid-column:1 / -1; }
.page-recruiter-billing .bi-k { font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--n-500); display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.page-recruiter-billing .bi-lock { font-size:8px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:var(--n-100); color:var(--n-400); border-radius:5px; padding:2px 6px; }
.page-recruiter-billing .bi-v { font-size:15px; color:var(--n-900); line-height:1.4; overflow-wrap:anywhere; }
.page-recruiter-billing .bi-v.empty { font-style:italic; color:var(--n-400); font-size:14px; }
.page-recruiter-billing .bi-note { display:flex; gap:9px; background:var(--gold-50); border:1px solid var(--gold-200); border-radius:11px; padding:12px 14px; font-size:12px; color:var(--n-700); line-height:1.55; margin-top:22px; }
.page-recruiter-billing .bi-note svg { width:15px; height:15px; color:var(--gold-700); flex-shrink:0; margin-top:1px; }
.page-recruiter-billing .bi-actions { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }

/* ── Carte plan courant ── */
.page-recruiter-billing .plan-card { position:relative; border:1.5px solid var(--gold-500); background:linear-gradient(180deg,#FFFDF9,#FDF7EA); border-radius:18px; padding:30px 26px 24px; }
.page-recruiter-billing .plan-badge { position:absolute; top:-12px; left:28px; background:var(--gold-satin); color:var(--on-gold); font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap; text-shadow:var(--on-gold-shadow); }
.page-recruiter-billing .pc-name { font-family:'Geist',system-ui,sans-serif; font-size:30px; font-weight:700; line-height:1.1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-recruiter-billing .pc-target { font-style:italic; font-size:13.5px; color:var(--n-500); margin-top:8px; }
/* L'état du paiement : la maquette ne le montre pas, et un prélèvement échoué
   qui n'apparaît nulle part finit en accès coupé sans prévenir. */
.page-recruiter-billing .pc-status { font-size:12.5px; color:var(--n-700); margin-top:14px; line-height:1.5; }
.page-recruiter-billing .pc-status-past_due, .page-recruiter-billing .pc-status-unpaid { color:var(--red); font-weight:600; }
.page-recruiter-billing .pc-price { display:flex; align-items:baseline; gap:8px; margin-top:20px; flex-wrap:wrap; }
.page-recruiter-billing .pc-price b { font-size:48px; font-weight:700; line-height:1; letter-spacing:-1px; }
.page-recruiter-billing .pc-cur { font-size:20px; font-weight:500; color:var(--n-500); }
.page-recruiter-billing .pc-per { font-size:12.5px; color:var(--n-500); margin-top:8px; }
.page-recruiter-billing .pc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:22px; padding-top:20px; border-top:1px solid var(--gold-200); }
.page-recruiter-billing .pst-i { padding:0 16px; min-width:0; }
.page-recruiter-billing .pst-i + .pst-i { border-left:1px solid var(--gold-200); }
.page-recruiter-billing .pst-i b { display:block; font-size:19px; font-weight:700; }
.page-recruiter-billing .pst-i span { font-size:10.5px; color:var(--n-500); line-height:1.3; display:block; margin-top:2px; }
.page-recruiter-billing .is-later { opacity:.6; }
@media(max-width:900px){
  .page-recruiter-billing .pc-stats { grid-template-columns:repeat(2,1fr); row-gap:16px; }
  .page-recruiter-billing .pst-i:nth-child(odd) { border-left:none; padding-left:0; }
}
.page-recruiter-billing .pc-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--gold-200); flex-wrap:wrap; }
.page-recruiter-billing .pc-next { font-size:12.5px; color:var(--n-500); }
.page-recruiter-billing .pc-next b { color:var(--n-900); }
.page-recruiter-billing .pc-cta { display:inline-block; border:1px solid var(--gold-500); background:var(--n-0); color:var(--gold-700); border-radius:999px; padding:11px 22px; font-size:13.5px; font-weight:600; white-space:nowrap; transition:all var(--t); }
.page-recruiter-billing .pc-cta:hover { background:var(--gold-500); color:var(--on-gold); text-shadow:var(--on-gold-shadow); }

/* ── Moyen de paiement et portail ── */
.page-recruiter-billing .pay { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.page-recruiter-billing .pay-row { border-top:1px solid var(--n-100); margin-top:16px; padding-top:16px; }
.page-recruiter-billing .pay-ic { width:38px; height:38px; border-radius:10px; background:var(--gold-50); border:1px solid var(--gold-200); color:var(--gold-700); display:grid; place-items:center; flex-shrink:0; }
.page-recruiter-billing .pay-ic svg { width:18px; height:18px; }
/* Le jeton doré du capital est dessiné à 34 px sur sa propre page ; dans une
   pastille de 38 px il tient la place d'une icône. */
.page-recruiter-billing .pay-ic .tel-coin { width:18px; height:18px; }
.page-recruiter-billing .pay-b { flex:1; min-width:0; }
.page-recruiter-billing .pay-b b { font-size:13.5px; display:block; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-recruiter-billing .pay-b span { font-size:11.5px; color:var(--n-500); }
/* Portail indisponible : une phrase, pas un bouton mort. */
.page-recruiter-billing .pay-off { font-size:11.5px; color:var(--n-500); line-height:1.5; max-width:360px; }
.page-recruiter-billing .pay-warn { font-size:11px; font-weight:700; color:var(--orange); background:var(--orange-50); border:1px solid var(--orange-200); border-radius:6px; padding:4px 8px; }
.page-recruiter-billing .link-g { font-size:12.5px; font-weight:600; color:var(--gold-700); flex-shrink:0; }
.page-recruiter-billing .link-g:hover { text-decoration:underline; }
.page-recruiter-billing .btn-gold { display:inline-flex; align-items:center; gap:8px; border:none; border-radius:999px; padding:12px 22px; font-size:13.5px; font-weight:600; color:var(--on-gold); text-shadow:var(--on-gold-shadow); background:var(--gold-fill-deep); box-shadow:0 3px 10px rgba(163,133,67,.28), inset 0 1px 0 rgba(255,255,255,.28); transition:all .18s ease; white-space:nowrap; }
.page-recruiter-billing .btn-gold:hover { transform:translateY(-1px); filter:saturate(1.06) brightness(1.02); }

/* ── Plafond de dépense et enveloppe, par établissement ── */
.page-recruiter-billing .cap-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.page-recruiter-billing .cap-title { font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-recruiter-billing .owner-pill { font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:var(--n-100); color:var(--n-500); border-radius:5px; padding:3px 7px; }
.page-recruiter-billing .cap-row { display:flex; align-items:flex-end; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.page-recruiter-billing .cap-field { min-width:0; flex:1 1 210px; }
.page-recruiter-billing .cap-input { display:flex; align-items:baseline; gap:8px; }
/* Mesure du 22/09 a 1440 px : le placeholder « Aucun plafond » demande 114 px
 * en 16px/700, la boite de 120 px n'en laissait que 94 entre ses paddings —
 * l'utilisateur lisait « Aucun pla ». Le champ voisin (« Pot commun », plan
 * Palace) tient dans le meme gabarit et se coupait de la meme facon dans
 * d'autres langues. `width` devient un PLANCHER (`min-width`) plutot qu'une
 * borne : la boite part de 164 px, largeur du plus long placeholder de la
 * paire plus ses paddings, et `.cap-field` (flex:1 1 210px) lui laisse la
 * place. `max-width:100%` protege toujours le mobile. */
.page-recruiter-billing .cap-input input { width:164px; min-width:0; max-width:100%; border:1px solid var(--n-200); border-radius:10px; padding:10px 12px; font-size:16px; font-weight:700; color:var(--n-900); background:var(--n-0); }
.page-recruiter-billing .cap-input input:focus { outline:none; border-color:var(--gold-400); }
.page-recruiter-billing .cap-unit { font-size:12px; color:var(--n-500); white-space:nowrap; }
/* La note n'avait aucune marge : sur la facture a 0,00 €, « Rien a payer sur
 * cette facture. » touchait le libelle « NUMERO » du bloc suivant — mesure a
 * 434 px contre 434 px, zero pixel entre les deux — et les deux se lisaient
 * comme une seule ligne. Constate le 22/09 en reprenant les captures du guide.
 *
 * La marge est EN BAS, parce que c'est la que le contact se produit. Un
 * premier essai l'avait posee en haut : sans effet, les marges adjacentes
 * entre freres fusionnent et le `.recap` au-dessus en portait deja 14 px, donc
 * le navigateur gardait `max(14, 6)`. Le `margin-top` reste, il ne nuit pas et
 * sert la ou aucun frere ne precede.
 *
 * `.cap-note` est toujours une note explicative SOUS ce qu'elle explique : sur
 * les huit autres ecrans qui l'emploient elle est la derniere de sa carte, la
 * marge basse n'y deplace rien. */
.page-recruiter-billing .cap-note { font-size:11.5px; color:var(--n-500); line-height:1.55; margin-top:6px; margin-bottom:13px; }
/* ── Recharger : le bouton du capital (B3 tâche 024) ──
 * `mockups/recruiter/billing.html.erb:197-201`, mêmes valeurs, jetons du design
 * system à la place des hexadécimaux. Il est rendu en LIEN et non en bouton :
 * il ouvre un écran, il n'engage rien.
 */
.page-recruiter-billing .btn-gold { display:inline-flex; align-items:center; gap:8px; border:none; border-radius:999px; padding:12px 22px; font-size:13.5px; font-weight:600; color:var(--n-0); text-shadow:0 1px 1px rgba(110,88,44,.55); background:var(--gold-satin); box-shadow:0 3px 10px rgba(163,133,67,.28), inset 0 1px 0 rgba(255,255,255,.28); transition:all var(--t); white-space:nowrap; }
.page-recruiter-billing .btn-gold:hover { transform:translateY(-1px); filter:saturate(1.06) brightness(1.02); }
.page-recruiter-billing .btn-gold[disabled] { background:var(--n-200); color:var(--n-400); text-shadow:none; box-shadow:none; cursor:not-allowed; }
.page-recruiter-billing .btn-gold[disabled]:hover { transform:none; filter:none; }
.page-recruiter-billing .btn-gold svg { width:15px; height:15px; }

/* ── L'écran de recharge (B3 tâche 024) ──
 * Portée de la MODALE `mockups/recruiter/billing.html.erb:310-340` (`.mo`,
 * `.rc-solde`, `.qty`, `.presets`, `.recap`, `.rcp`, `.rc-note`, `.mo-foot`,
 * `.btn-cancel`), mêmes classes et mêmes valeurs.
 *
 * Deux écarts, tous deux dans `decisions.md` :
 *
 *   · c'est une PAGE, pas une modale JavaScript. La source recopie le prix
 *     unitaire dans son script pour recalculer un total dans le navigateur ;
 *     ici tout est servi, et aucun montant n'existe dans une vue. Même geste
 *     que la confirmation de souscription (tâche 017). `.bd`, l'overlay, et
 *     `.mo-x`, la croix de fermeture, n'ont donc pas de raison d'être : le
 *     panneau `.mo` se centre dans la page et « Annuler » est le retour ;
 *   · `.mo` gagne `margin:0 auto` (elle était centrée par le flex de `.bd`).
 */
.page-recruiter-billing .mo { background:var(--n-0); border-radius:20px; box-shadow:0 24px 70px rgba(30,24,16,.12); width:100%; max-width:460px; margin:0 auto; border:1px solid var(--n-200); }
.page-recruiter-billing .mo-top { padding:24px 26px 10px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.page-recruiter-billing .mo-t { font-family:'Geist',system-ui,sans-serif; font-size:21px; font-weight:700; }
.page-recruiter-billing .mo-t em { font-style:italic; color:var(--gold-700); }
.page-recruiter-billing .mo-body { padding:6px 26px 4px; }
.page-recruiter-billing .rc-solde { text-align:center; font-size:12.5px; color:var(--n-500); padding:4px 0 8px; }
.page-recruiter-billing .rc-solde b { color:var(--n-900); }
.page-recruiter-billing .qty { display:flex; align-items:center; justify-content:center; gap:20px; margin:6px 0 6px; }
.page-recruiter-billing .qty a, .page-recruiter-billing .qty span.qty-off { width:40px; height:40px; border-radius:999px; border:1px solid var(--gold-200); background:var(--n-0); color:var(--gold-700); font-size:19px; font-weight:600; display:grid; place-items:center; }
.page-recruiter-billing .qty a:hover { background:var(--gold-50); }
.page-recruiter-billing .qty span.qty-off { color:var(--n-300); border-color:var(--n-200); }
.page-recruiter-billing .qty-v { font-family:'Geist',system-ui,sans-serif; font-size:40px; font-weight:700; min-width:88px; text-align:center; }
.page-recruiter-billing .qty-l { font-size:12px; color:var(--n-500); text-align:center; margin-bottom:16px; }
.page-recruiter-billing .presets { display:flex; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.page-recruiter-billing .pst { display:inline-block; border:1px solid var(--n-200); background:var(--n-0); border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:600; color:var(--n-700); }
.page-recruiter-billing .pst:hover, .page-recruiter-billing .pst.on { border-color:var(--gold-500); background:var(--gold-50); color:var(--gold-700); }
.page-recruiter-billing .recap { border:1px solid var(--n-200); border-radius:12px; overflow:hidden; margin-bottom:14px; }
.page-recruiter-billing .rcp { display:flex; justify-content:space-between; gap:16px; padding:11px 14px; font-size:13px; border-bottom:1px solid var(--n-100); }
.page-recruiter-billing .rcp > span:last-child { text-align:right; min-width:0; }
.page-recruiter-billing .rcp-note { font-size:11.5px; color:var(--n-500); line-height:1.4; }
.page-recruiter-billing .rcp:last-child { border-bottom:none; background:var(--n-50); font-weight:700; }
.page-recruiter-billing .rc-note { font-size:11.5px; color:var(--n-500); line-height:1.55; display:flex; gap:8px; margin-bottom:6px; }
.page-recruiter-billing .rc-note svg { width:14px; height:14px; color:var(--gold-700); flex-shrink:0; margin-top:1px; }
.page-recruiter-billing .mo-foot { padding:14px 26px 24px; border-top:1px solid var(--n-100); display:flex; gap:10px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.page-recruiter-billing .btn-cancel { display:inline-block; border:1px solid var(--n-200); background:var(--n-0); border-radius:999px; padding:11px 20px; font-size:13px; font-weight:600; color:var(--n-700); }
.page-recruiter-billing .btn-cancel:hover { border-color:var(--n-300); }
.page-recruiter-billing .mo-foot form { margin:0; }
.page-recruiter-billing .rc-blocked { display:flex; gap:10px; background:var(--n-50); border:1px solid var(--n-200); border-radius:11px; padding:13px 15px; font-size:12.5px; color:var(--n-700); line-height:1.55; margin-bottom:14px; }
.page-recruiter-billing .rc-blocked svg { width:16px; height:16px; color:var(--gold-700); flex-shrink:0; margin-top:1px; }

/* ═══ B3 tâche 025 — les factures et les avoirs ═══
 *
 * Portées de `mockups/recruiter/billing.html.erb` : la ligne de facture
 * (`:259-270`) et son repli à 720 px (`:250-252`), copiées telles quelles.
 *
 * Deux ajouts, et chacun sert un critère :
 *
 *   · `.inv-totals` — les totaux de la sélection (AC31.6, R3-31.10, R3-31.11),
 *     que la maquette n'a pas parce qu'elle n'a ni filtre ni pagination. Elle
 *     réutilise `.recap` / `.rcp`, déjà posées par la tâche 024 ;
 *   · `.fac-b span` casse les mots longs. À 390 px, « 1 048 320,00 € · 12
 *     février 2026 · Réglée » doit passer à la ligne, pas déborder
 *     (AC31.5, R3-31.9, R3-MOB.12).
 */
@media(max-width:720px){
  .page-recruiter-billing .fac { flex-wrap:wrap; gap:10px 12px; }
  .page-recruiter-billing .fac-b { flex:1 1 calc(100% - 50px); }
  .page-recruiter-billing .fac-act { flex-basis:100%; justify-content:flex-end; }
}
.page-recruiter-billing .fac { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--n-100); }
.page-recruiter-billing .fac:last-child { border-bottom:none; }
.page-recruiter-billing .fac-ic { width:36px; height:36px; border-radius:9px; background:var(--gold-50); border:1px solid var(--gold-200); color:var(--gold-700); display:grid; place-items:center; flex-shrink:0; }
.page-recruiter-billing .fac-ic svg { width:17px; height:17px; }
.page-recruiter-billing .fac-b { flex:1; min-width:0; }
.page-recruiter-billing .fac-b b { font-size:13.5px; display:block; }
.page-recruiter-billing .fac-b span { font-size:11.5px; color:var(--n-500); overflow-wrap:anywhere; }
.page-recruiter-billing .fac-act { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.page-recruiter-billing .fac-btn { display:inline-block; border:1px solid var(--n-200); background:#fff; border-radius:999px; padding:8px 15px; font-size:12.5px; font-weight:600; color:var(--n-700); transition:all var(--t); }
.page-recruiter-billing .fac-btn:hover { border-color:var(--gold-300); background:var(--gold-50); color:var(--gold-700); }
.page-recruiter-billing .fac-btn.dl { width:34px; padding:0; height:34px; display:grid; place-items:center; }
.page-recruiter-billing .fac-btn.dl svg { width:15px; height:15px; }
.page-recruiter-billing .inv-totals { border:1px solid var(--n-200); border-radius:12px; overflow:hidden; margin-top:16px; }
.page-recruiter-billing .inv-totals .rcp:last-child { border-bottom:none; background:var(--n-50); font-weight:700; }
/* Le sélecteur d'exercice, mesuré à 89 px au verrou mobile 390 px (R3-MOB.12).
 * Un champ écrasé sous 120 px est un défaut : on ne vise pas la cible du
 * verrou, on donne au sélecteur la largeur qu'il lui faut pour porter « Toutes
 * les années ». La règle vaut aussi pour les deux sélecteurs de l'historique
 * de Tellers, qui partagent cette classe et qui n'y perdent rien (deux
 * sélecteurs de 140 px et leur écart tiennent dans 390 px). */
.page-recruiter-billing .hist-f select { min-width:140px; }

/* ── B3 tâche 020 — Founding Member, et résiliation ─────────────────────────
 *
 * La maquette de facturation montre le prix remisé (« 299 € barré → 209 € »,
 * décision du 18/09) sans lui donner de classe : elle l'écrit en dur. On ajoute
 * donc le strict nécessaire, dans le vocabulaire de la carte (`pc-*`), et
 * aucune valeur de montant n'entre ici.
 *
 * `.pc-canceling` n'a pas de source non plus : la résiliation n'a aucune
 * maquette client (elle était au portail Stripe). Même famille que le bandeau
 * d'impayé de la tâche 021 : un état de compte se lit sans être cherché. */
.page-recruiter-billing .pc-was { font-size:22px; font-weight:600; color:var(--n-400); text-decoration:line-through; }
.page-recruiter-billing .pc-discount { font-size:12px; font-weight:600; color:var(--gold-700); margin-top:6px; }
.page-recruiter-billing .pc-canceling { margin-top:18px; padding:12px 14px; border-radius:11px; background:var(--red-50); border:1px solid var(--red-200); font-size:12.5px; line-height:1.5; color:#7A2E1F; }
.page-recruiter-billing .pc-canceling b { display:block; color:var(--red); font-weight:700; }
.page-recruiter-billing .pc-cancel { display:inline-block; margin-left:14px; font-size:12.5px; font-weight:600; color:var(--n-500); text-decoration:underline; white-space:nowrap; }
.page-recruiter-billing .pc-cancel:hover { color:var(--n-700); }

/* Les quatre motifs, posés quand la résiliation est passée par le portail du
   prestataire et que personne n'a répondu. */
.page-recruiter-billing .cx-reasons { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.page-recruiter-billing .cx-reason { display:inline-block; border:1px solid var(--n-200); border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; color:var(--n-700); background:var(--n-0); transition:all var(--t); }
.page-recruiter-billing .cx-reason:hover { border-color:var(--gold-400); background:var(--gold-50); color:var(--gold-700); }

/* Correctif du 22/09 — R3-26.6. L'ALERTE DE SOLDE BAS.
 *
 * Ces quatre règles viennent de `recruiter_dashboard.css`, sans une valeur de
 * changée. Elles ont déménagé parce que le bloc est rendu sur DEUX écrans
 * (`recruiter/tellers/_low_balance`) et que seul celui-ci charge la feuille du
 * tableau de bord. L'écran du capital charge celle-ci ; le tableau de bord
 * charge les deux, son rendu ne bouge pas. */
.rdz-tel-alert{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid var(--amber-200);background:var(--amber-50);border-radius:var(--r-md)}
.rdz-tel-alert svg{width:16px;height:16px;flex-shrink:0;color:var(--amber-strong);margin-top:1px}
.rdz-tel-alert b{display:block;font-size:13px;font-weight:700;color:var(--amber-strong)}
.rdz-tel-alert p{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--n-700)}

/* #4412 — le pot « Offerts » (Tellers offerts à l'inscription) : troisième
   colonne quand il existe, une seule colonne sous 700 px comme les deux autres. */
.page-recruiter-billing .pots:has(.pot-welcome) { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:900px){ .page-recruiter-billing .pots:has(.pot-welcome) { grid-template-columns:1fr; } }
.page-recruiter-billing .pot-n.welc { background:#F1ECF8; color:#5B4891; border-color:#DCD2EE; }
.page-recruiter-billing .pot-fill.welc { background:#8F7CC4; }
.page-recruiter-billing .pot-tag.welc { background:#F1ECF8; color:#5B4891; border-color:#DCD2EE; }