/* Genere par `php bin/maticpay assets`. Ne pas editer a la main. */
/* MaticPay — chargement des polices de la console.
   Remplace design-system/tokens/fonts.css : même rôle, familles décidées en revue.
   Doit rester en tête du bundle (règle CSS : @import avant toute déclaration).

   Red Hat Mono remplace JetBrains Mono comme voix technique — voir tokens.css.
   JetBrains Mono n'est donc plus téléchargée.

   Figtree s'ajoute pour les chiffres — voir ÉCART 2 dans tokens.css. Archivo
   reste chargée avec son axe de chasse : c'est le logotype et les titres. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Figtree:wght@400..700&family=Public+Sans:wght@400;500;600;700&family=Red+Hat+Mono:wght@400;500;600&display=swap");
/* MaticPay — couleurs. Encre marine, blanc froid, un accent violet. Deux alertes. Rien d'autre. */
:root{
/* Accent — violet électrique : action, symbole, focus, paiement en plusieurs fois. 500 = 5,2:1 sur blanc (texte et boutons). */
--mp-accent-50:#F1F0FE;--mp-accent-100:#E3E0FD;--mp-accent-200:#C8C2FB;--mp-accent-300:#A79EF8;--mp-accent-400:#8578F3;--mp-accent-500:#5E4FEA;--mp-accent-600:#4B3CD6;--mp-accent-700:#3D2FB4;--mp-accent-800:#30258C;--mp-accent-900:#231B66;
/* Encre — marine profonde : logotype, titres, surfaces sombres, impression, statut abouti. */
--mp-encre-50:#EEF2F6;--mp-encre-100:#D9E1EA;--mp-encre-200:#B2C1D1;--mp-encre-300:#8399AF;--mp-encre-400:#577089;--mp-encre-500:#3A526B;--mp-encre-600:#273E56;--mp-encre-700:#1A2F45;--mp-encre-800:#0F2236;--mp-encre-900:#08172A;
/* Neutres — froids, tirés vers l'encre. */
--mp-neutre-0:#F7F9FC;--mp-neutre-25:#F2F5F9;--mp-neutre-50:#EBEFF4;--mp-neutre-100:#DFE5EC;--mp-neutre-200:#C9D2DC;--mp-neutre-300:#A8B4C1;--mp-neutre-400:#8291A1;--mp-neutre-500:#637282;--mp-neutre-600:#4B5867;--mp-neutre-700:#37424F;--mp-neutre-800:#232C36;--mp-neutre-900:#141B23;
/* Alertes */
--mp-ocre-50:#FBF2DF;--mp-ocre-500:#D39A2E;--mp-ocre-700:#8A5A12;
--mp-laterite-50:#FBEAE7;--mp-laterite-500:#C9483B;--mp-laterite-700:#A3302A;
/* Séries de données */
--mp-serie-1:#0F2236;--mp-serie-2:#5E4FEA;--mp-serie-3:#D39A2E;--mp-serie-4:#8291A1;--mp-serie-5:#A79EF8;--mp-serie-6:#8399AF;
--mp-age-0-30:#E9C77E;--mp-age-31-60:#D99447;--mp-age-61-90:#C2603A;--mp-age-90:#8E2B24;
--mp-op-orange:#E8711C;--mp-op-mtn:#F2C200;--mp-op-moov:#1D5FB0;--mp-op-wave:#3DB6E8;

--mp-bg:var(--mp-neutre-0);--mp-bg-sunken:var(--mp-neutre-25);--mp-surface:#FFFFFF;--mp-surface-raised:#FFFFFF;--mp-surface-inverse:var(--mp-encre-800);
--mp-border:var(--mp-neutre-100);--mp-border-strong:var(--mp-neutre-200);--mp-border-input:var(--mp-neutre-300);
--mp-text:var(--mp-encre-800);--mp-text-2:var(--mp-neutre-600);--mp-text-3:var(--mp-neutre-500);--mp-text-inverse:var(--mp-neutre-0);--mp-text-link:var(--mp-accent-600);
--mp-brand:var(--mp-accent-500);--mp-brand-strong:var(--mp-accent-700);--mp-brand-soft:var(--mp-accent-50);--mp-brand-tint:var(--mp-accent-100);
--mp-action:var(--mp-accent-500);--mp-action-hover:var(--mp-accent-600);--mp-action-press:var(--mp-accent-700);--mp-action-text:#FFFFFF;
--mp-selected:var(--mp-accent-50);--mp-selected-border:var(--mp-accent-500);--mp-focus:var(--mp-accent-400);--mp-focus-inner:#FFFFFF;--mp-hover:var(--mp-neutre-25);
--mp-fractionne:var(--mp-accent-600);--mp-fractionne-fill:var(--mp-accent-500);--mp-fractionne-soft:var(--mp-accent-50);
--mp-success:var(--mp-encre-700);--mp-success-fill:var(--mp-encre-700);--mp-success-soft:var(--mp-neutre-50);
--mp-warning:var(--mp-ocre-700);--mp-warning-fill:var(--mp-ocre-500);--mp-warning-soft:var(--mp-ocre-50);
--mp-critical:var(--mp-laterite-700);--mp-critical-fill:var(--mp-laterite-500);--mp-critical-soft:var(--mp-laterite-50);
--mp-info:var(--mp-neutre-700);--mp-info-fill:var(--mp-neutre-500);--mp-info-soft:var(--mp-neutre-50);
--mp-neutral:var(--mp-neutre-600);--mp-neutral-soft:var(--mp-neutre-50);
--mp-scrim:rgba(8,23,42,.48);
}
[data-theme="dark"]{
--mp-bg:#0A1624;--mp-bg-sunken:#07111D;--mp-surface:#0F1E30;--mp-surface-raised:#15263A;--mp-surface-inverse:#E6ECF3;
--mp-border:#1F3248;--mp-border-strong:#2A4059;--mp-border-input:#3E5670;
--mp-text:#E6ECF3;--mp-text-2:#A9B6C4;--mp-text-3:#8C9AAA;--mp-text-inverse:#0A1624;--mp-text-link:#A79EF8;
--mp-brand:#8578F3;--mp-brand-strong:#A79EF8;--mp-brand-soft:#1A1F45;--mp-brand-tint:#222858;
--mp-action:#8578F3;--mp-action-hover:#9A8FF6;--mp-action-press:#A79EF8;--mp-action-text:#0B0A2A;
--mp-selected:#1A1F45;--mp-selected-border:#8578F3;--mp-focus:#A79EF8;--mp-focus-inner:#0A1624;--mp-hover:#132438;
--mp-fractionne:#A79EF8;--mp-fractionne-fill:#8578F3;--mp-fractionne-soft:#1A1F45;
--mp-success:#D9E1EA;--mp-success-fill:#D9E1EA;--mp-success-soft:#15263A;
--mp-warning:#EBC074;--mp-warning-fill:#D39A2E;--mp-warning-soft:#2A2213;
--mp-critical:#F09C91;--mp-critical-fill:#E06A5C;--mp-critical-soft:#2D1816;
--mp-info:#C9D3DE;--mp-info-fill:#8C9AAA;--mp-info-soft:#15263A;
--mp-neutral:#A9B6C4;--mp-neutral-soft:#15263A;--mp-scrim:rgba(3,8,14,.7);
--mp-serie-1:#E6ECF3;--mp-serie-2:#8578F3;--mp-serie-3:#E3B45A;--mp-serie-4:#8C9AAA;--mp-serie-5:#C8C2FB;--mp-serie-6:#577089;
}
:root{
/* Voix de marque : Archivo (axe de chasse 62–125). Chiffres francs, axe de chasse = montants longs tenus sur 360 px. */
--mp-font-brand:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
/* Voix d'interface : Public Sans. Neutre, solide, chiffres tabulaires, accents français soignés. */
--mp-font-ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
/* Voix technique : JetBrains Mono. Références, clés, codes. */
--mp-font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
/* Checkout & portail payeur : pile système, 0 ko. */
--mp-font-system:system-ui,-apple-system,"Segoe UI",sans-serif;

/* Échelle — taille / interligne / graisse / interlettrage */
--mp-fs-amount-xl:44px;--mp-lh-amount-xl:48px;   /* montant checkout */
--mp-fs-amount-l:32px;--mp-lh-amount-l:36px;     /* montant carte / KPI */
--mp-fs-display:28px;--mp-lh-display:34px;       /* titre de page marque */
--mp-fs-h1:22px;--mp-lh-h1:28px;
--mp-fs-h2:17px;--mp-lh-h2:24px;
--mp-fs-h3:14px;--mp-lh-h3:20px;
--mp-fs-body:14px;--mp-lh-body:21px;
--mp-fs-body-l:16px;--mp-lh-body-l:24px;          /* mobile */
--mp-fs-small:13px;--mp-lh-small:18px;
--mp-fs-micro:11.5px;--mp-lh-micro:16px;          /* en-têtes de colonne, surtitres */
--mp-fs-dense:12.5px;--mp-lh-dense:17px;          /* back-office */
--mp-fw-regular:400; /* @kind font */
--mp-fw-medium:500; /* @kind font */
--mp-fw-semibold:600; /* @kind font */
--mp-fw-bold:700; /* @kind font */
--mp-ls-tight:-0.015em;--mp-ls-amount:-0.02em;--mp-ls-caps:0.06em;
--mp-wdth-amount:88; /* @kind font */   /* Archivo semi-condensé pour les montants */
--mp-numeric-variant:tabular-nums lining-nums; /* @kind other */
--mp-nbsp-thin:"\202F"; /* @kind other */ /* espace fine insécable : séparateur de milliers */
}
:root{
/* Base 4 px. */
--mp-space-0:0;--mp-space-1:2px;--mp-space-2:4px;--mp-space-3:8px;--mp-space-4:12px;--mp-space-5:16px;--mp-space-6:20px;--mp-space-7:24px;--mp-space-8:32px;--mp-space-9:40px;--mp-space-10:56px;--mp-space-11:72px;
/* Conteneurs par densité */
--mp-container-checkout:420px;   /* checkout & portail, 360 px visé */
--mp-container-console:1240px;   /* console marchand */
--mp-container-backoffice:1600px;/* back-office opérateur */
--mp-sidebar-w:232px;--mp-topbar-h:56px;
--mp-gutter-checkout:16px;--mp-gutter-console:24px;--mp-gutter-backoffice:16px;
/* Hauteurs de ligne de contrôle */
--mp-control-s:32px;--mp-control-m:40px;--mp-control-l:48px;--mp-control-touch:52px;
--mp-row-console:44px;--mp-row-backoffice:32px;
/* Rayons — signaux de rôle, pas un réglage global */
--mp-radius-0:0;
--mp-radius-xs:3px;   /* pastilles, cases */
--mp-radius-s:6px;    /* champs, boutons */
--mp-radius-m:10px;   /* cartes de contenu */
--mp-radius-l:16px;   /* modales, feuilles mobiles */
--mp-radius-hump:999px 999px 0 0; /* « bosse » du m : réservé aux marqueurs d'échéance */
--mp-radius-pill:999px;
/* Bordures */
--mp-border-w:1px;--mp-border-w-strong:1.5px;--mp-focus-w:2px;
--mp-focus-ring:0 0 0 2px var(--mp-focus-inner),0 0 0 4px var(--mp-focus);
}
:root{
/* Élévation — 4 niveaux seulement. 0 = à plat (cartes : bordure, pas d'ombre). */
--mp-elev-0:none;
--mp-elev-1:0 1px 0 rgba(23,28,25,.04),0 1px 2px rgba(23,28,25,.06);           /* menu, infobulle collée */
--mp-elev-2:0 2px 4px rgba(23,28,25,.05),0 8px 24px -6px rgba(23,28,25,.14);   /* tiroir, menu déroulant, toast */
--mp-elev-3:0 4px 8px rgba(23,28,25,.06),0 24px 56px -12px rgba(21,28,53,.28); /* modale */
/* Mouvement */
--mp-dur-instant:80ms; /* @kind other */   /* survol, appui */
--mp-dur-fast:140ms; /* @kind other */     /* focus, bascule */
--mp-dur-base:200ms; /* @kind other */     /* menu, infobulle, toast */
--mp-dur-slow:280ms; /* @kind other */     /* tiroir, modale */
--mp-dur-pulse:1600ms; /* @kind other */   /* attente de confirmation opérateur — seul mouvement continu */
--mp-ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--mp-ease-in-out:cubic-bezier(.45,0,.2,1); /* @kind other */
}
[data-theme="dark"]{
--mp-elev-1:0 0 0 1px #24302B;
--mp-elev-2:0 0 0 1px #2F3D37,0 12px 28px -8px rgba(0,0,0,.6);
--mp-elev-3:0 0 0 1px #2F3D37,0 28px 60px -12px rgba(0,0,0,.72);
}
@media (prefers-reduced-motion:reduce){:root{--mp-dur-instant:0ms; /* @kind other */--mp-dur-fast:0ms; /* @kind other */--mp-dur-base:0ms; /* @kind other */--mp-dur-slow:0ms; /* @kind other */--mp-dur-pulse:0ms; /* @kind other */}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--mp-bg);color:var(--mp-text);font-family:var(--mp-font-ui);font-size:var(--mp-fs-body);line-height:var(--mp-lh-body);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
a{color:var(--mp-text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--mp-encre-800);text-decoration-thickness:2px}
:focus-visible{outline:none;box-shadow:var(--mp-focus-ring);border-radius:var(--mp-radius-s)}
.mp-num{font-variant-numeric:tabular-nums lining-nums}
.mp-amount{font-family:var(--mp-font-brand);font-variation-settings:"wdth" var(--mp-wdth-amount);font-variant-numeric:tabular-nums lining-nums;letter-spacing:var(--mp-ls-amount);font-weight:600}
.mp-mono{font-family:var(--mp-font-mono);font-size:.92em;letter-spacing:0}
.mp-caps{font-size:var(--mp-fs-micro);line-height:var(--mp-lh-micro);letter-spacing:var(--mp-ls-caps);text-transform:uppercase;font-weight:600;color:var(--mp-text-3)}
@keyframes mp-skeleton{0%{opacity:.55}50%{opacity:1}100%{opacity:.55}}
@keyframes mp-spin{to{transform:rotate(360deg)}}
@keyframes mp-pulse{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes mp-rise{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
/* Classes de composants (états survol / focus / actif / désactivé / chargement). Utilisées par components/**. */
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--mp-control-m);padding:0 16px;border-radius:var(--mp-radius-s);border:1px solid transparent;font:600 14px/1 var(--mp-font-ui);letter-spacing:-0.005em;cursor:pointer;white-space:nowrap;transition:background var(--mp-dur-instant) linear,border-color var(--mp-dur-instant) linear,transform var(--mp-dur-instant) linear;position:relative;text-decoration:none}
.mp-btn:focus-visible{box-shadow:var(--mp-focus-ring)}
.mp-btn:active:not(:disabled){transform:translateY(1px)}
.mp-btn:disabled,.mp-btn[aria-disabled="true"]{cursor:not-allowed;opacity:1;background:var(--mp-neutral-soft)!important;color:var(--mp-text-3)!important;border-color:var(--mp-border)!important}
.mp-btn--s{height:var(--mp-control-s);padding:0 12px;font-size:13px;gap:6px}
.mp-btn--l{height:var(--mp-control-l);padding:0 20px;font-size:15px}
.mp-btn--touch{height:var(--mp-control-touch);padding:0 20px;font-size:16px;width:100%;font-family:var(--mp-font-system)}
.mp-btn--block{width:100%}
.mp-btn--primary{background:var(--mp-action);color:var(--mp-action-text)}
.mp-btn--primary:hover{background:var(--mp-action-hover)}.mp-btn--primary:active{background:var(--mp-action-press)}
.mp-btn--secondary{background:var(--mp-surface);color:var(--mp-text);border-color:var(--mp-border-input)}
.mp-btn--secondary:hover{background:var(--mp-hover);border-color:var(--mp-neutre-400)}
.mp-btn--quiet{background:transparent;color:var(--mp-text)}
.mp-btn--quiet:hover{background:var(--mp-hover)}
.mp-btn--danger{background:var(--mp-laterite-700);color:#fff}
.mp-btn--danger:hover{background:#8C2620}
[data-theme="dark"] .mp-btn--danger{background:#E06A5C;color:#1A0B09}
.mp-btn--fractionne{background:var(--mp-accent-700);color:#fff}
.mp-btn--fractionne:hover{background:var(--mp-accent-800)}
[data-theme="dark"] .mp-btn--fractionne{background:#8578F3;color:#0F1F18}
.mp-btn--loading{color:transparent!important;pointer-events:none}
.mp-btn--loading .mp-btn__spin{position:absolute;inset:0;margin:auto;color:var(--spin,currentColor)}
.mp-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mp-spin 700ms linear infinite}
.mp-iconbtn{display:inline-grid;place-items:center;width:var(--mp-control-m);height:var(--mp-control-m);border-radius:var(--mp-radius-s);border:1px solid transparent;background:transparent;color:var(--mp-text-2);cursor:pointer;transition:background var(--mp-dur-instant)}
.mp-iconbtn:hover{background:var(--mp-hover);color:var(--mp-text)}.mp-iconbtn:focus-visible{box-shadow:var(--mp-focus-ring)}
.mp-iconbtn--s{width:var(--mp-control-s);height:var(--mp-control-s)}
.mp-iconbtn--outline{border-color:var(--mp-border-input);background:var(--mp-surface)}
/* Champs */
.mp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mp-field__label{font:600 13px/18px var(--mp-font-ui);color:var(--mp-text)}
.mp-field__opt{font-weight:400;color:var(--mp-text-3)}
.mp-field__hint{font-size:12.5px;line-height:17px;color:var(--mp-text-2)}
.mp-field__msg{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:17px;font-weight:500}
.mp-field__msg--error{color:var(--mp-critical)}.mp-field__msg--success{color:var(--mp-success)}
.mp-input{display:flex;align-items:center;gap:8px;height:var(--mp-control-m);padding:0 12px;background:var(--mp-surface);border:1px solid var(--mp-border-input);border-radius:var(--mp-radius-s);transition:border-color var(--mp-dur-instant),box-shadow var(--mp-dur-fast);color:var(--mp-text)}
.mp-input:hover{border-color:var(--mp-neutre-400)}
.mp-input:focus-within{border-color:var(--mp-accent-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--mp-focus) 35%,transparent)}
.mp-input--error{border-color:var(--mp-critical-fill);border-width:1.5px}
.mp-input--success{border-color:var(--mp-success-fill)}
.mp-input--disabled{background:var(--mp-bg-sunken);border-color:var(--mp-border);color:var(--mp-text-3)}
.mp-input--l{height:var(--mp-control-touch);font-size:17px;padding:0 14px}
.mp-input input,.mp-input select{all:unset;flex:1;min-width:0;height:100%;font:inherit;color:inherit}
.mp-input input::placeholder{color:var(--mp-text-3)}
.mp-input__affix{color:var(--mp-text-2);font-weight:500;flex:none}
.mp-input__sep{width:1px;align-self:stretch;margin:8px 0;background:var(--mp-border-strong)}
.mp-otp{display:flex;gap:8px}
.mp-otp input{all:unset;width:44px;height:52px;text-align:center;border:1px solid var(--mp-border-input);border-radius:var(--mp-radius-s);background:var(--mp-surface);font:600 22px/1 var(--mp-font-brand);font-variant-numeric:tabular-nums;color:var(--mp-text)}
.mp-otp input:focus{border-color:var(--mp-accent-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--mp-focus) 35%,transparent)}
.mp-otp--error input{border-color:var(--mp-critical-fill)}
/* Choix */
.mp-check{display:inline-flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:20px;color:var(--mp-text)}
.mp-check input{position:absolute;opacity:0;width:1px;height:1px}
.mp-check__box{flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--mp-neutre-400);border-radius:var(--mp-radius-xs);background:var(--mp-surface);display:grid;place-items:center;color:#fff;transition:background var(--mp-dur-instant),border-color var(--mp-dur-instant)}
.mp-check--radio .mp-check__box{border-radius:50%}
.mp-check:hover .mp-check__box{border-color:var(--mp-text-2)}
.mp-check input:checked+.mp-check__box{background:var(--mp-action);border-color:var(--mp-action);color:var(--mp-action-text)}
.mp-check--radio input:checked+.mp-check__box{background:var(--mp-surface);border:5.5px solid var(--mp-action)}
.mp-check input:focus-visible+.mp-check__box{box-shadow:var(--mp-focus-ring)}
.mp-check input:disabled+.mp-check__box{background:var(--mp-bg-sunken);border-color:var(--mp-border-strong)}
.mp-check--disabled{color:var(--mp-text-3);cursor:not-allowed}
.mp-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.mp-switch input{position:absolute;opacity:0;width:1px;height:1px}
.mp-switch__track{width:36px;height:20px;border-radius:10px;background:var(--mp-neutre-300);position:relative;transition:background var(--mp-dur-fast)}
.mp-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--mp-dur-fast) var(--mp-ease-out)}
.mp-switch input:checked+.mp-switch__track{background:var(--mp-accent-700)}
.mp-switch input:checked+.mp-switch__track::after{transform:translateX(16px)}
.mp-switch input:focus-visible+.mp-switch__track{box-shadow:var(--mp-focus-ring)}
.mp-switch input:disabled+.mp-switch__track{opacity:.45}
/* Onglets, navigation */
.mp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--mp-border)}
.mp-tab{all:unset;cursor:pointer;padding:10px 12px;font:500 14px/20px var(--mp-font-ui);color:var(--mp-text-2);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:8px;align-items:center}
.mp-tab:hover{color:var(--mp-text)}
.mp-tab[aria-selected="true"]{color:var(--mp-text);font-weight:600;border-bottom-color:var(--mp-text)}
.mp-tab:focus-visible{box-shadow:var(--mp-focus-ring)}
.mp-tab__count{font-size:12px;padding:0 6px;border-radius:9px;background:var(--mp-neutral-soft);color:var(--mp-text-2);font-variant-numeric:tabular-nums}
.mp-nav-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--mp-radius-s);color:var(--mp-text-2);font:500 14px/1 var(--mp-font-ui);cursor:pointer;width:100%}
.mp-nav-item:hover{background:var(--mp-hover);color:var(--mp-text)}
.mp-nav-item[aria-current="page"]{background:var(--mp-surface);color:var(--mp-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--mp-border),inset 2px 0 0 var(--mp-action)}
.mp-nav-item:focus-visible{box-shadow:var(--mp-focus-ring)}
.mp-menu-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:4px;font-size:14px;color:var(--mp-text);cursor:pointer}
.mp-menu-item:hover,.mp-menu-item:focus-visible{background:var(--mp-hover)}
.mp-menu-item--danger{color:var(--mp-critical)}
/* Tableau dense */
.mp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.mp-table th{position:sticky;top:0;background:var(--mp-bg-sunken);text-align:left;font:600 11.5px/16px var(--mp-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--mp-text-2);padding:8px 12px;border-bottom:1px solid var(--mp-border-strong);white-space:nowrap}
.mp-table td{padding:0 12px;height:var(--mp-row-console);border-bottom:1px solid var(--mp-border);white-space:nowrap}
.mp-table--dense td{height:var(--mp-row-backoffice);font-size:12.5px}
.mp-table tbody tr:hover td{background:var(--mp-hover)}
.mp-table tbody tr[aria-selected="true"] td{background:var(--mp-selected)}
.mp-table .num{text-align:right;font-variant-numeric:tabular-nums}
.mp-sort{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.mp-sort:hover{color:var(--mp-text)}
.mp-skel{background:var(--mp-neutre-100);border-radius:4px;animation:mp-skeleton 1.4s ease-in-out infinite}
[data-theme="dark"] .mp-skel{background:#22302A}
.mp-tooltip{position:relative;display:inline-flex}
.mp-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--mp-surface-inverse);color:var(--mp-text-inverse);font-size:12.5px;line-height:17px;padding:6px 9px;border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--mp-dur-base);z-index:20}
.mp-tooltip:hover .mp-tooltip__bubble,.mp-tooltip:focus-within .mp-tooltip__bubble,.mp-tooltip--open .mp-tooltip__bubble{opacity:1}
.mp-plan{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px;border:1.5px solid var(--mp-border-strong);border-radius:var(--mp-radius-m);background:var(--mp-surface);min-height:44px;transition:border-color var(--mp-dur-instant)}
.mp-plan:hover{border-color:var(--mp-accent-400)}
.mp-plan[aria-checked="true"]{border-color:var(--mp-fractionne);background:var(--mp-fractionne-soft);box-shadow:inset 0 0 0 1px var(--mp-fractionne)}
.mp-plan:focus-visible{box-shadow:var(--mp-focus-ring)}
.mp-drop{border:1.5px dashed var(--mp-border-input);border-radius:var(--mp-radius-m);background:var(--mp-bg-sunken);transition:border-color var(--mp-dur-instant),background var(--mp-dur-instant)}
.mp-drop:hover,.mp-drop--over{border-color:var(--mp-accent-600);background:var(--mp-brand-soft)}
.mp-day{all:unset;cursor:pointer;width:34px;height:32px;display:grid;place-items:center;border-radius:4px;font-size:13px;font-variant-numeric:tabular-nums}
.mp-day:hover{background:var(--mp-hover)}
.mp-day[aria-selected="true"]{background:var(--mp-action);color:var(--mp-action-text);font-weight:600}
.mp-day--muted{color:var(--mp-text-3)}
.mp-day--today{box-shadow:inset 0 0 0 1px var(--mp-border-input)}
.mp-day--range{background:var(--mp-brand-soft);border-radius:0}
.mp-day:focus-visible{box-shadow:var(--mp-focus-ring)}
/* MaticPay — écarts assumés par rapport au design system livré.
   Chargé APRÈS les jetons du DS : ce qui est ici gagne.

   Le dossier design-system/ reste intact, tel que livré par Claude Design.
   Toute divergence se déclare ici, avec sa raison. C'est le seul endroit à relire
   quand le design system est ré-exporté.
   ------------------------------------------------------------------------- */

:root {
  /* ÉCART 1 — Voix technique : Red Hat Mono au lieu de JetBrains Mono.
     Décidé en revue le 4 octobre 2026. Terminaisons arrondies, moins « console
     de développeur » dans un tableau financier, et meilleure cohabitation avec
     une grotesque. Son rôle est inchangé et reste strictement borné aux
     références, identifiants, clés et URL — jamais les dates ni les numéros. */
  --mp-font-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ÉCART 2 — Voix des chiffres : Figtree, séparée de la voix de marque.
     Décidé le 7 novembre 2026.

     Le DS livré fait porter les deux rôles par Archivo : le logotype ET les
     montants. Mais ce qui sert le logotype le dessert dans un tableau. Archivo
     est une grotesque semi-condensée, et les montants la prenaient en chasse 88
     — verticales serrées, courbes plates, allure haute. Un solde y paraissait
     étroit et dur, là où un chiffre doit se lire d'un coup.

     Figtree est plus large et ses bols sont pleins : le 0 et le 8 respirent, le
     1 tient la colonne. Le logotype, lui, garde Archivo en chasse 92 — c'est la
     marque, elle ne se renégocie pas pour une question de tableau.

     Figtree n'a PAS d'axe de chasse : partout où un montant portait
     `font-variation-settings: "wdth" …`, la déclaration devient un mensonge
     silencieux et doit passer à `normal`. --mp-wdth-amount ne sert donc plus
     qu'au DS livré, que nous ne modifions pas. */
  --mp-font-num: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Interlettrage des montants : -0,02 em serrait une chasse condensée. Sur des
     bols ronds, le même resserrement les fait se toucher. */
  --mp-ls-amount: -0.008em;
}

/* Ce que coûte Figtree — et ce que la mesure a réellement trouvé.

   À corps égal, Figtree est 21 % plus large qu'Archivo en chasse 88 : c'est
   précisément ce que l'axe de chasse du DS livré protégeait, « montants longs
   tenus sur 360 px ». Mesure faite à 360 px, dans une carte de 296 px utiles :

     - Solde du tableau de bord : app.css le replie déjà sur la taille L sous
       420 px. En Figtree il rend 278 px sur 296. Ça passe, de peu, et c'est
       mesuré plutôt que supposé.
     - Tuiles : une colonne sous 420 px, et un nombre sans devise y tient
       largement. Rien à faire.
     - Montant du checkout : 44 px, et il DÉBORDAIT DÉJÀ — 310 px en system-ui,
       avant Figtree. Le checkout ne charge aucune police distante, donc Figtree
       n'y change rien ; le défaut lui préexistait et la mesure l'a révélé.

   Le repli ci-dessous corrige donc ce dernier cas, le seul qui reste. 34 px
   passe jusqu'à 45 900 250 FCFA, ce qui couvre tout ce qu'un marchand verra. */
@media (max-width: 420px) {
  :root {
    --mp-fs-amount-xl: 34px;
    --mp-lh-amount-xl: 38px;
  }
}

/* Les deux composants du DS livré qui écrivent des chiffres. Ce fichier étant
   chargé en dernier, ces règles l'emportent a specificité égale. */
.mp-amount {
  font-family: var(--mp-font-num);
  font-variation-settings: normal;
}
.mp-otp input {
  font-family: var(--mp-font-num);
  font-variation-settings: normal;
}