/* ==========================================================================
   SwapNoKYC — couche MOBILE « application » (22/09/2026).

   Chargee par <link media="(max-width: 900px)"> : au-dessus de 900 px le
   fichier n'est jamais applique, le rendu bureau reste strictement intact.
   Tout ce qui suit s'ajoute a app.css, jamais a sa place.

   Ce que cette couche apporte :
     1. barre d'onglets fixe en bas (Accueil · Monnaies · Echanger · Guides · Menu)
     2. volets roulants (bottom sheets) pour le choix d'actif et le suivi de commande
     3. cibles tactiles >= 44 px, textes >= 11,5 px, champs a 16 px (pas de zoom iOS)
     4. aucun debordement lateral (orbes decoratives et lueur du widget ecretees)
     5. barre d'action collante sur /exchange, bouton « ouvrir dans le wallet »
        sur /order, filtres de liste, hub de monnaies replie sur l'accueil
     6. fluidite : animations de flou desactivees, survols neutralises au tactile

   Les elements propres au mobile portent l'attribut `hidden` dans le HTML :
   c'est CE fichier qui les reaffiche. Sans lui (bureau), ils n'existent pas.
   ========================================================================== */

/* -------------------------------------------------------------- 0. Base */
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{-webkit-tap-highlight-color:transparent}
a,button,summary,input,label{touch-action:manipulation}
/* Le grain en surimpression (mix-blend-mode sur un calque fixe plein ecran)
   coute un compositing complet a chaque image de defilement sur telephone :
   invisible a l'oeil, retire. Le degrade de fond (body::before) reste. */
body::after{display:none}
/* Champs : 16 px minimum, sinon iOS zoome la page a la prise de focus. */
.inp,.pk-search,.leg-amt,input[type="text"],input[type="search"],input[type="email"],textarea{font-size:16px}
/* Le flou d'arriere-plan est reduit : le fond est un degrade lisse, l'ecart
   visuel est nul, le cout de rendu au defilement ne l'est pas. */
.card,.swap,.ord-hero,.pair-card,.contact-hero-card,.guide-card-v2{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Lueur tournante derriere le widget : le flou de 30 px re-rasterise a chaque
   image. Elle reste, mais immobile. */
.swap-outer::before{animation:none}
/* Debordements lateraux : les orbes decoratives (480 px) et la lueur du widget
   depassent la fenetre ; body{overflow-x:hidden} ne suffit pas toujours sur
   iOS, qui laisse alors la page glisser sur le cote. On ecrete a la source. */
.hero-shell,.exchange-bar,.sec,.page-hero,.finale,.stats,.crumbs,main.page,.foot{overflow-x:clip}
.sec-head::before{width:min(480px,100%)}
.swap-outer::before{inset:-2px 0}
/* Illustrations des cartes-heros : aspect-ratio + min-height leur donnait
   440 px de large dans une colonne de 354 (image rognee a droite). */
.contact-hero-art,.info-hero-art,.guide-hero-art{aspect-ratio:16/9;min-height:0;width:100%;max-width:100%}
/* Cartes-heros des pages internes : la colonne texte ne doit jamais etre
   dictee par son contenu le plus large (contact : la rangee de meta forçait
   435 px, le titre etait coupe). */
.contact-hero-card,.info-hero-card,.guide-hero-card{grid-template-columns:minmax(0,1fr)}
.contact-hero-copy,.info-hero-copy,.guide-hero-copy{min-width:0;max-width:100%}
.contact-meta-row>span,.info-meta-row>span,.hero-meta-row>span,.guide-hero-meta>span{min-width:0;overflow-wrap:anywhere}
.contact-primary{min-width:0}
.contact-primary-link{min-width:0;max-width:100%}
.contact-primary-email{overflow-wrap:anywhere;word-break:break-all}

/* Survol = tactile : un doigt ne survole pas. Les translations de survol
   restaient collees apres chaque tap ; on les neutralise et on donne un vrai
   retour a la pression. */
@media (hover:none){
  .pair-card:hover,.coin-chip:hover,.feat:hover,.step:hover,.guide-card-v2:hover,.compare-card:hover,
  .pair:hover,.btn-primary:hover,.mnav-cta:hover,.exchange-btn:hover,.xc-back:hover,.aside-card:hover,
  .contact-card:hover,.third-card:hover,.dual-card:hover,.flag-step:hover,.channel-card:hover{transform:none}
  .btn:hover svg.arr,.foot-cta:hover .arr,.mnav-cta:hover .mnav-cta-arr,.exchange-btn:hover svg{transform:none}
  .swap-dir:hover svg{transform:rotate(90deg)}
  .pair-card:active,.coin-chip:active,.guide-card-v2:active,.compare-card:active,.pair:active,
  .step:active,.feat:active,.mnav-link:active,.mnav-cta:active,.faq-item summary:active{transform:scale(.985)}
  .btn:active,.exchange-btn:active,.coin-btn:active,.swap-mode:active,.ord-copy:active,.tab:active{transform:scale(.97)}
}

/* ------------------------------------------------------------ 1. En-tete */
.hdr{padding-top:env(safe-area-inset-top,0)}
.hdr-inner{height:60px;gap:16px}
.brand{min-height:44px;padding:8px 0}
.hamburger{width:44px;height:44px}
/* Le tiroir porte `hidden` a la fermeture mais app.css lui impose display:flex :
   ses liens restaient focalisables hors ecran. */
.mnav[hidden]{display:none}
.mnav-close{width:44px;height:44px}
.mnav-group-label{font-size:11.5px}
.mnav-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0));gap:8px 14px}
.mnav-foot-link{min-height:44px;display:inline-flex;align-items:center}
.mnav-foot-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.mnav-foot-legal{font-size:12.5px}
/* Rangee « Langue » dans le tiroir : remplace le bouton flottant sous 768 px. */
.mnav-lang{
  display:flex;align-items:center;gap:14px;margin:6px 18px 4px;padding:12px 12px;min-height:56px;
  border-radius:12px;background:var(--surface);border:1px solid var(--border-2);color:var(--text);
  width:calc(100% - 36px);text-align:start;cursor:pointer;
}
.mnav-lang:active{background:var(--surface-2)}
.mnav-lang img{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.mnav-lang-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mnav-lang-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.mnav-lang-sub{font-size:12.5px;color:var(--text-3)}
.mnav-lang svg{width:18px;height:18px;color:var(--text-3);flex-shrink:0}

@media (max-width:768px){
  /* La barre d'onglets porte l'action « Echanger » : le bouton d'en-tete
     devient redondant et libere la place du logo. */
  .hdr-right .btn-primary{display:none}
  /* Le globe flottant couvrait le bouton Continuer et les listes ; la langue
     se choisit depuis le tiroir (le volet lui-meme reste, il est fixe). */
  .lang-fab-btn,.lang-fab-pulse{display:none}
  /* Le conteneur du globe reste un carre fixe de 56 px en bas a droite
     (z-index 1000), invisible mais devant l'onglet Menu : il ne doit plus
     intercepter aucun tap. Son volet et son voile, eux, restent cliquables. */
  .lang-fab{pointer-events:none;width:0;height:0;overflow:visible}
  .lang-fab-panel,.lang-fab-dim{pointer-events:auto}
  .lang-fab-panel{z-index:1001}
  .lang-fab-dim{z-index:1000}
  .lang-fab[data-open="false"] .lang-fab-dim,.lang-fab:not([data-open="true"]) .lang-fab-dim{pointer-events:none}
}

/* ------------------------------------------------- 2. Barre d'onglets */
.tabbar{display:none}
@media (max-width:768px){
  .tabbar[hidden]{display:flex}
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(60px + env(safe-area-inset-bottom,0));
    padding:0 4px env(safe-area-inset-bottom,0);
    background:rgba(7,6,20,.94);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    border-top:1px solid var(--border-2);
    align-items:stretch;justify-content:space-around;
    box-shadow:0 -12px 32px -18px rgba(0,0,0,.8);
  }
  .tab{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:6px 2px 4px;color:var(--text-3);font-size:11px;font-weight:600;letter-spacing:.01em;
    text-decoration:none;position:relative;transition:color .15s var(--ease);font-family:inherit;
    background:none;border:none;cursor:pointer;
  }
  .tab>svg{width:22px;height:22px;flex-shrink:0}
  .tab>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
  .tab.is-active{color:#e9d5ff}
  .tab.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:28px;height:2px;border-radius:0 0 2px 2px;
    background:linear-gradient(90deg,var(--brand-2),var(--violet));
  }
  .tab-swap{color:var(--text-2)}
  .tab-swap.is-active::before{display:none}
  .tab-ic{
    width:50px;height:50px;border-radius:17px;margin-top:-24px;
    display:flex;align-items:center;justify-content:center;color:#fff;
    background:linear-gradient(135deg,var(--brand) 0%,var(--violet) 100%);
    box-shadow:0 10px 24px -8px rgba(99,102,241,.85),0 0 0 4px var(--bg),0 0 0 1px rgba(255,255,255,.14) inset;
    transition:transform .15s var(--ease);
  }
  .tab-ic svg{width:22px;height:22px}
  .tab-swap.is-active .tab-ic{box-shadow:0 10px 28px -6px rgba(168,85,247,.95),0 0 0 4px var(--bg),0 0 0 1px rgba(255,255,255,.2) inset}
  .tab-swap:active .tab-ic{transform:scale(.94)}
  /* La page se termine au-dessus de la barre, jamais derriere. */
  body.has-tabbar{padding-bottom:calc(62px + env(safe-area-inset-bottom,0))}
  body.has-tabbar .toast{bottom:calc(74px + env(safe-area-inset-bottom,0))}
  body.has-tabbar .lang-fab-panel{padding-bottom:max(18px,env(safe-area-inset-bottom,0))}
}
/* Telephone en paysage : 60 px de barre sur 390 px de haut, c'est trop.
   Le menu reste accessible par le bouton de l'en-tete. */
@media (max-height:480px){
  .tabbar,.tabbar[hidden]{display:none}
  body.has-tabbar{padding-bottom:0}
}

/* ------------------------------------------------------------ 3. Widget */
.swap-ttl{font-size:11.5px}
.swap-modes{padding:3px}
.swap-mode{min-height:44px;padding:8px 16px;font-size:13px}
.swap-row .leg{padding:16px 16px;gap:12px}
.leg-lbl{font-size:11.5px}
.leg-min{display:inline-flex;align-items:center;min-height:32px;margin:-8px 0;margin-inline-start:-6px;padding:0 6px;font-size:11.5px;border-radius:8px}
.swap-row .leg-amt{min-height:44px}
.leg-min:active{background:var(--surface-2);color:var(--text)}
.leg-usd{font-size:12.5px}
.leg-usd .net{font-size:11px;padding:4px 9px}
.coin-btn{min-height:44px;padding:8px 12px 8px 8px;font-size:15px}
.coin-btn img{width:26px;height:26px}
.swap-dir{width:48px;height:48px}
.swap-sub{font-size:13px;padding-top:12px}
.swap-hint{font-size:12.5px}
.swap-foot{font-size:11.5px;gap:10px 16px;margin-top:12px}
.swap-track{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;margin:-6px 0}
@media (max-width:380px){.swap-row .leg{padding:14px 14px}}

/* ---------------------------------------------------- 4. Volets (sheets) */
/* Les deux fenetres modales (choix d'actif, suivi de commande) deviennent des
   volets qui montent du bas de l'ecran, comme dans une application. */
.mod-back{align-items:flex-end;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mod{
  width:100%;max-width:none;max-height:calc(100dvh - 24px);
  border-radius:24px 24px 0 0;border-bottom:none;
  animation:sheetUp .28s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0);
  transition:transform .2s var(--ease);
  overscroll-behavior:contain;
}
.mod.is-dragging{transition:none}
#pk-back .mod{height:calc(100dvh - 24px)}
.mod-handle[hidden]{display:block}
.mod-handle{width:40px;height:5px;border-radius:5px;background:var(--border-3);margin:10px auto 0;flex-shrink:0}
.mod-head{padding:10px 18px 14px;touch-action:pan-y}
.mod-ttl{margin-bottom:12px}
.mod-close{width:40px;height:40px}
.pk-search{min-height:50px;font-size:16px}
.pk-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 0 16px}
.pk-item{padding:12px 18px;border-radius:0;min-height:60px}
.pk-item:active{background:var(--surface-3)}
.mod-body{padding:16px 18px}
.mod-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom,0));gap:10px}
.mod-foot .btn{flex:1}
@keyframes sheetUp{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
/* Pendant qu'un volet, le tiroir ou le choix de langue est ouvert, la page
   derriere ne defile pas. overflow:hidden ne suffit pas sur iOS : mobile.js
   fige aussi le body (position:fixed a la position de defilement courante)
   et la restaure a la fermeture. */
html.sheet-lock,html.sheet-lock body{overflow:hidden}
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ------------------------------------------------- 5. Textes & cibles */
.sec-head .kicker,.kicker{font-size:11px}
.guide-pill{font-size:11px;padding:4px 10px}
.compare-card-vs .vs-word,.vs-word{font-size:11px}
.compare-card-vs .vs-disk,.vs-disk{font-size:11.5px}
.vs-tag,.vs-tag-muted{font-size:11px}
.info-meta-row,.hero-meta-row,.contact-meta-row,.guide-hero-meta{font-size:11.5px}
.contact-primary-label,.ord-meta-item .k,.field .lbl .opt,.field .lbl .lbl-net,.stats-strip .stat-sub,.stats-strip dt,.third-role,.flag-step-kicker,.aside-kicker,.facts-strip dt,.aside-dl dt,.ord-kv dt,.xc-rate .side .label,.xc-adv-pill{font-size:11.5px}
.foot-bot{font-size:11.5px}
.crumbs ol{font-size:11.5px}
.crumbs li{min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.btn-sm{min-height:44px}
.reverse-link{min-height:44px}
.contact-primary-link{display:inline-flex;align-items:center;min-height:44px}
.contact-card-mail{min-height:44px;display:flex;align-items:center}
.contact-copy,.btn.contact-copy{min-height:44px}
.foot-bot-legal a{min-height:44px}
.faq-item summary{padding:16px 18px;min-height:60px;gap:14px}
.faq-item .ans{padding:0 18px 20px}
.foot-col ul a{min-height:44px;display:flex;align-items:center}
.foot-bot-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.sec-cta .btn{min-height:48px}
/* Tableau comparatif : il defile dans sa boite ; un voile a droite le dit. */
.compare-wrap{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.35) 100%);
  overflow-x:auto;overscroll-behavior-x:contain;
}

/* ------------------------------------------------------- 6. Listes (hubs) */
/* Filtre de liste (monnaies, paires) : champ colle sous l'en-tete. */
.hub-filter[hidden]{display:block}
.hub-filter{position:sticky;top:calc(60px + env(safe-area-inset-top,0));z-index:5;padding:8px 0 12px;margin-bottom:6px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 80%,transparent 100%)}
.hub-filter-wrap{position:relative}
.hub-filter-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none}
html[dir="rtl"] .hub-filter-wrap svg{left:auto;right:14px}
.hub-filter input{
  display:block;width:100%;min-height:50px;padding:12px 40px 12px 40px;
  background:rgba(0,0,0,.45);border:1.5px solid var(--border-2);border-radius:14px;
  font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none;
}
.hub-filter input:focus{border-color:var(--brand-2);background:rgba(0,0,0,.6);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.hub-filter input::placeholder{color:var(--text-4)}
.hub-filter input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hub-filter-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:10px;display:none;align-items:center;justify-content:center;color:var(--text-2)}
html[dir="rtl"] .hub-filter-clear{right:auto;left:6px}
.hub-filter.has-value .hub-filter-clear{display:flex}
.hub-filter-clear svg{position:static;transform:none;width:16px;height:16px;color:inherit;pointer-events:none}
.hub-empty{display:none;padding:28px 0;text-align:center;color:var(--text-3);font-size:14.5px}
.hub-empty.is-shown{display:block}
/* Accueil : 87 vignettes en deux colonnes faisaient 2 200 px de liste.
   On en montre 12, le bouton deplie le reste sur place. */
.coin-hub.is-capped>a:nth-child(n+13){display:none}
.hub-more[hidden]{display:flex}
.hub-more{width:100%;justify-content:center;margin-top:14px;min-height:48px}

/* --------------------------------------------- 7. Page /exchange (caisse) */
.xc-wrap{padding:14px 0 110px}
.xc-top{gap:10px}
.xc-back{min-height:44px;padding:10px 16px 10px 12px;font-size:13.5px}
.xc-steps{font-size:11px}
.xc-steps li .t{font-size:11px}
.xc-rate .xc-edit{width:44px;height:44px;border-radius:12px}
.xc-rate .xc-edit svg{width:16px;height:16px}
.xc-hero-title{font-size:22px}
.xc-card-desc{font-size:14px}
.inp-wrap .paste{min-height:44px;padding:0 14px;right:3px}
.xc-adv-head{min-height:60px}
.xc-go{min-height:56px}
.disclaimer a{display:inline;padding:6px 0}
/* Barre d'action collante : resume + bouton, visible tant que le vrai bouton
   « Create exchange » n'est pas a l'ecran. Le clic renvoie sur le vrai bouton. */
.xc-sticky[hidden]{display:flex}
.xc-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));
  background:rgba(7,6,20,.95);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--border-2);align-items:center;gap:12px;
  transform:translateY(0);transition:transform .25s var(--ease);
  box-shadow:0 -12px 32px -18px rgba(0,0,0,.8);
}
.xc-sticky.is-off{transform:translateY(110%)}
.xc-sticky-sum{flex:1;min-width:0;line-height:1.25}
.xc-sticky-sum .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.xc-sticky-sum .v{display:block;font-family:var(--mono);font-weight:700;font-size:15.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc-sticky .btn{min-height:48px;padding:0 18px;border-radius:14px;flex-shrink:0;font-size:14.5px}
.xc-sticky .btn svg{width:14px;height:14px}

/* --------------------------------------------- 8. Page /order (suivi) */
.ord-wrap{padding:14px 0 80px}
.ord-meta{gap:14px 18px;font-size:12.5px}
.ord-copy{min-height:48px}
.ord-addr{font-size:14px;padding:14px 14px}
.ord-kv .row{padding:10px 0}
/* Les valeurs tronquees (adresses, txid) se deplient au tap. */
.ord-kv dd.truncate{position:relative;padding-right:22px}
.ord-kv dd.truncate::after{content:"›";position:absolute;right:4px;top:0;color:var(--text-3);transform:rotate(90deg)}
.ord-kv dd.truncate.is-open{white-space:normal;word-break:break-all}
.ord-kv dd.truncate.is-open::after{transform:rotate(-90deg)}
/* « Ouvrir dans le wallet » : le lien bitcoin:/ethereum:/… porte par le QR,
   rendu comme bouton — un telephone a des wallets, pas un bureau. */
.ord-wallet[hidden]{display:none}
.ord-wallet[hidden].is-ready{display:inline-flex;width:100%;justify-content:center;margin:14px 0 4px;min-height:52px}
.ord-qr-row{gap:14px}
.ord-qr-txt{text-align:center}
#refresh-btn{min-height:44px}
.ord-footnote{font-size:12.5px;padding:0 4px}
.ord-success-actions .btn{width:100%}

/* -------------------------------------------------------- 9. Divers */
/* Paires en RTL : la 2e pastille chevauche vers la gauche, hors de sa boite. */
html[dir="rtl"] .pair-icons img:last-child,html[dir="rtl"] .pair-icons .coin-fallback:last-child{margin-left:0;margin-right:-10px}
/* Grand titre de l'accueil et pages : jamais coupe en milieu de mot. */
.page-h1,.page-h2,.h2,.h3{overflow-wrap:anywhere}
.ticker-inner{min-height:40px}
.tick-item{padding:10px 18px}
.stats{padding:16px 0}
.stat{padding:26px 14px}
.finale{padding:64px 0}
/* Le bouton « Retour en haut » n'existe pas : la barre d'onglets suffit. */
@media (prefers-reduced-motion:reduce){
  .mod,.xc-sticky,.tab-ic{animation:none;transition:none}
}