/* ═══════════════════════════════════════════════════════════════════════════
   CryptoPayIn — couche UX mobile « app » v1 (03/09/2026)
   Fichier ADDITIF chargé après les styles inline de chaque surface publique
   (landing, /docs, pages SEO, 9 locales pré-rendues). Tout est scoppé
   ≤ 900 px (point de rupture du header) ou ≤ 640 px : le bureau ne bouge pas.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--apb-h:62px;--apb-safe:env(safe-area-inset-bottom,0px)}

/* ── 1. Barre d'onglets basse ──────────────────────────────────────────── */
.apb{display:none}
@media (max-width:900px){
  .apb{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;height:calc(var(--apb-h) + var(--apb-safe));padding:0 4px var(--apb-safe);
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--bd,#e2e7f0);box-shadow:0 -8px 28px -18px rgba(10,22,48,.28);
    transition:transform .22s cubic-bezier(.22,.75,.25,1)}
  .apb-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--apb-h);
    min-width:0;padding:0 2px;border:0;background:none;cursor:pointer;color:var(--mut,#5d6b84);text-decoration:none;
    font:600 10.5px/1.1 var(--font,'Geist',ui-sans-serif,system-ui,sans-serif);letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;transition:color .15s;border-radius:10px}
  .apb-t svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .18s cubic-bezier(.22,.75,.25,1)}
  .apb-t span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .apb-t:active svg{transform:scale(.88)}
  .apb-t[aria-current],.apb-t.on{color:var(--blue,#1f5af6)}
  .apb-t:focus-visible{outline:2px solid var(--blue,#1f5af6);outline-offset:-4px}
  .apb-x{display:none}
  .apb-t.on .apb-x{display:block}
  .apb-t.on .apb-mn{display:none}
  /* onglet central surélevé */
  .apb-c i{display:grid;place-items:center;width:54px;height:54px;margin-top:-24px;border-radius:50%;font-style:normal;
    background:var(--blue,#1f5af6);color:#fff;box-shadow:0 10px 22px -8px rgba(31,90,246,.6),0 0 0 5px #fff;
    transition:transform .18s cubic-bezier(.22,.75,.25,1),background .15s}
  .apb-c i svg{width:24px;height:24px;stroke:#fff;stroke-width:2.2}
  .apb-c span{color:var(--blue,#1f5af6)}
  .apb-c:active i{transform:scale(.93)}
  .apb-c.is-dash i{background:var(--navy,#0b1b38);box-shadow:0 10px 22px -8px rgba(11,27,56,.55),0 0 0 5px #fff}
  .apb-c.is-dash span{color:var(--ink,#0a1630)}
  body:has(#apb){padding-bottom:calc(var(--apb-h) + var(--apb-safe))}
  html.kb-open .apb{transform:translateY(120%)}
  /* la feuille du burger doit laisser la place à la barre (ses actions sont en bas) */
  .hd .mnav{padding-bottom:calc(var(--apb-h) + var(--apb-safe) + 18px)!important}
  /* ombre du header au défilement */
  .hd{transition:box-shadow .2s}
  html.scrolled .hd{box-shadow:0 8px 24px -18px rgba(10,22,48,.35)}
  /* mode standalone (PWA) : le header colle sous la barre d'état */
  @media (display-mode:standalone){.hd{padding-top:env(safe-area-inset-top,0px)}}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.apb,.apb-t svg,.apb-c i{transition:none}}

/* ── 2. Cibles tactiles ────────────────────────────────────────────────── */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em)}
  .crumbs{gap:4px 7px;margin-bottom:18px}
  .crumbs a{padding:8px 0;margin:-8px 0}
  .prose a,.faq .a a,.cardx p a,.curr-note a,.sub a,.nk p a,.callout p a,.doc-section p a,.mini p a,.check p a,.event span a{padding:6px 0;margin:-6px 0}
  .cardx a.more{padding:8px 0;margin:-2px 0 -8px}
  .ftb .lg a{display:inline-block;padding:8px 0}
  .ctabs button{padding:9px 14px;font-size:12px;border-radius:7px}
  .tab-h button{padding:10px 13px;font-size:12px}
  .tab-h{padding:8px 10px}
  .code-copy{top:8px;right:8px;padding:9px 12px;font-size:11.5px;border-radius:9px}
  .base-url .copy{padding:10px 14px;font-size:12.5px;border-radius:9px}
  .faq summary{min-height:56px;padding:14px 2px}
  .faq summary::after{width:32px;height:32px;border-radius:10px}
  .cpl>summary{height:40px;padding:0 9px}
  .uicon{width:44px;height:44px}
  .side a{min-height:40px;display:inline-flex;align-items:center;padding:0 13px;scroll-snap-align:start}
  .side nav{scroll-snap-type:x proximity}
  .side{scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .status-flow .st{padding:9px 12px}
  .gh-chip{min-height:40px}
}

/* ── 3. Pied de page : accordéons + rail de devises ────────────────────── */
@media (max-width:640px){
  .ftt{padding:28px 0 20px;gap:18px}
  .ftt-l p{font-size:14px}
  .ftt-facts{gap:8px}
  .ffact{height:38px;padding:0 13px;font-size:12.5px}
  .ftg.ft-acc{display:block;padding:4px 0 18px}
  .ftg.ft-acc nav{border-bottom:1px solid var(--bd,#e2e7f0)}
  .ftg.ft-acc h4{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:16px 2px;
    font-size:12px;color:var(--ink,#0a1630);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  .ftg.ft-acc h4::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;
    border-right:1.8px solid var(--faint,#8b97ac);border-bottom:1.8px solid var(--faint,#8b97ac);
    transform:translateY(-2px) rotate(45deg);transition:transform .2s cubic-bezier(.22,.75,.25,1)}
  .ftg.ft-acc nav.open h4::after{transform:translateY(2px) rotate(225deg)}
  .ftg.ft-acc nav.open h4{color:var(--blue,#1f5af6)}
  .ftg.ft-acc ul{display:none;padding:0 2px 10px;gap:0}
  .ftg.ft-acc nav.open ul{display:flex;flex-direction:column}
  .ftg.ft-acc ul a{display:block;padding:11px 0;font-size:15px;color:var(--body,#39465e)}
  .ftg.ft-acc ul li+li a{border-top:1px solid var(--bg2,#eceff5)}
  .ftc{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0 14px}
  .ftc-l{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1*clamp(20px,4vw,32px));padding:2px clamp(20px,4vw,32px) 6px;scroll-snap-type:x proximity;
    scroll-padding-inline:clamp(20px,4vw,32px)}
  .ftc-l::-webkit-scrollbar{display:none}
  .fcoin{flex:none;height:40px;scroll-snap-align:start}
  .ftb{padding:16px 0 22px;gap:6px}
}

/* ── 4. Tableaux → cartes (JS pose data-th + .tb-cards) ────────────────── */
@media (max-width:640px){
  .tblwrap:has(> table.tb-cards),.table-wrap:has(> table.tb-cards){overflow:visible;border:0;background:none;margin:0 0 18px}
  table.tb-cards{display:block;border:0;min-width:0!important;width:100%}
  table.tb-cards thead{display:none}
  table.tb-cards tbody,table.tb-cards tr,table.tb-cards td{display:block;width:auto}
  table.tb-cards tr{background:#fff;border:1px solid var(--bd,#e2e7f0);border-radius:12px;margin:0 0 10px;overflow:hidden;
    box-shadow:0 1px 2px rgba(10,22,48,.05),0 6px 18px -10px rgba(10,22,48,.10)}
  table.tb-cards tr:last-child{margin-bottom:0}
  table.tb-cards td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 14px;
    border:0;border-bottom:1px solid var(--bd,#e2e7f0);white-space:normal!important;text-align:right;overflow-wrap:anywhere;line-height:1.5}
  table.tb-cards td:first-child{display:block;text-align:left;background:var(--panel,#f7f9fc);color:var(--ink,#0a1630);font-weight:650}
  table.tb-cards td:not(:first-child)::before{content:attr(data-th);flex:none;max-width:44%;text-align:left;
    font:650 10.5px/1.5 var(--mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--faint,#8b97ac)}
  table.tb-cards tr td:last-child{border-bottom:0}
  table.tb-cards td:empty{display:none}
  table.tb-cards .num{white-space:normal!important}
  .table-wrap table.tb-cards td{font-size:13px}
  .table-wrap table.tb-cards td:first-child{font:600 12.5px var(--mono,ui-monospace,Menlo,Consolas,monospace)}
}

/* ── 5. Landing : modale d'authentification en feuille basse ───────────── */
@media (max-width:640px){
  .modal{align-items:flex-end;padding:0}
  .modal-card{max-width:none;width:100%;max-height:min(94dvh,calc(100vh - 20px));border-radius:24px 24px 0 0;
    animation:apbSheet .3s cubic-bezier(.22,.75,.25,1)}
  @keyframes apbSheet{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
  .m-main{padding:12px 20px calc(22px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
  .m-main::before{content:"";display:block;width:42px;height:4px;border-radius:2px;background:var(--bd2,#cbd4e2);margin:0 auto 16px}
  .modal-x{top:14px;right:14px;width:40px;height:40px;border-radius:12px;background:var(--bg2,#eceff5)}
  .modal h2{font-size:21px}
  .keyin{height:56px;font-size:20px}
  .mbtn{height:52px}
  .mts{display:flex;justify-content:center}
  .hero-cta .fee-tag{padding-top:10px}
  .nokyc-in .nk{flex-basis:80%}
  .dash-bal{padding:16px 16px 4px}
  .code pre{font-size:12px}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.modal-card{animation:none}}

/* ── 6. Docs ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .endpoint-h{flex-wrap:wrap;gap:8px 10px;padding:12px 14px}
  .endpoint span:last-child{width:100%;margin-left:0!important;font-size:12px}
  .cta{padding:22px 20px;border-radius:14px}
  .cta .btn{width:100%}
  .base-url code{font-size:12.5px;overflow-wrap:anywhere;white-space:normal}
  .code-wrap pre{padding:16px 14px}
  .facts,.steps{gap:8px}
}

/* ── 7. Pages SEO / guides : respiration mobile ────────────────────────── */
@media (max-width:640px){
  .ph{padding:34px 0 30px}
  .ph h1{max-width:none}
  .body-sec{padding-block:36px}
  .cards{gap:12px;margin:20px 0}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px 15px}
  .stat b{font-size:22px}
  .ckl>div{padding:13px 2px}
  .cta-sec{padding-block:44px}
  .g-toc-m summary{min-height:50px}
}