/* FlexiCash — responsive system shared by public, auth, onboarding, client and admin */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-inline-size:100%}
img,video{height:auto}
iframe{max-width:100%}
*,*::before,*::after{min-width:0}
.mono,code,pre,.admin-json{overflow-wrap:anywhere;word-break:break-word}
.table-wrap,.admin-table-wrap,.detail-tabs,.settings-nav{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.table-wrap,.admin-table-wrap{max-width:100%}
.modal-backdrop{padding:clamp(10px,3vw,20px)}
.modal{max-height:calc(100dvh - 24px);display:flex;flex-direction:column}
.modal-body{overflow:auto;overscroll-behavior:contain}
.toast-host{max-width:min(360px,calc(100vw - 24px))}

@media (max-width:1100px){
  .container{padding-inline:20px}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-mock{transform:none}
}

@media (max-width:900px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr)}
  .page>.grid,.page>form>.grid,.card>.grid:not(.quick-actions):not(.keypad):not(.pin),.admin-page>.grid,.admin-panel>.grid{grid-template-columns:minmax(0,1fr)!important}
  .page,.admin-page,.auth-panel,.onb-body{max-width:100%}
  .page-head,.admin-page-head,.funding-page-head{align-items:flex-start}
  .hero-mock{transform:none}
  .footer-bottom{gap:14px;flex-wrap:wrap}
  .cta-band{max-width:100%}
}

@media (max-width:640px){
  :root{--radius-xl:18px;--radius-lg:15px}
  .container{padding-inline:14px}
  .page{padding-inline:14px}
  .card{padding:17px}
  .card.tight{padding:14px}
  .page-head{gap:12px;margin-bottom:18px}
  .page-head h1,.admin-page-head h1{font-size:clamp(1.35rem,7vw,1.7rem);line-height:1.15}
  .page-head p,.admin-page-head p{font-size:.9rem}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .qa{padding:14px 8px;font-size:.8rem}
  .balance-card{padding:20px}
  .balance-card .meta{gap:14px}
  .receipt-head{padding:26px 18px 18px}
  .receipt-body{padding:20px 18px}
  .receipt-body .r,.send-summary .r{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .receipt-body .r .v,.send-summary .r .v{text-align:right;overflow-wrap:anywhere}
  .receipt-foot{padding:16px 18px;flex-direction:column}
  .receipt-foot .btn{width:100%}
  .row.between{gap:10px}
  .filters{align-items:stretch}
  .filters .input,.filters .select,.filters .btn{width:100%;min-width:0}
  .modal-foot{flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 140px}
  .toast-host{left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));max-width:none}
  .empty{padding:34px 14px}
  .doc-uploader{padding:24px 16px}
  .onb-actions{align-items:stretch}
  .onb-actions .btn{flex:1 1 150px}
  .auth-panel{padding:28px 16px}
  .auth-oauth{flex-direction:column}
  .auth-oauth .btn{width:100%}
  .site-header .inner{gap:8px}
  .brand{font-size:1rem}
  .header-cta{gap:6px}
  .header-cta .btn{padding-inline:11px}
  .hero{padding:38px 0}
  .hero h1{font-size:clamp(2rem,11vw,3rem)}
  .hero .lead{font-size:1rem}
  .hero .actions .btn{flex:1 1 170px}
  .section{padding:52px 0}
  .stats-strip{padding:20px}
  .cta-band{padding:28px 18px}
  .site-footer{padding-top:42px}
  .footer-bottom{flex-direction:column}
  input,select,textarea{font-size:16px}
  .btn{max-width:100%}
  .pin{gap:9px}
  .pin input{font-size:1.35rem;padding-block:15px}
  .keypad{gap:9px}
  .keypad button{padding:14px}
}

@media (max-width:480px){
  .btn{padding:11px 14px}
  .btn.lg{padding:14px 17px}
  .btn:not(.icon-btn):not(.password-toggle){white-space:normal;text-align:center;line-height:1.25}
  .card{border-radius:15px}
  .page{padding-inline:12px}
  .quick-actions{gap:8px}
  .qa .ic{width:38px;height:38px}
  .badge{max-width:100%;white-space:normal;text-align:left}
  .modal-head,.modal-body{padding:16px}
  .modal-foot{padding:12px 16px}
  .topbar{padding-inline:12px}
  .topbar-actions{gap:6px}
  .topbar .brand{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bottom-nav{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .bottom-nav a{font-size:.62rem}
  .bottom-nav .fab .fab-ic{width:48px;height:48px;flex-basis:48px;margin-top:-20px}
  .send-wrap>.card{padding:15px}
  .send-wrap>.card>.row.between:last-child{align-items:stretch}
  .send-wrap>.card>.row.between:last-child .btn{flex:1 1 0}
  .send-identifier-title{align-items:flex-start}
  .send-method-copy strong{font-size:.86rem}
  .send-qr-preview video{min-height:260px}
  .qr-wrap{padding:20px 10px}
  .qr-wrap canvas,.qr-svg{width:min(100%,260px)!important;height:auto!important}
  .funding-upload,.funding-proof-preview{align-items:flex-start}
  .admin-h-actions,.admin-page-head .row{display:grid!important;grid-template-columns:1fr;width:100%}
  .admin-h-actions .btn,.admin-page-head .row .btn,.admin-page-head .row .select{width:100%}
  .admin-table{min-width:680px}
  .conversation{min-height:420px}
  .message{max-width:94%}
  .activation-status-panel{padding:20px}
  .activation-workspace{padding:14px}
  .activation-topbar{gap:8px}
}

@media (max-width:360px){
  .container,.page{padding-inline:10px}
  .card{padding:14px}
  .quick-actions{grid-template-columns:1fr 1fr}
  .qa{font-size:.74rem}
  .topbar .brand span:not(.brand-mark){display:none}
  .icon-btn{width:38px;height:38px}
  .pin{gap:7px}
  .pin input{font-size:1.2rem}
}

@media (orientation:landscape) and (max-height:520px){
  .modal{max-height:calc(100dvh - 12px)}
  .bottom-nav{padding-block:5px}
  .bottom-nav .fab .fab-ic{width:44px;height:44px;flex-basis:44px;margin-top:-10px}
  .send-qr-preview,.send-qr-preview video{min-height:190px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

html.menu-open,html.menu-open body{overflow:hidden}

@media (max-width:640px){
  .withdrawal-balance-grid{grid-template-columns:1fr}
  .payment-method-card>.row{align-items:flex-start}
  .payment-method-card .row.gap-8{width:100%}
  .payment-method-card .row.gap-8 .btn{flex:1}
}

/* ==========================================================================
   Fondation mobile-first — FlexiCash
   Chargée après toutes les feuilles de layout, donc ces règles corrigent les
   coquilles existantes sans les réécrire. Rien ici ne change la mise en page
   sur écran large : tout est soit une correction d'unité, soit encadré par une
   media query mobile, soit réservé aux pointeurs tactiles.
   ========================================================================== */

/* 1. Hauteurs de fenêtre — `100vh` ne tient pas compte de la barre d'URL des
   navigateurs mobiles : la coquille dépasse l'écran et crée un défilement
   parasite d'environ 60 px. `dvh` suit la hauteur réellement visible. */
.app-shell,.admin-shell,.auth-shell,.onb-shell,.activation-shell,.admin-login-page{min-height:100dvh}
.sidebar,.admin-side{height:100dvh}
@media (max-width:900px){.admin-login-form-wrap{min-height:100dvh}}

/* 2. Encoche et barre gestuelle — sur iPhone en paysage, le contenu passait
   sous l'encoche ; en portrait, la dernière ligne se cachait derrière la barre
   d'accueil. */
@media (max-width:900px){
  .page,.admin-page{
    padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));
  }
  .topbar,.admin-top{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  /* Pages client sans barre inférieure : garder une marge de fin lisible. */
  .page{padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .app-shell:has(.bottom-nav) .page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* 3. Tiroir de navigation — il doit occuper la hauteur visible, défiler seul
   et ne jamais passer sous l'encoche. */
@media (max-width:900px){
  .sidebar.open,.admin-side.open{
    height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    padding-top:max(20px,env(safe-area-inset-top));
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
  .admin-side{width:min(86vw,268px)}
  .sidebar.open{width:min(86vw,280px)}
}

/* 4. Cibles tactiles — réservé aux écrans tactiles pour ne rien changer à la
   densité de la version PC. 44 px est le minimum confortable au pouce. */
@media (pointer:coarse){
  .btn,.icon-btn,.chip,.keypad button,.pagination-buttons button,
  .settings-nav button,.detail-tabs button,.account-tabs button,
  .password-toggle,.burger,.acc-item summary{min-height:44px}
  .btn.sm{min-height:40px;padding-block:9px}
  .icon-btn{min-width:44px}
  .pagination-buttons button{min-width:44px}
  .bottom-nav a{min-height:52px;justify-content:center}
  .btn-link,.link{padding-block:8px}
  .table-actions .icon-btn{width:40px;height:40px}
  /* Cases et boutons radio : la zone cliquable réelle reste minuscule. */
  .checkbox,.check-row{min-height:44px;align-items:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}

/* 5. Confort tactile — supprimer le flash bleu au tap, garder le défilement
   fluide et empêcher le double-tap de zoomer sur les commandes. */
@media (pointer:coarse){
  a,button,.btn,.qa,.card,summary{-webkit-tap-highlight-color:transparent}
  a,button,.btn,label,summary{touch-action:manipulation}
}

/* 6. Barre inférieure — elle est la navigation principale sur mobile : elle
   doit rester lisible au-dessus du contenu et respecter la barre d'accueil. */
.bottom-nav{
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  padding-left:max(6px,env(safe-area-inset-left));
  padding-right:max(6px,env(safe-area-inset-right));
  box-shadow:0 -6px 20px -14px rgba(6,69,47,.5);
}

/* 7. Tableaux financiers en cartes — motif partagé `.table-cards`.
   Sur mobile, un tableau à cinq colonnes ne tient pas dans 375 px : il partait
   en défilement horizontal, donc le montant, la donnée la plus importante,
   sortait de l'écran. Les lignes deviennent des cartes lisibles au pouce.
   Le DOM reste un vrai tableau : les scripts de page, la sélection de ligne et
   l'accessibilité clavier ne changent pas. */
@media (max-width:640px){
  .table-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{display:block;width:auto}
  .table-cards tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"peer amount" "date amount" "ref status";
    gap:2px 12px;
    align-items:center;
    margin-bottom:10px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--card);
  }
  .table-cards tr:last-child{margin-bottom:0}
  .table-cards td{padding:0;border:0}
  .table-cards td[data-cell=peer]{grid-area:peer;min-width:0}
  .table-cards td[data-cell=date]{grid-area:date;color:var(--text-muted);font-size:.78rem}
  .table-cards td[data-cell=ref]{grid-area:ref;color:var(--text-muted);font-size:.72rem;overflow-wrap:anywhere}
  .table-cards td[data-cell=status]{grid-area:status;justify-self:end}
  .table-cards td[data-cell=amount]{grid-area:amount;justify-self:end;text-align:right;font-size:1.02rem}
  /* Ligne d'état (chargement, vide, erreur) : elle occupe toute la carte. */
  .table-cards td[colspan]{grid-area:auto;grid-column:1/-1;justify-self:stretch;text-align:center}
  .table-cards tr:has(td[colspan]){grid-template-areas:none;grid-template-columns:1fr;padding:0;border:0;background:transparent}
  /* Le conteneur ne sert plus à faire défiler : il ne doit plus encadrer. */
  .table-wrap:has(.table-cards){border:0;background:transparent;overflow:visible}
}

/* 8. Espace client — densité mobile.
   Les actions rapides passaient en deux colonnes de grandes tuiles : les six
   raccourcis occupaient trois rangées et repoussaient le solde et l'activité
   hors de l'écran d'accueil. Trois colonnes compactes tiennent en deux rangées
   à 375 px, comme les portefeuilles mobiles de référence. */
@media (max-width:640px){
  .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .qa{min-height:0;padding:12px 6px;gap:7px;font-size:.74rem;line-height:1.2;text-align:center}
  .qa .ic{width:40px;height:40px}
  /* Le solde reste la première information de la page. */
  .balance-card{padding:20px 18px}
}

/* 8b. Carte de solde repliable sur mobile.
   Par défaut, seuls le solde disponible et le bouton « Masquer » tiennent
   dans le premier écran ; épargne, réservé, statut et numéro FlexiCash
   passaient sous la ligne de flottaison. La carte entière fait office de
   bouton : un tap déplie `.meta`, un second la referme. Le chevron n'est
   qu'un repère visuel — toute la surface est cliquable. Sur desktop, rien de
   tout cela ne s'applique : l'espace suffit à tout montrer d'un coup. */
.balance-chevron{display:none}
@media (max-width:640px){
  /* Repliée, la carte se limite à trois lignes : intitulé + bouton masquer,
     montant, chevron. Padding et taille du montant sont réduits pour qu'elle
     occupe nettement moins de hauteur qu'en version large. */
  .balance-card{
    padding:16px 16px 12px;border-radius:20px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .2s ease;
  }
  .balance-card .amt{font-size:1.85rem;margin-top:2px}
  .balance-card .lbl{font-size:.68rem}
  /* `filter` plutôt qu'un fond : `.balance-card` pose son dégradé via la
     propriété raccourcie `background`, qu'une surcharge d'image effacerait. */
  .balance-card:active{filter:brightness(1.07)}
  .balance-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
  /* Bande pleine largeur en bas de la carte : la flèche seule ne faisait que
     18 px de haut, impossible à viser au pouce. La zone tactile s'étend sur
     toute la largeur, seul le chevron reste visible. */
  .balance-chevron{
    display:grid;place-items:center;
    width:100%;min-height:34px;margin-top:2px;padding:0;
    background:none;border:0;cursor:pointer;
    color:rgba(255,255,255,.7);-webkit-tap-highlight-color:transparent;
  }
  .balance-chevron .lucide{width:18px;height:18px;transition:transform .25s ease}
  .balance-chevron:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:10px}
  .balance-card.is-expanded .balance-chevron .lucide{transform:rotate(180deg)}
  .balance-card .meta{
    flex-direction:column;flex-wrap:nowrap;gap:0;
    max-height:0;opacity:0;margin-top:0;overflow:hidden;
    transition:max-height .3s ease,opacity .2s ease,margin-top .3s ease;
  }
  /* Assez haut pour les sept lignes possibles, sans jamais rogner le contenu. */
  .balance-card.is-expanded .meta{max-height:520px;opacity:1;margin-top:8px}
  .balance-card .meta .m{
    flex-direction:row;justify-content:space-between;align-items:center;gap:14px;
    padding-block:9px;border-top:1px solid rgba(255,255,255,.12);
  }
  .balance-card .meta .m span:first-child{max-width:none;font-size:.66rem}
  /* Le bouton masquer garde son propre geste à l'intérieur de la carte. */
  .balance-card #mask-btn{position:relative;z-index:1}
}
@media (max-width:360px){
  .quick-actions{gap:7px}
  .qa{padding:11px 4px;font-size:.68rem}
  .qa .ic{width:36px;height:36px}
}

/* 9. Formulaires financiers sur mobile — champs confortables et action
   principale pleine largeur : saisir un montant ou un numéro au pouce ne doit
   jamais demander de viser. */
@media (max-width:640px){
  .input,.select,.textarea{min-height:48px}
  .select{background-position:right 12px center}
  .field label{font-size:.85rem}
  /* Une rangée composée uniquement de boutons devient une pile pleine largeur.
     Le `:has` évite de toucher aux rangées « titre + badge », qui utilisent la
     même classe `.row.between` et doivent rester sur une ligne. */
  form .row.between:has(>.btn):not(:has(>div)):not(:has(>h1,>h2,>h3,>span)){
    flex-direction:column;align-items:stretch;gap:10px;
  }
  form .row.between:has(>.btn):not(:has(>div)):not(:has(>h1,>h2,>h3,>span))>.btn{width:100%}
}

/* 10. Administration sur mobile.
   La barre supérieure masquait `.search` sous 640 px : sur l'admin, cette zone
   contient la recherche globale (utilisateur, transaction, ticket), c'est-à-dire
   le principal moyen d'atteindre un dossier. La masquer supprimait la fonction
   au lieu de l'adapter : elle passe donc sur une seconde ligne. */
@media (max-width:640px){
  .admin-top{flex-wrap:wrap;padding-block:10px;min-height:0}
  .admin-top .search.admin-global-search-wrap{display:block;order:3;flex:1 0 100%;max-width:none}
  .admin-top #admin-side-toggle{order:1}
  .admin-top .topbar-actions{order:2;margin-left:auto}
}
/* Les tableaux d'administration gardent un défilement horizontal — une écriture
   comptable perd son sens si on la découpe — mais l'utilisateur doit voir qu'il
   peut faire défiler. */
@media (max-width:900px){
  /* Exclut les tableaux déjà transformés en cartes : ils ne défilent plus. */
  .admin-table-wrap,.table-wrap:not(:has(.table-cards)){
    background-image:
      linear-gradient(to right,var(--card),rgba(255,255,255,0)),
      linear-gradient(to left,var(--card),rgba(255,255,255,0)),
      linear-gradient(to right,rgba(6,69,47,.14),rgba(6,69,47,0)),
      linear-gradient(to left,rgba(6,69,47,.14),rgba(6,69,47,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:26px 100%,26px 100%,11px 100%,11px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}
/* En-tête de page : titre lisible et actions empilées plutôt que compressées. */
@media (max-width:640px){
  .admin-h h1,.admin-page-head h1{font-size:clamp(1.3rem,6vw,1.65rem);line-height:1.18}
  .admin-breadcrumb{flex-wrap:wrap;row-gap:2px}
  .detail-meta div{min-width:0;flex:1 1 45%}
}

/* 11. Site public sur mobile — garder l'appel à l'action.
   Sous 1100 px, l'en-tête masquait « Créer un compte » et ne gardait que
   « Se connecter » : le parcours d'inscription disparaissait de la barre
   supérieure sur tout téléphone. On inverse — le bouton d'inscription reste
   visible, et « Se connecter » rejoint le menu déroulant. */
.nav-signin{display:none}
@media (max-width:1100px){
  .header-cta .btn-primary{display:inline-flex}
  .header-cta .btn-ghost{display:none}
  .nav-signin{display:block;margin-top:6px;padding-top:12px;border-top:1px solid var(--border);font-weight:600;color:var(--text)}
  .nav{max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
       padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .nav a{padding-block:12px}
}
@media (max-width:420px){
  .header-cta .btn-primary{padding-inline:12px;font-size:.86rem}
}

/* 12. Onboarding et authentification sur mobile.
   Le parcours d'inscription et de vérification d'identité est le moment où un
   nouvel utilisateur abandonne le plus facilement : l'action principale doit
   être pleine largeur, en premier, et atteignable au pouce. `.onb-actions`
   utilise `space-between` (Retour à gauche, Continuer à droite), ce qui donnait
   deux boutons étroits côte à côte à 375 px. */
@media (max-width:560px){
  .onb-actions{flex-direction:column-reverse;align-items:stretch;gap:10px;margin-top:26px}
  .onb-actions .btn{flex:none;width:100%}
  /* Certaines étapes n'ont pas de bouton secondaire et utilisent un `<span>`
     vide pour pousser l'action à droite : inutile une fois empilé. */
  .onb-actions>span:empty{display:none}
  .onb-card{max-width:none}
  .onb-top{padding:14px 16px}
  /* Le code PIN et le clavier occupent toute la largeur disponible. */
  .pin,.keypad{max-width:none}
  .keypad button{min-height:54px}
  .doc-uploader{padding:22px 14px}
  .doc-uploader .ic{width:44px;height:44px}
}
@media (max-width:560px){
  /* L'authentification : une seule colonne, sans encadrement superflu. */
  .auth-foot{margin-top:16px}
  .auth-sep{margin:14px 0}
  .auth-form{margin-top:20px}
  .activation-topbar{flex-wrap:wrap;row-gap:10px}
  .activation-top-actions{width:100%}
  .activation-top-actions .btn{flex:1}
}

/* 13. Débordements résiduels — un montant, une référence ou un identifiant long
   ne doit jamais élargir la page. */
@media (max-width:640px){
  .amt,.num,.kpi .val,.account-stat strong,.finance-stat strong,
  .balance-card .amt,.receipt-head .amt{overflow-wrap:anywhere}
  .badge,.chip,.status-dot{white-space:normal}
  .btn:not(.icon-btn):not(.password-toggle){white-space:normal}
}