/* ═══════════════════════════════════════════════════════════════
   pwai-mobile.css — Mobile shell pour configurateur.html
   ───────────────────────────────────────────────────────────────
   Activé par body.is-mobile (posé par pwai-mobile.js).
   Layout :
     • TOP BAR (44px) : favicon + back / undo / redo / vues / save / FAB
     • 3D viewport plein écran
     • ZONES BAR (56px) : zones du produit (mobileZoneBar)
     • CATÉGORIES (48px) : Designs / Couleurs / Motifs / Élements / IA / Calques
     • BOTTOM SHEET   : aside.pnl, ouvert via tap catégorie, 3 modes
                        (m-open 45vh, m-tall 75vh, m-max ≈ pleine hauteur)
     • JOYSTICK       : floating bottom-right pour rotation 3D
   ═══════════════════════════════════════════════════════════════ */

/* Containers cachés par défaut — affichés seulement quand body.is-mobile */
#mTopActions, #mTabbar, #mSheetBackdrop { display: none; }

body.is-mobile { overflow: hidden; }

/* ── TOP BAR ──────────────────────────────────────────────── */
body.is-mobile header.hd, body.is-mobile #hd {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile header.hd::-webkit-scrollbar,
body.is-mobile #hd::-webkit-scrollbar { display: none; }

body.is-mobile header.hd > *:not(.logo):not(#mTopActions),
body.is-mobile #hd > *:not(.logo):not(#mTopActions) { display: none !important; }

body.is-mobile header.hd .logo,
body.is-mobile #hd .logo {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  font-size: 0 !important;
  flex-shrink: 0;
  margin: 0 4px 0 0 !important;
}
body.is-mobile header.hd .logo .lsq,
body.is-mobile #hd .logo .lsq {
  display: grid !important;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--ac);
  place-items: center;
}
body.is-mobile header.hd .logo .lsq svg,
body.is-mobile #hd .logo .lsq svg {
  width: 14px; height: 14px; fill: #fff;
}

body.is-mobile #mTopActions {
  display: flex !important;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
body.is-mobile #mTopActions .sep {
  width: 1px; height: 22px;
  background: rgba(0,0,0,.10);
  margin: 0 2px;
  flex-shrink: 0;
}
body.is-mobile #mTopActions button,
body.is-mobile #mTopActions a {
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
}
body.is-mobile #mTopActions button:active,
body.is-mobile #mTopActions a:active { background: rgba(0,0,0,.06); transform: scale(.96); }
body.is-mobile #mTopActions button.on { background: var(--ac); color: #fff; }
body.is-mobile #mTopActions button svg,
body.is-mobile #mTopActions a svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ── FAB "Ajouter au panier" — visible mais POSÉ SOUS les fenêtres
   d'onglets : son z-index est inférieur à celui du sheet (50) et du
   backdrop (49), donc le panel le recouvre simplement quand on
   ouvre un onglet. Pas de fade/transform au m-sheet-open. ── */
#mCartFab { display: none; }
body.is-mobile #mCartFab {
  /* Remplacé par le FAB Commander de pwai-configurator-cta.js
     → on cache mCartFab pour éviter le doublon. */
  display: none !important;
}

/* ── 3D viewport ──────────────────────────────────────────── */
/* Mobile : canvas réduit de ~10vh, sheets bénéficient de l'espace.
   #cv3d translaté vers le haut pour aligner le maillot en haut. */
body.is-mobile #vw {
  position: fixed !important;
  top: 44px; left: 0; right: 0;
  /* Canvas occupe TOUT l'espace entre header et bottom bars (138px).
     Le sheet vient en OVERLAY au-dessus si ouvert, le canvas ne
     se rétrécit PAS. */
  bottom: 138px;
  width: 100% !important; height: auto !important;
  z-index: 1;
}

/* ── BARRE ZONES (au-dessus des catégories) ── */
body.is-mobile #mobileZoneBar {
  display: flex !important;
  position: fixed !important;
  bottom: 42px !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  height: 40px !important;
  padding: 4px 8px !important;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0,0,0,.06);
  z-index: 40;
  gap: 5px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.is-mobile #mobileZoneBar::-webkit-scrollbar { display: none; }
body.is-mobile #mobileZoneBar .mzb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--s2);
  border: 1px solid var(--bd);
  font-size: 11px;
  font-weight: 500;
  color: var(--tx);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 28px;
}
body.is-mobile #mobileZoneBar .mzb.on {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}
body.is-mobile #mobileZoneBar .mzsw {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
}

/* ── BARRE CATÉGORIES (tout en bas) ── */
body.is-mobile #mTabbar {
  display: flex !important;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0,0,0,.06);
  z-index: 41;
  padding: 2px 4px env(safe-area-inset-bottom);
  align-items: stretch;
  justify-content: space-around;
}
body.is-mobile #mTabbar button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--t2);
  font-size: 9.5px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: 7px;
  min-width: 48px;
}
body.is-mobile #mTabbar button.on { color: var(--ac); background: rgba(0,113,227,.08); }
body.is-mobile #mTabbar button:active { transform: scale(.96); }
body.is-mobile #mTabbar button svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Une catégorie peut être cachée (ex: Calques pour non-super-admin) */
body.is-mobile #mTabbar button[hidden] { display: none !important; }

/* ── BOTTOM SHEET (aside.pnl) — design polish ── */
body.is-mobile aside.pnl {
  position: fixed !important;
  left: 0; right: 0;
  /* Sheet au-dessus de la CTA bar (138px) — pas en-dessous */
  bottom: 138px;
  width: 100% !important;
  height: 0;
  max-height: calc(100vh - 44px - 138px);
  border-left: 0;
  border-top: none;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 80px);
  z-index: 50;
  transition: height .32s cubic-bezier(.32,.72,0,1), transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -2px 0 rgba(0,0,0,.04), 0 -16px 50px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Sheets : DEFAULT = remplit l'espace entre le canvas (-138-35vh)
   et la CTA bar (138px). Pas plus haut que la fin du canvas. */
body.is-mobile aside.pnl.m-open { height: 35vh !important; }
body.is-mobile aside.pnl.m-tall { height: calc(100vh - 44px - 138px) !important; }
body.is-mobile aside.pnl.m-open[data-tab="mockup"] { height: 35vh !important; }

/* CTA bar mobile : barre fixe au-dessus du tabbar/zone, contient
   le bouton Menu ⋯ et le bouton Commander. Cachée en mockup mode. */
body.is-mobile #pwai-cfg-cta-m-bar { display: flex !important; }
body.is-mobile.m-mockup-mode #pwai-cfg-cta-m-bar { display: none !important; }
/* Templates : on cache la rangée "Load SVG designs" desktop sur
   mobile pour libérer la hauteur entière à la grille de tiles. */
body.is-mobile aside.pnl[data-tab="templates"] #tplDesignPanel > label:first-child {
  display: none !important;
}
body.is-mobile aside.pnl.m-max  {
  /* Plein écran disponible entre header (44) et bottom bars (104) —
     plus de débordement sous le header. */
  top: 44px !important;
  bottom: 82px !important;
  height: auto !important;
  max-height: none !important;
}

/* ─── MODE MOCKUP MOBILE : split screen ────────────────────
   3D au-dessus (haut) + réglages mockup en bas (bottom 55vh).
   FABs / tabbar / zone bar masqués pour libérer l'espace. */
body.is-mobile.m-mockup-mode aside.pnl,
body.is-mobile.m-mockup-mode aside.pnl.m-open,
body.is-mobile.m-mockup-mode aside.pnl.m-tall,
body.is-mobile.m-mockup-mode aside.pnl.m-max {
  height: 55vh !important;
  top: auto !important;
  bottom: 0 !important;
  max-height: 55vh !important;
  border-radius: 18px 18px 0 0 !important;
}
body.is-mobile.m-mockup-mode aside.pnl .body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px !important;
}
body.is-mobile.m-mockup-mode #vw {
  top: 44px !important;
  bottom: 55vh !important;
  height: auto !important;
}
body.is-mobile.m-mockup-mode #pwai-cfg-cta-m-bar,
body.is-mobile.m-mockup-mode #mTabbar,
body.is-mobile.m-mockup-mode #mobileZoneBar,
body.is-mobile.m-mockup-mode #mTopActions,
body.is-mobile.m-mockup-mode #mSheetCtl,
body.is-mobile.m-mockup-mode #mCartFab {
  display: none !important;
}
/* Bouton fermer le mode Mockup (×) en haut à droite du sheet */
body.is-mobile.m-mockup-mode aside.pnl::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; margin-top: 6px;
  background: #cbd5e1; border-radius: 4px;
  z-index: 10;
}
#mockup-exit-btn {
  position: fixed; top: 8px; right: 12px; z-index: 9100;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,10,12,.85); color: #fff; border: 0;
  font-size: 18px; font-weight: 700; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  display: none;
}
body.is-mobile.m-mockup-mode #mockup-exit-btn { display: grid; }

/* Header minimal : juste la grip pour drag-to-close (boutons sont
   désormais HORS du panel via #mSheetCtl). */
body.is-mobile #mSheetHead {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  background: transparent;
  height: 10px;
}
body.is-mobile #mSheetHead .grip {
  width: 36px; height: 3px;
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  transition: background .15s, transform .15s;
}
body.is-mobile #mSheetHead:active .grip { background: rgba(0,0,0,.32); transform: scaleX(1.15); }

/* Bouton plein écran maillot dans le top bar : style accent */
body.is-mobile #mTopActions button[data-act="full"] {
  background: var(--ac); color: #fff;
}
body.is-mobile #mTopActions button[data-act="full"] svg { stroke: #fff; }

/* Mode plein écran maillot : cache zones bar + tabbar (top bar reste
   pour pouvoir sortir du mode via re-clic sur le bouton). */
body.is-mobile.m-vw-full #mTabbar,
body.is-mobile.m-vw-full #mobileZoneBar { display: none !important; }

/* Boutons max + close FLOTTANTS HORS du panel : barre fixed posée
   juste au-dessus du bord supérieur du sheet (suit la hauteur via
   --m-sheet-h). En m-max ils remontent en haut de l'écran. */
body.is-mobile #mSheetCtl {
  display: none;
  position: fixed;
  right: 12px;
  bottom: calc(82px + var(--m-sheet-h, 86px) + 6px);
  z-index: 60;
  gap: 8px;
  pointer-events: none;
}
body.is-mobile.m-sheet-open #mSheetCtl { display: flex; pointer-events: auto; }
body.is-mobile.m-sheet-max  #mSheetCtl { bottom: auto; top: 52px; }
body.is-mobile #mSheetCtl button {
  width: 36px; height: 36px;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer; touch-action: manipulation;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--tx);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .12s, background .15s;
}
body.is-mobile #mSheetCtl button:active {
  transform: scale(.9);
  background: rgba(255,255,255,1);
}
body.is-mobile #mSheetCtl button svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
}
body.is-mobile.m-sheet-max #mSheetCtl .max .ico-expand { display: none; }
body.is-mobile:not(.m-sheet-max) #mSheetCtl .max .ico-collapse { display: none; }

/* Tabs internes du sheet : cachées (la m-tabbar du bas les remplace) */
body.is-mobile aside.pnl .tabs { display: none !important; }

/* Chaîne flex jusqu'au panel actif */
body.is-mobile aside.pnl .body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
body.is-mobile aside.pnl .body .zcol { display: none !important; }
body.is-mobile aside.pnl .body .cc {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
body.is-mobile aside.pnl .tp { display: none; }
body.is-mobile aside.pnl .tp.on {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 12px !important;
  box-sizing: border-box;
  position: relative;
  gap: 8px;
}

/* ─── Titre d'onglet : badge sticky compact ───────────────── */
body.is-mobile aside.pnl .tp.on::before {
  content: var(--tlbl, '');
  position: sticky;
  top: -4px;
  z-index: 8;
  display: block;
  margin: -4px -12px 4px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.96) 100%);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ac);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
body.is-mobile aside.pnl[data-tab="templates"] .tp.on { --tlbl: '🎨 Designs'; }
body.is-mobile aside.pnl[data-tab="couleurs"] .tp.on  { --tlbl: '🌈 Couleurs'; }
body.is-mobile aside.pnl[data-tab="patterns"] .tp.on  { --tlbl: '🔲 Motifs'; }
body.is-mobile aside.pnl[data-tab="elements"] .tp.on  { --tlbl: '✨ Éléments'; }
body.is-mobile aside.pnl[data-tab="equipes"] .tp.on   { --tlbl: '👥 Équipes'; }
body.is-mobile aside.pnl[data-tab="ia"] .tp.on        { --tlbl: '🤖 IA'; }
body.is-mobile aside.pnl[data-tab="mockup"] .tp.on    { --tlbl: '📸 Mockup studio'; }
body.is-mobile aside.pnl[data-tab="calques"] .tp.on   { --tlbl: '📑 Calques'; }

/* Indicateur "drag pour plus de contenu" en mode compact uniquement */
body.is-mobile aside.pnl.m-open:not(.m-tall):not(.m-max) .tp.on::after {
  content: '↑ Glissez vers le haut pour plus de réglages';
  position: sticky;
  bottom: -12px;
  z-index: 7;
  display: block;
  margin: 8px -12px -12px;
  padding: 6px 12px;
  background: linear-gradient(0deg, var(--s2) 0%, rgba(245,245,245,.7) 70%, transparent 100%);
  font-size: 9.5px;
  color: var(--t3);
  text-align: center;
  letter-spacing: .02em;
  pointer-events: none;
}

/* ─── Organisation visuelle commune onglets mobile ─────────
   Sections lisibles + spacing optimisé pour le tactile. */
body.is-mobile aside.pnl .tp.on .sl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--t2) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin: 4px 0 6px !important;
}
body.is-mobile aside.pnl .tp.on .sep {
  margin: 4px 0 !important;
  border-bottom: 1px solid var(--bd);
}
/* Cards (motifs, templates, formes) plus visibles */
body.is-mobile aside.pnl .pcard {
  min-height: 96px !important;
  border-radius: 10px !important;
  padding: 4px !important;
}
body.is-mobile aside.pnl .pcard canvas {
  width: 100% !important;
  height: 78px !important;
  border-radius: 6px;
}
body.is-mobile aside.pnl .pcard .plbl {
  font-size: 9px !important;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-mobile aside.pnl #pgrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
body.is-mobile aside.pnl #shapesGrid > div {
  gap: 8px !important;
}

/* Inputs / boutons / selects : tap-friendly partout */
body.is-mobile aside.pnl input[type="text"],
body.is-mobile aside.pnl input[type="number"],
body.is-mobile aside.pnl input[type="search"],
body.is-mobile aside.pnl input[type="password"],
body.is-mobile aside.pnl select,
body.is-mobile aside.pnl textarea {
  min-height: 38px;
  font-size: 13px !important;
}
body.is-mobile aside.pnl button:not(.tab):not(.pcard):not(.pwms-btn):not(.eqpro-tool) {
  min-height: 36px;
  font-size: 12px;
}
/* Sliders : track plus épais */
body.is-mobile aside.pnl input[type="range"] {
  height: 32px;
}

/* Couleurs : zone picker compact + grand swatch */
body.is-mobile aside.pnl #tab-couleurs .cprow {
  padding: 8px 10px !important;
}
body.is-mobile aside.pnl #tab-couleurs .cpsw {
  width: 36px !important;
  height: 36px !important;
}

/* Équipes : rangées du tableau aérées + bouton toolbar lisible */
body.is-mobile aside.pnl #eqTable > div {
  padding: 10px 10px !important;
  border-radius: 10px !important;
}
body.is-mobile aside.pnl #eqTable input,
body.is-mobile aside.pnl #eqTable select {
  font-size: 13px !important;
  padding: 7px 8px !important;
  min-height: 36px !important;
}
body.is-mobile aside.pnl #eqProTools .eqpro-tool {
  min-height: 34px;
  padding: 5px 11px !important;
  font-size: 11px !important;
}

/* IA : prompt textarea plus grand, boutons style ronds */
body.is-mobile aside.pnl #rctxt {
  min-height: 90px !important;
  font-size: 13px !important;
}

/* Quick presets Élements : tap-friendly */
body.is-mobile aside.pnl #pwai-quick-presets [data-preset] {
  min-height: 64px !important;
}
body.is-mobile aside.pnl #pwai-quick-presets [data-preset] > div:first-child {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
}
body.is-mobile aside.pnl #pwai-quick-presets [data-preset] > span {
  font-size: 10.5px !important;
}

/* Mockup tab : fond thumbs plus gros + accordions internes lisibles */
body.is-mobile aside.pnl #tab-mockup .pwms-bg-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  max-height: none !important;
  gap: 8px !important;
}
body.is-mobile aside.pnl #tab-mockup .pwms-fmt-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
body.is-mobile aside.pnl #tab-mockup .pwms-fmt-btn {
  min-height: 44px !important;
  font-size: 11px !important;
}

/* ─── FILTRES STICKY EN HAUT ───
   Les barres de filtres / sous-modes restent visibles en haut du
   panel quand on scroll : elles ne sont PLUS noyées dans les résultats. */
body.is-mobile aside.pnl .tp.on #mTplMobile,
body.is-mobile aside.pnl .tp.on #mPatMobile,
body.is-mobile aside.pnl .tp.on #mIaMobile > .modes,
body.is-mobile aside.pnl .tp.on #mElMobile > .m-el-cards,
body.is-mobile aside.pnl .tp.on #mEqMobile > .m-eq-stickyhead {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, rgba(255,255,255,.0) 100%);
  padding-top: 6px;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
/* Titres internes des filtres masqués (gain de place) */
body.is-mobile aside.pnl .tp.on #mPatMobile .m-pat-hdr,
body.is-mobile aside.pnl .tp.on #mElMobile .m-el-hdr,
body.is-mobile aside.pnl .tp.on #mEqMobile .m-el-hdr { display: none; }
/* Sur mobile, on garde les labels .sl visibles partout (les sheets
   ont maintenant ~25-55vh selon l'onglet, donc assez de place pour
   les labels de sections). Seuls les .info-mini verbeux disparaissent. */
body.is-mobile aside.pnl .tp.on .info-mini { display: none !important; }
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .info {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: var(--t3) !important;
}

/* DESIGNS : cacher le 'Load SVG designs' (admin only) + texte info palettes */
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tplDesignPanel > label[for],
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tplDesignPanel > label:first-child,
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tplColorPanel > div:first-child:not([id]) {
  display: none !important;
}

/* PATTERNS : skip patMain, montrer patStep1 directement, header compact */
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #patMain { display: none !important; }
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #patStep1 { display: flex !important; }
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #patStep1 > div:first-child {
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
  border-bottom: 0 !important;
  gap: 4px !important;
}
/* Patterns mobile : on cache toutes les barres "Back · titre · zone X"
   et le filtre catégories (l'utilisateur veut voir TOUS les motifs
   par défaut, sans avoir à filtrer). */
body.is-mobile aside.pnl[data-tab="patterns"] #patStep1 > div:first-child,
body.is-mobile aside.pnl[data-tab="patterns"] #patStep2 > div:first-child,
body.is-mobile aside.pnl[data-tab="patterns"] #mPatMobile,
body.is-mobile aside.pnl[data-tab="patterns"] #patMain,
body.is-mobile aside.pnl[data-tab="patterns"] #patMain .info,
body.is-mobile aside.pnl[data-tab="patterns"] #pat1Title,
body.is-mobile aside.pnl[data-tab="patterns"] #pat1Zone,
body.is-mobile aside.pnl[data-tab="patterns"] #pat2Title,
body.is-mobile aside.pnl[data-tab="patterns"] #pat2Zone,
body.is-mobile aside.pnl[data-tab="patterns"] #patCatBtns { display: none !important; }
/* On laisse le moteur desktop piloter l'affichage de patStep1 / patStep2
   (display:flex/none via JS). Pas d'override ici. */

/* ─── COULEURS MOBILE — UI custom étapes (modes / familles / couleurs) ─── */
/* Sur mobile en mode compact : on cache le contenu desktop de tab-couleurs
   et on affiche notre #mColorsMobile à la place. En mode m-tall ou m-max,
   le contenu desktop reprend pour l'utilisateur avancé. */
body.is-mobile aside.pnl[data-tab="couleurs"]:not(.m-tall):not(.m-max) #tab-couleurs > *:not(#mColorsMobile) {
  display: none !important;
}
body.is-mobile #mColorsMobile { display: none; }
body.is-mobile aside.pnl[data-tab="couleurs"]:not(.m-tall):not(.m-max) #mColorsMobile {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

/* ─── Couleurs : navigation drilldown par étape — TOUT en horizontal ─── */
body.is-mobile #mColorsMobile .m-step {
  display: flex; flex-direction: column; gap: 6px;
}
body.is-mobile #mColorsMobile .m-step[hidden] { display: none; }
body.is-mobile #mColorsMobile .m-step-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 1px 2px;
  font-size: 10px; font-weight: 700; color: var(--tx);
}
body.is-mobile #mColorsMobile .m-step-hdr > span { flex: 1; }
body.is-mobile #mColorsMobile .m-back {
  padding: 5px 10px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  font-size: 11px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
}
body.is-mobile #mColorsMobile .m-back:active {
  border-color: var(--ac); color: var(--ac);
}
/* Body : strip horizontal scrollable — minimum de hauteur */
body.is-mobile #mColorsMobile .m-step-body {
  display: flex; flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,113,227,.45) transparent;
  gap: 6px;
  padding-bottom: 6px;
}
body.is-mobile #mColorsMobile .m-step-body::-webkit-scrollbar { height: 4px; }
body.is-mobile #mColorsMobile .m-step-body::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mColorsMobile .m-empty {
  font-size: 11px; color: var(--t3);
  padding: 8px 10px;
  border: 1.5px dashed var(--bd);
  border-radius: 10px;
  white-space: nowrap;
}

/* Step 1 : modes en pills compactes (horizontal) */
body.is-mobile #mColorsMobile .m-mode-card {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 32px;
  transition: border-color .15s, background .15s, transform .12s;
}
body.is-mobile #mColorsMobile .m-mode-card:active {
  border-color: var(--ac); background: rgba(0,113,227,.04);
  transform: scale(.97);
}
body.is-mobile #mColorsMobile .m-mode-card .ic {
  flex: 0 0 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px;
  border: 1.5px solid rgba(0,0,0,.08);
}
body.is-mobile #mColorsMobile .m-mode-card .arr { display: none; }

/* Step 2 : familles / catégories en pills (horizontal) */
body.is-mobile #mColorsMobile .m-fam-card {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 3px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  font-size: 11px; font-weight: 600; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 28px;
  transition: border-color .15s, background .15s, transform .12s;
}
body.is-mobile #mColorsMobile .m-fam-card:active {
  border-color: var(--ac); background: rgba(0,113,227,.04);
  transform: scale(.97);
}
body.is-mobile #mColorsMobile .m-fam-card .sw {
  flex: 0 0 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.08);
}
body.is-mobile #mColorsMobile .m-fam-card .arr { display: none; }
body.is-mobile #mColorsMobile .m-fam-perso {
  border-color: var(--ac);
  background: rgba(0,113,227,.06);
  color: var(--ac);
}

/* Step 3 : couleurs / dégradés en strip horizontal */
body.is-mobile #mColorsMobile #mColLeafList {
  display: flex; flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,113,227,.45) transparent;
  gap: 6px;
  padding-bottom: 6px;
}
body.is-mobile #mColorsMobile #mColLeafList::-webkit-scrollbar { height: 4px; }
body.is-mobile #mColorsMobile #mColLeafList::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mColorsMobile .m-leaf-chip {
  flex: 0 0 36px;
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1.5px solid rgba(0,0,0,.06);
  outline-offset: -2px;
  cursor: pointer; touch-action: manipulation;
  background-clip: padding-box;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  transition: transform .12s, outline-color .15s;
}
body.is-mobile #mColorsMobile .m-leaf-chip:active {
  transform: scale(.88);
  outline-color: var(--ac); outline-width: 2px;
}
body.is-mobile #mColorsMobile .m-leaf-chip.light { outline-color: rgba(0,0,0,.18); }
body.is-mobile #mColorsMobile .m-leaf-name { display: none; }
body.is-mobile #mColorsMobile .m-leaf-grad {
  flex: 0 0 64px;
  position: relative;
  width: 64px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid rgba(0,0,0,.08);
  cursor: pointer; touch-action: manipulation;
  overflow: hidden;
  transition: transform .12s;
}
body.is-mobile #mColorsMobile .m-leaf-grad:active { transform: scale(.95); }
body.is-mobile #mColorsMobile .m-leaf-grad span {
  position: absolute; bottom: 2px; left: 5px;
  font-size: 9px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ─── Conteneurs custom mobile pour Templates/Patterns/Elements/Equipes/IA ─── */
body.is-mobile #mTplMobile,
body.is-mobile #mPatMobile,
body.is-mobile #mElMobile,
body.is-mobile #mEqMobile,
body.is-mobile #mIaMobile { display: none; }
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #mTplMobile,
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #mPatMobile,
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #mElMobile,
body.is-mobile aside.pnl[data-tab="equipes"]:not(.m-tall):not(.m-max) #mEqMobile,
body.is-mobile aside.pnl[data-tab="ia"]:not(.m-tall):not(.m-max) #mIaMobile {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
/* En mode compact, on cache le contenu desktop des panels remplacés
   par notre UI mobile (sinon doublons / conflits) */
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #tab-elements > *:not(#mElMobile) { display: none !important; }
/* Le contenu desktop de #tab-equipes est entièrement remplacé par
   #mEqMobile (qui couvre nav + quick-add + roster + CSV) — on cache
   tout le reste, peu importe le mode. */
body.is-mobile aside.pnl[data-tab="equipes"] #tab-equipes > *:not(#mEqMobile) { display: none !important; }

/* Hint 'utilise Équipes' dans Éléments — pill compacte inline */
body.is-mobile #mElTeamHint {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 6px;
  background: rgba(108,99,255,.07);
  border: 1.5px solid rgba(108,99,255,.20);
  border-radius: 999px;
  font-size: 11px; color: #4d4488; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 28px;
}
body.is-mobile #mElTeamHint svg { color: #6C63FF; flex-shrink: 0; width: 12px; height: 12px; }
body.is-mobile #mElTeamHint b { display: none; }
body.is-mobile #mElTeamHint span { font-size: 11px; }
body.is-mobile #mElTeamHint .m-el-team-go { display: none; }

/* ─── ÉQUIPES MOBILE — refonte complète ───
   Structure :
   - .m-eq-stickyhead : barre nav + 2 quick-add cards (sticky top)
   - .m-eq-rosthdr    : titre Roster + bouton "+ Joueur"
   - .m-eq-roster     : liste de rangées éditables inline
   - .m-eq-actions    : import CSV + tip
*/
body.is-mobile #mEqMobile { display: flex; flex-direction: column; gap: 4px; height: 100%; }

/* Drilldown Équipes : étapes */
body.is-mobile #mEqMobile .m-step { display: flex; flex-direction: column; gap: 6px; }
body.is-mobile #mEqMobile .m-step[hidden] { display: none; }
body.is-mobile #mEqMobile .m-step-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 1px 2px;
  font-size: 10px; font-weight: 700; color: var(--tx);
}
body.is-mobile #mEqMobile .m-step-hdr > span:first-of-type { flex: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--t2); }
body.is-mobile #mEqMobile .m-back {
  padding: 3px 9px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 10px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  min-height: 24px;
}
body.is-mobile #mEqMobile .m-back:active { border-color: var(--ac); color: var(--ac); }

/* Étape kind : strip horizontal de 3 grosses pills */
body.is-mobile #mEqMobile [data-step="kind"] .m-step-body {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: 6px; overflow-x: auto;
  scrollbar-width: thin;
}

/* Étape players (en m-max) : roster vertical scrollable + header avec
   bouton "+ Joueur" et "CSV". */
body.is-mobile #mEqMobile [data-step="players"] {
  flex: 1 1 auto; min-height: 0;
  overflow: hidden;
}
body.is-mobile #mEqMobile [data-step="players"] .m-eq-roster {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
body.is-mobile #mEqMobile [data-step="players"] .m-eq-row {
  flex: 0 0 auto;
  width: 100%;
}
body.is-mobile #mEqMobile [data-step="players"] .m-eq-csv {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 11px; font-weight: 600; color: var(--t2);
  cursor: pointer; touch-action: manipulation;
}
body.is-mobile #mEqMobile [data-step="players"] .m-eq-csv svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
/* Navigation joueur courant */
body.is-mobile #mEqMobile .m-eq-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(135deg, rgba(0,113,227,.05), rgba(0,113,227,.02));
  border: 1.5px solid rgba(0,113,227,.18);
  border-radius: 12px;
}
body.is-mobile #mEqMobile .m-eq-prev,
body.is-mobile #mEqMobile .m-eq-next {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: #fff;
  display: grid; place-items: center;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s, background .15s;
}
body.is-mobile #mEqMobile .m-eq-prev svg,
body.is-mobile #mEqMobile .m-eq-next svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
body.is-mobile #mEqMobile .m-eq-prev:active,
body.is-mobile #mEqMobile .m-eq-next:active { transform: scale(.92); background: var(--s2); }
body.is-mobile #mEqMobile .m-eq-cur {
  flex: 1; min-width: 0; text-align: center;
}
body.is-mobile #mEqMobile .m-eq-cur-name {
  font-size: 15px; font-weight: 800; color: var(--tx);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-mobile #mEqMobile .m-eq-cur-info {
  font-size: 11px; color: var(--t2);
  font-family: var(--mono);
  margin-top: 1px;
}

/* Quick-add : 2 pills horizontales compactes */
body.is-mobile #mEqMobile .m-eq-quick {
  display: flex; flex-direction: row; gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.is-mobile #mEqMobile .m-eq-quick-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 5px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  cursor: pointer; touch-action: manipulation;
  font-size: 12px; font-weight: 700; color: var(--tx);
  white-space: nowrap;
  min-height: 32px;
  transition: border-color .15s, transform .12s, background .15s;
}
body.is-mobile #mEqMobile .m-eq-quick-btn:active {
  border-color: var(--ac);
  background: rgba(0,113,227,.05);
  transform: scale(.97);
}
body.is-mobile #mEqMobile .m-eq-quick-btn .ic {
  flex: 0 0 22px; height: 22px;
  border-radius: 6px;
  background: rgba(0,113,227,.10);
  color: var(--ac);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
body.is-mobile #mEqMobile .m-eq-quick-add {
  border-color: var(--ac);
  background: var(--ac);
  color: #fff;
}
body.is-mobile #mEqMobile .m-eq-quick-add .ic {
  background: rgba(255,255,255,.20);
  color: #fff;
}

/* Header roster — très compact */
body.is-mobile #mEqMobile .m-eq-rosthdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px;
}
body.is-mobile #mEqMobile .m-eq-rosthdr > span {
  font-size: 10px; font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: .06em;
}
body.is-mobile #mEqMobile .m-eq-rosthdr em {
  font-style: normal; color: var(--t3); font-weight: 500;
  margin-left: 4px;
}
body.is-mobile #mEqMobile .m-eq-addbtn {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ac);
  color: #fff;
  font-size: 11px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  transition: transform .12s, opacity .15s;
}
body.is-mobile #mEqMobile .m-eq-addbtn:active { transform: scale(.95); opacity: .9; }

/* Roster — pills inline (intégrées au flux .m-eq-row1) */
body.is-mobile #mEqMobile .m-eq-row {
  flex: 0 0 auto;
  display: flex; flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  transition: border-color .15s, background .15s;
  min-height: 36px;
}
body.is-mobile #mEqMobile .m-eq-row-eye {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border: 0; background: transparent;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--ac);
  cursor: pointer; touch-action: manipulation;
  transition: background .15s, transform .12s;
}
body.is-mobile #mEqMobile .m-eq-row-eye:active {
  background: rgba(0,113,227,.12);
  transform: scale(.92);
}
body.is-mobile #mEqMobile .m-eq-row-eye svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body.is-mobile #mEqMobile .m-eq-row.is-active .m-eq-row-eye {
  background: var(--ac); color: #fff;
}
body.is-mobile #mEqMobile .m-eq-row.is-active {
  border-color: var(--ac);
  background: rgba(0,113,227,.04);
}
body.is-mobile #mEqMobile .m-eq-row-idx {
  flex: 0 0 18px;
  font-family: var(--mono); font-size: 10px; color: var(--t3);
  text-align: center;
}
body.is-mobile #mEqMobile .m-eq-row input,
body.is-mobile #mEqMobile .m-eq-row select {
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  color: var(--tx);
  padding: 5px 7px;
  outline: none;
  transition: border-color .12s;
  min-width: 0;
  box-sizing: border-box;
}
body.is-mobile #mEqMobile .m-eq-row-name { flex: 0 0 110px; width: 110px; }
body.is-mobile #mEqMobile .m-eq-row-num  { flex: 0 0 44px; width: 44px; }
body.is-mobile #mEqMobile .m-eq-row-size { flex: 0 0 56px; width: 56px; padding: 5px 4px !important; }
body.is-mobile #mEqMobile .m-eq-row input:focus,
body.is-mobile #mEqMobile .m-eq-row select:focus {
  border-color: var(--ac);
}
body.is-mobile #mEqMobile .m-eq-row-num {
  font-family: var(--mono); font-weight: 700; text-align: center;
}
body.is-mobile #mEqMobile .m-eq-row-del {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border: 0; background: transparent;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--t3);
  cursor: pointer; touch-action: manipulation;
  transition: background .15s, color .15s;
}
body.is-mobile #mEqMobile .m-eq-row-del:active {
  background: rgba(229,57,53,.10);
  color: #e53935;
}
body.is-mobile #mEqMobile .m-eq-row-del svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round;
}

/* Empty state */
body.is-mobile #mEqMobile .m-eq-empty {
  flex: 0 0 auto;
  font-size: 11px; color: var(--t3); font-weight: 500;
  padding: 4px 8px; white-space: nowrap;
}
body.is-mobile #mEqMobile .m-eq-empty.disabled-old {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 12px;
  border: 1.5px dashed var(--bd);
  border-radius: 14px;
  text-align: center;
  color: var(--t3);
  font-size: 13px; font-weight: 600;
}
body.is-mobile #mEqMobile .m-eq-empty svg {
  width: 28px; height: 28px; opacity: .4;
  stroke-linecap: round; stroke-linejoin: round;
}
body.is-mobile #mEqMobile .m-eq-empty small {
  font-size: 11px; color: var(--t3); font-weight: 500;
}

/* Actions footer (CSV) — inline pill compacte */
body.is-mobile #mEqMobile .m-eq-actions {
  display: flex; flex-direction: row; gap: 6px;
  margin-top: 0;
}
body.is-mobile #mEqMobile .m-eq-csv {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  color: var(--t2);
  font-size: 11px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 28px;
}
body.is-mobile #mEqMobile .m-eq-csv svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
body.is-mobile #mEqMobile .m-eq-tip { display: none; }
/* ── IA drilldown — horizontal compact ── */
body.is-mobile #mIaMobile .m-step { display: flex; flex-direction: column; gap: 6px; }
body.is-mobile #mIaMobile .m-step[hidden] { display: none; }
body.is-mobile #mIaMobile .m-step-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 1px 2px;
  font-size: 10px; font-weight: 700; color: var(--tx);
}
body.is-mobile #mIaMobile .m-step-hdr > span { flex: 1; }
body.is-mobile #mIaMobile .m-back {
  padding: 3px 9px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 10px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  min-height: 24px;
}
body.is-mobile #mIaMobile .m-back:active { border-color: var(--ac); color: var(--ac); }
body.is-mobile #mIaMobile .m-step-body {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 6px; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(0,113,227,.45) transparent;
}
body.is-mobile #mIaMobile .m-step-body::-webkit-scrollbar { height: 4px; }
body.is-mobile #mIaMobile .m-step-body::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mIaMobile .m-mode-card {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1.5px solid rgba(0,0,0,.08); border-radius: 999px;
  background: #fff;
  font-size: 13px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 40px;
  transition: border-color .15s, background .15s, transform .12s;
}
body.is-mobile #mIaMobile .m-mode-card:active {
  border-color: var(--ac); background: rgba(0,113,227,.04);
  transform: scale(.97);
}
body.is-mobile #mIaMobile .m-mode-card .ic {
  flex: 0 0 26px; height: 26px;
  border-radius: 7px;
  background: rgba(0,113,227,.08); color: var(--ac);
  display: grid; place-items: center;
  font-size: 13px;
}
body.is-mobile #mIaMobile .m-mode-card .arr { display: none; }
/* En step 'mode' on cache le contenu desktop, en step 'prompt' on l'affiche */
body.is-mobile aside.pnl[data-tab="ia"] #tab-ia:not(.m-ia-prompt) > *:not(#mIaMobile) {
  display: none !important;
}

/* ── Designs/Palettes drilldown : tout en horizontal compact ── */
body.is-mobile #mTplMobile .m-step { display: flex; flex-direction: column; gap: 6px; }
body.is-mobile #mTplMobile .m-step[hidden] { display: none; }
body.is-mobile #mTplMobile .m-step-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 1px 2px;
  font-size: 10px; font-weight: 700; color: var(--tx);
}
body.is-mobile #mTplMobile .m-step-hdr > span { flex: 1; }
body.is-mobile #mTplMobile .m-back {
  padding: 3px 9px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 10px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  min-height: 24px;
}
body.is-mobile #mTplMobile .m-back:active { border-color: var(--ac); color: var(--ac); }
body.is-mobile #mTplMobile .m-step-body {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 6px; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(0,113,227,.45) transparent;
}
body.is-mobile #mTplMobile .m-step-body::-webkit-scrollbar { height: 4px; }
body.is-mobile #mTplMobile .m-step-body::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mTplMobile .m-mode-card {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 32px;
  transition: border-color .15s, background .15s, transform .12s;
}
body.is-mobile #mTplMobile .m-mode-card:active {
  border-color: var(--ac); background: rgba(0,113,227,.04);
  transform: scale(.97);
}
body.is-mobile #mTplMobile .m-mode-card .ic {
  flex: 0 0 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px;
  background: rgba(0,113,227,.08); color: var(--ac);
}
body.is-mobile #mTplMobile .m-mode-card .arr { display: none; }

/* En step 'mode' : on cache le grid desktop. En step 'result' : on l'affiche. */
body.is-mobile aside.pnl[data-tab="templates"] #tab-templates:not(.m-tpl-result) #tplDesignPanel,
body.is-mobile aside.pnl[data-tab="templates"] #tab-templates:not(.m-tpl-result) #tplColorPanel {
  display: none !important;
}
/* Designs : on aplatit toutes les sections de catégorie en UNE seule
   strip horizontale. Les headers de section et le bouton "Aucun
   design" sont cachés. Les sub-grids (display:grid) sont passées en
   display:contents pour que leurs children remontent au parent. */
body.is-mobile aside.pnl[data-tab="templates"] #tplGridFull > div[style*="uppercase"],
body.is-mobile aside.pnl[data-tab="templates"] #tplGridFull > div[onclick*="clearDesigns"] {
  display: none !important;
}
body.is-mobile aside.pnl[data-tab="templates"] #tplGridFull > div[style*="display:grid"] {
  display: contents !important;
}
body.is-mobile #mPatMobile .strip,
body.is-mobile #mElMobile .strip {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px; padding: 2px 0 4px;
}
body.is-mobile #mPatMobile .strip::-webkit-scrollbar,
body.is-mobile #mElMobile .strip::-webkit-scrollbar { display: none; }
/* ÉLEMENTS — cards d'ajout (redesign complet) */
body.is-mobile #mElMobile .m-el-hdr {
  font-size: 11px; font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0 0 4px;
}
/* Étapes Éléments — tout horizontal compact */
body.is-mobile #mElMobile .m-step { display: flex; flex-direction: column; gap: 6px; }
body.is-mobile #mElMobile .m-step[hidden] { display: none; }
body.is-mobile #mElMobile .m-step-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 1px 2px;
  font-size: 10px; font-weight: 700; color: var(--tx);
}
body.is-mobile #mElMobile .m-step-hdr > span { flex: 1; }
body.is-mobile #mElMobile .m-back {
  padding: 3px 9px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 10px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  min-height: 24px;
}
body.is-mobile #mElMobile .m-back:active { border-color: var(--ac); color: var(--ac); }
body.is-mobile #mElMobile .m-step-body {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
body.is-mobile #mElMobile .m-el-shapes {
  display: flex !important; flex-direction: row; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 6px; padding: 0 0 6px;
  background: transparent;
  border: 0;
  scrollbar-width: thin; scrollbar-color: rgba(0,113,227,.45) transparent;
}
body.is-mobile #mElMobile .m-el-shapes::-webkit-scrollbar { height: 4px; }
body.is-mobile #mElMobile .m-el-shapes::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }

body.is-mobile #mElMobile .m-el-cards {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 6px; padding: 0 0 6px;
  scrollbar-width: thin; scrollbar-color: rgba(0,113,227,.45) transparent;
}
body.is-mobile #mElMobile .m-el-cards::-webkit-scrollbar { height: 4px; }
body.is-mobile #mElMobile .m-el-cards::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mElMobile .m-el-card {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  font-size: 13px; font-weight: 700;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  text-align: left;
  white-space: nowrap;
  min-height: 40px;
  transition: border-color .15s, transform .12s, background .15s;
}
body.is-mobile #mElMobile .m-el-card:active {
  border-color: var(--ac);
  background: rgba(0,113,227,.04);
  transform: scale(.98);
  box-shadow: 0 2px 8px rgba(0,113,227,.12);
}
body.is-mobile #mElMobile .m-el-card-icon {
  flex: 0 0 26px; height: 26px;
  border-radius: 7px;
  background: rgba(0,113,227,.08);
  color: var(--ac);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  font-family: var(--font);
}
body.is-mobile #mElMobile .m-el-card-body {
  display: contents;   /* fait remonter title/desc dans le flex parent */
}
body.is-mobile #mElMobile .m-el-card-title {
  font-size: 13px; font-weight: 700; color: var(--tx);
  white-space: nowrap;
}
body.is-mobile #mElMobile .m-el-card-desc { display: none; }
body.is-mobile #mElMobile .m-el-card-plus { display: none; }
/* SHAPES picker — strip horizontal des formes SVG */
body.is-mobile #mElMobile .m-el-shapes {
  display: flex; flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px; padding: 8px 4px;
  background: var(--s2);
  border-radius: 10px;
  border: 1px solid var(--bd);
}
body.is-mobile #mElMobile .m-el-shapes::-webkit-scrollbar { display: none; }
body.is-mobile #mElMobile .m-el-shapes[hidden] { display: none !important; }
body.is-mobile #mElMobile .m-shape {
  flex: 0 0 auto;
  width: 84px; height: 92px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 8px 6px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 11px;
  cursor: pointer; touch-action: manipulation;
  transition: border-color .15s, transform .12s, background .15s;
}
body.is-mobile #mElMobile .m-shape:active {
  border-color: var(--ac);
  background: rgba(0,113,227,.06);
  transform: scale(.95);
}
body.is-mobile #mElMobile .m-shape-svg {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
body.is-mobile #mElMobile .m-shape-svg svg { width: 100% !important; height: 100% !important; max-width: 52px; max-height: 52px; }
body.is-mobile #mElMobile .m-shape-lbl {
  font-size: 10px; font-weight: 600; color: var(--t3);
  white-space: nowrap; max-width: 72px;
  overflow: hidden; text-overflow: ellipsis;
}

/* Liste des éléments déjà ajoutés — strip inline */
body.is-mobile #mElMobile .m-el-existing {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 0 0 8px;
  border-left: 1.5px solid var(--bd);
  margin-left: 4px;
}
body.is-mobile #mElMobile .m-el-list-hdr { display: none; }
body.is-mobile #mElMobile .m-el-list {
  display: flex; flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
}
body.is-mobile #mElMobile .m-el-list::-webkit-scrollbar { display: none; }
body.is-mobile #mElMobile .m-el-existing-item {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px 4px 4px;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: #fff;
  cursor: pointer; touch-action: manipulation;
  font-size: 11px;
  min-height: 28px;
}
body.is-mobile #mElMobile .m-el-existing-item:active {
  border-color: var(--ac);
  background: rgba(0,113,227,.06);
}

/* ── INDICATEURS de scroll horizontal ── */
/* Wrapper qui ajoute un chevron pulsant à droite quand le contenu
   déborde — visible et clair, indique 'swipe →' */
body.is-mobile .scroll-x-wrap { position: relative; }

/* Apply scroll-x-wrap automatically on common strips via CSS — fallback
   sans JS : tous les strips horizontaux porteront un chevron via la
   pseudo de leur parent. Pour ça on cible le parent direct des strips. */
/* Indicateurs de scroll horizontal : on remplace les chevrons animés
   par de fines barres de scroll natives, beaucoup plus claires
   visuellement et moins envahissantes. */
body.is-mobile #mElMobile .m-el-cards,
body.is-mobile #mElMobile .m-el-shapes,
body.is-mobile #mElMobile .m-el-list,
body.is-mobile #mColorsMobile .strip,
body.is-mobile #mPatMobile .strip,
body.is-mobile #mobileZoneBar,
body.is-mobile #patCatBtns,
body.is-mobile #pgrid,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,113,227,.45) transparent;
  padding-bottom: 8px !important;
}
body.is-mobile #mElMobile .m-el-cards::-webkit-scrollbar,
body.is-mobile #mElMobile .m-el-shapes::-webkit-scrollbar,
body.is-mobile #mElMobile .m-el-list::-webkit-scrollbar,
body.is-mobile #mColorsMobile .strip::-webkit-scrollbar,
body.is-mobile #mPatMobile .strip::-webkit-scrollbar,
body.is-mobile #mobileZoneBar::-webkit-scrollbar,
body.is-mobile #patCatBtns::-webkit-scrollbar,
body.is-mobile #pgrid::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid::-webkit-scrollbar {
  display: block !important;
  height: 4px;
  background: transparent;
}
body.is-mobile #mElMobile .m-el-cards::-webkit-scrollbar-thumb,
body.is-mobile #mElMobile .m-el-shapes::-webkit-scrollbar-thumb,
body.is-mobile #mElMobile .m-el-list::-webkit-scrollbar-thumb,
body.is-mobile #mColorsMobile .strip::-webkit-scrollbar-thumb,
body.is-mobile #mPatMobile .strip::-webkit-scrollbar-thumb,
body.is-mobile #mobileZoneBar::-webkit-scrollbar-thumb,
body.is-mobile #patCatBtns::-webkit-scrollbar-thumb,
body.is-mobile #pgrid::-webkit-scrollbar-thumb,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid::-webkit-scrollbar-thumb,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull::-webkit-scrollbar-thumb,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid::-webkit-scrollbar-thumb {
  background: rgba(0,113,227,.45);
  border-radius: 999px;
}

/* Section grad categories : pill */
body.is-mobile #mColorsMobile .gcat {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 500; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  min-height: 36px;
}
body.is-mobile #mColorsMobile .gcat.on {
  border-color: var(--ac);
  background: rgba(0,113,227,.06);
  color: var(--ac);
}

/* ─── REDESIGN MOBILE COMPACT — règles génériques pour tous les panels ─── */
/* Designs / Palettes / Patterns : strip horizontal compact pour
   minimiser la hauteur. Les filtres (Designs/Palettes / catégories
   patterns) sont au-dessus en pills. */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on [style*="grid-template-columns"],
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .pg,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  padding-bottom: 6px;
  flex-direction: row !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0,113,227,.45) transparent !important;
}
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .pg::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid::-webkit-scrollbar,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid::-webkit-scrollbar { display: none; }

/* Items dans les strips horizontaux : tile carrée 64×64, dimension
   STRICTEMENT UNIFORME partout (Designs / Palettes / Patterns). */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .pg > * {
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  border-radius: 9px !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);
}
/* Contenu des tiles — uniformiser : padding 0, preview 100%×100%,
   labels cachés (texte name / .plbl) et canvas / preview div forcés
   à remplir toute la tile carrée. Plus de décalage entre Designs /
   Palettes / Patterns. */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #paletteGrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGrid > *,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .pg > * {
  padding: 0 !important;
  display: block !important;
  position: relative;
}
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > * > div:first-child,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid > * > div:first-child {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > * canvas,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid > * canvas,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > * img,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid > * img,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > * > div:first-child > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Cache les labels texte SOUS les previews → uniformise tout en
   carrés visuels purs sans texte parasite. */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #tplGridFull > * > div:not(:first-child),
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on #pgrid .plbl {
  display: none !important;
}
/* Mode m-tall/m-max : grille 2/3 colonnes, cards encore plus grandes */
body.is-mobile aside.pnl.m-tall .tp.on #tplGridFull,
body.is-mobile aside.pnl.m-max  .tp.on #tplGridFull,
body.is-mobile aside.pnl.m-tall .tp.on #paletteGrid,
body.is-mobile aside.pnl.m-max  .tp.on #paletteGrid,
body.is-mobile aside.pnl.m-tall .tp.on #pgrid,
body.is-mobile aside.pnl.m-max  .tp.on #pgrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  overflow-x: hidden !important;
}
body.is-mobile aside.pnl.m-tall .tp.on #tplGridFull > *,
body.is-mobile aside.pnl.m-max  .tp.on #tplGridFull > *,
body.is-mobile aside.pnl.m-tall .tp.on #paletteGrid > *,
body.is-mobile aside.pnl.m-max  .tp.on #paletteGrid > *,
body.is-mobile aside.pnl.m-tall .tp.on #pgrid > *,
body.is-mobile aside.pnl.m-max  .tp.on #pgrid > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  border-radius: 14px !important;
}

/* Les sous-tabs desktop Designs/Palettes du panel Templates sont
   redondantes avec mes mode pills mobile — on les cache en compact */
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tplTabDesign,
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tplTabColor,
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tab-templates > div:first-of-type {
  /* Cible le wrapper des sub-tabs desktop (background:var(--s2);border-radius:8px;padding:3px) */
}
body.is-mobile aside.pnl[data-tab="templates"]:not(.m-tall):not(.m-max) #tab-templates > div[style*="background:var(--s2)"][style*="border-radius:8px"] {
  display: none !important;
}

/* Boutons "Back" plus discrets dans les flows mobiles */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) #patStep1 [onclick*="closePatFlow"],
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) [onclick*="closeAddFlow"] {
  font-size: 11px !important;
  padding: 5px 9px !important;
  flex-shrink: 0;
}

/* ── Pattern step 2 mobile : header retour + tags + panneau unique ── */
body.is-mobile aside.pnl[data-tab="patterns"] #mPat2 {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 0 4px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, rgba(255,255,255,0) 100%);
}
body.is-mobile #mPat2 .m-p2-hdr {
  display: flex; padding: 2px 2px 4px;
}
body.is-mobile #mPat2 .m-back {
  padding: 6px 12px;
  border: 1.5px solid var(--bd); border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 700; color: var(--tx);
  cursor: pointer; touch-action: manipulation;
}
body.is-mobile #mPat2 .m-back:active { border-color: var(--ac); color: var(--ac); }
body.is-mobile #mPat2 .m-p2-tags {
  display: flex; gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}
body.is-mobile #mPat2 .m-p2-tag {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  font-size: 13px; font-weight: 600;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 36px;
}
body.is-mobile #mPat2 .m-p2-tag.on {
  border-color: var(--ac);
  background: var(--ac);
  color: #fff;
}
body.is-mobile #mPat2 .m-p2-pane {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(0,113,227,.05);
  border-radius: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,113,227,.45) transparent;
  min-height: 40px;
}
body.is-mobile #mPat2 .m-p2-pane::-webkit-scrollbar { height: 4px; }
body.is-mobile #mPat2 .m-p2-pane::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mPat2 .m-p2-pane[hidden] { display: none; }
body.is-mobile #mPat2 .m-p2-pane > input[type=color] {
  flex: 0 0 80px;
  height: 36px; width: 80px;
  border: 1.5px solid var(--bd);
  border-radius: 8px;
  padding: 3px;
}
body.is-mobile #mPat2 .m-p2-pane > input[type=range] {
  flex: 0 0 140px;
  width: 140px; height: 28px; accent-color: var(--ac);
}
body.is-mobile #mPat2 .m-p2-row {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
}
body.is-mobile #mPat2 .m-p2-lbl {
  flex: 0 0 14px; font-weight: 700; color: var(--t2);
  font-size: 11px;
}
body.is-mobile #mPat2 .m-p2-row input[type=range] {
  flex: 0 0 110px; width: 110px; height: 28px; accent-color: var(--ac);
}
body.is-mobile #mPat2 .m-p2-val {
  font-size: 11px; font-family: var(--mono); color: var(--tx); font-weight: 600;
  min-width: 40px; text-align: right;
  white-space: nowrap;
}
/* Actions : pills horizontales */
body.is-mobile #mPat2 .m-p2-actions {
  display: flex; flex-direction: row; gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: thin;
}
body.is-mobile #mPat2 .m-p2-act {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1.5px solid var(--bd);
  background: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 32px;
}
body.is-mobile #mPat2 .m-p2-del {
  color: #ff3b30; border-color: #ffd0cd; background: #fff0ef;
}
/* Cache les rangées desktop de step2 (couleur/opacité/size/pos/etc),
   on a notre propre UI compacte au-dessus. */
body.is-mobile aside.pnl[data-tab="patterns"] #patStep2 > div:not(#mPat2):not(#patPreview) {
  display: none !important;
}

/* Catégories patterns (#patCatBtns) : strip horizontal de pills sticky */
body.is-mobile aside.pnl[data-tab="patterns"] #patCatBtns {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px !important;
  padding: 6px 0 8px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 80%, rgba(255,255,255,0) 100%);
}
/* Pills catégories visibles partout (compact / m-tall / m-max),
   override des styles inline du desktop. */
body.is-mobile aside.pnl[data-tab="patterns"] #patCatBtns > * {
  flex: 0 0 auto !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  border: 1.5px solid var(--bd) !important;
  background: #fff !important;
  border-radius: 999px !important;
  min-height: 26px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
body.is-mobile aside.pnl[data-tab="patterns"] #patCatBtns > *:active {
  border-color: var(--ac) !important;
  background: rgba(0,113,227,.06) !important;
  color: var(--ac) !important;
}

/* Liste zones (Patterns/Elements) : strip horizontal de chips zones */
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #patZoneList,
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #zoneToggles {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px !important;
  padding-bottom: 4px;
  scrollbar-width: none;
}
body.is-mobile #patZoneList::-webkit-scrollbar,
body.is-mobile #zoneToggles::-webkit-scrollbar { display: none; }
body.is-mobile aside.pnl[data-tab="patterns"]:not(.m-tall):not(.m-max) #patZoneList > *,
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #zoneToggles > * {
  flex: 0 0 auto !important;
  min-width: max-content;
}

/* Élements panel : Step1 (types) et zones en strip horizontal */
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #elStep1,
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #elStep2 {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #elStep1 > div[style*="grid"],
body.is-mobile aside.pnl[data-tab="elements"]:not(.m-tall):not(.m-max) #elTypeBtns {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  scrollbar-width: none;
}

/* IA panel : layout vertical compact, prompt input pleine largeur */
body.is-mobile aside.pnl[data-tab="ia"]:not(.m-tall):not(.m-max) #tab-ia textarea {
  min-height: 60px !important;
  max-height: 80px;
}
body.is-mobile aside.pnl[data-tab="ia"]:not(.m-tall):not(.m-max) #rcKeyPanel,
body.is-mobile aside.pnl[data-tab="ia"]:not(.m-tall):not(.m-max) #rcAdvPanel {
  display: none !important;   /* options avancées seulement en m-tall/max */
}

/* Calques : compact = liste horizontale des calques */
body.is-mobile aside.pnl[data-tab="calques"]:not(.m-tall):not(.m-max) #slPanel {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  scrollbar-width: none;
}
body.is-mobile aside.pnl[data-tab="calques"]:not(.m-tall):not(.m-max) #slPanel::-webkit-scrollbar { display: none; }
body.is-mobile aside.pnl[data-tab="calques"]:not(.m-tall):not(.m-max) #slPanel > * {
  flex: 0 0 auto !important;
  min-width: 80px;
}

/* Hide labels/sous-titres bavards des panels en compact (libère l'espace) */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .info,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .sl,
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on .info-mini {
  display: none !important;
}

/* Hint global en compact : "↑ Glisser vers le haut pour plus d'options" */
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) #mSheetHead .max::after {
  content: '';   /* override desktop content si présent */
}
body.is-mobile aside.pnl:not(.m-tall):not(.m-max) .tp.on::after {
  content: '↑ Glisser pour plus d\'options';
  display: block;
  font-size: 10px;
  color: var(--t3);
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
  opacity: .65;
}

/* Backdrop transparent — laisse voir le 3D pour preview live des couleurs */
body.is-mobile #mSheetBackdrop {
  display: block;
  position: fixed;
  inset: 44px 0 104px 0;
  background: transparent;
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
body.is-mobile.m-sheet-open #mSheetBackdrop {
  opacity: 1;
  pointer-events: auto;
}
/* En mode max, le backdrop couvre toute la zone sous le header */
body.is-mobile.m-sheet-open.m-sheet-max #mSheetBackdrop {
  inset: 44px 0 0 0;
}

/* ── Divers ── */
body.is-mobile button { min-height: 34px; touch-action: manipulation; }
body.is-mobile input, body.is-mobile select, body.is-mobile textarea { font-size: 16px; }
body.is-mobile #fsToolbar { bottom: 118px !important; }
body.is-mobile #sdToolbar { left: 6px; }
body.is-mobile .no-mobile { display: none !important; }
/* Hint 3D entier (icône maillot animée + texte) caché sur mobile —
   la rotation se fait au joystick. */
body.is-mobile #hint3d { display: none !important; }

/* ── BOITE D'OUTILS ÉLÉMENT — strip d'étiquettes horizontales + un
   seul panneau (sous le tag actif) ──
   Comportement : tap sur étiquette → ouvre son réglage juste en
   dessous. Re-tap → ferme. Une seule étiquette active à la fois. */
body.is-mobile #mElTb {
  display: none;
  position: fixed;
  left: 8px; right: 8px;
  bottom: 92px;
  max-height: 130px;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 4px 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.14);
  z-index: 36;
  font-family: var(--font);
  flex-direction: column;
  gap: 2px;
}
body.is-mobile.m-el-on #mElTb { display: flex; }
body.is-mobile.m-el-on.m-sheet-open #mElTb { display: none; }
body.is-mobile #mElTb .m-tb-hdr {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px;
}
body.is-mobile #mElTb .title {
  flex: 1;
  font-size: 10px; color: var(--ac); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
body.is-mobile #mElTb .m-tb-mini,
body.is-mobile #mElTb .m-tb-close {
  width: 26px; height: 26px;
  border: 0; background: rgba(0,0,0,.06);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer; touch-action: manipulation;
  color: var(--t2);
  flex-shrink: 0;
  transition: background .15s, transform .12s, color .15s;
}
body.is-mobile #mElTb .m-tb-mini:active,
body.is-mobile #mElTb .m-tb-close:active {
  transform: scale(.92); background: rgba(0,0,0,.12);
}
body.is-mobile #mElTb .m-tb-mini svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body.is-mobile #mElTb .m-tb-mini-del {
  background: #fff0ef; color: #ff3b30;
}
body.is-mobile #mElTb .m-tb-mini-del:active {
  background: #ffd0cd;
}
body.is-mobile #mElTb .m-tb-close svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2.4;
  stroke-linecap: round;
}

/* Strip horizontal des étiquettes */
body.is-mobile #mElTb .m-tb-tags {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 2px 4px 6px;
  scrollbar-width: thin;
}
body.is-mobile #mElTb .m-tb-tags::-webkit-scrollbar { height: 4px; }
body.is-mobile #mElTb .m-tb-tags::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mElTb .m-tb-tag {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  background: #fff;
  font-size: 12px; font-weight: 600;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  min-height: 30px;
}
body.is-mobile #mElTb .m-tb-tag:active { transform: scale(.96); }
body.is-mobile #mElTb .m-tb-tag.on {
  border-color: var(--ac);
  background: var(--ac);
  color: #fff;
}

/* Panneau actif : UNE ligne horizontale scrollable — minimum hauteur */
body.is-mobile #mElTb .m-tb-pane {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(0,113,227,.04);
  border-radius: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,113,227,.45) transparent;
  min-height: 40px;
}
body.is-mobile #mElTb .m-tb-pane::-webkit-scrollbar { height: 4px; }
body.is-mobile #mElTb .m-tb-pane::-webkit-scrollbar-thumb { background: rgba(0,113,227,.45); border-radius: 999px; }
body.is-mobile #mElTb .m-tb-pane[hidden] { display: none; }
body.is-mobile #mElTb .m-tb-val {
  font-size: 12px; font-family: var(--mono); color: var(--tx);
  min-width: 50px; text-align: right;
  font-weight: 600;
}

/* Sliders communs */
body.is-mobile #mElTb input[type=range] {
  flex: 1; min-width: 100px;
  height: 28px;
  accent-color: var(--ac);
  background: transparent;
  -webkit-appearance: none; appearance: none;
  margin: 0;
}
body.is-mobile #mElTb input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(0,0,0,.10); border-radius: 2px;
}
body.is-mobile #mElTb input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,113,227,.35);
  margin-top: -9px;
}
body.is-mobile #mElTb input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac); border: 2px solid #fff;
}

/* Inputs */
body.is-mobile #mElTb input[type=text],
body.is-mobile #mElTb input[type=number],
body.is-mobile #mElTb input[type=color] {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--bd);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
body.is-mobile #mElTb input[type=text]:focus,
body.is-mobile #mElTb input[type=number]:focus { border-color: var(--ac); }
body.is-mobile #mElTb input[type=color] { height: 40px; padding: 4px; cursor: pointer; }

/* Bouton color picker → ouvre Pantone modal */
body.is-mobile #mElTb .m-tb-cpick {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1.5px solid var(--bd);
  border-radius: 9px;
  background: #fff;
  cursor: pointer; touch-action: manipulation;
  font-family: inherit;
}
body.is-mobile #mElTb .m-tb-cpick-sw {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(0,0,0,.10);
  background: #111;
  flex-shrink: 0;
}
body.is-mobile #mElTb .m-tb-cpick-lbl {
  flex: 1;
  font-size: 12px; font-family: var(--mono);
  color: var(--tx); font-weight: 600;
  text-align: left;
}
body.is-mobile #mElTb .m-tb-cpick-arr {
  font-size: 18px; color: var(--t3); font-weight: 300;
}

/* Reset rotation */
body.is-mobile #mElTb .m-tb-reset {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border: 1px solid var(--bd);
  background: var(--s2);
  border-radius: 8px;
  font-size: 14px; cursor: pointer;
  display: grid; place-items: center;
}

/* Police picker */
body.is-mobile #mElTb .m-tb-fonts {
  display: flex; gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
body.is-mobile #mElTb .m-tb-font {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  background: #fff;
  font-size: 14px; font-weight: 700;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
}
body.is-mobile #mElTb .m-tb-font.on {
  border-color: var(--ac);
  background: rgba(0,113,227,.10);
  color: var(--ac);
}

/* Position : tous les contrôles inline horizontal */
body.is-mobile #mElTb .m-tb-grid {
  display: contents;
}
body.is-mobile #mElTb .m-tb-grid label {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  color: var(--t2);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
body.is-mobile #mElTb .m-tb-grid label input[type=number] {
  width: 56px; min-width: 56px;
  padding: 5px 6px;
}
body.is-mobile #mElTb .m-tb-grid label input[type=range] {
  width: 90px; min-width: 90px;
}
body.is-mobile #mElTb .m-tb-center {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ac);
  color: #fff;
  font-size: 11px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
}

/* Flip — pills inline */
body.is-mobile #mElTb .m-tb-flip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1.5px solid var(--bd);
  background: #fff;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--tx);
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  min-height: 32px;
}
body.is-mobile #mElTb .m-tb-flip.on {
  border-color: var(--ac);
  background: rgba(0,113,227,.10);
  color: var(--ac);
}

/* (Actions Dup/Suppr migrées en mini-boutons dans le header.) */