/* ============================================================
   QTOUCH — espace annonceur : passe téléphone (≤ 760 px)
   Chargé en dernier (après les couches lib/*). Mise en page seulement :
   l'identité (menu navy, blanc, orange #F97316/#EA580C, Plus Jakarta Sans)
   ne change pas. Le module campagne (lib/campaign) a sa propre passe.
   ============================================================ */

@media (max-width:760px){
  /* ---------- 1. une seule gouttière de 12 px ----------
     avant : .app-main 14 px + .qph 16 px + .app-content 16 px (+ .tdb-wrap 36 px)
     → les cartes ne gardaient que 260 px sur un écran de 320. */
  html body .app-main{padding-left:0 !important;padding-right:0 !important;padding-top:0 !important}
  #page-app .screen > .app-content,
  #page-app .screen > .search-layout,
  #screen-overview .tdb-wrap{padding-left:12px !important;padding-right:12px !important}
  #screen-overview .tdb-wrap{padding-top:16px !important}
  #page-app header.qph{margin:12px 12px 0}

  /* ---------- 2. en-tête : pleine largeur, collé en haut, encoche respectée ---------- */
  #page-app .qt-app-header{margin:0;border-radius:0;min-height:60px;
    padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}
  .qt-app-logo{flex-shrink:0;margin-right:6px}
  /* onglets de portail : centrés tant qu'ils tiennent, sinon défilent sans passer sous le logo
     (justify-content:center dans un conteneur qui défile rognait le début, sous le logo) */
  #page-app .qt-app-portal{flex:1 1 auto;min-width:0;justify-content:flex-start;gap:4px}
  #page-app .qt-app-portal > :first-child{margin-left:auto}
  #page-app .qt-app-portal > :last-child{margin-right:auto}
  #page-app .qt-app-portal-tab{min-width:40px;min-height:40px;justify-content:center}
  #page-app .qt-app-header-right{flex-shrink:0}

  /* ---------- 3. panneaux latéraux fermés : pas d'ombre qui déborde sur la page ---------- */
  .miss-panel:not(.open):not(.show):not(.is-open){box-shadow:none}
  .cmpo-drawer:not(.on){box-shadow:none}

  /* ---------- 4. Explorer les lieux ---------- */
  #screen-search .search-main{padding-left:0 !important;padding-right:0 !important}
  #exploreTabs.ab-portalnav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px}
  #exploreTabs.ab-portalnav::-webkit-scrollbar{display:none}
  #exploreTabs .ab-portalnav-item{flex:0 0 auto;padding:6px 12px 12px}
  /* formulaire de recherche : un champ par ligne, les deux boutons côte à côte */
  #screen-search .exq{flex-wrap:wrap}
  #screen-search .exq-cell{flex:1 1 100% !important;width:100% !important;max-width:none !important;min-width:0}
  #screen-search .exq-cell input{width:100% !important;min-width:0}
  #screen-search .exq-btn,#screen-search .exq-smart{flex:1 1 0;min-width:0;min-height:40px;justify-content:center}

  /* ---------- 5. Préférences : connexions ---------- */
  #screen-prefs .prefs-conn-row{gap:12px}
  #screen-prefs .prefs-conn-info{flex:1 1 0;min-width:0}
  #screen-prefs .prefs-conn-row > button{flex:0 0 auto}

  /* ---------- 6. Créations : carte d'import (avant : 32 px de marge en plus de la gouttière) ---------- */
  #screen-camp .cve-aud-grid{grid-template-columns:minmax(0,1fr) !important}
  #screen-camp .cve-aud-section{padding:16px 0 8px !important}
  #screen-camp .cve-clipzi{padding:8px 0 !important}
  #screen-camp .cve-clipzi-card{padding:18px 16px !important}

  /* ---------- 6b. Facturation : moyen de paiement et crédit (avant : texte en colonne de 80 px à côté du bouton) ---------- */
  #screen-billing .bill-method{flex-wrap:wrap;gap:12px}
  #screen-billing .bill-method-body{flex:1 1 calc(100% - 60px);min-width:0}
  #screen-billing .bill-method > button{flex:1 1 100%;min-height:42px}
  #screen-billing .bill-credit{flex-wrap:wrap;gap:10px 14px}
  #screen-billing .bill-credit-body{flex:1 1 calc(100% - 60px);min-width:0}
  #screen-billing .bill-credit-v{overflow-wrap:anywhere}
  #screen-billing .bill-credit-cta{flex:1 1 100%;justify-content:center;min-height:42px}
  #screen-billing .bill-topup-presets{flex-wrap:wrap}
  #screen-billing .bill-topup-preset{min-height:40px}
  #screen-billing .bill-topup .bill-btn-primary{width:100%;min-height:42px}

  /* ---------- 7. toasts : lisibles, au-dessus de la barre du téléphone ---------- */
  .toast{max-width:calc(100vw - 24px);width:max-content;box-sizing:border-box;text-align:center;line-height:1.4;
    bottom:calc(16px + env(safe-area-inset-bottom)) !important}

  /* ---------- 8. fenêtres : dans l'écran, défilement interne ---------- */
  .aw-overlay{padding:10px}
  .aw-modal{width:100% !important;max-height:calc(100dvh - 20px)}

  /* recharge du budget : 4 montants → 2×2, la carte défile à l'intérieur (avant : 500 $ coupé, bas du formulaire hors écran) */
  .budget-modal-overlay{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)) !important;align-items:center}
  .budget-modal-card{max-height:calc(100dvh - 20px) !important;overflow-y:auto !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .budget-modal-head{padding:20px 56px 16px 18px}
  .budget-modal-close{top:14px;right:14px;width:40px;height:40px}
  .budget-modal-card > :not(.budget-modal-head):not(.budget-modal-foot){padding-left:18px !important;padding-right:18px !important}
  .budget-tiers{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .budget-tier-amt{white-space:nowrap}
  .budget-paygrid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr)) !important}
  .budget-card-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .budget-modal-foot{padding:14px 18px 18px;flex-wrap:wrap;position:sticky;bottom:0;background:#fff;border-top:1px solid #F0F1F3}
  .budget-modal-foot .budget-secure{flex:1 1 100%}
  .budget-cta{flex:1 1 100%;justify-content:center}
}