/* ============================================================
   TOLO PAY — COUCHE DE FINITION (v22)
   ------------------------------------------------------------
   Ce fichier ne change QUE l'apparence.
   Le logo, l'icône et les couleurs de la marque sont conservés :
   --gold (#00BFA5) et --b2 (#003087) restent inchangés.
   Chargé APRÈS le style existant, il l'affine sans le remplacer.
   ============================================================ */

/* ── 1. FOND VIVANT (dégradé très discret) ────────────────── */
body{
  background:
    radial-gradient(1100px 620px at 8% -6%,  rgba(0,191,165,.055), transparent 62%),
    radial-gradient(950px  540px at 100% 4%, rgba(0,48,135,.045),  transparent 58%),
    linear-gradient(180deg, #F7F9FB 0%, #F2F5F8 100%) !important;
  background-attachment: fixed !important;
}

/* ── 2. LOGO LÉGÈREMENT AGRANDI (image inchangée) ─────────── */
.lsq{
  width:52px !important; height:52px !important;
  filter: drop-shadow(0 4px 14px rgba(0,191,165,.28)) !important;
}
.lnm{ font-size:20px !important; letter-spacing:3.4px !important; }
.lsb{ font-size:9.5px !important; letter-spacing:.6px; }

/* ── 3. EN-TÊTE : RESPIRATION ET ICÔNES ───────────────────── */
.hdr{ padding:16px 18px 2px !important; }
.lrow{ gap:13px !important; }
.hbtns{ gap:9px !important; }
.hbtn{
  width:38px !important; height:38px !important;
  border-radius:var(--r-sm) !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(0,0,0,.05) !important;
  box-shadow:var(--sh-1) !important;
  transition:transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s, background .16s !important;
  position:relative;
}
.hbtn:hover{ box-shadow:var(--sh-2) !important; }
.hbtn:active{ transform:scale(.96) !important; }

/* Pastille de notification sur l'icône cloche */
.hbtn .nbadge{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px;
  border-radius:9px; background:var(--red); color:#fff;
  font-size:9.5px; font-weight:800; line-height:17px; text-align:center;
  padding:0 4px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2);
}

/* ── 4. (l'apparence des cartes est définie dans theme.css) ──
   Ici on ne garde que ce qui relève de la structure. */

/* ── 5. CARTE DU TAUX ─────────────────────────────────────── */
.rcard{ padding:17px 19px 15px !important; }
.rlbl{ font-size:9px !important; letter-spacing:1.8px !important; font-weight:800 !important; }

/* La ligne principale : 1 RMB = XXXX GNF */
.rate-line{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:11px 0 3px;
}
.rate-line .rl-from{ font-size:16px; font-weight:800; color:var(--txt); }
.rate-line .rl-eq{ font-size:15px; color:var(--mut); }
.rate-line .rl-to{
  font-size:31px; font-weight:900; line-height:1;
  color:var(--gold); font-variant-numeric:tabular-nums;
  transition:opacity .25s;
}
.rate-line .rl-cur{ font-size:13px; font-weight:800; color:var(--mut); }
.rate-sub{ font-size:10.5px; color:var(--mut); margin-top:5px; }

/* Indicateur « à jour » avec point vert qui respire */
.rate-fresh{
  display:flex; align-items:center; gap:7px;
  font-size:10.5px; color:var(--mut); margin-top:11px;
}
.rate-dot{
  width:8px; height:8px; border-radius:50%; background:var(--grn); flex-shrink:0;
  box-shadow:0 0 0 2.5px rgba(46,125,50,.16);
}
.rate-dot.stale{ background:var(--yel); box-shadow:0 0 0 2.5px rgba(243,156,18,.16); }
/* Point d'état statique : un repère, pas une animation. */

/* Bouton Actualiser — nettement plus visible */
.rcbtn{
  background:linear-gradient(135deg, var(--gold), var(--g2)) !important;
  border:none !important; color:#fff !important;
  border-radius:var(--r-sm) !important;
  padding:9px 15px !important;
  font-family:inherit !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.4px !important;
  box-shadow:0 2px 8px rgba(0,191,165,.2) !important;
  display:inline-flex !important; align-items:center; gap:7px;
  transition:transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s !important;
}
.rcbtn:active{ transform:scale(.97) !important; box-shadow:0 1px 4px rgba(0,191,165,.3) !important; }
.rcbtn .rc-ico{ display:inline-block; font-size:13px; }
.rcbtn.spinning .rc-ico{ animation:tpSpin .75s linear infinite; }
@keyframes tpSpin{ to{ transform:rotate(360deg); } }

/* Le taux clignote doucement quand il vient d'être rafraîchi */
.rate-line .rl-to.refreshed{ animation:tpFlash .32s ease-out; }
@keyframes tpFlash{
  0%  { opacity:.45; }
  100%{ opacity:1; }
}

/* ── 6. TRANSITIONS ENTRE ÉCRANS ──────────────────────────── */
.panel{ animation:tpSlideIn .22s cubic-bezier(.4,0,.2,1); }
@keyframes tpSlideIn{
  from{ opacity:0; transform:translateY(5px); }
  to  { opacity:1; transform:translateY(0); }
}
.tab-pane-enter{ animation:tpFadeIn .26s ease-out; }
@keyframes tpFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ── 7. EFFET D'APPUI SUR LES BOUTONS ─────────────────────── */
.cta, .m-close-btn, .qa, .tbtn, .bni, .call-btn{
  transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s, opacity .15s !important;
}
.cta:active, .m-close-btn:active, .qa:active, .call-btn:active{ transform:scale(.99) !important; }
.bni:active, .tbtn:active{ transform:scale(.97) !important; }
.cta{ border-radius:var(--r-md) !important; box-shadow:0 2px 8px rgba(0,191,165,.2) !important; }

/* Pas d'ondulation : l'appui se traduit par une légère réduction
   d'échelle, suffisante et plus sobre. */

/* ── 8. BARRE D'ÉTAPES PLUS LISIBLE ───────────────────────── */
.sdot .sci{ transition:background .25s, transform .25s cubic-bezier(.4,0,.2,1); }
.sdot.on .sci{ transform:scale(1.06); }

/* ── 9. BADGES DE CONFIANCE ───────────────────────────────── */
.trust-row{
  display:flex; gap:7px; margin:11px 14px 0; overflow-x:auto;
  -ms-overflow-style:none; scrollbar-width:none; padding-bottom:2px;
}
.trust-row::-webkit-scrollbar{ display:none; }
.trust{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  border-radius:11px; padding:8px 11px;
}
.trust-ico{ font-size:13px; line-height:1; }
.trust-txt{ font-size:10px; font-weight:700; color:var(--txt); white-space:nowrap; }
.trust-sub{ font-size:8.5px; color:var(--mut); }

/* ── 10. BANNIÈRE D'ACCUEIL ───────────────────────────────── */
.hero{
  margin:12px 14px 0; border-radius:20px; padding:20px 19px; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; right:-38px; top:-38px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.09);
}
.hero-t{ font-size:17px; font-weight:900; line-height:1.32; position:relative; }
.hero-s{ font-size:11.5px; opacity:.9; margin-top:7px; position:relative; line-height:1.5; }

.why{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:11px 14px 0; }
.why-i{
  border-radius:14px; padding:12px;
}
.why-e{ font-size:17px; }
.why-t{ font-size:12px; font-weight:800; color:var(--txt); margin-top:5px; }
.why-d{ font-size:10px; color:var(--mut); margin-top:2px; line-height:1.45; }

/* ── 11. FILTRES D'HISTORIQUE ─────────────────────────────── */
.hfilter{
  border-radius:15px; padding:11px; margin-bottom:11px;
}
.hsearch{ position:relative; margin-bottom:9px; }
.hsearch input{
  width:100%; border:1px solid var(--bor2); border-radius:11px;
  padding:10px 11px 10px 34px; font-family:inherit; font-size:13px;
  background:var(--s2); color:var(--txt); outline:none;
  transition:border-color .18s, background .18s;
}
.hsearch input:focus{ border-color:var(--gold); background:#fff; }
.hsearch .hs-ico{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--mut); pointer-events:none;
}
.hchips{ display:flex; gap:6px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.hchips::-webkit-scrollbar{ display:none; }
.hchip{
  flex-shrink:0; border:1px solid var(--bor2); background:var(--s2);
  border-radius:20px; padding:6px 12px; font-family:inherit; font-size:11px;
  font-weight:700; color:var(--mut); cursor:pointer;
  transition:all .18s;
}
.hchip.on{ background:var(--gold); border-color:var(--gold); color:#fff; }
.hchip:active{ transform:scale(.97); }
.hcount{ font-size:10.5px; color:var(--mut); margin-top:8px; }

/* ── 12. CENTRE DE NOTIFICATIONS ──────────────────────────── */
.notif{  /* apparition sobre */
  display:flex; gap:11px; padding:13px;
  border-radius:14px; margin-bottom:8px;
  animation:tpSlideIn .2s ease-out;
}
.notif.unread{ border-left:3px solid var(--gold); background:rgba(0,191,165,.04); }
.notif-ico{ font-size:19px; line-height:1; flex-shrink:0; }
.notif-b{ flex:1; min-width:0; }
.notif-t{ font-size:12.5px; font-weight:800; color:var(--txt); }
.notif-d{ font-size:11px; color:var(--mut); margin-top:3px; line-height:1.45; }
.notif-w{ font-family:monospace; font-size:9px; color:var(--mut); margin-top:5px; }

/* ── 13. PROFIL ───────────────────────────────────────────── */
.pf-head{ display:flex; align-items:center; gap:13px; margin-bottom:15px; }
.pf-ava{
  width:62px; height:62px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--b2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; font-weight:900;
  overflow:hidden; position:relative; cursor:pointer;
  box-shadow:var(--sh-2);
}
.pf-ava img{ width:100%; height:100%; object-fit:cover; }
.pf-cam{
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:9px;
  text-align:center; padding:3px 0;
}
.pf-nm{ font-size:16px; font-weight:800; color:var(--txt); }
.pf-ph{ font-family:monospace; font-size:11px; color:var(--mut); margin-top:2px; }
.pf-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 0; border-top:1px solid var(--bor2); font-size:12.5px;
}
.pf-k{ color:var(--mut); }
.pf-v{ font-weight:700; color:var(--txt); }
.kyc-pill{
  font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px;
}
.kyc-0{ background:rgba(192,57,43,.1);  color:var(--red); }
.kyc-1{ background:rgba(243,156,18,.12); color:var(--yel); }
.kyc-2{ background:rgba(46,125,50,.1);  color:var(--grn); }
.kyc-3{ background:rgba(0,191,165,.12); color:var(--gold); }

/* ── 14. WALLET — ACTIVITÉ (pas un solde) ─────────────────── */
.w-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px; }
.w-cell{
  border-radius:15px; padding:14px;
}
.w-lbl{ font-size:9.5px; font-weight:800; color:var(--mut); letter-spacing:.7px; }
.w-val{ font-size:19px; font-weight:900; color:var(--txt); margin-top:5px; font-variant-numeric:tabular-nums; }
.w-val.gnf{ color:var(--b2); }
.w-val.rmb{ color:var(--gold); }
.w-sub{ font-size:9.5px; color:var(--mut); margin-top:3px; }

/* ── 16. PERFORMANCE ET CONFORT MOBILE ────────────────────── */
*{ -webkit-tap-highlight-color:transparent; }
img{ content-visibility:auto; }
.panel:not(.on){ content-visibility:auto; contain-intrinsic-size:0 420px; }

/* Encoche iPhone */
@supports(padding:max(0px)){
  .hdr{ padding-top:max(16px, env(safe-area-inset-top)) !important; }
  .bnav{ padding-bottom:max(6px, env(safe-area-inset-bottom)) !important; }
}

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 17. RESPONSIVE — DU PETIT ANDROID À LA TABLETTE ──────── */

/* Très petits écrans (Android d'entrée de gamme, ~320-360 px) */
@media (max-width: 360px){
  .lsq{ width:44px !important; height:44px !important; }
  .lnm{ font-size:17px !important; letter-spacing:2.4px !important; }
  .hbtn{ width:34px !important; height:34px !important; }
  .hbtns{ gap:6px !important; }
  .rate-line .rl-to{ font-size:25px; }
  .rate-line .rl-from{ font-size:14px; }
  .hero{ padding:16px 15px; }
  .hero-t{ font-size:15px; }
  .why{ grid-template-columns:1fr; }
  .w-grid{ grid-template-columns:1fr 1fr; gap:7px; }
  .w-val{ font-size:16px; }
  .trust-txt{ font-size:9.5px; }
  .sdot .sdlbl{ font-size:7px; }
}

/* Écran étroit mais courant (360-400 px) */
@media (min-width:361px) and (max-width:400px){
  .rate-line .rl-to{ font-size:28px; }
}

/* Grands téléphones et petites tablettes : on centre le contenu
   au lieu de l'étirer sur toute la largeur. */
@media (min-width: 620px){
  .wrap, #AUTH .auth-box{
    max-width:560px; margin-left:auto; margin-right:auto;
  }
  .modal{ max-width:520px; margin-left:auto; margin-right:auto; }
  .why{ grid-template-columns:repeat(4,1fr); }
  .w-grid{ grid-template-columns:repeat(4,1fr); }
  .hero-t{ font-size:19px; }
}

/* Tablette */
@media (min-width: 900px){
  .wrap{ max-width:680px; }
  .hero{ padding:26px 24px; }
  .hero-t{ font-size:22px; }
  .rate-line .rl-to{ font-size:36px; }
}

/* Écran bas et large (téléphone en paysage) */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ padding:13px 15px; }
  .hero-s{ display:none; }
  .spark{ display:none; }
}

/* ── 18. PERFORMANCE SUR APPAREILS MODESTES ───────────────── */

/* Le défilement reste fluide même avec beaucoup de transactions */
#txList, #notifList{ contain:layout style; }

/* On évite de repeindre le fond à chaque défilement sur Android :
   background-attachment:fixed est coûteux sur ces appareils. */
@media (hover: none) and (pointer: coarse){
  body{ background-attachment:scroll !important; }
}

/* Les zones hors écran ne sont pas calculées */
.mbg:not(.on){ content-visibility:auto; }

/* Cibles tactiles d'au moins 44 px — recommandation Apple et Google */
.hbtn, .hchip, .bni, .tbtn{ min-height:34px; }
.cta, .m-close-btn{ min-height:46px; }

/* Empêche le zoom automatique d'iOS sur les champs (< 16 px) */
@supports (-webkit-touch-callout: none){
  input, select, textarea{ font-size:16px !important; }
  .hsearch input{ font-size:16px !important; }
}

/* ── 20. DASHBOARD SUR MOBILE ─────────────────────────────
   Le dashboard est conçu pour un écran large. Sur téléphone,
   la sidebar occupait toute la place et les tableaux
   débordaient. On adapte sans changer la structure.
   ────────────────────────────────────────────────────────── */
@media (max-width: 820px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:400;
    width:250px; transform:translateX(-100%);
    transition:transform .24s var(--ease);
    overflow-y:auto;
  }
  .sidebar.tp-open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  .main{ margin-left:0 !important; width:100% !important; }
  .topbar{ position:sticky; top:0; z-index:300; }

  /* Les tableaux défilent horizontalement au lieu de déborder */
  .tbl{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .kgrid, .vgrid{ grid-template-columns:1fr 1fr !important; gap:9px !important; }
  .pmgrid{ grid-template-columns:1fr 1fr !important; }
  .page{ padding:12px !important; }
  .pg-title{ font-size:17px !important; }
}

@media (max-width: 480px){
  .kgrid, .vgrid{ grid-template-columns:1fr !important; }
  .kpi-v{ font-size:20px !important; }
  .pmgrid{ grid-template-columns:1fr !important; }
}

/* Voile derrière la sidebar ouverte */
.tp-sb-veil{
  position:fixed; inset:0; z-index:399; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .24s;
}
.tp-sb-veil.on{ opacity:1; pointer-events:auto; }

/* Bouton d'ouverture du menu — visible seulement sur petit écran */
.tp-burger{
  display:none; width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bor); color:var(--txt);
  font-size:17px; cursor:pointer; align-items:center; justify-content:center;
  flex-shrink:0; margin-right:10px;
}
@media (max-width: 820px){ .tp-burger{ display:flex; } }