/* ═══════════════════════════════════════════════════════════
   TOLO PAY — SYSTÈME DE DESIGN
   ═══════════════════════════════════════════════════════════

   CE QUE FAIT CE FICHIER
   Il définit toutes les décisions visuelles de l'application.
   Aucune page ne redéfinit une couleur, une taille ou un
   espacement : elles n'utilisent que ce qui est déclaré ici.

   ───────────────────────────────────────────────────────────
   LE SUJET, ET CE QU'IL IMPOSE

   TOLO PAY déplace de l'argent entre la Guinée et la Chine.
   Ses utilisateurs sont des commerçants et des étudiants
   guinéens dans les marchés de Guangzhou et Yiwu, et leurs
   familles à Conakry. Ils utilisent des téléphones Android
   d'entrée de gamme, souvent en 4G instable.

   Leur question n'est jamais « est-ce joli ». Elle est
   « où est mon argent, et va-t-il arriver ». Le système est
   construit autour de cette question.

   TROIS PRINCIPES

   1. LE MONTANT EST LE HÉROS.
      C'est le contenu. Chiffres tabulaires, alignés, lisibles
      d'un coup d'œil. Tout le reste se tait autour.

   2. LE PARCOURS EST TOUJOURS VISIBLE.
      Chaque opération a une origine et une destination, deux
      devises, deux pays. Cette dualité est le produit, pas une
      décoration : elle a son composant dédié.

   3. RIEN QUI RALENTISSE.
      Aucune police téléchargée, aucune ombre coûteuse, aucune
      animation qui bloque le premier affichage.

   ───────────────────────────────────────────────────────────
   INTOUCHABLES
   Logo TP, icône de l'application, lettre « T », #00BFA5,
   #003087.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. COULEUR
   ───────────────────────────────────────────────────────────
   Le vert et le bleu marine de TOLO PAY sont conservés à
   l'identique. Autour d'eux, une gamme de gris légèrement
   bleutés — un gris parfaitement neutre à côté d'un vert
   saturé paraît sale.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ── Marque (inchangée) ── */
  --brand:        #00BFA5;   /* aplats, fonds, sélection      */
  --brand-dark:   #00897B;   /* boutons                       */
  --brand-deep:   #00695C;   /* fin de dégradé                */
  --brand-text:   #00786A;   /* texte sur fond clair — AA     */
  --navy:         #003087;
  --navy-light:   #0070BA;

  /* ── Surfaces, de la plus basse à la plus haute ── */
  --bg-app:       #F4F6F9;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FB;
  --surface-3:    #EDF1F5;

  /* ── Encre ── */
  --ink:          #10141C;
  --ink-2:        #566172;
  --ink-3:        #69737F;

  /* ── Lignes ── */
  --line:         #E4E8EE;
  --line-soft:    #EFF2F6;

  /* ── États ── */
  --ok:           #157A33;
  --ok-bg:        rgba(21,122,51,.09);
  --warn:         #9A5D00;
  --warn-bg:      rgba(154,93,0,.09);
  --err:          #C5221F;
  --err-bg:       rgba(197,34,31,.08);
  --info:         #0070BA;
  --info-bg:      rgba(0,112,186,.08);

  /* ── Focus ── */
  --focus-ring:   0 0 0 3px rgba(0,191,165,.16);
}

/* ── Thème sombre ──
   Pas de noir pur : un bleu-gris très sombre, plus reposant et
   qui laisse voir l'élévation. Le vert est éclairci — même
   teinte, luminosité adaptée, sans quoi il serait illisible. */
body.tp-dark, html.tp-dark-pre body{
  --brand:        #2FD9BE;
  --brand-dark:   #17B79E;
  --brand-deep:   #0E8A77;
  --brand-text:   #2FD9BE;
  --navy:         #6BA6F2;
  --navy-light:   #5AA9F0;

  --bg-app:       #0B0E13;
  --surface:      #141922;
  --surface-2:    #1B212B;
  --surface-3:    #232A36;

  --ink:          #EAEEF4;
  --ink-2:        #96A1B0;
  --ink-3:        #7A8493;

  --line:         rgba(234,238,244,.10);
  --line-soft:    rgba(234,238,244,.06);

  --ok:           #43B95C;  --ok-bg:   rgba(67,185,92,.14);
  --warn:         #DCA032;  --warn-bg: rgba(220,160,50,.14);
  --err:          #F0645C;  --err-bg:  rgba(240,100,92,.14);
  --info:         #5AA9F0;  --info-bg: rgba(90,169,240,.14);

  --focus-ring:   0 0 0 3px rgba(47,217,190,.20);
}


/* ═══════════════════════════════════════════════════════════
   2. TYPOGRAPHIE
   ───────────────────────────────────────────────────────────
   ⚠️ AUCUNE POLICE TÉLÉCHARGÉE.

   L'application chargeait Inter depuis Google Fonts. Or Google
   Fonts est bloqué en Chine continentale : à Guangzhou et Yiwu,
   chaque ouverture attendait un délai d'expiration avant de
   retomber sur la police du téléphone. La moitié des clients ne
   voyait donc jamais la typographie prévue, et payait l'attente.

   On utilise la police du système. Sur Android c'est Roboto,
   sur iPhone SF Pro, sur les Android chinois HarmonyOS Sans ou
   MiSans. Toutes ont d'excellents chiffres tabulaires, gèrent
   le français et s'affichent instantanément.

   Ce n'est pas un repli : c'est le bon choix pour ce contexte.
   ═══════════════════════════════════════════════════════════ */
:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "HarmonyOS Sans", "MiSans", "PingFang SC", "Noto Sans",
          "Helvetica Neue", Arial, sans-serif;

  /* Sept tailles. Chacune a un rôle, aucune n'est décorative. */
  --t-micro: 10px;   /* horodatages, mentions            */
  --t-label: 11px;   /* libellés de champ, badges        */
  --t-small: 12px;   /* texte secondaire                 */
  --t-body:  14px;   /* corps, champs de saisie          */
  --t-lead:  16px;   /* sous-titres, montants secondaires*/
  --t-title: 20px;   /* titres d'écran                   */
  --t-hero:  32px;   /* le montant. Le héros.            */

  --w-regular: 400;
  --w-medium:  550;
  --w-bold:    700;

  --lh-tight: 1.2;
  --lh-body:  1.55;
}

body, input, select, textarea, button{ font-family: var(--font) !important; }

body{
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Le montant ──
   Chiffres à chasse fixe pour que les colonnes s'alignent et
   que le nombre ne « saute » pas quand il change. */
.ds-amount{
  font-size: var(--t-hero);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.ds-amount-sm{
  font-size: var(--t-title);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.ds-cur{ font-size:.52em; font-weight:var(--w-medium); color:var(--ink-2); margin-left:.22em; }

.ds-title{ font-size:var(--t-title); font-weight:var(--w-bold); line-height:var(--lh-tight); letter-spacing:-.01em; }
.ds-lead { font-size:var(--t-lead);  font-weight:var(--w-medium); line-height:1.35; }
.ds-body { font-size:var(--t-body);  line-height:var(--lh-body); }
.ds-small{ font-size:var(--t-small); line-height:var(--lh-body); color:var(--ink-2); }
.ds-label{ font-size:var(--t-label); font-weight:var(--w-medium); color:var(--ink-2); }
.ds-micro{ font-size:var(--t-micro); color:var(--ink-3); }

/* Pas de capitales forcées : elles se lisent moins vite et
   signalent une interface générée plutôt qu'un produit. */
.ds-label, .ds-micro{ text-transform:none; letter-spacing:0; }


/* ═══════════════════════════════════════════════════════════
   3. ESPACEMENT — une seule échelle, base 4
   ═══════════════════════════════════════════════════════════ */
:root{
  --sp1: 4px;   --sp2: 8px;   --sp3: 12px;
  --sp4: 16px;  --sp5: 24px;  --sp6: 32px;  --sp7: 48px;
}


/* ═══════════════════════════════════════════════════════════
   4. RAYONS
   ───────────────────────────────────────────────────────────
   Le rayon encode la hiérarchie : plus l'élément est important
   et grand, plus il est arrondi. Un rayon unique partout est
   le réflexe des interfaces assemblées à la hâte.
   ═══════════════════════════════════════════════════════════ */
:root{
  --r1:  8px;   /* puces, badges          */
  --r2: 12px;   /* champs, boutons        */
  --r3: 16px;   /* cartes courantes       */
  --r4: 20px;   /* carte principale       */
  --r5: 24px;   /* modales, bannière      */
  --r-pill: 999px;
}


/* ═══════════════════════════════════════════════════════════
   5. ÉLÉVATION
   ───────────────────────────────────────────────────────────
   Trois niveaux. En mode sombre les ombres ne se voient pas :
   c'est la clarté de la surface qui porte l'élévation.
   ═══════════════════════════════════════════════════════════ */
:root{
  --e1: 0 1px 2px rgba(16,20,28,.05);
  --e2: 0 2px 8px rgba(16,20,28,.06);
  --e3: 0 8px 28px rgba(16,20,28,.10);
  --e-brand: 0 3px 12px rgba(0,137,123,.22);
}
body.tp-dark{
  --e1: 0 1px 2px rgba(0,0,0,.40);
  --e2: 0 2px 8px rgba(0,0,0,.42);
  --e3: 0 10px 32px rgba(0,0,0,.52);
  --e-brand: 0 3px 14px rgba(47,217,190,.16);
}


/* ═══════════════════════════════════════════════════════════
   6. MOUVEMENT
   ───────────────────────────────────────────────────────────
   Le mouvement répond à une action de l'utilisateur : il montre
   ce qui vient de changer. Rien ne bouge tout seul.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: .14s;
  --mid:  .22s;
  --slow: .34s;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   7. BOUTONS
   ═══════════════════════════════════════════════════════════ */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--sp2);
  padding: var(--sp3) var(--sp5);
  min-height:44px;                    /* cible tactile */
  border:1px solid transparent;
  border-radius: var(--r2);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease),
              opacity var(--fast) var(--ease);
}
.ds-btn:active{ transform:scale(.985); }
.ds-btn:focus-visible{ outline:none; box-shadow: var(--focus-ring); }

.ds-btn--primary{
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-deep));
  color:#fff;
  box-shadow: var(--e-brand);
}
body.tp-dark .ds-btn--primary{ color:#062821; }
.ds-btn--primary:hover{ box-shadow: var(--e2), var(--e-brand); }

.ds-btn--secondary{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
.ds-btn--secondary:hover{ background: var(--surface-3); }

.ds-btn--ghost{
  background:transparent; color: var(--brand-text);
}
.ds-btn--ghost:hover{ background: var(--surface-2); }

.ds-btn--danger{
  background: var(--err-bg); color: var(--err); border-color: transparent;
}

.ds-btn--block{ width:100%; }
.ds-btn--sm{ min-height:36px; padding: var(--sp2) var(--sp4); font-size: var(--t-small); }

.ds-btn:disabled, .ds-btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; box-shadow:none; transform:none;
}

/* État de chargement — le libellé reste lisible, un anneau
   tourne à sa gauche. Le bouton ne change pas de taille. */
.ds-btn[data-loading="true"]{ pointer-events:none; }
.ds-btn[data-loading="true"]::before{
  content:''; width:15px; height:15px; flex-shrink:0;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%;
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin{ to{ transform:rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════
   8. CHAMPS
   ═══════════════════════════════════════════════════════════ */
.ds-field{ margin-bottom: var(--sp3); }
.ds-field > label{
  display:block;
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  margin-bottom: var(--sp2);
}
.ds-field .req{ color: var(--err); }

.ds-input{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--sp3) var(--sp4);
  min-height:46px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  outline:none;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.ds-input::placeholder{ color: var(--ink-3); }
.ds-input:hover{ border-color: var(--ink-3); }
.ds-input:focus{
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}
body.tp-dark .ds-input:focus{ background: var(--surface-3); }
.ds-input:disabled{ opacity:.5; cursor:not-allowed; }
.ds-input[aria-invalid="true"]{ border-color: var(--err); }

.ds-hint{ font-size: var(--t-micro); color: var(--ink-3); margin-top: var(--sp1); line-height:1.45; }
.ds-error{ font-size: var(--t-micro); color: var(--err); margin-top: var(--sp1); }

/* Sélecteur — chevron dessiné, pas un caractère dont le rendu
   change d'un téléphone à l'autre. */
.ds-select-wrap{ position:relative; }
.ds-select-wrap select{ appearance:none; -webkit-appearance:none; padding-right:34px; }
.ds-select-wrap::after{
  content:''; position:absolute; right:14px; top:50%;
  width:7px; height:7px; margin-top:-5px;
  border-right:1.5px solid var(--ink-2);
  border-bottom:1.5px solid var(--ink-2);
  transform:rotate(45deg); pointer-events:none;
}


/* ═══════════════════════════════════════════════════════════
   9. CARTES
   ═══════════════════════════════════════════════════════════ */
.ds-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--sp4);
  box-shadow: var(--e1);
}
.ds-card--flat{ box-shadow:none; }
.ds-card--raised{ border-radius: var(--r4); box-shadow: var(--e2); }
.ds-card--interactive{
  cursor:pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.ds-card--interactive:hover{ border-color: var(--ink-3); box-shadow: var(--e2); }
.ds-card--interactive:active{ transform:scale(.995); }
.ds-card--selected{
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset, var(--e2);
}

.ds-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp3);
  margin-bottom: var(--sp3);
}
.ds-card-title{ font-size:var(--t-body); font-weight:var(--w-bold); color:var(--ink); }


/* ═══════════════════════════════════════════════════════════
   10. LE PARCOURS — composant propre à TOLO PAY
   ───────────────────────────────────────────────────────────
   Chaque opération va d'un pays vers un autre, d'une devise
   vers une autre. C'est le cœur du produit, et il mérite son
   composant plutôt qu'une ligne de texte.
   ═══════════════════════════════════════════════════════════ */
.ds-corridor{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: var(--sp3);
}
.ds-corridor-side{ min-width:0; }
.ds-corridor-side.to{ text-align:right; }
.ds-corridor-label{
  font-size: var(--t-label); color: var(--ink-2);
  display:flex; align-items:center; gap:6px; margin-bottom:3px;
}
.ds-corridor-side.to .ds-corridor-label{ justify-content:flex-end; }
.ds-corridor-value{
  font-size: var(--t-lead); font-weight: var(--w-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ds-corridor-side.to .ds-corridor-value{ color: var(--brand-text); }
/* La flèche est un trait, pas un caractère « → » */
.ds-corridor-arrow{
  width:26px; height:1px; background: var(--line);
  position:relative; flex-shrink:0;
}
.ds-corridor-arrow::after{
  content:''; position:absolute; right:0; top:-3px;
  width:6px; height:6px;
  border-top:1px solid var(--ink-3);
  border-right:1px solid var(--ink-3);
  transform:rotate(45deg);
}


/* ═══════════════════════════════════════════════════════════
   11. BADGES ET STATUTS
   ═══════════════════════════════════════════════════════════ */
.ds-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  line-height:1.4;
  border:1px solid transparent;
  white-space:nowrap;
}
.ds-badge--ok  { background:var(--ok-bg);   color:var(--ok);   }
.ds-badge--warn{ background:var(--warn-bg); color:var(--warn); }
.ds-badge--err { background:var(--err-bg);  color:var(--err);  }
.ds-badge--info{ background:var(--info-bg); color:var(--info); }
.ds-badge--muted{ background:var(--surface-3); color:var(--ink-2); }

/* Point d'état — un repère fixe, jamais clignotant */
.ds-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  display:inline-block; vertical-align:middle;
}


/* ═══════════════════════════════════════════════════════════
   12. TABLEAUX
   ═══════════════════════════════════════════════════════════ */
.ds-table{ width:100%; border-collapse:collapse; font-size: var(--t-small); }
.ds-table th{
  text-align:left;
  padding: var(--sp3);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.ds-table td{
  padding: var(--sp3);
  border-bottom:1px solid var(--line-soft);
  color: var(--ink);
  vertical-align:middle;
}
.ds-table td.num{ text-align:right; font-variant-numeric: tabular-nums; }
.ds-table tbody tr{ transition: background var(--fast) var(--ease); }
.ds-table tbody tr:hover td{ background: var(--surface-2); }
.ds-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }


/* ═══════════════════════════════════════════════════════════
   13. NOTIFICATIONS ET MESSAGES
   ═══════════════════════════════════════════════════════════ */
.ds-notice{
  display:flex; gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  border-radius: var(--r2);
  border:1px solid transparent;
  font-size: var(--t-small);
  line-height: var(--lh-body);
}
.ds-notice--info{ background:var(--info-bg); color:var(--ink); border-color:transparent; }
.ds-notice--ok  { background:var(--ok-bg);   color:var(--ink); }
.ds-notice--warn{ background:var(--warn-bg); color:var(--ink); }
.ds-notice--err { background:var(--err-bg);  color:var(--ink); }
.ds-notice-ico{ flex-shrink:0; line-height:0; padding-top:1px; }

/* Écran vide — une invitation à agir, pas un constat triste */
.ds-empty{
  text-align:center; padding: var(--sp6) var(--sp4);
  color: var(--ink-2);
}
.ds-empty-ico{ color: var(--ink-3); margin-bottom: var(--sp3); }
.ds-empty-title{ font-size:var(--t-body); font-weight:var(--w-medium); color:var(--ink); }
.ds-empty-text{ font-size:var(--t-small); margin-top:var(--sp1); }


/* ═══════════════════════════════════════════════════════════
   14. MODALES
   ═══════════════════════════════════════════════════════════ */
.ds-overlay{
  position:fixed; inset:0; z-index:600;
  background: rgba(9,12,17,.5);
  backdrop-filter: blur(3px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity var(--mid) var(--ease);
}
body.tp-dark .ds-overlay{ background: rgba(0,0,0,.66); }
.ds-overlay.on{ opacity:1; pointer-events:auto; }

.ds-modal{
  width:100%; max-width:480px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r5) var(--r5) 0 0;
  padding: var(--sp5);
  box-shadow: var(--e3);
  transform: translateY(14px);
  transition: transform var(--slow) var(--ease-out);
  max-height:88dvh; overflow-y:auto;
}
.ds-overlay.on .ds-modal{ transform: translateY(0); }
@media (min-width:620px){
  .ds-overlay{ align-items:center; }
  .ds-modal{ border-radius: var(--r5); }
}
/* Poignée : indique qu'on peut fermer en glissant */
.ds-modal-grip{
  width:38px; height:4px; border-radius:2px;
  background: var(--line); margin:0 auto var(--sp4);
}


/* ═══════════════════════════════════════════════════════════
   15. NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.ds-nav{
  display:flex; align-items:center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--line);
  backdrop-filter: blur(14px);
}
.ds-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding: var(--sp2) 0;
  color: var(--ink-2); cursor:pointer;
  font-size: var(--t-micro);
  transition: color var(--fast) var(--ease);
}
.ds-nav-item.on{ color: var(--brand-text); }

/* Onglets sur rail — un seul fond qui glisse, pas deux boutons */
.ds-tabs{
  display:flex; gap:2px; padding:3px;
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
}
.ds-tab{
  flex:1; border:none; cursor:pointer;
  padding: var(--sp3);
  border-radius: calc(var(--r2) - 4px);
  background:transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ds-tab.on{ background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
body.tp-dark .ds-tab.on{ background: var(--surface-3); }

/* Puces filtrantes */
.ds-chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.ds-chips::-webkit-scrollbar{ display:none; }
.ds-chip{
  flex-shrink:0; cursor:pointer;
  padding: 7px var(--sp3);
  border-radius: var(--r-pill);
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  transition: all var(--fast) var(--ease);
}
.ds-chip.on{ background: var(--brand); border-color: var(--brand); color:#fff; }
body.tp-dark .ds-chip.on{ color:#062821; }


/* ═══════════════════════════════════════════════════════════
   16. ÉTAPES
   ═══════════════════════════════════════════════════════════ */
.ds-steps{ display:flex; align-items:center; }
.ds-step{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.ds-step-dot{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-3); color: var(--ink-2);
  font-size: var(--t-label); font-weight: var(--w-bold);
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.ds-step.on  .ds-step-dot{ background: var(--brand); color:#fff; }
.ds-step.done .ds-step-dot{ background: var(--ok); color:#fff; }
body.tp-dark .ds-step.on .ds-step-dot,
body.tp-dark .ds-step.done .ds-step-dot{ color:#062821; }
.ds-step-label{ font-size: var(--t-micro); color: var(--ink-3); text-align:center; }
.ds-step.on .ds-step-label{ color: var(--ink); }
.ds-step-line{ flex:1; height:1px; background: var(--line); margin:0 4px; margin-bottom:18px; }


/* ═══════════════════════════════════════════════════════════
   17. GRILLE ET RESPONSIVE
   ───────────────────────────────────────────────────────────
   Une seule colonne sur téléphone. Au-delà, le contenu se
   centre au lieu de s'étirer : une ligne de texte trop longue
   devient pénible à lire.
   ═══════════════════════════════════════════════════════════ */
.ds-wrap{
  width:100%; max-width:440px;
  margin-inline:auto;
  padding-inline: var(--sp4);
}
@media (min-width:620px){ .ds-wrap{ max-width:560px; } }
@media (min-width:900px){ .ds-wrap{ max-width:640px; } }

.ds-grid{ display:grid; gap: var(--sp3); }
.ds-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.ds-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:360px){
  .ds-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:620px){
  .ds-grid--2\@lg4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.ds-row{ display:flex; align-items:center; gap: var(--sp3); }
.ds-row--between{ justify-content:space-between; }
.ds-stack > * + *{ margin-top: var(--sp3); }
.ds-stack--lg > * + *{ margin-top: var(--sp5); }

/* Encoche et barre d'accueil */
@supports(padding: max(0px)){
  .ds-safe-top{ padding-top: max(var(--sp4), env(safe-area-inset-top)); }
  .ds-safe-bottom{ padding-bottom: max(var(--sp2), env(safe-area-inset-bottom)); }
}

/* iOS zoome sur un champ dont la police fait moins de 16 px */
@supports (-webkit-touch-callout: none){
  .ds-input, input, select, textarea{ font-size:16px !important; }
}


/* ═══════════════════════════════════════════════════════════
   18. ÉTATS GLOBAUX
   ═══════════════════════════════════════════════════════════ */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius: var(--r1);
}
*{ -webkit-tap-highlight-color: transparent; }

/* Chargement — un bloc gris qui respire, pas un texte
   « Chargement… » qui fait attendre sans rien montrer. */
.ds-skeleton{
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r1);
}
@keyframes ds-shimmer{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}

.ds-divider{ height:1px; background: var(--line); border:none; margin: var(--sp4) 0; }


/* ═══════════════════════════════════════════════════════════
   19. ÉCRAN DE CONNEXION
   ───────────────────────────────────────────────────────────
   C'est le premier écran qu'un partenaire ouvrira. Il dit deux
   choses avant tout : ce que fait TOLO PAY, et que c'est sûr.
   ═══════════════════════════════════════════════════════════ */
#AUTH{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-app);
  padding: var(--sp5) 0;
  overflow-y:auto;
}
.auth-box{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r5);
  box-shadow: var(--e3);
  padding: var(--sp6) var(--sp5) var(--sp5);
  max-width:400px;
}
.auth-logo{ text-align:center; margin-bottom: var(--sp5); }
.auth-mark{ border-radius: var(--r3); display:block; margin:0 auto var(--sp3); }
.auth-title{
  font-size: var(--t-title); font-weight: var(--w-bold);
  letter-spacing:.05em; color: var(--ink);
}
.auth-title span{ color: var(--brand-text); }
.auth-sub{
  font-size: var(--t-small); color: var(--ink-2);
  margin-top: var(--sp1); line-height:1.45;
}
.auth-tabs{ margin-bottom: var(--sp5); }

.phone-row{ display:flex; gap: var(--sp2); align-items:stretch; }
.phone-row .prefix-wrap{ flex-shrink:0; }
.phone-row .prefix-wrap select{ min-width:104px; height:100%; }
.phone-row > .ds-input{ flex:1; min-width:0; }

.pass-wrap{ position:relative; }
.pass-wrap .ds-input{ padding-right:48px; }
.pass-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; line-height:0;
  color: var(--ink-3); padding:8px; border-radius: var(--r1);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pass-toggle:hover{ color: var(--ink); background: var(--surface-2); }

.auth-links{ text-align:center; margin-top: var(--sp3); }
.auth-links span{
  font-size: var(--t-small); color: var(--brand-text);
  font-weight: var(--w-medium); cursor:pointer;
}

/* Un rappel discret, pas un argument commercial */
.auth-trust{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top: var(--sp4);
  font-size: var(--t-micro); color: var(--ink-3);
}

.auth-switch{
  text-align:center; margin-top: var(--sp5);
  padding-top: var(--sp4);
  border-top:1px solid var(--line-soft);
  font-size: var(--t-small); color: var(--ink-2);
}
.auth-switch span{
  color: var(--brand-text); font-weight: var(--w-medium); cursor:pointer;
}

/* Acceptation des conditions */
.auth-cgu{
  display:flex; align-items:flex-start; gap: var(--sp3);
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--sp3);
  margin-bottom: var(--sp4);
  cursor:pointer;
}
.auth-cgu input{
  width:18px; height:18px; margin-top:1px; flex-shrink:0;
  accent-color: var(--brand); cursor:pointer;
}
.auth-cgu span{
  font-size: var(--t-small); color: var(--ink-2); line-height:1.5;
}
.auth-cgu a{ color: var(--brand-text); font-weight: var(--w-medium); }

/* Robustesse du mot de passe */
.pw-meter{ display:flex; gap:4px; margin-top: var(--sp2); }
.pw-seg{
  flex:1; height:3px; border-radius:2px;
  background: var(--surface-3);
  transition: background var(--mid) var(--ease);
}
.pw-seg.lvl1{ background: var(--err); }
.pw-seg.lvl2{ background: var(--warn); }
.pw-seg.lvl3{ background: var(--ok); }
.pw-note{ font-size: var(--t-micro); color: var(--ink-3); margin-top: 5px; min-height:14px; }


/* ═══════════════════════════════════════════════════════════
   20. TABLEAU DE BORD CLIENT
   ═══════════════════════════════════════════════════════════ */

/* ── Carte du taux ──
   Un seul chiffre en grand sur l'écran. C'est ce que le client
   vient vérifier en premier. */
.rate-card{ margin-top: var(--sp3); overflow:hidden; position:relative; }
.rate-corridor{ margin-bottom: var(--sp3); }
.rate-amount{
  font-size: var(--t-hero);
  color: var(--brand-text);
  transition: opacity var(--mid) var(--ease);
}
.rate-amount .ds-cur{ color: var(--ink-2); }
.rate-amount.refreshed{ animation: ds-fade-in var(--slow) var(--ease-out); }
@keyframes ds-fade-in{ from{ opacity:.4; } to{ opacity:1; } }

.rate-inverse{ color: var(--ink-2); margin-bottom: var(--sp3); }
.rate-foot{ margin-top: var(--sp3); padding-top: var(--sp3); border-top:1px solid var(--line-soft); }
.rate-fresh{
  display:flex; align-items:center; gap:7px;
  font-size: var(--t-micro); color: var(--ink-3); min-width:0;
}
.rate-fresh .ds-dot{ background: var(--ok); }
.rate-fresh .ds-dot.stale{ background: var(--warn); }
.rate-by{ margin-top: var(--sp2); }

/* Courbe des sept derniers jours — un repère, pas un graphique
   d'analyse. Elle reste discrète. */
.spark{
  height:32px; margin: var(--sp2) 0 0;
  display:flex; align-items:flex-end; gap:2px;
}
.spark > i{
  flex:1; background: var(--brand);
  opacity:.22; border-radius:1px; min-height:2px;
  transition: opacity var(--fast) var(--ease);
}
.spark > i:last-child{ opacity:.55; }

.intro-line{
  color: var(--ink-2);
  margin: var(--sp4) 0 var(--sp3);
  line-height: var(--lh-body);
}

/* ── Garanties ──
   Trois faits vérifiables, alignés, sans encadré tape-à-l'œil. */
.trust-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap: var(--sp2);
  margin-bottom: var(--sp4);
}
.trust{
  display:flex; flex-direction:column; gap:6px;
  padding: var(--sp3);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r2);
  color: var(--brand-text);
}
.trust-txt{
  font-size: var(--t-label); font-weight: var(--w-medium);
  color: var(--ink); line-height:1.3;
}
.trust-sub{ font-size: var(--t-micro); color: var(--ink-3); line-height:1.35; }
@media (max-width:360px){
  .trust-row{ grid-template-columns:1fr; }
  .trust{ flex-direction:row; align-items:center; gap: var(--sp3); }
}

/* ── En-tête ── */
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp3);
  padding: var(--sp4) var(--sp4) var(--sp2);
  max-width:440px; margin-inline:auto;
}
@media (min-width:620px){ .hdr{ max-width:560px; } }
@media (min-width:900px){ .hdr{ max-width:640px; } }
.lrow{ display:flex; align-items:center; gap: var(--sp3); min-width:0; }
.lsq{ border-radius: var(--r2); flex-shrink:0; }
.lnm{
  font-size: var(--t-lead); font-weight: var(--w-bold);
  letter-spacing:.04em; color: var(--ink); line-height:1.15;
}
.lsb{ font-size: var(--t-micro); color: var(--ink-3); margin-top:1px; }

.hbtns{ display:flex; gap:6px; flex-shrink:0; }
.hbtn{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--r2);
  background: var(--surface);
  border:1px solid var(--line);
  color: var(--ink-2);
  cursor:pointer; position:relative;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.hbtn:hover{ background: var(--surface-2); color: var(--ink); }
.hbtn:active{ transform:scale(.96); }
.nbadge{
  position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius: var(--r-pill);
  background: var(--err); color:#fff;
  font-size:9.5px; font-weight: var(--w-bold);
  line-height:17px; text-align:center;
  border:2px solid var(--bg-app);
}


/* ═══════════════════════════════════════════════════════════
   21. WALLET
   ═══════════════════════════════════════════════════════════ */

/* Intitulé de section — remplace les libellés en capitales
   espacées, qui signalent une interface générée. */
.ds-section-head{
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  margin: var(--sp5) 0 var(--sp2);
  padding-inline: var(--sp1);
}

/* Compte lié */
.wallet-account{
  display:flex; align-items:center; gap: var(--sp3);
  margin-bottom: var(--sp2);
  padding: var(--sp3) var(--sp4);
}
.wa-mark{
  width:40px; height:40px; flex-shrink:0;
  border-radius: var(--r2);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight: var(--w-bold);
  letter-spacing:.02em;
}
/* Couleurs officielles des partenaires — inchangées */
.wa-mark--om { background:#FF6600; font-size:12px; }
.wa-mark--ali{ background:#1677FF; font-size:17px; }

.wa-body{ flex:1; min-width:0; }
.wa-name{ font-size: var(--t-body); font-weight: var(--w-medium); color: var(--ink); }
.wa-meta{ font-size: var(--t-small); color: var(--ink-2); margin-top:2px;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Chiffres d'activité */
.w-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap: var(--sp2);
}
.w-cell{
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--sp3);
}
.w-lbl{ font-size: var(--t-label); color: var(--ink-2); }
.w-val{
  font-size: var(--t-lead); font-weight: var(--w-bold);
  color: var(--ink); margin-top:3px;
  font-variant-numeric: tabular-nums; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w-val.gnf{ color: var(--navy); }
.w-val.rmb{ color: var(--brand-text); }
.w-sub{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
@media (min-width:620px){ .w-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Ligne de transaction — le montant à droite, aligné */
.tx-row{
  display:flex; align-items:center; gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r2);
  margin-bottom: var(--sp2);
  cursor:pointer;
  transition: border-color var(--fast) var(--ease);
}
.tx-row:hover{ border-color: var(--ink-3); }
.tx-body{ flex:1; min-width:0; }
.tx-title{ font-size: var(--t-body); font-weight: var(--w-medium); color: var(--ink); }
.tx-meta{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
.tx-amount{
  text-align:right; flex-shrink:0;
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Onglets de contenu */
.tab-pane{ padding-bottom:88px; animation: ds-pane .24s var(--ease-out); }
@keyframes ds-pane{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }


/* ═══════════════════════════════════════════════════════════
   21. PARCOURS D'ÉCHANGE
   ───────────────────────────────────────────────────────────
   Six étapes, dont trois demandent une décision au client.
   À chaque écran il doit savoir : où il en est, ce qu'on lui
   demande, et combien ça coûte.
   ═══════════════════════════════════════════════════════════ */

/* En-tête d'étape — le numéro dit où on en est sans avoir à
   relire la barre de progression. */
.ds-step-head{
  display:flex; align-items:flex-start; gap: var(--sp3);
  margin-bottom: var(--sp4);
}
.ds-step-num{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--brand); color:#fff;
  font-size: var(--t-label); font-weight: var(--w-bold);
}
body.tp-dark .ds-step-num{ color:#062821; }
.ds-step-title{
  font-size: var(--t-lead); font-weight: var(--w-bold);
  color: var(--ink); line-height:1.3;
}
.ds-step-sub{
  font-size: var(--t-small); color: var(--ink-2);
  margin-top:2px; line-height:1.45;
}

/* Retour — discret, aligné à gauche, sans encadré */
.ds-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  padding: var(--sp2) 0;
  margin-bottom: var(--sp2);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  transition: color var(--fast) var(--ease);
}
.ds-back:hover{ color: var(--ink); }

/* ── Saisie du montant ──
   Le champ est le point chaud de l'écran : gros, aligné à
   gauche, la devise à côté et non dedans. */
.amount-card{ margin-bottom: var(--sp4); }
.amount-row{
  display:flex; align-items:baseline; gap: var(--sp2);
  margin: var(--sp3) 0;
  padding-bottom: var(--sp3);
  border-bottom:1px solid var(--line);
}
.amount-cur{
  font-size: var(--t-lead); font-weight: var(--w-medium);
  color: var(--ink-2); flex-shrink:0;
}
.amount-in{
  flex:1; min-width:0; width:100%;
  border:none; background:none; outline:none;
  font-family: var(--font);
  font-size: var(--t-hero);
  font-weight: var(--w-bold);
  letter-spacing:-.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding:0;
  -moz-appearance:textfield;
}
.amount-in::-webkit-outer-spin-button,
.amount-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.amount-in::placeholder{ color: var(--ink-3); font-weight: var(--w-medium); }

/* Montants rapides */
.qrow{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.qrow::-webkit-scrollbar{ display:none; }
.qa{
  flex-shrink:0; cursor:pointer;
  padding:7px var(--sp3);
  border-radius: var(--r-pill);
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  transition: all var(--fast) var(--ease);
}
.qa:hover{ border-color: var(--ink-3); }
.qa.on{ background: var(--brand); border-color: var(--brand); color:#fff; }
body.tp-dark .qa.on{ color:#062821; }

/* ── Choix du moyen de paiement / réception ── */
.mchoice{ display:flex; flex-direction:column; gap: var(--sp2); }
.mcard{
  display:flex; align-items:center; gap: var(--sp3);
  width:100%; text-align:left; cursor:pointer;
  padding: var(--sp3) var(--sp4);
  min-height:62px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r3);
  font-family: var(--font);
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.mcard:hover:not(:disabled){ border-color: var(--ink-3); }
.mcard:active:not(:disabled){ transform:scale(.995); }
.mcard.on{
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.mcard:disabled{ opacity:.5; cursor:not-allowed; }
.mc-icon{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--brand-text);
}
.mcard.on .mc-icon{ background: var(--brand); color:#fff; }
body.tp-dark .mcard.on .mc-icon{ color:#062821; }
.mc-body{ flex:1; min-width:0; }
.mc-label{ font-size: var(--t-body); font-weight: var(--w-medium); color: var(--ink); }
.mc-badge{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
.mc-check{
  width:20px; height:20px; flex-shrink:0;
  border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:11px;
  transition: all var(--fast) var(--ease);
}
.mcard.on .mc-check{ background: var(--brand); border-color: var(--brand); color:#fff; }
body.tp-dark .mcard.on .mc-check{ color:#062821; }
.mc-soon{
  font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--ink-3);
  border:1px solid var(--line);
  border-radius: var(--r-pill);
  padding:3px 9px; flex-shrink:0;
}

/* ── Récapitulatif du devis ──
   Ce que le client paie, et ce que le bénéficiaire reçoit.
   Le second est le chiffre qui compte pour lui. */
.quote{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--sp4);
  box-shadow: var(--e1);
}
.quote-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: var(--sp3); padding: var(--sp2) 0;
}
.quote-row + .quote-row{ border-top:1px solid var(--line-soft); }
.quote-k{ font-size: var(--t-small); color: var(--ink-2); }
.quote-v{
  font-size: var(--t-body); font-weight: var(--w-medium);
  color: var(--ink); font-variant-numeric: tabular-nums;
  text-align:right;
}
.quote-row.total{
  border-top:1px solid var(--line);
  margin-top: var(--sp1); padding-top: var(--sp3);
}
.quote-row.total .quote-v{ font-size: var(--t-lead); font-weight: var(--w-bold); }
.quote-row.recv .quote-v{
  font-size: var(--t-title); font-weight: var(--w-bold);
  color: var(--brand-text); letter-spacing:-.01em;
}
.quote-lock{
  display:flex; align-items:center; gap:6px;
  margin-top: var(--sp3); padding-top: var(--sp3);
  border-top:1px solid var(--line-soft);
  font-size: var(--t-micro); color: var(--ink-3);
}
.quote-lock b{ color: var(--warn); font-variant-numeric: tabular-nums; }
.quote-err{
  font-size: var(--t-small); color: var(--err);
  padding: var(--sp3); background: var(--err-bg);
  border-radius: var(--r2);
}

/* ── Barre d'étapes ── */
.sbar{
  display:flex; align-items:flex-start;
  padding: var(--sp3) 0 var(--sp4);
}
.sdot{ display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.sci{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-3); color: var(--ink-3);
  font-size: var(--t-micro); font-weight: var(--w-bold);
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.sdot.on .sci{ background: var(--brand); color:#fff; }
.sdot.ok .sci{ background: var(--ok); color:#fff; }
body.tp-dark .sdot.on .sci, body.tp-dark .sdot.ok .sci{ color:#062821; }
.sdlbl{
  font-size:9px; color: var(--ink-3); text-align:center;
  line-height:1.25; max-width:46px;
}
.sdot.on .sdlbl{ color: var(--ink); font-weight: var(--w-medium); }
.sconn{ flex:1; height:1px; background: var(--line); margin:12px 2px 0; }

/* ── Champs bénéficiaire ── */
.bfield{ margin-bottom: var(--sp3); }
.bfield label{
  display:block; font-size: var(--t-label);
  font-weight: var(--w-medium); color: var(--ink-2);
  margin-bottom: var(--sp2);
}
.bfield .req{ color: var(--err); }
.bfield .help{ font-size: var(--t-micro); color: var(--ink-3); margin-top: var(--sp1); line-height:1.45; }
.bfield .inp, .bfield select.inp{ width:100%; }

/* Titre de section — remplace les libellés en capitales */
.ds-section-head{
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  margin: var(--sp5) 0 var(--sp3);
  letter-spacing:0;
  text-transform:none;
}
.ds-section-head:first-child{ margin-top:0; }


/* ═══════════════════════════════════════════════════════════
   22. HISTORIQUE
   ═══════════════════════════════════════════════════════════ */
.hist-search{ position:relative; margin-bottom: var(--sp3); }
.hist-search .ds-input{ padding-left:42px; }
.hist-search-ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--ink-3); pointer-events:none; line-height:0;
}
.hist-chips{ margin-bottom: var(--sp2); }
.hist-count{ margin: var(--sp3) 0; }

/* Une ligne de transaction — la référence à gauche, le montant
   à droite. Deux colonnes, jamais plus : c'est ce qu'on scanne. */
.tx-row{
  display:flex; align-items:center; gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r3);
  margin-bottom: var(--sp2);
  cursor:pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tx-row:hover{ border-color: var(--ink-3); box-shadow: var(--e1); }
.tx-row:active{ transform:scale(.996); }
.tx-ico{
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--r2);
  background: var(--surface-2); color: var(--ink-2);
}
.tx-main{ flex:1; min-width:0; }
.tx-ref{
  font-size: var(--t-small); font-weight: var(--w-medium);
  color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tx-meta{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
.tx-right{ text-align:right; flex-shrink:0; }
.tx-amt{
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space:nowrap;
}
.tx-status{ margin-top:4px; }


/* ═══════════════════════════════════════════════════════════
   23. LIGNES DE LISTE
   ───────────────────────────────────────────────────────────
   Le motif « icône, libellé, chevron » revient partout :
   profil, paramètres, aide. Une seule définition.
   ═══════════════════════════════════════════════════════════ */
.ds-listrow{
  display:flex; align-items:center; gap: var(--sp3);
  width:100%; text-align:left; cursor:pointer;
  padding: var(--sp3) var(--sp4);
  margin-bottom: var(--sp2);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r3);
  font-family: var(--font);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.ds-listrow:hover{ border-color: var(--ink-3); background: var(--surface-2); }
.ds-listrow:active{ transform:scale(.996); }
.ds-listrow-ico{
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--brand-text);
}
.ds-listrow:hover .ds-listrow-ico{ background: var(--surface-3); }
.ds-listrow-body{ flex:1; min-width:0; }
.ds-listrow-title{
  display:block;
  font-size: var(--t-body); font-weight: var(--w-medium);
  color: var(--ink); line-height:1.3;
}
.ds-listrow-sub{
  display:block;
  font-size: var(--t-micro); color: var(--ink-3);
  margin-top:2px; line-height:1.35;
}
.ds-listrow-chev{ color: var(--ink-3); flex-shrink:0; line-height:0; }

/* ═══════════════════════════════════════════════════════════
   24. PROFIL
   ═══════════════════════════════════════════════════════════ */
.pf-head{ display:flex; align-items:center; gap: var(--sp3); margin-bottom: var(--sp4); }
.pf-ava{
  width:60px; height:60px; flex-shrink:0;
  border-radius:50%; overflow:hidden; position:relative; cursor:pointer;
  background: linear-gradient(135deg, var(--brand-dark), var(--navy));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size: var(--t-title); font-weight: var(--w-bold);
}
.pf-ava img{ width:100%; height:100%; object-fit:cover; }
.pf-cam{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.55); color:#fff;
  font-size:9px; text-align:center; padding:3px 0; line-height:1;
}
.pf-nm{ font-size: var(--t-lead); font-weight: var(--w-bold); color: var(--ink); }
.pf-ph{ font-size: var(--t-small); color: var(--ink-2); margin-top:2px; font-variant-numeric: tabular-nums; }
.pf-row{
  display:flex; justify-content:space-between; align-items:center;
  gap: var(--sp3);
  padding: var(--sp3) 0;
  border-top:1px solid var(--line-soft);
  font-size: var(--t-small);
}
.pf-k{ color: var(--ink-2); }
.pf-v{ font-weight: var(--w-medium); color: var(--ink); text-align:right; }

/* Niveau de vérification */
.kyc-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size: var(--t-label); font-weight: var(--w-medium);
  padding:4px 10px; border-radius: var(--r-pill);
}
.kyc-0{ background: var(--err-bg);  color: var(--err); }
.kyc-1{ background: var(--warn-bg); color: var(--warn); }
.kyc-2{ background: var(--ok-bg);   color: var(--ok); }
.kyc-3{ background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); }

/* Bouton de fermeture de modale */
.m-close-btn{
  width:100%; margin-top: var(--sp4);
  padding: var(--sp3);
  background:none; border:none; cursor:pointer;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  border-radius: var(--r2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.m-close-btn:hover{ background: var(--surface-2); color: var(--ink); }


/* ═══════════════════════════════════════════════════════════
   25. VÉRIFICATION D'IDENTITÉ
   ───────────────────────────────────────────────────────────
   Le client doit comprendre en un regard : où il en est, et ce
   que le niveau suivant lui apporte.
   ═══════════════════════════════════════════════════════════ */
.kyc-levels{
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--sp2);
  margin-bottom: var(--sp4);
}
.kyc-level{
  display:flex; align-items:center; gap: var(--sp3);
  padding: var(--sp3);
  border-radius: var(--r2);
}
.kyc-level + .kyc-level{ border-top:1px solid var(--line-soft); }
.kyc-level-ico{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--surface-3); color: var(--ink-3);
}
.kyc-level.done .kyc-level-ico{ background: var(--ok-bg); color: var(--ok); }
.kyc-level-body{ flex:1; min-width:0; }
.kyc-level-name{
  display:block;
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink);
}
.kyc-level-cap{
  display:block;
  font-size: var(--t-micro); color: var(--ink-3); margin-top:1px;
  font-variant-numeric: tabular-nums;
}

/* Dépôt de document */
.kyc-upload{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp2);
  padding: var(--sp5) var(--sp3);
  min-height:116px;
  background: var(--surface-2);
  border:1px dashed var(--line);
  border-radius: var(--r3);
  color: var(--ink-3);
  cursor:pointer; text-align:center;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.kyc-upload:hover{ border-color: var(--brand); background: var(--surface-3); }
.kyc-upload.has{
  border-style:solid; border-color: var(--ok);
  background: var(--ok-bg); color: var(--ok);
}
.kyc-upload-label{
  font-size: var(--t-label); font-weight: var(--w-medium);
  color: var(--ink-2); line-height:1.3;
}
.kyc-upload.has .kyc-upload-label{ color: var(--ok); }
.kyc-upload-ico{ line-height:0; }


/* ═══════════════════════════════════════════════════════════
   26. DASHBOARD ADMINISTRATEUR
   ───────────────────────────────────────────────────────────
   C'est l'outil de travail quotidien : il doit être dense sans
   être confus. Même système que l'application cliente, mais
   calibré pour lire beaucoup d'information d'un coup d'œil.
   ═══════════════════════════════════════════════════════════ */

/* ── Barre latérale ── */
.sidebar{
  background: var(--surface) !important;
  border-right:1px solid var(--line) !important;
}
body.tp-dark .sidebar{ background:#0E131A !important; }
.sb-logo{ padding: var(--sp4); border-bottom:1px solid var(--line-soft); }
.sb-mark{ border-radius: var(--r2); }
.sb-name{ font-size: var(--t-body); font-weight: var(--w-bold); color: var(--ink); letter-spacing:.04em; }
.sb-sub{ font-size: var(--t-micro); color: var(--ink-3); }
.sb-nav{ padding: var(--sp3) var(--sp2) !important; }
.sb-sec{
  font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--ink-3); text-transform:none; letter-spacing:0;
  padding: var(--sp3) var(--sp3) var(--sp2);
}
.ni{
  display:flex; align-items:center; gap: var(--sp3);
  padding: var(--sp2) var(--sp3) !important;
  border-radius: var(--r2) !important;
  margin-bottom:2px;
  color: var(--ink-2) !important;
  font-size: var(--t-small);
  cursor:pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.ni:hover{ background: var(--surface-2) !important; color: var(--ink) !important; }
.ni.on{
  background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
  color: var(--brand-text) !important;
  font-weight: var(--w-medium);
}
.niic{ flex-shrink:0; line-height:0; }
.nilb{ flex:1; min-width:0; display:flex; align-items:center; gap: var(--sp2); }
.nibd{
  min-width:19px; height:19px; padding:0 5px;
  border-radius: var(--r-pill);
  background: var(--err); color:#fff;
  font-size: var(--t-micro); font-weight: var(--w-bold);
  line-height:19px; text-align:center;
}
.sb-user{ padding: var(--sp3); border-top:1px solid var(--line-soft); }
.sb-urow{ display:flex; align-items:center; gap: var(--sp3); margin-bottom: var(--sp3); }
.sb-av{
  width:34px; height:34px; border-radius:50%;
  background: var(--surface-3); color: var(--ink-2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sb-un{ font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink); }
.sb-ur{ font-size: var(--t-micro); color: var(--ink-3); }
.sb-out{
  width:100%; display:flex; align-items:center; justify-content:center; gap: var(--sp2);
  padding: var(--sp2) var(--sp3);
  background: var(--surface-2); border:1px solid var(--line);
  border-radius: var(--r2);
  color: var(--ink-2);
  font-family: var(--font); font-size: var(--t-small); font-weight: var(--w-medium);
  cursor:pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sb-out:hover{ background: var(--surface-3); color: var(--ink); }

/* ── En-tête de page ── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp3); flex-wrap:wrap;
  margin-bottom: var(--sp5) !important;
}
.pg-title{
  font-size: var(--t-title); font-weight: var(--w-bold);
  color: var(--ink); letter-spacing:-.01em; text-transform:none;
}
.pg-sub{ font-size: var(--t-small); color: var(--ink-2); margin-top:2px; }

/* ── Indicateurs ── */
.kgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--sp3); }
@media (max-width:820px){ .kgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .kgrid{ grid-template-columns:1fr; } }
.kpi{
  background: var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--r3) !important;
  padding: var(--sp4) !important;
  box-shadow: var(--e1);
}
.kpi-ic{
  width:32px; height:32px; border-radius: var(--r2);
  background: var(--surface-2); color: var(--brand-text);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp3);
}
.kpi-l{
  font-size: var(--t-label); color: var(--ink-2);
  text-transform:none; letter-spacing:0; font-weight: var(--w-regular);
}
.kpi-v{
  font-size: var(--t-title); font-weight: var(--w-bold);
  color: var(--ink); margin-top:3px;
  font-variant-numeric: tabular-nums; letter-spacing:-.015em;
}
.kpi-d{ font-size: var(--t-micro); color: var(--ink-3); margin-top:3px; }

/* ── Panneaux ── */
.pc{
  background: var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--r3) !important;
  margin-bottom: var(--sp4) !important;
  box-shadow: var(--e1);
  overflow:hidden;
}
.pchd{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp3);
  padding: var(--sp4);
  background: var(--surface-2);
  border-bottom:1px solid var(--line);
}
.pcttl{ font-size: var(--t-body); font-weight: var(--w-bold); color: var(--ink); }
.pcsub{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
.pcbtn{
  padding: var(--sp2) var(--sp3);
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r2);
  color: var(--ink-2);
  font-family: var(--font); font-size: var(--t-label); font-weight: var(--w-medium);
  cursor:pointer; white-space:nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pcbtn:hover{ background: var(--surface-3); color: var(--ink); }

/* ── Tableaux ──
   Le badge était en monospace 8 px : illisible, et rien d'autre
   dans l'application n'utilisait cette police. */
.tbl{ width:100%; border-collapse:collapse; font-size: var(--t-small); }
.tbl th{
  text-align:left; white-space:nowrap;
  padding: var(--sp3) var(--sp4);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-label); font-weight: var(--w-medium);
  text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--line);
}
.tbl td{
  padding: var(--sp3) var(--sp4);
  border-bottom:1px solid var(--line-soft);
  color: var(--ink); vertical-align:middle;
}
.tbl tbody tr{ transition: background var(--fast) var(--ease); }
.tbl tbody tr:hover td{ background: var(--surface-2); }

.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family: var(--font) !important;
  font-size: var(--t-label) !important;
  font-weight: var(--w-medium) !important;
  padding:4px 10px !important;
  border-radius: var(--r-pill) !important;
  white-space:nowrap;
  text-transform:none;
}

/* ── Écran de connexion admin ── */
#LOGIN{ background: var(--bg-app) !important; }
.lbox{
  background: var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--r5) !important;
  box-shadow: var(--e3) !important;
  padding: var(--sp6) var(--sp5) var(--sp5) !important;
}
.ltitle{ font-size: var(--t-title); font-weight: var(--w-bold); color: var(--ink); }
.lsub{ font-size: var(--t-small); color: var(--ink-2); margin-top: var(--sp1); }
.linp{
  width:100%;
  background: var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  padding: var(--sp3) var(--sp4) !important;
  min-height:46px;
  color: var(--ink) !important;
  font-family: var(--font); font-size: var(--t-body);
  margin-bottom: var(--sp3);
  outline:none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.linp:focus{ border-color: var(--brand) !important; box-shadow: var(--focus-ring); }
.lbtn{
  width:100%;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-deep)) !important;
  color:#fff !important; border:none !important;
  border-radius: var(--r2) !important;
  padding: var(--sp4) !important;
  font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-bold);
  text-transform:none; letter-spacing:0;
  cursor:pointer; box-shadow: var(--e-brand);
}
body.tp-dark .lbtn{ color:#062821 !important; }
.lback{ color: var(--brand-text) !important; font-size: var(--t-small); }

/* Deux colonnes sur grand écran, empilées sur téléphone */
.admin-cols{
  display:grid; grid-template-columns:1fr 1fr; gap: var(--sp3);
}
@media (max-width:820px){ .admin-cols{ grid-template-columns:1fr; } }

/* Ligne récente du dashboard */
.dash-row{
  display:flex; align-items:center; gap: var(--sp3);
  padding: var(--sp3);
  border-radius: var(--r2);
  cursor:pointer;
  transition: background var(--fast) var(--ease);
}
.dash-row:hover{ background: var(--surface-2); }
.dash-row + .dash-row{ border-top:1px solid var(--line-soft); }
.dash-row-main{ flex:1; min-width:0; }
.dash-row-ref{
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-row-meta{ font-size: var(--t-micro); color: var(--ink-3); margin-top:2px; }
.dash-row-amt{
  font-size: var(--t-small); font-weight: var(--w-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
  text-align:right; white-space:nowrap;
}

/* Agent dans un tableau */
.agent-cell{ display:inline-flex; align-items:center; gap: var(--sp2); }
.agent-av{
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  background: var(--surface-3); color: var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight: var(--w-bold);
}
.tid{
  font-size: var(--t-label);
  color: var(--brand-text);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════
   27. PARAMÈTRES
   ───────────────────────────────────────────────────────────
   Chaque réglage dit ce qu'il fait ET où il agit. Un champ
   « Numéro Orange Money » sans explication laisse l'admin
   deviner s'il s'agit du sien ou de celui du client.
   ═══════════════════════════════════════════════════════════ */
.srow{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp4);
  padding: var(--sp4);
  border-bottom:1px solid var(--line-soft);
}
.srow:last-child{ border-bottom:none; }
.srow > div:first-child{ flex:1; min-width:0; }
.slbl{
  font-size: var(--t-body); font-weight: var(--w-medium);
  color: var(--ink); line-height:1.3;
}
.sdesc{
  font-size: var(--t-micro); color: var(--ink-3);
  margin-top:3px; line-height:1.45;
}
.sinp{
  width:200px; max-width:46%; flex-shrink:0;
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--sp3);
  min-height:42px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-small);
  outline:none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.sinp:focus{ border-color: var(--brand); box-shadow: var(--focus-ring); }
.sinp::placeholder{ color: var(--ink-3); }

@media (max-width:640px){
  .srow{ flex-direction:column; align-items:stretch; gap: var(--sp3); }
  .sinp{ width:100%; max-width:none; }
}

/* Interrupteur */
.toggle-label{ display:flex; align-items:center; gap: var(--sp3); cursor:pointer; }
.tog{
  width:42px; height:24px; flex-shrink:0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border:1px solid var(--line);
  position:relative; cursor:pointer;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.tog::after{
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background: var(--surface);
  box-shadow: var(--e1);
  transition: transform var(--mid) var(--ease);
}
.tog.on{ background: var(--brand) !important; border-color: var(--brand); }
.tog.on::after{ transform: translateX(18px); }

/* Champ de saisie du taux */
.re-form{ padding: var(--sp4); }
.re-field{ margin-bottom: var(--sp4); }
.re-fl{
  font-size: var(--t-label); font-weight: var(--w-medium);
  color: var(--ink-2); margin-bottom: var(--sp2); display:block;
}
.re-inp{
  width:100%;
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--sp3) var(--sp4);
  min-height:46px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  outline:none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.re-inp:focus{ border-color: var(--brand); box-shadow: var(--focus-ring); }
.re-val{
  font-size: var(--t-lead); font-weight: var(--w-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.re-lbl{ font-size: var(--t-label); color: var(--ink-2); }
.rh-item{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp3);
  padding: var(--sp3);
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  margin-bottom: var(--sp2);
  font-size: var(--t-small);
}