/* ════════════════════════════════════════════════════════════════
   paiements-commun.css — pastille de solde et badges de règlement de l'espace client (P-fin préparation, 28/10/2026 ;
   js/paiements-commun.js, `MXPAYC`). Règles copiées MOT POUR MOT de la feuille `#mxy-styles` d'index.html (pay-v2), qui
   part avec l'ancien écran Paiements à P-fin : jetons `--mxy-*` (clair et sombre), réglages de base du périmètre `.mxy`,
   icône, 9 badges de statut, pastille « N séances · + » et ses libellés. Tant que `#mxy-styles` est là, les mêmes règles
   existent deux fois avec les mêmes valeurs (aucun effet). Preuve : node outil/pfin-preparation-garde.mjs (styles calculés
   identiques avec et sans l'ancienne feuille, clair et sombre).
   ════════════════════════════════════════════════════════════════ */
.mxy{--mxy-bg:#F4F2ED;--mxy-card:#FFFFFF;--mxy-ink:#0F0E0C;--mxy-ink2:#4A463D;--mxy-mut:#8A8577;--mxy-line:#E6E2D6;--mxy-line2:#D5D0C2;--mxy-red:#E8170A;--mxy-redbg:#FBE9E7;--mxy-grn:#1B6B35;--mxy-grnbg:#E7F0EA;--mxy-goldtx:#8A6A00;--mxy-goldbg:#F3E8C8}
body.dark-mode .mxy{--mxy-bg:#171614;--mxy-card:#242320;--mxy-ink:#F0EDE8;--mxy-ink2:#CFCABC;--mxy-mut:#9C9689;--mxy-line:#3A3833;--mxy-line2:#4A473F;--mxy-red:#FF3B2E;--mxy-redbg:#3A1512;--mxy-grn:#4CB06F;--mxy-grnbg:#1B2C21;--mxy-goldtx:#E2C262;--mxy-goldbg:#2A2110}
:where(.mxy){font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums;color:var(--mxy-ink);line-height:1.5;-webkit-font-smoothing:antialiased}
:where(.mxy) *{box-sizing:border-box;margin:0}
:where(.mxy) h1,:where(.mxy) h2,:where(.mxy) h3,:where(.mxy) h4{font-family:'Saira',sans-serif}
:where(.mxy) p{margin:0}
:where(.mxy) svg{display:block}
:where(.mxy) b,:where(.mxy) strong{font-weight:700}
:where(.mxy) button{font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums;cursor:pointer;border:none;background:none;padding:0;color:inherit;text-align:left;font-size:inherit}
:where(.mxy) a{color:var(--mxy-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.2px}
:where(.mxy) a:hover{color:var(--mxy-red)}
.mxy-wic{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.mxy-bdg{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;border:1px solid transparent;font-family:'Saira',sans-serif;font-weight:600;font-size:9.8px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.mxy-bd-card{border-color:var(--mxy-line2);color:var(--mxy-ink2)}
.mxy-bd-auth{border-color:var(--mxy-goldtx);color:var(--mxy-goldtx)}
.mxy-bd-hold{background:var(--mxy-goldbg);color:var(--mxy-goldtx)}
.mxy-bd-paid{border-color:var(--mxy-grn);color:var(--mxy-grn)}
.mxy-bd-out{background:var(--mxy-grnbg);color:var(--mxy-grn)}
.mxy-bd-cxl{background:color-mix(in srgb, var(--mxy-mut) 16%, transparent);color:var(--mxy-mut)}
.mxy-bd-rfd{border-color:var(--mxy-ink2);color:var(--mxy-ink2)}
.mxy-bd-lit{background:var(--mxy-redbg);color:var(--mxy-red)}
.mxy-bd-fail{border-color:var(--mxy-red);color:var(--mxy-red)}
.mxy-solde{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 12px;border:1.5px solid var(--mxy-line2);border-radius:10px;background:var(--mxy-card);font-size:12.5px;font-weight:700;color:var(--mxy-ink);white-space:nowrap}
.mxy-solde i{font-style:normal;color:var(--mxy-mut)}
.mxy-solde .mxy-wic{width:16px;height:16px;margin:0;color:var(--mxy-red)}
.mxy-solde-z{border-color:var(--mxy-red);color:var(--mxy-red)}
.mxy-solde-z .mxy-wic{color:var(--mxy-red)}
.mxy-solde-z .mxy-lbl-s{display:none}
@container mxyvp (max-width:429px){ .mxy-solde-z .mxy-lbl-l{display:none} .mxy-solde-z .mxy-lbl-s{display:inline} }
@container mxyvp (max-width:339px){ .mxy-solde{padding:10px 10px} }