/* CRM mobile layer — assemblé 2026-08-21T23:43:18.012Z — fichiers: 00-shell.css, 10-messagerie.css, 12-chat-tools.css, 20-vault.css, 30-scripts.css, 40-bot.css, 50-business.css, 60-gestion-param-login.css — rollback = retirer du sub_filter nginx */
/* ===== 00-shell.css ===== */
/* ============================================================================
   COUCHE MOBILE — 00 coque (shell) : tiroir sidebar + appbar + variables
   Breakpoint unique : 820px (= téléphone, portrait ET paysage). Rien ne change au-dessus.
   Tokens = ceux du kit X-console (--console-*, --x-*, --xc-*). Pas de couleur inventée.
   ========================================================================== */
.m-burger{ display:none; }
.m-backdrop{ display:none; }

@media (max-width:820px), (max-width:1024px) and (max-height:500px){
  html{ -webkit-text-size-adjust:100%; }
  html, body.xc{ height:100%; overscroll-behavior:none; }

  /* --- canvas : plus de panneaux flottants, plein écran --- */
  html .xc-app{ padding:0; gap:0; height:100dvh; height:var(--m-vvh,100dvh); }
  html .xc-main{ border:0; border-radius:0; box-shadow:none; }

  /* --- sidebar = tiroir (drawer) --- */
  html .xc-side{
    position:fixed; top:0; left:0; bottom:0; height:100dvh; width:min(300px,86vw);
    border-radius:0; border:0; border-right:1px solid var(--console-line); box-shadow:none;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
    z-index:1000; transform:translateX(-104%);
    transition:transform .26s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
  html.m-drawer .xc-side{ transform:none; box-shadow:var(--console-panel-shadow); }
  html .m-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999;
    opacity:0; pointer-events:none; transition:opacity .26s;
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  html.m-drawer .m-backdrop{ opacity:1; pointer-events:auto; }
  html .xc-nav__item{ height:44px; font-size:15px; gap:14px; }
  html .xc-nav__item svg{ width:18px; height:18px; }
  html .xc-side__acct{ height:40px; }

  /* --- appbar : burger + titre + pills modèles scrollables --- */
  html .xc-appbar{
    height:auto; min-height:56px; padding:env(safe-area-inset-top) 10px 0 6px; gap:4px;
  }
  html .m-burger{
    display:inline-grid; place-items:center; width:44px; height:44px; flex:none;
    border:0; background:transparent; color:var(--x-fg-primary); border-radius:var(--xc-radius-control); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  html .m-burger:active{ background:var(--console-wash); }
  html .m-burger svg{ width:22px; height:22px; }
  html body.crm-chatter .m-burger{ display:none; }
  html .xc-appbar__title{ font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; max-width:38vw; }
  html .crm-modeltabs{ margin-left:6px; max-width:none; flex:1; min-width:0; padding:4px 2px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  html .crm-mtab{ scroll-snap-align:start; height:34px; }

  /* --- vues plein écran (Scripts / Vault / Bot / Business / Équipe / Paramètres) --- */
  html .crm-view{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

  /* --- confort tactile global --- */
  html button, html a, html input, html select, html textarea{ -webkit-tap-highlight-color:transparent; }
  html input, html textarea, html select{ font-size:16px; }   /* < 16px = zoom auto iOS au focus */
  html ::-webkit-scrollbar{ width:0; height:0; }
  html *{ scrollbar-width:none; }
}


/* ===== 10-messagerie.css ===== */
/* ============================================================================
   COUCHE MOBILE — 10 messagerie : liste plein écran, conversation = vue plein écran
   par-dessus (façon Telegram/WhatsApp), fil + composer adaptés au tactile/clavier.
   Tout est scopé `.crm-body .crm-thread` pour NE PAS toucher le composer/fil réutilisés
   par la vue Bot (#view-bot .crm-composer) ni les popovers/menus/runner/panneau fan.
   z-index de la conversation ouverte = 500  (< 999 backdrop / 1000 tiroir de 00-shell).
   ========================================================================== */
.m-back{ display:none; }

@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* --- Liste de conversations : PLEIN ÉCRAN (convresize.js pose width/flex/max-width en inline) --- */
  html .crm-body .crm-list{
    width:100% !important; max-width:none !important; flex:1 1 auto !important;
    border-right:0; min-width:0;
  }
  html .crm-body .crm-list .crm-resize{ display:none; }           /* poignée de redimensionnement = souris only */
  html .crm-body .crm-list__head{ padding:8px 12px 6px; gap:8px; }
  html .crm-body .crm-search{ height:40px; padding:0 12px; }
  html .crm-body .crm-search svg{ width:18px; height:18px; }
  html .crm-body .crm-search input{ font-size:16px; height:100%; }   /* < 16px = zoom auto iOS au focus ; 100% = zone tactile 40px */

  /* onglets Tous / Non lus / Payeurs sur UNE ligne (défilent si vraiment trop étroit) */
  html .crm-body .crm-tabs{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:4px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  html .crm-body .crm-tabs .crm-tab{ flex:none; height:44px; padding:0 14px; font-size:14px; white-space:nowrap; }   /* 44px = zone tactile (comme .m-back / .xc-nav__item) */
  html .crm-body .crm-tabs .crm-tab .n{ margin-left:4px; font-size:11.5px; }
  html .crm-body .crm-list.cw-sm .crm-tab, html .crm-body .crm-list.cw-xs .crm-tab{ padding:0 14px; font-size:14px; }   /* convresize classe la liste "étroite" : on annule */
  html .crm-body .crm-list.cw-xs .crm-tab .n{ display:inline; }

  /* lignes ≥ 60px, pastilles lisibles */
  html .crm-body .crm-list .crm-scroll{ padding:2px 6px 12px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html .crm-body .crm-conv{ min-height:60px; padding:10px 10px; gap:12px; }
  html .crm-body .crm-conv:hover{ background:transparent; }
  html .crm-body .crm-conv:active{ background:var(--console-wash); }
  html .crm-body .crm-conv.is-active{ background:transparent; }   /* pas de "ligne active" sur mobile : la conv est par-dessus */
  html .crm-body .crm-conv__name{ font-size:15px; }
  html .crm-body .crm-conv__last{ font-size:13.5px; }
  html .crm-body .crm-conv__time{ font-size:12px; }
  html .crm-body .crm-conv__badge{ min-width:20px; height:20px; font-size:12px; padding:0 6px; }
  html .crm-body .crm-conv__spend{ height:17px; font-size:10.5px; bottom:-6px; }
  html .crm-body .crm-conv__tag{ top:8px; bottom:8px; }

  /* --- Conversation : vue plein écran par-dessus la liste (suit le clavier via --m-vvh/--m-vvtop) --- */
  html .crm-body .crm-thread{
    position:fixed; left:0; right:0; top:var(--m-vvtop,0px); height:var(--m-vvh,100dvh);
    z-index:500;                                   /* < 999 (backdrop tiroir) ; les outils de chat s'alignent au-dessus de 500 */
    background:var(--console-main); display:flex; flex-direction:column; min-width:0;
  }
  html .crm-body .crm-thread.is-empty{ display:none; }   /* rien d'ouvert = la liste prend tout l'écran */

  /* en-tête : retour + avatar + nom + actions (44px) */
  html .crm-body .crm-thread .crm-th__head{ height:auto; min-height:56px; padding:env(safe-area-inset-top) 8px 0 4px; gap:8px; }   /* 8px à droite : les actions (3×44) ne dépassent plus le bord */
  html .crm-body .crm-thread .crm-th__head .m-back{ display:grid; }
  html .crm-body .crm-thread .crm-th__head .crm-icon{ width:44px; height:44px; -webkit-tap-highlight-color:transparent; }
  html .crm-body .crm-thread .crm-th__head .crm-icon:hover{ background:transparent; }
  html .crm-body .crm-thread .crm-th__head .crm-icon:active{ background:var(--console-wash); }
  html .crm-body .crm-thread .crm-th__head .crm-icon svg{ width:20px; height:20px; }
  html .crm-body .crm-thread .crm-th__head .m-back svg{ width:22px; height:22px; }
  html .crm-body .crm-thread .crm-th__meta{ flex:1; min-width:0; }
  html .crm-body .crm-thread .crm-th__name{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html .crm-body .crm-thread .crm-th__status{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* le prod le met en flex -> l'ellipsis ne marchait pas : bloc + dot inline */
  html .crm-body .crm-thread .crm-th__status .dot{ display:inline-block; vertical-align:middle; margin:-1px 5px 0 0; }
  html .crm-body .crm-thread .crm-th__actions{ flex:none; gap:0; }

  /* fil : scroll interne, bulles larges, liens longs cassés, médias contenus */
  html .crm-body .crm-thread .crm-msgs{ padding:10px 10px 6px; gap:8px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html .crm-body .crm-thread .crm-msg{ max-width:80vw; font-size:15px; overflow-wrap:anywhere; }
  html .crm-body .crm-thread .crm-msg__cap{ overflow-wrap:anywhere; }
  html .crm-body .crm-thread .crm-med{ max-width:100%; }
  html .crm-body .crm-thread .crm-med--vid{ max-width:min(300px,76vw); }
  html .crm-body .crm-thread .crm-msg.has-media .crm-med--img, html .crm-body .crm-thread .crm-msg.has-media .crm-med--gif,
  html .crm-body .crm-thread .crm-msg.has-media .crm-med--vid{ max-width:min(320px,80vw); }
  html .crm-body .crm-thread .crm-typing{ padding:2px 12px 6px; }

  /* composer : ancré en bas (safe-area), envoyer 44px, barre d'outils défilante + "Envoyer" collant */
  html .crm-body .crm-thread .crm-composer-wrap{ padding:6px 8px calc(8px + env(safe-area-inset-bottom)); }
  html .crm-body .crm-thread .crm-composer{ padding:8px 10px 6px; gap:4px; }
  html .crm-body .crm-thread .crm-composer textarea{ font-size:16px; line-height:22px; min-height:32px; max-height:132px; padding:5px 2px; }
  html .crm-body .crm-thread .crm-ctools{ flex-wrap:nowrap; gap:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  html .crm-body .crm-thread .crm-ctools__hint{ display:none; }      /* "Entrée pour envoyer" : pas de sens au clavier tactile */
  html .crm-body .crm-thread .crm-ctools__sp{ min-width:8px; }
  html .crm-body .crm-thread .crm-ctools .crm-cbtn{ width:44px; height:44px; }
  html .crm-body .crm-thread .crm-ctools .crm-cbtn:hover{ background:transparent; color:var(--x-fg-tertiary); }
  html .crm-body .crm-thread .crm-ctools .crm-cbtn.is-active{ background:var(--console-chip); color:var(--x-fg-primary); }
  html .crm-body .crm-thread .crm-send{ width:44px; height:44px; position:sticky; right:0; background:var(--console-surface); }
  html .crm-body .crm-thread .crm-send svg{ width:20px; height:20px; }
  html .crm-body .crm-thread .crm-composer:focus-within .crm-send{ color:var(--x-fg-secondary); }

  /* clavier ouvert : moins de marge sous le composer (le fil garde le bas via le JS) */
  html.m-kbd .crm-body .crm-thread .crm-composer-wrap{ padding-bottom:6px; }
}

/* --- PAYSAGE téléphone (≤ 450px de haut) : en-tête 44px + composer compact, sinon le clavier (viewport visuel ~150px)
       avale la barre d'outils et le bouton Envoyer. Boutons d'outils 40×36 (compromis hauteur) : 40 + 86 = 126px < 150. --- */
@media (max-width:1024px) and (max-height:480px){
  html .crm-body .crm-thread .crm-th__head{ min-height:40px; gap:6px; }
  html .crm-body .crm-thread .crm-th__head .crm-icon{ height:40px; }          /* largeur 44 conservée */
  html .crm-body .crm-thread .crm-th__name{ font-size:14px; line-height:18px; }
  html .crm-body .crm-thread .crm-th__status{ font-size:11px; line-height:14px; }
  html .crm-body .crm-thread .crm-msgs{ padding:6px 10px 4px; gap:6px; }
  html .crm-body .crm-thread .crm-composer-wrap{ padding:4px 8px calc(4px + env(safe-area-inset-bottom)); }
  html.m-kbd .crm-body .crm-thread .crm-composer-wrap{ padding-bottom:4px; }
  html .crm-body .crm-thread .crm-composer{ padding:4px 8px 2px; gap:2px; }
  html .crm-body .crm-thread .crm-composer textarea{ min-height:32px; max-height:76px; }   /* 32px = zone tactile mini, comme en portrait */
  html .crm-body .crm-thread .crm-ctools .crm-cbtn{ width:40px; height:36px; }
  html .crm-body .crm-thread .crm-send{ width:40px; height:36px; }
}


/* ===== 12-chat-tools.css ===== */
/* ============================================================================
   COUCHE MOBILE — 12 outils de chat : popovers du composer, runner de script,
   menu contextuel, barres sélection/réponse, panneau fan, notifs de vente, popups.
   Tout vit DANS ou AU-DESSUS du fil (z-index 600-900, < 999 du tiroir).
   Couches : cloche 450 (sous le fil fixe 500) · backdrop 690 · sheets 700 · ctx 720 · profil fan 800.
   Tokens = kit X-console uniquement. Rien ne change au-dessus de 820px.
   ========================================================================== */
.m-sheet-bd{ display:none; }
.m-fanhead{ display:none; }

@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* ---------- backdrop commun des bottom sheets (posé par 12-chat-tools.js) ----------
     même voile que le tiroir (00-shell) ; un tap dessus = « clic dehors » -> les handlers
     existants ferment popover / menu d'étapes / menu contextuel / panneau ventes. */
  html .m-sheet-bd{
    display:block; position:fixed; inset:0; z-index:690; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .2s; touch-action:none;
  }
  /* .crm-thread = contexte d'empilement (z 500) : voile DANS le fil pour popovers + menu d'étapes,
     voile au niveau du body pour menu contextuel + panneau ventes (html.m-sheet-top). */
  html.m-sheet .crm-thread > .m-sheet-bd{ opacity:1; pointer-events:auto; }
  html.m-sheet-top body > .m-sheet-bd{ opacity:1; pointer-events:auto; }

  /* ---------- 1. popovers du composer (.crm-pop) = bottom sheet ancré en bas ---------- */
  html .crm-pop{
    position:fixed; left:0; right:0; top:auto; bottom:0; width:auto; z-index:700;
    max-height:min(60vh, calc(var(--m-vvh,100vh) - 56px));
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--console-surface); border:1px solid var(--console-line); border-bottom:0;
    border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; box-shadow:var(--console-panel-shadow);
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    transform-origin:bottom center; transform:translateY(14px);
  }
  html .crm-pop.is-open{ transform:none; }

  /* emoji : grille pleine largeur, cases 40px, la sheet scrolle (plus la grille) */
  html .crm-emoji{ width:auto; }
  html .crm-emoji__grid{ grid-template-columns:repeat(8,minmax(0,1fr)); gap:2px; max-height:none; overflow:visible; }
  html .crm-emoji button{ height:40px; font-size:22px; padding:0; min-width:0; }   /* minmax(0) : le glyphe ne force pas la largeur de colonne */
  html .crm-emoji__quick{ gap:4px; padding-bottom:8px; margin-bottom:8px; }
  html .crm-emoji__quick button{ height:44px; font-size:26px; }
  html .crm-emoji__label{ font-size:12px; padding:4px 4px 6px; }

  /* picker de scripts : items 44px, liste non bornée (la sheet scrolle) */
  html .crm-scripts{ width:auto; }
  html .crm-scr__head{ font-size:12px; padding:6px 8px 8px; }
  html .crm-scr__list{ max-height:none; overflow:visible; }
  html .crm-scripts .crm-scr__it{ min-height:44px; padding:10px 12px; font-size:15px; }
  html .crm-scripts .crm-scr__nm{ font-size:15px; }
  html .crm-scr__b{ font-size:11px; padding:3px 9px; }
  html .crm-scr__empty{ font-size:14px; padding:14px 10px; }
  html .crm-scripts > button{ min-height:44px; padding:10px 12px; }           /* ancien picker (.t/.p) */
  html .crm-scripts .t{ font-size:15px; }
  html .crm-scripts .p{ font-size:13px; }

  /* ---------- 2. runner de script : compact, pleine largeur, boutons 44px ---------- */
  html .crm-runner{ padding:6px 10px 4px; gap:8px; max-height:50vh; overflow-y:auto; overscroll-behavior:contain; }
  html .crm-runner__top{ gap:8px; min-height:44px; }
  html .crm-runner__nm{ font-size:14px; }
  html .crm-runner__stepbtn{ height:36px; padding:0 12px; font-size:12px; }
  html .crm-runner__stepbtn svg{ width:15px; height:15px; }
  html .crm-runner__x{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; margin-right:-10px; }
  html .crm-runner__x svg{ width:20px; height:20px; }
  html .crm-runner__ta{ font-size:16px; min-height:48px; }
  html .crm-runner__act{ justify-content:stretch; }
  html .crm-runner__send{ flex:1; height:44px; font-size:14px; }
  html .crm-runner__hint{ font-size:13px; }
  html .crm-runner__opts{ flex-direction:column; gap:8px; }                   /* boutons de choix empilés */
  html .crm-runner__opt{ min-height:44px; width:100%; text-align:left; font-size:14px; padding:10px 14px; }
  html .crm-runner__ok{ font-size:13px; }
  html .crm-runner__mth{ width:56px; height:56px; }
  html .crm-runner__mx{ width:24px; height:24px; top:-8px; right:-8px; }
  html .crm-runner__mx svg{ width:11px; height:11px; }
  html .crm-runner__vpb{ width:34px; height:34px; }

  /* menu d'étapes = bottom sheet */
  html .crm-stepmenu{
    position:fixed; left:0; right:0; top:auto; bottom:0; z-index:700;
    max-height:min(60vh, calc(var(--m-vvh,100vh) - 56px)); overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    border-bottom:0; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  }
  html .crm-stp{ min-height:44px; font-size:15px; padding:10px 12px; }
  html .crm-stp__ck{ width:22px; height:22px; }
  html .crm-stp__ck svg{ width:13px; height:13px; }
  html .crm-stp__here{ font-size:11px; }

  /* ---------- 3. menu contextuel (clic droit / appui long) = bottom sheet, items 48px ----------
     le handler existant pose left/top en inline -> !important nécessaire (autorisé : style inline). */
  html .crm-msgs .crm-msg{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  html .crm-msgs .crm-msg.m-press{ opacity:.85; }
  html .crm-ctx{
    left:0 !important; right:0; top:auto !important; bottom:0; min-width:0; z-index:720;
    border-bottom:0; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom)); gap:2px;
    max-height:min(60vh, calc(var(--m-vvh,100vh) - 56px)); overflow-y:auto; overscroll-behavior:contain;
  }
  html .crm-ctx button{ min-height:48px; font-size:15px; padding:10px 14px; gap:14px; }
  html .crm-ctx button svg{ width:18px; height:18px; }

  /* ---------- 4. barre de sélection + barre réponse/édition : pleine largeur, 44px ---------- */
  html .crm-selbar{ padding:6px 0; gap:10px; }
  html .crm-selbar__n{ font-size:14px; flex:1; min-width:0; }
  html .crm-selbar__act{ gap:8px; }
  html .crm-selbar__act button{ min-height:44px; padding:0 16px; font-size:14px; }
  html .crm-reply{ min-height:44px; padding:4px 4px 4px 12px; gap:8px; }
  html .crm-reply__l{ font-size:12px; }
  html .crm-reply__q{ font-size:13px; }
  html .crm-reply__x{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
  html .crm-reply__x svg{ width:18px; height:18px; }

  /* ---------- 5. panneau fan = vue plein écran (html.m-fan-open posée par le JS) ----------
     on montre le VRAI aside.crm-fan (masqué ≤1280 par l'app) ; header « Profil » + fermer ajoutés en tête. */
  html.m-mobile.m-fan-open .crm-body .crm-fan{
    display:flex; position:fixed; inset:0; z-index:800; width:auto; border:0;
    background:var(--console-main); padding:0 14px calc(20px + env(safe-area-inset-bottom)); gap:16px;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  html .m-fanhead{
    display:flex; align-items:center; gap:12px; flex:none; min-height:56px;
    margin:0 -14px 2px; padding:env(safe-area-inset-top) 6px 0 18px;
    border-bottom:1px solid var(--console-line-faint); background:var(--console-main);
    position:sticky; top:0; z-index:1;
  }
  html .m-fanhead__t{ flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--x-fg-primary); }
  html .m-fanhead .crm-icon{ width:44px; height:44px; }
  html .m-fanhead .crm-icon svg{ width:20px; height:20px; }
  html.m-fan-open .crm-fan__ca-v{ font-size:28px; }
  html.m-fan-open .crm-fan__note{ font-size:16px; }                           /* anti-zoom iOS */
  html.m-fan-open .fp-tagadd, html.m-fan-open .fp-tag button{ min-height:36px; min-width:36px; }   /* tags (fanprofile.js) tapables */

  /* ---------- 6. notifications de vente (livepay.js) + popups (dialog.js) ----------
     cloche : dans l'appbar à droite (on réserve la place), SOUS le fil fixe (z 450 < 500) et sous le tiroir. */
  html .xc-appbar{ padding-right:54px; }
  html #lp-bell{ top:calc(env(safe-area-inset-top) + 6px); right:6px; width:44px; height:44px; z-index:450; }
  html #lp-bell svg{ width:22px; height:22px; }
  html #lp-bell .lp-count{ top:2px; right:2px; }
  html #lp-panel{
    top:auto; right:0; left:0; bottom:0; width:auto; max-width:none; z-index:700;
    max-height:min(70vh, calc(var(--m-vvh,100vh) - 56px)); border-bottom:0;
    border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; padding-bottom:env(safe-area-inset-bottom);
  }
  html #lp-panel .lp-head{ min-height:56px; padding:0 8px 0 16px; font-size:14px; }
  html #lp-panel .lp-clear{ min-height:44px; padding:0 10px; font-size:13px; }
  html #lp-panel .lp-list{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html #lp-panel .lp-item{ padding:12px 16px; }
  html #lp-panel .lp-t1{ font-size:14px; }
  /* toasts : pleine largeur sous l'appbar */
  html #paynotif-host{ top:calc(env(safe-area-inset-top) + 62px); left:8px; right:8px; max-width:none; }
  html .paynotif{ width:auto; }
  html .paynotif__x{ width:44px; height:44px; align-items:center; justify-content:center; margin:-10px -10px -10px 0; }
  html .paynotif__x svg{ width:18px; height:18px; }
  /* popup dialog.js : ≤ 92vw, boutons 44px qui s'empilent si ça ne tient pas */
  html .xcd-ov{ padding:16px; }
  html .xcd{ max-width:92vw; padding:18px 16px; }
  html .xcd__t{ font-size:16px; }
  html .xcd__m{ font-size:15px; }
  html .xcd__in{ height:44px; font-size:16px; }
  html .xcd__a{ flex-wrap:wrap; gap:10px; margin-top:16px; }
  html .xcd__a .xc-btn{ flex:1 1 130px; min-height:44px; font-size:14px; }

  /* ---------- 7. boutons du header de conversation : 44px ---------- */
  html .crm-th__actions{ gap:0; }
  html .crm-th__actions .crm-icon{ width:44px; height:44px; }
  html .crm-th__actions .crm-icon svg{ width:20px; height:20px; }
}


/* ===== 20-vault.css ===== */
/* ============================================================================
   COUCHE MOBILE — 20 Vault
   A. modale Vault des chatteurs (.crm-vaultmodal, ouverte depuis une conv)      → plein écran
   B. page Vault admin (#vaultpage.crm-va : Contenu / Prestations / Réglages)    → aside = chips, barres qui wrap
   C. Vault Pro (#view-vaultpro) + injections vaultbtn.js (#viaov) / vaultsold.js (#vs-confirm, cadenas)
   Tokens = kit X-console uniquement. Sélecteurs scopés (.crm-vaultmodal / .crm-va) : stories.js et spins.js
   réutilisent .crm-vm__grid/.crm-vm__tile ailleurs, on ne les touche pas.
   Z-index : modale 800 (> .crm-thread ~500, < backdrop/tiroir 999/1000) ; #vs-confirm 850 ; #viaov 900.
   ========================================================================== */
@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* ------------------------------------------------------------------
     A. MODALE VAULT — plein écran, hauteur = viewport visuel (suit le clavier)
     ------------------------------------------------------------------ */
  html .crm-vaultmodal{
    padding:0; inset:auto; top:var(--m-vvtop,0px); left:0; right:0; height:var(--m-vvh,100dvh);
    z-index:800; align-items:stretch; justify-content:stretch; background:var(--console-surface);
  }
  html .crm-vaultmodal .crm-vm__panel{
    width:100%; height:100%; max-width:none; max-height:none;
    border:0; border-radius:0; box-shadow:none; flex-direction:column;
  }
  /* .crm-vm__main devient transparent : ses enfants remontent dans la colonne du panel,
     ce qui permet d'intercaler les collections (aside) entre les onglets et la recherche via order */
  html .crm-vaultmodal .crm-vm__main{ display:contents; }
  html .crm-vaultmodal .crm-vm__head{ order:0; padding:calc(4px + env(safe-area-inset-top)) 6px 4px 16px; gap:8px; }
  html .crm-vaultmodal .crm-vm__title{ font-size:16px; }
  html .crm-vaultmodal .crm-vm__close{ width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--xc-radius-control); }
  html .crm-vaultmodal .crm-vm__close:active{ background:var(--console-wash); }
  html .crm-vaultmodal .crm-vm__tabs{ order:1; padding:0 8px; gap:0; }
  html .crm-vaultmodal .crm-vm__tab{ flex:1 1 0; min-width:0; min-height:44px; padding:10px 6px 12px; text-align:center; white-space:nowrap; }
  html .crm-vaultmodal .crm-vm__side{ order:2; width:auto; flex:none; border-right:0; border-bottom:1px solid var(--console-line); background:transparent; }
  html .crm-vaultmodal .crm-vm__controls{ order:3; }
  html .crm-vaultmodal .crm-vm__grid{ order:4; }
  html .crm-vaultmodal .crm-vm__selbar{ order:5; }

  /* ---- collections : aside → rangée de chips scrollable (modale + page admin), look = .crm-mtab de l'appbar ---- */
  html .crm-vaultmodal .crm-vm__side-h, html .crm-va .crm-vm__side-h{ display:none; }
  html .crm-vaultmodal .crm-vm__folders, html .crm-va .crm-vm__folders{
    flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:center; gap:6px;
    overflow-x:auto; overflow-y:hidden; padding:8px 12px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  html .crm-vaultmodal .crm-vm__folders::-webkit-scrollbar, html .crm-va .crm-vm__folders::-webkit-scrollbar{ display:none; }
  html .crm-vaultmodal .crm-vm__folder, html .crm-va .crm-vm__folder{
    width:auto; flex:none; height:36px; padding:0 12px; gap:7px; border-radius:9999px;
    border:1px solid var(--console-line); background:transparent; color:var(--x-fg-secondary);
    font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  }
  html .crm-vaultmodal .crm-vm__folder:active, html .crm-va .crm-vm__folder:active{ background:var(--console-wash); }
  html .crm-vaultmodal .crm-vm__folder.is-active, html .crm-va .crm-vm__folder.is-active{
    background:var(--console-chip); color:var(--x-fg-primary); border-color:var(--x-border-hover); font-weight:600;
  }
  html .crm-vaultmodal .crm-vm__folder-n, html .crm-va .crm-vm__folder-n{ flex:none; overflow:visible; }
  html .crm-vaultmodal .crm-vm__folder-c, html .crm-va .crm-vm__folder-c{ background:var(--console-chip); }
  html .crm-vaultmodal .crm-vm__folder-sep, html .crm-va .crm-vm__folder-sep{ width:1px; height:20px; margin:0 2px; flex:none; align-self:center; }

  /* ---- recherche + segment Photo/Vidéo sur une ligne (modale) ---- */
  html .crm-vaultmodal .crm-vm__controls{ padding:8px 12px; gap:8px; flex-wrap:wrap; }
  html .crm-vaultmodal .crm-vm__search, html .crm-va .crm-vm__search{ flex:1 1 140px; min-width:0; height:40px; padding:0 14px; font-size:16px; }   /* 16px = pas de zoom iOS */
  html .crm-vaultmodal .crm-vm__kind button, html .crm-va .crm-vm__kind button{ height:32px; padding:0 11px; font-size:12.5px; }

  /* ---- grille : 3 colonnes sur un téléphone en portrait (auto-fill 110px), gap 3px ---- */
  html .crm-vaultmodal .crm-vm__grid, html .crm-va .crm-va__grid{
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:3px;
    padding:3px 3px calc(12px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  html .crm-vaultmodal .crm-vm__tile, html .crm-va .crm-vm__tile, html .crm-va .crm-va__uptile, html .crm-va .crm-va__skl{ border-radius:var(--xc-radius-control); }
  html .crm-vaultmodal .crm-vm__presta{ padding:8px; gap:8px; }
  html .crm-vaultmodal .crm-vm__pcard{ min-height:44px; }
  /* onglet Jeu (spins.js) : bouton Envoyer + champ prix à la taille tactile */
  html .crm-vaultmodal .spin-send.xc-btn--sm{ height:36px; padding:0 14px; font-size:13px; }
  html .crm-vaultmodal .spin-price{ height:36px; font-size:16px; }
  /* case de sélection : zone de toucher 40px, rond 24px dessiné en ::before (même look que le desktop) */
  html .crm-vaultmodal .crm-vm__tile .crm-vm__pick, html .crm-va .crm-vm__tile .crm-vm__pick{
    top:0; left:0; width:40px; height:40px; border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  html .crm-vaultmodal .crm-vm__tile .crm-vm__pick::before, html .crm-va .crm-vm__tile .crm-vm__pick::before{
    content:""; position:absolute; left:6px; top:6px; width:24px; height:24px; box-sizing:border-box; border-radius:9999px;
    border:2px solid #fff; background:rgba(0,0,0,.35); box-shadow:0 0 0 1px rgba(0,0,0,.25);
  }
  html .crm-vaultmodal .crm-vm__tile.is-sel .crm-vm__pick::before, html .crm-va .crm-vm__tile.is-sel .crm-vm__pick::before{ background:var(--x-fg-brand); border-color:var(--x-fg-brand); }
  html .crm-vaultmodal .crm-vm__tile.is-sel .crm-vm__pick::after, html .crm-va .crm-vm__tile.is-sel .crm-vm__pick::after{ left:15px; top:10px; width:5px; height:11px; }
  /* favori / épingle : visibles au toucher (pas de hover sur mobile), 32px */
  html .crm-vaultmodal .crm-vm__marks{ opacity:1; top:4px; right:4px; gap:2px; }
  html .crm-vaultmodal .crm-vm__mk{ width:32px; height:32px; }
  html .crm-vaultmodal .crm-vm__mk svg{ width:15px; height:15px; }

  /* ---- barre de sélection ancrée en bas (safe-area), boutons 44px ---- */
  html .crm-vaultmodal .crm-vm__selbar, html .crm-va .crm-vm__selbar{ flex-wrap:wrap; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  html .crm-vaultmodal .crm-vm__selacts, html .crm-va .crm-vm__selacts{ flex:1 1 100%; flex-wrap:wrap; gap:8px; }
  html .crm-vaultmodal .crm-vm__selacts .crm-vm__b, html .crm-va .crm-vm__selacts .crm-vm__b{ min-height:44px; padding:0 10px; font-size:13px; white-space:nowrap; }
  html .crm-vaultmodal .crm-vm__selacts .crm-vm__b{ flex:1 1 0; min-width:0; }
  html .crm-va .crm-vm__selacts .crm-vm__b{ flex:1 1 calc(50% - 4px); }

  /* ---- carte aperçu (lightbox) plein écran, média contenu ---- */
  html .crm-vaultmodal .crm-vm__light, html .crm-va .crm-vm__light{ padding:0; background:var(--console-surface); }
  html .crm-vaultmodal .crm-vm__lightinner, html .crm-va .crm-vm__lightinner{ width:100%; height:100%; max-width:none; max-height:none; }
  html .crm-vaultmodal .crm-vm__card, html .crm-va .crm-vm__card{ width:100%; height:100%; max-width:none; max-height:none; border:0; border-radius:0; box-shadow:none; }
  html .crm-vaultmodal .crm-vm__chead, html .crm-va .crm-vm__chead{ padding:calc(2px + env(safe-area-inset-top)) 4px 2px 6px; gap:6px; }
  html .crm-vaultmodal .crm-vm__cback, html .crm-va .crm-vm__cback{ min-height:44px; padding:0 10px; }
  html .crm-vaultmodal .crm-vm__cx, html .crm-va .crm-vm__cx, html .crm-va .crm-va__ldel{ width:44px; height:44px; align-items:center; justify-content:center; }
  html .crm-vaultmodal .crm-vm__cmedia, html .crm-va .crm-vm__cmedia{ flex:1; min-height:0; max-height:none; }
  html .crm-vaultmodal .crm-vm__cmedia>img, html .crm-va .crm-vm__cmedia>img{ width:100%; height:100%; max-height:none; object-fit:contain; }
  html .crm-vaultmodal .crm-vp, html .crm-va .crm-vp{ height:100%; }
  html .crm-vaultmodal .crm-vp__v, html .crm-va .crm-vp__v{ height:100%; max-height:none; }
  html .crm-vaultmodal .crm-vp__btn, html .crm-va .crm-vp__btn{ width:36px; height:36px; align-items:center; justify-content:center; }
  html .crm-vaultmodal .crm-vp__seek, html .crm-va .crm-vp__seek{ height:32px; background:none; }
  html .crm-vaultmodal .crm-vp__seek::-webkit-slider-runnable-track, html .crm-va .crm-vp__seek::-webkit-slider-runnable-track{ height:4px; border-radius:9999px; background:rgba(255,255,255,.3); }
  html .crm-vaultmodal .crm-vp__seek::-webkit-slider-thumb, html .crm-va .crm-vp__seek::-webkit-slider-thumb{ margin-top:-4.5px; }
  html .crm-va .crm-va__lnav{ width:44px; height:44px; }
  html .crm-va .crm-va__lnav.prev{ left:8px; }
  html .crm-va .crm-va__lnav.next{ right:8px; }
  html .crm-va .crm-va__lkeys{ display:none; }          /* raccourcis clavier : sans objet au toucher */
  /* pied de la carte : légende + chips prix + barre prix/Envoyer ancrées en bas, au-dessus du clavier */
  html .crm-vaultmodal .crm-vm__cfoot{ padding:8px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
  html .crm-vaultmodal .crm-vm__lcap{ font-size:16px; padding:10px 12px; }
  html .crm-vaultmodal .crm-vm__lchips{ gap:6px; flex-wrap:nowrap; }
  html .crm-vaultmodal .crm-vm__lchips .crm-vm__chip{ flex:1 1 0; min-width:0; min-height:38px; padding:0 8px; text-align:center; }
  html .crm-vaultmodal .crm-vm__sendrow .crm-vm__pfield{ height:48px; width:112px; flex:none; }
  html .crm-vaultmodal .crm-vm__sendrow .crm-vm__pin{ font-size:16px; height:100%; }
  html .crm-vaultmodal .crm-vm__lsend{ height:48px; font-size:15px; min-width:0; }
  html .crm-vaultmodal .crm-vm__hint{ font-size:11px; }

  /* ---- dialogue prix (modale) + dialogues admin (.crm-va__dlg) → bottom-sheet ---- */
  html .crm-vaultmodal .crm-vm__pricedlg, html .crm-va__dlg{ padding:0; align-items:flex-end; }
  html .crm-vaultmodal .crm-vm__pdcard, html .crm-va__dlg .crm-vm__pdcard{
    width:100%; max-width:none; max-height:92%; display:flex; flex-direction:column;
    border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  html .crm-vaultmodal .crm-vm__pdhead, html .crm-va__dlg .crm-vm__pdhead{ padding:14px 16px; }
  html .crm-vaultmodal .crm-vm__pdbody, html .crm-va__dlg .crm-vm__pdbody{ padding:14px 16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  html .crm-vaultmodal .crm-vm__pdfoot .crm-vm__b, html .crm-va__dlg .crm-vm__pdfoot .crm-vm__b{ min-height:46px; }
  html .crm-vaultmodal .crm-vm__pricedlg .crm-vm__chip{ min-height:40px; flex:1 1 auto; }
  html .crm-vaultmodal .crm-vm__pricedlg .crm-vm__pfield{ height:52px; }
  html .crm-vaultmodal .crm-vm__pricedlg .crm-vm__pin{ font-size:22px; }
  html .crm-va__dlg .crm-va__drow{ min-height:44px; }
  html .crm-va__dlg .crm-va__dlist{ max-height:42vh; }

  /* ---- toasts au-dessus de la safe-area ---- */
  html .crm-vaultmodal .crm-vm__toast, html .crm-va .crm-vm__toast{ bottom:calc(16px + env(safe-area-inset-bottom)); max-width:calc(100% - 24px); }

  /* ------------------------------------------------------------------
     B. PAGE VAULT ADMIN (#vaultpage.crm-va)
     ------------------------------------------------------------------ */
  /* onglets : 3 onglets sur une ligne, « Voir comme chatteur » passe en dessous sur toute la largeur */
  html .crm-va__tabs{ flex-wrap:wrap; padding:0 8px; gap:0; }
  html .crm-va__tab{ flex:1 1 0; min-width:0; min-height:44px; padding:10px 4px 12px; margin-bottom:0; text-align:center; font-size:13.5px; white-space:nowrap; box-shadow:inset 0 -1px 0 var(--console-line); }
  html .crm-va__tabs-sp{ display:none; }
  html .crm-va__aschat{ flex:1 1 100%; order:9; height:40px; margin:8px 0; justify-content:center; }
  /* vue Contenu : aside → chips en haut, puis barre, puis grille */
  html .crm-va__view.on{ flex-direction:column; min-height:0; }
  html .crm-va__main{ flex:1 1 0; min-height:0; }   /* colonne : sans min-height:0 la grille ne scrolle pas et la barre de sélection passe sous l'écran */
  html .crm-va__side{ width:auto; flex:none; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--console-line); background:transparent; }
  html .crm-va__sideft{ flex:none; padding:0 12px 0 0; }
  html .crm-va__sideft .xc-btn{ width:auto; height:36px; padding:0 12px; font-size:12.5px; border-radius:9999px; white-space:nowrap; }   /* = .xc-btn--pill */
  html .crm-va .crm-va__fmenu{ display:inline-flex; width:32px; height:32px; margin:0 -8px 0 -4px; align-items:center; justify-content:center; }   /* menu dossier visible au toucher */
  html .crm-va__bar{ flex-wrap:wrap; gap:8px; padding:8px 12px; }
  html .crm-va__bar .crm-vm__search{ flex:1 1 100%; }
  html .crm-va__bar .crm-vm__kind{ flex:1 1 auto; }
  html .crm-va__bar .crm-vm__kind button{ flex:1 1 0; }
  html .crm-va__bar .xc-btn{ height:38px; flex:none; }
  html .crm-va__binfo{ padding:0 12px; }
  html .crm-va__bnr{ flex-wrap:wrap; }
  /* menu contextuel dossier (position inline posée par le JS) → feuille ancrée en bas */
  html .crm-va__fpop{ left:0!important; right:0; top:auto!important; bottom:0; min-width:0; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; }
  html .crm-va__fpop button{ min-height:48px; font-size:15px; padding:0 14px; }
  /* file d'upload flottante → feuille ancrée en bas */
  html .crm-va__queue{ left:0; right:0; bottom:0; width:auto; max-height:46vh; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom); }
  html .crm-va__qh button{ min-height:36px; }
  html .crm-va__qsub .act button{ min-height:32px; }
  html .crm-va__upact button{ min-height:32px; }
  /* Prestations */
  html .crm-va__pwrap, html .crm-va__swrap{ padding:12px 12px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  html .crm-va__phead{ flex-wrap:wrap; gap:8px; }
  html .crm-va__phead .xc-btn{ height:40px; flex:1 1 100%; }
  html .crm-va__prow{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"rank main price" "sales sales act";
    gap:6px 10px; padding:10px 12px; align-items:center;
  }
  html .crm-va__prank{ grid-area:rank; }
  html .crm-va__pmain{ grid-area:main; min-width:0; }
  html .crm-va__psales{ grid-area:sales; white-space:normal; }
  html .crm-va__pprice{ grid-area:price; min-height:36px; display:inline-flex; align-items:center; }
  html .crm-va__pprice input{ font-size:16px; width:64px; }
  html .crm-va__pact{ grid-area:act; justify-self:end; gap:4px; }
  html .crm-va__pact .crm-icon{ width:40px; height:40px; }
  html .crm-va__pact .xc-btn--sm{ height:36px; }
  html .crm-va__pform .row{ flex-direction:column; }
  html .crm-va__pform .row .crm-va__in{ flex:none; width:100%; }   /* flex:1 en colonne = champ écrasé */
  html .crm-va__pform .row .price{ width:100%; }
  html .crm-va__pform .ft{ flex-wrap:wrap; }
  html .crm-va__pform .ft .sp{ flex:1 1 100%; display:none; }
  html .crm-va__pform .ft .crm-vm__b{ flex:1 1 40%; min-height:44px; }
  html .crm-va .crm-va__in{ height:44px; font-size:16px; }
  html .crm-va__sec{ min-height:44px; }
  /* Réglages + setup */
  html .crm-va__card{ padding:14px; }
  html .crm-va__crow .xc-btn{ height:40px; }
  html select.crm-va__in{ max-width:100%; }
  html .crm-va__setupwrap{ padding:12px; }
  html .crm-va__setupcard{ width:100%; padding:18px 16px; }
  html .crm-va__errwrap{ padding:20px 16px; }
  html .crm-va__gwait .xc-btn--sm{ height:32px; }

  /* ------------------------------------------------------------------
     C. VAULT PRO (#view-vaultpro, iframe) + vaultbtn.js (#viaov) + vaultsold.js (#vs-confirm)
     ------------------------------------------------------------------ */
  html #view-vaultpro.show{ display:flex; flex-direction:column; }
  html #vpro-frame{ flex:1 1 auto; min-height:0; width:100%; }
  /* overlay Vault IA (fenêtre 3vh/3vw) → plein écran */
  html #viaov{ z-index:900; }
  html #viaov .via-win{ inset:0; border:0; border-radius:0; }
  html #viaov .via-hd{ padding:calc(6px + env(safe-area-inset-top)) 8px 6px 14px; }
  html #viaov .via-cl{ width:44px; height:44px; }
  html #via-toast{ z-index:910; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:calc(100% - 24px); }
  /* confirmation « déjà vendu » : doit passer AU-DESSUS de la modale (800) → feuille ancrée en bas */
  html #vs-confirm{ z-index:850; align-items:flex-end; }
  html #vs-confirm .vs-card{ width:100%; max-width:none; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0; padding:20px 16px calc(16px + env(safe-area-inset-bottom)); }
  html #vs-confirm .vs-row .xc-btn{ flex:1 1 0; height:44px; }
  /* cadenas sur tuiles 3 colonnes : texte plus compact */
  html .crm-vaultmodal .crm-vm__tile.is-sold .vs-lock svg{ width:20px; height:20px; }
  html .crm-vaultmodal .crm-vm__tile.is-sold .vs-lock span{ font-size:9.5px; }
}


/* ===== 30-scripts.css ===== */
/* ============================================================================
   COUCHE MOBILE — 30 SCRIPTS + VOIX
   Page #scriptspage.crm-sc (liste + éditeur), panneau Scripts du chat (scripts2.js #s2-ov),
   banque de vocaux #view-voice (voice.js), popup vocaux du composer (#vlib-pop, voice-lib.js),
   player vocal en bulle (.vp, voice-player.js).
   Tokens = kit X-console uniquement. Tout sous 820px, rien ne change au-dessus.
   ========================================================================== */
@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* ---------- A1. Liste : rail créatrices → rangée de chips scrollable ---------- */
  html .crm-sc__lview{ flex-direction:column; }
  html .crm-sc__rail{
    width:auto; flex:none; flex-direction:row; align-items:center; gap:8px;
    border-right:0; border-bottom:1px solid var(--console-line); padding:8px 12px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }
  html .crm-sc__rlbl{ flex:none; padding:0 4px 0 0; white-space:nowrap; }
  html .crm-sc__rlist{ flex-direction:row; gap:6px; }
  html .crm-sc__ritem{   /* même forme que les pills modèles de l'appbar (.crm-mtab) */
    width:auto; flex:none; white-space:nowrap; height:36px; padding:0 12px; gap:8px;
    border:1px solid var(--console-line); border-radius:9999px; scroll-snap-align:start;
  }
  html .crm-sc__ritem.on{ border-color:var(--x-border-hover); }
  html .crm-sc__ritem .av{ width:20px; height:20px; font-size:10px; }
  html .crm-sc__ritem .n{ margin-left:2px; }

  /* ---------- A2. Liste : barre d'actions qui wrap (recherche pleine largeur, boutons 44px) ---------- */
  html .crm-sc__lbar{ flex-wrap:wrap; gap:8px; padding:10px 12px 6px; }
  html .crm-sc__lbar > span[style]{ display:none; }            /* l'espaceur flex:1 n'a plus de sens */
  html .crm-sc__search{ width:100%; flex:1 1 100%; height:44px; order:-1; }
  html .crm-sc__search input{ font-size:16px; height:100%; }
  html .crm-sc__lbar .xc-btn{ flex:1 1 0; height:44px; font-size:14px; padding:0 10px; }

  /* ---------- A3. Liste : lignes plates, poignée visible (pas de hover), cibles 44px ---------- */
  html .crm-sc__lwrap{ padding:4px 12px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html .crm-sc__card{ padding:10px 4px 10px 2px; gap:10px; min-height:60px; }
  html .crm-sc__grip{ width:32px; min-height:44px; opacity:.55; }   /* touch-action:none déjà posé par le kit sur la poignée seule */
  html .crm-sc__cic{ width:36px; height:36px; }
  html .crm-sc__cmeta{ gap:5px; }
  html .crm-sc__cact .crm-icon{ width:44px; height:44px; }
  html .crm-sc__empty{ padding:30px 12px; }

  /* ---------- B1. Éditeur : toolbar sticky sur 2 lignes (3 en Flow avec le zoom) ---------- */
  html .crm-sc__tb{
    flex-wrap:wrap; gap:6px 4px; padding:6px 8px;
    position:sticky; top:0; z-index:5; background:var(--console-main);
  }
  html .crm-sc__tb .crm-icon{ width:44px; height:44px; }
  html .crm-sc__tb > span[style]{ flex:0 0 100% !important; height:0; order:1; }   /* l'espaceur devient un saut de ligne (style inline → !important) */
  html .crm-sc__name{ flex:1 1 0; min-width:0; max-width:none; height:40px; font-size:16px; padding:0 8px; }
  html .crm-sc__mode, html #sc-undo, html #sc-redo, html #sc-save{ order:2; }
  html .crm-sc__mode{ flex:1 1 auto; }
  html .crm-sc__mode button{ flex:1; height:34px; padding:0 10px; font-size:13px; }
  html #sc-save{ height:40px; margin-left:auto; }
  html .crm-sc__zoom{ order:3; flex:1 1 100%; justify-content:center; gap:4px; }
  html .crm-sc__zoom button{ min-height:40px; min-width:40px; }

  /* ---------- B2. Éditeur : colonne unique, le corps scrolle (canvas OU rédaction, puis inspecteur) ---------- */
  html .crm-sc__body{ flex-direction:column; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  html .crm-sc__canvas{ flex:none; height:min(46vh,400px); min-height:260px; touch-action:none; border-bottom:1px solid var(--console-line); }
  html .crm-sc__eplus{ opacity:1; }                              /* le « + » entre étapes n'apparaissait qu'au survol */
  html .crm-sc__nm2{ min-width:36px; min-height:36px; display:grid; place-items:center; }
  html .crm-sc__write{ flex:none; overflow:visible; padding:12px; }
  html .crm-sc__wcol{ max-width:none; }
  html .crm-sc__wrow{ padding:10px; gap:8px; flex-wrap:wrap; }
  html .crm-sc__wta{ font-size:16px; }
  html .crm-sc__wopt input{ font-size:16px; min-height:32px; }
  html .crm-sc__wact{ flex:0 0 100%; flex-direction:row; justify-content:flex-end; gap:4px; }   /* actions Monter/Descendre/Supprimer sous le texte, pas en colonne (ça étirait chaque étape) */
  html .crm-sc__wact button{ min-width:40px; min-height:36px; display:grid; place-items:center; }
  html .crm-sc__wact button svg{ width:15px; height:15px; }
  html .crm-sc__wadd{ width:100%; height:44px; margin:4px 0 16px; }
  html .crm-sc__insp{ width:auto; flex:none; border-left:0; border-top:1px solid var(--console-line); overflow:visible; }
  html .crm-sc__ih{ padding:12px 12px 8px; }
  html .crm-sc__ibody{ flex:none; overflow:visible; padding:0 12px calc(20px + env(safe-area-inset-bottom)); }

  /* ---------- B3. Inspecteur : champs pleine largeur, blocs empilés, cibles ≥ 36px ---------- */
  html .crm-sc__ta, html .crm-sc__nta{ font-size:16px; }
  html .crm-sc__cap{ height:40px; font-size:16px; }
  html .crm-sc__optl input{ font-size:16px; }
  html .crm-sc__blkh button{ min-width:36px; min-height:36px; display:inline-grid; place-items:center; }
  html .crm-sc__blkh button svg{ width:16px; height:16px; }
  html .crm-sc__addrow .xc-btn{ height:40px; font-size:13px; }
  html .crm-sc__tagrow .xc-btn{ height:36px; }
  html .crm-sc__tagc{ min-height:32px; }
  html .crm-sc__tagc button{ min-width:28px; min-height:28px; display:inline-grid; place-items:center; }
  html .crm-sc__otab{ min-height:36px; }
  html .crm-sc__bnr2{ flex-wrap:wrap; margin:8px 10px; }
  html .crm-sc__bnr2 button{ min-height:36px; }

  /* ---------- B4. Menus contextuels (.crm-sc__fpop) → bottom-sheet ; dialogues (.crm-sc__dlg) → plein écran ---------- */
  html .crm-sc__fpop{
    position:fixed; left:0 !important; right:0; top:auto !important; bottom:0;   /* scOpenPop pose left/top en inline */
    min-width:0; max-height:70vh; overflow-y:auto; overscroll-behavior:contain;
    border-radius:16px 16px 0 0; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  html .crm-sc__fpop button{ min-height:46px; font-size:15px; padding:0 12px; }
  html .crm-sc__fpop button svg{ width:16px; height:16px; }
  html .crm-sc__dlg{ padding:0; align-items:stretch; }
  html .crm-sc__dlg .crm-vm__pdcard{ width:100%; max-height:100%; border-radius:0; border:0; }
  html .crm-sc__dlg .crm-vm__pdfoot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  html .crm-sc__pgrid{ max-height:none; }
  html .crm-sc__dlg input[type=checkbox], html .crm-sc__dlg input[type=radio]{ width:22px; height:22px; flex:none; }   /* cases/radios natives 13px → pouce */
  html .crm-sc__dlg label{ min-height:36px; display:flex; align-items:center; gap:10px; }

  /* ---------- C. Panneau Scripts du chat (scripts2.js) : fenêtre → plein écran, nav au-dessus du détail ---------- */
  html #s2-ov .s2-win{ inset:0; border-radius:0; border:0; padding-top:env(safe-area-inset-top); }
  html .s2-hd{ padding:8px 10px; gap:10px; }
  html .s2-hd .s2-sub{ display:none; }                           /* « choisis à gauche » : plus de gauche */
  html .s2-hd .s2-x{ width:44px; height:44px; }
  html .s2-body{ flex-direction:column; }
  html .s2-nav{ width:auto; flex:none; max-height:42%; border-right:0; border-bottom:1px solid var(--console-line); }
  html .s2-navlist{ overscroll-behavior:contain; }
  html .s2-navitem{ min-height:44px; }
  html .s2-tchip{ min-height:32px; }
  html .s2-detail{ padding:14px 12px calc(14px + env(safe-area-inset-bottom)); overscroll-behavior:contain; }
  html .s2-dt-title{ font-size:16px; }
  html .s2-msg{ padding:12px; }
  html #s2-dlg{ align-items:flex-end; padding:0; }
  html .s2d-card{ width:100%; border-radius:16px 16px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  html #s2-stage{ padding:8px 10px; }

  /* ---------- D. Banque de vocaux #view-voice (voice.js) ---------- */
  html #view-voice .voc{ padding:14px 12px calc(40px + env(safe-area-inset-bottom)); max-width:none; }
  html #view-voice .voc__h{ font-size:18px; }
  html #view-voice .voc__pills{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  html #view-voice .voc-card{ padding:14px 12px; }
  html #view-voice .voc-v{ flex-wrap:wrap; gap:8px 10px; }
  html #view-voice .voc-v__nm{ min-width:0; flex:1 1 auto; }
  html #view-voice .voc-v audio{ flex:1 1 100%; width:100%; max-width:none; }
  html #view-voice .voc-v .xc-btn{ height:36px; }
  html #view-voice .voc-step{ gap:6px 10px; }
  html #view-voice .voc-step__n{ min-width:0; flex:0 0 100%; padding-top:0; }
  html #view-voice .voc-step__t{ min-width:0; flex:1 1 100%; padding-top:0; }
  html #view-voice .voc-step__a{ width:100%; justify-content:flex-start; }
  html #view-voice .voc-sel{ min-height:40px; font-size:16px; max-width:100%; }
  html #view-voice #voc-script{ width:100%; }
  html #view-voice .voc-chip{ min-height:36px; }
  html #view-voice .voc-chip button{ min-width:32px; min-height:32px; justify-content:center; }
  html #view-voice #voc-add{ width:100%; height:44px; }                  /* le bouton prend la ligne, l'aide « mp3, ogg… » passe dessous */
  html #view-voice #voc-add + .voc-empty{ display:block; margin-top:6px; }
  html .voc-toast{ bottom:calc(16px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }

  /* ---------- E. Popup vocaux du composer (#vlib-pop, voice-lib.js) → bottom-sheet ---------- */
  html #vlib-pop{
    left:0 !important; right:0; top:auto !important; bottom:0;   /* openPanel pose left/top en inline */
    width:auto; max-width:none; max-height:calc(var(--m-vvh,100dvh) - 56px);
    border-radius:16px 16px 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom); z-index:998;
  }
  html #vlib-pop .vl-h{ padding:12px 16px; }
  html #vlib-pop .vl-h .vl-x{ width:44px; height:44px; display:inline-grid; place-items:center; }
  html #vlib-pop .vl-list{ max-height:50vh; overscroll-behavior:contain; }
  html #vlib-pop .vl-it{ min-height:52px; }
  html #vlib-pop .vl-play{ width:40px; height:40px; }
  html #vlib-pop .vl-send{ min-height:36px; }
  html #vlib-pop .vl-del{ width:36px; height:36px; }
  html #vlib-pop .vl-add{ min-height:44px; }
  html #vlib-pop .vl-search{ height:44px; }
  html #vlib-pop .vl-search__in, html #vlib-pop .vl-form input{ font-size:16px; }
  html #vlib-pop .vl-form input{ height:44px; }
  html #vlib-pop .vl-frow button{ min-height:44px; }

  /* ---------- F. Player vocal en bulle (.vp, voice-player.js) : ≤ 80vw, bouton 40px ---------- */
  html .vp{ width:min(258px,80vw); max-width:80vw; gap:8px; }
  html .vp__btn{ width:40px; height:40px; }
  html .vp__wf{ height:32px; }
}

/* ---------- Paysage / grand téléphone (640–820px) : la toolbar de l'éditeur tient sur une ligne ---------- */
@media (min-width:640px) and (max-width:820px), (min-width:640px) and (max-width:1024px) and (max-height:500px){
  html .crm-sc__tb > span[style]{ flex:1 1 auto !important; height:auto; order:0; }   /* plus de saut de ligne forcé */
  html .crm-sc__name{ min-width:100px; }
  html .crm-sc__mode{ flex:none; }
  html .crm-sc__zoom{ flex:none; order:2; }
}


/* ===== 40-bot.css ===== */
/* ============================================================================
   COUCHE MOBILE — 40 BOT (#view-bot = bundle React prod/bot/bot.js + bot.css,
   + greffes botai.js (#botai-pop), canalpilot.js (#cpil-ov), stories.js (#st-botpanel)).
   Tout en CSS (le React se re-rend) ; tokens du kit uniquement ; <= 820px seulement.
   Principe : onglets scrollables, 2 colonnes -> 1 colonne, actions "au survol" visibles,
   menus/modales -> bottom-sheet ou plein écran, cibles >= 40-44px, safe-areas.
   ========================================================================== */
@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* ---------- onglets Canal / Relance / Canaux / Stories : bande scrollable ---------- */
  html #view-bot .cb-tabs{
    overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; gap:2px; padding:8px 12px;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding:12px;
    /* même rayure que .cb-tabs:after (qui défilerait avec le contenu) : posée en fond du scroller */
    background-image:linear-gradient(to right,var(--console-canvas) 0%,transparent 60%),
      repeating-linear-gradient(-56deg,color-mix(in srgb,var(--x-fg-primary) 6%,transparent) 0 1px,transparent 1px 10px);
  }
  html #view-bot .cb-tabs:after{ display:none; }
  html #view-bot .cb-tab{ flex:none; min-height:40px; padding:6px 12px; white-space:nowrap; scroll-snap-align:start; }

  /* ---------- CANAL : liste de canaux (colonne 180px) -> bande de puces en haut ---------- */
  html #view-bot .cb-canal{ display:flex; flex-direction:column; }
  html #view-bot .cb-chanlist{
    flex:none; display:flex; align-items:center; gap:6px; padding:8px 12px;
    border-right:0; border-bottom:1px solid var(--console-line);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  }
  html #view-bot .cb-plabel{ display:none; }
  html #view-bot .cb-railempty{ padding:8px 4px; white-space:nowrap; }
  html #view-bot .cb-chanrow{
    flex:none; width:auto; min-height:44px; padding:5px 12px 5px 6px; gap:8px; margin:0 !important;
    border:1px solid var(--console-line); border-radius:9999px; scroll-snap-align:start;
  }
  html #view-bot .cb-chanrow.on{ background:var(--console-chip); border-color:var(--x-border-hover); }
  html #view-bot .cb-chanrow .cb-chanco{ flex:none; max-width:44vw; }
  html #view-bot .cb-chanrow .cb-chanmt{ font-size:10.5px; }
  html #view-bot .cb-chanrow .cb-dot{ display:none; }
  html #view-bot .cb-center{ flex:1; }

  /* ---------- en-tête du canal : avatar + nom + actions (wrap sur 2 lignes) ---------- */
  html #view-bot .cb-chhead{ flex-wrap:wrap; gap:8px; padding:10px 12px; }
  html #view-bot .cb-chhead-txt{ flex:1 1 200px; }
  html #view-bot .cb-headbtn{ min-height:40px; padding:6px 12px; font-size:13px; border-radius:9px; flex:1 1 auto; justify-content:center; }
  html #view-bot .cb-headbtn[title="Rafraîchir"]{ flex:none; width:40px; padding:0; }   /* bouton icône seul (Rafraîchir) */

  /* barre de sélection multiple */
  html #view-bot .cb-selbar{ flex-wrap:wrap; gap:6px; padding:8px 12px; }
  html #view-bot .cb-seln{ flex:1 1 100%; }
  html #view-bot .cb-selact{ flex:1 1 auto; justify-content:center; min-height:40px; white-space:nowrap; font-size:13px; }

  /* ---------- fil du canal : bulles pleine largeur, actions visibles (plus de hover) ---------- */
  html #view-bot .cb-feed{ padding:12px 12px 16px; gap:14px; }
  html #view-bot .cb-post{ gap:8px; }
  html #view-bot .cb-postbody{ flex:1; min-width:0; }
  html #view-bot .cb-bubblewrap{ display:flex; flex-direction:column; flex:1; min-width:0; max-width:100%; }
  html #view-bot .cb-bubble{ max-width:100%; width:100%; }
  html #view-bot .cb-quote{ min-width:0; }
  html #view-bot .cb-quote-t{ min-width:0; }
  html #view-bot .cb-reply-ghost{ max-width:100%; }
  html #view-bot .cb-actbar{
    position:static; order:2; opacity:1; align-self:flex-end; margin-top:6px;
    box-shadow:none; border-color:var(--console-line); gap:4px; padding:2px;
  }
  html #view-bot .cb-actbar button{ width:40px; height:36px; }
  html #view-bot .cb-delbadge{ flex-wrap:wrap; }
  html #view-bot .cb-pick{ width:32px; height:32px; margin-top:4px; }
  html #view-bot .cb-bbtn{ min-height:40px; display:flex; align-items:center; justify-content:center; }
  html #view-bot .cb-empty{ padding:24px 16px; text-align:center; }

  /* ---------- composer Canal (bas de l'écran) ---------- */
  html #view-bot .cb-feedwrap > .cb-composer{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border-left:0; border-right:0; border-bottom:0; border-radius:0;
  }
  html #view-bot .cb-tgt{ min-height:36px; padding:6px 13px; font-size:13px; }
  html #view-bot .cb-schedrow{ gap:8px; }
  html #view-bot .cb-dt{ flex:1 1 100%; width:100%; min-width:0; height:44px; font-size:16px; }
  html #view-bot .cb-chipbtn{ min-height:36px; padding:6px 12px; font-size:12.5px; }
  html #view-bot .cb-appr{ flex:1 1 100%; min-height:36px; font-size:13px; }
  html #view-bot .cb-appr input{ width:20px; height:20px; flex:none; }
  html #view-bot .cb-btnrow{ flex-wrap:wrap; }
  html #view-bot .cb-btnrow input{ flex:1 1 120px; height:40px; font-size:16px; }
  html #view-bot .cb-addbtn{ min-height:36px; }
  html #view-bot .cb-mprev img, html #view-bot .cb-mprev video{ max-width:140px; max-height:110px; }
  html #view-bot .cb-mx{ width:28px; height:28px; }
  /* barre d'outils du composer : 2 lignes (mise en forme + médias) puis (Envoyer|Programmer + envoi) */
  html #view-bot .crm-composer{ padding:10px 10px 8px; }
  html #view-bot .crm-composer textarea{ font-size:16px; min-height:40px; }
  html #view-bot .crm-ctools{ flex-wrap:wrap; gap:4px; }
  html #view-bot .crm-ctools .cb-msgbar{ flex:1 1 0; min-width:0; order:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  html #view-bot .crm-ctools .cb-msgbtn{ flex:none; height:36px; min-width:36px; }
  html #view-bot .crm-ctools .crm-cbtn{ order:1; width:36px; height:36px; }
  html #view-bot .crm-ctools .crm-cbtn svg{ width:20px; height:20px; }
  html #view-bot .crm-ctools__sp{ order:9; flex:1 1 100%; height:0; }     /* saut de ligne */
  html #view-bot .crm-ctools .cb-seg{ order:10; flex:1 1 auto; }
  html #view-bot .crm-ctools .cb-seg button{ flex:1; min-height:44px; font-size:13.5px; padding:8px 10px; }
  html #view-bot .crm-ctools .crm-send{ order:11; width:44px; height:44px; border:1px solid var(--console-line); border-radius:9px; }
  html #view-bot .crm-ctools .crm-send svg{ width:18px; height:18px; }
  html #view-bot .cb-replychip{ min-height:36px; }
  html #view-bot .cb-replychip-x, html #view-bot .cb-reply-x{ padding:6px; }

  /* ---------- demandes d'adhésion ---------- */
  html #view-bot .cb-jr-top{ flex-wrap:wrap; gap:8px; padding:10px 12px; }
  html #view-bot .cb-jr-count{ flex:1 1 100%; }
  html #view-bot .cb-jr-top .cb-selact{ flex:1 1 auto; }
  html #view-bot .cb-jr-row{ padding:10px 12px; gap:10px; }
  html #view-bot .cb-jr-dt{ white-space:normal; text-align:right; max-width:76px; font-size:11.5px; margin-right:0; }
  html #view-bot .cb-jr-ok, html #view-bot .cb-jr-no{ width:40px; height:40px; }
  html #view-bot .cb-jr-bot{ padding:20px 12px; }
  html #view-bot .cb-jr-bot .cb-bc-btn{ width:100%; justify-content:center; }

  /* ---------- CANAUX (cockpit) : 1 colonne, lignes -> cartes 3 rangées ---------- */
  html #view-bot .cb-cx-inner{ padding:16px 12px calc(40px + env(safe-area-inset-bottom)); gap:14px; }
  html #view-bot .cb-cx-head h1, html #view-bot .cb-dm-title{ font-size:20px; }
  html #view-bot .cb-cx-head p{ font-size:13.5px; }
  html #view-bot .cb-cx-icon{ width:40px; height:40px; }
  html #view-bot .cb-cx-scan{ flex-wrap:wrap; padding:12px; }
  html #view-bot .cb-cx-scanlbl{ flex:1 1 200px; }
  html #view-bot .cb-cx-scan .cb-ksel-btn{ margin-left:auto; }
  html #view-bot .cb-cx-scanrow{ flex-wrap:wrap; padding:10px 12px; }
  html #view-bot .cb-cx-add{ height:36px; }
  html #view-bot .cb-cx-ano{ flex-wrap:wrap; padding:12px; }
  html #view-bot .cb-cx-anotxt{ flex:1 1 240px; }
  html #view-bot .cb-cx-ano > .cb-bc-btn, html #view-bot .cb-cx-ano > .cb-ksel-btn{ margin-left:auto; }
  html #view-bot .cb-cx-gh{ padding:10px 12px; }
  html #view-bot .cb-cx-row{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; grid-template-rows:auto auto auto;
    gap:8px; align-items:center; padding:10px 12px;
  }
  html #view-bot .cb-cx-row .cb-cx-chid{ grid-column:1 / 3; grid-row:1; }
  html #view-bot .cb-cx-row .cb-cx-del{ grid-column:3; grid-row:1; }
  html #view-bot .cb-cx-row .cb-cx-sub{ grid-column:1 / 2; grid-row:2; }
  html #view-bot .cb-cx-row .cb-cx-dm{ grid-column:2 / 4; grid-row:2; justify-self:end; }
  html #view-bot .cb-cx-row .cb-cx-dm + .cb-ksel-btn{ grid-column:1 / 2; grid-row:3; }
  html #view-bot .cb-cx-row .cb-ksel-btn + .cb-ksel-btn{ grid-column:2 / 4; grid-row:3; }
  html #view-bot .cb-cx-row .cb-ksel-btn{ max-width:none; width:100%; height:40px; }
  html #view-bot button.cb-cx-dm{ min-height:32px; }
  html #view-bot button.cb-cx-dm.on{ height:32px; }
  html #view-bot .cb-cx-del{ opacity:1; width:40px; height:40px; }           /* visible sans survol */
  html #view-bot .cb-cx-botrow{ padding:10px 12px; gap:10px; }
  html #view-bot .cb-cx-addbot{ flex-wrap:wrap; padding:12px; }
  html #view-bot .cb-cx-tokin{ flex:1 1 100%; height:44px; font-size:16px; }
  html #view-bot .cb-cx-addcancel{ min-height:40px; }
  html #view-bot .cb-cx-addtoggle{ min-height:48px; }
  html #view-bot .cb-cx-empty{ padding:16px 12px; }

  /* message d'accueil (DM) */
  html #view-bot .cb-dm-back{ min-height:40px; }
  html #view-bot .cb-dm-actions{ gap:10px; }
  html #view-bot .cb-dm-testbox{ flex:1 1 100%; }
  html #view-bot .cb-dm-testbox .cb-cx-tokin{ max-width:none; flex:1 1 0; }
  html #view-bot .cb-dm-actions .primary{ flex:1 1 100%; margin-left:0; justify-content:center; }
  html #view-bot .cb-dm-mimg{ max-width:100%; }
  html #view-bot .cb-dm-mx{ width:30px; height:30px; }

  /* ---------- RELANCE / BROADCAST ---------- */
  html #view-bot .cb-rl-inner{ padding:14px 12px calc(40px + env(safe-area-inset-bottom)); gap:14px; }
  html #view-bot .cb-rl-tabs{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  html #view-bot .cb-rl-tab{ flex:none; min-height:44px; margin-right:18px; white-space:nowrap; }
  html #view-bot .cb-rl-panel{ padding:14px; }
  html #view-bot .cb-rl-dash{ gap:12px; }
  html #view-bot .cb-rl-acctrow{ min-height:48px; padding:10px 14px; }
  html #view-bot .cb-rl-num button{ width:40px; height:40px; }
  html #view-bot .cb-rl-num input{ height:40px; font-size:16px; }
  html #view-bot .cb-rl-toggle input{ width:22px; height:22px; }
  html #view-bot .cb-rl-toggle{ min-height:40px; }
  html #view-bot .cb-rl-chip, html #view-bot .cb-rl-tag{ min-height:36px; }
  html #view-bot .cb-rl-lockbtn{ min-height:36px; }
  html #view-bot .cb-rl-preview{ max-width:100%; }
  html #view-bot .cb-bc-actions{ flex-wrap:wrap; gap:8px; }
  html #view-bot .cb-bc-btn{ min-height:44px; height:auto; white-space:nowrap; }
  html #view-bot .cb-bc-actions .cb-bc-btn{ flex:1 1 auto; justify-content:center; }
  html #view-bot .cb-bc-actions .cb-bc-btn.primary{ flex:1 1 100%; margin-left:0; }
  html #view-bot .cb-bc-row{ padding:12px; gap:10px; min-height:48px; }
  html #view-bot .cb-bc-lk{ width:auto; }
  html #view-bot .cb-composer-ta, html #view-bot .cb-rl-ta, html #view-bot .cb-bc-ta, html #view-bot .cb-rl-pwin{ font-size:16px; }
  html #view-bot .cb-composer-bar{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  html #view-bot .cb-composer-bar .cb-msgbtn{ flex:none; height:36px; min-width:36px; }
  html #view-bot .cb-rl-go{ min-height:48px; }
  html #view-bot .cb-rl-progacts{ flex-wrap:wrap; }

  /* ---------- STORIES (stories.js, panneau #st-botpanel) ---------- */
  html #st-botpanel .st-wrap{ padding:16px 12px calc(40px + env(safe-area-inset-bottom)); }
  html #st-botpanel .st-title{ font-size:18px; }
  html #st-botpanel .st-models{ gap:6px; }
  html #st-botpanel .crm-mtab{ min-height:40px; }
  html #st-botpanel .crm-tab{ height:36px; }
  html #st-botpanel .crm-gcard{ padding:12px; }
  html #st-botpanel .crm-vm__grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
  html #st-botpanel .st-rm{ width:32px; height:32px; }
  html #st-botpanel #st-postnow{ min-height:44px; }

  /* ---------- dialogues React (.cb-dlg) -> bottom-sheet ---------- */
  html .cb-dlg{ align-items:flex-end; padding:0; }
  html .cb-dlgcard{
    max-width:none; border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    max-height:calc(var(--m-vvh,100dvh) - 40px); overflow-y:auto; overscroll-behavior:contain;
  }
  html .cb-dlgact{ flex-wrap:wrap; }
  html .cb-dlgact .cb-btn{ flex:1 1 auto; min-height:44px; }
  html .cb-btn{ min-height:44px; }
  html .cb-rp-row{ min-height:44px; }
  html .cb-rp-row input{ width:20px; height:20px; }
  html .cb-whenchips .cb-chipbtn{ min-height:36px; }
  html #view-bot .cb-when .cb-dt{ flex:none; width:100%; height:44px; font-size:16px; }   /* flex:none : en colonne, flex-basis écraserait la hauteur */

  /* menu déroulant (sélecteur bot / créatrice, positionné en inline style) -> bottom-sheet */
  html .cb-ksel-menu{
    top:auto !important; left:0 !important; right:0; bottom:0; min-width:0 !important; width:100%;
    border-radius:14px 14px 0 0; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    max-height:min(60vh,420px); overscroll-behavior:contain;
  }
  html .cb-ksel-item{ min-height:46px; font-size:15px; padding:8px 12px; }

  /* toasts : au-dessus de la safe-area, pleine largeur dispo */
  html .cb-toasts{ bottom:calc(20px + env(safe-area-inset-bottom)); left:12px; right:12px; transform:none; }
  html .cb-toast{ max-width:100%; }

  /* ---------- botai.js : popover "Post IA" -> bottom-sheet ---------- */
  html #botai-pop{
    top:auto !important; left:0 !important; right:0; bottom:0; width:100%; max-width:none;
    border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    max-height:calc(var(--m-vvh,100dvh) - 40px); overflow-y:auto; overscroll-behavior:contain;
  }
  html.m-kbd #botai-pop{ top:var(--m-vvtop,0) !important; bottom:auto; max-height:var(--m-vvh,100dvh); }   /* clavier ouvert : ancré au haut du viewport visuel */
  html #botai-pop textarea{ font-size:16px; min-height:64px; }
  html #botai-pop .bp-chip{ min-height:36px; display:inline-flex; align-items:center; }
  html #botai-pop .bp-x{ width:40px; height:40px; }
  html #botai-pop .bp-foot{ flex-wrap:wrap; }
  html #botai-pop .bp-foot .xc-btn{ min-height:40px; }

  /* ---------- canalpilot.js : modale "Pilote Canal IA" -> plein écran ---------- */
  html #cpil-ov{ padding:0; align-items:stretch; }
  html #cpil-ov .cpil-card{ max-width:none; max-height:none; height:100%; border-radius:0; border:0; }
  html #cpil-ov .cpil-head{ padding-top:calc(12px + env(safe-area-inset-top)); }
  html #cpil-ov .cpil-x{ width:40px; height:40px; }
  html #cpil-ov .cpil-body{ flex:1; min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  html #cpil-ov .cpil-row.two{ grid-template-columns:1fr 1fr; }
  html #cpil-ov .cpil-row.two > div:last-child{ grid-column:1 / -1; }
  html #cpil-ov select, html #cpil-ov input{ height:44px; font-size:16px; }
  html #cpil-ov .cpil-txt{ font-size:16px; }
  html #cpil-ov .cpil-actions{ flex-wrap:wrap; }
  html #cpil-ov .cpil-foot{ flex-wrap:wrap; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  html #cpil-ov .xc-btn{ min-height:40px; }
}

/* ---------- paysage téléphone (hauteur courte) : tout plus compact, le composer Canal devient scrollable
   pour laisser de la place au fil ---------- */
@media (max-width:1024px) and (max-height:480px){
  html #view-bot .cb-tabs{ padding:4px 12px; }
  html #view-bot .cb-tab{ min-height:36px; }
  html #view-bot .cb-chanlist{ padding:4px 12px; }
  html #view-bot .cb-chanrow{ min-height:36px; padding:3px 10px 3px 4px; }
  html #view-bot .cb-chanrow .cb-chanmt{ display:none; }
  html #view-bot .cb-chhead{ padding:6px 12px; }
  html #view-bot .cb-headbtn{ flex:0 1 auto; min-height:36px; }
  html #view-bot .cb-feedwrap > .cb-composer{ max-height:50vh; overflow-y:auto; overscroll-behavior:contain; padding-top:6px; }
  html #view-bot .cb-targets{ margin-bottom:6px; }
  html #view-bot .cb-schedrow{ margin-bottom:6px; }
  html #view-bot .cb-dt{ flex:1 1 240px; height:40px; }
  html #view-bot .cb-appr{ flex:1 1 auto; }
}


/* ===== 50-business.css ===== */
/* ============================================================================
   COUCHE MOBILE — 50 Business (+ Paie injectée par paie.js, + Canaux)
   Vue #view-business : barre d'onglets .biz__tabbar, hero KPIs/graphe, récap, liens ; #pae-sec = onglet Paie.
   Tokens du kit uniquement (--console-*, --x-*, --xc-*). Aucune couleur/ombre/radius inventé.
   ========================================================================== */
@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* --- conteneur : plus de positionnement absolu à 46px, on empile (tabbar auto-hauteur + scroller) --- */
  html #view-business.show{ display:flex; flex-direction:column; }
  html #view-business .biz,
  html #view-business #pae-sec{
    position:static; flex:1; min-height:0; overflow-y:auto;
    padding:14px 14px calc(40px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }

  /* --- barre d'onglets : 2 lignes max (onglets scrollables / période + rafraîchir) --- */
  html .biz__tabbar{
    position:static; height:auto; flex-wrap:wrap; gap:0 8px; padding:0 8px 10px;
    z-index:auto;   /* flex item + z-index:3 = contexte d'empilement → le calendrier (z 900) passerait SOUS la ligne/étiquettes du graphe (z 3/4) */
  }
  html .biz__tabs{ width:100%; order:1; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  html .biz__tabs button{ height:46px; padding:0 12px; scroll-snap-align:start; }
  html .biz__tabctrl{ width:100%; order:2; gap:8px; }
  html .biz__dr{ flex:1; min-width:0; }
  html .biz__drbtn{ width:100%; height:44px; justify-content:flex-start; padding:0 14px; }
  html .biz__drbtn #biz-drtxt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  html .biz__refresh{ height:44px; min-height:44px; padding:0 14px; flex:none; }

  /* --- calendrier de période = bottom-sheet ancré en bas (plus de popover flottant) --- */
  html .biz__cal{
    position:fixed; top:auto; left:0; right:0; bottom:0; z-index:900;
    flex-direction:column; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0;
    max-height:calc(var(--m-vvh,100dvh) - 56px); overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom);
  }
  html .biz__cal[hidden]{ display:none; }
  /* voile derrière la feuille (même valeur que .m-backdrop de la coque) — un tap dessus ferme (50-business.js) */
  html .biz__cal::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:-1; }
  html .biz__calside{
    flex-direction:row; gap:6px; padding:12px 12px 10px; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-right:0; border-bottom:1px solid var(--console-line);
  }
  html .biz__preset{ flex:none; min-height:44px; padding:0 14px; border:1px solid var(--console-line); background:var(--console-surface); }
  html .biz__preset--on{ background:var(--console-chip); border-color:transparent; }
  html .biz__calcals{ padding:14px 14px 16px; }
  html .biz__calnav{ top:14px; left:14px; right:14px; }
  html .biz__calarr{ width:44px; height:44px; opacity:1; }
  html .biz__calmonths{ gap:0; justify-content:center; }
  html .biz__cmonth{ width:100%; }
  html .biz__cmhead{ height:44px; line-height:44px; margin-bottom:4px; font-size:15px; }
  html .biz__cgrid{ grid-template-columns:repeat(7,1fr); }
  html .biz__cwd{ height:28px; font-size:12px; }
  html .biz__cday{ width:100%; height:44px; font-size:15px; }
  html .biz__cday--start{ border-radius:10px 0 0 10px; }
  html .biz__cday--end{ border-radius:0 10px 10px 0; }
  html .biz__cday--start.biz__cday--end{ border-radius:10px; }

  /* --- hero : KPIs 2 colonnes + graphe (barres en %, SVG viewBox → déjà fluide) --- */
  html .biz__herokpis.xc-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  html .biz__herokpis .xc-stat{ padding:14px 14px; }
  html .biz__herokpis .xc-stat__value{ font-size:22px; }
  html .biz__herochart{ padding:16px 12px 12px; }
  html .biz__hero .biz__bars{ height:170px; }
  html .biz__avglbl{ font-size:10px; padding:1px 6px; }
  html .biz__avg--left .biz__avglbl{ top:2px; }          /* étiquettes moy. CA/arrivées : l'une au-dessus, l'autre sous la ligne → plus de chevauchement */
  html .biz__axislbl{ font-size:10px; }
  html .biz__legend{ gap:6px 14px; margin-top:12px; }
  html .biz__tip{ min-width:130px; padding:8px 10px 9px; }

  /* --- cartes (récap du jour, liens) --- */
  html .biz__card{ padding:14px 14px; margin-bottom:12px; }
  html .biz__card-h{ flex-wrap:wrap; gap:4px 8px; }
  html .biz__foldh{ min-height:44px; margin:-8px 0; }
  html .biz__rcpgrid{ grid-template-columns:1fr; gap:14px; }
  html .biz__rcpn{ min-width:60px; }

  /* --- tableau « Par lien de tracking » : 6 colonnes → scroll horizontal interne, 1re colonne épinglée --- */
  html #biz-table > div{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  html .biz__tbl{ min-width:560px; }
  html .biz__tbl th:first-child,
  html .biz__tbl td:first-child{ position:sticky; left:0; background:var(--console-surface); z-index:1; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
  html .biz__tbl tr.biz__direct td:first-child{ position:static; max-width:none; }   /* colspan=4 : défile avec la ligne */
  html .biz__tbl tbody tr:hover td{ background:transparent; }
  html .biz__tbl tbody tr:hover td:first-child{ background:var(--console-surface); }
  html .biz__tbl td{ padding:12px 10px; }

  /* --- onglet Canaux : comptes + canaux, boutons 44px, résultat du scan sur sa propre ligne --- */
  html .biz__acch{ padding:10px 12px; min-height:56px; }
  html .biz__accbtn.xc-btn--sm{ min-height:44px; }
  html .biz__chan{ flex-wrap:wrap; gap:8px 10px; padding:10px 12px; }
  html .biz__chann{ flex:1 1 40%; }
  html .biz__chanp{ min-width:0; }
  html .biz__scan.xc-btn--sm{ min-height:44px; padding:0 14px; }
  html .biz__scanres{ flex:1 1 100%; min-width:0; }
  html .biz__empty{ padding:28px 14px; }

  /* ====================== Paie (paie.js → #pae-sec, préfixes pr-/pk-/pae-) ====================== */
  html #pae-sec .pr-head{ gap:10px; margin-bottom:14px; }
  html #pae-sec .pr-title h1{ font-size:22px; }
  html #pae-sec .pr-toggle{ width:100%; }
  html #pae-sec .pr-toggle button{ flex:1; min-height:44px; padding:0 12px; }

  /* barre de dates : déclencheur pleine largeur + boutons à droite passent dessous */
  html #pae-sec .pr-monthbar{ gap:8px; }
  html #pae-sec .pr-dtwrap{ flex:1 1 100%; position:static; }
  html #pae-sec .pr-dtrig{ width:100%; height:44px; }
  html #pae-sec .pr-dtlbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  html #pae-sec .pr-sp{ display:none; }
  html #pae-sec .pr-monthbar > .xc-btn{ flex:1; min-height:44px; }

  /* date-picker Paie = bottom-sheet (même traitement que .biz__cal) */
  html #pae-sec .pr-pop{
    position:fixed; top:auto; left:0; right:0; bottom:0; z-index:900;
    flex-direction:column; border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0;
    max-height:calc(var(--m-vvh,100dvh) - 56px); overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom);
  }
  html #pae-sec .pr-pop::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:-1; }
  html #pae-sec .pr-presets{ flex-direction:row; gap:6px; padding:12px 12px 10px; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-right:0; border-bottom:1px solid var(--console-line-faint); }
  html #pae-sec .pr-preset{ flex:none; min-height:44px; padding:0 14px; border:1px solid var(--console-line); border-radius:9999px; }
  html #pae-sec .pr-preset.on{ background:var(--console-chip); border-color:transparent; }
  html #pae-sec .pr-cal{ padding:12px 14px 16px; }
  html #pae-sec .pr-cnav{ width:44px; height:44px; }
  html #pae-sec .pr-cmonths{ gap:0; }
  html #pae-sec .pr-cmonth{ width:100%; }
  html #pae-sec .pr-cmonth:last-child{ display:none; }   /* 1 seul mois (paie.js le fait déjà ≤640, on couvre jusqu'à 820) */
  html #pae-sec .pr-cmhdr{ font-size:15px; }
  html #pae-sec .pr-cempty, html #pae-sec .pr-cday{ height:44px; }
  html #pae-sec .pr-cday{ font-size:15px; }

  /* landing : cartes modèles 1 colonne, stats 2x2 */
  html #pae-sec .pr-mlgrid{ grid-template-columns:1fr; }
  html #pae-sec .pr-mlcard{ padding:14px; }
  html #pae-sec .pr-mlcard:hover{ transform:none; }
  html #pae-sec .pr-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  html #pae-sec .pr-stat{ min-width:0; padding:10px 12px; }
  html #pae-sec .pk-lnk{ min-height:44px; display:inline-flex; align-items:center; }

  /* vue modèle : la grille 4 colonnes (530px mini) devient une fiche par chatteur
     nom + taux + CA à gauche, montant + bouton Payer à droite ; l'en-tête de colonnes disparaît */
  html #pae-sec .pr-th.pr-mth{ display:none; }
  html #pae-sec .pr-mchr{
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; gap:4px 12px; padding:12px 14px;
  }
  html #pae-sec .pr-mchr .pr-who2{ grid-column:1; grid-row:1; }
  html #pae-sec .pr-mchr .pr-mn{ grid-column:1; grid-row:2; }
  html #pae-sec .pr-mchr .r.ca{ grid-column:1; grid-row:3; text-align:left; }
  html #pae-sec .pr-mchr .r.ca::before{ content:"CA "; color:var(--x-fg-tertiary); font-size:12px; }
  html #pae-sec .pr-mchr .pr-paycell{ grid-column:2; grid-row:1 / 4; align-self:center; }
  html #pae-sec .pr-paycell .xc-btn--sm{ min-height:40px; padding:0 14px; }
  html #pae-sec .pr-paidok{ min-height:40px; }
  html #pae-sec .pr-rateb{ min-height:32px; display:inline-flex; align-items:center; }
  html #pae-sec .pr-pocket{ padding:14px; }
  html #pae-sec .pr-pockrow .amt{ min-width:0; }

  /* réglages : 1 colonne (déjà ≤900 côté paie.js), barre Enregistrer collante au-dessus de la safe-area */
  html #pae-sec .pr-setgrid{ grid-template-columns:1fr; }
  html #pae-sec .pr-peropts{ grid-template-columns:1fr; }
  html #pae-sec .pr-peropt{ min-height:44px; }
  html #pae-sec .pr-raterow, html #pae-sec .pr-feerow{ flex-wrap:wrap; }
  html #pae-sec .pr-rn, html #pae-sec .pr-fn{ flex:1 1 120px; min-width:0; }
  html #pae-sec .pae-stk .xc-input{ height:40px; min-width:64px; }
  html #pae-sec .pr-savebar{
    flex-wrap:wrap; gap:8px; margin:16px -14px 0; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--console-canvas); border-top:1px solid var(--console-line);
  }
  html #pae-sec .pr-savebar .xc-btn{ width:100%; min-height:44px; }

  /* fenêtres Taux / Bonus-Malus (.pk-wov) → feuille ancrée en bas, boutons empilés pleine largeur */
  html #pae-sec .pk-wov{ align-items:flex-end; padding:0; z-index:900; }
  html #pae-sec .pk-wcard{
    max-width:none; max-height:calc(var(--m-vvh,100dvh) - 40px);
    border-radius:var(--xc-radius-panel) var(--xc-radius-panel) 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  html #pae-sec .pk-whead{ padding:14px 16px; }
  html #pae-sec .pk-wx{ width:44px; height:44px; padding:0; margin-right:-10px; }
  html #pae-sec .pk-wbody{ padding:16px; }
  html #pae-sec .pk-wfoot{ flex-direction:column; align-items:stretch; gap:8px; padding:12px 16px; }
  html #pae-sec .pk-wfoot .sp{ display:none; }
  html #pae-sec .pk-wfoot .xc-btn{ width:100%; min-height:44px; }
  html #pae-sec .pae-modetog button{ min-height:40px; }

  /* toast au-dessus de la safe-area, jamais plus large que l'écran */
  html .pae-toast{ bottom:calc(22px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); }
}

/* --- paysage (≤ 820 px de large, peu de hauteur) : la barre d'onglets reprend une seule ligne --- */
@media (max-width:1024px) and (max-height:500px) and (orientation:landscape){
  html .biz__tabbar{ flex-wrap:nowrap; padding:0 8px; gap:8px; }
  html .biz__tabs{ width:auto; flex:1; }
  html .biz__tabctrl{ width:auto; flex:none; }
  html .biz__dr{ flex:none; }
  html .biz__drbtn{ width:auto; max-width:46vw; }
  html .biz__cal, html #pae-sec .pr-pop{ max-height:calc(var(--m-vvh,100dvh) - 8px); }
  html .biz__hero .biz__bars{ height:140px; }
}


/* ===== 60-gestion-param-login.css ===== */
/* ============================================================================
   COUCHE MOBILE — 60 Équipe (#view-gestion + employee/planning/wizard/casino),
   Paramètres (#view-parametres + settings.js), porte de login (#login-gate), tiroir (agence + user).
   Tout en @media (max-width:820px), sélecteurs préfixés « html » pour battre les <style> injectés.
   Tokens = kit X-console uniquement. !important = seulement contre un style inline.
   ========================================================================== */
@media (max-width:820px), (max-width:1024px) and (max-height:500px){

  /* ------------------------------------------------------------------ */
  /* A. ÉQUIPE — conteneur + barre d'onglets (.pl-tabs de planning.js)    */
  /* ------------------------------------------------------------------ */
  html #view-gestion{ overflow-x:hidden; overflow-y:auto; }
  html .crm-gest{ max-width:none; padding:10px 12px calc(40px + env(safe-area-inset-bottom)); }
  html #view-gestion .pl-tabs{
    flex-wrap:wrap; gap:4px 8px; padding:0 2px 8px; margin:0 0 10px;
  }
  html #view-gestion .pl-tabs::after{ content:""; flex-basis:100%; order:5; height:0; }   /* saut de ligne : onglets / actions */
  html #view-gestion .pl-tab{ order:0; min-height:44px; padding:12px 10px; font-size:14px; }
  /* boutons d'action posés dans la barre (Nouvelle modèle / Nouvel employé / Voir toutes les agences) */
  html #view-gestion .pl-tabs .xc-btn{
    order:10; margin:0; flex:1 1 auto; min-width:calc(50% - 4px); height:40px; font-size:13px; padding:0 12px;
  }

  /* ---- page native « Agences & équipe » (vue « toutes les agences ») ---- */
  html .crm-gest__bar{ flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  html .crm-gest__h{ flex:1 1 100%; font-size:17px; }
  html .crm-gest__new{ flex:1 1 auto; min-height:44px; }
  html .crm-gest__grid{ grid-template-columns:1fr; gap:12px; }
  html .crm-gcard{ padding:12px; }
  html .crm-gcard__name{ font-size:16px; min-height:40px; }
  html .crm-gcard__del{ width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
  html .crm-gcard__cr{ flex-wrap:wrap; gap:8px 10px; padding:8px 2px; }
  html .crm-gcard__cr + .crm-gcard__cr{ border-top:1px solid var(--console-line-faint); }
  html .crm-gcard__cr-av{ width:32px; height:32px; }
  html .crm-gcard__cr-n{ font-size:14.5px; }
  html .crm-gcard__cr-move{ flex:1 1 100%; max-width:none; width:100%; height:44px; font-size:16px; padding:0 12px; }
  html .crm-gcard__mem{ min-height:40px; font-size:13.5px; }
  html .crm-gcard__newactions .crm-gb{ flex:1; min-height:44px; }

  /* ---- panneau « Mon équipe » (employee.js) ---- */
  html #empt-root{ padding:4px 0 0; }
  html #empt-root .empt-bar{ flex-wrap:wrap; gap:8px 10px; }
  html #empt-root .empt-mods{ grid-template-columns:1fr; gap:10px; }
  html #empt-root .empt-row{ flex-wrap:wrap; gap:10px 12px; padding:12px; }
  html #empt-root .empt-acts{ flex:1 1 100%; gap:8px; }
  html #empt-root .empt-acts .xc-btn{ flex:1; height:40px; font-size:13px; }
  html #empt-root .empt-chip{ padding:5px 11px; font-size:12.5px; }

  /* ------------------------------------------------------------------ */
  /* A2. PLANNING (planning.js) — grille hebdo : scroll horizontal interne */
  /*     + 1re colonne (chatteur) sticky ; champs heure 44 px              */
  /* ------------------------------------------------------------------ */
  html #pl-panel .pl-wrap{ padding:0 0 8px; }
  html #pl-panel .pl-top{ gap:10px; }
  html #pl-panel .pl-save{ flex:1 1 100%; }
  html #pl-panel .pl-save .xc-btn{ flex:1; height:44px; font-size:14px; }
  html #pl-panel .pl-card{ padding:10px 12px; margin-bottom:12px; }
  html #pl-panel .pl-tblwrap{
    margin:0 -12px; padding:0 12px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  html #pl-panel table.pl-grid{ min-width:0; width:max-content; }
  html #pl-panel .pl-grid th, html #pl-panel .pl-grid td{ padding:8px 8px; }
  html #pl-panel .pl-grid td.pl-name, html #pl-panel .pl-grid th.pl-name{
    min-width:104px; max-width:124px; left:0; z-index:2;
    box-shadow:1px 0 0 var(--console-line);
  }
  html #pl-panel .pl-nm{ max-width:64px; }
  html #pl-panel .pl-cell{ min-width:104px; }
  html #pl-panel .pl-repos{ min-height:44px; font-size:14px; }
  html #pl-panel .pl-repos input{ width:20px; height:20px; }
  html #pl-panel .pl-hrs{ flex-direction:column; align-items:stretch; gap:6px; margin-top:2px; }
  html #pl-panel .pl-hrs span{ display:none; }                        /* le tiret entre les 2 heures : inutile en colonne */
  html #pl-panel input[type=time]{ width:100%; height:44px; font-size:16px; padding:0 8px; }
  html #pl-panel select.pl-tz{ height:44px; font-size:16px; flex:1; min-width:0; }
  html #pl-panel input[type=checkbox]{ width:20px; height:20px; }

  /* ------------------------------------------------------------------ */
  /* A3. CASINOS (casino.js) — formulaire en colonne, champs 44 px        */
  /* ------------------------------------------------------------------ */
  html #casino-panel .cas-top{ gap:10px; }
  html #casino-panel .cas-top .xc-btn{ flex:1 1 100%; height:44px; font-size:14px; }
  html #casino-panel .cas-grid{ grid-template-columns:1fr; }
  html #casino-panel .cas-form{ padding:12px; }
  html #casino-panel .cas-fg{ grid-template-columns:1fr; gap:10px; }
  html #casino-panel .cas-f input, html #casino-panel .cas-f select{ height:44px; font-size:16px; }
  html #casino-panel .cas-formacts{ flex-wrap:wrap; gap:8px; }
  html #casino-panel .cas-formacts .xc-btn{ flex:1 1 calc(50% - 4px); height:44px; font-size:14px; }
  html #casino-panel .cas-formacts .cas-msg{ flex:1 1 100%; }
  html #casino-panel .cas-acts .xc-btn{ flex:1 1 auto; height:40px; }

  /* ------------------------------------------------------------------ */
  /* A4. MODALES → PLEIN ÉCRAN : « Nouvel employé » (#emp-ov) et assistant */
  /*     « Nouvelle modèle » (#cwiz-ov). Corps scrollable, pied ancré en   */
  /*     bas (safe-area), hauteur = viewport visuel (suit le clavier).     */
  /*     z-index : on garde ceux des scripts (9000) — ces modales doivent  */
  /*     couvrir l'appbar et le tiroir.                                    */
  /* ------------------------------------------------------------------ */
  html #emp-ov, html #cwiz-ov{
    padding:0; align-items:stretch; justify-content:stretch;
    top:var(--m-vvtop,0); bottom:auto; height:var(--m-vvh,100dvh); background:var(--console-canvas);
  }
  html #emp-ov .emp-card, html #cwiz-ov .cw-card{
    max-width:none; max-height:none; height:100%; width:100%;
    border:0; border-radius:0; background:var(--console-main);
  }
  html #emp-ov .emp-head, html #cwiz-ov .cw-head{
    padding:calc(env(safe-area-inset-top) + 6px) 8px 6px 16px; min-height:56px; gap:8px;
  }
  html #emp-ov .emp-title, html #cwiz-ov .cw-title{ font-size:16px; }
  html #cwiz-ov .cw-step{ flex:none; max-width:40vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html #emp-ov .emp-x, html #cwiz-ov .cw-x{
    width:44px; height:44px; padding:0; display:inline-grid; place-items:center; font-size:22px; flex:none;
    border-radius:var(--xc-radius-control);
  }
  html #emp-ov .emp-x:active, html #cwiz-ov .cw-x:active{ background:var(--console-wash); }
  html #emp-ov .emp-body, html #cwiz-ov .cw-body{
    flex:1; min-height:0; padding:14px 16px 20px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  html #emp-ov .emp-f.two, html #cwiz-ov .cwf.two{ grid-template-columns:1fr; gap:12px; }
  html #emp-ov input, html #emp-ov select, html #cwiz-ov input, html #cwiz-ov select{ height:46px; font-size:16px; padding:0 12px; }
  html #emp-ov input[type=file], html #cwiz-ov input[type=file]{ padding:10px 12px; height:auto; }
  html #emp-ov .emp-mods{ max-height:none; gap:8px; }
  html #emp-ov .emp-mod{ min-height:40px; padding:6px 12px; font-size:14px; }
  html #emp-ov .emp-mod input{ width:20px; height:20px; }
  html #emp-ov .emp-foot, html #cwiz-ov .cw-foot{
    flex-wrap:wrap; gap:8px 10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--console-main);
  }
  html #emp-ov .emp-foot .sp, html #cwiz-ov .cw-foot .sp{ display:none; }
  html #emp-ov .emp-msg{ flex:1 1 100%; min-height:0; }
  html #emp-ov .emp-msg:empty{ display:none; }
  html #emp-ov .emp-foot .xc-btn, html #cwiz-ov .cw-foot .xc-btn{ height:46px; font-size:14.5px; flex:1 1 auto; }
  html #emp-ov #emp-create, html #cwiz-ov #cw-next{ flex:2 1 auto; }
  html #cwiz-ov .cw-dots{ padding:10px 16px 0; }
  html #cwiz-ov .cw-recap li{ min-height:44px; }

  /* ------------------------------------------------------------------ */
  /* B. PARAMÈTRES (#view-parametres .par + settings.js)                  */
  /* ------------------------------------------------------------------ */
  html .par{ max-width:none; padding:16px 12px calc(24px + env(safe-area-inset-bottom)); }
  html .par__h1{ font-size:20px; }
  html .par__note{ padding:12px; }
  html .par__card{ margin-bottom:14px; }
  html .par__ch{ padding:12px 12px 8px; flex-wrap:wrap; gap:6px; }
  html .par__row{ grid-template-columns:1fr; gap:10px; padding:12px; }
  html .par__row:hover{ background:none; }                    /* pas de hover-only au toucher */
  html .par__nm{ max-width:none; }
  html .par__seg{ width:100%; }
  html .par__seg button{ flex:1; min-height:40px; font-size:13.5px; padding:6px 8px; }
  html .par__right{ justify-self:stretch; width:100%; flex-wrap:wrap; gap:8px; }
  html .par__sel{ flex:1 1 auto; min-width:0; }
  html .par__sel select{ width:100%; height:44px; font-size:16px; }
  html .par__xtbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  html .par__xtbl thead, html .par__xtbl tbody, html .par__xtbl tr{ display:table; width:100%; table-layout:auto; }
  html .par__xtbl th, html .par__xtbl td{ padding:10px 12px; white-space:nowrap; }
  html .par__x{ width:44px; height:44px; align-items:center; justify-content:center; margin-left:0; }
  html .par__add{ margin:8px 12px 10px; min-height:44px; width:calc(100% - 24px); justify-content:center; }
  html .par__addrow{ padding:4px 12px 12px; }
  html .par__addrow .par__sel{ flex:1 1 100%; }
  html .par__addrow .par__btn{ flex:1 1 100%; }
  html .par__btn{ min-height:44px; padding:10px 16px; }
  html .par__savebar{
    gap:8px; padding:12px 12px calc(8px + env(safe-area-inset-bottom)); margin:6px -12px 0;
  }
  html .par__savebar .par__btn{ flex:1; }
  html .par__notifrow{ padding:12px; gap:10px; }
  html .par__notifbtns{ flex:1 1 100%; flex-wrap:wrap; }
  html .par__notifbtns .par__btn{ flex:1 1 auto; }
  html #view-parametres .xc-btn--sm{ height:40px; font-size:13px; }      /* boutons compacts injectés (vitrine…) : 40 px au toucher */

  /* ------------------------------------------------------------------ */
  /* C. PORTE DE LOGIN (#login-gate) — carte ≤ 92vw, champs 48 px,        */
  /*    safe-areas ; scrollable et à la hauteur du viewport visuel         */
  /*    (clavier) ; le GIF injecté par planning.js s'efface au clavier.    */
  /* ------------------------------------------------------------------ */
  html #login-gate{
    height:var(--m-vvh,100dvh); top:var(--m-vvtop,0); bottom:auto;
    padding:calc(env(safe-area-inset-top) + 16px) 4vw calc(env(safe-area-inset-bottom) + 20px) !important;   /* bat le paddingTop inline de planning.js */
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    align-items:center;
  }
  html #login-gate .lg-card{
    width:92vw; max-width:400px; transform:none !important;   /* bat le scale(1.18) inline de planning.js */
    padding:22px 18px; gap:12px; flex:none;
  }
  html #login-gate .lg-card h1{ font-size:20px; }
  html #login-gate .lg-card label{ font-size:13px; display:block; margin-bottom:6px; }
  html #login-gate .lg-in{ height:48px; font-size:16px; padding:0 14px; }
  html #login-gate .lg-btn{ height:48px; width:100%; font-size:16px; margin-top:6px; }
  html #login-gate .lg-err:empty{ display:none; }
  html #pl-login-gif{ flex:none; max-width:100%; }
  html #pl-login-gif > div{ max-width:100%; }
  html.m-kbd #pl-login-gif{ display:none; }                 /* clavier ouvert : la carte reste visible */
  @media (max-height:560px){ html #pl-login-gif{ display:none; } }   /* paysage : pas la place pour le GIF */

  /* ------------------------------------------------------------------ */
  /* D. TIROIR — sélecteur d'agence (.crm-model-wrap) + utilisateur        */
  /* ------------------------------------------------------------------ */
  html .crm-model-wrap{ padding:10px 10px 8px; }
  html .crm-model{ min-height:56px; padding:8px 10px; }   /* agence statique (pas de menu) : chevron reste masqué comme sur desktop */
  html .crm-model-menu{ left:8px; right:8px; max-height:min(60vh, calc(var(--m-vvh,100dvh) - 120px)); overflow-y:auto; overscroll-behavior:contain; }
  html .crm-model-item{ min-height:46px; padding:8px 10px; font-size:15px; }
  html .crm-model-item__av{ width:32px; height:32px; }
  html .xc-side__user{ margin:0 8px 6px; padding-top:6px; gap:4px; }
  html .xc-side__acct{ height:44px; padding:0 10px; gap:10px; }
  html .xc-side__acct .xc-avatar{ width:24px; height:24px; font-size:11px; }
  html .xc-side__user-name{ font-size:14px; }
  html .xc-side__user .xc-side__logout{ width:44px; height:44px; }
  html .xc-side__user .xc-side__logout svg{ width:17px; height:17px; }
}