*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root{
  --ink:      #0D0D0D;
  --ink2:     #1A1A1A;
  --forest:   #0A4A2E;
  --forest2:  #0F5C38;
  --green:    #16A34A;
  --green2:   #22C55E;
  --green3:   #BBF7D0;
  --gold:     #D4A017;
  --gold2:    #F0C040;
  --gold3:    #FDE68A;
  --gold-txt: #8A6508;
  --bg:       #FAF7F0;
  --bg2:      #F2EDE3;
  --bg3:      #E8E0D0;
  --card:     #FFFFFF;
  --txt:      #1A1A1A;
  --txt2:     #4A5240;
  --txt3:     #6B7464;
  --border:   rgba(0,0,0,.07);
  --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --fd: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --fm: 'SF Mono', Monaco, 'Roboto Mono', Consolas, monospace;
  --sat: env(safe-area-inset-top,0px);
  --sab: env(safe-area-inset-bottom,0px);
}
html.dark{
  --bg:#0F1010;--bg2:#181A1B;--bg3:#222426;
  --card:#141516;--txt:#E2E5E2;--txt2:#7E8A7C;--txt3:#7A8478;
  --border:rgba(255,255,255,.08);
  color-scheme:dark;
}
html.dark body{background:linear-gradient(135deg,#010504 0%,#050D06 40%,#040B05 100%)}
html.dark .shell{background:#060808}
html.dark .shell-inner{background:var(--bg)}
html.dark .desktop-side{color:#E2E5E2}
/* Transitions pour basculement fluide */
.shell-inner,.sc,.card,.bnav,.snav,.modal-box,.btn-ghost,.notif-item,.mi,.inp,.back-btn,.pill,.bud-card,.bill-item{transition:background-color .25s,border-color .25s,color .2s}
/* Boutons fantômes en mode sombre */
html.dark .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--txt2)}
html.dark .btn-ghost svg{stroke:var(--txt2)}
/* Icônes de menu en mode sombre */
html.dark .mi-ic[style*="rgba(0,0,0,.05)"]{background:rgba(255,255,255,.06) !important}
/* Inputs en dark */
html.dark .inp{background:var(--bg2);color:var(--txt);border-color:var(--border)}
html.dark .inp:focus{border-color:rgba(22,163,74,.4);background:var(--card)}
html.dark .srch{background:var(--bg2)}
html.dark .srch input{color:var(--txt)}
html.dark .pill{background:var(--card);color:var(--txt);border-color:var(--border)}
html.dark .pill.on{background:rgba(212,160,23,.15);border-color:var(--gold);color:var(--gold2)}
html.dark .modal-box{background:var(--card)!important;color:var(--txt)!important;border-color:var(--border)!important}
html.dark .modal-title{color:var(--txt)}
html.dark .nk{background:var(--bg2);color:var(--txt)}
html.dark .amt-box{background:var(--card);border-color:var(--border)}
html.dark .amt-val{color:var(--txt)}
html.dark .c-name{color:var(--txt)}
html.dark .bnav{background:var(--card);border-top-color:var(--border)}
html.dark .recv-card{background:var(--card);border-color:var(--border)}
html.dark .recv-name{color:var(--txt)}
html.dark .recv-flow-step{background:var(--card);border-color:var(--border)}
html.dark .recv-flow-tt{color:var(--txt)}
/* Notifications unread */
html.dark .notif-item.unread{background:rgba(212,160,23,.05);border-left:3px solid rgba(212,160,23,.4)}
html.dark .notif-item{border-bottom-color:var(--border)}
/* Skel en dark */
html.dark .skel{background:linear-gradient(90deg,#1e2022 25%,#2a2d2f 50%,#1e2022 75%);background-size:200% 100%}
/* Scan frame dark */
html.dark .qr-vf{border-color:rgba(212,160,23,.7)}
/* Category items dark */
html.dark .cat-item{background:var(--card);border:1px solid var(--border)}
/* mi-tag dark */
html.dark .mi-tag.gold{background:rgba(212,160,23,.15);color:var(--gold2)}
html.dark .mi-tag.red{background:rgba(220,38,38,.12);color:#f87171}
/* ── DESKTOP DARK MODE ── */
html.dark .gp-layout,html.dark .gp-content{background:var(--bg)}
html.dark .gp-topbar{background:var(--card);border-bottom-color:var(--border)}
html.dark .gp-topbar-title{color:var(--txt)}
html.dark .gp-topbar-greet{color:var(--txt3)}
html.dark .gp-topbar-notif{background:rgba(255,255,255,.06)}
html.dark .gp-topbar-notif svg{stroke:var(--txt2)}
html.dark .gp-notif-badge{border-color:var(--card)}
html.dark .gp-chart-card,html.dark .gp-activity-card{background:var(--card);border-color:var(--border)}
html.dark .gp-section-title{color:var(--txt)}
html.dark .gp-bar-lbl,html.dark .gp-bar-val{color:var(--txt3)}
html.dark .gp-act-item{border-bottom-color:var(--border)}
html.dark .gp-act-item:hover{background:rgba(255,255,255,.04)}
html.dark .gp-act-name{color:var(--txt)}
html.dark .gp-nav-item[data-tip]::before{background:var(--bg3);color:var(--txt);box-shadow:0 4px 16px rgba(0,0,0,.5)}
html.dark #gp-modal-box{background:var(--card);color:var(--txt)}
html.dark #gp-content [style*="background:#fff"]{background:var(--card)!important;border-color:var(--border)!important}
html.dark #gp-content [style*="background:#FAFAF8"]{background:var(--bg2)!important}
html.dark #gp-content [style*="background:#F5F2EA"]{background:var(--bg2)!important}
html.dark #gp-content [style*="color:#1A1A1A"]{color:var(--txt)!important}
html.dark #gp-content [style*="color:#9A9A9A"]{color:var(--txt3)!important}
html.dark #gp-content [style*="border:1px solid rgba(0,0,0,.05)"]{border-color:var(--border)!important}
html,body{height:100%;font-family:var(--f);overflow:hidden;overscroll-behavior:none}
/* Chrome Android grossit le texte de lui-même (« font boosting ») sur
   certains blocs : les mises en page se cassaient sur Android seulement. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest2) 40%,#1A5C38 100%);
  display:flex;align-items:center;justify-content:center;
}

.shell{
  width:min(390px,100vw);
  height:min(844px,100vh);
  background:var(--ink);
  border-radius:clamp(0px,calc((100vw - 390px)*100),46px);
  padding:clamp(0px,calc((100vw - 390px)*100),10px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px rgba(0,0,0,.5);
  position:relative;overflow:hidden;flex-shrink:0;
}
.shell-inner{
  width:100%;height:100%;background:var(--bg);
  border-radius:clamp(0px,calc((100vw - 390px)*100),37px);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
}
.island{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:112px;height:30px;background:var(--ink);border-radius:100px;z-index:100;
}
.desktop-side{display:none}

/* ── Mobile : plein écran ────────────────────────────
   Le critère n'est pas que la largeur : un téléphone tourné fait 740x360 et
   tombait dans le gabarit tablette, donc une carte de 480px flottant au
   milieu du paysage. Un écran court est un téléphone, pas une tablette. */
@media(max-width:599px), (max-height:520px) and (max-width:1279px){
  html,body{height:100%;height:var(--vvh,100dvh);overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;width:100%}
  body{align-items:stretch;justify-content:stretch;background:var(--bg)}
  .shell{width:100%;height:100%;height:var(--vvh,100dvh);border-radius:0;padding:0;box-shadow:none}
  .shell-inner{border-radius:0}
  .island{display:none}
}

/* ── Tablette 600-1279px : shell centré, plus large ── */
@media(min-width:600px) and (max-width:1279px) and (min-height:521px){
  body{padding:16px;background:#E5E2D8;display:flex;align-items:center;justify-content:center}
  html.dark body{background:#0A0B0B}
  .shell{
    width:min(480px,calc(100vw - 40px));
    height:min(calc(100vh - 32px),860px);
    border-radius:38px;
    padding:7px;
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 28px 70px rgba(0,0,0,.55);
  }
  .shell-inner{border-radius:31px}
  .island{display:none}
}

/* ── PC ≥1280px : handled in gp-layout CSS block above ── */

.sc{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);border-radius:inherit;
  overflow:hidden;
  transform:translateX(100%);opacity:0;pointer-events:none;z-index:1;
  /* 0,26 s : à 0,38 s, avec la latence du téléphone, un changement d'écran
     prenait plus de 600 ms (mesuré, Android moyen simulé). */
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;
}
.sc.on{transform:translateX(0);opacity:1;pointer-events:all;z-index:10}
.sc.out{transform:translateX(-25%);opacity:0;z-index:2}
/* Retour : l'écran quitté repart vers la droite PAR-DESSUS le précédent. */
.sc.sc-retour{transform:translateX(100%);opacity:1;z-index:11}
/* Onglets de la barre du bas : fondu enchaîné, sans glissement. */
.sc.sc-fondu{transform:none;opacity:0;z-index:2}
@media (prefers-reduced-motion: reduce){
  .sc, .sc.out, .sc.sc-retour{ transform: none; }
  .sc.sc-retour{ opacity: 0; }
  .sc{ transition: opacity .15s; }
}
.sc-dark{background:var(--forest)}

.sbar{
  padding:calc(var(--sat) + 12px) 20px 6px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.sbar-t{font-family:var(--fm);font-size:.7rem;font-weight:500;color:var(--txt)}
.sbar.dk .sbar-t{color:rgba(255,255,255,.8)}
.sbar-r{display:flex;gap:5px;align-items:center}
@media(max-width:1279px){
  .sbar{padding:var(--sat) 0 0;pointer-events:none}
  .sbar-t,.sbar-r{display:none}
}

.bnav{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-around;
  background:var(--card);padding:10px 6px calc(12px + var(--sab));
  border-top:1px solid var(--border);z-index:20;
}
.bt{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 12px;border-radius:14px;cursor:pointer;transition:.15s;min-width:54px;
}
.bt.on{background:rgba(10,74,46,.1)}
.bt svg{width:22px;height:22px;stroke-width:1.8;fill:none;transition:.15s}
.bt.on svg{stroke:var(--forest)}
.bt:not(.on) svg{stroke:var(--txt3)}
.bt-lbl{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;transition:.15s}
.bt.on .bt-lbl{color:var(--forest)}
.bt:not(.on) .bt-lbl{color:var(--txt3)}
.bt-qr{
  width:54px;height:54px;border-radius:50%;margin-top:-22px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(212,160,23,.5);cursor:pointer;transition:.18s;
}
.bt-qr:active{transform:scale(.92)}
.bt-qr svg{width:24px;height:24px;stroke:var(--forest);stroke-width:2.2;fill:none}

.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.p16{padding:16px}
.p18{padding:18px}
.g10{display:flex;flex-direction:column;gap:10px}
.g14{display:flex;flex-direction:column;gap:14px}
.g18{display:flex;flex-direction:column;gap:18px}
.lbl{font-size:.6rem;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.14em}

.card{background:var(--card);border-radius:18px;border:1px solid var(--border);overflow:hidden}
.card-p{padding:16px 18px}

.snav{
  display:flex;align-items:center;gap:14px;padding:12px 18px 14px;
  background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;
}
.snav.dk{background:transparent;border-color:rgba(255,255,255,.1)}
.snav-t{font-size:.95rem;font-weight:800;color:var(--txt)}
.snav.dk .snav-t{color:#fff}
.snav-a{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--forest);cursor:pointer}
.snav.dk .snav-a{color:var(--gold2)}

.back-btn{
  width:38px;height:38px;border-radius:50%;background:var(--bg2);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:.15s;
}
.back-btn:active{transform:scale(.9)}
.back-btn svg{width:17px;height:17px;stroke:var(--txt);stroke-width:2.2;fill:none}
.back-btn.dk{background:rgba(255,255,255,.15)}
.back-btn.dk svg{stroke:#fff}

.btn{
  width:100%;padding:16px 20px;border:none;border-radius:16px;
  font-family:var(--f);font-size:.95rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;transition:.18s;letter-spacing:.01em;
}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;stroke-width:2.5;fill:none}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#063620;box-shadow:0 6px 24px rgba(212,160,23,.35);
}
.btn-gold svg{stroke:#063620}
.btn-gold:hover{box-shadow:0 10px 32px rgba(212,160,23,.5)}
.btn-forest{
  background:linear-gradient(135deg,var(--forest),var(--forest2));
  color:#fff;box-shadow:0 6px 24px rgba(10,74,46,.3);
}
.btn-forest svg{stroke:#fff}
.btn-ghost{background:rgba(0,0,0,.05);border:1.5px solid rgba(0,0,0,.1);color:var(--txt2)}
.btn-ghost svg{stroke:var(--txt2)}
.btn-danger{background:rgba(220,38,38,.07);border:1.5px solid rgba(220,38,38,.15);color:#dc2626}
.btn-danger svg{stroke:#dc2626}
.btn-sm{padding:11px 18px;border-radius:12px;font-size:.82rem;width:auto}

/* font-size verrouillé à 16px minimum sur tous les champs : en dessous, Safari
   iOS zoome automatiquement l'écran au focus (et re-zoome arrière au blur) —
   c'est la cause du "ça zoome"/"l'écran bouge" au clavier. !important pour
   primer sur les style="font-size:…" en ligne dispersés dans les écrans. */
input,select,textarea{font-size:16px!important}

.inp{
  width:100%;padding:15px 16px;
  background:var(--bg2);border:2px solid transparent;border-radius:14px;
  font-family:var(--f);font-size:16px;color:var(--txt);
  outline:none;transition:.2s;
}
.inp:focus{border-color:rgba(10,74,46,.3);background:var(--card)}
.inp::placeholder{color:var(--txt3)}
textarea.inp{resize:none;height:70px;line-height:1.6}

.srch{
  display:flex;align-items:center;gap:12px;
  background:var(--bg2);border-radius:14px;
  padding:14px 16px;border:2px solid transparent;transition:.2s;
}
.srch:focus-within{border-color:rgba(10,74,46,.25);background:var(--card)}
.srch svg{width:17px;height:17px;stroke:var(--txt3);stroke-width:2;fill:none;flex-shrink:0}
.srch input{border:none;outline:none;background:none;font-family:var(--f);font-size:.88rem;color:var(--txt);flex:1}
.srch input::placeholder{color:var(--txt3)}

.tx{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s;
}
.tx:last-child{border-bottom:none}
.tx:active{background:rgba(0,0,0,.025)}
.tx-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tx-av svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.tx-info{flex:1;min-width:0}
.tx-name{font-size:.82rem;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-meta{font-size:.62rem;color:var(--txt3);margin-top:2px;font-family:var(--fm)}
.tx-right{text-align:right;flex-shrink:0}
.tx-amt{font-size:.85rem;font-weight:800;font-family:var(--fd)}
.tx-amt.cr{color:#15803d}
.tx-amt.db{color:#dc2626}
.tx-amt.mut{color:#9aa0a6}
.tx-tag{font-size:.55rem;color:var(--txt3);margin-top:2px;font-family:var(--fm)}
.tx-meta .tx-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-weight:700;letter-spacing:.02em}
.tx-meta .tx-tag.fail{background:rgba(220,38,38,.12);color:#dc2626}
.tx-meta .tx-tag.pend{background:rgba(212,160,23,.14);color:#a16207}

.overlay{
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(10,74,46,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;z-index:200;opacity:0;pointer-events:none;transition:opacity .22s;
}
.overlay.on{opacity:1;pointer-events:all}
.ov-ring{
  width:86px;height:86px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 50px rgba(212,160,23,.5);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.ov-ring svg{width:38px;height:38px;stroke:var(--forest);stroke-width:2.8;fill:none}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.ov-title{font-family:var(--fd);font-size:1.35rem;font-weight:900;color:#fff;text-align:center}
.ov-sub{font-size:.78rem;color:rgba(255,255,255,.55);text-align:center;max-width:220px;line-height:1.75}
.ov-btn{
  margin-top:4px;padding:14px 44px;border:none;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  font-family:var(--f);font-size:.92rem;font-weight:800;color:var(--forest);
  cursor:pointer;transition:.15s;
}
.ov-btn:active{transform:scale(.96)}

.toast{
  position:fixed;bottom:90px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--txt);color:#fff;
  padding:11px 22px;border-radius:12px;
  font-size:.78rem;font-weight:700;
  /* Un message long passe à la ligne au lieu de déborder des deux côtés. */
  width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.35;
  opacity:0;transition:all .22s;pointer-events:none;z-index:7000; /* au-dessus de la bulle du support */
  font-family:var(--fm);letter-spacing:.02em;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#dc2626}
.toast.inf{background:var(--forest)}

.modal{
  position:absolute;inset:0;border-radius:inherit;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:300;opacity:0;pointer-events:none;transition:opacity .22s;
}
.modal.on{opacity:1;pointer-events:all}
.modal-box{
  background:var(--card);border-radius:24px 24px 0 0;
  padding:20px 20px calc(26px + var(--sab));width:100%;
  transform:translateY(50px);transition:transform .28s cubic-bezier(.25,.8,.25,1);
  display:flex;flex-direction:column;gap:14px;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal.on .modal-box{transform:translateY(0)}
.modal-handle{width:44px;height:4px;background:var(--bg3);border-radius:100px;margin:0 auto 6px}
.modal-title{font-size:.95rem;font-weight:800;color:var(--txt);text-align:center}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:10px 16px;border-radius:12px;
  border:2px solid var(--border);background:var(--card);
  font-size:.8rem;font-weight:700;color:var(--txt);cursor:pointer;transition:.14s;
}
.pill:active{transform:scale(.93)}
.pill.on{border-color:var(--gold);background:rgba(212,160,23,.08);color:var(--gold-txt)}

.install{
  position:absolute;top:0;left:0;right:0;
  background:linear-gradient(135deg,var(--forest),var(--forest2));
  padding:14px 18px calc(14px + var(--sat));
  display:flex;align-items:center;gap:12px;
  z-index:400;transform:translateY(-100%);transition:transform .3s;
}
.install.on{transform:translateY(0)}
.install-txt{flex:1;font-size:.74rem;color:rgba(255,255,255,.85);line-height:1.6}
.install-txt strong{color:#fff;display:block;font-size:.82rem}
.install-btn{
  padding:9px 16px;background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:none;border-radius:10px;font-family:var(--f);font-size:.74rem;font-weight:800;
  color:var(--forest);cursor:pointer;flex-shrink:0;
}
.install-x{
  width:30px;height:30px;background:rgba(255,255,255,.12);
  border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.install-x svg{width:13px;height:13px;stroke:rgba(255,255,255,.7);stroke-width:2;fill:none}

/* ── PIN ────────────────────────────── */
#sc-pin{background:linear-gradient(155deg,var(--forest) 0%,var(--ink) 60%)}
.pin-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:max(calc(var(--sat) + 20px),36px) 28px 36px;gap:36px;
}
.pin-logo{
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 36px rgba(212,160,23,.45);
}
.pin-logo img{width:40px;height:40px;object-fit:contain}
.pin-brand{text-align:center}
.pin-title{font-family:var(--fd);font-size:1.7rem;font-weight:900;color:#fff;font-style:italic}
.pin-sub{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:6px;font-family:var(--fm)}
.pin-sub strong{color:var(--gold2)}
.pin-dots{display:flex;gap:20px}
.pin-dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);background:transparent;transition:.18s;
}
.pin-dot.fill{background:var(--gold2);border-color:var(--gold2)}
.pin-dot.err{background:#ef4444;border-color:#ef4444;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.pin-k{
  height:70px;border-radius:18px;border:none;
  background:rgba(255,255,255,.09);
  font-family:var(--f);font-size:1.45rem;font-weight:700;color:#fff;
  cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center;
}
.pin-k:active{background:rgba(255,255,255,.2);transform:scale(.93)}
.pin-k svg{width:22px;height:22px;stroke:rgba(255,255,255,.5);stroke-width:2;fill:none}
.pin-skip{font-size:.74rem;color:rgba(255,255,255,.3);cursor:pointer;font-family:var(--fm);text-align:center;text-decoration:underline;text-underline-offset:3px}

/* ── HOME ───────────────────────────── */
.home-hdr{
  background:linear-gradient(155deg,var(--forest) 0%,var(--forest2) 60%,#1A6B40 100%);
  flex-shrink:0;padding:0 20px 22px;position:relative;overflow:hidden;
}
.home-hdr::after{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,160,23,.12),transparent 70%);
  right:-60px;top:-90px;pointer-events:none;
}
.home-topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 0 16px}
.home-greet{font-size:.56rem;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;font-family:var(--fm)}
.home-name{font-size:.98rem;font-weight:800;color:#fff;margin-top:3px}
.home-right{display:flex;gap:10px;align-items:center}
.notif-btn{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;
  position:relative;transition:.15s;
}
.notif-btn:active{transform:scale(.92)}
.notif-btn svg{width:19px;height:19px;stroke:rgba(255,255,255,.85);stroke-width:2;fill:none}
.notif-dot{
  position:absolute;top:6px;right:6px;
  width:9px;height:9px;border-radius:50%;
  background:var(--gold2);border:2px solid var(--forest);
}
.home-av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--forest2));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:1rem;font-weight:900;color:#fff;
  border:2.5px solid rgba(255,255,255,.18);cursor:pointer;transition:.15s;
}
.home-av:active{transform:scale(.92)}

.bal-card{
  background:linear-gradient(135deg,#0C5836 0%,#0A3F28 100%);
  border-radius:22px;padding:20px 22px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px rgba(4,20,12,.4);border:1px solid rgba(240,192,64,.22);
}
.bal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.bal-card::after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,64,.12),transparent 70%);bottom:-46px;right:-26px;pointer-events:none}
.bal-top{display:flex;align-items:flex-start;justify-content:space-between}
.bal-lbl{font-size:.56rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.12em;font-family:var(--fm)}
.bal-eye{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bal-eye svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);stroke-width:2;fill:none}
.bal-amt{font-family:var(--fd);font-size:2.1rem;font-weight:900;color:#fff;line-height:1;margin:8px 0 4px;letter-spacing:-.025em}
.bal-amt .cur{font-size:1rem;font-weight:600;color:rgba(255,255,255,.6)}
.bal-sub{font-size:.58rem;color:rgba(255,255,255,.5);font-family:var(--fm)}
.bal-badge{
  display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  padding:4px 10px;background:rgba(255,255,255,.1);border-radius:7px;
  font-family:var(--fm);font-size:.55rem;color:rgba(255,255,255,.6);
}
.bal-badge svg{width:11px;height:11px;stroke:var(--gold2);stroke-width:2.5;fill:none}

/* ══════════════════════════════════════
   QUICK ACTIONS — NOUVEAU DESIGN
   Envoyer + Recevoir en premier plan
   Scanner / Payer / Tontine en secondaire
   ══════════════════════════════════════ */
.qa-section{
  background:var(--card);
  flex-shrink:0;
  padding:14px 14px 0;
  border-bottom:1px solid var(--border);
}

/* Rangée 1 : Envoyer + Recevoir — grands boutons mis en évidence */
.qa-primary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}

.qa-cta{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:9px;padding:12px 14px;border-radius:14px;cursor:pointer;transition:.18s;
  border:none;position:relative;overflow:hidden;min-height:48px;
}
.qa-cta:active{transform:scale(.96)}
.qa-cta-send{background:linear-gradient(145deg,var(--gold) 0%,var(--gold2) 60%,#fcd34d 100%);box-shadow:0 5px 18px rgba(212,160,23,.38)}
.qa-cta-recv{background:linear-gradient(145deg,var(--forest) 0%,var(--forest2) 60%,#1A6B40 100%);box-shadow:0 5px 18px rgba(10,74,46,.35)}
.qa-cta-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qa-cta-send .qa-cta-ic{background:rgba(0,0,0,.12)}
.qa-cta-recv .qa-cta-ic{background:rgba(255,255,255,.15)}
.qa-cta-ic svg{width:16px;height:16px;stroke-width:2.4;fill:none}
.qa-cta-send .qa-cta-ic svg{stroke:var(--forest)}
.qa-cta-recv .qa-cta-ic svg{stroke:#fff}
.qa-cta-lbl{font-size:.8rem;font-weight:900;letter-spacing:.01em}
.qa-cta-send .qa-cta-lbl{color:var(--forest)}
.qa-cta-recv .qa-cta-lbl{color:#fff}
.qa-cta-sub{display:none}

/* Rangée 2 : Scanner / Payer / Tontine — boutons secondaires plus discrets */
.qa-secondary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0 0 14px;
  border-top:1px solid var(--border);
  padding-top:12px;
}

.qa-sec-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:10px 6px;
  border-radius:14px;
  cursor:pointer;
  transition:.15s;
  background:var(--bg2);
}
.qa-sec-btn:active{transform:scale(.92);background:var(--bg3)}

.qa-sec-ic{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.qa-sec-ic svg{width:19px;height:19px;stroke-width:1.9;fill:none}

.qa-sec-lbl{
  font-size:.56rem;
  font-weight:800;
  color:var(--txt2);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Coffre strip */
.cstrip{
  margin:14px 16px 0;
  background:linear-gradient(135deg,var(--forest),var(--forest2));
  border-radius:18px;padding:15px 18px;
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(212,160,23,.2);cursor:pointer;transition:.18s;flex-shrink:0;
}
.cstrip:active{transform:scale(.98)}
.cstrip:hover{border-color:rgba(212,160,23,.4)}
.cstrip-ic{width:40px;height:40px;border-radius:12px;background:rgba(212,160,23,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cstrip-ic svg{width:18px;height:18px;stroke:var(--gold2);stroke-width:2;fill:none}
.cstrip-body{flex:1}
.cstrip-t{font-size:.74rem;font-weight:800;color:var(--gold2)}
.cstrip-s{font-size:.6rem;color:rgba(255,255,255,.42);margin-top:2px}
.cstrip-val{font-family:var(--fd);font-size:1.05rem;font-weight:900;color:var(--gold2);flex-shrink:0}
.cstrip-arr svg{width:15px;height:15px;stroke:rgba(255,255,255,.3);stroke-width:2;fill:none;margin-left:8px}

.row-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;flex-shrink:0}
.row-hdr-t{font-size:.62rem;font-weight:800;color:var(--txt);text-transform:uppercase;letter-spacing:.1em}
.row-hdr-l{font-size:.65rem;font-weight:700;color:var(--forest);cursor:pointer}

/* ── SEND ───────────────────────────── */
.contacts-row{display:flex;gap:12px;overflow-x:auto;padding:2px 0 12px}
.contacts-row::-webkit-scrollbar{display:none}
.contact{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;min-width:62px;transition:.14s;flex-shrink:0}
.contact:active{transform:scale(.88)}
.c-av{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:1rem;font-weight:900;color:#fff;
  border:3px solid transparent;transition:.18s;position:relative;
}
.c-av.sel{border-color:var(--green2)}
.c-av.sel::after{content:'';position:absolute;bottom:0;right:0;width:16px;height:16px;border-radius:50%;background:var(--green2);border:2.5px solid var(--card)}
.c-name{font-size:.55rem;font-weight:700;color:var(--txt);text-align:center}
.c-invite{font-size:.5rem;font-weight:700;color:var(--gold2,#C8960A);text-align:center;margin-top:-3px}

.rec-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:rgba(22,163,74,.07);border-radius:16px;border:2px solid rgba(22,163,74,.2);
}
.rec-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.95rem;font-weight:900;color:#fff}
.rec-name{font-size:.85rem;font-weight:800;color:var(--txt)}
.rec-phone{font-size:.64rem;color:var(--txt3);font-family:var(--fm);margin-top:2px}
.rec-chk{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--green2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rec-chk svg{width:13px;height:13px;stroke:#fff;stroke-width:2.5;fill:none}

/* Send page — segmented control + collapsible note */
.send-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.send-method{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border-radius:13px;border:1.5px solid var(--border);background:var(--card);color:var(--txt2);font-size:.66rem;font-weight:700;cursor:pointer;transition:.18s;font-family:var(--f)}
.send-method svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.send-method.active{border-color:var(--forest);color:var(--forest);background:rgba(10,74,46,.06)}
.send-method:active{transform:scale(.94)}
.send-method-pane{display:flex;flex-direction:column;gap:8px}
.send-method-ok{padding:12px 18px;border:none;border-radius:12px;background:var(--forest);color:#fff;font-weight:800;font-size:.8rem;cursor:pointer;flex-shrink:0;font-family:var(--f)}
.send-method-ok:active{transform:scale(.95)}
.send-method-btn{width:100%;padding:13px;border:1.5px dashed var(--border);border-radius:12px;background:none;color:var(--forest);font-size:.76rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f)}
.send-method-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.send-method-btn:active{transform:scale(.98);background:rgba(10,74,46,.04)}

/* Send page — barre destinataire compacte (remplace .rec-row dans #sc-send) */
.rec-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(22,163,74,.07);border-radius:16px;border:2px solid rgba(22,163,74,.2)}
.rec-bar .rec-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.95rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#0A4A2E,#16A34A)}
.rec-bar .rec-info{flex:1;min-width:0}
.rec-bar .rec-name{font-size:.85rem;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-bar .rec-phone{font-size:.64rem;color:var(--txt3);font-family:var(--fm);margin-top:2px}
.rec-change{padding:7px 12px;border-radius:10px;background:transparent;border:1.5px solid rgba(22,163,74,.35);color:var(--forest);font-size:.7rem;font-weight:800;cursor:pointer;flex-shrink:0;font-family:var(--f)}
.rec-change:active{transform:scale(.94)}

/* Send page — note repliable */
.note-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px;border:1.5px dashed var(--border);border-radius:12px;background:none;color:var(--txt2);font-size:.74rem;font-weight:700;cursor:pointer;font-family:var(--f)}
.note-toggle svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none}
.note-toggle:active{transform:scale(.98);color:var(--forest);border-color:rgba(10,74,46,.3)}
.note-wrap{position:relative}
.note-wrap textarea{padding-right:38px}
.note-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:none;background:var(--bg2);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.note-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none}
.note-close:hover{background:var(--bg3);color:var(--txt2)}
.note-close:active{transform:scale(.9)}

.amt-box{background:var(--card);border-radius:20px;padding:22px 18px 18px;border:1px solid var(--border);text-align:center}
.amt-lbl{font-size:.6rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;font-family:var(--fm)}
.amt-val{font-family:var(--fd);font-size:3rem;font-weight:900;color:var(--txt);line-height:1;letter-spacing:-.02em}
.amt-val .cur{font-size:1.1rem;color:var(--txt3);font-weight:600}
.amt-fee{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 12px;background:rgba(22,163,74,.09);border-radius:8px;font-family:var(--fm);font-size:.58rem;color:#15803d;font-weight:600}
.amt-fee svg{width:11px;height:11px;stroke:#15803d;stroke-width:2.5;fill:none}

.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nk{height:64px;border-radius:16px;border:none;background:var(--bg2);font-family:var(--f);font-size:1.2rem;font-weight:700;color:var(--txt);cursor:pointer;transition:.12s;display:flex;align-items:center;justify-content:center}
.nk:active{transform:scale(.92);background:var(--bg3)}
.nk.del{background:rgba(220,38,38,.08);color:#dc2626}
.nk.del svg{width:20px;height:20px;stroke:#dc2626;stroke-width:2;fill:none}

/* ── QR ─────────────────────────────── */
#sc-qr{background:var(--ink)}
.qr-area{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:22px 22px 16px;gap:16px}
.qr-vf{width:clamp(180px,56vw,220px);height:clamp(180px,56vw,220px);border-radius:24px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.qr-c{position:absolute;width:32px;height:32px;border-color:var(--gold2);border-style:solid}
.qr-c.tl{top:10px;left:10px;border-width:3px 0 0 3px;border-radius:5px 0 0 0}
.qr-c.tr{top:10px;right:10px;border-width:3px 3px 0 0;border-radius:0 5px 0 0}
.qr-c.bl{bottom:10px;left:10px;border-width:0 0 3px 3px;border-radius:0 0 0 5px}
.qr-c.br{bottom:10px;right:10px;border-width:0 3px 3px 0;border-radius:0 0 5px 0}
.qr-line{position:absolute;left:14px;right:14px;height:2.5px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);animation:scan 2.5s ease-in-out infinite}
@keyframes scan{0%{top:5%;opacity:.7}50%{top:90%;opacity:1}100%{top:5%;opacity:.7}}
.qr-hint{font-family:var(--fm);font-size:.65rem;color:rgba(255,255,255,.4);text-align:center}
.qr-form{background:rgba(255,255,255,.06);border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.1);width:100%}
.qr-form label{font-size:.6rem;color:rgba(255,255,255,.42);font-family:var(--fm);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:7px;margin-top:12px}
.qr-form label:first-child{margin-top:0}
.qr-form .inp{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.qr-form .inp::placeholder{color:rgba(255,255,255,.28)}
.qr-form .inp:focus{border-color:rgba(212,160,23,.5)}
.qr-div{display:flex;align-items:center;gap:12px;padding:0 22px;flex-shrink:0}
.qr-div-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.qr-div-txt{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em}
.qr-mycard{background:var(--card);border-radius:18px;border:1px solid var(--border);padding:16px 18px;display:flex;align-items:center;gap:16px}
.qr-mycard-img{width:86px;height:86px;background:var(--txt);border-radius:12px;padding:8px;flex-shrink:0}
.qr-mycard-img svg{width:100%;height:100%}
.qr-mycard-name{font-size:.88rem;font-weight:800;color:var(--txt)}
.qr-mycard-phone{font-family:var(--fm);font-size:.62rem;color:var(--txt3);margin-top:3px}
.qr-share{margin-left:auto;width:40px;height:40px;border-radius:12px;background:rgba(10,74,46,.1);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.qr-share svg{width:16px;height:16px;stroke:var(--forest);stroke-width:2;fill:none}

/* ── COFFRE ─────────────────────────── */
.coffre-hdr{
  background:linear-gradient(155deg,var(--forest),var(--forest2));
  flex-shrink:0;padding:0 20px 22px;position:relative;overflow:hidden;
}
.coffre-hdr::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.12),transparent 70%);right:-60px;top:-80px;pointer-events:none}
.coffre-hdr-top{display:flex;align-items:center;justify-content:space-between;padding:10px 0 18px}
.coffre-ttl{font-family:var(--fd);font-size:1rem;font-style:italic;font-weight:700;color:var(--gold2)}
.coffre-plus{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:.15s}
.coffre-plus svg{width:17px;height:17px;stroke:rgba(255,255,255,.85);stroke-width:2;fill:none}
.coffre-total-lbl{font-size:.56rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.12em;font-family:var(--fm)}
.coffre-total-val{font-family:var(--fd);font-size:2.2rem;font-weight:900;color:#fff;margin:6px 0 4px;letter-spacing:-.025em}
.coffre-rate{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(34,197,94,.18);border-radius:8px;font-family:var(--fm);font-size:.6rem;font-weight:600;color:var(--green3)}
.coffre-rate svg{width:11px;height:11px;stroke:var(--green3);stroke-width:2.5;fill:none}

.coffre-item{background:var(--card);border-radius:18px;border:1px solid var(--border);padding:16px 18px;cursor:pointer;transition:.18s}
.coffre-item:active{transform:scale(.98)}
.ci-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ci-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-ic svg{width:19px;height:19px;stroke-width:1.9;fill:none}
.ci-name{font-size:.84rem;font-weight:800;color:var(--txt)}
.ci-dl{font-size:.62rem;color:var(--txt3);margin-top:2px;font-family:var(--fm)}
.ci-right{margin-left:auto;text-align:right;flex-shrink:0}
.ci-val{font-family:var(--fd);font-size:1rem;font-weight:900;color:var(--txt)}
.ci-rate{font-size:.6rem;font-weight:700;color:#15803d;margin-top:2px}
.ci-bar-bg{background:rgba(0,0,0,.08);border-radius:100px;height:7px;overflow:hidden}
.ci-bar{height:100%;border-radius:100px;transition:.3s}
.ci-bar-lbls{display:flex;justify-content:space-between;margin-top:6px}
.ci-bar-lbls span{font-family:var(--fm);font-size:.52rem;color:var(--txt3)}

.coffre-new{border:2.5px dashed var(--border);border-radius:18px;padding:20px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.14s;background:transparent;width:100%}
.coffre-new:active{transform:scale(.97)}
.coffre-new svg{width:17px;height:17px;stroke:var(--txt3);stroke-width:2;fill:none}
.coffre-new span{font-size:.78rem;font-weight:700;color:var(--txt3)}

/* ── TRANSFERT MOBILE MONEY ─────────── */
.tr-tab{padding:8px 16px;border-radius:100px;border:1.5px solid var(--border);background:none;color:var(--txt2);font-size:.72rem;font-weight:700;cursor:pointer;font-family:var(--f);transition:.15s;white-space:nowrap}
.tr-tab.on{background:var(--forest);color:#fff;border-color:var(--forest)}

/* — formulaire de transfert redessiné — */
.tr-dir{border:1.5px solid var(--border);border-radius:16px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tr-dir-ways{display:flex;align-items:center;gap:9px;min-width:0}
.tr-dir-ep{font-size:.9rem;font-weight:900;color:var(--txt);white-space:nowrap}
.tr-chip{font-size:.64rem;font-weight:700;color:var(--txt3);background:var(--card);border:1px solid var(--border);border-radius:100px;padding:4px 11px;white-space:nowrap;flex-shrink:0}
.tr-chip b{color:var(--forest);font-weight:800}
.tr-amt-display{text-align:center;padding:8px 0 2px;font-family:var(--fd);line-height:1}
.tr-amt-display #tr-amt-big,.tr-amt-display .big{font-size:2.3rem;font-weight:900;color:var(--txt);letter-spacing:-.02em}
.tr-amt-display .cur{font-size:.8rem;font-weight:700;color:var(--txt3);margin-left:4px}
.tr-amt-display.zero #tr-amt-big,.tr-amt-display.zero .big{color:var(--txt3)}
.tr-info{background:var(--bg2);border-radius:14px;padding:4px 14px}
.tr-info .l{display:flex;justify-content:space-between;gap:12px;font-size:.74rem;padding:9px 0;border-bottom:1px dashed var(--border)}
.tr-info .l:last-child{border-bottom:none}
.tr-info .l span:first-child{color:var(--txt3)}
.tr-info .l span:last-child{color:var(--txt);font-weight:700;text-align:right}
.tr-info .l.strong span{font-weight:900;color:var(--txt)}
.tr-info .l .good{color:var(--green)}
.tr-info .l .warn{color:#DC2626}
.tr-info .l.muted span{color:var(--txt3);font-weight:600;font-size:.66rem}

/* — états du flux eBilling (attente / succès / échec) — */
.tr-state{padding:8px 2px 4px;display:flex;flex-direction:column;align-items:center;animation:trIn .25s ease}
@keyframes trIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* en-tête commun */
.tr-st-icon{position:relative;width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.tr-st-icon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2}
.tr-st-icon.pend{background:linear-gradient(135deg,#F59E0B,#D97706);box-shadow:0 8px 22px rgba(217,119,6,.35)}
/* halo qui ondule autour de l'icône d'attente */
.tr-st-icon.pend::before,.tr-st-icon.pend::after{content:"";position:absolute;inset:0;border-radius:18px;border:2px solid rgba(217,119,6,.45);animation:trRipple 2.4s ease-out infinite}
.tr-st-icon.pend::after{animation-delay:1.2s}
.tr-st-icon.ok{background:linear-gradient(135deg,var(--green2),var(--green));box-shadow:0 8px 22px rgba(22,163,74,.32)}
.tr-st-icon.fail{background:linear-gradient(135deg,#EF4444,#DC2626);box-shadow:0 8px 22px rgba(220,38,38,.32)}
.tr-st-title{font-size:1.05rem;font-weight:900;color:var(--txt);text-align:center}
.tr-st-amt{font-size:1.55rem;font-weight:900;letter-spacing:-.02em;margin:3px 0 2px}
.tr-st-amt.pend{color:var(--forest)}.tr-st-amt.ok{color:var(--green)}.tr-st-amt.fail{color:var(--txt3)}
.tr-st-sub{font-size:.76rem;color:var(--txt2);text-align:center;line-height:1.5;max-width:260px}
.tr-st-sub b{color:var(--txt)}

/* fil d'étapes (attente) */
.tr-steps{width:100%;margin-top:20px}
.tr-step{display:flex;gap:12px}
.tr-step .col{display:flex;flex-direction:column;align-items:center}
.tr-step .sd{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:900;flex-shrink:0}
.tr-step .sd.done{background:var(--forest);color:#fff}
.tr-step .sd.now{background:#D97706;color:#fff}
.tr-step .sd.todo{background:var(--bg3);color:var(--txt3)}
.tr-step .ln{width:2px;flex:1;background:var(--bg3);margin:3px 0;min-height:14px}
.tr-step .ln.done{background:var(--green)}
.tr-step .body{padding:1px 0 14px}
.tr-step .tt{font-size:.82rem;font-weight:800;color:var(--txt)}
.tr-step.cur .tt{color:#B45309}
.tr-step .todo-tt{color:var(--txt3)}
.tr-step .ss{font-size:.66rem;color:var(--txt3);margin-top:1px;font-family:var(--fm)}
.tr-nowdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#D97706;margin-left:5px;vertical-align:middle;animation:trpp 1.2s ease-in-out infinite}
@keyframes trpp{0%,100%{opacity:.4;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

/* mini-reçu (succès) */
.tr-receipt{width:100%;margin-top:18px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:4px 14px}
.tr-receipt .l{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;padding:9px 0;border-bottom:1px dashed var(--border)}
.tr-receipt .l:last-child{border-bottom:none}
.tr-receipt .l span:first-child{color:var(--txt3);flex-shrink:0}
.tr-receipt .l span:last-child{color:var(--txt);font-weight:700;text-align:right;font-family:var(--fm)}

/* anneau succès animé */
.tr-st-ring{width:78px;height:78px;border-radius:50%;background:rgba(22,163,74,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;position:relative}
.tr-st-ring svg{width:34px;height:34px;stroke:var(--green);stroke-width:3;fill:none;
  stroke-dasharray:30;stroke-dashoffset:30;animation:trCheck .5s ease-out .15s forwards}
.tr-st-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(22,163,74,.35);animation:trRipple 2s ease-out infinite}
@keyframes trRipple{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.05);opacity:0}}
@keyframes trCheck{to{stroke-dashoffset:0}}

/* boutons d'état */
.tr-st-btn{width:100%;margin-top:16px;padding:14px;border:none;border-radius:14px;font-weight:800;font-size:.88rem;cursor:pointer;font-family:var(--f);transition:transform .12s ease,box-shadow .15s ease,background .15s ease}
.tr-st-btn:active{transform:scale(.975)}
.tr-st-btn.primary{background:var(--forest);color:#fff}
.tr-st-btn.primary:hover{box-shadow:0 8px 22px rgba(10,74,46,.28)}
.tr-st-btn.retry{background:rgba(220,38,38,.08);color:#DC2626;display:flex;align-items:center;justify-content:center;gap:7px}
.tr-st-btn.retry:hover{background:rgba(220,38,38,.13)}
.tr-st-btn.ghost{background:none;color:var(--txt3);margin-top:6px}
.tr-st-btn.ghost:hover{color:var(--txt)}

/* ── BUDGET ─────────────────────────── */
.bud-tabs{display:flex;gap:5px;background:var(--bg2);border-radius:12px;padding:4px}
.btab{flex:1;padding:9px 6px;border-radius:9px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:.15s;border:none;background:none;font-family:var(--f);color:var(--txt3)}
.btab.on{background:var(--card);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.08)}

.bud-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bud-card{border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:space-between}
.bud-card-lbl{font-size:.58rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;font-family:var(--fm)}
.bud-card-val{font-family:var(--fd);font-size:1.05rem;font-weight:900;color:#fff;margin-top:5px}
.bud-card-ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bud-card-ic svg{width:18px;height:18px;stroke:var(--gold2);stroke-width:1.9;fill:none}

.cat-item{background:var(--card);border-radius:16px;border:1px solid var(--border);padding:13px 16px;display:flex;align-items:center;gap:13px}
.cat-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-ic svg{width:17px;height:17px;stroke-width:1.9;fill:none}
.cat-name{font-size:.78rem;font-weight:700;color:var(--txt);flex:1}
.cat-bar-wrap{flex:1.5;background:rgba(0,0,0,.07);border-radius:100px;height:5px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:100px}
.cat-right{text-align:right;flex-shrink:0}
.cat-val{font-size:.78rem;font-weight:800;color:var(--txt);font-family:var(--fd)}
.cat-pct{font-size:.56rem;color:var(--txt3);font-family:var(--fm);margin-top:2px}

/* ── TONTINE ────────────────────────── */
.tontine-item{background:var(--card);border-radius:18px;border:1px solid var(--border);padding:16px 18px}
.tnt-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tnt-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.92rem;font-weight:900;color:#fff}
.tnt-name{font-size:.82rem;font-weight:800;color:var(--txt)}
.tnt-members{font-size:.62rem;color:var(--txt3);margin-top:2px;font-family:var(--fm)}
.tnt-amount{margin-left:auto;text-align:right}
.tnt-val{font-family:var(--fd);font-size:.95rem;font-weight:900;color:var(--txt)}
.tnt-cycle{font-size:.58rem;color:var(--txt3);font-family:var(--fm);margin-top:2px}
.tnt-turn{background:rgba(22,163,74,.09);border:1px solid rgba(22,163,74,.18);border-radius:10px;padding:8px 12px;font-size:.68rem;font-weight:700;color:#15803d;margin-bottom:12px}
.tnt-bar-bg{background:rgba(0,0,0,.08);border-radius:100px;height:6px;overflow:hidden;margin-bottom:6px}
.tnt-bar{height:100%;border-radius:100px}
.tnt-footer{display:flex;justify-content:space-between;margin-bottom:12px}
.tnt-footer span{font-family:var(--fm);font-size:.55rem;color:var(--txt3)}
.tnt-btn{width:100%;padding:12px;border:none;border-radius:14px;background:rgba(10,74,46,.08);border:1.5px solid rgba(10,74,46,.18);font-family:var(--f);font-size:.82rem;font-weight:800;color:var(--forest);cursor:pointer;transition:.15s}
.tnt-btn:active{transform:scale(.97)}

/* ── FACTURES ───────────────────────── */
.bill-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card);border-radius:16px;border:1px solid var(--border)}
.bill-item.paid{opacity:.5}
.bill-ic{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.bill-ic svg{width:20px;height:20px;stroke-width:1.9;fill:none}
.bill-name{font-size:.82rem;font-weight:700;color:var(--txt)}
.bill-ref{font-size:.62rem;color:var(--txt3);font-family:var(--fm);margin-top:2px}
.bill-right{margin-left:auto;text-align:right;flex-shrink:0}
.bill-val{font-family:var(--fd);font-size:.92rem;font-weight:900;color:var(--txt)}
.bill-due{font-size:.58rem;font-family:var(--fm);margin-top:2px;font-weight:600;color:#dc2626}
.bill-due.ok{color:#15803d}
.bill-pay{margin-left:10px;flex-shrink:0;padding:9px 16px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--gold2));font-family:var(--f);font-size:.72rem;font-weight:800;color:var(--forest);cursor:pointer;transition:.15s}
.bill-pay:active{transform:scale(.94)}
.bills-empty{text-align:center;padding:24px;color:var(--txt3);font-size:.82rem}

/* ── RECHARGE ───────────────────────── */
.op-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-btn{padding:16px 12px 14px;border:2.5px solid var(--border);border-radius:16px;background:var(--card);cursor:pointer;text-align:center;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.op-btn:active{transform:scale(.96)}
.op-btn.on{border-color:var(--green2);background:rgba(34,197,94,.06)}
.op-logo{width:44px;height:44px;object-fit:contain;object-position:center;display:block}
.op-name{font-size:.8rem;font-weight:800;color:var(--txt);margin-top:2px}
.op-sub{font-size:.6rem;color:var(--txt3)}

/* ── NOTIFS ─────────────────────────── */
.notif-item{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s;position:relative}
.notif-item:last-child{border-bottom:none}
.notif-item:active{background:rgba(0,0,0,.025)}
.notif-item.unread::before{content:'';position:absolute;left:7px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--green2)}
.notif-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.notif-ic svg{width:17px;height:17px;stroke-width:2;fill:none}
.notif-title{font-size:.8rem;font-weight:700;color:var(--txt)}
.notif-desc{font-size:.66rem;color:var(--txt2);margin-top:3px;line-height:1.6}
.notif-time{font-family:var(--fm);font-size:.56rem;color:var(--txt3);margin-top:5px}

/* ── PROFIL ─────────────────────────── */
.profil-hdr{
  background:linear-gradient(155deg,var(--forest),var(--forest2));
  flex-shrink:0;padding:0 20px 24px;text-align:center;position:relative;overflow:hidden;
}
.profil-hdr::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(212,160,23,.1),transparent 60%);pointer-events:none}
.profil-av{width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--forest2));display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:2rem;font-weight:900;color:#fff;margin:0 auto 12px;border:3.5px solid rgba(255,255,255,.18);position:relative;overflow:hidden}
.profil-av:hover #prof-av-overlay,.profil-av:active #prof-av-overlay{opacity:1 !important}
.profil-name{font-size:1.05rem;font-weight:800;color:#fff}
.profil-phone{font-family:var(--fm);font-size:.64rem;color:rgba(255,255,255,.42);margin-top:4px}
.profil-loc{font-size:.66rem;color:rgba(255,255,255,.35);margin-top:3px}
.profil-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 14px;background:rgba(212,160,23,.15);border:1px solid rgba(212,160,23,.25);border-radius:100px;font-family:var(--fm);font-size:.6rem;font-weight:600;color:var(--gold2)}
.profil-badge svg{width:11px;height:11px;stroke:var(--gold2);stroke-width:2.5;fill:none}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:16px;overflow:hidden}
.pstat{background:var(--card);padding:14px 8px;text-align:center}
.pstat-n{font-family:var(--fd);font-size:1.2rem;font-weight:900;color:var(--txt)}
.pstat-l{font-family:var(--fm);font-size:.52rem;color:var(--txt3);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.menu-grp{background:var(--card);border-radius:18px;overflow:hidden;border:1px solid var(--border)}
.mi{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s}
.mi:last-child{border-bottom:none}
.mi:active{background:rgba(0,0,0,.025)}
.mi-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mi-ic svg{width:17px;height:17px;stroke-width:1.9;fill:none}
.mi-title{font-size:.82rem;font-weight:700;color:var(--txt)}
.mi-sub{font-size:.64rem;color:var(--txt3);margin-top:2px}
.mi-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.mi-arr svg{width:15px;height:15px;stroke:var(--txt3);stroke-width:2;fill:none}
.mi-tag{font-family:var(--fm);font-size:.52rem;font-weight:700;padding:4px 8px;border-radius:7px}
.mi-tag.gold{background:rgba(212,160,23,.12);color:var(--gold-txt)}
.mi-tag.red{background:rgba(220,38,38,.1);color:#dc2626}

@keyframes loadbar{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel{background:var(--bg3);border-radius:8px;animation:pulse 1.4s ease-in-out infinite}

/* ╔═════════════════════════════════════════════════╗
   ║  DESKTOP LAYOUT — gp-layout (≥1280px)           ║
   ╚═════════════════════════════════════════════════╝ */
.gp-layout{display:none}

/* ── DESKTOP AUTH OVERLAY ── */
#gp-auth-overlay{display:none;position:fixed;inset:0;z-index:200;flex-direction:row}
.gp-auth-left{
  width:44%;min-width:340px;
  background: #04140A;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0;
  overflow:hidden;
  position: relative;
}
/* Photo forêt Estuaire en fond, tint palette, fade sombre vers le bas */
.gpa-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  pointer-events: none;
  filter: contrast(1.05) saturate(1.18) brightness(.85) hue-rotate(-4deg);
}
.gpa-tint{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 80% 8%, rgba(240,192,64,.32), transparent 60%),
    radial-gradient(70% 45% at 12% 92%, rgba(10,74,46,.45), transparent 65%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.gpa-fade{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(4,20,10,0) 0%,
    rgba(4,20,10,0) 25%,
    rgba(4,20,10,.20) 45%,
    rgba(4,20,10,.55) 65%,
    rgba(4,20,10,.86) 85%,
    #04140A 100%);
  pointer-events: none;
}
/* Signature en haut à gauche */
.gpa-mark{
  position: absolute;
  top: 32px; left: 40px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(4,20,10,.5);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(240,192,64,.30);
  color: var(--gold3);
  font-family: 'DM Mono', 'SF Mono', Monaco, monospace;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -6px rgba(4,20,10,.55);
}
.gpa-mark-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow: 0 0 0 3px rgba(240,192,64,.22);
  animation: obMarkPulse 2.4s ease-in-out infinite;
}
/* Contenu en bas (sur le fade) */
.gpa-content{
  position: relative;
  z-index: 2;
  padding: 0 48px 48px;
}
.gpa-badge{
  width: 76px; height: 76px;
  border-radius: 22px;
  background: linear-gradient(140deg, var(--gold), var(--gold2));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  box-shadow:
    0 22px 46px -10px rgba(212,160,23,.6),
    0 0 90px rgba(212,160,23,.22),
    inset 0 2px 0 rgba(255,255,255,.4);
  position: relative;
}
.gpa-badge::after{
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 26px;
  border: 1px solid rgba(240,192,64,.35);
}
.gpa-title{
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 3.6rem;
  font-weight: 900;
  color: #fff;
  line-height: .95;
  letter-spacing: -.025em;
  margin-bottom: 14px;
  text-shadow:
    0 2px 24px rgba(0,0,0,.7),
    0 1px 6px rgba(4,20,10,.85);
}
.gpa-tagline{
  font-family: 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
  margin-bottom: 32px;
  max-width: 400px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.gpa-features{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
.gpa-feature{
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-size: .84rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.gpa-feature-ic{
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(4,20,10,.55);
  border: 1px solid rgba(240,192,64,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold2);
}
.gpa-feature-ic svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; }

html.dark .gp-auth-left{ background: #04140A; }

/* ══════════════════════════════════════════════════════════════
   ESTUAIRE · Forest-Scene shared pattern (v5)
   Photo forêt + tint palette + assombrissement pour surfaces
   d'auth non-onboard : splash, PIN, reg-info.
   ══════════════════════════════════════════════════════════════ */
.fs-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  pointer-events: none;
  filter: contrast(1.06) saturate(1.15) brightness(.55) hue-rotate(-4deg);
  z-index: 0;
}
.fs-tint{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 78% 10%, rgba(240,192,64,.28), transparent 60%),
    radial-gradient(70% 40% at 20% 88%, rgba(10,74,46,.40), transparent 65%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.fs-dim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4,20,10,.35) 0%,
      rgba(4,20,10,.30) 45%,
      rgba(4,20,10,.55) 85%,
      rgba(4,20,10,.75) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Le contenu des écrans forest-scene doit passer au-dessus */
#sc-loading > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-login > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-otp > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-pin > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-pin-create > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-pin-confirm > *:not(.fs-photo):not(.fs-tint):not(.fs-dim),
#sc-reg-info > *:not(.fs-photo):not(.fs-tint):not(.fs-dim){
  position: relative;
  z-index: 1;
}
/* ...sauf la barre de progression et le compteur, qui sont ancrés au bord de
   l'écran. Sans cette exception la règle ci-dessus, portée par un id, les
   repassait dans le flux : le compteur occupait toute la largeur. */
.auth-prog,
.auth-count{ position: absolute !important; }

/* ── SPLASH · loading ──────────────────────────────────── */
#sc-loading{
  background: #04140A !important;
  align-items: center;
  justify-content: center;
}
/* ── Écran de chargement ─────────────────────────────────
   Le badge doré, le mot « GhettoPay » en serif et la pastille Estuaire
   disaient trois fois la même chose, et aucune des trois n'était le logo.
   Il ne reste que le logo et la barre : c'est un splash, il dure 800ms. */
/* Un voile centré, sinon le GHETTO blanc se perd dans les palmes claires.
   Assez large pour qu'on ne voie pas son bord, assez dense pour tenir. */
#sc-loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 26% at 50% 47%,
    rgba(4,16,9,.62) 0%, rgba(4,16,9,.40) 45%, rgba(4,16,9,0) 100%);
  pointer-events: none;
}
.ldg-inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-inline: clamp(24px, 10vw, 48px);
  width: 100%;
}
.ldg-logo{
  width: min(62%, 230px);
  height: auto;
  filter: drop-shadow(0 3px 22px rgba(4,16,9,.6));
  animation: ldgIn .6s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes ldgIn{
  from{ opacity: 0; transform: translateY(8px) scale(.97); }
  to  { opacity: 1; transform: none; }
}
@media(prefers-reduced-motion:reduce){
  .ldg-logo{ animation: none; }
}
.ldg-bar{
  width: 60px; height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 10px;
}
.ldg-bar-fill{
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 100px;
  animation: loadbar 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(240,192,64,.6);
}

/* ── PIN & Auth screens · refinement ─────────────────────────── */
/* Le fond sombre de ces écrans venait du design photo. Le tunnel est
   désormais une page claire, posée par .auth-paper. */
.pin-logo{
  box-shadow:
    0 16px 36px -8px rgba(212,160,23,.55),
    0 0 60px rgba(212,160,23,.22),
    inset 0 2px 0 rgba(255,255,255,.4);
  position: relative;
}
.pin-logo::after{
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 26px;
  border: 1px solid rgba(240,192,64,.32);
}
.pin-title{
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 1.85rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.pin-sub{
  color: rgba(255,255,255,.7) !important;
  font-size: .78rem;
  font-family: var(--fm);
  letter-spacing: .04em;
}
.pin-sub strong{ color: var(--gold2); }
.pin-dots{
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 10px auto;
}
.pin-dot{
  border-color: rgba(240,192,64,.35) !important;
  background: rgba(4,20,10,.35) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6) !important;
  background: rgba(0,0,0,.45) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.pin-dot.fill{
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  border-color: var(--gold3) !important;
  box-shadow: 0 0 0 3px rgba(240,192,64,.22), 0 4px 12px -2px rgba(212,160,23,.5);
  border-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(240,192,64,.4), 0 4px 18px rgba(212,160,23,.75) !important;
  transform: scale(1.2);
}
.pin-k{
  background: rgba(4,20,10,.4) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240,192,64,.16) !important;
  background: rgba(6,28,16,.62) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(240,192,64,.26) !important;
  color: #fff !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px -4px rgba(0,0,0,.5);
  transition: background .12s, transform .12s, border-color .12s;
}
.pin-k:active{
  background: rgba(240,192,64,.20) !important;
  border-color: rgba(240,192,64,.42) !important;
  transform: scale(.94);
  background: rgba(240,192,64,.3) !important;
  border-color: var(--gold2) !important;
  transform: scale(.92);
}
.pin-k svg{ stroke: rgba(255,255,255,.65) !important; }
.pin-k svg{ stroke: #ffffff !important; }

/* ── REG-INFO · glass card + inputs auth ─────────────── */

#sc-reg-info .snav-t{ color: #fff; }

/* ── TONTINE DETAIL · turn card refiné ───────────────── */
#sc-tontine-detail .snav{
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border-bottom: 1px solid rgba(10,74,46,.10);
}
#sc-tontine-detail .snav-t{ font-weight: 900; letter-spacing: -.005em; }
#sc-tontine-detail #td-body > div:first-child{
  /* Le hero .gp-bal-card avec padding:22px */
  margin-bottom: 12px;
}

/* ── MODALES · polish Estuaire ───────────────────────── */
.modal{
  background: rgba(4,20,10,.55) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.modal-box{
  background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%) !important;
  border-radius: 28px 28px 0 0 !important;
  padding: 22px 22px calc(28px + var(--sab)) !important;
  border-top: 1px solid rgba(240,192,64,.28);
  box-shadow:
    0 -20px 50px -18px rgba(4,20,10,.35),
    0 -1px 0 rgba(240,192,64,.22) inset;
}
.modal-handle{
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  border-radius: 100px;
  margin: 0 auto 10px;
  opacity: .72;
}
.modal-title{
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--txt);
  margin-bottom: 4px;
}
html.dark .modal-box{
  background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%) !important;
  border-top-color: rgba(240,192,64,.24);
}


.gp-auth-right{
  flex:1;background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:48px 60px;overflow-y:auto;
}
html.dark .gp-auth-right{background:#111314}
html.dark .gp-auth-right #gp-auth-form-title{color:#E8E4D9}
html.dark .gp-auth-right #gp-auth-pin-form .gp-auth-title{color:#E8E4D9}
.gp-pin-dot{
  width:16px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.12);transition:background .15s,transform .1s;
}
html.dark .gp-pin-dot{background:rgba(255,255,255,.18)}
.gp-pin-dot.fill{background:var(--forest);transform:scale(1.15)}
.gp-pin-dot.err{background:#dc2626}
.gp-pin-k{
  background:#F5F2EA;color:#1A1A1A;font-size:1.3rem;
  border-radius:14px;border:none;padding:18px;
  cursor:pointer;font-weight:700;transition:background .1s;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;
}
.gp-pin-k:hover{background:#EDE9DD}
html.dark .gp-pin-k{background:#1E2023;color:#E8E4D9}
html.dark .gp-pin-k:hover{background:#2A2D30}

@media(min-width:1280px){
  body{overflow:hidden;background:#F5F2EA;display:block;padding:0}
  html.dark body{background:#0F1010}
  .shell{display:none!important}
  body.gp-auth .gp-layout{display:none!important}
  body.gp-auth #gp-auth-overlay{display:flex!important}
  .gp-layout{
    display:flex;
    position:fixed;inset:0;z-index:100;
    background:#F5F2EA;
    font-family:'DM Sans',system-ui,sans-serif;
  }
}

/* ── SIDEBAR ── */
.gp-sidebar{
  width:64px;background:#1C1C1C;
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0 24px;gap:4px;flex-shrink:0;
  position:relative;z-index:10;
}
.gp-sidebar-logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(145deg,#D4A820,#E8C040);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;cursor:pointer;transition:transform .2s;
  box-shadow:0 4px 16px rgba(212,168,32,.4);
  border:none;flex-shrink:0;
}
.gp-sidebar-logo:hover{transform:scale(1.06)}
.gp-sidebar-logo img{width:26px;height:26px;object-fit:contain}
.gp-nav{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.gp-nav-item{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  transition:background .18s,transform .15s;
  border:none;background:none;
}
.gp-nav-item svg{width:20px;height:20px;stroke:rgba(255,255,255,.35);stroke-width:1.8;fill:none;transition:stroke .18s}
.gp-nav-item:hover{background:rgba(255,255,255,.08)}
.gp-nav-item:hover svg{stroke:rgba(255,255,255,.7)}
.gp-nav-item.gp-active{background:rgba(255,255,255,.12)}
.gp-nav-item.gp-active svg{stroke:#fff}
.gp-nav-item.gp-active::after{
  content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:#E8C040;border-radius:0 3px 3px 0;
}
.gp-nav-item[data-tip]::before{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 12px);
  background:rgba(255,255,255,.96);color:#1A1A1A;
  font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:8px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s;
  box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:200;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-nav-item[data-tip]:hover::before{opacity:1;transform:translateX(0)}
.gp-nav-sep{width:28px;height:1px;background:rgba(255,255,255,.1);margin:8px 0;flex-shrink:0}
.gp-sidebar-av{
  margin-top:auto;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#D4A820,#0A4A2E);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.85rem;color:#fff;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);transition:transform .18s;
  flex-shrink:0;
}
.gp-sidebar-av:hover{transform:scale(1.08)}

/* ── MAIN ── */
.gp-main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* ── TOPBAR ── */
.gp-topbar{
  height:64px;padding:0 28px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:#F5F2EA;flex-shrink:0;
}
.gp-topbar-greet{
  font-size:.6rem;font-weight:700;color:#7A7A6A;
  text-transform:uppercase;letter-spacing:.12em;
  font-family:'DM Mono',monospace;
}
.gp-topbar-title{
  font-size:1.2rem;font-weight:800;color:#1A1A1A;letter-spacing:-.02em;
}
.gp-topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.gp-topbar-notif{
  width:38px;height:38px;border-radius:11px;background:rgba(0,0,0,.05);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;position:relative;
}
.gp-topbar-notif:hover{background:rgba(0,0,0,.09)}
.gp-topbar-notif svg{width:18px;height:18px;stroke:#5A5A5A;stroke-width:1.9;fill:none}
.gp-notif-badge{
  position:absolute;top:7px;right:7px;width:8px;height:8px;
  border-radius:50%;background:#22C55E;border:2px solid #F5F2EA;display:none;
}
.gp-topbar-av{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#D4A820,#0A4A2E);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.82rem;color:#fff;cursor:pointer;
  border:2px solid rgba(0,0,0,.08);transition:transform .15s;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-topbar-av:hover{transform:scale(1.05)}

/* ── CONTENT ── */
.gp-content{
  flex:1;overflow-y:auto;
  padding:24px 28px 36px;
  display:flex;flex-direction:column;gap:18px;
}
.gp-content::-webkit-scrollbar{width:4px}
.gp-content::-webkit-scrollbar-track{background:transparent}
.gp-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:100px}

/* ── STAT CARDS ── */
.gp-cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.gp-card{
  border-radius:22px;padding:20px 22px 18px;
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  animation:gpFadeUp .35s ease both;
}
.gp-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.12)}
.gp-card::before{
  content:'';position:absolute;
  width:100px;height:100px;border-radius:50%;
  background:rgba(255,255,255,.18);right:-20px;bottom:-30px;pointer-events:none;
}
.gp-card::after{
  content:'';position:absolute;
  width:60px;height:60px;border-radius:50%;
  background:rgba(255,255,255,.1);right:46px;top:-16px;pointer-events:none;
}
.gp-card-gold{
  background:linear-gradient(145deg,#C8960A,#D4A820,#E8C040);
  box-shadow:0 6px 24px rgba(200,150,10,.28);
}
.gp-card-gold .gp-card-label{color:rgba(0,0,0,.42)}
.gp-card-gold .gp-card-value{color:#5A3A00}
.gp-card-gold .gp-card-sub{color:rgba(0,0,0,.35)}
.gp-card-forest{
  background:linear-gradient(145deg,#0A4A2E,#0F5C38,#1A6B40);
  box-shadow:0 6px 24px rgba(10,74,46,.28);
}
.gp-card-forest .gp-card-label,.gp-card-forest .gp-card-sub{color:rgba(255,255,255,.45)}
.gp-card-forest .gp-card-value{color:#fff}
.gp-card-green{
  background:linear-gradient(145deg,#16A34A,#22C55E,#4ADE80);
  box-shadow:0 6px 24px rgba(22,163,74,.28);
}
.gp-card-green .gp-card-label,.gp-card-green .gp-card-sub{color:rgba(255,255,255,.5)}
.gp-card-green .gp-card-value{color:#fff}
.gp-card-purple{
  background:linear-gradient(145deg,#9B59D0,#B47DE8,#C084FC);
  box-shadow:0 6px 24px rgba(155,89,208,.28);
}
.gp-card-purple .gp-card-label,.gp-card-purple .gp-card-sub{color:rgba(255,255,255,.5)}
.gp-card-purple .gp-card-value{color:#fff}
.gp-card-label{
  font-family:'DM Mono',monospace;font-size:.54rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:8px;display:block;
}
.gp-card-value{
  font-size:1.65rem;font-weight:900;letter-spacing:-.03em;
  line-height:1;display:block;margin-bottom:5px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-card-sub{
  font-size:.6rem;font-weight:500;display:block;
  font-family:'DM Mono',monospace;
}

/* ── DASHBOARD ROW ── */
.gp-dashboard-row{display:grid;grid-template-columns:1.5fr 1fr;gap:13px;flex:1;min-height:0}
.gp-chart-card,.gp-activity-card{
  background:#fff;border-radius:22px;
  padding:22px 24px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
  animation:gpFadeUp .4s .2s ease both;
}
.gp-section-title{
  font-size:.78rem;font-weight:800;color:#1A1A1A;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-section-title span{
  font-size:.62rem;font-weight:400;color:#9A9A9A;
  font-family:'DM Mono',monospace;
}
/* Bar chart */
.gp-bar-chart{display:flex;align-items:flex-end;gap:9px;flex:1;min-height:100px}
.gp-bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.gp-bar{
  width:100%;border-radius:7px 7px 0 0;min-height:5px;
  transition:opacity .2s;position:relative;overflow:hidden;
}
.gp-bar::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 50%);
}
.gp-bar.gp-forest{background:linear-gradient(180deg,#1A6B40,#0A4A2E)}
.gp-bar.gp-gold{background:linear-gradient(180deg,#E8C040,#D4A820)}
.gp-bar-col:hover .gp-bar{opacity:.78}
.gp-bar-lbl{font-family:'DM Mono',monospace;font-size:.58rem;color:#9A9A9A;text-align:center}
.gp-bar-val{font-family:'DM Mono',monospace;font-size:.58rem;color:#5A5A5A;text-align:center}

/* Activity */
.gp-activity-card{overflow:hidden}
.gp-activity-list{display:flex;flex-direction:column;flex:1;overflow-y:auto}
.gp-activity-list::-webkit-scrollbar{display:none}
.gp-act-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 6px;border-bottom:1px solid rgba(0,0,0,.05);
  cursor:pointer;border-radius:8px;
  transition:background .12s;
  animation:gpFadeUp .3s ease both;
}
.gp-act-item:last-child{border-bottom:none}
.gp-act-item:hover{background:rgba(0,0,0,.025)}
.gp-act-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0;
}
.gp-act-info{flex:1;min-width:0}
.gp-act-name{
  font-size:.8rem;font-weight:700;color:#1A1A1A;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-act-meta{font-size:.6rem;color:#9A9A9A;margin-top:2px;font-family:'DM Mono',monospace}
.gp-act-amount{
  font-size:.8rem;font-weight:800;flex-shrink:0;
  font-family:'DM Mono',monospace;letter-spacing:-.01em;
}
.gp-act-amount.cr{color:#16A34A}
.gp-act-amount.db{color:#DC2626}

/* ── PHONE-HINT panel (non-home) ── */
.gp-phone-hint{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;color:#9A9A9A;text-align:center;
  font-family:'DM Sans',system-ui,sans-serif;
}
.gp-phone-hint svg{stroke:#9A9A9A;stroke-width:1.4;fill:none;opacity:.5}
.gp-phone-hint strong{font-size:1rem;font-weight:800;color:#5A5A5A}
.gp-phone-hint p{font-size:.78rem;max-width:220px;line-height:1.5}

/* ── ANIMATIONS ── */
@keyframes gpFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.gp-card:nth-child(1){animation-delay:.04s}
.gp-card:nth-child(2){animation-delay:.09s}
.gp-card:nth-child(3){animation-delay:.14s}
.gp-card:nth-child(4){animation-delay:.19s}

/* ── Tablette 768–1279px : shell ── */
@media(min-width:768px) and (max-width:1279px){
  .shell{width:min(480px,100%);position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 24px 80px rgba(0,0,0,.18)}
}

/* ── Petit écrans ≤ 360px (iPhone SE, vieux Android) ─────────────── */
@media(max-width:360px){
  .bal-amt{font-size:1.75rem}
  .amt-val{font-size:2.4rem}
  .pin-k{height:58px;font-size:1.25rem;border-radius:14px}
  .pin-pad{gap:8px}
  .nk{height:54px;font-size:1.05rem;border-radius:14px}
  .numpad{gap:8px}
  .pin-wrap{padding:24px 18px;gap:24px}
  .btn{padding:14px 16px;font-size:.88rem}
  .modal-box{padding:16px 14px calc(20px + var(--sab))}
  .inp{padding:13px 14px;font-size:.82rem}
  .snav-t{font-size:.88rem}
  .coffre-total-val{font-size:1.8rem}
  .profil-av{width:68px;height:68px;font-size:1.6rem}
  .pstat-n{font-size:1rem}
  .qa-cta{padding:10px 10px;min-height:42px}
  .qa-cta-lbl{font-size:.72rem}
  .qa-sec-ic{width:36px;height:36px}
  .qa-sec-ic svg{width:16px;height:16px}
  .qa-sec-lbl{font-size:.5rem}
  .bt-qr{width:48px;height:48px;margin-top:-18px}
  .bt{padding:5px 8px;min-width:44px}
  .bt-lbl{font-size:.48rem}
}

/* ── PIN CREATION SCREENS ── */
#sc-pin-create,#sc-pin-confirm{background:linear-gradient(155deg,var(--forest) 0%,var(--ink) 60%)}

/* ── AUTH STEPS INDICATOR ── */
.auth-steps{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.auth-step{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:rgba(255,255,255,.4);transition:all .3s;flex-shrink:0;line-height:1}
.auth-step-active{background:var(--gold)!important;color:var(--forest)!important}
.auth-step-done{background:rgba(255,255,255,.25)!important;color:rgba(255,255,255,.9)!important;font-size:.58rem}
.auth-step-line{width:36px;height:1.5px;background:rgba(255,255,255,.12);flex-shrink:0}
.auth-line-done{background:rgba(255,255,255,.28)}

/* ── OTP INPUT BOXES ── */
.otp-boxes{display:flex;gap:10px;justify-content:center;width:100%}
.otp-box{
  width:44px;height:54px;border-radius:12px;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.5rem;font-weight:800;text-align:center;
  font-family:var(--fm);outline:none;transition:border-color .2s;
  -webkit-tap-highlight-color:transparent;caret-color:transparent;
  appearance:textfield;-moz-appearance:textfield
}
.otp-box:focus{border-color:var(--gold2);background:rgba(255,255,255,.15)}
@media(max-width:359px){
  .otp-box{width:36px;height:48px;font-size:1.2rem}
  .otp-boxes{gap:6px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTUAIRE — Refonte fluide (juillet 2026)
   ─────────────────────────────────────────────────────────────────────────
   Structure Estuaire (radius généreux, neumorphisme doux, gradient liquide,
   nav capsule flottante, boutons circulaires) sur palette + police actuelles.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --r-xs: 14px;
  --r-sm: 20px;
  --r-md: 26px;
  --r-lg: 32px;
  --r-xl: 38px;
  --r-round: 999px;
  --sh-neu-out: -4px -4px 12px rgba(255,255,255,.75), 6px 6px 18px rgba(10,74,46,.10);
  --sh-neu-in:  inset -3px -3px 8px rgba(255,255,255,.5), inset 3px 3px 8px rgba(10,74,46,.06);
  --sh-float:   0 10px 30px -8px rgba(10,74,46,.18), 0 4px 12px -4px rgba(10,74,46,.10);
  --sh-glass:   0 8px 24px -6px rgba(10,74,46,.15);
  --glass-bg:   rgba(255,255,255,.72);
  --glass-blur: blur(20px);
}
html.dark {
  --sh-neu-out: -3px -3px 10px rgba(255,255,255,.03), 5px 5px 16px rgba(0,0,0,.35);
  --sh-neu-in:  inset -2px -2px 6px rgba(255,255,255,.03), inset 2px 2px 6px rgba(0,0,0,.35);
  --sh-float:   0 12px 32px -8px rgba(0,0,0,.55);
  --sh-glass:   0 8px 24px -6px rgba(0,0,0,.45);
  --glass-bg:   rgba(24,26,27,.72);
}

/* Cartes : radius + ombres neumorphiques */
.card { border-radius: var(--r-md); border: 1px solid rgba(0,0,0,.03); box-shadow: var(--sh-neu-out); }
.card-p { padding: 22px 22px; }
html.dark .card { border-color: rgba(255,255,255,.04); }

/* Inputs */
.inp { border-radius: var(--r-sm); padding: 16px 18px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.inp:focus { box-shadow: 0 0 0 4px rgba(10,74,46,.08); border-color: rgba(10,74,46,.35); }
.srch { border-radius: var(--r-sm); padding: 15px 18px; }
.srch:focus-within { box-shadow: 0 0 0 4px rgba(10,74,46,.08); }

/* Boutons */
.btn { border-radius: var(--r-sm); padding: 17px 22px; letter-spacing: 0; }
.btn-gold { box-shadow: 0 10px 28px -6px rgba(212,160,23,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-gold:hover { box-shadow: 0 14px 36px -6px rgba(212,160,23,.55); }
.btn-forest { box-shadow: 0 10px 28px -6px rgba(10,74,46,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-forest:hover { box-shadow: 0 14px 36px -6px rgba(10,74,46,.45); }
.btn-sm { border-radius: var(--r-xs); padding: 12px 20px; }
.btn-ghost { background: rgba(255,255,255,.6); border: 1px solid rgba(10,74,46,.08); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.dark .btn-ghost { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.06); }

/* Back button glass */
.back-btn { width: 42px; height: 42px; background: var(--glass-bg); border: 1px solid rgba(10,74,46,.06); box-shadow: var(--sh-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html.dark .back-btn { border-color: rgba(255,255,255,.05); }

/* Bottom nav : capsule flottante verre */
.bnav { position: absolute; left: 14px; right: 14px; bottom: calc(10px + var(--sab)); padding: 8px 6px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 100px; border: 1px solid rgba(10,74,46,.08); box-shadow: var(--sh-float); border-top: 1px solid rgba(10,74,46,.08); }
html.dark .bnav { border-color: rgba(255,255,255,.06); border-top-color: rgba(255,255,255,.06); }
.bt { border-radius: var(--r-round); padding: 8px 12px; min-width: 52px; }
.bt.on { background: rgba(10,74,46,.10); }
.scroll { padding-bottom: calc(84px + var(--sab)); }

/* Balance card fluide (nouveau composant .gp-bal-card) */
.gp-bal-card {
  position: relative; overflow: hidden;
  padding: 26px 26px 28px; border-radius: var(--r-lg); color: #fff;
  background:
    radial-gradient(90% 70% at 15% 15%, rgba(189,247,208,.35), transparent 60%),
    radial-gradient(80% 60% at 90% 90%, rgba(212,160,23,.28), transparent 60%),
    linear-gradient(155deg, var(--forest) 0%, var(--forest2) 55%, #1A5C38 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  box-shadow: 0 20px 40px -12px rgba(10,74,46,.35), inset 0 1px 0 rgba(255,255,255,.10);
  animation: gp-fluid-flow 16s ease-in-out infinite alternate;
}
@keyframes gp-fluid-flow {
  from { background-position: 0% 0%, 100% 100%, 0% 0%; }
  to   { background-position: 40% 30%, 60% 70%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) { .gp-bal-card { animation: none; } }
.gp-bal-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 20% 110%, rgba(189,247,208,.20), transparent 60%);
  pointer-events: none;
}
.gp-bal-label { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 10px; position: relative; z-index: 1; }
.gp-bal-amount { font-family: var(--fd); font-size: 2.6rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 8px; position: relative; z-index: 1; }
.gp-bal-amount small { font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.gp-bal-sub { margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--green3); display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
.gp-bal-card.gold {
  background:
    radial-gradient(90% 70% at 15% 15%, rgba(253,230,138,.35), transparent 60%),
    radial-gradient(80% 60% at 90% 90%, rgba(10,74,46,.30), transparent 60%),
    linear-gradient(155deg, var(--gold), var(--gold2) 55%, #B48200 100%);
  color: var(--forest);
  box-shadow: 0 20px 40px -12px rgba(212,160,23,.40);
}
.gp-bal-card.gold .gp-bal-label { color: rgba(10,74,46,.7); }
.gp-bal-card.gold .gp-bal-amount { color: var(--forest); }
.gp-bal-card.gold .gp-bal-sub { color: var(--forest); }

/* Quick actions circulaires (nouveau composant .gp-quick) */
.gp-quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 4px; }
.gp-quick { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px 0; color: var(--txt); font-size: .68rem; font-weight: 700; letter-spacing: .02em; font-family: var(--f); transition: transform .15s; }
.gp-quick:active { transform: scale(.94); }
.gp-quick-c { width: 56px; height: 56px; border-radius: 50%; background: var(--card); box-shadow: var(--sh-neu-out); display: flex; align-items: center; justify-content: center; color: var(--forest); }
.gp-quick-c svg { width: 22px; height: 22px; stroke-width: 2; fill: none; stroke: currentColor; }

/* Transactions en pilules (nouveau composant .gp-tx-pill) */
.gp-tx-pill { display: grid; grid-template-columns: 42px 1fr max-content; gap: 14px; align-items: center; padding: 12px 16px; background: rgba(255,255,255,.55); border-radius: var(--r-round); border: 1px solid rgba(10,74,46,.04); transition: background-color .15s, transform .12s; cursor: pointer; }
.gp-tx-pill:active { transform: scale(.995); background: rgba(255,255,255,.85); }
html.dark .gp-tx-pill { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.04); }
html.dark .gp-tx-pill:active { background: rgba(255,255,255,.06); }
.gp-tx-pill-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; background: var(--bg2); color: var(--forest); box-shadow: inset 0 0 0 1px rgba(10,74,46,.06); }
.gp-tx-pill-name { font-size: .86rem; font-weight: 700; color: var(--txt); letter-spacing: -0.005em; }
.gp-tx-pill-meta { font-size: .66rem; color: var(--txt3); margin-top: 2px; font-family: var(--fm); }
.gp-tx-pill-amt { font-family: var(--fd); font-size: .90rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--txt); }
.gp-tx-pill-amt.in { color: #15803D; }
.gp-tx-pill-amt.fail { color: #dc2626; }

/* Salutation serif italique */
.gp-greet { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; font-style: italic; font-size: 1.5rem; color: var(--txt); letter-spacing: -0.01em; line-height: 1.1; }
.gp-greet small { display: block; font-family: var(--fm); font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; font-style: normal; }

/* Chips */
.gp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(10,74,46,.06); color: var(--forest); border-radius: var(--r-round); font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.gp-chip.gold { background: rgba(212,160,23,.12); color: #8B6A00; }
.gp-chip.green { background: rgba(22,163,74,.14); color: #14532D; }
.gp-chip.red { background: rgba(220,38,38,.10); color: #B91C1C; }

/* Section titles */
.gp-sec-title { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 12px; font-size: .78rem; font-weight: 800; color: var(--txt); letter-spacing: -0.005em; }
.gp-sec-title .more { font-size: .68rem; font-weight: 700; color: var(--forest); cursor: pointer; }

/* Boosters : uplift des styles inline existants vers Estuaire */
[style*="border-radius:14px"] { border-radius: var(--r-sm) !important; }
[style*="border-radius: 14px"] { border-radius: var(--r-sm) !important; }
[style*="border-radius:16px"] { border-radius: 22px !important; }
[style*="border-radius: 16px"] { border-radius: 22px !important; }
[style*="border-radius:18px"] { border-radius: var(--r-md) !important; }
[style*="border-radius: 18px"] { border-radius: var(--r-md) !important; }
[style*="border-radius:20px"] { border-radius: 28px !important; }
[style*="border-radius: 20px"] { border-radius: 28px !important; }
[style*="border-radius:22px"] { border-radius: var(--r-lg) !important; }
[style*="border-radius: 22px"] { border-radius: var(--r-lg) !important; }
[style*="background:#fff"][style*="border-radius"] { box-shadow: var(--sh-neu-out) !important; border-color: rgba(0,0,0,.03) !important; }
html.dark [style*="background:#fff"][style*="border-radius"] { box-shadow: var(--sh-neu-out) !important; }
[style*="background:#F5F2EA"] { border-radius: var(--r-sm) !important; }

/* Desktop : souffle Estuaire */
.gp-content { padding: 32px 40px; }
.gp-chart-card, .gp-activity-card { border-radius: var(--r-lg); box-shadow: var(--sh-neu-out); border: 1px solid rgba(0,0,0,.03); }
.gp-topbar-notif { border-radius: 50%; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(10,74,46,.06); box-shadow: var(--sh-glass); }
.gp-topbar-av, .gp-sidebar-av { box-shadow: 0 6px 16px -4px rgba(10,74,46,.30); }
.gp-nav-item { border-radius: var(--r-sm); transition: background-color .18s, transform .12s; }
.gp-nav-item.gp-active { background: linear-gradient(135deg, var(--forest), var(--green)); color: var(--gold3); box-shadow: 0 8px 18px -4px rgba(10,74,46,.35); }

/* Modales & overlays */
.modal-box, #gp-modal-box { border-radius: var(--r-lg); box-shadow: var(--sh-float); }
.overlay .ov-btn { border-radius: var(--r-sm); }

/* ══════════════════════════════════════════════════════════════
   ESTUAIRE · Refinement Pass (2026-07)
   Objectif : hiérarchie + lisibilité, sans toucher à la palette.
   Portée : mobile (< 1280 px). Chaque section cible un écran.
   ══════════════════════════════════════════════════════════════ */

/* ── HOME ─────────────────────────────────────────────────────
   Fix critique : .gp-greet héritait `color:var(--txt)` (foncé)
   posé sur un fond forest → nom invisible. On corrige la
   hiérarchie complète du header : petit label mono doré +
   nom serif italique blanc, avec ombre subtile pour poser. */
.home-hdr{
  padding: 4px 20px 26px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.18), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
}
.home-hdr::after{
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(240,192,64,.14), transparent 68%);
  right: -80px; top: -110px;
}
.home-hdr .gp-greet{
  color: #FFFDF6;
  text-shadow: 0 1px 12px rgba(0,0,0,.18);
  font-size: 1.55rem;
}
.home-hdr .gp-greet small{
  color: var(--gold3);
  opacity: .78;
  letter-spacing: .22em;
  font-size: .55rem;
  margin-bottom: 5px;
}
.home-topbar{ padding: 6px 0 18px; }
html.dark .home-hdr{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.15), transparent 55%),
    linear-gradient(160deg, #062B1B 0%, #073823 55%, #0A4429 100%);
}

/* Carte de solde : renfort du contour doré + fluidité de l'ombre */
.home-hdr .gp-bal-card{
  padding: 22px 24px 24px;
  border: 1px solid rgba(240,192,64,.20);
  box-shadow:
    0 24px 48px -14px rgba(4,20,12,.55),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(240,192,64,.06);
}
.home-hdr .gp-bal-label{ font-size: .58rem; letter-spacing: .2em; }
.home-hdr .gp-bal-amount{ font-size: 2.35rem; }
.home-hdr .gp-bal-amount small{ font-size: .62rem; letter-spacing: .18em; }
.home-hdr .bal-eye{
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.10);
}
.home-hdr .bal-eye svg{ width: 15px; height: 15px; stroke: rgba(255,255,255,.75); }

/* Actions rapides : cercles plus tactiles, label mono discret */
.qa-section{ padding: 16px 12px 4px; background: var(--card); }
.gp-quick-row{ gap: 4px; padding: 2px 4px; }
.gp-quick{
  gap: 9px; padding: 8px 0;
  font-size: .60rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800;
  color: var(--txt2);
}
.gp-quick-c{
  width: 54px; height: 54px;
  background: var(--bg2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 14px -8px rgba(10,74,46,.30),
    0 0 0 1px rgba(10,74,46,.05);
}
.gp-quick-c svg{ width: 20px; height: 20px; stroke-width: 2.2; }
/* Les quatre actions sont de même rang : quatre pastilles identiques.
   Avant, Envoyer était vert plein, Recevoir et Transfert pâles, Tontine
   dorée — l'œil lisait une hiérarchie qui n'existe pas, et l'or disait
   « c'est ici » sur l'action la moins courante des quatre. Le seul or de
   l'accueil est désormais le bouton QR de la barre du bas. */
html.dark .gp-quick-c{
  background: var(--bg3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 6px 14px -8px rgba(0,0,0,.6);
  color: var(--gold2);
}

/* Bande Coffre : plus généreuse, or plus vibrant, flèche visible */
.cstrip{
  margin: 16px 16px 4px;
  padding: 16px 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, var(--forest) 0%, var(--forest2) 60%, #1A6B40 100%);
  border: 1px solid rgba(240,192,64,.24);
  box-shadow: 0 10px 24px -10px rgba(10,74,46,.45);
}
.cstrip-ic{
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(240,192,64,.20);
  box-shadow: inset 0 0 0 1px rgba(240,192,64,.20);
}
.cstrip-ic svg{ width: 19px; height: 19px; }
.cstrip-t{ font-size: .78rem; letter-spacing: -.005em; }
.cstrip-s{ font-size: .62rem; color: rgba(255,255,255,.52); }
.cstrip-val{ font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cstrip-arr svg{ stroke: rgba(240,192,64,.55); }

/* Titre de section : plus généreux */
.gp-sec-title{ padding: 18px 16px 10px 16px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--txt2); }
.gp-sec-title .more{ font-size: .62rem; font-weight: 800; color: var(--forest); text-transform: uppercase; letter-spacing: .1em; }

/* ── SEND / RECEVOIR ──────────────────────────────────────────
   Méthodes segmentées + libellés section homogènes. */
.send-methods{ gap: 9px; }
.send-method{
  padding: 12px 4px; border-radius: 14px;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
  transition: border-color .15s, background .15s, transform .12s;
}
.send-method.active{
  border-color: var(--forest);
  background: linear-gradient(180deg, rgba(10,74,46,.08), rgba(10,74,46,.03));
  color: var(--forest);
  box-shadow: 0 6px 14px -8px rgba(10,74,46,.30);
}
.send-method svg{ width: 18px; height: 18px; }
.send-method span{ font-size: .68rem; font-weight: 800; letter-spacing: .02em; }

/* Contact chip : cercle plus vif */
.contact .c-av{
  width: 56px; height: 56px;
  box-shadow: 0 6px 14px -6px rgba(10,74,46,.35);
}
.contact.selected .c-av,
.c-av.sel{
  border-color: var(--green2);
  box-shadow: 0 8px 18px -6px rgba(22,163,74,.5);
}
.c-name{ font-size: .58rem; font-weight: 800; letter-spacing: .02em; }

/* Barre destinataire */
.rec-bar{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1.5px solid rgba(22,163,74,.25);
  background:
    linear-gradient(180deg, rgba(22,163,74,.09), rgba(22,163,74,.03));
  box-shadow: 0 6px 16px -10px rgba(22,163,74,.35);
}
.rec-bar .rec-av{
  box-shadow: 0 6px 14px -6px rgba(10,74,46,.4);
  border: 2px solid #fff;
}

/* Recevoir : carte QR blanche mieux posée */
#sc-recv .home-hdr{
  padding-bottom: 20px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
#sc-recv #recv-qr-real{
  padding: 8px;
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(10,74,46,.06);
}

/* ── COFFRE ───────────────────────────────────────────────────
   Header aligné sur home + item de coffre avec meilleure
   hiérarchie (nom en gras, date en mono, progression contrastée). */
.coffre-hdr{
  padding: 4px 20px 26px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.20), transparent 55%),
    linear-gradient(160deg, var(--forest), var(--forest2) 55%, #1A6B40 100%);
}
.coffre-hdr::after{ width: 300px; height: 300px; background: radial-gradient(circle, rgba(240,192,64,.16), transparent 70%); }
.coffre-hdr-top{ padding: 8px 0 20px; }
.coffre-ttl{ font-size: 1.05rem; letter-spacing: -.005em; }
.coffre-plus{
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(240,192,64,.18);
  box-shadow: inset 0 0 0 1px rgba(240,192,64,.22);
}
.coffre-plus svg{ stroke: var(--gold2); }
.coffre-total-lbl{ font-size: .58rem; letter-spacing: .2em; color: rgba(255,255,255,.6); }
.coffre-total-val{ font-size: 2.35rem; font-variant-numeric: tabular-nums; }
.coffre-rate{
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.30);
  padding: 6px 12px;
  font-size: .58rem; letter-spacing: .04em;
}

/* Item coffre : carte plus généreuse, ombre douce */
.coffre-item{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 8px 20px -14px rgba(10,74,46,.25);
  transition: transform .15s, box-shadow .18s;
}
.coffre-item:active{ transform: scale(.985); }
.coffre-item:hover{ box-shadow: 0 12px 26px -14px rgba(10,74,46,.30); }
.ci-head{ margin-bottom: 16px; }
.ci-ic{
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(140deg, rgba(10,74,46,.10), rgba(22,163,74,.08));
  box-shadow: inset 0 0 0 1px rgba(10,74,46,.08);
}
.ci-name{ font-size: .88rem; letter-spacing: -.005em; }
.ci-dl{ font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; }
.ci-val{ font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ci-rate{ font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.ci-bar-bg{ height: 8px; background: var(--bg2); box-shadow: inset 0 1px 2px rgba(10,74,46,.08); }
.ci-bar{ box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }

/* ── TONTINE ──────────────────────────────────────────────────
   .tontine-item existant + ajouts pour la barre d'action et
   le calendrier des tours (cf. tontine.js) plus lisibles. */
.tontine-item{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 8px 20px -14px rgba(10,74,46,.22);
}
.tnt-av{
  width: 44px; height: 44px;
  box-shadow: 0 6px 14px -6px rgba(10,74,46,.35);
  border: 2px solid #fff;
}
.tnt-name{ font-size: .88rem; letter-spacing: -.005em; }
.tnt-members{ font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.tnt-val{ font-size: 1rem; font-variant-numeric: tabular-nums; }
.tnt-cycle{ font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
.tnt-bar-bg{ height: 7px; background: var(--bg2); box-shadow: inset 0 1px 2px rgba(10,74,46,.08); }
.tnt-turn{
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22,163,74,.10), rgba(22,163,74,.04));
  border: 1px solid rgba(22,163,74,.22);
  font-size: .66rem; padding: 9px 12px;
}
.tnt-btn{
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,74,46,.09), rgba(10,74,46,.04));
  border: 1.5px solid rgba(10,74,46,.20);
  color: var(--forest);
  font-size: .82rem; font-weight: 800;
  box-shadow: 0 4px 12px -8px rgba(10,74,46,.3);
  transition: transform .12s, background .15s, box-shadow .18s;
}
.tnt-btn:active{ transform: scale(.97); }
.tnt-btn:hover{ background: linear-gradient(180deg, rgba(10,74,46,.13), rgba(10,74,46,.06)); }

/* ── BUDGET ───────────────────────────────────────────────────
   Cartes dépenses/revenus plus impactantes ; onglets élégants ;
   liste catégories mieux respirée. */
#sc-budget .bud-tabs{
  background: var(--bg2);
  border-radius: 14px;
  padding: 5px;
  box-shadow: inset 0 1px 2px rgba(10,74,46,.06);
}
#sc-budget .btab{
  padding: 10px 6px;
  font-size: .60rem;
  letter-spacing: .1em;
}
#sc-budget .btab.on{
  background: var(--card);
  box-shadow: 0 4px 12px -4px rgba(10,74,46,.20);
  color: var(--forest);
}
.bud-cards{ gap: 12px; }
.bud-card{
  padding: 18px;
  border-radius: 20px;
  box-shadow: 0 10px 24px -12px rgba(10,74,46,.30);
  position: relative; overflow: hidden;
}
.bud-card::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.bud-card-lbl{ font-size: .56rem; letter-spacing: .16em; }
.bud-card-val{ font-size: 1.18rem; font-variant-numeric: tabular-nums; margin-top: 6px; }
.bud-card-ic{
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  position: relative; z-index: 1;
}
.bud-card-ic svg{ width: 19px; height: 19px; }

/* Cat items */
.cat-item{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 4px 14px -10px rgba(10,74,46,.15);
}
.cat-ic{
  width: 40px; height: 40px; border-radius: 13px;
}
.cat-name{ font-size: .8rem; letter-spacing: -.005em; }
.cat-bar-wrap{ height: 6px; background: var(--bg2); }
.cat-val{ font-size: .82rem; font-variant-numeric: tabular-nums; }
.cat-pct{ font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }

/* Libellé section budget/coffre */
.lbl{ font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--txt3); padding: 2px 4px; }

/* ── TRANSFERT MOBILE MONEY ───────────────────────────────────
   Tabs plus lisibles, en-tête cohérent avec le reste. */
#sc-transfert .snav{ border-bottom: 1px solid var(--border); }
.tr-tab{
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .12s, background .15s, color .15s, border-color .15s;
}
.tr-tab.on{
  background: linear-gradient(135deg, var(--forest), var(--green));
  color: #FDE68A;
  border-color: var(--forest);
  box-shadow: 0 6px 14px -6px rgba(10,74,46,.45);
}
.tr-tab:active{ transform: scale(.96); }

.tr-dir{
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card), var(--bg));
  border: 1.5px solid rgba(10,74,46,.08);
  box-shadow: 0 6px 16px -12px rgba(10,74,46,.20);
}
.tr-dir-ep{ font-size: .92rem; letter-spacing: -.005em; }
.tr-chip{
  background: var(--bg2);
  border-color: rgba(10,74,46,.08);
  font-size: .62rem;
  font-weight: 800;
  padding: 5px 12px;
}
.tr-amt-display{ padding: 12px 0 6px; }
.tr-amt-display #tr-amt-big, .tr-amt-display .big{ font-size: 2.5rem; font-variant-numeric: tabular-nums; }
.tr-info{
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 4px 14px -10px rgba(10,74,46,.15);
  padding: 4px 16px;
}
.tr-info .l{ font-size: .76rem; padding: 11px 0; }

/* ── PROFIL ───────────────────────────────────────────────────
   Header cohérent + stats-cells plus contrastées + menu items
   à séparateurs plus doux. */
.profil-hdr{
  padding: 4px 20px 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.20), transparent 55%),
    linear-gradient(160deg, var(--forest), var(--forest2) 55%, #1A6B40 100%);
}
.profil-hdr::after{
  background: radial-gradient(circle at 78% 30%, rgba(240,192,64,.14), transparent 62%);
}
.profil-av{
  width: 90px; height: 90px;
  font-size: 2.1rem;
  border: 3.5px solid rgba(255,255,255,.24);
  box-shadow:
    0 14px 30px -10px rgba(4,20,12,.55),
    inset 0 1px 0 rgba(255,255,255,.15);
  margin-bottom: 14px;
}
.profil-name{
  font-size: 1.15rem; font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.20);
}
.profil-phone{
  color: rgba(255,255,255,.62);
  font-size: .68rem;
  letter-spacing: .04em;
}
.profil-loc{
  color: rgba(255,255,255,.5);
  font-size: .66rem;
  letter-spacing: .02em;
  margin-top: 4px;
}
.profil-badge{
  padding: 6px 14px;
  background: rgba(240,192,64,.18);
  border: 1px solid rgba(240,192,64,.32);
  color: var(--gold2);
  font-size: .60rem;
  letter-spacing: .08em;
}

.pstats{
  background: transparent;
  gap: 8px;
  border-radius: 20px;
  overflow: visible;
}
.pstat{
  background: var(--card);
  padding: 16px 8px;
  border-radius: 16px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 6px 16px -12px rgba(10,74,46,.20);
}
.pstat-n{
  font-size: 1.35rem; font-variant-numeric: tabular-nums;
  color: var(--forest);
}
.pstat-l{
  font-size: .5rem; letter-spacing: .12em;
  margin-top: 4px;
}

.menu-grp{
  border-radius: 20px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 6px 16px -12px rgba(10,74,46,.18);
}
.mi{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(10,74,46,.05);
  transition: background .12s;
}
.mi:active{ background: rgba(10,74,46,.03); }
.mi-ic{
  width: 40px; height: 40px; border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.mi-title{ font-size: .84rem; letter-spacing: -.005em; font-weight: 800; }
.mi-sub{ font-size: .62rem; letter-spacing: .02em; }
.mi-arr svg{ stroke: var(--txt3); }
.mi-tag{
  font-size: .54rem; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 8px;
  text-transform: uppercase; font-weight: 800;
}

/* Bouton logout : rendu cohérent, plus doux */
.btn.btn-danger{
  background: linear-gradient(180deg, rgba(220,38,38,.10), rgba(220,38,38,.05));
  border: 1.5px solid rgba(220,38,38,.24);
  color: #B91C1C;
  box-shadow: 0 4px 12px -8px rgba(220,38,38,.35);
}
.btn.btn-danger svg{ stroke: #B91C1C; }
.btn.btn-danger:active{ transform: scale(.98); }

/* ── Boosters : neutralise les inline-styles trop opaques ──── */
/* Sur les cartes internes construites en inline (recv, budget)
   on garantit un rendu cohérent avec le reste d'Estuaire. */
#sc-recv [style*="background:#fff"]{
  border: 1px solid rgba(10,74,46,.06) !important;
  box-shadow: 0 10px 26px -14px rgba(10,74,46,.25) !important;
}
#sc-recv [style*="rgba(10,74,46,.07)"]{
  background: linear-gradient(180deg, rgba(10,74,46,.08), rgba(10,74,46,.03)) !important;
  border: 1px solid rgba(10,74,46,.14) !important;
}

/* ══════════════════════════════════════════════════════════════
   ESTUAIRE · Innovation Pass v2 (2026-07)
   Ambition : agencements distinctifs, hiérarchie plus forte,
   composants signature (flow visuel, carte membre, split bar).
   ══════════════════════════════════════════════════════════════ */

/* ── BUDGET · Header immersif + Hero bilan net ────────────── */
.bud-hdr{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.20), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
  padding: 4px 18px 8px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.bud-hdr::after{
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,.14), transparent 68%);
  right: -100px; top: -110px;
  pointer-events: none;
}
.bud-nav{
  display: flex; align-items: center;
  padding: 8px 0 6px;
  gap: 14px;
  position: relative; z-index: 1;
}
.bud-nav .back-btn.dk{ background: rgba(255,255,255,.10); }
.bud-nav .snav-t{ color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: -.005em; }
.bud-month{
  margin-left: auto;
  font-family: var(--fm);
  font-size: .58rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(240,192,64,.20);
}

/* HERO — bilan net */
.bud-hero{
  position: relative; z-index: 1;
  margin: 10px 0 2px;
}
.bud-hero-lbl{
  font-size: .58rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-family: var(--fm);
  font-weight: 700;
  margin-bottom: 6px;
}
.bud-hero-net{
  font-family: var(--fd);
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.bud-hero-net small{
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .18em;
  margin-left: 4px;
}
.bud-hero-delta{
  display: inline-block;
  margin-top: 8px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.10);
  color: var(--gold3);
  border: 1px solid rgba(240,192,64,.28);
}

/* Split bar dépenses / revenus */
.bud-split{
  display: flex;
  height: 12px;
  margin: 18px 0 12px;
  border-radius: 100px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06);
}
.bud-split-in{
  background: linear-gradient(90deg, #22C55E, #16A34A);
  transition: width .55s cubic-bezier(.4,0,.2,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}
.bud-split-out{
  background: linear-gradient(90deg, #FBBF24, #E8A517);
  transition: width .55s cubic-bezier(.4,0,.2,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}
.bud-split-lg{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.bud-split-item{
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: rgba(255,255,255,.07);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.bud-split-item .bud-split-dot{
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.bud-split-item.in .bud-split-dot{ background: linear-gradient(135deg, #22C55E, #16A34A); }
.bud-split-item.out .bud-split-dot{ background: linear-gradient(135deg, #FBBF24, #E8A517); }
.bud-split-item > div{ display: flex; flex-direction: column; min-width: 0; }
.bud-split-k{
  font-size: .5rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--fm);
  font-weight: 700;
}
.bud-split-v{
  font-family: var(--fd);
  font-size: .84rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Onglets budget dans header (dark variant) */
.bud-tabs-wrap{ padding: 10px 0 0; position: relative; z-index: 1; }
.bud-hdr .bud-tabs{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  padding: 5px;
  border-radius: 14px;
  display: flex;
  gap: 4px;
}
.bud-hdr .btab{
  color: rgba(255,255,255,.5);
  font-size: .60rem;
  letter-spacing: .12em;
  font-weight: 800;
  padding: 10px 6px;
}
.bud-hdr .btab.on{
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: var(--forest);
  box-shadow: 0 4px 10px -4px rgba(212,160,23,.5);
}

/* Section headers dans le corps budget */
.bud-sec-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
}
.bud-sec-t{
  font-size: .68rem;
  font-weight: 800;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.bud-csv{
  border: none;
  background: linear-gradient(180deg, var(--card), var(--bg2));
  color: var(--forest);
  font-size: .58rem;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--f);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 1px solid rgba(10,74,46,.10);
  box-shadow: 0 2px 8px -4px rgba(10,74,46,.15);
}
.bud-csv:active{ transform: scale(.96); }

/* ── TRANSFERT · Flow visuel signature ────────────────────── */
.tr-flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px;
  align-items: center;
  padding: 20px 14px 18px;
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid rgba(10,74,46,.08);
  border-radius: 22px;
  box-shadow: 0 10px 26px -14px rgba(10,74,46,.30);
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.tr-flow::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(212,160,23,.10), transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(10,74,46,.06), transparent 60%);
  pointer-events: none;
}
.tr-flow-op{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative; z-index: 1;
  min-width: 0;
}
.tr-flow-badge{
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow:
    0 8px 20px -6px rgba(10,74,46,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
}
/* Logo GhettoPay = PNG transparent, on le laisse respirer sur bg crème */
.tr-flow-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  display: block;
}
/* Airtel & Moov = SVG plein cadre */
.tr-flow-logo-svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* Chaque opérateur son ring subtil autour du badge */
.tr-badge-gp{ box-shadow: 0 8px 20px -6px rgba(10,74,46,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.tr-badge-airtel{ box-shadow: 0 8px 20px -6px rgba(232,37,42,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.tr-badge-moov{ box-shadow: 0 8px 20px -6px rgba(247,144,14,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.tr-flow-lbl{
  font-size: .68rem;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.005em;
  text-align: center;
  white-space: nowrap;
}
.tr-flow-meta{
  font-size: .54rem;
  font-family: var(--fm);
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tr-flow-arrow{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  color: var(--tr-c, var(--forest));
  position: relative; z-index: 1;
}
.tr-flow-dot{
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: trFlowPulse 1.8s ease-in-out infinite;
}
.tr-flow-dot:nth-child(2){ animation-delay: .3s; }
.tr-flow-dot:nth-child(3){ animation-delay: .6s; }
@keyframes trFlowPulse{
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.tr-flow-arrow svg{
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
html.dark .tr-flow{
  background: linear-gradient(180deg, var(--card), var(--bg3));
  border-color: rgba(255,255,255,.06);
}
html.dark .tr-flow-badge{ border-color: var(--bg2); }

/* Amount card centrepiece */
.tr-amount-card{
  background: var(--card);
  border: 1.5px solid rgba(10,74,46,.08);
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 26px -16px rgba(10,74,46,.22);
}
.tr-amount-lbl{
  font-size: .58rem;
  font-weight: 800;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--fm);
  margin-bottom: 6px;
  text-align: center;
}
.tr-amount-card .tr-amt-display{
  padding: 6px 0 12px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
}
.tr-amount-card .tr-amt-display #tr-amt-big,
.tr-amount-card .tr-amt-display .big{
  font-size: 2.7rem;
  letter-spacing: -.03em;
}
.tr-pills{
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}
.tr-pills .pill{
  padding: 7px 14px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  color: var(--txt2);
  cursor: pointer;
  transition: .15s;
}
.tr-pills .pill.on{
  background: linear-gradient(135deg, var(--forest), var(--green));
  color: #FDE68A;
  border-color: var(--forest);
  box-shadow: 0 4px 10px -4px rgba(10,74,46,.4);
}
.tr-pills .pill:active{ transform: scale(.94); }

.tr-inp{
  background: var(--bg);
  border: 1.5px solid var(--border);
}
.tr-inp:focus{
  border-color: var(--forest);
  background: var(--card);
  box-shadow: 0 0 0 4px rgba(10,74,46,.08);
}

/* Reçu live */
.tr-receipt-live{
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card), var(--bg));
  border: 1px solid rgba(10,74,46,.06);
  padding: 4px 16px;
  position: relative;
}
.tr-receipt-live::before{
  content: '';
  position: absolute;
  top: -6px; left: 20px; right: 20px;
  height: 6px;
  background:
    radial-gradient(circle at 6px 6px, transparent 4px, var(--bg) 5px) 0 0/12px 12px;
}
.tr-receipt-live .l{
  padding: 12px 0;
  font-size: .76rem;
}
.tr-receipt-live .l.strong{
  border-top: 1.5px solid var(--border);
  margin-top: 2px;
  padding-top: 14px;
}
.tr-receipt-live .l.strong span{
  font-size: .84rem;
  color: var(--forest);
}
.tr-receipt-live .l em{ font-style: normal; color: var(--txt3); font-weight: 600; }

/* Submit CTA */
.tr-submit{
  margin-top: 6px;
  padding: 16px;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 12px 26px -10px rgba(212,160,23,.5);
}

/* ── PROFIL · Carte membre + track niveaux ───────────────── */
.profil-hdr{
  padding: 4px 18px 6px;
}
.prof-card{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  background:
    linear-gradient(140deg, #0F5C38 0%, #0A4A2E 60%, #062B1B 100%);
  border: 1.5px solid rgba(240,192,64,.35);
  box-shadow:
    0 20px 40px -14px rgba(4,20,12,.55),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(240,192,64,.10);
  overflow: hidden;
  z-index: 1;
}
.prof-card-guilloche{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(240,192,64,.16), transparent 40%),
    repeating-linear-gradient(45deg, rgba(240,192,64,.045) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(240,192,64,.045) 0 2px, transparent 2px 8px);
  pointer-events: none;
}
.prof-card-top{
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.prof-card .profil-av{
  width: 70px; height: 70px;
  margin: 0;
  font-size: 1.8rem;
  border: 3px solid rgba(240,192,64,.5);
  flex-shrink: 0;
  box-shadow:
    0 8px 20px -6px rgba(4,20,12,.55),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.prof-card-body{ flex: 1; min-width: 0; }
.prof-card-eye{
  font-size: .5rem;
  font-family: var(--fm);
  color: var(--gold3);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 700;
  opacity: .82;
  margin-bottom: 4px;
}
.prof-card .profil-name{
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.30);
  letter-spacing: -.005em;
  line-height: 1.15;
}
.prof-card .profil-phone{
  font-family: var(--fm);
  font-size: .66rem;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
  letter-spacing: .06em;
}
.prof-card-bottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(240,192,64,.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.prof-loc-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .58rem;
  color: rgba(255,255,255,.6);
  font-family: var(--fm);
  letter-spacing: .06em;
}
.prof-loc-chip svg{ stroke: var(--gold3); opacity: .8; }
.prof-badge-lvl{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(240,192,64,.16);
  border: 1px solid rgba(240,192,64,.35);
  color: var(--gold2);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--fm);
}
.prof-badge-lvl b{ color: #fff; font-weight: 900; }
.prof-badge-lvl svg{ stroke: var(--gold2); }

/* Track niveaux */
.prof-track{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 4px 4px;
  padding: 4px 0;
  position: relative;
  z-index: 1;
}
.prof-track-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.prof-track-dot{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.22);
}
.prof-track-step.done .prof-track-dot{
  background: var(--green);
  border-color: var(--green2);
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
}
.prof-track-step.active .prof-track-dot{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-color: var(--gold3);
  box-shadow: 0 0 0 3px rgba(240,192,64,.28), 0 4px 10px -2px rgba(212,160,23,.5);
  width: 14px; height: 14px;
}
.prof-track-step span{
  font-size: .48rem;
  font-family: var(--fm);
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
}
.prof-track-step.done span{ color: var(--green3); }
.prof-track-step.active span{ color: var(--gold3); font-weight: 800; }
.prof-track-line{
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.15);
  border-radius: 100px;
  margin-bottom: 12px;
}
.prof-track-line.done{ background: linear-gradient(90deg, var(--green), var(--gold)); }

/* Stats v2 : hero + 2 mini */
.prof-stats-v2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  margin-top: 4px;
}
.prof-stat-hero{
  grid-column: 1 / -1;
  padding: 18px 18px 20px;
  border-radius: 20px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(240,192,64,.18), transparent 55%),
    linear-gradient(160deg, var(--forest), var(--forest2));
  border: 1px solid rgba(240,192,64,.28);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(10,74,46,.4);
  position: relative;
  overflow: hidden;
}
.prof-stat-hero::after{
  content: '';
  position: absolute;
  right: -20px; top: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,.16), transparent 65%);
  pointer-events: none;
}
.prof-stat-eye{
  font-size: .54rem;
  color: rgba(255,255,255,.55);
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  margin-bottom: 6px;
}
.prof-stat-hero-v{
  font-family: var(--fd);
  font-size: 1.95rem;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold3);
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.prof-stat-hero-v small{
  font-size: .58rem;
  color: rgba(240,192,64,.6);
  letter-spacing: .18em;
  font-weight: 700;
  margin-left: 4px;
}
.prof-stat-hero-sub{
  margin-top: 8px;
  font-size: .62rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .01em;
}
.prof-stat-mini{
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(10,74,46,.06);
  box-shadow: 0 6px 16px -12px rgba(10,74,46,.18);
  text-align: center;
}
.prof-stat-mini-v{
  font-family: var(--fd);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.prof-stat-mini-l{
  font-size: .5rem;
  color: var(--txt3);
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin-top: 4px;
}

/* Section labels + menu with left color hint */
.prof-sec-lbl{
  font-size: .58rem;
  font-weight: 800;
  color: var(--txt3);
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 8px 4px 4px;
  font-family: var(--fm);
}
.menu-money{ border-left: 3px solid var(--green); }
.menu-community{ border-left: 3px solid var(--gold2); }
.menu-security{ border-left: 3px solid var(--txt3); }
html.dark .menu-money,
html.dark .menu-community,
html.dark .menu-security{ border-left-width: 3px; }

/* ── Micro-fix : reset budget hdr override du refinement v1 ─
   La v1 déclarait déjà un header forest sur .home-hdr générique.
   Ici on s'assure que le budget-hdr prime. */
#sc-budget .snav-t{ color: #fff; }
#sc-budget .back-btn.dk svg{ stroke: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════════════
   ESTUAIRE · Innovation Pass v3 (send / recv / coffre / tontine)
   ══════════════════════════════════════════════════════════════ */

/* ── ENVOYER · Header immersif ────────────────────────────── */
.send-hdr{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.18), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
  padding: 4px 18px 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.send-hdr::after{
  content:''; position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,.14), transparent 68%);
  right: -90px; top: -110px;
  pointer-events: none;
}
.send-hdr .snav-t{ color:#fff; font-size:.95rem; font-weight:800; letter-spacing:-.005em; }
.send-eye{
  font-family: var(--fm);
  font-size: .56rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
  margin-top: 6px;
  position: relative; z-index: 1;
}
.send-amt-box{
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1.5px solid rgba(212,160,23,.20);
  padding: 22px 18px 18px;
  box-shadow: 0 12px 28px -14px rgba(212,160,23,.30);
}
.send-amt-box .amt-lbl{
  color: var(--txt3);
  letter-spacing: .18em;
  font-size: .58rem;
}
.send-amt-box .amt-val{
  font-size: 3rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  letter-spacing: -.03em;
}
.send-recap{
  display: grid; gap: 4px;
  margin: 12px auto 0; max-width: 300px;
  padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: .74rem; text-align: left;
}
.send-recap .sr-row{ display: flex; justify-content: space-between; gap: 12px; color: var(--txt2); }
.send-recap .sr-row b{ font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.send-recap .sr-row:first-child b{ color: var(--forest); }
.send-recap .sr-tot{ padding-top: 4px; border-top: 1px solid var(--border); font-weight: 800; color: var(--txt); }
.send-recap .sr-tot b{ font-weight: 900; }
html.dark .send-recap .sr-row:first-child b{ color: var(--gold3, #F0C040); }
/* Écran court (vieux Android 360x640) : le récapitulatif ajoute trois
   lignes ; on resserre l'encadré et le pavé pour garder « Envoyer » visible. */
@media (max-height: 700px){
  .send-amt-box{ padding: 12px 16px 10px; }
  .send-amt-box .amt-lbl{ margin-bottom: 4px; }
  .send-amt-box .amt-val{ font-size: 2.2rem; }
  .send-recap{ margin-top: 8px; padding-top: 6px; gap: 1px; font-size: .7rem; }
  #sc-send .nk{ height: 42px; }
  #sc-send .numpad{ gap: 6px; }
  #sc-send .scroll > .g14{ gap: 8px; padding-top: 10px; }
  #sc-send #note-toggle{ min-height: 0; padding-top: 6px; padding-bottom: 6px; }
}
.send-amt-box .amt-val .cur{
  font-size: .8rem;
  color: var(--forest);
  letter-spacing: .1em;
  font-weight: 700;
  margin-left: 4px;
}

/* ── RECEVOIR · Carte reçu + tuiles + pipeline ───────────── */
.recv-hdr{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.24), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
  padding: 4px 22px 26px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.recv-hdr::after{
  content:''; position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,.15), transparent 65%);
  right: -140px; top: -160px;
  pointer-events: none;
}
.recv-hdr .snav-t{ color:#fff; font-size:.95rem; font-weight:800; letter-spacing:-.005em; }
.recv-eye{
  font-family: var(--fm);
  font-size: .55rem;
  color: rgba(240,192,64,.75);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 700;
  margin-top: 6px;
  position: relative; z-index: 1;
}
.recv-title{
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,.18);
  position: relative; z-index: 1;
  padding-bottom: 4px;
}
.recv-body{
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Carte QR avec corner marks */
.recv-card{
  position: relative;
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  border-radius: 22px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(212,160,23,.15);
  box-shadow:
    0 20px 40px -14px rgba(10,74,46,.20),
    inset 0 0 0 1px rgba(255,255,255,.5);
}
.recv-corner{
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.recv-corner.tl{ top: 12px; left: 12px; border-top-width: 2.5px; border-left-width: 2.5px; border-radius: 4px 0 0 0; }
.recv-corner.tr{ top: 12px; right: 12px; border-top-width: 2.5px; border-right-width: 2.5px; border-radius: 0 4px 0 0; }
.recv-corner.bl{ bottom: 12px; left: 12px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-radius: 0 0 0 4px; }
.recv-corner.br{ bottom: 12px; right: 12px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-radius: 0 0 4px 0; }
.recv-brand{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--fm);
  font-size: .52rem;
  color: var(--forest);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
  padding: 4px 10px;
}
.recv-brand-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
  animation: recvPulse 2s ease-in-out infinite;
}
@keyframes recvPulse{
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: .75; }
}
.recv-qr-frame{
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(10,74,46,.06);
  box-shadow:
    inset 0 0 0 1px rgba(10,74,46,.03),
    0 4px 14px -8px rgba(10,74,46,.15);
}
.recv-identity{
  text-align: center;
  padding-top: 4px;
  border-top: 1px dashed rgba(10,74,46,.14);
  width: 80%;
  padding-top: 12px;
  margin-top: 4px;
}
.recv-name{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.01em;
}
.recv-phone{
  font-family: var(--fm);
  font-size: .68rem;
  color: var(--txt3);
  margin-top: 4px;
  letter-spacing: .04em;
}

/* Tuiles d'action */
.recv-actions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.recv-act{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(10,74,46,.06);
  cursor: pointer;
  font-family: var(--f);
  font-size: .62rem;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: .02em;
  transition: transform .12s, box-shadow .18s;
  box-shadow: 0 6px 14px -10px rgba(10,74,46,.20);
}
.recv-act:active{ transform: scale(.96); }
.recv-act:hover{ box-shadow: 0 10px 22px -10px rgba(10,74,46,.28); }
.recv-act-ic{
  width: 40px; height: 40px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
.recv-act-ic.gold{ background: linear-gradient(140deg, var(--gold), var(--gold2)); color: var(--forest); box-shadow: 0 6px 14px -6px rgba(212,160,23,.5); }
.recv-act-ic.forest{ background: linear-gradient(140deg, var(--forest), var(--green)); color: #FDE68A; box-shadow: 0 6px 14px -6px rgba(10,74,46,.5); }
.recv-act-ic.green{ background: linear-gradient(140deg, var(--green), var(--green2)); color: #fff; box-shadow: 0 6px 14px -6px rgba(22,163,74,.5); }

/* Pipeline 3 étapes */
.recv-flow{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 14px;
  background:
    linear-gradient(180deg, var(--card), var(--bg));
  border: 1px solid rgba(10,74,46,.06);
  border-radius: 20px;
  box-shadow: 0 8px 20px -14px rgba(10,74,46,.22);
}
.recv-flow-step{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 4px;
  position: relative;
}
.recv-flow-step:not(:last-child)::after{
  content: '';
  position: absolute;
  left: 20px; top: 40px; bottom: -6px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(10,74,46,.20) 0 4px, transparent 4px 8px);
}
.recv-flow-num{
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold2);
  min-width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,64,.14);
  border-radius: 10px;
  border: 1px solid rgba(240,192,64,.30);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.recv-flow-body{ flex: 1; padding-top: 2px; }
.recv-flow-tt{
  font-size: .84rem;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.recv-flow-ss{
  font-size: .66rem;
  color: var(--txt3);
  margin-top: 3px;
  line-height: 1.55;
}

html.dark .recv-card{ background: linear-gradient(180deg, #1a2018, #12140f); border-color: rgba(212,160,23,.20); }
html.dark .recv-name{ color: var(--txt); }
html.dark .recv-brand{ color: var(--gold2); }
html.dark .recv-qr-frame{ background: #E8E4D9; }

/* ── COFFRE · Hero ring de progression ───────────────────── */
.coffre-hero{
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  padding: 4px 0 2px;
}
.coffre-ring{
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 18px rgba(240,192,64,.28));
}
.coffre-ring svg{ display: block; }
.coffre-ring-c{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.coffre-ring-pct{
  font-family: var(--fd);
  font-size: 1.65rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.coffre-ring-lbl{
  font-size: .5rem;
  font-family: var(--fm);
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
}
.coffre-hero-side{ flex: 1; min-width: 0; }
.coffre-hero-side .coffre-total-lbl{ margin-bottom: 6px; }
.coffre-hero-side .coffre-total-val{
  font-size: 1.7rem;
  margin: 2px 0 8px;
  font-variant-numeric: tabular-nums;
}
.coffre-hero-side .coffre-rate{ display: inline-flex; }

/* ── TONTINE · Cartes signature v3 ────────────────────────── */
/* ── Tontines : la carte passe au clair ──────────────────
   Elle etait sombre, en trois degrades qui tournaient (foret, braise, nuit) :
   trois cartes cote a cote donnaient trois ambiances differentes pour une
   meme chose, et le reste de l'app est creme sur blanc. Elle rejoint le
   fond commun. Le carrousel d'avatars disparait avec elle : six initiales
   empilees ne disaient ni le tour, ni ce qu'on doit faire. */
.tnt-card{
  flex-shrink: 0;   /* overflow:hidden rognerait le ruban si la liste retrecit */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .18s;
}
.tnt-card:active{ transform: scale(.99); }
.tnt-card:hover{ box-shadow: 0 10px 26px -16px rgba(11,61,38,.4); }
.tnt-card-body{ padding: 16px 17px 15px; }
.tnt-card-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tnt-card-title{ flex: 1 1 auto; min-width: 0; }
.tnt-card-name{
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tnt-card-meta{
  margin-top: 3px;
  font-size: .72rem;
  color: var(--txt2);
}
/* Le tour, dit en toutes lettres : c'est la premiere chose qu'on cherche. */
.tnt-turn-pill{
  flex: none;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(10,74,46,.10);
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
html.dark .tnt-turn-pill{ color: var(--gold2); background: rgba(240,192,64,.14); }

/* ══════════════════════════════════════════════════════════════
   ESTUAIRE · Auth Flow Redesign (2026-07)
   Landing + Login + OTP avec scène forêt SVG signature.
   ══════════════════════════════════════════════════════════════ */

/* ── ONBOARD · Landing photo forêt full-bleed + fade texte ──
   L'image reste dominante ; un dégradé progressif monte du bas
   pour rendre le texte + les CTA parfaitement lisibles. */
#sc-onboard{
  background: #04140A !important;
  overflow: hidden;
}
.ob-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  pointer-events: none;
  /* Palette Estuaire : boost saturation subtil pour aligner sur vert forêt */
  filter: contrast(1.04) saturate(1.15) brightness(.92) hue-rotate(-3deg);
}
/* Tint léger multiply pour teinter dans la palette sans cacher */
.ob-tint{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 78% 10%, rgba(240,192,64,.30), transparent 60%),
    radial-gradient(70% 40% at 20% 88%, rgba(10,74,46,.35), transparent 65%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Fade sombre qui monte du bas — invisible en haut, s'accentue en bas
   pour poser le texte sans faire disparaître l'image */
.ob-fade{
  position: absolute;
  inset: 0;
  /* Deux voiles. Celui du haut n'existe que pour le logo : son GHETTO est
     blanc et le ciel de la photo l'est presque autant. Celui du bas monte
     tôt et finit opaque, pour que le titre ne pose jamais sur du feuillage. */
  background:
    linear-gradient(180deg,
      rgba(4,20,10,.50) 0%,
      rgba(4,20,10,.26) 9%,
      rgba(4,20,10,0)   20%),
    linear-gradient(180deg,
      rgba(4,20,10,0)   0%,
      rgba(4,20,10,0)   26%,
      rgba(4,20,10,.22) 42%,
      rgba(4,20,10,.58) 56%,
      rgba(4,20,10,.86) 68%,
      rgba(4,20,10,.97) 80%,
      #04140A           90%);
  pointer-events: none;
}

/* ── Le logo, en haut à droite ───────────────────────────
   Posé sur la photo, pas dans une pastille : la marque n'a pas besoin d'un
   cadre pour exister. Largeur fluide — il descend à 96px sur un petit Android
   et monte à 132px sur un Pro Max, jamais au-delà de 34% de l'écran. */
.ob-logo{
  position: absolute;
  z-index: 3;
  top: calc(max(env(safe-area-inset-top,0px), 16px) + 6px);
  right: clamp(18px, 5.5vw, 26px);
  width: clamp(96px, 30vw, 132px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 14px rgba(4,20,10,.55));
}

/* ── Bloc bas, aligné à gauche ───────────────────────────
   Le centrage faisait « affiche de festival ». À gauche, l'œil descend sur
   une seule verticale : titre, phrase, bouton. Les écarts sont en gap plutôt
   qu'en marges, pour qu'un écran court les comprime proprement. */
.ob-bottom{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 clamp(20px, 6vw, 28px) calc(max(env(safe-area-inset-bottom,0px), 16px) + 14px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: clamp(10px, 2.4vh, 16px);
}

.ob-title{
  font-family: 'Instrument Serif', 'Iowan Old Style', Palatino, Georgia, serif;
  font-style: italic;
  font-size: clamp(2.5rem, 13vw, 3.5rem);
  font-weight: 400;
  color: #fff;
  line-height: .92;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(4,20,10,.7), 0 1px 5px rgba(4,20,10,.85);
}
.ob-tagline{
  font-family: var(--f);
  font-size: clamp(.84rem, 3.6vw, .95rem);
  font-style: normal;
  color: rgba(255,255,255,.74);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0;
  text-shadow: 0 1px 10px rgba(4,20,10,.7);
}

/* Rassurance. Discrète par construction : elle doit être trouvée par l'œil
   qui la cherche, pas concurrencer l'appel à l'action. */
.ob-trust{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: clamp(.66rem, 2.9vw, .72rem);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
  text-shadow: 0 1px 8px rgba(4,20,10,.7);
}
.ob-trust svg{
  width: 12px; height: 12px;
  flex: none;
  stroke: rgba(240,192,64,.75);
}

/* ── Boutons ─────────────────────────────────────────────
   Hauteur au doigt (52px mini), halo doré calmé : sur fond sombre il bavait
   et donnait un air de bouton de jeu. */
.ob-actions{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(4px, 1.6vh, 10px);
}
.ob-cta{
  width: 100%;
  min-height: 54px;
  padding: 15px 18px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold2) 65%, #EFC95E 100%);
  color: var(--forest);
  font-family: var(--f);
  font-size: clamp(.88rem, 3.7vw, .94rem);
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 26px -10px rgba(212,160,23,.65), inset 0 1px 0 rgba(255,255,255,.34);
  transition: transform .12s, box-shadow .18s;
}
.ob-cta:active{ transform: scale(.985); }
.ob-cta:hover{ box-shadow: 0 14px 32px -10px rgba(212,160,23,.75), inset 0 1px 0 rgba(255,255,255,.44); }
.ob-cta svg{ stroke: var(--forest); }

.ob-secondary{
  width: 100%;
  min-height: 50px;
  padding: 14px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  color: #fff;
  font-family: var(--f);
  font-weight: 800;
  font-size: clamp(.82rem, 3.5vw, .88rem);
  cursor: pointer;
  letter-spacing: .01em;
  transition: background .18s, transform .12s, border-color .18s;
}
.ob-secondary:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.ob-secondary:active{ transform: scale(.985); }

/* Écran court (SE, vieux Android) : le titre cède, jamais les boutons. */
@media(max-height:680px){
  .ob-title{ font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .ob-bottom{ gap: 9px; }
  .ob-logo{ width: clamp(88px, 26vw, 110px); }
}

/* ── LOGIN / OTP · Shell commune ─────────────────────────── */
#sc-login, #sc-otp{
  /* Le fond est désormais posé par .auth-paper — la page a remplacé la photo. */
  overflow: hidden;
}
.auth-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 50% at 100% 0%, rgba(212,160,23,.18), transparent 55%),
    radial-gradient(140% 90% at -20% 100%, rgba(22,163,74,.16), transparent 65%),
    linear-gradient(160deg, #0A2418 0%, #052015 55%, #04140A 100%);
}
.auth-bg::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(60deg, rgba(240,192,64,.04) 0 1px, transparent 1px 22px);
  opacity: .5;
  pointer-events: none;
}
.auth-shell{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}
.auth-topnav{
  padding: max(env(safe-area-inset-top,0px), 14px) 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-brand-mini{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm);
  font-size: .58rem;
  color: rgba(240,192,64,.7);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}
.auth-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 32px;
}

/* Auth steps chip */
#sc-login .auth-steps,
#sc-otp .auth-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}
.auth-step{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(240,192,64,.14);
  color: rgba(255,255,255,.5);
  font-family: var(--fm);
  font-size: .68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: .18s;
}
.auth-step-line{
  width: 26px; height: 2px;
  background: rgba(240,192,64,.14);
  border-radius: 100px;
}
.auth-step.auth-step-active{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--forest);
  border-color: var(--gold3);
  box-shadow: 0 0 0 3px rgba(240,192,64,.20);
  transform: scale(1.1);
}
.auth-step.auth-step-done{
  background: var(--green);
  color: #fff;
  border-color: var(--green2);
}
.auth-line-done{ background: linear-gradient(90deg, var(--green), var(--gold2)); }

.auth-heading{ text-align: center; margin-bottom: 22px; }
.auth-eye{
  font-family: var(--fm);
  font-size: .5rem;
  color: rgba(240,192,64,.65);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 700;
  margin-bottom: 10px;
}
.auth-title{
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin-bottom: 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.auth-sub{
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.55;
}

.auth-card{
  background:
    linear-gradient(180deg, rgba(6,26,15,.65), rgba(4,16,10,.80));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(240,192,64,.18);
  border-radius: 24px;
  padding: 22px 18px;
  box-shadow:
    0 24px 60px -18px rgba(4,20,10,.6),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(240,192,64,.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field{}
.auth-lbl{
  font-family: var(--fm);
  font-size: .56rem;
  font-weight: 800;
  color: rgba(240,192,64,.68);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-lbl-chip{
  padding: 2px 8px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--forest);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.auth-phone-row{
  display: flex; gap: 8px; align-items: stretch;
}
.auth-country{
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  background: rgba(240,192,64,.10);
  border: 1px solid rgba(240,192,64,.24);
  border-radius: 12px;
  font-size: 1rem;
  flex-shrink: 0;
}
.auth-country span{
  font-family: var(--fm);
  font-size: .82rem;
  font-weight: 800;
  color: var(--gold3);
  letter-spacing: .02em;
}
.auth-inp{
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(240,192,64,.16) !important;
  color: #fff !important;
  font-size: 1rem;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: .18s;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--f);
  letter-spacing: .01em;
}
.auth-inp::placeholder{ color: rgba(255,255,255,.32); }
.auth-inp:focus{
  border-color: var(--gold2) !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: 0 0 0 4px rgba(240,192,64,.12) !important;
  outline: none;
}
.auth-phone-row .auth-inp{ flex: 1; letter-spacing: .06em; }

.auth-cta{
  width: 100%;
  padding: 15px;
  font-weight: 900;
  font-size: .88rem;
  letter-spacing: .01em;
  margin-top: 2px;
  box-shadow:
    0 12px 30px -10px rgba(212,160,23,.55),
    0 0 0 1px rgba(240,192,64,.25) inset;
}
.auth-help{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 2px;
  font-family: var(--fm);
  font-size: .58rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
}
.auth-help svg{ stroke: var(--gold3); }

/* OTP-specific */
.auth-card-otp{ align-items: center; gap: 20px; padding: 28px 18px; }
#sc-otp .otp-boxes{ display: flex; gap: 8px; justify-content: center; }
#sc-otp .otp-box{
  width: 44px; height: 54px;
  text-align: center;
  font-family: var(--fd);
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(240,192,64,.20);
  border-radius: 12px;
  transition: .15s;
  font-variant-numeric: tabular-nums;
}
#sc-otp .otp-box:focus{
  border-color: var(--gold2);
  background: rgba(240,192,64,.08);
  box-shadow: 0 0 0 4px rgba(240,192,64,.15);
  outline: none;
  transform: translateY(-1px);
}
.otp-timer-row{
  text-align: center;
  min-height: 20px;
  width: 100%;
}
.otp-timer-row #otp-timer{
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  font-family: var(--fm);
  letter-spacing: .02em;
}
.otp-timer-row #otp-timer strong{ color: var(--gold3); }
.otp-timer-row #otp-resend{
  font-size: .78rem;
  color: var(--gold2);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   ASSISTANT SUPPORT — bulle flottante + panneau de chat
   ══════════════════════════════════════════════════════════════ */
.support-fab{
  position: fixed;
  right: 16px;
  bottom: calc(96px + var(--sab)); /* au-dessus de la nav flottante */
  z-index: 6000;
  width: 54px; height: 54px;
  border: none; border-radius: 50%;
  background: linear-gradient(140deg, var(--forest), var(--forest2));
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(10,74,46,.6), inset 0 1px 0 rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .2s;
}
.support-fab:active{ transform: scale(.94); }
.support-fab::after{
  content: '';
  position: absolute; top: 10px; right: 11px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold2);
  border: 2px solid var(--forest);
}
.support-fab.open{ background: linear-gradient(140deg, #7a1f1f, #a83232); }
.support-fab.open::after{ display: none; }
.support-fab-close{ display: none; }
.support-fab.open .support-fab-chat{ display: none; }
.support-fab.open .support-fab-close{ display: block; }

/* La bulle ne s'affiche que sur un écran nommé. Au démarrage, body n'a pas
   encore son data-sc : elle apparaissait donc par-dessus le splash. */
.support-fab{ display: none; }
body[data-sc] .support-fab{ display: flex; }

/* Masquer la bulle sur les écrans d'authentification / plein écran */
body[data-sc="loading"] .support-fab,
body[data-sc="onboard"] .support-fab,
body[data-sc="login"] .support-fab,
body[data-sc="otp"] .support-fab,
body[data-sc="pin"] .support-fab,
body[data-sc="pin-create"] .support-fab,
body[data-sc="pin-confirm"] .support-fab,
body[data-sc="reg-info"] .support-fab,
body[data-sc="scan"] .support-fab,
/* Écrans d'argent : la bulle tombait sur la touche effacer du pavé, le
   bouton Partager, le récapitulatif des frais. Le support reste dans Profil. */
body[data-sc="send"] .support-fab,
body[data-sc="recv"] .support-fab,
body[data-sc="transfert"] .support-fab,
body[data-sc="recharge"] .support-fab,
body[data-sc="mpay"] .support-fab,
body[data-sc="ebilling"] .support-fab,
body[data-sc="qrhub"] .support-fab,
body[data-sc="m-encaisser"] .support-fab{ display: none; }
/* Et tant que le splash est à l'écran, quel que soit l'écran déjà préparé
   derrière lui : c'est là qu'on la voyait apparaître. */
body:has(#sc-loading.on) .support-fab{ display: none; }

.support-panel{
  position: fixed;
  right: 16px;
  bottom: calc(96px + var(--sab));
  z-index: 6001;
  width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 140px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 26px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition: opacity .2s, transform .22s cubic-bezier(.25,.8,.25,1);
}
.support-panel.on{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.support-head{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 13px;
  background: linear-gradient(135deg, var(--forest), var(--forest2));
  color: #fff;
  flex-shrink: 0;
}
.support-head-ic{
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold3);
}
.support-head-txt{ flex: 1; min-width: 0; }
.support-head-t{ font-size: .92rem; font-weight: 800; }
.support-head-s{ font-size: .62rem; color: rgba(255,255,255,.65); margin-top: 1px; }
.support-head-x{
  border: none; background: rgba(255,255,255,.12); color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.support-msgs{
  flex: 1; overflow-y: auto;
  padding: 14px 12px 6px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg2);
}
.support-msgs::-webkit-scrollbar{ width: 0; }
.sup-row{ display: flex; }
.sup-row.user{ justify-content: flex-end; }
.sup-row.bot{ justify-content: flex-start; }
.sup-bubble{
  max-width: 82%;
  padding: 10px 13px;
  font-size: .82rem; line-height: 1.5;
  border-radius: 16px;
  word-wrap: break-word;
}
.sup-bubble.bot{
  background: var(--card); color: var(--txt);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.sup-bubble.user{
  background: linear-gradient(135deg, var(--forest), var(--forest2));
  color: #fff;
  border-bottom-right-radius: 5px;
}
.sup-typing{ display: flex; gap: 4px; align-items: center; }
.sup-typing span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--txt3);
  animation: supTyping 1s infinite ease-in-out;
}
.sup-typing span:nth-child(2){ animation-delay: .15s; }
.sup-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes supTyping{ 0%,60%,100%{ transform: translateY(0); opacity: .4; } 30%{ transform: translateY(-4px); opacity: 1; } }

.support-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px 4px;
  background: var(--bg2);
}
.support-chip{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--txt2);
  font-size: .7rem; font-weight: 600;
  padding: 7px 11px; border-radius: 100px;
  cursor: pointer; font-family: var(--f);
}
.support-chip:active{ transform: scale(.96); }

.support-input-row{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + var(--sab));
  background: var(--card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.support-input{
  flex: 1; min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--txt);
  border-radius: 100px;
  padding: 11px 15px;
  font-size: .84rem; font-family: var(--f);
  outline: none;
}
.support-input:focus{ border-color: var(--forest2); }
.support-send{
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.support-send:active{ transform: scale(.94); }

@media(min-width:1280px){
  .support-fab, .support-panel{ bottom: 24px; right: 24px; }
}


/* ─── Focus clavier ──────────────────────────────────────────────────────────
   Six `outline:none` traînaient dans la feuille : au clavier (ou avec un
   clavier Bluetooth sur Android, cas réel en TWA) plus rien n'indiquait
   l'élément actif. On rétablit un anneau visible, mais UNIQUEMENT via
   :focus-visible — le navigateur ne le déclenche pas au doigt ni à la souris,
   donc aucun changement pour l'usage tactile normal.
   Le !important est nécessaire : les resets qu'on corrige sont plus loin dans
   la cascade et certains sont eux-mêmes en !important. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-xs);
}
/* Sur les aplats or, l'anneau or serait invisible : on passe au vert forêt. */
.btn-gold:focus-visible, .pill.on:focus-visible {
  outline-color: var(--forest) !important;
}
html.dark .btn-gold:focus-visible, html.dark .pill.on:focus-visible {
  outline-color: var(--txt) !important;
}

/* ─── iOS : empêcher le zoom automatique au focus ────────────────────────────
   Safari sur iPhone zoome de force sur tout champ dont la police est inférieure
   à 16px. La page se retrouve agrandie et décalée : le contenu sort de l'écran
   par la gauche, une bande vide apparaît à droite, et l'app « bouge tout le
   temps » à chaque ouverture du clavier.

   C'est une régression introduite en retirant `maximum-scale=1.0,
   user-scalable=no` du viewport. Ce retrait reste le bon choix — bloquer le
   zoom sur une app d'argent est un défaut d'accessibilité — mais il exige que
   TOUS les champs soient à 16px minimum, pas seulement .inp comme je l'avais
   vérifié. Douze champs étaient entre 12,5 et 14,7px (inscription, connexion,
   tontine, saisie manuelle du scan).

   Le !important est nécessaire : ces tailles sont posées en style inline, qui
   l'emporte sur une règle de feuille sans !important.
   Borné au tactile : sur desktop il n'y a pas d'auto-zoom, les tailles
   d'origine sont conservées. */
@media (max-width: 1279px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TUNNEL D'AUTHENTIFICATION — direction « Le carnet »
   Spec : docs/superpowers/specs/2026-09-30-parcours-auth-design.md

   La photo reste la couverture (#sc-onboard). Dès qu'on entre dans le tunnel,
   elle cède la place à une page claire où la typographie porte l'identité.
   Tout est accroché à la classe .auth-paper posée sur les 6 écrans concernés,
   pour ne rien déborder sur le reste de l'app.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --auth-paper:   #F4F6F1;  /* papier froid à dominante verte, pas le crème habituel */
  --auth-surface: #E9EDE4;  /* champs, touches, cases du code */
  --auth-ink:     #0B3D26;  /* titres et texte principal — 11,3 sur papier */
  --auth-mute:    #5F6857;  /* texte secondaire — 5,4 / 4,9 */
  --auth-gold:    #C9930B;  /* APLATS UNIQUEMENT — 2,5 en texte, il échoue */
  --auth-gold-ink:#7E5C07;  /* l'or dès qu'il porte une lettre — 5,6 / 5,2 */
  --auth-key-bg:  #E9EDE4;
  --auth-key-ink: #0B3D26;
  --auth-line:    rgba(11,61,38,.13);
}
html.dark{
  --auth-paper:   #0A140E;
  --auth-surface: #16231C;
  --auth-ink:     #E8EFE9;
  --auth-mute:    #9DA895;
  --auth-gold:    #D9A521;
  --auth-gold-ink:#F0C040;
  --auth-key-bg:  #16231C;
  --auth-key-ink: #E8EFE9;
  --auth-line:    rgba(255,255,255,.14);
}

/* ── La photo sort du tunnel ─────────────────────────────── */
.auth-paper{ background: var(--auth-paper) !important; }
.auth-paper .fs-photo,
.auth-paper .fs-tint,
.auth-paper .fs-dim{ display:none !important; }

/* ── Barre de progression, bord à bord ───────────────────
   Remplace le stepper à pastilles : une ligne dit la même chose en 3px et
   laisse le titre respirer. Le compteur donne le chiffre exact. */
.auth-prog{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--auth-line); z-index:6; pointer-events:none;
}
.auth-prog > i{
  display:block; height:100%; width:0;
  background:var(--auth-gold); border-radius:0 2px 2px 0;
  transition:width .45s cubic-bezier(.25,.8,.25,1);
}
.auth-count{
  position:absolute; z-index:6; pointer-events:none;
  top:calc(max(env(safe-area-inset-top,0px), 10px) + 8px); right:20px;
  font-family:var(--f); font-size:.62rem; font-weight:800; letter-spacing:.14em;
  color:var(--auth-mute); font-variant-numeric:tabular-nums;
}
.auth-count b{ color:var(--auth-ink); font-weight:800; }

/* ── Ossature ────────────────────────────────────────────── */
.auth-paper .auth-shell,
.auth-paper .pin-wrap{ position:relative; z-index:1; }
.auth-paper .auth-topnav{ padding-top:max(env(safe-area-inset-top,0px), 18px); }
.auth-paper .auth-brand-mini{ color:var(--auth-mute); }
.auth-paper .back-btn.dk{
  background:var(--auth-surface); border:1px solid transparent; color:var(--auth-ink);
}
.auth-paper .back-btn.dk svg{ stroke:var(--auth-ink); }

/* ── Titres : alignés à gauche, serif italique ───────────
   Tout était centré, paragraphes compris : l'œil repartait au hasard à chaque
   ligne. À gauche, la lecture descend en droite ligne vers le premier champ. */
.auth-paper .auth-heading{ text-align:left; }
.auth-paper .auth-eye{ display:none; }   /* le compteur le remplace */
.auth-paper .auth-title{
  font-family:'Instrument Serif', Palatino, Georgia, serif;
  font-style:italic; font-weight:400;
  font-size:2.15rem; line-height:.98; letter-spacing:-.02em;
  color:var(--auth-ink); text-shadow:none; margin-bottom:8px;
}
.auth-paper .auth-sub{
  color:var(--auth-mute); text-shadow:none; text-align:left;
  max-width:28ch; font-size:.82rem; line-height:1.5;
}

/* ── Carte : elle disparaît, la page suffit ──────────────── */
.auth-paper .auth-card{
  background:transparent !important; border:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:none !important; padding:0 !important;
  margin-top:22px; gap:10px;
}

/* ── Champs : étiquette dedans, pas de bordure ───────────── */
.auth-paper .auth-field{
  background:var(--auth-surface); border-radius:14px;
  padding:9px 13px 10px; border:1.5px solid transparent;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.auth-paper .auth-field:focus-within{
  border-color:var(--auth-gold); background:var(--card);
  box-shadow:0 0 0 3px rgba(201,147,11,.16);
}
.auth-paper .auth-lbl{
  font-family:var(--f); font-size:.56rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--auth-mute); margin-bottom:1px;
}
.auth-paper .auth-lbl-chip{
  background:transparent; color:var(--auth-gold-ink); padding:0 0 0 6px;
  font-weight:800; letter-spacing:.14em;
}
.auth-paper .auth-inp,
.auth-paper .inp{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; height:auto !important;
  color:var(--auth-ink) !important; font-weight:600;
}
.auth-paper .auth-inp::placeholder,
.auth-paper .inp::placeholder{ color:#A9B0A2; font-weight:500; }
.auth-paper .auth-phone-row{ gap:10px; }
.auth-paper .auth-country{
  background:transparent; border:0; color:var(--auth-ink); font-weight:800;
  padding:0 10px 0 0; border-right:1.5px solid var(--auth-line);
}
.auth-paper .auth-country span{ color:var(--auth-ink); }

/* ── Appel à l'action ────────────────────────────────────── */
.auth-paper .auth-cta,
.auth-paper .btn-gold{
  background:var(--auth-gold) !important; color:#221803 !important;
  border-radius:15px; height:50px; font-weight:800; font-size:.86rem;
  box-shadow:0 10px 24px -9px rgba(201,147,11,.7) !important;
  margin-top:14px;
}
.auth-paper .auth-cta svg,
.auth-paper .btn-gold svg{ stroke:#221803 !important; }
.auth-paper .auth-help{
  font-family:var(--f);   /* était en mono : décoratif et moins lisible */
  color:var(--auth-mute); justify-content:flex-start; font-size:.68rem;
  margin-top:11px; text-align:left; letter-spacing:0;
}
.auth-paper .auth-help svg{ stroke:var(--auth-gold-ink); }

/* ── Cases du code reçu ──────────────────────────────────── */
.auth-paper .otp-box{
  background:var(--auth-surface) !important; border:1.5px solid transparent !important;
  color:var(--auth-ink) !important; border-radius:13px; font-weight:800;
}
.auth-paper .otp-box:focus{
  background:var(--card) !important; border-color:var(--auth-gold) !important;
  box-shadow:0 0 0 3px rgba(201,147,11,.16) !important;
}
.auth-paper .otp-timer-row{ color:var(--auth-mute); justify-content:flex-start; }
.auth-paper .otp-timer-row strong{ color:var(--auth-ink); }
.auth-paper #otp-resend{ color:var(--auth-gold-ink); font-weight:800; }

/* ── Écrans PIN ──────────────────────────────────────────── */
.auth-paper .pin-wrap{ justify-content:flex-start; padding-top:64px; }
.auth-paper .pin-logo{ display:none; }   /* le titre suffit, la page est nue */
.auth-paper .pin-brand{ text-align:left; width:100%; }
.auth-paper .pin-title{
  font-family:'Instrument Serif', Palatino, Georgia, serif;
  font-style:italic; font-weight:400;
  font-size:2.15rem; line-height:.98; letter-spacing:-.02em;
  color:var(--auth-ink); text-shadow:none;
}
.auth-paper .pin-sub{
  /* !important nécessaire : la règle d'origine force du blanc en !important.
     À spécificité égale sur ce point, la nôtre l'emporte (0,2,0 contre 0,1,0). */
  font-family:var(--f) !important; color:var(--auth-mute) !important;
  text-shadow:none; font-size:.82rem; letter-spacing:0 !important;
  text-transform:none; margin-top:6px;
}
.auth-paper .pin-dots{ justify-content:flex-start; width:100%; gap:14px; margin:26px 0 0; }
.auth-paper .pin-dot{
  width:13px; height:13px; background:rgba(11,61,38,.16); border:0;
  transition:background .16s, box-shadow .16s;
}
html.dark .auth-paper .pin-dot{ background:rgba(255,255,255,.16); }
.auth-paper .pin-dot.fill{
  background:var(--auth-gold); box-shadow:0 0 0 4px rgba(201,147,11,.17);
}
.auth-paper .pin-dot.err{ background:#DC2626; box-shadow:0 0 0 4px rgba(220,38,38,.18); }

/* Pavé : surface PLEINE. C'était le vrai défaut — les touches translucides
   posées sur la photo donnaient un contraste différent à chaque chiffre. */
.auth-paper .pin-pad{ margin-top:auto; gap:10px; width:100%; }
.auth-paper .pin-k{
  background:var(--auth-key-bg) !important; border:0 !important;
  color:var(--auth-key-ink) !important; border-radius:16px;
  font-weight:700; font-size:1.5rem; backdrop-filter:none !important;
  font-variant-numeric:tabular-nums;
}
.auth-paper .pin-k:active{ background:var(--auth-ink) !important; color:var(--auth-paper) !important; }
.auth-paper .pin-k:active svg{ stroke:var(--auth-paper) !important; }
.auth-paper .pin-k svg{ stroke:var(--auth-key-ink) !important; }
.auth-paper .pin-skip{ color:var(--auth-gold-ink); }

/* ── Écran Infos ─────────────────────────────────────────── */
.auth-paper .reg-card{
  background:transparent; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-radius:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
.auth-paper .dob-row{ display:flex; gap:8px; }
.auth-paper .dob-row .auth-field{ flex:1; min-width:0; }
.auth-paper .dob-row .auth-field.yr{ flex:1.35; }
.auth-paper .dob-row input{ width:100%; }

/* Nationalité : deux pastilles plutôt qu'un select système. */
.auth-paper .nat-pills{ display:flex; gap:7px; flex-wrap:wrap; }
.auth-paper .nat-pill{
  padding:9px 16px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--f); font-size:.78rem; font-weight:800;
  background:var(--auth-surface); color:var(--auth-mute);
}
.auth-paper .nat-pill[aria-pressed="true"]{ background:var(--auth-ink); color:var(--auth-paper); }
.auth-paper select.nat-other{
  margin-top:8px; width:100%; background:var(--auth-surface) !important;
  border:0 !important; color:var(--auth-ink) !important; border-radius:14px;
  padding:12px 13px !important; height:auto !important;
}

/* Case à cocher dessinée : l'input reste réel pour le clavier et les
   lecteurs d'écran, on n'en peint que la représentation. */
.auth-paper .cgu{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:6px 0; }
.auth-paper .cgu input{ position:absolute; opacity:0; width:1px; height:1px; }
.auth-paper .cgu .bx{
  width:20px; height:20px; border-radius:6px; flex:none; margin-top:1px;
  background:var(--auth-surface); display:grid; place-items:center;
  transition:background .14s;
}
.auth-paper .cgu .bx svg{ width:12px; height:12px; stroke:transparent; fill:none; stroke-width:3.2; }
.auth-paper .cgu input:checked + .bx{ background:var(--auth-ink); }
.auth-paper .cgu input:checked + .bx svg{ stroke:var(--auth-gold); }
.auth-paper .cgu input:focus-visible + .bx{ box-shadow:0 0 0 3px rgba(201,147,11,.35); }
.auth-paper .cgu span{ font-size:.76rem; color:var(--auth-mute); line-height:1.5; }
.auth-paper .cgu b{ color:var(--auth-gold-ink); font-weight:800; }

/* ── Petits écrans ───────────────────────────────────────── */
@media(max-height:680px){
  .auth-paper .auth-title,
  .auth-paper .pin-title{ font-size:1.8rem; }
  .auth-paper .pin-wrap{ padding-top:48px; }
}

/* ── Reprises d'alignement du tunnel ─────────────────────
   Ces trois règles corrigent des restes du design centré. Elles sont ici, en
   fin de feuille, pour l'emporter sans avoir à empiler des !important. */
.auth-paper .auth-sub{ margin-inline:0; }        /* était margin:0 auto */
.auth-paper .auth-body{
  justify-content:flex-start;                     /* était center : grand vide en haut */
  padding-top:clamp(18px,7vh,54px);
}
.auth-paper .auth-heading{ width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   TUNNEL D'AUTHENTIFICATION — deuxième passe
   Corrige ce qui n'allait pas dans la première : espacements trop serrés,
   champs trop petits, polices dépareillées, pavé PIN mal agencé, textes
   blancs devenus invisibles sur le papier, et retour de la photo de forêt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La forêt revient, noyée dans le blanc ───────────────
   Elle donne de la profondeur en haut d'écran puis se dissout complètement
   avant la zone de saisie, pour ne jamais gêner la lecture. */
.auth-paper{
  background-color: var(--auth-paper) !important;
  background-image:
    linear-gradient(180deg,
      rgba(244,246,241,.64) 0%,
      rgba(244,246,241,.82) 24%,
      rgba(244,246,241,.94) 44%,
      rgba(244,246,241,.985) 62%,
      var(--auth-paper) 78%),
    url('./img/forest-hero.jpg') !important;
  background-size: 100% 100%, cover !important;
  background-position: center top, center 12% !important;
  background-repeat: no-repeat, no-repeat !important;
}
html.dark .auth-paper{
  background-image:
    linear-gradient(180deg,
      rgba(10,20,14,.62) 0%,
      rgba(10,20,14,.82) 24%,
      rgba(10,20,14,.94) 44%,
      rgba(10,20,14,.985) 62%,
      var(--auth-paper) 78%),
    url('./img/forest-hero.jpg') !important;
}

/* ── Le stepper à ronds revient ──────────────────────────
   Il dit le parcours d'un coup d'œil, ce qu'une barre de 3px ne faisait pas.
   Posé sous la barre de navigation, centré, généré par le JS. */
.auth-paper .auth-steps{
  position:absolute; z-index:6;
  top:calc(max(env(safe-area-inset-top,0px), 18px) + 58px);
  left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:0;
  margin:0; pointer-events:none;
}
.auth-paper .auth-step{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f); font-size:.74rem; font-weight:800; line-height:1;
  background:var(--auth-surface) !important; color:var(--auth-mute) !important;
  flex-shrink:0; transition:background .3s, color .3s;
}
.auth-paper .auth-step.auth-step-active{
  background:var(--auth-gold) !important; color:#221803 !important;
  box-shadow:0 0 0 4px rgba(201,147,11,.18);
}
.auth-paper .auth-step.auth-step-done{
  background:var(--auth-ink) !important; color:var(--auth-paper) !important;
  font-size:.7rem;
}
.auth-paper .auth-step-line{
  width:26px; height:2px; flex-shrink:0; border-radius:2px;
  background:var(--auth-surface) !important;
}
.auth-paper .auth-step-line.auth-line-done{ background:var(--auth-ink) !important; }
@media(max-width:359px){
  .auth-paper .auth-step-line{ width:18px; }
}

/* La marque en mono dans la nav faisait doublon avec le stepper, et sa police
   ne s'accordait ni au serif ni au sans. */
.auth-paper .auth-brand-mini{ display:none !important; }
.auth-paper .back-btn.dk{
  background:var(--auth-surface) !important; box-shadow:none !important;
  width:40px; height:40px;
}

/* ── Rythme vertical ─────────────────────────────────────
   Le contenu démarre sous le stepper ; les blocs respirent davantage. */
.auth-paper .auth-body{
  justify-content:flex-start;
  padding-top:clamp(74px,13vh,104px) !important;
  padding-bottom:24px;
  gap:0;
}
.auth-paper .auth-title{ font-size:2.25rem; margin-bottom:10px; }
.auth-paper .auth-sub{ font-size:.86rem; max-width:30ch; margin-inline:0; }
.auth-paper .auth-card{ margin-top:30px !important; gap:14px !important; }

/* ── Champs : nettement plus généreux ────────────────────
   Ils étaient trop serrés : l'étiquette et la valeur se touchaient, et la
   hauteur descendait sous le confort du pouce. */
.auth-paper .auth-field{
  padding:13px 16px 15px !important;
  border-radius:18px !important;
  min-height:68px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.auth-paper .auth-lbl{
  font-size:.6rem !important; letter-spacing:.14em !important;
  margin-bottom:0 !important; line-height:1;
}
.auth-paper .auth-inp,
.auth-paper .auth-field .inp{
  font-size:1.06rem !important; line-height:1.25 !important; font-weight:600 !important;
}
.auth-paper .auth-phone-row{ gap:14px !important; align-items:center; }
.auth-paper .auth-country{
  padding:0 14px 0 0 !important; font-size:1.02rem;
  display:flex; align-items:center; gap:6px;
}
.auth-paper .auth-field:focus-within{
  box-shadow:0 0 0 4px rgba(201,147,11,.14) !important;
}
.auth-paper .auth-cta{ height:56px !important; font-size:.92rem !important; margin-top:20px !important; }
.auth-paper .auth-help{ font-size:.72rem !important; margin-top:16px !important; gap:7px; }

/* ── Cases du code reçu ──────────────────────────────────── */
.auth-paper .otp-boxes{ gap:9px !important; justify-content:flex-start; }
.auth-paper .otp-box{
  width:auto !important; flex:1; min-width:0; height:62px !important;
  font-family:var(--f) !important; font-size:1.45rem !important; border-radius:16px !important;
}
.auth-paper .otp-timer-row{ margin-top:16px !important; font-size:.8rem; }

/* ── Écrans PIN : agencement repris ──────────────────────
   Les points étaient minuscules et collés à gauche, et un vide énorme les
   séparait du pavé. Points centrés au-dessus d'un pavé qui remonte. */
.auth-paper .pin-wrap{
  padding-top:clamp(74px,13vh,104px) !important;
  padding-bottom:calc(max(env(safe-area-inset-bottom,0px), 14px) + 6px);
  justify-content:flex-start;
}
.auth-paper .pin-title{ font-size:2.25rem; }
.auth-paper .pin-dots{
  justify-content:center !important; gap:18px !important;
  margin:30px 0 0 !important;
}
.auth-paper .pin-dot{ width:16px !important; height:16px !important; }
.auth-paper .pin-pad{
  margin-top:clamp(26px,5vh,44px) !important;
  gap:12px !important; max-width:330px; margin-inline:auto;
}
.auth-paper .pin-k{
  aspect-ratio:1/.68; height:auto !important; min-height:0 !important;
  font-size:1.7rem !important; border-radius:20px !important;
  box-shadow:none !important;
}

/* Liens de bas d'écran — ils étaient en blanc, donc invisibles sur le papier. */
.auth-paper .pin-link{
  display:block; width:100%; margin:16px auto 0; padding:10px;
  background:none; border:0; cursor:pointer; text-align:center;
  font-family:var(--f); font-size:.82rem; font-weight:800;
  color:var(--auth-gold-ink);
}
.auth-paper .pin-link-quiet{
  margin-top:2px; font-weight:600; font-size:.78rem; color:var(--auth-mute);
}

/* ── Écran Infos ─────────────────────────────────────────── */
.auth-paper .reg-card{ gap:14px !important; }
.auth-paper .dob-row{ gap:10px !important; }
.auth-paper .nat-pill{ padding:11px 18px !important; font-size:.82rem !important; }
.auth-paper .cgu{ padding:10px 0 !important; gap:12px !important; }
.auth-paper .cgu span:not(.bx){ font-size:.8rem !important; }
.auth-paper .cgu .bx{ width:22px !important; height:22px !important; }

/* ── Écrans courts ───────────────────────────────────────── */
@media(max-height:700px){
  .auth-paper .auth-body,
  .auth-paper .pin-wrap{ padding-top:clamp(64px,11vh,84px) !important; }
  .auth-paper .auth-title,
  .auth-paper .pin-title{ font-size:1.9rem; }
  .auth-paper .pin-pad{ margin-top:18px !important; }
  .auth-paper .auth-field{ min-height:62px; }
}

/* ── Reprises de détail (3e passe) ───────────────────────── */

/* Les points du PIN traînaient un fond noir, une bordure blanche et une ombre
   portée, tous en !important — reliquats du design sur photo. Sur le papier
   ils ressemblaient à des taches grises. */
.auth-paper .pin-dot{
  background:rgba(11,61,38,.18) !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html.dark .auth-paper .pin-dot{ background:rgba(255,255,255,.2) !important; }
.auth-paper .pin-dot.fill{
  background:var(--auth-gold) !important;
  border:0 !important;
  box-shadow:0 0 0 5px rgba(201,147,11,.2) !important;
  transform:none;
}
.auth-paper .pin-dot.err{
  background:#DC2626 !important; border:0 !important;
  box-shadow:0 0 0 5px rgba(220,38,38,.2) !important;
}

/* L'indicatif pays gardait une bordure arrondie à droite, qui se lisait comme
   une parenthèse collée au numéro. Séparateur droit et net à la place. */
.auth-paper .auth-country{
  background:none !important; border:0 !important; border-radius:0 !important;
  border-right:1.5px solid rgba(11,61,38,.16) !important;
}
html.dark .auth-paper .auth-country{ border-right-color:rgba(255,255,255,.18) !important; }
.auth-paper .auth-country span{
  font-family:var(--f) !important;   /* était en mono : dépareillé */
  font-size:1rem !important; color:var(--auth-ink) !important; letter-spacing:0 !important;
}

/* Les traits du stepper étaient de la même couleur que les ronds inactifs :
   posés sur la photo, ils disparaissaient. */
.auth-paper .auth-step-line{ background:rgba(11,61,38,.2) !important; }
html.dark .auth-paper .auth-step-line{ background:rgba(255,255,255,.22) !important; }

/* Le compte à rebours et l'étiquette « reçoit le code » restaient en mono. */
.auth-paper .otp-timer-row,
.auth-paper .otp-timer-row *,
.auth-paper .auth-lbl-chip{ font-family:var(--f) !important; }

/* Le compte à rebours du code restait en blanc et le chrono en or pâle :
   1,09 et 1,14 de contraste sur le papier, donc illisibles.
   Détecté par scripts/check-contrast.mjs. */
.auth-paper .otp-timer-row,
.auth-paper #otp-timer{ color:var(--auth-mute) !important; }
.auth-paper .otp-timer-row strong,
.auth-paper #otp-countdown{ color:var(--auth-ink) !important; font-weight:800; }

/* ═══════════════════════════════════════════════════════════════════════════
   TUNNEL D'AUTHENTIFICATION — troisième passe
   Le tiers blanc en bas de chaque écran. Le contenu était empilé sous un
   padding-top fixe, donc tout ce qui restait de hauteur tombait dans le vide.
   Ici la colonne occupe l'écran : l'en-tête en haut, le bouton principal
   ancré en bas, et l'espace se répartit entre les deux.

   Au passage, toutes les tailles passent en clamp() : un SE de 320px et un
   Pro Max de 430px ne peuvent pas partager les mêmes valeurs en dur.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La colonne remplit l'écran ──────────────────────────
   Ancrer le bouton tout en bas déplaçait simplement le trou : il passait du
   pied au milieu. Le groupe entier — titre, champs, bouton — est donc centré
   entre le stepper et le pied, et l'air se partage au-dessus et en dessous.
   Seule la ligne de réassurance reste au pied, où on la lit sans la chercher. */
.auth-paper .auth-shell{
  padding-inline: clamp(18px, 5.6vw, 26px) !important;
}
.auth-paper .auth-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(58px, 10vh, 86px) !important;
  padding-bottom: calc(max(env(safe-area-inset-bottom,0px), 12px) + 46px) !important;
  gap: 0;
}
.auth-paper .auth-heading{ flex: none; margin-bottom: 0 !important; }
.auth-paper .auth-card{
  flex: none;
  display: flex;
  flex-direction: column;
  margin-top: clamp(22px, 4.2vh, 36px) !important;
  gap: clamp(11px, 2vh, 15px) !important;
}
.auth-paper .auth-cta{
  margin-top: clamp(14px, 2.6vh, 22px) !important;
  margin-bottom: 0 !important;
  flex: none;
  min-height: 54px;
  height: auto !important;
}
/* Au pied de l'écran, hors du flux : elle ne doit ni pousser le formulaire
   ni flotter juste sous le bouton. */
.auth-paper .auth-help{
  position: absolute !important;
  left: 0; right: 0;
  bottom: calc(max(env(safe-area-inset-bottom,0px), 12px) + 8px);
  justify-content: center;
  margin: 0 !important;
  padding-inline: clamp(18px, 5.6vw, 26px);
  z-index: 4;
}

/* ── Titres fluides ──────────────────────────────────────── */
.auth-paper .auth-title,
.auth-paper .pin-title{
  font-size: clamp(1.85rem, 9.2vw, 2.35rem) !important;
  line-height: .98 !important;
}
.auth-paper .auth-sub{
  font-size: clamp(.82rem, 3.5vw, .9rem) !important;
  max-width: 32ch !important;
}

/* ── Écran du code reçu ──────────────────────────────────── */
/* Les six cases restaient collées en haut d'une carte à moitié vide. */
.auth-paper .auth-card-otp{
  align-items: stretch !important;
  padding: 0 !important;
  gap: clamp(14px, 2.6vh, 20px) !important;
}
.auth-paper .otp-boxes{ flex: none; }
.auth-paper .otp-box{
  height: clamp(54px, 15vw, 64px) !important;
  font-size: clamp(1.25rem, 6vw, 1.5rem) !important;
}
.auth-paper .otp-timer-row{ flex: none; margin-top: 0 !important; }

/* ── Écrans PIN ──────────────────────────────────────────── */
/* Le pavé descend au fond, les points restent accrochés au titre : avant, un
   vide de 150px séparait les deux et on ne savait plus ce qu'on remplissait. */
.auth-paper .pin-wrap{
  padding-top: clamp(62px, 11vh, 92px) !important;
  padding-inline: clamp(18px, 5.6vw, 26px) !important;
  padding-bottom: calc(max(env(safe-area-inset-bottom,0px), 12px) + 6px) !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.auth-paper .pin-brand{ flex: none; text-align: left !important; }
/* Les points se posent au milieu de l'espace libre, entre le titre et le
   pavé, plutôt que de rester collés au titre au-dessus d'un vide de 150px. */
.auth-paper .pin-dots{
  flex: none;
  justify-content: center !important;
  gap: clamp(14px, 4.5vw, 20px) !important;
  margin: auto 0 !important;
  padding: clamp(18px, 4vh, 32px) 0;
}
.auth-paper .pin-dot{
  width: clamp(14px, 4vw, 17px) !important;
  height: clamp(14px, 4vw, 17px) !important;
}
.auth-paper .pin-pad{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: clamp(9px, 2.4vw, 13px) !important;
  max-width: 340px;
  margin-inline: auto !important;
}
.auth-paper .pin-k{
  aspect-ratio: 1 / .62;
  font-size: clamp(1.45rem, 6.5vw, 1.75rem) !important;
}
/* Les deux liens de bas d'écran viennent après le pavé, pas au milieu du vide. */
.auth-paper .pin-link{ flex: none; margin-top: clamp(8px, 1.6vh, 14px) !important; padding: 8px; }
.auth-paper .pin-link-quiet{ margin-top: 0 !important; }
.auth-paper .pin-skip{ flex: none; }

/* Le logo doré du PIN faisait doublon avec le titre et mangeait 90px de
   hauteur sur un écran qui en manquait. */
.auth-paper .pin-logo{ display: none !important; }

/* ── Écran des infos ─────────────────────────────────────── */
.auth-paper .reg-card{ gap: clamp(11px, 2vh, 15px) !important; }
.auth-paper .dob-row{ gap: clamp(8px, 2.4vw, 12px) !important; }

/* ── Paliers ─────────────────────────────────────────────── */
/* Petit Android (360) et SE (320) : les champs gardent leurs 16px de police,
   c'est la hauteur des blocs qui cède. */
@media(max-width:360px){
  .auth-paper .auth-field{ min-height: 60px !important; padding: 10px 13px 12px !important; }
  .auth-paper .otp-boxes{ gap: 6px !important; }
  .auth-paper .auth-step-line{ width: 16px !important; }
}
/* Écran court : on récupère la hauteur sur les marges, pas sur les cibles. */
@media(max-height:700px){
  .auth-paper .auth-body,
  .auth-paper .pin-wrap{ padding-top: clamp(54px, 9vh, 72px) !important; }
  .auth-paper .auth-title,
  .auth-paper .pin-title{ font-size: clamp(1.6rem, 8vw, 1.95rem) !important; }
  .auth-paper .auth-card{ margin-top: 16px !important; }
  .auth-paper .pin-k{ aspect-ratio: 1 / .56; }
  .auth-paper .pin-dots{ margin-top: 18px !important; }
}
/* Grand écran (Pro Max, 430px) : on plafonne la colonne pour que les champs
   ne s'étirent pas en bandes. */
/* Au-delà de 415px — Pro Max, Pixel large, téléphone tourné — on plafonne la
   colonne. Un champ de 700px de large n'est pas plus lisible, il est juste
   plus long à parcourir de l'œil. */
@media(min-width:415px){
  .auth-paper .auth-card,
  .auth-paper .auth-heading,
  .auth-paper .pin-brand,
  .auth-paper .reg-card{ max-width: 390px; margin-inline: auto !important; width: 100%; }
}

/* ── Écran des infos : même règle que les autres ──────────
   Il vivait avec ses styles en ligne et son propre conteneur défilant, donc
   il échappait à tout le reste. Le formulaire est long : il occupe la hauteur
   s'il en a besoin, et se centre quand il en reste. */
.auth-paper .reg-scroll{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(18px, 5.6vw, 26px);
  position: relative;
  z-index: 1;
}
.auth-paper .reg-nav{
  flex: none;
  padding-top: max(env(safe-area-inset-top,0px), 14px);
  padding-bottom: 6px;
}
.auth-paper .reg-inner{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(26px, 5vh, 46px);
  padding-bottom: calc(max(env(safe-area-inset-bottom,0px), 14px) + 14px);
}
@media(min-width:415px){
  .auth-paper .reg-inner{ max-width: 390px; margin-inline: auto; width: 100%; }
}

/* ── Les cases vides doivent se voir ─────────────────────
   Sur le papier clair, une case remplie d'un gris à 4 % disparaît : on ne
   savait plus combien de chiffres restaient à saisir. Un filet suffit. */
.auth-paper .otp-box{
  border: 1.5px solid var(--auth-line) !important;
  background: var(--auth-surface) !important;
  color: var(--auth-ink) !important;
}
.auth-paper .otp-box:focus{
  border-color: var(--auth-gold) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(201,147,11,.16) !important;
}
.auth-paper .pin-dot{
  border: 2px solid rgba(11,61,38,.26) !important;
  background: transparent !important;
}
.auth-paper .pin-dot.fill{
  background: var(--auth-gold) !important;
  border-color: var(--auth-gold) !important;
}
.auth-paper .cgu .bx{
  border: 1.5px solid var(--auth-line) !important;
  background: var(--auth-surface) !important;
}

/* ── Téléphone tourné ────────────────────────────────────
   360px de haut ne contiennent ni un formulaire ni un pavé numérique. On
   arrête de centrer, on empile, et on laisse la colonne défiler — sinon le
   bouton principal et les touches du bas sont purement hors d'atteinte. */
@media(max-height:560px){
  .auth-paper .auth-body,
  .auth-paper .pin-wrap{
    justify-content: flex-start !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 54px !important;
    padding-bottom: calc(max(env(safe-area-inset-bottom,0px), 10px) + 12px) !important;
  }
  /* Elle reprend sa place dans le flux : en absolu elle couvrirait le pavé. */
  .auth-paper .auth-help{
    position: static !important;
    margin-top: 14px !important;
    padding-inline: 0;
  }
  .auth-paper .pin-dots{ margin: 18px 0 !important; padding: 0 !important; }
  .auth-paper .pin-pad{ max-width: 300px; }
  .auth-paper .pin-k{ aspect-ratio: 1 / .5; }
  .auth-paper .auth-title,
  .auth-paper .pin-title{ font-size: 1.55rem !important; }
  .auth-paper .auth-card{ margin-top: 14px !important; }
  .auth-paper .auth-steps{ top: 14px !important; }
  .auth-paper .reg-inner{ justify-content: flex-start !important; padding-top: 14px; }

  /* Accueil : le bloc bas ne peut plus flotter au-dessus de rien. */
  .ob-title{ font-size: 1.9rem !important; }
  .ob-bottom{ gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNE VOIX POUR NOMMER
   Les titres d'écran étaient d'abord en serif italique, comme l'onboard et le
   tunnel d'inscription. Sur une page nue le serif porte ; dans un bandeau de
   48 px au-dessus d'une liste de montants, il devenait décoratif.

   Les titres passent donc à un grotesque large et gras — assez différent du
   DM Sans du corps pour qu'un titre ne se confonde jamais avec un libellé,
   assez sobre pour tenir dans un bandeau. Le serif reste là où il a de la
   place : l'écran d'accueil et les sept écrans d'inscription.

   Le sans-serif du corps garde tout le travail : libellés, montants, boutons,
   listes. Une voix pour nommer, une voix pour faire.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --fs: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Titre d'écran — les 13 écrans qui portent .snav-t d'un coup. */
.snav-t,
#sc-tontine-detail .snav-t{
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1;
  letter-spacing: -.025em;
}
@media(max-width:359px){
  .snav-t, #sc-tontine-detail .snav-t{ font-size: 1.02rem; }
}

/* Intertitres de section. Ils étaient en capitales étroites, lisibles mais
   muets ; en serif ils annoncent au lieu d'étiqueter. Les vraies étiquettes
   — « NUMÉRO MOBILE MONEY », « TOTAL ÉPARGNÉ » — gardent leurs capitales,
   c'est leur rôle. */
.row-hdr-t{
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: .94rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
}

/* Les sept intertitres qui passent par .gp-sec-title. Le lien « Tout voir »
   qu'ils contiennent reste en capitales : c'est une action, pas un titre. */
.gp-sec-title{
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: .94rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--txt);
}
.gp-sec-title .more{
  font-family: var(--f);
  font-style: normal;
}

/* ── Écran « Payer par QR » ──────────────────────────────
   Il vivait sur un fond presque noir, avec des cartes blanches translucides :
   seul écran de l'app à le faire, et on en sortait sans savoir d'où l'on
   venait. Il reprend le bandeau vert et le fond crème de partout ailleurs. */
.qrh-hdr{
  flex-shrink: 0;
  padding: 4px 18px 16px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.20), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
  border-radius: 0 0 26px 26px;
}
.qrh-body{
  padding: 26px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.qrh-opt{
  width: 100%;
  text-align: left;
  font-family: var(--f);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform .12s, box-shadow .18s;
}
.qrh-opt:active{ transform: scale(.985); }

/* Scanner passe devant : c'est le geste qu'on répète chez un commerçant. */
.qrh-opt-gold{
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold2) 65%, #EFC95E 100%);
  border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(212,160,23,.6);
}

.qrh-ic{
  width: 52px; height: 52px;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qrh-ic-green{ background: rgba(10,74,46,.09); color: var(--forest); }
.qrh-ic-dark{ background: rgba(10,74,46,.16); color: var(--forest); }

.qrh-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qrh-t{ font-size: .98rem; font-weight: 800; color: var(--txt); }
.qrh-d{ font-size: .74rem; line-height: 1.45; color: var(--txt3); }
.qrh-ar{ flex: none; color: var(--txt3); }

.qrh-opt-gold .qrh-t{ color: #26200A; }
.qrh-opt-gold .qrh-d{ color: rgba(38,32,10,.74); }
.qrh-opt-gold .qrh-ar{ color: rgba(38,32,10,.55); }

.qrh-alt{
  margin-top: 3px;
  min-height: 52px;
  border: 1.5px solid var(--border);
  border-radius: 15px;
  background: none;
  cursor: pointer;
  font-family: var(--f);
  font-size: .84rem;
  font-weight: 800;
  color: var(--forest);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.qrh-note{
  margin: 4px 0 0;
  padding: 13px 15px;
  background: rgba(10,74,46,.05);
  border-radius: 15px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--txt2);
}
.qrh-note svg{ flex: none; margin-top: 1px; stroke: var(--forest); }

html.dark .qrh-note{ background: rgba(255,255,255,.05); }
html.dark .qrh-ic-green{ background: rgba(240,192,64,.12); color: var(--gold2); }

/* ── Transfert : le sens du virement ─────────────────────
   Deux contrôles au lieu de quatre onglets qui débordaient. L'opérateur à
   gauche, le sens en dessous, les deux entièrement visibles en 320px. */
.tr-pick{
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tr-ops{
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(10,74,46,.06);
  border-radius: 13px;
}
.tr-op{
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: var(--f);
  font-size: .78rem;
  font-weight: 800;
  color: var(--txt2);
  transition: background .16s, color .16s, box-shadow .16s;
}
.tr-op.on{
  background: var(--card);
  color: var(--forest);
  box-shadow: 0 2px 6px rgba(10,74,46,.12);
}

/* Le sens se lit, et se retourne d'un doigt. */
.tr-way{
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  font-family: var(--f);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform .12s, border-color .16s;
}
.tr-way:active{ transform: scale(.985); }
.tr-way-l{
  font-size: .82rem;
  font-weight: 800;
  color: var(--txt);
  white-space: nowrap;
}
.tr-way svg{ flex: none; stroke: var(--gold3, #B8860B); }
html.dark .tr-ops{ background: rgba(255,255,255,.06); }

@media(max-width:359px){
  .tr-op{ font-size: .72rem; }
  .tr-way-l{ font-size: .76rem; }
}

/* ── Budget : le sélecteur de période descend dans le contenu ──
   Posé au ras du bandeau vert, il semblait coupé en deux par la frontière.
   Il filtre le contenu : il vit avec lui. */
.bud-tabs-wrap{ padding: 0; }
.bud-tabs-wrap .bud-tabs{
  background: rgba(10,74,46,.06);
  border: none;
  padding: 4px;
  border-radius: 13px;
  gap: 4px;
}
.bud-tabs-wrap .btab{
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: var(--f);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt2);
  transition: background .16s, color .16s, box-shadow .16s;
}
.bud-tabs-wrap .btab.on{
  background: var(--card);
  color: var(--forest);
  box-shadow: 0 2px 6px rgba(10,74,46,.12);
}
html.dark .bud-tabs-wrap .bud-tabs{ background: rgba(255,255,255,.06); }

/* Les deux intertitres du budget suivent la même voix. */
.bud-sec-t{
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: .94rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--txt);
}

/* ── Coffre : le total prend la place de l'anneau ────────
   L'anneau « 0 % REMPLI » tenait le tiers du bandeau pour dire un
   pourcentage de rien. Le total, lui, est vrai dès le premier franc. */
.coffre-hero{
  display: block;
  padding-top: 6px;
}
.coffre-hero .coffre-total-lbl{
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.coffre-hero .coffre-total-val{
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  margin-top: 8px;
}
.coffre-meta{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(240,192,64,.14);
  color: var(--gold2);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
}
.coffre-meta svg{ flex: none; stroke: var(--gold2); }
@media(max-width:359px){
  .coffre-hero .coffre-total-val{ font-size: 2rem; }
  .coffre-meta{ font-size: .66rem; }
}

/* L'état vide dit à quoi sert l'endroit, au lieu de constater qu'il est vide. */
.coffre-vide{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 20px;
}
.coffre-vide-t{
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--txt);
}
.coffre-vide-d{
  margin: 10px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--txt2);
}

/* ── Factures : le total passe devant le bouton ──────────
   On ne demande pas de confirmer un montant qu'on n'a pas montré. */
.bills-sum{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.bills-sum-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.bills-sum-k{ font-size: .82rem; font-weight: 700; color: var(--txt2); }
.bills-sum-v{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bills-sum-v small{ font-size: .66rem; font-weight: 700; color: var(--txt3); }
.bills-sum-warn{
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.45;
  color: #9B1C1C;
}
html.dark .bills-sum-warn{ color: #F87171; }
.bills-sum .btn-gold[disabled]{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Rien à régler n'est pas un vide : c'est une bonne nouvelle. */
.bills-vide{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 16px;
  border-radius: 16px;
  background: rgba(22,163,74,.08);
  color: #166534;
  font-size: .82rem;
  font-weight: 700;
}
.bills-vide svg{ flex: none; }
html.dark .bills-vide{ background: rgba(22,163,74,.12); color: #4ADE80; }

/* ── Recharge : ce qui part, et ce qui reste ─────────────
   buy_airtime n'applique aucun frais : on n'en affiche donc aucun, le total
   débité EST le montant. Ce qui manquait, c'était de voir où va le crédit
   et ce que le solde devient. */
.rch-sum{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rch-sum-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rch-sum-k{ font-size: .8rem; color: var(--txt2); min-width: 0; }
.rch-sum-v{
  font-size: .95rem;
  font-weight: 800;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rch-sum-v small{ font-size: .64rem; font-weight: 700; color: var(--txt3); }
.rch-sum-rest{
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.rch-sum-warn{
  font-size: .76rem;
  font-weight: 700;
  color: #9B1C1C;
}
html.dark .rch-sum-warn{ color: #F87171; }
.rch-sum .btn-gold[disabled],
#rch-sum > .btn-gold[disabled]{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* La barre de tours remplace la barre de cotisations. Un segment par tour :
   les passes pleins et sourds, le tour en cours seul en or, les suivants
   vides. Au-dela de 14 membres, tontine.js ne la dessine plus — des traits
   d'un pixel ne se comptent pas. */
.tnt-turnbar{
  display: flex;
  gap: 4px;
  margin-top: 14px;
}
.tnt-turnseg{
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
  border-radius: 100px;
  background: rgba(11,61,38,.12);
}
.tnt-turnseg.done{ background: var(--forest); }
.tnt-turnseg.now{
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  box-shadow: 0 0 7px rgba(240,192,64,.5);
}
html.dark .tnt-turnseg{ background: rgba(255,255,255,.12); }
html.dark .tnt-turnseg.done{ background: rgba(255,255,255,.4); }

/* Le ruban : la seule chose a faire, ou a savoir. Il occupe toute la
   largeur du pied de carte, separe par un trait de sa couleur. */
.tnt-strip{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  border-top: 1px solid var(--border);
}
.tnt-strip-i{ width: 15px; height: 15px; flex: none; stroke-width: 2.1; fill: none; }
.tnt-strip-t{
  flex: 1 1 auto;
  min-width: 0;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tnt-strip-v{ flex: none; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; }

/* Or : quelque chose attend un geste de ta part. */
.tnt-strip.gold{ background: rgba(212,160,23,.10); border-top-color: rgba(212,160,23,.22); }
.tnt-strip.gold .tnt-strip-t, .tnt-strip.gold .tnt-strip-v{ color: #5C4305; }
.tnt-strip.gold .tnt-strip-i{ stroke: #7E5C07; }
html.dark .tnt-strip.gold{ background: rgba(240,192,64,.12); }
html.dark .tnt-strip.gold .tnt-strip-t, html.dark .tnt-strip.gold .tnt-strip-v{ color: var(--gold2); }
html.dark .tnt-strip.gold .tnt-strip-i{ stroke: var(--gold2); }

/* Vert : c'est ton tour. Le seul moment ou la carte annonce une entree. */
.tnt-strip.green{ background: rgba(22,163,74,.10); border-top-color: rgba(22,163,74,.22); }
.tnt-strip.green .tnt-strip-t, .tnt-strip.green .tnt-strip-v{ color: #166534; }
.tnt-strip.green .tnt-strip-i{ stroke: #166534; }
html.dark .tnt-strip.green{ background: rgba(34,197,94,.14); }
html.dark .tnt-strip.green .tnt-strip-t, html.dark .tnt-strip.green .tnt-strip-v{ color: #6EE7A0; }
html.dark .tnt-strip.green .tnt-strip-i{ stroke: #6EE7A0; }

/* Neutre : rien a faire, on suit. */
.tnt-strip.calm{ background: rgba(11,61,38,.04); }
.tnt-strip.calm .tnt-strip-t{ color: var(--txt2); font-weight: 600; }
.tnt-strip.calm .tnt-strip-v{ color: var(--txt); font-family: var(--fm); font-size: .72rem; }
.tnt-strip.calm .tnt-strip-i{ stroke: var(--txt3); }
html.dark .tnt-strip.calm{ background: rgba(255,255,255,.04); }

/* Le bouton de creation : pointille, pour qu'il ne rivalise pas avec les
   cartes. Rien ne presse de lancer une tontine de plus. */
.tnt-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  background: none;
  border: 1.5px dashed rgba(11,61,38,.22);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 800;
  color: var(--forest);
}
.tnt-add svg{ width: 17px; height: 17px; stroke: var(--forest); stroke-width: 2.3; fill: none; }
.tnt-add:active{ transform: scale(.99); }
html.dark .tnt-add{ border-color: rgba(255,255,255,.2); color: var(--gold2); }
html.dark .tnt-add svg{ stroke: var(--gold2); }

@media(max-width:359px){
  .tnt-strip{ padding: 11px 15px; gap: 8px; }
  .tnt-strip-t{ font-size: .71rem; }
  .tnt-strip-v{ font-size: .77rem; }
  .tnt-turnseg{ height: 5px; }
  .tnt-card-name{ font-size: .88rem; }
}

/* L'etat vide : il etait style plus haut, dans le bloc des cartes sombres
   que la refonte a emporte. Il revient tel quel — c'est le seul morceau de
   l'ancien ecran qui n'avait pas besoin d'etre refait. */
.tnt-empty{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 4px 40px;
}
.tnt-empty-ic{
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,74,46,.07);
  border: 1px solid rgba(10,74,46,.10);
  margin-bottom: 18px;
}
.tnt-empty-ic svg{ width: 27px; height: 27px; stroke: var(--forest); }
html.dark .tnt-empty-ic{
  background: rgba(240,192,64,.08);
  border-color: rgba(240,192,64,.14);
}
html.dark .tnt-empty-ic svg{ stroke: var(--gold2); }
.tnt-empty-t{
  font-size: .95rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 8px;
}
.tnt-empty-d{
  font-size: .78rem;
  color: var(--txt3);
  line-height: 1.6;
  max-width: 31ch;
  margin-bottom: 24px;
}

/* ── Le bandeau vert devient la règle, pas l'exception ───
   Six écrans — Tontines, Factures, Recharge, Notifications, Transfert,
   eBilling — portaient un en-tête blanc, pendant qu'Accueil, Envoyer,
   Recevoir, Profil, Coffre et Budget portaient le bandeau vert. L'app
   changeait d'identité d'un onglet à l'autre.

   .gnav enveloppe la barre d'état et la barre de titre dans le même vert :
   même dégradé, même halo doré en haut à droite, mêmes coins arrondis en
   bas que les en-têtes déjà en place. Le contenu, lui, ne change pas : les
   classes .sbar.dk et .snav.dk existaient déjà et portent le blanc et l'or. */
.gnav{
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(162deg, var(--forest) 0%, #0C3C26 100%);
  border-radius: 0 0 26px 26px;
}
.gnav::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(74% 68% at 90% -8%, rgba(240,192,64,.26), transparent 62%);
  pointer-events: none;
}
.gnav > *{ position: relative; z-index: 1; }
/* Dans le bandeau, la barre de titre n'a plus de trait sous elle : le bord
   arrondi du vert fait déjà la séparation. */
.gnav .snav{
  border-bottom: none;
  padding-bottom: 18px;
}
html.dark .gnav{ background: linear-gradient(162deg, #0B3B26 0%, #082A1B 100%); }

/* ── Coffre : la carte dit la date, puis le reste ────────
   Elle portait un calendrier de douze pastilles de mois sous la barre de
   progression. Douze pastilles pour dire « débloqué en septembre » : la
   ligne de texte sous le nom le dit mieux, en une fois. Le calendrier est
   parti, et avec lui la pastille « Verrouillé / Déverrouillé » qui répétait
   la même information une troisième fois. */
.ci-head{ align-items: flex-start; }
.ci-id{ flex: 1 1 auto; min-width: 0; }
.ci-ic svg{ stroke: var(--forest); }
html.dark .ci-ic svg{ stroke: var(--gold2); }
.ci-dl{
  font-family: inherit;
  font-size: .7rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt2);
  margin-top: 3px;
  line-height: 1.35;
}
.ci-right{ text-align: right; }
.ci-rate{
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt3);
  margin-top: 2px;
}
.ci-bar{ background: linear-gradient(90deg, var(--forest), var(--green)); }
/* Un coffre sans objectif n'a pas de progression a montrer : la barre est
   pleine et sourde, elle dit « ceci est un coffre », pas « c'est fini ». */
.ci-bar.flat{ background: rgba(11,61,38,.16); }
html.dark .ci-bar.flat{ background: rgba(255,255,255,.16); }
.ci-bar-lbls{ margin-top: 8px; }
.ci-bar-lbls span{ font-family: inherit; font-size: .68rem; }
.ci-pct{ font-weight: 700; color: var(--txt); }
.ci-reste{ color: var(--txt2); margin-left: auto; }

/* Les actions tenaient sur deux gros boutons pleine largeur, dont un
   desactive qui ne servait qu'a dire « verrouille » — deja ecrit au-dessus.
   Elles passent en bas de carte, discretes : on vient ici pour regarder, on
   agit rarement. */
.ci-acts{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.ci-act{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .73rem;
  font-weight: 800;
  color: var(--txt);
}
.ci-act svg{ width: 14px; height: 14px; stroke: var(--txt2); stroke-width: 2.1; fill: none; }
.ci-act.strong{
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  margin-right: auto;
}
.ci-act.strong svg{ stroke: var(--gold2); }
.ci-del{
  margin-left: auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(220,38,38,.22);
  border-radius: 11px;
  background: rgba(220,38,38,.06);
  cursor: pointer;
  flex: none;
}
.ci-del svg{ width: 15px; height: 15px; stroke: #dc2626; stroke-width: 2; fill: none; }
/* Le coffre verrouille n'a pas de bouton de retrait : il a une mention. */
.ci-lock{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--txt3);
}
.ci-lock svg{ width: 13px; height: 13px; stroke: var(--txt3); stroke-width: 2.2; fill: none; }

/* La note de bas d'ecran : pourquoi le solde affiche moins que ce qu'on a. */
.ci-note{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 2px;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(10,74,46,.05);
  font-size: .73rem;
  line-height: 1.5;
  color: var(--txt2);
}
.ci-note svg{ width: 15px; height: 15px; flex: none; margin-top: 2px; stroke: var(--forest); stroke-width: 1.9; fill: none; }
html.dark .ci-note{ background: rgba(255,255,255,.05); }
html.dark .ci-note svg{ stroke: var(--gold2); }

@media(max-width:359px){
  .ci-acts{ flex-wrap: wrap; }
  .ci-act{ font-size: .69rem; padding: 0 11px; }
  .ci-note{ font-size: .69rem; }
}

/* Rouge : l'échéance est passée. Le ruban dit la date et le taux ; le
   montant exact de la pénalité s'affiche au moment de payer, calculé par le
   serveur. */
.tnt-strip.late{ background: rgba(220,38,38,.08); border-top-color: rgba(220,38,38,.2); }
.tnt-strip.late .tnt-strip-t, .tnt-strip.late .tnt-strip-v{ color: #B91C1C; }
.tnt-strip.late .tnt-strip-i{ stroke: #B91C1C; }
html.dark .tnt-strip.late{ background: rgba(248,113,113,.12); }
html.dark .tnt-strip.late .tnt-strip-t, html.dark .tnt-strip.late .tnt-strip-v{ color: #FCA5A5; }
html.dark .tnt-strip.late .tnt-strip-i{ stroke: #FCA5A5; }

/* Création de tontine : quatre rythmes et quatre taux tiennent sur une
   ligne à partir de 375 px, passent à la ligne en dessous. */
.nt-choix{ flex-wrap: wrap; }
.nt-pen-aide{
  margin: 9px 2px 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--txt2);
}
.td-echeance{ margin-top: 6px; font-size: .7rem; font-weight: 700; color: var(--forest); }
.td-echeance.late{ color: #B91C1C; }
html.dark .td-echeance{ color: var(--gold2); }
html.dark .td-echeance.late{ color: #FCA5A5; }

/* ── Un seul bandeau, partout ────────────────────────────
   Trois familles cohabitaient : des bandeaux à coins droits (Accueil,
   Envoyer, Recevoir, Budget, Profil), des bandeaux arrondis plus sombres
   (Tontines, Factures, Recharge, Notifications, Transfert, QR, Lien) et le
   Coffre avec son titre centré en italique doré. On passait d'un écran à
   l'autre et l'app changeait de visage.

   Désormais : même dégradé, même halo doré, mêmes coins arrondis, même
   barre de titre — retour à gauche, titre blanc, action dorée en pastille à
   droite — au même endroit au pixel près. */
.home-hdr, .send-hdr, .recv-hdr, .coffre-hdr, .bud-hdr, .profil-hdr, .qrh-hdr, .gnav{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.20), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest2) 55%, #1A6B40 100%);
  border-radius: 0 0 26px 26px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding-left: 18px;
  padding-right: 18px;
}
.home-hdr, .send-hdr, .recv-hdr, .coffre-hdr, .bud-hdr, .profil-hdr, .qrh-hdr, .gnav{ padding-top: 0; }
.gnav, .qrh-hdr{ padding-bottom: 0; }
.home-hdr::after, .send-hdr::after, .recv-hdr::after, .coffre-hdr::after,
.bud-hdr::after, .profil-hdr::after, .qrh-hdr::after, .gnav::after{ display: none; }
html.dark .home-hdr, html.dark .send-hdr, html.dark .recv-hdr, html.dark .coffre-hdr,
html.dark .bud-hdr, html.dark .profil-hdr, html.dark .qrh-hdr, html.dark .gnav{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(212,160,23,.14), transparent 55%),
    linear-gradient(160deg, #0B3B26 0%, #082A1B 100%);
}

/* La barre de titre : identique sur les treize écrans. */
.home-hdr .snav, .send-hdr .snav, .recv-hdr .snav, .coffre-hdr .snav,
.bud-hdr .snav, .profil-hdr .snav, .qrh-hdr .snav, .gnav .snav{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 0 16px;
  margin: 0;
  border: none;
  background: transparent;
  text-align: left;
}
.snav.dk .back-btn.dk{
  width: 40px; height: 40px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.snav.dk .snav-t{
  color: #fff;
  font-family: var(--fs);
  font-style: normal;
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1;
  letter-spacing: -.025em;
}
@media(max-width:359px){ .snav.dk .snav-t{ font-size: 1.02rem; } }
.snav.dk .snav-a{
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(240,192,64,.16);
  border: 1px solid rgba(240,192,64,.32);
  color: var(--gold2);
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.snav.dk .snav-a:active{ transform: scale(.96); }

/* ── Fiche d'un coffre (#mcd) ─────────────────────────────
   Toucher une carte ouvre cette fiche : le montant, la date, et les gestes
   possibles. « Casser le coffre » n'existe qu'ici, avec son calcul posé
   noir sur blanc avant toute confirmation. */
.cd-box{ gap: 14px; }
.cd-head{ display: flex; align-items: center; gap: 12px; }
.cd-id{ flex: 1 1 auto; min-width: 0; }
.cd-name{ font-family: var(--fs); font-weight: 700; font-size: 1.12rem; color: var(--txt); letter-spacing: -.02em; }
.cd-state{ display: inline-flex; margin-top: 4px; padding: 3px 9px; border-radius: 100px; font-size: .62rem; font-weight: 800; }
.cd-state.locked{ background: rgba(212,160,23,.14); color: #8a6508; }
.cd-state.open{ background: rgba(22,163,74,.12); color: var(--forest); }
html.dark .cd-state.locked{ color: var(--gold2); }
html.dark .cd-state.open{ color: #4ade80; }
.cd-amount{ font-family: var(--fs); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; color: var(--txt); font-variant-numeric: tabular-nums; }
.cd-amount small{ font-size: .7rem; letter-spacing: .14em; color: var(--txt3); }
.cd-pct{ font-size: .68rem; font-weight: 700; color: var(--txt2); margin-top: -6px; }
.cd-rows{ border-top: 1px solid var(--border); }
.cd-row{ display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .76rem; }
.cd-row span{ color: var(--txt2); }
.cd-row b{ color: var(--txt); font-weight: 700; text-align: right; }
.cd-acts{ display: flex; flex-direction: column; gap: 10px; }
.cd-casse{
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px;
  background: rgba(220,38,38,.04);
  border: 1px solid rgba(220,38,38,.16);
}
.cd-casse-t{ font-weight: 800; font-size: .8rem; color: var(--txt); }
.cd-casse-d{ font-size: .72rem; line-height: 1.5; color: var(--txt2); }
.cd-casse-calc{ display: flex; flex-direction: column; gap: 6px; font-size: .74rem; font-variant-numeric: tabular-nums; }
.cd-casse-calc div{ display: flex; justify-content: space-between; color: var(--txt2); }
.cd-casse-calc b{ color: var(--txt); }
.cd-casse-calc .tot{ padding-top: 7px; border-top: 1px dashed rgba(220,38,38,.25); font-weight: 800; }
.cd-casse-calc .tot span, .cd-casse-calc .tot b{ color: var(--txt); font-size: .8rem; }
.coffre-item{ cursor: pointer; }
.cd-box .ci-bar-bg{ margin-top: 2px; }
.cd-pct{ margin-top: 0; }
/* Une feuille ouverte occupe le bas de l'écran : la bulle d'aide masquait
   ses boutons (« Créer ce coffre », « Casser le coffre »…). Elle s'efface
   le temps de la feuille. */
body:has(.modal.on) .support-fab{ opacity: 0; pointer-events: none; }
.ep-note{ font-size: .66rem; line-height: 1.45; color: var(--txt3); margin-top: -4px; }
.cd-amount{ margin-top: 4px; }

/* ══ COMPTE MARCHAND ═════════════════════════════════════════
   Maquettes : M-Choix, M-Encaisser, M-Journee, M-Recu. Le bandeau reste
   celui de toute l'app (.gnav) : le marchand passe d'un compte à l'autre
   sans changer de maison. */

/* ── Tunnel : « Tu viens pour quoi ? » et « Quel compte ouvrir ? » ── */
.acct-choices{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.acct-choice{
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 17px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--auth-line);
  background: var(--auth-paper);
  color: var(--auth-ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.acct-choice:active{ transform: scale(.985); }
.acct-choice[aria-pressed="true"]{
  border: 2px solid var(--auth-ink);
  padding: 16.5px 15.5px;
  box-shadow: 0 12px 26px -16px rgba(11,61,38,.45);
}
.acct-top{ display: flex; align-items: center; gap: 13px; width: 100%; }
.acct-ic{
  width: 46px; height: 46px; flex: none;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,61,38,.08);
}
.acct-ic svg{ width: 21px; height: 21px; fill: none; stroke: var(--auth-ink); stroke-width: 1.8; }
.acct-m .acct-ic{ background: rgba(201,147,11,.16); }
.acct-m .acct-ic svg{ stroke: var(--auth-gold-ink); }
.acct-txt{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-t{ font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--auth-ink); }
.acct-s{ font-size: .76rem; color: var(--auth-mute); }
.acct-radio{
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--auth-line);
  display: flex; align-items: center; justify-content: center;
}
.acct-radio svg{ width: 13px; height: 13px; fill: none; stroke: transparent; stroke-width: 2.8; }
.acct-choice[aria-pressed="true"] .acct-radio{ background: var(--auth-ink); border-color: var(--auth-ink); }
.acct-choice[aria-pressed="true"] .acct-radio svg{ stroke: var(--gold2); }
.acct-d{ font-size: .78rem; line-height: 1.55; color: var(--auth-mute); }
.acct-note{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; color: var(--auth-gold-ink);
}
.acct-note svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.acct-info{
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(11,61,38,.05);
  font-size: .74rem; line-height: 1.5; color: var(--auth-mute);
}
.acct-info svg{ width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: var(--auth-ink); stroke-width: 1.9; }
html.dark .acct-info{ background: rgba(255,255,255,.05); }
/* À la connexion, chaque carte mène directement au PIN : une flèche, pas
   un bouton radio. */
.acct-go{ width: 20px; height: 20px; flex: none; fill: none; stroke: var(--auth-mute); stroke-width: 2.2; }
.auth-opt{
  margin-left: 6px;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
  color: var(--auth-mute);
}
.shop-hint{ margin: -2px 0 2px; font-size: .74rem; line-height: 1.5; color: var(--auth-mute); }

/* ── Bandeau d'accueil du marchand ── */
.m-hero{ padding-bottom: 22px; }
.m-hero-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 0;
}
.m-hero-l{ min-width: 0; }
.m-eye{
  font-size: .6rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(240,192,64,.85);
}
.m-total{
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 6px;
  font-family: var(--fs);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.m-total.big{ font-size: 2.35rem; }
.m-total small{
  font-family: var(--f);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.66);
}
.m-sales-pill{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; padding: 0 13px;
  border-radius: 100px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-family: inherit; font-size: .74rem; font-weight: 800;
  cursor: pointer;
}
.m-sales-pill svg{ width: 14px; height: 14px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.2; }

/* ── Encaisser : le code, en grand ── */
.m-enc{
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 18px 28px;
}
.m-shop{ text-align: center; }
.m-shop-name{
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.75rem; line-height: 1.05; letter-spacing: -.01em;
  color: var(--txt);
  text-wrap: balance;
}
.m-shop-area{ margin-top: 4px; font-size: .78rem; color: var(--txt3); }
.m-qr-card{
  position: relative;
  padding: 24px 24px 16px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(11,61,38,.10);
  box-shadow: 0 14px 34px -18px rgba(11,61,38,.4);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.m-eq{ position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(201,147,11,.6); }
.m-eq.tl{ top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.m-eq.tr{ top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.m-eq.bl{ bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.m-eq.br{ bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.m-qr{ width: min(220px, 58vw); aspect-ratio: 1; max-width: 100%; }
.m-qr canvas, .m-qr img{ width: 100% !important; height: 100% !important; display: block; }
.m-code{
  font-family: var(--fm);
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  color: #0A4A2E;
}
.m-ask{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 9px 9px 14px;
  border-radius: 14px;
  background: rgba(212,160,23,.12);
  border: 1px solid rgba(212,160,23,.28);
  font-size: .76rem; color: var(--txt2);
}
.m-ask b{ color: var(--txt); font-size: .9rem; font-variant-numeric: tabular-nums; }
.m-ask button{
  margin-left: 6px; min-height: 32px; padding: 0 11px;
  border: none; border-radius: 10px;
  background: var(--card); color: var(--txt2);
  font-family: inherit; font-size: .7rem; font-weight: 800; cursor: pointer;
}
.m-wait{ display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--txt2); }
.m-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: m-pulse 2s ease-out infinite;
}
@keyframes m-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%{ box-shadow: 0 0 0 9px rgba(22,163,74,0); }
  100%{ box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce){ .m-dot{ animation: none; } }
.m-ask-btn{
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;
  border-radius: 16px;
  border: 1.5px solid rgba(11,61,38,.15);
  background: var(--card);
  color: var(--forest);
  font-family: inherit; font-size: .86rem; font-weight: 800;
  cursor: pointer;
}
.m-ask-btn svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
html.dark .m-ask-btn{ color: var(--gold2); border-color: rgba(255,255,255,.12); }

/* Trois onglets : la barre flottante de l'app, répartie en trois. */
.bnav-m{ justify-content: space-around; }
.bnav-m .bt{ min-width: 76px; }

/* ── Ma journée ── */
.m-day-hero{ padding: 2px 0 20px; }
.m-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.m-tile{
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
  min-width: 0;
}
.m-tile-l{
  font-size: .56rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.m-tile-v{
  margin-top: 3px;
  font-family: var(--fs);
  font-size: 1rem; font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.m-tile-v.gold{ color: var(--gold2); }
.m-list-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-daynav{ display: flex; align-items: center; gap: 4px; }
.m-daynav span{ min-width: 92px; text-align: center; font-size: .74rem; font-weight: 800; color: var(--txt); }
.m-daynav button{
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--card); cursor: pointer;
}
.m-daynav button svg{ width: 15px; height: 15px; fill: none; stroke: var(--txt2); stroke-width: 2.2; }
.m-daynav button:disabled{ opacity: .35; cursor: default; }
.m-sales{
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.m-sale{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
}
.m-sale:last-child{ border-bottom: none; }
.m-sale-av{
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,74,46,.08);
  color: var(--forest); font-size: .7rem; font-weight: 800;
}
html.dark .m-sale-av{ background: rgba(255,255,255,.08); color: var(--gold2); }
.m-sale-id{ flex: 1 1 auto; min-width: 0; }
.m-sale-n{ font-size: .82rem; font-weight: 700; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sale-t{ font-size: .66rem; color: var(--txt3); margin-top: 1px; }
.m-sale-v{ flex: none; font-size: .88rem; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.m-empty{ padding: 22px 18px; text-align: center; font-size: .78rem; line-height: 1.55; color: var(--txt3); }
.m-wd-note{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: -4px;
  font-size: .7rem; font-weight: 600; color: var(--txt3);
}
.m-wd-note svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── Ma boutique ── */
.mb-card{ display: flex; align-items: center; gap: 13px; padding: 2px 0 14px; }
.mb-av{
  width: 54px; height: 54px; flex: none;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,64,.18);
  border: 1px solid rgba(240,192,64,.32);
  color: var(--gold2);
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-size: 1.6rem;
}
.mb-id{ min-width: 0; }
.mb-name{
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-size: 1.5rem; line-height: 1.05;
  color: #fff;
  overflow-wrap: anywhere;
}
.mb-area{ margin-top: 3px; font-size: .76rem; color: rgba(255,255,255,.68); }
.mb-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 20px; }
.mb-facts div{
  min-width: 0;
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
}
.mb-facts span{
  display: block;
  font-size: .56rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.mb-facts b{
  display: block; margin-top: 3px;
  font-family: var(--fm);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Paiement reçu : visible à bout de bras, en plein soleil ── */
#sc-m-recu{ background: #0A4A2E; }
.m-recu{
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: calc(var(--sat) + 20px) 0 calc(var(--sab) + 20px);
  background:
    radial-gradient(70% 44% at 50% 26%, rgba(240,192,64,.22), transparent 66%),
    linear-gradient(170deg, #0F6B41 0%, #0A4A2E 55%, #072F1E 100%);
  overflow-y: auto;
}
.m-recu-mid{
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 0 26px;
  text-align: center;
}
.m-recu-ok{
  width: 86px; height: 86px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,64,.16);
  border: 2px solid rgba(240,192,64,.5);
  animation: m-pop .45s cubic-bezier(.2,1.4,.4,1) both;
}
.m-recu-ok svg{ width: 42px; height: 42px; fill: none; stroke: var(--gold2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes m-pop{ from{ transform: scale(.4); opacity: 0; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .m-recu-ok{ animation: none; } }
.m-recu-amt{
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  font-family: var(--fs);
  font-size: clamp(3rem, 16vw, 4rem); font-weight: 700; line-height: .92;
  letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.m-recu-amt small{ font-family: var(--f); font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.m-recu-who{
  display: inline-flex; align-items: center; gap: 11px;
  max-width: 100%;
  padding: 9px 18px 9px 9px;
  border-radius: 100px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: .9rem; font-weight: 700;
}
.m-recu-who span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-recu-av{
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,64,.22);
  color: var(--gold2); font-size: .78rem; font-weight: 800;
}
.m-recu-line{
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-size: 1.3rem; line-height: 1.25;
  color: rgba(255,255,255,.75);
}
.m-recu-when{ font-size: .74rem; color: rgba(255,255,255,.62); }
.m-recu-day{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 20px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 700;
}
.m-recu-day b{ color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.m-recu-acts{ padding: 16px 20px 0; }
.m-recu-acts .btn{ width: 100%; min-height: 58px; font-size: 1rem; }

/* ── Payer un commerçant ── */
.mp-shop{ display: flex; align-items: center; gap: 12px; padding: 2px 0 20px; }
.mp-av{
  width: 48px; height: 48px; flex: none;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,192,64,.18);
  border: 1px solid rgba(240,192,64,.32);
  color: var(--gold2);
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-size: 1.45rem;
}
.mp-id{ flex: 1 1 auto; min-width: 0; }
.mp-name{
  font-family: 'Instrument Serif', Palatino, Georgia, serif;
  font-style: italic; font-size: 1.35rem; line-height: 1.05;
  color: #fff; overflow-wrap: anywhere;
}
.mp-area{ margin-top: 3px; font-size: .74rem; color: rgba(255,255,255,.68); }
.mp-code{
  flex: none;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,.10);
  font-family: var(--fm); font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.8);
}
.mp-card{
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
}
.mp-amount{
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0 12px;
  border-bottom: 1.5px solid var(--border);
}
.mp-amount input{
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: none;
  font-family: var(--fs);
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.mp-amount span{ flex: none; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--txt3); }
.mp-lines{ display: flex; flex-direction: column; gap: 8px; }
.mp-lines div{ display: flex; justify-content: space-between; font-size: .8rem; color: var(--txt2); }
.mp-lines b{ color: var(--txt); font-variant-numeric: tabular-nums; }
.mp-lines b.mp-free{ color: var(--green); }
.mp-note{
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .74rem; line-height: 1.5; color: var(--txt3);
}
.mp-note svg{ width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── Code marchand tapé à la main ── */
.mcode-inp{
  text-align: center;
  font-family: var(--fm);
  font-size: 1.25rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
}
.mcode-help{ font-size: .74rem; line-height: 1.5; color: var(--txt3); text-align: center; margin-top: -4px; }

/* ── Profil personnel : la porte vers le compte marchand ── */
.pa-card{
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(212,160,23,.30);
  background: linear-gradient(135deg, rgba(212,160,23,.10), rgba(212,160,23,.03));
  text-align: left; font-family: inherit;
  cursor: pointer;
}
.pa-ic{
  width: 42px; height: 42px; flex: none;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,160,23,.16);
}
.pa-ic svg{ width: 19px; height: 19px; fill: none; stroke: var(--gold-txt); stroke-width: 1.9; }
html.dark .pa-ic svg{ stroke: var(--gold2); }
.pa-txt{ flex: 1 1 auto; min-width: 0; }
.pa-t{ font-size: .86rem; font-weight: 800; color: var(--txt); }
.pa-s{ font-size: .7rem; line-height: 1.4; color: var(--txt3); margin-top: 2px; }
.pa-ar{ width: 17px; height: 17px; flex: none; fill: none; stroke: var(--txt3); stroke-width: 2.2; }

/* ── Ordinateur : le mode marchand garde la colonne du téléphone ── */
@media(min-width:1280px){
  body.m-shell{ display: flex !important; align-items: center; justify-content: center; }
  body.m-shell .shell{ display: block !important; }
  body.m-shell .gp-layout,
  body.m-shell #gp-auth-overlay{ display: none !important; }
}

/* ── Contrôle visuel (2026-10-04) ─────────────────────────
   Relevé sur captures 390×844, 360×640 et 320×568, en clair et en sombre.
   Contrastes mesurés sur le fond réellement rendu (dégradés et halos). */

/* L'attribut hidden ne cachait rien : le display:flex de .m-ask passe devant
   la feuille du navigateur, et « Montant demandé 0 FCFA · Retirer » restait
   affiché sous le QR, même sans montant demandé. */
.m-ask[hidden]{ display: none; }

/* Profil : titre et sous-titre de la carte sont des <span>. Sans
   display:block, « Encaisse avec un QR… » suivait le titre sur sa ligne. */
.pa-t, .pa-s{ display: block; }

/* Les deux champs en grand étaient ramenés à 16px par la règle anti-zoom
   d'iOS (input{font-size:16px!important}). Ils restent au-dessus de 16px,
   donc sans zoom ; l'id passe devant la règle générale. */
#mp-amount{ font-size: 2.4rem !important; }
#mcode-input{ font-size: 1.25rem !important; }

/* Onglet actif en mode sombre : vert forêt sur la barre sombre (1,7:1),
   « Encaisser » disparaissait. Toutes les barres, pour rester identiques. */
html.dark .bnav .bt.on{ background: rgba(240,192,64,.12); }
html.dark .bnav .bt.on svg{ stroke: var(--gold2); }
html.dark .bnav .bt.on .bt-lbl{ color: var(--gold2); }

/* Bulle d'aide masquée là où elle couvrait l'essentiel, comme déjà sur
   reg-info, le PIN et le scan :
   – tunnel : elle couvrait « Continuer » et la carte « Pour mon commerce » ;
   – Encaisser : l'écran que l'on tourne vers le client ; à 360 et 320 px
     elle couvrait « Retirer » et « Demander un montant précis » ;
   – Paiement reçu : elle cachait le total du jour.
   L'aide reste dans Ma boutique et sur Ma journée. */
body[data-sc="acct-type"] .support-fab,
body[data-sc="reg-shop"] .support-fab,
body[data-sc="acct-pick"] .support-fab,
body[data-sc="m-encaisser"] .support-fab,
body[data-sc="m-recu"] .support-fab{ display: none; }
/* Là où elle reste, le bas de page peut remonter au-dessus d'elle : bouton
   Retirer et « frais de retrait 2 % », Se déconnecter, note sous Payer. */
#sc-m-journee .scroll,
#sc-m-boutique .scroll,
#sc-mpay .scroll{ padding-bottom: calc(164px + var(--sab)); }

/* Frise d'étapes : ancrée en haut de l'écran, elle recouvrait le titre à
   360×640 et 320×568, et le contenu passait dessous en défilant. Elle vit
   désormais dans .reg-scroll, sous le retour, et défile avec la page. Masquée
   (ouverture d'un compte depuis l'app), elle ne laisse pas de marge vide. */
#sc-acct-type .reg-scroll .auth-steps,
#sc-reg-shop .reg-scroll .auth-steps{ position: static !important; margin: 4px 0 6px; }
#sc-acct-type .auth-steps[hidden],
#sc-reg-shop .auth-steps[hidden]{ display: none !important; }
#sc-acct-type .auth-steps:not([hidden]) ~ .reg-inner,
#sc-reg-shop .auth-steps:not([hidden]) ~ .reg-inner{ padding-top: 14px !important; }

/* Case CGU de la boutique : le filet var(--auth-line) ne se voyait pas sur le
   papier. !important : la règle du tunnel qui pose ce filet en porte un. */
#sc-reg-shop .cgu .bx{ border: 1.5px solid var(--auth-mute) !important; }
/* Cochée, elle restait claire (le fond du tunnel est lui aussi en !important) :
   on rend l'état prévu, case pleine et coche dorée ; en sombre, coche foncée
   sur case claire. */
#sc-reg-shop .cgu input:checked + .bx{ background: var(--auth-ink) !important; border-color: var(--auth-ink) !important; }
html.dark #sc-reg-shop .cgu input:checked + .bx svg{ stroke: var(--auth-paper); }

/* Placeholders du tunnel trop pâles (#A9B0A2). */
.auth-paper .auth-inp::placeholder{ color: #737C6B; }
html.dark .auth-paper .auth-inp::placeholder{ color: #6F7A6A; }

/* Pastille d'icône « Pour moi » : invisible sur la carte sombre. */
html.dark .acct-ic{ background: rgba(255,255,255,.06); }

/* Cartes de choix : blanches comme sur la maquette (couleur papier, elles se
   fondaient dans le fond) ; pastille vide visible ; en sombre, la coche dorée
   sur pastille claire ne se voyait pas. */
.acct-choice{ background: var(--card); }
html.dark .acct-choice{ background: var(--auth-paper); }
.acct-radio{ border-color: rgba(11,61,38,.3); }
html.dark .acct-radio{ border-color: rgba(255,255,255,.3); }
html.dark .acct-choice[aria-pressed="true"] .acct-radio svg{ stroke: var(--auth-paper); }

/* Bandeau : sur-titre doré et « FCFA » à 4,0 et 4,5:1 sur le dégradé. */
.m-eye{ color: var(--gold2); }
.m-total small{ color: rgba(255,255,255,.8); }
/* Un gros total (12 450 000) passait sous la pastille « 148 ventes » à 360
   et 320 px : la pastille descend d'une ligne au lieu de le recouvrir. */
.m-hero-row{ flex-wrap: wrap; row-gap: 10px; }
.m-sales-pill{ margin-left: auto; }

/* Tuiles du bandeau : étiquettes à 3,4:1 ; l'or de la commission à 3,6:1 en
   16px. À 19px gras le montant compte comme grand texte (seuil 3:1). */
.m-tile-l, .mb-facts span{ color: rgba(255,255,255,.88); }
.m-tile-v{ font-size: 1.2rem; }
/* RCCM / NIF : « RCCM GA-LBV-0… » ne sert à rien, le numéro passe à la ligne. */
.mb-facts b{ white-space: normal; overflow-wrap: anywhere; }

/* Notes sous un bouton doré : son halo teinte le fond, le gris tombait à 4,1:1. */
.m-wd-note, .mp-note{ color: var(--txt2); }
html.dark .m-wd-note, html.dark .mp-note{ color: var(--auth-mute); }
.pa-s{ color: var(--txt2); }
html.dark .pa-s{ color: var(--auth-mute); }
html.dark .m-ask{ color: var(--auth-mute); }

/* Payer un commerçant : « 0 F » de frais, l'argument de l'écran, était à
   3,3:1 (vert vif sur blanc). Code du commerçant plus lisible. */
.mp-lines b.mp-free{ color: var(--forest2); }
html.dark .mp-lines b.mp-free{ color: var(--green); }
.mp-code{ font-size: .66rem; color: rgba(255,255,255,.92); }
/* Initiale du commerçant : or sur or à 3,7:1 ; à 24px elle compte comme
   grand texte (seuil 3:1), comme celle de Ma boutique. */
.mp-av{ font-size: 1.55rem; }
/* Quartier sous le nom, dans le bandeau : 4,4:1 à 320px. */
.mp-area, .mb-area{ color: rgba(255,255,255,.8); }

/* Sous-titre du tunnel posé sur la photo : 4,1:1 sur le fond réel. */
html:not(.dark) #sc-acct-type .auth-sub,
html:not(.dark) #sc-reg-shop .auth-sub,
html:not(.dark) #sc-acct-pick .auth-sub{ color: var(--txt2); }

/* Encaisser : le QR prend la place libre (300px à 390×844 au lieu de 220),
   sans que sa carte dépasse la largeur (100vw - 90px) ni pousser le bouton
   sous la barre (100dvh - 440px). Agrandi, il reste net. */
.m-qr{ width: max(min(58vw, 220px), min(100vw - 90px, 300px, 100dvh - 440px)); }
.m-qr img, .m-qr canvas{ image-rendering: pixelated; }
/* Écran court (≤ 700px de haut) : marges resserrées, pour que « Demander un
   montant précis » tienne au-dessus de la barre d'onglets (il était dessous
   à 320×568) ; la place gagnée revient au QR (250px à 360×640). */
@media(max-height:700px){
  .m-hero{ padding-bottom: 16px; }
  .m-hero-row{ padding-top: 10px; }
  .m-enc{ gap: 10px; padding-top: 12px; }
  .m-shop-name{ font-size: 1.5rem; }
  .m-qr-card{ padding: 20px 20px 12px; gap: 9px; }
  .m-qr{ width: max(min(58vw, 220px), min(100vw - 90px, 300px, 100dvh - 392px)); }
}

/* « Montant à payer » : le padding de .lbl le décalait de 4px sur le champ. */
.mp-card .lbl{ padding-inline: 0; }

/* Paiement reçu : un chiffre lisible à bout de bras. Il grandit avec l'écran
   (62 → 76px à 390) ; « FCFA » passe dessous si la place manque. */
.m-recu-amt{ font-size: clamp(3rem, 27vw - 29px, 5.5rem); flex-wrap: wrap; row-gap: 2px; }
.m-recu .m-eye{ color: var(--gold3); font-size: .7rem; }
.m-recu-av{ background: var(--gold2); color: var(--forest); }
.m-recu-day b{ white-space: nowrap; }


/* Un élément marqué hidden reste caché, quelle que soit sa règle display
   (sinon « Annuler » du PIN apparaissait pour tout le monde). */
[hidden]{ display: none !important; }

/* Écrans marchand : la bulle d'aide recouvrait « Retirer » sur un petit
   téléphone. L'aide reste dans Ma boutique › Aide & Support. */
body[data-sc^="m-"] .support-fab{ display: none; }

/* ══ CONFIRMATION PAR PIN ══════════════════════════════════════
   Feuille du bas avant toute sortie d'argent (pin-confirm.js) : le
   montant en grand, à qui, les frais, puis le PIN. Classes propres
   (mpc-*) : .pin-dot / .pin-k sont dessinés pour l'écran sombre du
   déverrouillage et seraient illisibles sur une feuille claire. */
/* La feuille gère ses espacements elle-même (le gap de .modal-box s'ajoutait
   à chaque marge). */
.mpc{ text-align: center; gap: 0; }
.mpc-lbl{
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt3); margin-top: 4px;
}
.mpc-title{
  font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
  color: var(--forest); margin-top: 8px; font-variant-numeric: tabular-nums;
}
html.dark .mpc-title{ color: var(--gold2); }
.mpc-desc{ font-size: .8rem; line-height: 1.45; color: var(--txt2); margin: 6px auto 0; max-width: 320px; }
.mpc-dots{ display: flex; justify-content: center; gap: 16px; margin: 22px 0 8px; }
.mpc-dot{
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--txt3); background: transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
.mpc-dot.fill{ background: var(--forest); border-color: var(--forest); transform: scale(1.1); }
html.dark .mpc-dot.fill{ background: var(--gold2); border-color: var(--gold2); }
.mpc-dot.err{ background: #DC2626; border-color: #DC2626; animation: shake .4s; }
.mpc-dots.busy .mpc-dot.fill{ animation: mpc-pulse .8s ease-in-out infinite; }
@keyframes mpc-pulse{ 50%{ opacity: .35; } }
.mpc-msg{ min-height: 18px; font-size: .76rem; font-weight: 700; color: var(--txt3); margin-bottom: 14px; }
.mpc-msg.err{ color: #B91C1C; }
html.dark .mpc-msg.err{ color: #F87171; }
/* width:100% : avec margin:auto, un enfant de .modal-box (flex en colonne)
   ne s'étire plus et la grille se tassait en touches de 26 px. */
.mpc-pad{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; margin: 0 auto 14px; }
.mpc-k{
  height: 56px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .08s, background .12s;
}
.mpc-k:active{ transform: scale(.95); background: var(--bg3); }
.mpc-k0{ grid-column: 2; }
.mpc-del svg{ width: 24px; height: 24px; fill: none; stroke: var(--txt2); stroke-width: 1.8; }
.mpc .btn-ghost{ margin-top: 0; }
@media (max-height: 640px){
  .mpc-dots{ margin-top: 14px; }
  .mpc-k{ height: 48px; }
}

/* ── Mode sombre : le vert forêt de la marque (#0A4A2E) tombe à 1,8:1 sur
   fond sombre. Les textes qui le portaient passent à l'or, comme les
   pastilles actives (.pill.on). Relevé par mesure de contraste, écran par
   écran : tout est au-dessus de 3:1 après ce bloc. */
html.dark .gp-sec-title .more,
html.dark .send-method-btn,
html.dark .send-amt-box .amt-val .cur,
html.dark .qrh-alt,
html.dark .tr-op.on,
html.dark .bud-tabs-wrap .btab.on,
html.dark #sc-budget .btab.on,
html.dark .prof-stat-mini-v{ color: var(--gold2); }
html.dark .tr-op.on{ background: rgba(212,160,23,.15); box-shadow: none; }
html.dark .tr-receipt-live .l.strong span,
html.dark .send-method.active,
html.dark .rec-change{ color: var(--gold2); }
html.dark .send-method.active{ border-color: rgba(240,192,64,.5); background: rgba(240,192,64,.08); }
html.dark .rec-change{ border-color: rgba(240,192,64,.4); }
/* Rouge #B91C1C : 2,9:1 sur fond sombre. Le rouge clair passe à 6:1. */
html.dark .btn.btn-danger{ color: #F87171; }
html.dark .btn.btn-danger svg{ stroke: #F87171; }
/* Thème clair : l'or #F0C040 sur sa pastille pâle tombait à 1,5:1. */
.recv-flow-num{ color: var(--gold-txt); }
html.dark .recv-flow-num{ color: var(--gold2); }


/* ── Transitions d'écrans : fluidité ──
   Mesuré sur un Android moyen simulé : le flou d'arrière-plan (boutons ‹,
   barre du bas) se recalcule à chaque image pendant que l'écran glisse et
   divise le nombre d'images par deux. On le coupe le temps du glissement
   (classe posée par G._swap) ; au repos, le verre reste flouté. */
body.sc-anim .sc *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Les animations des écrans cachés n'ont personne pour les voir. */
.sc:not(.on), .sc:not(.on) *{ animation-play-state: paused !important; }
/* ── Connexion : champs numéro et email (refonte) ── */
/* Les deux champs de #sc-login étaient des pavés gris sans bordure, avec une
   étiquette de 9,6px coincée dedans ; au toucher, l'anneau :focus-visible
   dessinait un second cadre doré À L'INTÉRIEUR du champ numéro. Ici :
   - étiquette au-dessus, alignée sur le bord gauche de la colonne ;
   - une boîte de 54px (même hauteur et même rayon que le bouton doré), fond
     plein, filet de 1,5px à plus de 3:1 sur la boîte comme sur la page ;
   - focus = la boîte elle-même (bordure or + halo), jamais un contour ;
   - « +241 » devient un segment fixe à gauche du champ, séparé par le même
     filet que la bordure.
   Tout est accroché à #sc-login (et #sc-otp pour les cases du code) : la
   spécificité d'id passe devant les !important des passes précédentes sans
   en empiler davantage côté sélecteurs, et l'overlay bureau #gp-auth-* n'est
   pas concerné. Le bloc email peut être masqué (display:none) : l'espacement
   repose sur le gap de .auth-card, qui ignore les éléments masqués. */
#sc-login,
#sc-otp{
  --login-h: 54px;                   /* ≥ 52px au doigt, = bouton doré */
  --login-r: 15px;                   /* = rayon de .auth-paper .auth-cta */
  --login-field: var(--card);        /* boîte blanche sur le papier */
  --login-line: #7D8476;             /* auth-mute 80 % / papier : 3,9:1 sur blanc, 3,5:1 sur papier */
  --login-addon: rgba(11,61,38,.06); /* segment « +241 » */
  --login-ph: var(--txt3);           /* placeholder #6B7464 : 4,9:1 sur blanc */
  --login-focus: var(--gold-txt);    /* bordure focus (repli) #8A6508 : 5,3:1 sur blanc */
  --login-halo: rgba(212,160,23,.28);
}
html.dark #sc-login,
html.dark #sc-otp{
  --login-field: var(--auth-surface);  /* #16231C, une marche au-dessus du papier */
  --login-line: #717C6D;               /* auth-mute 70 % / papier : 3,7:1 sur la boîte, 4,3:1 sur papier */
  --login-addon: rgba(255,255,255,.05);
  --login-ph: #879281;                 /* auth-mute 85 % / papier : 5,0:1 sur la boîte */
  --login-focus: var(--gold2);         /* 9,5:1 sur la boîte */
  --login-halo: rgba(240,192,64,.2);
}
/* Mêmes teintes, dérivées des variables de la charte quand le moteur sait les
   mélanger (les valeurs ci-dessus servent de repli). */
@supports (color: color-mix(in srgb, red 50%, blue)){
  #sc-login, #sc-otp{
    --login-line: color-mix(in srgb, var(--auth-mute) 80%, var(--auth-paper));
    /* #A87D0E : plus doré que --gold-txt seul, 3,8:1 sur blanc, 3,4:1 sur papier */
    --login-focus: color-mix(in srgb, var(--gold) 40%, var(--gold-txt));
  }
  html.dark #sc-login, html.dark #sc-otp{
    --login-line: color-mix(in srgb, var(--auth-mute) 70%, var(--auth-paper));
    --login-ph: color-mix(in srgb, var(--auth-mute) 85%, var(--auth-paper));
  }
}

/* Rythme : 18px entre deux champs, 26px avant le bouton. */
#sc-login .auth-card{ gap: 18px !important; }
#sc-login .auth-cta{ margin-top: 8px !important; }

/* Le bloc ne dessine plus rien : il empile l'étiquette et la boîte. */
#sc-login .auth-field,
#sc-login .auth-field:focus-within{
  display: flex; flex-direction: column; gap: 8px !important;
  min-height: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}

/* Étiquette : capitales conservées (rôle d'étiquette), mais lisibles. */
#sc-login .auth-lbl{
  display: flex; align-items: center; gap: 8px;
  margin: 0 !important; padding: 0;
  font-family: var(--f) !important; font-size: .7rem !important; font-weight: 800;
  line-height: 1.2 !important; letter-spacing: .1em !important; text-transform: uppercase;
  color: var(--auth-ink);              /* 11,3:1 clair, 16:1 sombre */
}
#sc-login .auth-lbl-chip{
  margin-block: -3px;                  /* la pastille ne grandit pas la ligne : même écart étiquette/boîte partout */
  padding: 3px 8px !important; border-radius: 999px;
  background: rgba(201,147,11,.14) !important; color: var(--auth-gold-ink) !important;
  font-size: .58rem !important; font-weight: 800; letter-spacing: .08em !important; line-height: 1.2;
}
html.dark #sc-login .auth-lbl-chip{ background: rgba(240,192,64,.14) !important; }

/* La boîte : le champ email directement, ou la rangée du numéro. */
#sc-login .auth-phone-row,
#sc-login .auth-inp{
  box-sizing: border-box;
  height: var(--login-h) !important; min-height: var(--login-h);
  background: var(--login-field) !important;
  border: 1.5px solid var(--login-line) !important;
  border-radius: var(--login-r) !important;
  box-shadow: none !important;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
#sc-login .auth-inp{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 0 16px !important;
  font-family: var(--f) !important; font-size: 1.0625rem !important; font-weight: 600 !important;
  line-height: normal !important; letter-spacing: .01em;
  color: var(--auth-ink) !important; caret-color: var(--login-focus);
}
#sc-login .auth-inp::placeholder{ color: var(--login-ph) !important; font-weight: 500; opacity: 1; }

/* Rangée du numéro : segment pays + champ, un seul cadre. */
#sc-login .auth-phone-row{
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  overflow: hidden;                    /* le fond du segment suit l'arrondi */
}
#sc-login .auth-country{
  flex: none; display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 0 14px !important;
  background: var(--login-addon) !important;
  border: 0 !important; border-radius: 0 !important;
  border-right: 1.5px solid var(--login-line) !important;
  font-size: 1.05rem; line-height: 1; color: var(--auth-ink);
}
#sc-login .auth-country span{
  font-family: var(--f) !important; font-size: 1rem !important; font-weight: 700;
  letter-spacing: .01em !important; color: var(--auth-ink) !important;
  font-variant-numeric: tabular-nums;
}
#sc-login .auth-phone-row .auth-inp,
#sc-login .auth-phone-row .auth-inp:focus{
  flex: 1; min-width: 0;
  height: auto !important; min-height: 0;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 16px 0 14px !important;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* Focus : la boîte s'allume, aucun contour navigateur à l'intérieur. */
#sc-login .auth-phone-row:focus-within,
#sc-login .auth-inp:focus{
  border-color: var(--login-focus) !important;
  box-shadow: 0 0 0 4px var(--login-halo) !important;
}
#sc-login .auth-inp:focus,
#sc-login .auth-inp:focus-visible{ outline: none !important; }

/* Remplissage automatique : Chrome peint le champ en bleu pâle ; on garde la
   boîte de la charte (ombre interne), halo compris quand le champ est actif. */
#sc-login .auth-inp:-webkit-autofill{
  -webkit-text-fill-color: var(--auth-ink);
  box-shadow: inset 0 0 0 60px var(--login-field) !important;
}
#sc-login .auth-inp:-webkit-autofill:focus{
  box-shadow: inset 0 0 0 60px var(--login-field), 0 0 0 4px var(--login-halo) !important;
}
#sc-login .auth-phone-row .auth-inp:-webkit-autofill,
#sc-login .auth-phone-row .auth-inp:-webkit-autofill:focus{
  box-shadow: inset 0 0 0 60px var(--login-field) !important;
}

/* Cases du code (#sc-otp) : mêmes filet, fond et focus que les champs de la
   connexion. Leur filet var(--auth-line) tombait à 1,3:1, et le fond blanc
   au focus rendait le chiffre clair invisible en mode sombre. */
#sc-otp .otp-box{
  background: var(--login-field) !important;
  border: 1.5px solid var(--login-line) !important;
  border-radius: var(--login-r) !important;
  color: var(--auth-ink) !important;
  caret-color: var(--login-focus);
}
#sc-otp .otp-box:focus{
  background: var(--login-field) !important;
  border-color: var(--login-focus) !important;
  box-shadow: 0 0 0 4px var(--login-halo) !important;
  outline: none !important;
}
#sc-otp .otp-box:focus-visible{ outline: none !important; }
/* ── Frais affichés sur toutes les opérations ── */
/* Même récapitulatif que l'envoi (.send-recap) : montant, frais et taux,
   total débité ou crédité. Ici l'accent porte sur la ligne totale. */
.fee-recap{ max-width: none; margin: 10px 0 0; }
.fee-recap .sr-row:first-child b{ color: var(--txt); }
.fee-recap .sr-tot b{ color: var(--forest); }
.fee-recap .sr-row b.sr-free,
.cd-row b.sr-free{ color: var(--green, #16A34A); font-weight: 800; }
.fee-recap-flat{ margin-top: 2px; padding-top: 8px; }
.fee-recap-warn{ margin-top: 6px; font-size: .72rem; font-weight: 700; color: #DC2626; }
.fee-recap.tx-fees{
  margin: 0 0 12px; padding: 10px 16px;
  border: none; border-radius: var(--r-sm);
  background: var(--card2, rgba(0,0,0,.02));
  font-size: .8rem; gap: 6px;
}
html.dark .fee-recap .sr-row:first-child b{ color: var(--txt); }
html.dark .fee-recap .sr-tot b{ color: var(--gold2); }
html.dark .fee-recap .sr-row b.sr-free,
html.dark .cd-row b.sr-free{ color: #4ADE80; }
html.dark .fee-recap-warn{ color: #F87171; }
/* Payer un commerçant : la ligne « Total débité » */
.mp-lines .mp-tot{ padding-top: 8px; border-top: 1px solid var(--border); font-weight: 800; }
.mp-lines .mp-tot b{ font-weight: 900; }
html.dark .mp-lines b.mp-free{ color: #4ADE80; }
/* Caisse : ce que la vente rapporte une fois la commission retenue */
.m-ask-l small{ display: block; margin-top: 2px; font-size: .62rem; font-weight: 600; color: var(--txt3); }
.m-sale-v .m-sale-net{ display: block; font-size: .62rem; font-weight: 600; color: var(--txt3); text-align: right; }
.m-recu-fee{ margin-top: -8px; font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.72); }
.m-recu-fee:empty{ display: none; }
/* Lien de paiement : le net crédité */
.ebl-net{ font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.ebl-link-net{ font-size: .68rem; color: var(--txt3); }
html.dark #ebl-result-amt{ color: var(--gold2) !important; }


/* ── Tontine : corrections de style ──────────────────────
   Revue des écrans Tontine en 360 et 412 px, clair et sombre, avec de vrais
   noms (« Association des commerçants du marché de Mont-Bouët ») et des
   montants à sept chiffres. Ce bloc corrige ce que ces captures montraient. */

/* En-tête du détail : il gardait un fond carte (dégradé crème) posé sur le
   bandeau vert. En clair, le titre blanc et le bouton retour devenaient
   invisibles. Il rejoint le bandeau des autres écrans ; un nom long tient
   sur deux lignes au plus, au lieu de quatre. */
#sc-tontine-detail .gnav .snav{ background: none; border-bottom: none; }
#sc-tontine-detail .snav-t{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#sc-tontine-detail .snav-a{ flex: none; }
/* « + Créer », « Gérer », « Membres » : 31 px de haut. La zone touchée
   s'élargit sans grossir la pastille. */
#sc-tontine .snav-a, #sc-tontine-detail .snav-a{ position: relative; }
#sc-tontine .snav-a::after, #sc-tontine-detail .snav-a::after{
  content: ''; position: absolute; inset: -7px -4px;
}

/* La bulle d'aide tombait sur « Cotiser maintenant ». Comme sur les autres
   écrans d'argent, elle s'efface du détail ; le support reste dans Profil.
   Sur la liste elle reste, mais la fin de liste lui laisse la place pour
   que « Lancer une tontine » ne passe plus dessous. */
body[data-sc="tontine-detail"] .support-fab{ display: none; }
#tontine-list{ padding-bottom: calc(96px + var(--sab)); }

/* ── Liste ── */
/* Le ruban rognait l'essentiel : « Échéance passée le 7 oct. · pénal… ».
   Il passe sur deux lignes plutôt que de couper la pénalité. */
.tnt-strip-t{
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Le nom aussi : à 360 px, « Association des commerç… » ne disait plus de
   quelle tontine il s'agit. */
.tnt-card-name{
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* En sombre, la règle « html.dark .tnt-turnseg » l'emportait sur « .now » :
   le tour en cours perdait son or et ne se voyait plus. */
/* Des cartes de hauteur régulière : la ligne « 8 membres · montant par
   semaine » ne passe plus à la ligne. */
.tnt-card-meta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .tnt-turnseg.now{
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  box-shadow: 0 0 7px rgba(240,192,64,.45);
}

/* ── Détail ── */
#sc-tontine-detail #td-body > div:first-child{ margin-bottom: 0; }
#td-body{ padding-bottom: calc(28px + var(--sab)); }

/* Carte du haut : le montant prend toute la largeur sous l'étiquette et la
   cagnotte, au lieu de se serrer à côté d'un « TOTAL / CAGNOTTE » sur deux
   lignes. */
.td-hero-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.td-hero-main{ display: contents; }
.td-hero-main .gp-bal-label{ grid-column: 1; grid-row: 1; line-height: 1.45; letter-spacing: .12em; }
.td-hero-main .gp-bal-amount{ grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; row-gap: 2px; }
.td-hero-pot{ grid-column: 2; grid-row: 1; text-align: right; }
.td-hero-pot-k{
  font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.65);
}
.td-hero-pot-v{
  font-family: var(--fd); font-size: 1.05rem; font-weight: 900;
  color: var(--gold2); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Tour en cours */
.td-turn-who{ font-size: .95rem; font-weight: 900; color: var(--txt); overflow-wrap: anywhere; }
.td-turn-who span{ font-size: .68rem; font-weight: 600; color: var(--txt3); white-space: nowrap; }
.td-pay{
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 14px;
  background: var(--gold2);
  color: #000;
  font-family: var(--f);
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
}
.td-pay:active{ transform: scale(.98); }
.td-pay.paid{ background: var(--bg2); color: var(--txt3); cursor: default; }
.td-pay.paid:active{ transform: none; }
html.dark .td-pay.paid{ background: rgba(255,255,255,.06); }

/* Listes (non-payants, dettes) : la colonne d'avatar faisait 42 px pour un
   rond de 32, ce qui repoussait le nom et le coupait en trois lignes. */
#td-body .gp-tx-pill{ grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; cursor: default; }
#td-body .gp-tx-pill-name{ overflow-wrap: anywhere; line-height: 1.3; }
html.dark #td-body [style*="color:#dc2626"]{ color: #F87171 !important; }

/* Pastilles d'état : en sombre, vert, or et rouge foncés sur fond noir
   (« Cotisé », « Tour », « Tour en cours », « En attente ») ne se lisaient
   plus. */
html.dark #sc-tontine-detail .gp-chip.gold{ background: rgba(240,192,64,.14); color: var(--gold2); }
html.dark #sc-tontine-detail .gp-chip.green{ background: rgba(34,197,94,.14); color: #6EE7A0; }
html.dark #sc-tontine-detail .gp-chip.red{ background: rgba(248,113,113,.14); color: #FCA5A5; }

/* Boutons d'action : une seule famille, 44 px minimum, la police de l'app
   (« Quitter » et « Partager » sortaient en police système). L'or clair
   écrit sur crème (« Rappeler », « Clôturer le cycle ») passe à l'or foncé
   en clair ; --gold2 reste l'accent du sombre. */
.td-btnrow{ display: flex; gap: 8px; margin-top: 8px; }
.td-btn{
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg2);
  color: var(--txt2);
  font-family: var(--f);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.td-btn:active, .td-act:active{ transform: scale(.97); }
.td-btn.wide{ width: 100%; margin-top: 8px; }
#td-body > .td-btn.wide{ margin-top: 0; }
.td-btn.gold{ border-color: rgba(212,160,23,.32); background: rgba(212,160,23,.10); color: var(--gold-txt); }
.td-btn.forest{ border-color: rgba(10,74,46,.2); background: rgba(10,74,46,.08); color: var(--forest); }
.td-btn.red{ border-color: rgba(220,38,38,.22); background: rgba(220,38,38,.07); color: #B91C1C; }
html.dark .td-btn{ background: rgba(255,255,255,.05); }
html.dark .td-btn.gold{ border-color: rgba(240,192,64,.28); background: rgba(240,192,64,.10); color: var(--gold2); }
html.dark .td-btn.forest{ border-color: rgba(110,231,160,.22); background: rgba(34,197,94,.10); color: #6EE7A0; }
html.dark .td-btn.red{ border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.08); color: #FCA5A5; }

.td-act{
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  font-family: var(--f);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.td-act.gold{ background: rgba(212,160,23,.14); color: var(--gold-txt); }
.td-act.forest{ background: rgba(10,74,46,.10); color: var(--forest); }
.td-act.solid{ background: var(--gold2); color: #000; }
.td-act.red{ background: rgba(220,38,38,.08); color: #B91C1C; }
html.dark .td-act.gold{ background: rgba(240,192,64,.12); color: var(--gold2); }
html.dark .td-act.forest{ background: rgba(34,197,94,.12); color: #6EE7A0; }
html.dark .td-act.red{ background: rgba(248,113,113,.10); color: #FCA5A5; }

/* Ligne de membre (Gérer / Membres) : numéro, nom en entier, puis état et
   téléphone sur une ligne ; les gestes du créateur dessous. */
.td-mrow{
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 14px;
}
.td-mrow.now{ border-color: rgba(212,160,23,.38); }
html.dark .td-mrow{ background: rgba(255,255,255,.04); }
.td-mrow-top{ display: flex; align-items: flex-start; gap: 10px; }
.td-mrow-num{
  width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: .65rem; font-weight: 800;
}
.td-mrow-id{ flex: 1; min-width: 0; }
.td-mrow-name{ display: flex; align-items: center; min-height: 30px; }
.td-mrow-name span{ min-width: 0; font-size: .82rem; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; line-height: 1.3; }
.td-mrow-edit{
  flex: none;
  width: 44px; height: 44px;
  margin: -7px -10px -7px -6px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--txt3); cursor: pointer;
}
.td-mrow-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.td-mrow-meta .gp-chip{ padding: 3px 9px; font-size: .6rem; }
.td-mrow-tel{ font-size: .62rem; color: var(--txt3); font-family: var(--fm); }
.td-mrow-acts{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
/* Dans une ligne de dette, le bouton laisse la place au nom. */
#td-body .gp-tx-pill .td-act{ padding: 0 11px; font-size: .68rem; }

/* Ajout d'un membre depuis le détail */
.td-add{ display: flex; gap: 8px; margin-top: 8px; }
.td-add .inp{ flex: 1 1 0; min-width: 0; padding: 13px 14px; }
.td-add button{
  flex: none; width: 50px;
  border: none; border-radius: 14px;
  background: var(--forest); color: #fff;
  font-size: 1.15rem; font-weight: 800; cursor: pointer;
}

/* Planning de rotation : le numéro d'un tour passé était blanc sur crème,
   « ← En cours » or clair sur blanc, et un nom long touchait « Passé ». */
.td-sched-row{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.td-sched-row:last-child{ border-bottom: none; padding-bottom: 0; }
.td-sched-num{
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--forest); color: #fff;
  font-size: .65rem; font-weight: 800;
}
.td-sched-row.now .td-sched-num{ background: var(--gold2); color: #000; }
.td-sched-row.past .td-sched-num{ background: var(--bg2); color: var(--txt3); box-shadow: inset 0 0 0 1px var(--border); }
html.dark .td-sched-row.past .td-sched-num{ background: rgba(255,255,255,.06); }
.td-sched-id{ flex: 1; min-width: 0; }
.td-sched-name{
  font-size: .8rem; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-sched-row.now .td-sched-name{ font-weight: 900; }
.td-sched-row.past .td-sched-name{ color: var(--txt3); }
.td-sched-date{ font-size: .6rem; color: var(--txt3); font-family: var(--fm); }
.td-sched-st{ flex: none; font-size: .65rem; font-weight: 700; color: var(--txt2); }
.td-sched-row.past .td-sched-st{ color: var(--txt3); }
.td-sched-row.now .td-sched-st{
  padding: 4px 10px; border-radius: 100px;
  background: rgba(212,160,23,.14); color: var(--gold-txt); font-weight: 800;
}
html.dark .td-sched-row.now .td-sched-st{ background: rgba(240,192,64,.14); color: var(--gold2); }

/* Agencement du détail : l'essentiel (qui reçoit, combien, avant quand, le
   bouton) tient dans le premier écran de 360x640 ; ce qui demande un geste
   (dettes, retardataires, gestion) passe avant ce qui informe (planning,
   calendrier). Un seul style de carte, des écarts en multiples de 4. */
#td-body.g14{ gap: 12px; }
.td-hero{ padding: 16px 18px; }
.td-hero .td-hero-top{ margin-bottom: 12px; }
.td-hero-bar{
  position: relative; z-index: 1;
  height: 6px; margin-bottom: 6px; overflow: hidden;
  border-radius: 100px; background: rgba(255,255,255,.15);
}
.td-hero-bar > div{ height: 100%; border-radius: 100px; background: var(--gold2); transition: .4s; }
.td-hero-foot{
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .6rem; color: rgba(255,255,255,.6);
}
.td-turn{
  padding: 16px;
  border-radius: 16px;
  background: rgba(212,160,23,.1);
  border: 1.5px solid rgba(212,160,23,.3);
}
html.dark .td-turn{ background: rgba(240,192,64,.07); border-color: rgba(240,192,64,.24); }
.td-turn-h{ margin-bottom: 8px; }
.td-turn .td-pay{ margin-top: 12px; }

.td-card{
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}
.td-card-h{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.td-card-t{ font-family: var(--fd); font-size: .9rem; font-weight: 800; color: var(--txt); }
.td-card-t.red{ color: #B91C1C; }
html.dark .td-card-t.red{ color: #FCA5A5; }
.td-card-k{
  flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt3);
}
.td-unpaid{ border-color: rgba(220,38,38,.16); }
.td-debts{ border-color: rgba(212,160,23,.32); }
.td-debts .gp-tx-pill{ margin-bottom: 8px !important; }
.td-debts .gp-tx-pill:last-child{ margin-bottom: 0 !important; }
.td-sub{
  margin: 16px 0 8px;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt3);
}
.td-danger{ margin-top: 16px !important; }

/* Retardataires : une ligne serrée, pastilles alignées à droite. */
.td-urow{
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 4px 0;
  border-top: 1px solid var(--border);
}
.td-card-h + .td-urow{ border-top: none; }
.td-urow-av{
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(220,38,38,.1); color: #B91C1C;
  font-size: .65rem; font-weight: 800;
}
html.dark .td-urow-av{ background: rgba(248,113,113,.14); color: #FCA5A5; }
.td-urow-name{
  flex: 1; min-width: 0;
  font-size: .8rem; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-urow .gp-chip{ flex: none; padding: 3px 9px; font-size: .6rem; }
.td-allpaid{
  padding: 12px 16px; border-radius: 16px; text-align: center;
  background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.2);
  font-size: .78rem; font-weight: 700; color: var(--green);
}
html.dark .td-allpaid{ color: #6EE7A0; }

/* Gestion : les gestes collectifs en grille de deux, en tête du bloc. */
.td-mgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.td-manage .td-more{ margin-top: 0; }
.td-mrow-acts.solo{ flex: none; align-self: center; margin-top: 0; }

/* Repli « Voir les N autres » (affichage seulement). */
.td-fold:not(.open) .td-hide{ display: none; }
.td-fold.open .td-more{ display: none; }
.td-more{
  width: 100%; min-height: 44px; margin-top: 8px;
  border: none; border-radius: 12px;
  background: var(--bg2); color: var(--txt2);
  font-family: var(--f); font-size: .72rem; font-weight: 800; cursor: pointer;
}
html.dark .td-more{ background: rgba(255,255,255,.05); }
.td-cal .td-card-h{ margin-bottom: 4px; }

/* ── Création (#mt) ── */
/* Les champs et les lignes de membres avaient le fond crème de leur cadre :
   « Nom… » et « +241… » flottaient sans bord visible. */
#mt .nt-members .inp{ background: var(--card); }
html.dark #mt .nt-members{ background: rgba(255,255,255,.03) !important; }
.nt-mrow{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 12px;
  background: var(--card);
  border-radius: 12px;
}
.nt-mrow .gp-chip{ padding: 3px 9px; font-size: .6rem; }
.nt-mrow-n{ font-size: .8rem; font-weight: 700; color: var(--txt); overflow-wrap: anywhere; line-height: 1.3; }
.nt-mrow-x{
  flex: none; width: 44px; height: 44px;
  border: none; border-radius: 10px;
  background: none; color: #B91C1C;
  font-size: .85rem; font-weight: 700; cursor: pointer;
}
.nt-mrow-x:active{ background: rgba(220,38,38,.08); }
html.dark .nt-mrow-x{ color: #FCA5A5; }
html.dark #nt-count-txt{ color: var(--gold2) !important; }
/* Pastilles de rythme et de pénalité, recherche, contacts : 44 px. */
#mt .pill{ min-height: 44px; display: inline-flex; align-items: center; }
#mt .srch{ padding-top: 0; padding-bottom: 0; }
#mt .srch input{ height: 46px; }
#mt .nt-members > button{ min-height: 44px; }
/* Le bouton « Créer la tontine » reste visible au bas de la feuille. Le
   décalage négatif compense la marge basse de la feuille, que Chrome
   retire de la zone collante. */
.nt-foot{
  position: sticky;
  bottom: calc(-28px - var(--sab));
  z-index: 2;
  margin: 0 -22px;
  padding: 10px 22px calc(10px + var(--sab));
  background: var(--bg);
  box-shadow: 0 -14px 18px -14px rgba(4,20,10,.22);
}
html.dark .nt-foot{ background: var(--bg2); box-shadow: 0 -14px 18px -14px rgba(0,0,0,.6); }
/* ── Envoi d'argent sur un seul écran ── */
/* « Le client ne va pas descendre à chaque fois » : tout tient sans défiler,
   de 360x640 à 412x915. Une chose à la fois, de haut en bas : la personne,
   le montant en grand, une ligne de frais, le pavé, puis le bouton collé en
   bas au-dessus de la zone de geste. Choisir la personne (numéro, contacts,
   QR, récents) se fait dans une feuille qui s'ouvre par-dessus. */
#sc-send .send-hdr{ padding-bottom: 0; }
#sc-send .scroll.send-body{
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 8px;           /* pas de barre du bas ici : pas de marge de 84 px */
}

/* Destinataire : une ligne, toute la ligne s'appuie */
#sc-send .rec-bar{ flex-shrink: 0; padding: 10px 12px; cursor: pointer; transition: transform .12s, border-color .15s; }
#sc-send .rec-bar:active{ transform: scale(.985); }
#sc-send .rec-bar .rec-av{ width: 40px; height: 40px; }
#sc-send .rec-change{ pointer-events: none; }   /* l'appui est pris par toute la ligne */
#sc-send .rec-bar.empty{
  background: transparent; box-shadow: none;
  border: 1.5px dashed rgba(10,74,46,.28);
}
#sc-send .rec-bar.empty .rec-av{
  background: var(--bg2); color: var(--forest); box-shadow: none;
  border: 1.5px dashed rgba(10,74,46,.35);
  font-family: var(--f); font-size: 1.35rem; font-weight: 600;
}
#sc-send .rec-bar.empty .rec-name{ color: var(--forest); }
#sc-send .rec-bar.empty .rec-change{ background: var(--forest); border-color: var(--forest); color: #fff; }

/* Montant : prend toute la place libre, centré, sans cadre */
#sc-send .send-amt-box{
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 0;
}
#sc-send .send-amt-box .amt-lbl{ margin: 0; }
#sc-send .send-amt-box .amt-val{ font-size: 3.4rem; line-height: 1; white-space: nowrap; }
#sc-send .send-amt-box .amt-val.long{ font-size: 2.6rem; }
#sc-send .send-amt-box .amt-val .cur{ font-size: .9rem; }

/* Frais : trois petites colonnes, libellé au-dessus, valeur dessous */
#sc-send .send-recap{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0;
  margin: 0; padding: 0; border: none; max-width: none;
  font-size: .64rem; text-align: center;
}
#sc-send .send-recap .sr-row{
  flex-direction: column; align-items: center; gap: 1px;
  padding: 0 12px; color: var(--txt3);
}
#sc-send .send-recap .sr-row + .sr-row{ border-left: 1px solid var(--border); }
#sc-send .send-recap .sr-row b{ font-size: .8rem; color: var(--txt); }
#sc-send .send-recap .sr-tot{ padding-top: 0; border-top: none; font-weight: 700; color: var(--txt2); }
#sc-send .send-recap .sr-tot b{ color: var(--forest); }
#sc-send .send-hint{ font-size: .66rem; font-weight: 600; color: var(--txt3); }

/* Note : une pastille, puis une seule ligne de saisie */
#sc-send #note-toggle{
  width: auto; padding: 6px 14px; border-radius: 100px;
  font-size: .68rem; min-height: 0;
}
#sc-send .note-wrap{ width: 100%; max-width: 320px; }
#sc-send .note-wrap .inp{ width: 100%; padding: 9px 40px 9px 14px; font-size: .8rem; }
#sc-send .note-close{ top: 50%; transform: translateY(-50%); }
#sc-send .note-close:active{ transform: translateY(-50%) scale(.9); }

/* Pavé : touches à la hauteur de l'écran */
#sc-send .numpad{ flex-shrink: 0; gap: 8px; }
#sc-send .nk{ height: 54px; border-radius: 16px; font-size: 1.25rem; }

/* Bouton collé en bas, hors de la zone qui défile */
#sc-send .send-foot{
  flex-shrink: 0;
  padding: 8px 16px calc(12px + var(--sab));
  background: var(--bg);
}
#sc-send .send-foot .btn{ width: 100%; margin: 0; padding: 16px 18px; font-size: .98rem; }
#sc-send .send-foot .btn.is-off{ opacity: .55; box-shadow: none; }

/* Feuille « À qui envoyer ? » */
#sc-send .send-sheet .modal-box{ gap: 12px; }
#sc-send .send-sheet .modal-title{ margin-bottom: 0; }
#send-picker{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#sc-send .send-num{ display: flex; gap: 8px; }
#sc-send .send-num .inp{ flex: 1; min-width: 0; font-size: 1rem; letter-spacing: .02em; }
#sc-send .send-sheet .send-methods{ grid-template-columns: 1fr 1fr; margin: 0; }
#sc-send .send-sheet .send-method{ flex-direction: row; justify-content: center; gap: 8px; padding: 12px 8px; }
#sc-send .send-sheet .send-method span{ font-size: .74rem; }
#sc-send .send-sheet .lbl{ margin: 2px 0 -4px; }
#sc-send .send-sheet .contacts-row{ padding-bottom: 4px; }

/* Grand téléphone : plus d'air autour du montant, touches plus hautes */
@media (min-height: 820px){
  #sc-send .scroll.send-body{ gap: 16px; padding-top: 18px; }
  #sc-send .send-amt-box .amt-val{ font-size: 3.8rem; }
  #sc-send .nk{ height: 64px; }
  #sc-send .numpad{ gap: 10px; }
  #sc-send .send-recap{ font-size: .7rem; }
  #sc-send .send-recap .sr-row b{ font-size: .86rem; }
}
/* Petit téléphone (360x640) : tout se resserre, rien ne disparaît */
@media (max-height: 700px){
  #sc-send .scroll.send-body{ gap: 8px; padding-top: 10px; }
  #sc-send .rec-bar{ padding: 8px 10px; }
  #sc-send .rec-bar .rec-av{ width: 36px; height: 36px; }
  #sc-send .send-amt-box{ gap: 5px; }
  #sc-send .send-amt-box .amt-val{ font-size: 2.6rem; }
  #sc-send .send-amt-box .amt-val.long{ font-size: 2.1rem; }
  #sc-send .nk{ height: 50px; border-radius: 14px; font-size: 1.15rem; }
  #sc-send .numpad{ gap: 6px; }
  #sc-send .send-foot{ padding-top: 6px; padding-bottom: calc(10px + var(--sab)); }
  #sc-send .send-foot .btn{ padding: 14px 16px; }
}

/* Mode sombre : les accents verts passent à l'or (contraste) */
html.dark #sc-send .rec-bar.empty{ border-color: rgba(240,192,64,.3); }
html.dark #sc-send .rec-bar.empty .rec-av{ color: var(--gold2); border-color: rgba(240,192,64,.4); }
html.dark #sc-send .rec-bar.empty .rec-name{ color: var(--gold2); }
html.dark #sc-send .rec-bar.empty .rec-change{ background: var(--gold2); border-color: var(--gold2); color: #063620; }
html.dark #sc-send .send-recap .sr-row:first-child b{ color: var(--txt); }
html.dark #sc-send .send-recap .sr-tot b{ color: var(--gold2); }

/* ── Transferts Mobile Money sur un seul écran ── */
/* Le client ne doit ni descendre ni balayer. Une chose à la fois : en haut
   l'opérateur et le sens (« De → Vers », retourné d'un appui), puis le
   numéro sur une ligne, le montant en grand, deux lignes de frais, et le
   bouton posé en bas, au-dessus de la zone de geste. Tient sans défiler en
   360x640 comme en 412x915 ; le défilement ne reste qu'avec le clavier. */

/* Sélecteur : opérateur en segments compacts, sens en deux pastilles. */
.tr-pick{ padding: 10px 16px 12px; gap: 8px; }
.tr-ops{ padding: 3px; border-radius: 12px; }
.tr-op{
  min-height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .76rem;
}
.tr-op-logo{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.tr-op:not(.on) .tr-op-logo{ opacity: .6; filter: grayscale(.5); }

.tr-way{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
.tr-way:active{ transform: none; }
.tr-way-l{
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 8px 10px 8px 8px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  text-align: left;
  transition: transform .12s, border-color .16s;
}
.tr-way:active .tr-way-l{ transform: scale(.97); }
.tr-way-logo{
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 3px 8px -4px rgba(10,74,46,.35);
}
.tr-way-logo img{ width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block; }
.tr-way-txt{ display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tr-way-txt small{
  font-size: .56rem;
  font-weight: 700;
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--txt3);
}
.tr-way-txt b{
  font-size: .8rem;
  font-weight: 800;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-way-swap{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #063620;
  box-shadow: 0 6px 14px -6px rgba(212,160,23,.6);
}
.tr-way .tr-way-swap svg{ stroke: currentColor; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tr-way.tr-way-in .tr-way-swap svg{ transform: rotate(180deg); }

/* Le contenu remplit la hauteur : le bouton se pose en bas. */
#sc-transfert .scroll{ padding-bottom: 0; display: flex; flex-direction: column; }
.tr-box{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 16px calc(14px + var(--sab));
}

/* Numéro sur une ligne, le logo de l'opérateur devant. */
.tr-num{
  display: flex; align-items: center; gap: 10px;
  height: 54px;
  padding: 0 14px 0 9px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  cursor: text;
  transition: border-color .16s, box-shadow .16s;
}
.tr-num:focus-within{ border-color: var(--forest); box-shadow: 0 0 0 4px rgba(10,74,46,.08); }
.tr-num-logo{
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.tr-num-logo img{ width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block; }
.tr-num-inp{
  flex: 1; min-width: 0;
  height: 100%;
  border: none; outline: none;
  background: transparent;
  font-family: var(--f);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--txt);
}
.tr-num-inp::placeholder{ color: var(--txt3); font-weight: 600; letter-spacing: 0; }

/* Montant en grand. Le champ est invisible et couvre le chiffre. Le haut
   prend la moitié de l'air libre : le montant se tient au milieu. */
.tr-amt{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: auto;
  padding-top: 18px;
  cursor: text;
}
.tr-amt-lbl{
  font-size: .6rem;
  font-weight: 700;
  font-family: var(--fm);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--txt3);
}
.tr-amt-val{
  margin-top: 4px;
  font-family: var(--fd);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--txt);
}
.tr-amt-val .cur{ font-size: 1.15rem; font-weight: 800; color: var(--txt3); margin-left: 6px; letter-spacing: 0; }
.tr-amt-val.zero #tr-amt-big{ color: var(--txt3); opacity: .5; }
/* Un curseur doré clignote quand le clavier est ouvert sur le montant. */
.tr-amt:focus-within #tr-amt-big::after{
  content: '';
  display: inline-block;
  width: 3px; height: .78em;
  margin-left: 3px;
  vertical-align: -.04em;
  border-radius: 2px;
  background: var(--gold);
  animation: trCaret 1s steps(1) infinite;
}
@keyframes trCaret{ 50%{ opacity: 0; } }
.tr-amt-inp{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: none;
  font-size: 16px;
  cursor: text;
}

/* Montants rapides : une seule rangée. */
#sc-transfert .tr-pills{ flex-wrap: nowrap; margin: 12px 0 0; gap: 6px; }
#sc-transfert .tr-pills .pill{ flex: 1 1 0; min-width: 0; padding: 8px 0; text-align: center; white-space: nowrap; font-size: .72rem; }

/* Deux lignes discrètes de frais. */
.tr-fees{ margin-top: 18px; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; }
.tr-fees .l{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .76rem; color: var(--txt3); }
.tr-fees .l b{ font-weight: 700; color: var(--txt2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-fees .l.strong span{ color: var(--txt2); font-weight: 700; }
.tr-fees .l.strong b{ font-size: .9rem; font-weight: 900; color: var(--forest); }
.tr-hint{ margin-top: 8px; padding: 0 4px; font-size: .66rem; line-height: 1.4; color: var(--txt3); }

/* Le bouton : en bas, à portée du pouce, au-dessus de la zone de geste. */
#sc-transfert .tr-submit{
  margin-top: auto;
  min-height: 56px;
  border-radius: 18px;
  font-size: .95rem;
  flex: none;
}
.tr-hint{ margin-bottom: 18px; }

/* Cartes d'attente, de succès et d'échec : le sélecteur se retire, le
   contenu se centre, les boutons se posent en bas. */
#sc-transfert.tr-etat .tr-pick{ display: none; }
#sc-transfert .tr-state{ flex: 1 0 auto; padding: 0; }
#sc-transfert .tr-state > :first-child{ margin-top: auto; }
#sc-transfert .tr-steps{ margin-bottom: auto; }
#sc-transfert .tr-st-ring{ width: 66px; height: 66px; margin-bottom: 12px; }
#sc-transfert .tr-st-ring svg{ width: 30px; height: 30px; }
#sc-transfert .tr-receipt{ margin-top: 14px; }
#sc-transfert .tr-receipt .l{ padding: 8px 0; }
#sc-transfert .tr-st-sub{ margin-bottom: 4px; }
#sc-transfert .tr-st-btn{ min-height: 54px; flex: none; }
#sc-transfert .tr-st-btn:first-of-type{ margin-top: auto; }
#sc-transfert .tr-st-btn.ghost{ min-height: 46px; margin-top: 4px; }
/* Au moins un peu d'air entre le contenu et les boutons. */
#sc-transfert .tr-receipt, #sc-transfert .tr-st-sub:last-of-type{ margin-bottom: 18px; }

/* Mode sombre : les accents passent à l'or clair. */
html.dark .tr-way-l{ background: var(--bg2); }
html.dark .tr-num{ background: var(--bg2); }
html.dark .tr-num:focus-within{ border-color: rgba(240,192,64,.5); box-shadow: 0 0 0 4px rgba(240,192,64,.08); }
html.dark .tr-fees .l.strong b{ color: var(--gold2); }
html.dark .tr-amt:focus-within #tr-amt-big::after{ background: var(--gold2); }
html.dark .tr-st-amt.pend{ color: var(--gold2); }
html.dark .tr-way-logo, html.dark .tr-num-logo, html.dark .tr-op-logo{ box-shadow: none; }

/* Petits écrans (≤ 360 de large) : les noms des pastilles restent entiers. */
@media(max-width:360px){
  .tr-way{ gap: 6px; }
  .tr-way-l{ gap: 7px; padding: 7px 8px 7px 7px; }
  .tr-way-logo{ width: 30px; height: 30px; }
  .tr-way-txt b{ font-size: .74rem; }
  .tr-way-swap{ width: 32px; height: 32px; }
}
/* Écrans bas (vieux Android 16:9) : le montant se resserre. */
@media(max-height:600px){
  .tr-amt-val{ font-size: 2.5rem; }
  .tr-fees{ margin-top: 12px; }
  .tr-box{ padding-top: 12px; }
}

/* Bouton « Contacts » au bout du champ du numéro, et la ligne du contact
   choisi (nom, avertissement d'opérateur) juste dessous. */
.tr-num{ padding-right: 6px; }
.tr-num-ct{
  flex: none;
  height: 40px;
  padding: 0 11px;
  display: flex; align-items: center; gap: 6px;
  border: none;
  border-radius: 12px;
  background: rgba(10,74,46,.07);
  color: var(--forest);
  font-family: var(--f);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, background .16s;
}
.tr-num-ct:active{ transform: scale(.95); }
.tr-num-ct svg{ stroke: currentColor; flex: none; }
.tr-num-info{
  margin-top: 6px;
  padding: 0 6px;
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--txt2);
}
.tr-num-info:empty{ display: none; }
.tr-num-info b{ font-weight: 800; color: var(--txt); }
.tr-num-warn{ color: #B45309; font-weight: 600; }
html.dark .tr-num-ct{ background: rgba(240,192,64,.12); color: var(--gold2); }
html.dark .tr-num-warn{ color: #FBBF24; }
@media(max-width:360px){
  .tr-num-ct{ padding: 0 9px; }
}

/* ── Clavier : la page ne bouge plus ──
   Le mécanisme est dans main.js (bloc « CLAVIER VIRTUEL ») et dans la balise
   viewport (interactive-widget=resizes-content). Ici, seulement :
   1. les conteneurs de l'app ne défilent JAMAIS : en overflow:hidden, le
      navigateur pouvait encore les faire défiler pour montrer un champ, et
      l'écran entier restait décalé, même clavier fermé. overflow:clip
      l'interdit (Chrome 90+, Samsung Internet 15+) ; main.js couvre le reste.
      Un écran qui veut défiler le fait dans son .scroll, pas sur .sc.
   2. repli resizes-visual : body suit le glissement du visualViewport
      (--vvt), pour que l'app réduite à --vvh soit pile en face de l'œil.
   3. html.gp-clavier (clavier ouvert, quel que soit le mode) :
      - la barre d'onglets ne remonte pas au-dessus du clavier ;
      - --sab tombe à 0 : la marge de la barre gestuelle est sous le clavier ;
      - une feuille (.modal-box) ne dépasse jamais la hauteur visible, même
        avec un max-height en vh posé dans son style. */
@supports (overflow: clip){
  .shell, .shell-inner, .sc{ overflow: clip; }
}
@media(max-width:599px), (max-height:520px) and (max-width:1279px){
  html.gp-clavier body{ transform: translate3d(0, var(--vvt, 0px), 0); }
}
html.gp-clavier{ --sab: 0px; }
html.gp-clavier .bnav{ display: none; }
html.gp-clavier .modal-box{ max-height: calc(100% - 12px) !important; }

/* ── Coffre : corrections de style ── */
/* La fiche (#mcd) empilait nom, montant, barre, lignes et boutons sans le
   moindre écart : l'espacement de .cd-box ne descendait pas dans #mcd-body. */
#mcd-body{ display: flex; flex-direction: column; gap: 12px; }
#mcd-body > *{ flex-shrink: 0; }
/* Quand la feuille défile (fiche d'un coffre verrouillé, création à
   640 px), la poignée, sans contenu, était écrasée à zéro par le flex. */
#mcd .modal-handle, #mc .modal-handle, #mdep .modal-handle{ flex-shrink: 0; }
#mcd-body .cd-amount{ margin-top: 0; line-height: 1; }
#mcd-body .cd-pct{ margin-top: -4px; }
#mcd-body .cd-acts{ margin-top: 4px; }
.cd-name{
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* Le rail de la barre se confondait avec la carte en sombre : un coffre
   vide n'avait plus de barre du tout. */
html.dark .ci-bar-bg{ background: rgba(255,255,255,.10); box-shadow: none; }
html.dark .ci-bar{ box-shadow: none; }

/* Un nom long prenait trois lignes et repoussait la date : deux lignes
   suffisent, la fiche donne le nom entier. */
.ci-name{
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ci-val{ white-space: nowrap; }

/* Cibles au pouce : 44 px au moins, comme le reste de l'app. */
.ci-act{ min-height: 44px; white-space: nowrap; }
.ci-del{ width: 44px; height: 44px; }
.ci-lock{ min-height: 44px; }
#mc .pills{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#mc .pill{ min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
/* « + Nouveau » et le retour gardent leur dessin, la zone de toucher grandit. */
.coffre-hdr .snav-a, .coffre-hdr .back-btn{ position: relative; }
.coffre-hdr .snav-a::after{ content: ''; position: absolute; inset: -7px -4px; }
.coffre-hdr .back-btn::after{ content: ''; position: absolute; inset: -3px; }

/* « Retirer 1 200 000 F » passait sur deux lignes à 360 px et écrasait la
   corbeille. Le montant est déjà en haut de la carte : sur petit écran le
   bouton dit seulement « Retirer ». */
@media(max-width:380px){
  .ci-act-amt{ display: none; }
  .coffre-item{ padding: 16px; }
}

/* Trois boutons de création à l'écran quand on a déjà des coffres : le
   pointillé de la liste suffit, le gros bouton doré reste pour l'écran vide. */
/* Le grand bouton « Créer un nouveau coffre » du bas est retiré (doublon). */

/* Petit écran (640 px) : le bandeau prenait le tiers de la hauteur. */
@media(max-height:700px){
  .coffre-hdr{ padding-bottom: 18px; }
  .coffre-hero{ padding-top: 0; }
  .coffre-hero .coffre-total-val{ font-size: 2rem; margin-top: 6px; }
  .coffre-meta{ margin-top: 10px; padding: 6px 12px; }
  .cd-row{ padding: 8px 0; }
}

/* Création : le plan d'épargne était écrit en vert forêt sur fond sombre,
   et ses légendes en 8 px. */
#nc-assistant [id^="nc-per-"] + div{ font-size: .62rem !important; }
html.dark #nc-assistant{ background: rgba(240,192,64,.06) !important; border-color: rgba(240,192,64,.22) !important; }
html.dark #nc-assistant > div:first-child{ color: var(--gold2) !important; }
html.dark #nc-assistant > div:first-child svg{ stroke: var(--gold2); }
html.dark #nc-per-month{ color: var(--gold2) !important; }
html.dark #nc-assistant div:has(> #nc-per-month){ background: rgba(240,192,64,.10) !important; border-color: rgba(240,192,64,.28) !important; }

/* Dépôt : un nom long faisait un titre de trois lignes, et le solde
   disponible flottait loin de son champ. */
#mdep-title{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.25;
}
#mdep-sub{ margin-bottom: 0 !important; text-align: center; }
#mdep-amount + div{ margin-top: -8px !important; }

/* ── Tontine : bouton « Cotiser maintenant » (sans style jusque-là) ── */
.td-pay{
  width:100%;
  margin-top:14px;
  min-height:52px;
  padding:15px 20px;
  border:0;
  border-radius:16px;
  font-family:var(--f);
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.01em;
  cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#063620;
  box-shadow:0 10px 28px -6px rgba(212,160,23,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:box-shadow .2s, transform .1s;
}
.td-pay:active{ transform:scale(.98); }
.td-pay.paid{
  background:rgba(22,163,74,.12);
  color:#16A34A;
  box-shadow:none;
  cursor:default;
}
html.dark .td-pay{ color:#06271A; }
html.dark .td-pay.paid{ background:rgba(22,163,74,.18); color:#4ADE80; }

/* ── Historique : vrai logo de l'opérateur Mobile Money dans la pastille ── */
.gp-tx-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  border-radius:inherit;
}

/* ── Coffre vide : le bouton ne mord plus sur le texte ──
   Sur un téléphone à grande police, la dernière ligne passait sous le
   bouton (marge négative ou hauteur fixe de la carte). */
.coffre-vide{ display:flex; flex-direction:column; gap:16px; height:auto; }
.coffre-vide-d{ margin:0; }
.coffre-vide .coffre-empty-cta{ margin-top:4px; position:static; transform:none; }

/* ── Tontine : un nom long dans « Dettes de tontine » tient sur 2 lignes ── */
.td-debts .gp-tx-pill > div:nth-child(2){ min-width:0; flex:1; }
.td-debts .gp-tx-pill-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.td-debts .td-act{ flex-shrink:0; white-space:nowrap; }