/* MaticPay — styles applicatifs.
   Construits exclusivement sur les jetons du design system (bundle-console.css /
   bundle-checkout.css). Aucune valeur de couleur, de rayon ou d'espacement en dur.

   Regles du DS respectees ici :
   - cartes : bordure 1 px, AUCUNE ombre, aucun lisere colore
   - rayons = signal de role : 0 tableaux/bandeaux, 3 pastilles, 6 champs/boutons,
     10 cartes, 16 modales
   - focus : double anneau (--mp-focus-ring), jamais l'anneau navigateur
   - survol : fond --mp-hover, jamais d'opacite ; appui : translation 1 px
   - alignement a gauche ; seul l'ecran de succes mobile est centre
   - tout statut porte un glyphe + un texte, jamais la couleur seule
*/

/* ---------------------------------------------------------------- ossature */
.shell {
  display: grid;
  grid-template-columns: var(--mp-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-border);
  padding: var(--mp-space-5) var(--mp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mp-space-2);
  padding: var(--mp-space-2) var(--mp-space-3);
  color: var(--mp-text);
  text-decoration: none;
}
/* Le logotype est une image : il ne suit pas le theme. Sur fond sombre, on
   l eclaircit plutot que de charger un second fichier. */
.brand-logo { display: block; width: 150px; height: auto; }
[data-theme="dark"] .brand-logo { filter: brightness(1.9) saturate(.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo { filter: brightness(1.9) saturate(.75); }
}
.brand svg { color: var(--mp-accent-500); flex: none; }
.brand b {
  font-family: var(--mp-font-brand);
  font-variation-settings: "wdth" 92;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.035em;
  display: block;
  line-height: 1.1;
}
.brand small {
  display: block;
  font-size: var(--mp-fs-micro);
  line-height: var(--mp-lh-micro);
  letter-spacing: var(--mp-ls-caps);
  text-transform: uppercase;
  color: var(--mp-text-3);
  font-weight: var(--mp-fw-semibold);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
/* L'intitule de groupe se confondait avec une entree de menu : meme taille,
   meme colonne, meme rythme. Il est desormais plus petit, plus pale, decale
   d'un cran a gauche et precede d'un filet — on voit que c'est un titre. */
.nav .group {
  font-size: 10.5px;
  line-height: var(--mp-lh-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--mp-fw-bold);
  color: var(--mp-text-3);
  padding: var(--mp-space-3) var(--mp-space-3) var(--mp-space-2);
  margin-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-border);
}
.nav .group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.nav a {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  height: 36px;
  padding: 0 var(--mp-space-3);
  border-radius: var(--mp-radius-s);
  color: var(--mp-text-2);
  font-weight: var(--mp-fw-medium);
  text-decoration: none;
}
.nav a .ico { flex: none; color: var(--mp-text-3); }
/* Une entree tient sur une ligne : « Paiement en plusieurs fois » passait sur
   deux et cassait le rythme de la colonne. Le title porte l intitule entier. */
.nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a:hover { background: var(--mp-hover); color: var(--mp-text); }
.nav a:hover .ico { color: var(--mp-text-2); }
/* L'etat courant se dit par un aplat teinte de la marque, pas par une bande
   collee au bord : la bande coupait la ligne et alourdissait la colonne. */
.nav a.on {
  background: var(--mp-brand-soft);
  color: var(--mp-brand-strong);
  font-weight: var(--mp-fw-semibold);
}
.nav a.on .ico { color: var(--mp-brand); }
.nav a:focus-visible { box-shadow: var(--mp-focus-ring); }

/* ------------------------------------------------------------------ profil */
.profil {
  margin-top: var(--mp-space-5);
  padding-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-border);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
}
.profil-ident {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-s);
  text-decoration: none;
  color: var(--mp-text);
  min-width: 0;
}
.profil-ident:hover { background: var(--mp-hover); }
.profil-ident:focus-visible { box-shadow: var(--mp-focus-ring); }
.profil-initiale {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--mp-radius-pill);
  display: grid;
  place-items: center;
  background: var(--mp-brand-soft);
  color: var(--mp-brand-strong);
  font-family: var(--mp-font-brand);
  font-weight: var(--mp-fw-bold);
  font-size: 13px;
}
.profil-texte { min-width: 0; }
.profil-texte b {
  display: block;
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
  font-weight: var(--mp-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profil-texte small {
  display: block;
  font-size: var(--mp-fs-micro);
  line-height: var(--mp-lh-micro);
  color: var(--mp-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .balance {
  margin-top: auto;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-m);
  padding: var(--mp-space-4);
  background: var(--mp-bg-sunken);
}
.sidebar .balance .lbl {
  font-size: var(--mp-fs-micro);
  letter-spacing: var(--mp-ls-caps);
  text-transform: uppercase;
  font-weight: var(--mp-fw-semibold);
  color: var(--mp-text-3);
}
.sidebar .balance b {
  display: block;
  margin: var(--mp-space-2) 0 var(--mp-space-2);
  font-size: var(--mp-fs-h1);
  line-height: var(--mp-lh-h1);
  white-space: nowrap;      /* le montant et sa devise ne se separent jamais */
}
/* Enfants directs uniquement : le `.cur` d'un montant reste en ligne. */
.sidebar .balance > span {
  font-size: 12.5px;
  line-height: 17px;
  color: var(--mp-text-2);
  display: block;
}
.sidebar .balance > span + span { margin-top: var(--mp-space-1); }

.main {
  padding: var(--mp-space-7) var(--mp-space-7) var(--mp-space-11);
  min-width: 0;
  max-width: calc(var(--mp-container-console) + var(--mp-space-7) * 2);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-4);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--mp-space-7);
}
.topbar h1 {
  margin: 0;
  font-family: var(--mp-font-brand);
  font-variation-settings: "wdth" 96;
  font-size: var(--mp-fs-h1);
  line-height: var(--mp-lh-h1);
  font-weight: var(--mp-fw-bold);
  letter-spacing: var(--mp-ls-tight);
}
.topbar .sub { color: var(--mp-text-2); font-size: var(--mp-fs-small); margin-top: var(--mp-space-1); }
.actions { display: flex; gap: var(--mp-space-3); flex-wrap: wrap; }

h2 { font-size: var(--mp-fs-h2); line-height: var(--mp-lh-h2); font-weight: var(--mp-fw-semibold); margin: 0; }
h3 { font-size: var(--mp-fs-h3); line-height: var(--mp-lh-h3); font-weight: var(--mp-fw-semibold); margin: 0; }
p { margin: 0 0 var(--mp-space-4); }

/* ------------------------------------------------------------- composants */
/* Carte : bordure, pas d'ombre, pas de lisere colore (regle du DS). */
.card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-m);
}
.card > header {
  padding: var(--mp-space-4) var(--mp-space-5);
  border-bottom: 1px solid var(--mp-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-3);
  align-items: center;
  justify-content: space-between;
}
.card > .body { padding: var(--mp-space-5); }
.card > .body > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--mp-space-5); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Indicateurs : une grille a filets 1 px, pas des cartes separees. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-m);
  overflow: hidden;
  background: var(--mp-surface);
}
.tiles > div { padding: var(--mp-space-5); border-right: 1px solid var(--mp-border); }
.tiles > div:last-child { border-right: none; }
.tiles b {
  display: block;
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--mp-ls-amount);
  font-weight: var(--mp-fw-semibold);
  font-size: var(--mp-fs-amount-l);
  line-height: var(--mp-lh-amount-l);
  color: var(--mp-text);
  white-space: nowrap;   /* le montant et sa devise ne se separent jamais */
}
/* Enfants directs uniquement. Sans cela, la regle attrapait aussi les <span>
   internes d un montant — .amount et .cur — et le chiffre cle d une tuile
   s affichait en taille de texte courant au lieu de 32 px. Meme piege que
   pour le solde de la barre laterale, corrige la depuis longtemps. */
.tiles > div > span {
  display: block;
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
  color: var(--mp-text-2);
  margin-top: var(--mp-space-2);
}

/* Tableaux : rayon 0, en-tetes en micro-capitales. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mp-fs-small); }
th {
  text-align: left;
  background: var(--mp-bg-sunken);
  font-size: var(--mp-fs-micro);
  line-height: var(--mp-lh-micro);
  letter-spacing: var(--mp-ls-caps);
  text-transform: uppercase;
  font-weight: var(--mp-fw-semibold);
  color: var(--mp-text-2);
  padding: var(--mp-space-3) var(--mp-space-4);
  border-bottom: 1px solid var(--mp-border-strong);
  white-space: nowrap;
}
td {
  padding: var(--mp-space-2) var(--mp-space-4);
  height: var(--mp-row-console);   /* minimum : une ligne reste à 44 px */
  border-bottom: 1px solid var(--mp-border);
  vertical-align: middle;
}
/* Ligne secondaire d'une cellule (numéro sous le nom, motif sous le statut). */
td .note { font-size: 12.5px; line-height: 16px; display: block; margin-top: 1px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--mp-hover); }
td.r, th.r { text-align: right; }
/* ---------------------------------------------------------------------------
   TROIS RÔLES TYPOGRAPHIQUES, exclusifs. C'est la règle d'uniformité :
   une cellule appartient à un rôle et à un seul.

   .c-code    voix technique  — références, identifiants, clés, URL, types d'événement.
                                Tout ce qu'on compare caractère par caractère (0 vs O).
   .c-num     voix d'interface + chiffres tabulaires — dates, numéros, compteurs.
                                Tout ce qu'on lit et qu'on aligne en colonne.
   .c-amount  voix des chiffres — montants, et rien d'autre. Figtree : bols
                                pleins, 1 qui tient la colonne. Distincte de la
                                voix de marque, qui reste au logotype.

   Le reste (noms, libellés, opérateurs) reste en voix d'interface, sans classe.
   --------------------------------------------------------------------------- */
.c-code, code, .code-inline {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--mp-text-2);
}
td.c-code { white-space: nowrap; }

.c-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
td.c-num { white-space: nowrap; color: var(--mp-text-2); }

/* Un montant est le contenu principal d'un produit de paiement :
   il doit se détacher du texte courant, pas s'y fondre. */
.c-amount, td.r {
  font-family: var(--mp-font-num);
  letter-spacing: var(--mp-ls-amount);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--mp-fw-semibold);
  font-size: 15px;
  color: var(--mp-text);
  white-space: nowrap;
}
/* Valeur secondaire dans une cellule de montant (frais, part déjà versée). */
td.r .minor, .c-amount .minor {
  font-family: var(--mp-font-ui);
  font-variation-settings: normal;
  font-weight: var(--mp-fw-regular);
  color: var(--mp-text-3);
  font-size: 12.5px;
  letter-spacing: 0;
}
.empty { padding: var(--mp-space-9) var(--mp-space-5); color: var(--mp-text-2); }

/* Montants — Figtree, chiffres tabulaires, devise apres. Figtree n'a pas d'axe
   de chasse : rien a regler, la police est pleine telle quelle. */
.amount {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--mp-ls-amount);
  font-weight: var(--mp-fw-semibold);
}
.cur { font-weight: var(--mp-fw-medium); color: var(--mp-text-2); font-size: .68em; margin-left: .3em; letter-spacing: 0; }
/* Séparateur de milliers : largeur fixe en em, indépendante de la police.
   Voir Support\Money::THOUSANDS_SEPARATOR pour le pourquoi. */
.amount .sep { display: inline-block; width: .26em; }

/* Pastille de statut : fond + glyphe + texte. Jamais la couleur seule. */
/* Pastille de statut : capsule, aplat tres leger, contour de la meme teinte.
   Le glyphe reste — la couleur ne porte jamais l'etat a elle seule — mais il
   se fait discret, et c'est le mot qu'on lit d'abord. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--mp-radius-pill);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  font-weight: var(--mp-fw-semibold);
  white-space: nowrap;
  background: var(--mp-neutral-soft);
  color: var(--mp-text-2);
}
.badge svg { flex: none; opacity: .75; }
.badge--s { height: 19px; padding: 0 8px; font-size: 10.5px; }
.badge--success  { background: var(--mp-success-soft);    color: var(--mp-success); }
.badge--settled  { background: var(--mp-neutral-soft);    color: var(--mp-text); }
.badge--warning  { background: var(--mp-warning-soft);    color: var(--mp-warning); }
.badge--critical { background: var(--mp-critical-soft);   color: var(--mp-critical); }
.badge--critical-solid { background: var(--mp-laterite-700); color: #fff; }
.badge--info     { background: var(--mp-info-soft);       color: var(--mp-info); }
.badge--fractionne { background: var(--mp-fractionne-soft); color: var(--mp-fractionne); }

/* Boutons — alias des classes du DS pour les vues existantes. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-space-3);
  height: var(--mp-control-m); padding: 0 var(--mp-space-5);
  border-radius: var(--mp-radius-s); border: 1px solid transparent;
  font: var(--mp-fw-semibold) 14px/1 var(--mp-font-ui);
  letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--mp-action); color: var(--mp-action-text);
  transition: background var(--mp-dur-instant) linear, transform var(--mp-dur-instant) linear;
}
.btn:hover { background: var(--mp-action-hover); }
.btn:active { transform: translateY(1px); background: var(--mp-action-press); }
.btn:focus-visible { box-shadow: var(--mp-focus-ring); }
.btn.quiet { background: var(--mp-surface); color: var(--mp-text); border-color: var(--mp-border-input); }
.btn.quiet:hover { background: var(--mp-hover); border-color: var(--mp-neutre-400); }
.btn.ghost { background: transparent; color: var(--mp-text); }
.btn.ghost:hover { background: var(--mp-hover); }
.btn.danger { background: var(--mp-laterite-700); color: #fff; }
.btn.danger:hover { background: var(--mp-laterite-500); }
.btn.fractionne { background: var(--mp-accent-700); color: #fff; }
.btn.fractionne:hover { background: var(--mp-accent-800); }
.btn.sm { height: var(--mp-control-s); padding: 0 var(--mp-space-4); font-size: 13px; }
.btn.block { width: 100%; }
.btn.touch { height: var(--mp-control-touch); font-size: 16px; width: 100%; font-family: var(--mp-font-system); }
.btn[disabled] { background: var(--mp-neutral-soft); color: var(--mp-text-3); border-color: var(--mp-border); cursor: not-allowed; }

/* Champs */
label { display: block; font: var(--mp-fw-semibold) 13px/18px var(--mp-font-ui); color: var(--mp-text); margin-bottom: 6px; }
label .hint { display: block; font-weight: var(--mp-fw-regular); color: var(--mp-text-2); font-size: 12.5px; margin-top: 2px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], select, textarea {
  width: 100%;
  height: var(--mp-control-m);
  padding: 0 var(--mp-space-4);
  background: var(--mp-surface);
  border: 1px solid var(--mp-border-input);
  border-radius: var(--mp-radius-s);
  color: var(--mp-text);
  font: var(--mp-fw-regular) 14px/1 var(--mp-font-ui);
}
textarea { height: auto; padding: var(--mp-space-3) var(--mp-space-4); line-height: var(--mp-lh-body); }
input[type=number], input[type=tel] { font-variant-numeric: tabular-nums lining-nums; }
input:hover, select:hover { border-color: var(--mp-neutre-400); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mp-accent-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-focus) 35%, transparent);
}
.field { margin-bottom: var(--mp-space-5); }

/* Numero de telephone : l'indicatif est affiche, jamais saisi. Le payeur tape
   son numero comme il le compose chez lui — demander +229 a quelqu'un qui
   appelle son voisin tous les jours, c'est une faute de saisie en attente. */
.tel-group { display: flex; align-items: stretch; }
.tel-group input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; flex: 1; min-width: 0; }
.tel-code {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--mp-space-4);
  border: 1px solid var(--mp-border-input);
  border-radius: var(--mp-radius-s) 0 0 var(--mp-radius-s);
  background: var(--mp-surface-raised);
  color: var(--mp-text-2);
  white-space: nowrap;
}
.tel-group:focus-within .tel-code { border-color: var(--mp-accent-700); }
.row { display: grid; gap: var(--mp-space-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: flex-start; gap: var(--mp-space-3); margin-bottom: var(--mp-space-5); }
.check input { margin-top: 3px; accent-color: var(--mp-action); }
.check label { margin: 0; font-weight: var(--mp-fw-medium); }

/* Bandeaux — rayon 0, liseré gauche, glyphe porte par le contenu. */
.flash {
  border: 1px solid var(--mp-border);
  border-left: 3px solid var(--mp-text-2);
  border-radius: var(--mp-radius-0);
  padding: var(--mp-space-4) var(--mp-space-5);
  margin-bottom: var(--mp-space-6);
  background: var(--mp-surface);
}
.flash.success { border-left-color: var(--mp-success-fill); background: var(--mp-success-soft); color: var(--mp-text); }
.flash.error { border-left-color: var(--mp-critical-fill); background: var(--mp-critical-soft); color: var(--mp-critical); }
.flash.info { border-left-color: var(--mp-action); background: var(--mp-brand-soft); }

/* La mention secondaire revient toujours à la voix d'interface, même dans une
   cellule de code ou de montant : c'est du texte, pas une donnée alignée. */
.note {
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
  color: var(--mp-text-2);
  font-family: var(--mp-font-ui);
  font-variation-settings: normal;
  letter-spacing: 0;
  font-weight: var(--mp-fw-regular);
}
.note.c-num { font-variant-numeric: tabular-nums lining-nums; }
.note.c-code { font-family: var(--mp-font-mono); font-size: 12.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--mp-space-3) var(--mp-space-6); font-size: var(--mp-fs-small); }
.kv dt { color: var(--mp-text-2); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; word-break: break-all; }

.callout {
  border: 1px solid var(--mp-border);
  border-left: 3px solid var(--mp-action);
  background: var(--mp-brand-soft);
  padding: var(--mp-space-4) var(--mp-space-5);
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
}
.callout strong { display: block; margin-bottom: var(--mp-space-1); }

pre.code {
  font-family: var(--mp-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-s);
  padding: var(--mp-space-4);
  overflow: auto;
  margin: 0 0 var(--mp-space-4);
}
code { font-family: var(--mp-font-mono); font-size: .92em; }

/* Onglets */
.tabs { display: flex; gap: var(--mp-space-2); border-bottom: 1px solid var(--mp-border); margin-bottom: var(--mp-space-6); }
.tabs a {
  padding: 10px var(--mp-space-4);
  font: var(--mp-fw-medium) 14px/20px var(--mp-font-ui);
  color: var(--mp-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.tabs a:hover { color: var(--mp-text); }
.tabs a.on { color: var(--mp-text); font-weight: var(--mp-fw-semibold); border-bottom-color: var(--mp-text); }

/* ------------------------------------------- checkout et portail payeur */
.checkout-page {
  max-width: var(--mp-container-checkout);
  margin: 0 auto;
  padding: var(--mp-space-7) var(--mp-gutter-checkout) var(--mp-space-11);
  font-family: var(--mp-font-system);
}
.checkout-page .brand-mark { display: flex; align-items: center; gap: var(--mp-space-3); margin-bottom: var(--mp-space-7); color: var(--mp-text); }
.checkout-page .brand-mark svg { color: var(--mp-accent-500); }
.checkout-page .brand-mark span { font-weight: var(--mp-fw-semibold); letter-spacing: -0.03em; }

.checkout-head { margin-bottom: var(--mp-space-6); }
.checkout-head .merchant {
  font-size: var(--mp-fs-micro); letter-spacing: var(--mp-ls-caps);
  text-transform: uppercase; font-weight: var(--mp-fw-semibold); color: var(--mp-text-3);
}
.checkout-head .amount-xl {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--mp-ls-amount);
  font-weight: var(--mp-fw-bold);
  font-size: var(--mp-fs-amount-xl);
  line-height: var(--mp-lh-amount-xl);
  margin: var(--mp-space-2) 0;
}
.checkout-head .label { color: var(--mp-text-2); font-size: var(--mp-fs-body-l); line-height: var(--mp-lh-body-l); }

/* Selecteur de formule — mp-plan */
.choice { display: flex; flex-direction: column; gap: var(--mp-space-3); margin-bottom: var(--mp-space-5); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3);
  margin: 0; padding: var(--mp-space-4);
  border: 1.5px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-m);
  background: var(--mp-surface);
  cursor: pointer; font-weight: var(--mp-fw-medium);
  transition: border-color var(--mp-dur-instant);
}
.choice label:hover { border-color: var(--mp-accent-400); }
.choice input:checked + label {
  border-color: var(--mp-fractionne);
  background: var(--mp-fractionne-soft);
  box-shadow: inset 0 0 0 1px var(--mp-fractionne);
}
.choice input:focus-visible + label { box-shadow: var(--mp-focus-ring); }
.choice .sched { display: block; font-size: var(--mp-fs-small); color: var(--mp-text-2); font-weight: var(--mp-fw-regular); margin-top: 2px; }
.choice input:checked + label .sched { color: var(--mp-fractionne); }

/* Echeancier — le marqueur reprend la « jambe » du m : haut arrondi, bas droit. */
.schedule { list-style: none; margin: 0 0 var(--mp-space-5); padding: 0; border: 1px solid var(--mp-border); border-radius: var(--mp-radius-m); overflow: hidden; }
.schedule li {
  display: flex; align-items: center; gap: var(--mp-space-4);
  padding: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-border);
  background: var(--mp-surface);
  font-size: var(--mp-fs-small);
}
.schedule li:last-child { border-bottom: none; }
.schedule .leg {
  flex: none; width: 10px; height: 14px;
  border-radius: var(--mp-radius-hump);
  background: var(--mp-neutre-300);
}
.schedule li.paid .leg { background: var(--mp-success-fill); }
.schedule li.due .leg { background: var(--mp-fractionne-fill); }
.schedule li.late .leg { background: var(--mp-critical-fill); }
.schedule .when { flex: 1; min-width: 0; }
.schedule .seq { font-size: var(--mp-fs-micro); letter-spacing: var(--mp-ls-caps); text-transform: uppercase; color: var(--mp-text-3); font-weight: var(--mp-fw-semibold); display: block; }
.schedule .amt { font-variant-numeric: tabular-nums lining-nums; font-weight: var(--mp-fw-semibold); }
/* Hachure = retard ou fonds immobilises. Seule trame autorisee par le DS. */
.schedule li.late {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--mp-critical-soft) 6px 12px);
}

.status-wait { padding: var(--mp-space-9) 0; }
.pulse { position: relative; width: 44px; height: 44px; margin-bottom: var(--mp-space-5); }
.pulse i { position: absolute; inset: 0; border-radius: 50%; background: var(--mp-accent-200); animation: mp-pulse var(--mp-dur-pulse) var(--mp-ease-out) infinite; }
.pulse i:nth-child(2) { animation-delay: calc(var(--mp-dur-pulse) / 2); }
.pulse b { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--mp-accent-500); }

.result { padding: var(--mp-space-7) 0; }
.result--ok { text-align: center; }
.result .glyph { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; margin-bottom: var(--mp-space-5); }
.result--ok .glyph { background: var(--mp-encre-700); color: #fff; margin-inline: auto; }
.result--ko .glyph { background: var(--mp-critical-soft); color: var(--mp-critical); }

.sms { border: 1px solid var(--mp-border); border-radius: var(--mp-radius-s); background: var(--mp-bg-sunken); padding: var(--mp-space-4); font-size: 12.5px; margin-bottom: var(--mp-space-3); }
.sms .meta { font-family: var(--mp-font-mono); font-size: var(--mp-fs-micro); color: var(--mp-text-3); margin-bottom: var(--mp-space-2); }

.auth-wrap { max-width: 400px; margin: 0 auto; padding: var(--mp-space-11) var(--mp-space-5); }
.auth-wrap .brand { justify-content: flex-start; margin-bottom: var(--mp-space-7); padding: 0; }

footer.doc { color: var(--mp-text-3); font-size: var(--mp-fs-small); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--mp-border); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav .group { display: none; }
  .sidebar .balance { margin-top: 0; }
  .main { padding: var(--mp-space-5) var(--mp-gutter-checkout) var(--mp-space-10); }
  .tiles > div { border-right: none; border-bottom: 1px solid var(--mp-border); }
}

/* ==================================================================
   Ecrans d'identification : volet de marque + volet formulaire.
   Le degrade est en CSS, pas en image : il suit les jetons, il est net
   a toute taille, et il ne coute aucune requete.
   ================================================================== */
.auth-body { background: var(--mp-bg); }

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ----------------------------------------------------------- volet marque */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp-space-10) var(--mp-space-9);
  text-align: center;
  background: linear-gradient(135deg, var(--mp-accent-500) 0%, var(--mp-accent-300) 100%);
}
/* L'administration n'est pas la console : on la reconnait sans lire. */
.auth-panel.is-admin {
  background: linear-gradient(135deg, var(--mp-encre-800) 0%, var(--mp-encre-600) 100%);
}

.auth-panel-inner { width: 100%; max-width: 420px; }

.auth-wordmark { display: block; width: 100%; height: auto; }
.auth-panel .auth-wordmark { max-width: 300px; margin: 0 auto; }

.auth-lead {
  margin: var(--mp-space-7) 0 0;
  font-size: var(--mp-fs-body-l);
  line-height: var(--mp-lh-body-l);
  color: rgba(255, 255, 255, .82);
  text-wrap: balance;
}

/* ------------------------------------------------------- volet formulaire */
.auth-form {
  display: flex;
  align-items: center;
  padding: var(--mp-space-10) var(--mp-space-9);
  background: var(--mp-bg);
}
.auth-form-inner { width: 100%; max-width: 384px; margin: 0 auto; }
.auth-form-inner .auth-wordmark.compact { display: none; max-width: 190px; margin: 0 0 var(--mp-space-8); }

/* Sur ces ecrans la carte porte le formulaire seul : l'elevation suffit a la
   detacher du fond, pas besoin d'un cadre dans le cadre. */
.auth-form-inner .card { box-shadow: var(--mp-elev-2); }
.auth-form-inner .card .body { padding: var(--mp-space-8); }
.auth-form-inner h1 {
  margin: 0 0 var(--mp-space-2);
  font-size: var(--mp-fs-h1);
  line-height: var(--mp-lh-h1);
  letter-spacing: var(--mp-ls-tight);
}
.auth-form-inner .flash { margin-bottom: var(--mp-space-5); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-panel { display: none; }
  .auth-form {
    align-items: flex-start;
    padding: var(--mp-space-9) var(--mp-gutter-checkout) var(--mp-space-10);
  }
  .auth-form-inner .auth-wordmark.compact { display: block; }
  .auth-form-inner .card { box-shadow: var(--mp-elev-1); }
  .auth-form-inner .card .body { padding: var(--mp-space-6); }
}

/* ------------------------------------------------- tableau de bord : tete */
/* Le solde disponible est le chiffre qu'on vient chercher. Il occupe sa propre
   surface, le graphique repond a la question suivante — est-ce que ca monte. */
.dash-head {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--mp-space-5);
  margin-bottom: var(--mp-space-5);
}

.dash-solde,
.dash-graph {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-m);
  padding: var(--mp-space-5);
  min-width: 0;
}

.dash-solde .lbl {
  display: block;
  font-size: var(--mp-fs-micro);
  line-height: var(--mp-lh-micro);
  letter-spacing: var(--mp-ls-caps);
  text-transform: uppercase;
  font-weight: var(--mp-fw-semibold);
  color: var(--mp-text-3);
}
.dash-solde > b {
  display: block;
  margin: var(--mp-space-3) 0 var(--mp-space-5);
  font-family: var(--mp-font-num);
  font-variant-numeric: var(--mp-numeric-variant);
  letter-spacing: var(--mp-ls-amount);
  font-weight: var(--mp-fw-semibold);
  font-size: var(--mp-fs-amount-xl);
  line-height: var(--mp-lh-amount-xl);
  white-space: nowrap;
}

.dash-sous {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--mp-space-2) var(--mp-space-4);
  margin: 0;
  padding-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-border);
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
}
.dash-sous dt { color: var(--mp-text-2); }
.dash-sous dd {
  margin: 0;
  text-align: right;
  color: var(--mp-text);
  font-variant-numeric: var(--mp-numeric-variant);
}

.dash-graph { display: flex; flex-direction: column; }
.dash-graph > header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--mp-space-5);
}
.dash-graph .empty { margin: auto 0; }

/* --------------------------------------------------------- histogramme SVG */
.barres { display: block; width: 100%; height: auto; overflow: visible; }
.barres .bar rect { fill: var(--mp-serie-2); }
/* Un jour sans encaissement : un trait, pas un vide. */
.barres .bar--vide rect { fill: var(--mp-border-strong); }
.barres .bar--jour rect { fill: var(--mp-accent-700); }
.barres .bar:hover rect { fill: var(--mp-accent-700); }
.barres .bar-base { stroke: var(--mp-border-strong); stroke-width: 1; }
/* Le texte porte les jetons de texte, jamais la couleur de la serie. */
.barres .bar-val,
.barres .bar-date {
  font-family: var(--mp-font-ui);
  font-variant-numeric: var(--mp-numeric-variant);
  font-size: 11px;
  fill: var(--mp-text-3);
}
.barres .bar-val { fill: var(--mp-text-2); font-weight: var(--mp-fw-semibold); }

@media (max-width: 900px) {
  .dash-head { grid-template-columns: minmax(0, 1fr); }
  .dash-solde > b { font-size: var(--mp-fs-amount-l); line-height: var(--mp-lh-amount-l); }
}

/* ------------------------------------------- barre laterale repliable */
/* Repliee, la colonne ne garde que les icones. L'etat est pose sur <html>
   avant peinture (voir le layout), sinon la barre s'afficherait deployee
   puis sauterait a chaque chargement de page. */
.sidebar .tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-2);
}
.brand-marque { display: none; width: 28px; height: 28px; border-radius: var(--mp-radius-s); }

.replier {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--mp-radius-s);
  background: transparent;
  color: var(--mp-text-3);
  cursor: pointer;
}
.replier:hover { background: var(--mp-hover); color: var(--mp-text); }
.replier:focus-visible { box-shadow: var(--mp-focus-ring); }

.sidebar-reduit .shell { grid-template-columns: 68px minmax(0, 1fr); }
.sidebar-reduit .sidebar { padding-left: var(--mp-space-3); padding-right: var(--mp-space-3); }
.sidebar-reduit .tete { flex-direction: column; gap: var(--mp-space-3); }
.sidebar-reduit .brand { align-items: center; padding: 0; }
.sidebar-reduit .brand-logo,
.sidebar-reduit .brand small,
.sidebar-reduit .nav a span,
.sidebar-reduit .profil-texte,
.sidebar-reduit .profil form { display: none; }
.sidebar-reduit .brand-marque { display: block; }
.sidebar-reduit .nav a { justify-content: center; padding: 0; }
.sidebar-reduit .profil-ident { justify-content: center; padding: var(--mp-space-2) 0; }

/* Les intitules de groupe n'ont plus de place : le filet seul separe. */
.sidebar-reduit .nav .group {
  font-size: 0;
  padding: 0;
  margin-top: var(--mp-space-3);
  height: var(--mp-space-3);
}

/* Replie, le solde disparait : un montant tronque dans 68 px se lit de
   travers, et le tableau de bord l affiche deja en grand. */
.sidebar-reduit .sidebar .balance { display: none; }

@media (max-width: 900px) {
  .sidebar-reduit .shell { grid-template-columns: minmax(0, 1fr); }
  .replier { display: none; }
}

/* ===================================================== documentation */
.docs-body { background: var(--mp-bg); }
.docs { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }

.docs-nav {
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-border);
  padding: var(--mp-space-6) var(--mp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.docs-nav nav { display: flex; flex-direction: column; gap: 1px; }
.docs-groupe {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--mp-fw-bold);
  color: var(--mp-text-3);
  padding: var(--mp-space-3) var(--mp-space-3) var(--mp-space-2);
  margin-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-border);
}
.docs-groupe:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.docs-nav nav a {
  display: block;
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-s);
  color: var(--mp-text-2);
  font-size: var(--mp-fs-small);
  line-height: var(--mp-lh-small);
  font-weight: var(--mp-fw-medium);
  text-decoration: none;
}
.docs-nav nav a:hover { background: var(--mp-hover); color: var(--mp-text); }
.docs-nav nav a.on { background: var(--mp-brand-soft); color: var(--mp-brand-strong); font-weight: var(--mp-fw-semibold); }
.docs-nav nav a:focus-visible { box-shadow: var(--mp-focus-ring); }
.docs-pied { margin: auto 0 0; font-size: var(--mp-fs-micro); line-height: 1.6; color: var(--mp-text-3); }

.docs-main {
  padding: var(--mp-space-10) var(--mp-space-9) var(--mp-space-11);
  min-width: 0;
  max-width: calc(780px + var(--mp-space-9) * 2);
}
.docs-main h1 {
  margin: 0 0 var(--mp-space-3);
  font-family: var(--mp-font-brand);
  font-size: var(--mp-fs-display);
  line-height: var(--mp-lh-display);
  font-weight: var(--mp-fw-bold);
  letter-spacing: var(--mp-ls-tight);
  text-wrap: balance;
}
.docs-main .chapo {
  margin: 0 0 var(--mp-space-9);
  font-size: var(--mp-fs-body-l);
  line-height: var(--mp-lh-body-l);
  color: var(--mp-text-2);
  max-width: 62ch;
}
.docs-main h2 {
  margin: var(--mp-space-9) 0 var(--mp-space-4);
  font-family: var(--mp-font-brand);
  font-size: var(--mp-fs-h1);
  line-height: var(--mp-lh-h1);
  letter-spacing: var(--mp-ls-tight);
}
.docs-main h3 { margin: var(--mp-space-7) 0 var(--mp-space-3); }
.docs-main p,
.docs-main ul { max-width: 68ch; line-height: var(--mp-lh-body-l); }
.docs-main ul { padding-left: var(--mp-space-6); }
.docs-main li { margin-bottom: var(--mp-space-2); }

/* Bloc de code : rayon 0 comme les tableaux, c'est une surface de donnees. */
.docs-code {
  margin: 0 0 var(--mp-space-5);
  padding: var(--mp-space-4) var(--mp-space-5);
  background: var(--mp-encre-900);
  border-radius: var(--mp-radius-s);
  overflow-x: auto;
}
.docs-code pre { margin: 0; }
.docs-code code {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #D9E1EA;
  white-space: pre;
}
.docs-main :not(pre) > code {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-xs);
  padding: 1px 5px;
}

/* Verbe HTTP : la couleur ne dit rien seule, le mot est toujours ecrit. */
.verbe {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  font-family: var(--mp-font-mono);
  font-size: 10.5px;
  font-weight: var(--mp-fw-bold);
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--mp-radius-xs);
  background: var(--mp-neutral-soft);
  color: var(--mp-text-2);
}
.verbe--post { background: var(--mp-brand-soft); color: var(--mp-brand-strong); }

.docs-sommaire { display: grid; gap: var(--mp-space-4); margin-top: var(--mp-space-7); }
.docs-carte {
  display: block;
  padding: var(--mp-space-5);
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-m);
  text-decoration: none;
  color: inherit;
}
.docs-carte:hover { border-color: var(--mp-border-strong); background: var(--mp-hover); }
.docs-carte:focus-visible { box-shadow: var(--mp-focus-ring); }
.docs-carte b { display: block; font-size: var(--mp-fs-h2); line-height: var(--mp-lh-h2); margin-bottom: var(--mp-space-1); }
.docs-carte span { display: block; color: var(--mp-text-2); font-size: var(--mp-fs-small); line-height: var(--mp-lh-small); }

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--mp-border); }
  .docs-main { padding: var(--mp-space-7) var(--mp-gutter-checkout) var(--mp-space-10); }
}

/* ------------------------------------------- statut de compte, pagination */
.statut-compte { display: flex; align-items: center; gap: var(--mp-space-4); flex-wrap: wrap; }
.statut-texte { min-width: 0; flex: 1; }
.statut-texte b { display: block; font-size: var(--mp-fs-h2); line-height: var(--mp-lh-h2); }
.statut-texte span { display: block; font-size: var(--mp-fs-small); line-height: var(--mp-lh-small); color: var(--mp-text-2); }
.separateur { border: 0; border-top: 1px solid var(--mp-border); margin: var(--mp-space-5) 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  margin-top: var(--mp-space-5);
}
.pagination-etat { font-size: var(--mp-fs-small); color: var(--mp-text-2); font-variant-numeric: var(--mp-numeric-variant); }
.pagination [aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------- developpeurs : onglets */
.onglets { display: flex; gap: var(--mp-space-2); }
.onglets a {
  padding: var(--mp-space-2) var(--mp-space-4);
  border-radius: var(--mp-radius-s);
  color: var(--mp-text-2);
  font-size: var(--mp-fs-small);
  font-weight: var(--mp-fw-medium);
  text-decoration: none;
}
.onglets a:hover { background: var(--mp-hover); color: var(--mp-text); }
.onglets a.on { background: var(--mp-brand-soft); color: var(--mp-brand-strong); font-weight: var(--mp-fw-semibold); }
.onglets a:focus-visible { box-shadow: var(--mp-focus-ring); }

.cle {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-3) var(--mp-space-4);
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-s);
}
.cle code {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--mp-text);
}

/* Point de reception de webhook : adresse, etat, et le secret qui signe ses
   envois. Le secret etait en base depuis le debut mais n'apparaissait nulle
   part — la documentation demandait de verifier une signature avec un secret
   introuvable. */
.endpoint + .endpoint { margin-top: var(--mp-space-4); }
.endpoint-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-3);
  margin-bottom: var(--mp-space-2);
}
.endpoint-tete .c-code {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  color: var(--mp-text-secondary);
  overflow-x: auto;
  white-space: nowrap;
}

/* Identifiant copiable. Le bouton reste discret tant qu'on ne survole pas la
   ligne : dans un tableau de cent transactions, cent icones pleines feraient
   plus de bruit que de service. */
.copiable { display: inline-flex; align-items: center; gap: var(--mp-space-2); min-width: 0; }
.copiable code {
  font-family: var(--mp-font-mono);
  font-size: 12.5px;
  color: var(--mp-text-2);
  overflow-x: auto;
  white-space: nowrap;
}
.copier {
  all: unset;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--mp-radius-s);
  color: var(--mp-text-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mp-dur-instant) linear, background var(--mp-dur-instant) linear;
}
tr:hover .copier,
.copiable:hover .copier,
.copier:focus-visible { opacity: 1; }
.copier:hover { background: var(--mp-hover); color: var(--mp-text); }
.copier:focus-visible { box-shadow: var(--mp-focus-ring); }

/* Confirmation : la coche remplace l'icone sans deplacer quoi que ce soit. */
.copier--fait { opacity: 1; color: var(--mp-success); }
/* La coche ne vaut que pour le bouton-icone : le bouton libelle, lui, affiche
   deja « Copie », et une coche en plus ferait doublon. */
.copier.copier--fait svg { display: none; }
.copier.copier--fait::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* Sur un ecran tactile, il n'y a pas de survol : le bouton reste visible. */
@media (hover: none) {
  .copier { opacity: 1; }
}