/* ============================================================
   SHUFFLE DRUMMER — Step sequencer : grille, navigation par mesure, save/undo
   ============================================================ */
  /* Seq shuffle per track buttons */
  .seq-shuf-btn { width:16px;height:16px;flex-shrink:0;background:linear-gradient(180deg,#3a3b40,#2a2b30);border:1px solid var(--metal-mid);color:var(--smp-text);font-size:10px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color 80ms,border-color 80ms;margin-left:3px; }
  /* 82px = aligne la queue des lignes SP/PNO/pads sur celle des pistes drums
     (ts-mini 62+4 + shuf 16+3 = 85 ; clear 82+3 = 85). */
  .seq-clear-row-btn { width:82px;height:16px;flex-shrink:0;background:linear-gradient(180deg,#3a3b40,#2a2b30);border:1px solid #ff504066;color:#ff5040;font-size:9px;letter-spacing:0.12em;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color 80ms,border-color 80ms;margin-left:3px; }
  .seq-clear-row-btn:hover { color:#ff7060;border-color:#ff5040aa; }
  .seq-shuf-btn:hover { color:#ff9440;border-color:#ff9440aa; }
  .seq-shuf-btn.lit { color:var(--accent-bright);border-color:var(--accent-bright); }
  /* Seq timeshift mini slider per row (agrandi 2026-07 : 48→62px) */
  .seq-ts-mini { width:62px;height:22px;flex-shrink:0;position:relative;cursor:ew-resize;touch-action:none;margin-left:4px; }
  .seq-ts-mini-track { position:absolute;left:4px;right:4px;height:5px;top:50%;margin-top:-2.5px;background:#2a2a2a;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5); }
  .seq-ts-mini-center { position:absolute;left:50%;width:1px;height:12px;background:#666;top:50%;margin-top:-6px; }
  .seq-ts-mini-thumb { position:absolute;top:50%;width:12px;height:18px;margin-top:-9px;margin-left:-6px;background:linear-gradient(180deg,var(--metal-mid),var(--metal-dark));border:1px solid var(--smp-text);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.5); }
  .seq-ts-mini-thumb.active { background:linear-gradient(180deg,#4a9fff,#2266cc);border-color:#88ccff;box-shadow:0 0 5px rgba(74,159,255,0.5); }

  /* Step sequencer — full pane */
  #pane-seq {
    padding: 8px 8px 6px;
  }
  #step-seq {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }
  .seq-row {
    display: flex;
    gap: 0;
    align-items: center;
    width: 100%;
  }
  .seq-label {
    width: 13px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: right;
    flex-shrink: 0;
    font-weight: 700;
    padding-right: 5px;
    color: #7a7470;
  }
  .seq-steps-wrap {
    display: flex;
    flex: 1;
    gap: 4px;
  }
  .seq-group {
    display: flex;
    flex: 1;
    gap: 2px;
    background: rgba(0,0,0,0.18);
    border-radius: 5px;
    padding: 2px;
  }
  .seq-step {
    flex: 1;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, #302e2b 0%, #252320 100%);
    border: 1px solid #3e3c39;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: background 70ms, border-color 70ms, box-shadow 70ms, transform 60ms;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    touch-action: none;
  }
  .seq-step:hover:not(.on) {
    background: linear-gradient(180deg, #3a3835 0%, #2e2c29 100%);
    border-color: #5e5c58;
  }
  /* Barre de vélocité (0-127) — hauteur = vélocité, on tire le haut vers le bas */
  .seq-step-fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0%;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--track-color, var(--accent-bright)) 85%, white 15%),
      var(--track-color, var(--accent))
    );
    pointer-events: none;
    border-radius: 0 0 3px 3px;
  }
  /* Marqueur de micro-timing (offset en ticks) : fine barre verticale qui
     glisse dans la cellule. Centrée = sur grille (masquée). La barre de
     vélocité (.seq-step-fill) ne bouge pas → coins arrondis préservés. */
  .seq-step-micro {
    position: absolute;
    top: 2px; bottom: 2px;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
    background: #6adf6a;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 3px currentColor;
    transition: left 0.04s ease, opacity 0.1s ease;
  }
  /* Badge ratchet (×2/×3/×4) — molette sur une cellule active. */
  .seq-step-ratchet {
    position: absolute;
    top: 0; right: 1px;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
  }
  .seq-step.on {
    border-color: color-mix(in srgb, var(--track-color, var(--accent)) 60%, transparent 40%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 7px color-mix(in srgb, var(--track-color, #ff7a1a) 45%, transparent),
      0 0 2px color-mix(in srgb, var(--track-color, #ff7a1a) 30%, transparent);
  }
  .seq-step.playing {
    transform: scaleY(0.94);
  }
  .seq-step.playing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
  }

  /* ── MICRO-TIMING (state.microTiming en ticks) ──
     --mtf = offset en fraction de cellule (-0.5..+0.5), posé par updateSeqCell.
     Les steps décalés se dessinent TOUJOURS décalés (mode TIMING ou pas) —
     le son ET l'œil racontent la même chose. Le mode TIMING ne change que le
     geste (drag ⟷ = édition). .playing garde son scaleY → transforms composés. */
  .seq-step.on {
    transform: translateX(calc(var(--mtf, 0) * 100%));
  }
  .seq-step.on.playing {
    transform: translateX(calc(var(--mtf, 0) * 100%)) scaleY(0.94);
  }
  #step-seq.sd-timing .seq-step.on { cursor: ew-resize; }
  #step-seq.sd-timing .seq-step.on.mt-shifted { border-color: #6adf6a99; }

  /* Bouton TIMING — même gabarit que GRID/2BARS (.seq-top-btn).
     Inactif : FOND orange ; actif : FOND vert. Police foncée en thème clair,
     claire en skin sombre (voir skin-dark.css). Sélecteurs doublés pour
     battre .seq-top-btn défini en fin de fichier — pas de !important (ADR-16). */
  .seq-top-btn.seq-timing-btn {
    background: linear-gradient(180deg,#ff9a3a,#ff7a1a);
    border-color: #b35410;
    color: #1a1108;
  }
  .seq-top-btn.seq-timing-btn:hover {
    background: linear-gradient(180deg,#ffae58,#ff8c34);
    border-color: #8a3f0a;
    color: #000;
  }
  .seq-top-btn.seq-timing-btn.active {
    color: #0c1a0c;
    background: linear-gradient(180deg,#8aef8a,#4cbf4c);
    border-color: #2f7a2f;
    box-shadow: 0 0 6px rgba(106,223,106,0.45);
  }

  /* ── Barre de mesures scrubbable + curseur de lecture ── */
  /* Conteneur invisible — les segments portent seuls leur contour noir
     (le cadre du conteneur faisait un double contour). */
  .seq-bar-strip {
    position: relative;
    display: flex;
    gap: 3px;
    align-items: stretch;
    height: 25px;
    min-width: 140px;
    flex: 1 1 auto;
    cursor: ew-resize;
    touch-action: none;
    background: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
  }
  .seq-bar-strip .seq-bar-pip { display: none; }
  /* Segment inactif : contour noir, fond gris */
  .seq-bar-strip .seq-bar-pip.in-range {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #d8d4cc;
    background: linear-gradient(180deg,#54504a,#3e3b36);
    border: 1px solid #000;
    border-radius: 2px;
    box-sizing: border-box;
    user-select: none;
  }
  .seq-bar-strip .seq-bar-pip.in-range:hover:not(.current) {
    background: linear-gradient(180deg,#64605a,#4e4b46);
  }
  /* Mesure affichée/jouée : contour noir, fond VERT (suivi de lecture) */
  .seq-bar-strip .seq-bar-pip.in-range.current {
    background: linear-gradient(180deg,#8aef8a,#4cbf4c);
    border-color: #000;
    color: #0c1a0c;
  }
  /* Curseur de lecture — animé en continu par rAF sur l'horloge audio
     (_cursorLoop, sequencer.js). PAS de transition CSS : c'est le rAF qui
     fait la fluidité, une transition ne ferait que traîner derrière. */
  .seq-strip-cursor {
    position: absolute;
    top: 1px; bottom: 1px;
    width: 2px;
    left: 0;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(255,255,255,0.7);
    border-radius: 1px;
    pointer-events: none;
    will-change: left;
    z-index: 2;
  }
  /* Lignes lecture seule SEQ : sampler (SP, bleu) / piano (PNO, violet) —
     vélocité éditable, position non éditable. */
  .seq-row-extra { margin-top: 2px; }
  .seq-step-smp .seq-step-fill {
    background: linear-gradient(180deg, #7adfff, #2a9ec0);
  }
  .seq-step-smp.on {
    border-color: rgba(74,159,255,0.6);
    box-shadow: 0 0 7px rgba(74,159,255,0.45), 0 0 2px rgba(74,159,255,0.3);
    cursor: ns-resize;
  }
  .seq-step-smp.on::before { background: #7adfff; }
  .seq-step-pno .seq-step-fill {
    background: linear-gradient(180deg, #e0b8ff, #aa66dd);
  }
  .seq-step-pno.on {
    border-color: rgba(204,136,255,0.6);
    box-shadow: 0 0 7px rgba(204,136,255,0.45), 0 0 2px rgba(204,136,255,0.3);
    cursor: ns-resize;
  }
  .seq-step-pno.on::before { background: #e0b8ff; }
  /* Cases SMP vides : identiques aux cases drum (éditables via popup, ADR-51)
     → pas d'atténuation, curseur cliquable. Seul PNO reste atténué (édition
     de vélocité uniquement sur note existante). */
  .seq-step-pno:not(.on) {
    cursor: default;
    opacity: 0.45;
  }
  .seq-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    gap: 6px;
  }
  .seq-header-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #3a3630;
    flex: 1;
  }
  /* Bar navigation */
  .seq-nav {
    display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
    flex-wrap: wrap;
    /* trait noir fin sous la ligne de contrôles (séparation avec la grille) */
    border-bottom: 1px solid #0a0a0a;
    padding-bottom: 6px;
  }
  .seq-nav-btn {
    width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0;
    background: linear-gradient(180deg,var(--metal-mid),var(--metal-dark));
    border: 1px solid var(--border-color); color: #c0bcb8;
    font-size: 16px; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px var(--shadow-deep);
    user-select: none; line-height: 1;
    transition: color 80ms, border-color 80ms;
  }
  .seq-nav-btn:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
  .seq-nav-btn:active { }
  /* (anciens pips ronds ◀ ●●● ▶ supprimés 2026-07-10 — remplacés par la
     barre de mesures .seq-bar-strip ; leurs règles orange écrasaient le
     vert des segments, même spécificité mais plus bas dans le fichier) */
  .seq-bar-label {
    font-size: 11px; letter-spacing: 0.14em; color: var(--accent-bright);
    font-weight: 700; margin-left: 2px;
  }
  .seq-clear-btn {
    font-size: 10px; letter-spacing: 0.12em;
    background: none; border: 1px solid var(--muted-border);
    border-radius: 3px; padding: 2px 6px;
    cursor: pointer; font-family: inherit; color: #3a3630;
  }
  .seq-clear-btn:hover { color: var(--danger); border-color: var(--danger); }
  .seq-len-btn {
    font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
    background: none; border: 1px solid #5a5654;
    border-radius: 4px; padding: 4px 8px;
    cursor: pointer; font-family: inherit; color: #6a6460;
    transition: color 80ms, border-color 80ms;
  }
  .seq-len-btn:hover { color: #ccc; border-color: #aaa; }
  .seq-len-btn.active { color: var(--success); border-color: var(--success); box-shadow: 0 0 5px rgba(106,223,106,0.3); }
  .seq-beat-nums {
    display: flex;
    padding-left: 13px; /* seq-label width */
    padding-right: 85px; /* seq-ts-mini(62+4) + seq-shuf-btn(16+3) */
    margin-bottom: 2px;
    gap: 4px;
  }
  .seq-beat-group {
    display: flex;
    flex: 1;
    gap: 2px;
    padding: 0 2px;
  }
  /* Numéros 1..16 en NOIR — le blanc ne se lisait pas sur le thème clair.
     (le skin sombre admin les repasse en clair, voir skin-dark.css) */
  .seq-beat-num {
    flex: 1;
    font-size: 11px;
    color: #2e2a24;
    text-align: center;
    letter-spacing: 0;
  }
  .seq-beat-num.downbeat { color: #000000; font-weight: 700; font-size: 13px; }

  /* Save/Load buttons */
  .pattern-actions {
    display: flex; gap: 5px; align-items: center;
  }
  .pact-btn {
    padding: 4px 9px; font-size: 11px; line-height: 15px; white-space: nowrap;
    letter-spacing: 0.14em; font-weight: 700;
    font-family: inherit; cursor: pointer; border-radius: 3px;
    transition: all 0.12s;
  }
  .pact-btn.save {
    background: var(--metal-dark); border: 1px solid var(--accent-dim); color: var(--accent-bright);
  }
  .pact-btn.save:hover { background: #ff7a1a22; border-color: var(--accent); }
  /* NEW (footer) : même fond que SAVE, texte + contour blancs. */
  .pact-btn.new {
    background: var(--metal-dark); border: 1px solid rgba(255,255,255,0.75); color: #fff;
  }
  .pact-btn.new:hover { background: #ffffff22; border-color: #fff; }
  .pact-btn.load {
    background: var(--metal-dark); border: 1px solid #6a9a6a66; color: #6acf6a;
  }
  .pact-btn.load:hover { background: #6acf6a22; border-color: #6acf6a; }

  /* Undo button */
  .undo-btn {
    padding: 3px 8px; font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
    font-family: inherit; cursor: pointer; border-radius: 3px;
    background: var(--metal-dark); border: 1px solid #8a8490; color: #b0acaa;
    transition: all 0.12s;
  }
  .undo-btn:hover { background: #5a5b6022; border-color: #b0acaa; color: #e0dcda; }
  .undo-btn:disabled { opacity: 0.35; cursor: default; }
  /* UNDO est désormais stylé comme le bouton 12 BITS (.pitch-btn, gris,
     en permanence — y compris à l'état disabled). */
  #undo-btn:disabled { opacity: 1; }
  /* Contact — blanc cassé, texte noir */
  #contact-btn { background: #e8e0d4; border-color: #c8c0b0; color: #000; }
  #contact-btn:hover { background: #fff; border-color: #e0d8cc; color: #000; }

  /* ── Gabarit commun de la ligne de contrôle du séquenceur ──
     GRID / TIMING / 2BARS / x2 / x4 : métriques IDENTIQUES à .pact-btn
     (SAVE/LOAD du séquenceur) — boutons uniformes dans tout le pane.
     Défini en FIN de fichier pour prendre le pas sur .seq-len-btn. */
  .seq-top-btn {
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    background: none;
    border: 1px solid #6a645c;
    border-radius: 3px;
    color: #33302a;
    cursor: pointer;
    font-family: inherit;
    transition: color 80ms, border-color 80ms;
  }
  .seq-top-btn:hover { color: #000; border-color: #3a342e; }
  .seq-len-btn.seq-top-btn.active { color: var(--success); border-color: var(--success); }
  /* CLEAR ALL BARS — tout à droite de la ligne, FOND orange (comme TIMING).
     Police foncée en thème clair, claire en skin sombre (skin-dark.css). */
  .seq-clear-btn {
    box-sizing: border-box; padding: 4px 9px; flex-shrink: 0;
    font-size: 11px; line-height: 15px; font-weight: 700;
    background: linear-gradient(180deg,#ff9a3a,#ff7a1a);
    border-color: #b35410;
    color: #1a1108;
  }
  .seq-clear-btn:hover {
    background: linear-gradient(180deg,#ffae58,#ff8c34);
    border-color: #8a3f0a;
    color: #000;
  }