/* ============================================================
   SHUFFLE DRUMMER — Layout TÉLÉPHONE de la vraie machine
   ------------------------------------------------------------
   Chargée en dernier dans index.html. TOUTES les règles sont
   scopées `html.sd-mobile` (classe posée par le script de tête
   d'index.html sur tactile + écran ≤760px) → ZÉRO effet desktop.
   main.js::fitMachine() ne scale PAS la machine dans ce mode.

   PRINCIPE (demande utilisateur 2026-07-04) : **AUCUN scroll
   vertical de page**. La machine est une app plein écran
   (100dvh, overflow hidden) en colonne flex :
     edge → top (LCD | roue | knobs) → ctrl-row → mixer →
     bottom-comp (flex:1) → footer
   Les seuls défilements : mixer et #step-seq à l'HORIZONTALE,
   et l'INTÉRIEUR des panneaux d'onglet (vertical interne).
   Les `!important` ne servent QUE contre des styles inline
   (ADR-16 : les inline d'index.html sont préservés).
   ============================================================ */

/* ── App plein écran ────────────────────────────────────── */
html.sd-mobile,
html.sd-mobile body {
  height: 100dvh;
  overflow: hidden;
  /* pas de rubber-band iOS qui tire toute l'app */
  overscroll-behavior: none;
}
html.sd-mobile body {
  display: block;
  padding: 0;
  min-height: 0;
}

/* ── Confort tactile iOS ────────────────────────────────── */
/* pas de flash gris au tap, pas de loupe/callout d'appui long
   (l'appui long est un geste de l'app : menu roue, pads…) */
html.sd-mobile * {
  -webkit-tap-highlight-color: transparent;
}
html.sd-mobile *:not(input):not(textarea) {
  -webkit-touch-callout: none;
}
/* tue le zoom double-tap sur les boutons (les faders/knobs/steps ont
   déjà touch-action:none, le drum-btn son pan-x — plus spécifiques) */
html.sd-mobile button {
  touch-action: manipulation;
}
html.sd-mobile .machine {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 6px calc(env(safe-area-inset-bottom, 0px) + 4px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* tout est fixe, seul le compartiment bas absorbe le reste */
html.sd-mobile .machine > * { flex-shrink: 0; }

/* ── Edge (header) : UNE seule ligne compacte ───────────── */
html.sd-mobile .edge {
  flex-wrap: nowrap;
  gap: 4px;
  padding-bottom: 3px;
  margin-bottom: 4px;
}
html.sd-mobile .edge-title {
  font-size: 12px;
  letter-spacing: 0.05em;
  transform: none;
  white-space: nowrap;
}
html.sd-mobile .edge-cat-shadow { height: 18px; margin: 0 0 0 -3px; }
html.sd-mobile .edge > span:last-child {
  transform: none !important;   /* inline translateY(7px) */
  flex-wrap: nowrap;
  gap: 4px !important;
  min-width: 0;
  overflow-x: auto;             /* si ça ne tient pas, les boutons défilent */
  scrollbar-width: none;
}
html.sd-mobile .edge > span:last-child::-webkit-scrollbar { display: none; }
html.sd-mobile .edge .pact-btn,
html.sd-mobile .edge .midi-edge-btn,
html.sd-mobile .edge .help-btn,
html.sd-mobile .edge .vol-btn {
  height: 24px;
  font-size: 8px;
  padding: 2px 4px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
html.sd-mobile .edge > span:last-child > span { gap: 3px !important; }

/* ── Top : LCD | roue+transport | 4 knobs — UNE rangée ──── */
html.sd-mobile .top {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 6px;
  margin-bottom: 6px;
  align-items: center;
}
html.sd-mobile .screen-col { min-width: 0; align-self: stretch; }
html.sd-mobile .screen {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 7px 9px;
  overflow: hidden;
}
html.sd-mobile .screen-bpm { font-size: 19px; }
/* TIME CORRECT (élément inline créé par tabs.js) : compact pour tenir
   sur la ligne du BPM dans le LCD étroit ; filets anti-coupure :
   la ligne BPM/TC peut passer en 2 lignes (:has, iOS 15.4+) et le
   texte s'ellipse plutôt que d'être tranché par le bord du LCD. */
html.sd-mobile #scr-tc {
  font-size: 8px !important;
  letter-spacing: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.sd-mobile .screen div:has(> #scr-tc) { flex-wrap: wrap; }
html.sd-mobile .screen-status { font-size: 9px; margin-top: 2px; }
html.sd-mobile .screen-meta { font-size: 8px; margin-top: 2px; }
html.sd-mobile #scr-sample { font-size: 9px !important; margin-top: 2px !important; min-height: 10px !important; }
html.sd-mobile #scr-bars-wrap { margin-top: 3px !important; }
html.sd-mobile .wheel-outer { width: 92px; height: 92px; }
html.sd-mobile .ptn-num { font-size: 19px; }
html.sd-mobile .ptn-name { font-size: 8px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sd-mobile .wheel-label { font-size: 8px; letter-spacing: 0.2em; margin-top: 2px; }
/* Cibles ADAPTATIVES : minimum compact (petits écrans, zéro-scroll
   garanti), et elles grandissent vers ~44pt sur les écrans hauts
   (iPhone plein écran / PWA) grâce au clamp en dvh. */
html.sd-mobile .transport-row { width: 98px; margin-top: 4px; gap: 3px; }
html.sd-mobile .trn-btn { height: clamp(30px, 5dvh, 42px); font-size: 10px; border-radius: 3px; }
/* wrapper inline (fx-col + gpitch) — 3e enfant du .top */
html.sd-mobile .top > div:last-child { justify-content: center !important; }
html.sd-mobile .fx-col { min-width: 0; gap: 5px; }
html.sd-mobile .knob-pair { gap: 6px; }
html.sd-mobile .knob-body { width: 38px; height: 38px; }
html.sd-mobile .knob-label { font-size: 8px; margin-top: 2px; letter-spacing: 0.1em; }
html.sd-mobile .knob-value { font-size: 8px; min-height: 9px; }
html.sd-mobile .knob-wrap { min-width: 40px; gap: 1px; }

/* ── Rangée DRUMS BANK / 12 BITS / … : 2 lignes compactes ── */
html.sd-mobile .ctrl-row {
  flex-wrap: wrap;
  gap: 4px !important;
  margin: 0 0 6px !important;   /* inline margin:8px 0 8px */
}
html.sd-mobile .ctrl-row .pitch-btn,
html.sd-mobile .ctrl-row #beat-card-btn {
  flex: 1 1 23%;
  height: clamp(30px, 4.8dvh, 40px);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 0 3px;
  border-radius: 3px;
}
html.sd-mobile .ctrl-row #beat-card-btn {
  margin-left: 0 !important;    /* inline margin-left:auto */
  height: clamp(30px, 4.8dvh, 40px) !important;
}

/* ── Mixer : hauteur FIXE compacte + défilement horizontal ── */
html.sd-mobile .mixer {
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  gap: 5px;
  padding: 8px 6px 6px;
  margin-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.sd-mobile .mixer::-webkit-scrollbar { display: none; }
html.sd-mobile .channel { flex: 0 0 52px; gap: 4px; }
html.sd-mobile .fader-track { width: 44px; height: 64px; }
html.sd-mobile .drum-btn {
  width: 46px;
  height: 40px;
  font-size: 13px;
  /* pan-x : le doigt peut faire défiler le mixer depuis les boutons de
     voie (les faders gardent touch-action:none pour le drag vertical). */
  touch-action: pan-x;
}

/* ── Onglet BEAT (vue faders) — bascule mixer ⟷ panneaux ──
   Le bouton #btab-beat n'existe qu'en sd-mobile (créé par main.js).
   body.sd-beat-view = vue faders : les panneaux du bas se replient
   (seule la barre d'onglets reste) et le mixer prend toute la hauteur,
   glissières comprises. Sans la classe : le mixer s'efface et le
   panneau actif (sampler/pads/step…) devient géant. */
/* !important requis : sampler.css pose `#pane-sampler.active
   { display:flex !important; }` — face à un important, seule une règle
   important PLUS SPÉCIFIQUE l'emporte. */
html.sd-mobile body.sd-beat-view .bottom-pane.active,
html.sd-mobile body.sd-beat-view #pane-sampler.active { display: none !important; }
html.sd-mobile body.sd-beat-view .bottom-comp {
  flex: 0 0 auto;
  min-height: 0;
}
html.sd-mobile body.sd-beat-view .mixer {
  flex: 1 1 auto;
  min-height: 150px;
}
html.sd-mobile body.sd-beat-view .fader-track {
  height: auto;
  flex: 1 1 auto;
  min-height: 64px;
}
html.sd-mobile body:not(.sd-beat-view) .mixer { display: none; }
/* EXCEPTION : dans l'onglet SEQUENCER (PRINT capture le mix courant),
   les faders restent visibles en compact au-dessus du panneau —
   sinon impossible de doser les niveaux avant un PRINT. (:has,
   iOS 15.4+ — ailleurs le mixer reste accessible via BEAT.) */
html.sd-mobile body:not(.sd-beat-view):has(#pane-pattern.active) .mixer {
  display: flex;
}

/* ── Onglet SEQUENCER compact : PRINT · RESET · EXPORT sur une ligne ──
   Libellés raccourcis (RESET SEQUENCES → RESET, EXPORT SEQUENCES .WAV
   → EXPORT ; les title anglais restent) et TOTAL BARS retiré. */
html.sd-mobile .pat-header { flex-wrap: wrap; row-gap: 4px; }
html.sd-mobile #pat-total-bars { display: none; }
html.sd-mobile .pat-reset-btn,
html.sd-mobile .pat-export-btn {
  font-size: 0;
  letter-spacing: 0;
}
html.sd-mobile .pat-reset-btn::after {
  content: '⟲ RESET';
  font-size: 10px;
  letter-spacing: 0.1em;
}
html.sd-mobile .pat-export-btn::after {
  content: '↓ EXPORT';
  font-size: 10px;
  letter-spacing: 0.1em;
}
/* en vue BEAT, l'onglet de panneau resté .active ne doit pas le paraître */
html.sd-mobile body.sd-beat-view .btab.active:not(#btab-beat) {
  color: var(--text-knob);
  border-bottom-color: transparent;
  background: none;
  text-shadow: none;
}

/* ── Compartiment bas : absorbe TOUT le reste de l'écran ─── */
html.sd-mobile .bottom-comp {
  flex: 1 1 auto;
  min-height: 110px;
  height: auto;
  margin-bottom: 4px;
}
/* onglets : UNE ligne défilante, TOUJOURS EN BAS du compartiment
   (sous le panneau, à portée de pouce — même position qu'en vue BEAT) */
html.sd-mobile .bottom-tabs {
  order: 2;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: none;
  border-top: 1px solid #141518;
}
html.sd-mobile .bottom-tabs::-webkit-scrollbar { display: none; }
html.sd-mobile .bottom-comp > .bottom-pane { order: 1; }
html.sd-mobile .btab {
  flex: 0 0 auto;
  padding: clamp(9px, 1.5dvh, 14px) 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  /* barre en bas → l'indicateur d'onglet actif passe en HAUT du bouton */
  border-bottom: none;
  border-top: 2px solid transparent;
}
html.sd-mobile .btab.active { border-bottom: none; border-top-color: var(--accent); }
html.sd-mobile .btab-settings { flex: 0 0 40px; font-size: 15px; }

/* ── Chevrons de défilement (créés par main.js, mobile uniquement) ──
   Indiquent qu'une zone défile horizontalement (mixer, grille STEP,
   barre d'onglets) ; visibles seulement quand du contenu est caché de
   ce côté ; tap = fait défiler d'un écran. Esthétique LCD : capsule
   sombre translucide + chevron orange. */
html.sd-mobile .sd-scroll-hint {
  position: fixed;
  z-index: 800;
  width: 20px;
  height: 46px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--accent-dim);
  border-radius: 5px;
  background: rgba(21, 12, 2, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--accent-bright);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
html.sd-mobile .sd-scroll-hint.visible { opacity: 0.9; pointer-events: auto; }
/* panneaux : scroll vertical INTERNE uniquement */
html.sd-mobile .bottom-pane {
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}

/* ── STEP (séquenceur) : défilement horizontal ──────────── */
html.sd-mobile #step-seq {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
/* la nav (◀ pips M1 ▶ :2 4M x2) wrappe sur 2 lignes au lieu de forcer
   un débordement horizontal de toute la grille */
html.sd-mobile #step-seq .seq-nav {
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-bottom: 4px;
}
html.sd-mobile #step-seq .seq-beat-nums,
html.sd-mobile #step-seq .seq-row {
  width: max-content;
  min-width: 100%;
}
/* Steps FLUIDES : les 16 pas d'une mesure tiennent à l'écran en 1/16
   (largeur mini 17px → pas de scroll) ; en 1/32+ le contenu déborde et
   les chevrons/scroll prennent le relais. Le mini-timeshift (drag de
   44px, trop fin au doigt) est masqué — il reste sur desktop. */
html.sd-mobile .seq-step {
  flex: 1 0 16px;
  width: auto;
  min-width: 16px;
  height: clamp(30px, 4.8dvh, 40px);
}
html.sd-mobile .seq-beat-num { flex: 1 0 16px; width: auto; min-width: 16px; }
html.sd-mobile .seq-group,
html.sd-mobile .seq-beat-group { flex: 1 1 auto; gap: 1px; padding: 1px; }
html.sd-mobile .seq-steps-wrap,
html.sd-mobile #step-seq .seq-beat-nums { gap: 3px; }
html.sd-mobile .seq-ts-mini { display: none; }
/* le bouton CLEAR (68px) des rangées SMP/PNO devient un ✕ compact,
   aligné sur le ⟳ des drums — sinon ces deux rangées débordent et
   forcent le scroll de TOUTE la grille */
html.sd-mobile .seq-clear-row-btn {
  width: 22px;
  height: 22px;
  font-size: 0;
  letter-spacing: 0;
}
html.sd-mobile .seq-clear-row-btn::before {
  content: '✕';
  font-size: 11px;
}
html.sd-mobile #step-seq .seq-beat-nums { padding-left: 16px; padding-right: 29px; }
html.sd-mobile .seq-label { width: 16px; font-size: 11px; }
html.sd-mobile .seq-nav-btn { width: 34px; height: 34px; }
html.sd-mobile .seq-bar-pip { width: 20px; height: 12px; }
html.sd-mobile .seq-len-btn { padding: 6px 8px; }
html.sd-mobile .seq-clear-btn { padding: 6px 6px; }
html.sd-mobile .seq-ts-mini { width: 44px; height: 22px; }
html.sd-mobile .seq-shuf-btn { width: 22px; height: 22px; font-size: 12px; }
/* (hint « Right click to double step » supprimé partout 2026-07-10) */

/* ── FX : une seule colonne (sliders, puis rack MFX) ────── */
/* le pane doit SCROLLER verticalement (desktop : overflow:hidden +
   grid flex:1 — ici le contenu en colonne dépasse la hauteur) */
html.sd-mobile #pane-fx.active { overflow-y: auto; }
html.sd-mobile #pane-fx .fx-pane-grid { flex: none; min-height: auto; }
html.sd-mobile .fx-pane-grid { flex-direction: column; gap: 10px; }
html.sd-mobile .fx-left-col { width: 100%; max-width: none; min-width: 0; }
html.sd-mobile .fx-right-col { width: 100%; }
/* pads MFX plus GROS (le pane scrolle en interne, la hauteur est libre) */
html.sd-mobile .mfx-pads-grid {
  flex: none;
  grid-template-rows: repeat(4, minmax(60px, auto));
  gap: 6px;
}
html.sd-mobile .mfx-pad-btn { font-size: 10px; letter-spacing: 0.08em; }

/* ── MASTER : titres compacts ; celui du BUS COMPRESSOR
   (2 boutons absolute à droite) poussé à gauche ──────────── */
html.sd-mobile #pane-comp .pane-section-title { font-size: 11px; letter-spacing: 0.12em; }
html.sd-mobile #pane-comp div[style*="cat.png"] .pane-section-title { margin-right: auto; }

/* ── SAMPLER : 16 slice-pads sur 2 rangées de 8 ─────────── */
html.sd-mobile #smp-pads { grid-template-columns: repeat(8, 1fr) !important; }
html.sd-mobile #smp-pads .smp-pad { min-height: 38px; }

/* ── Footer : UNE ligne compacte ────────────────────────── */
html.sd-mobile .footer {
  flex-wrap: nowrap;
  gap: 6px !important;
  margin-top: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  overflow-x: auto;
  scrollbar-width: none;
}
html.sd-mobile .footer::-webkit-scrollbar { display: none; }
html.sd-mobile .footer .pact-btn,
html.sd-mobile .footer button {
  min-height: 24px;
  font-size: 9px !important;
  padding: 2px 7px !important;
  white-space: nowrap;
}
html.sd-mobile .footer > span:first-child { white-space: nowrap; }
/* Liens SEO du footer (Drum Machine / Beat Maker / MPC Online) : masqués en
   mode téléphone — ils allongeaient la ligne défilante et poussaient
   SAVE/LOAD hors écran. Le maillage crawl reste assuré par le sitemap et le
   rendu desktop. */
html.sd-mobile .footer .seo-footer-link { display: none; }

/* ── Bannière compte (CTA freemium) : compacte, UNE ligne
   (reserveCtaSpace pose un padding-bottom sur body → la
   machine 100% se rétrécit d'autant : rien n'est recouvert) ── */
html.sd-mobile body.locked-out #auth-cta { gap: 6px; padding: 4px 8px; flex-wrap: nowrap; }
html.sd-mobile #auth-cta span { font-size: 8px; letter-spacing: 0.02em; }
html.sd-mobile #auth-cta-fish { height: 16px; }
html.sd-mobile #auth-cta button { padding: 4px 9px; font-size: 9px; white-space: nowrap; }

/* ── Popups SAVE / LOAD (styles inline → !important requis) ──
   Position UNIFORME de tous les gros popups : calés en haut (9dvh),
   plafond 62dvh → le bas de l'écran reste libre et cliquable. */
html.sd-mobile #save-slot-popup,
html.sd-mobile #load-popup {
  left: 8px !important;
  right: 8px !important;
  top: 9dvh !important;
  bottom: auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 62dvh;
  overflow-y: auto;
  padding: 16px 12px !important;
}

/* ── GROS POPUPS UNIFORMISÉS (compte, note de màj, chat, contact,
   login) : même gabarit que SAVE — carte pleine largeur alignée à
   9dvh du haut, plafond 62dvh avec scroll interne. Le fond reste
   largement tapable en bas pour fermer d'un pouce.
   (!important : ces overlays/cartes sont stylés inline, ADR-16.) ── */
html.sd-mobile #account-overlay,
html.sd-mobile #update-popup-overlay,
html.sd-mobile #cat-popup-overlay,
html.sd-mobile #contact-overlay,
html.sd-mobile #auth-overlay {
  align-items: flex-start !important;
  padding: 9dvh 8px 0 !important;
}
html.sd-mobile .acc-card,
html.sd-mobile #update-popup-overlay > div,
html.sd-mobile #cat-popup-overlay > div,
html.sd-mobile #contact-box,
html.sd-mobile #auth-modal {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 62dvh !important;
  overflow-y: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}

/* popups de piste (long-press K/S/H/O/C/R et LOAD sample/piano) :
   positionnés sous leur bouton en desktop → sous le mixer ils sortaient
   de l'écran. Même gabarit uniforme, plein écran remonté. */
html.sd-mobile #sample-popup,
html.sd-mobile #single-file-popup {
  left: 8px !important;
  right: 8px !important;
  top: 9dvh !important;
  bottom: auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 62dvh;
  overflow-y: auto;
}

/* ── Menu contextuel de la roue (long-press) : jamais hors écran ── */
html.sd-mobile #wheel-menu-popup {
  left: 8px !important;
  right: 8px !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 78dvh;
  overflow-y: auto;
}