/* ============================================================================
   LOOP MACHINE — habillage
   ----------------------------------------------------------------------------
   Direction : un appareil de studio, pas un formulaire. Deux references
   assumees — la waveform dominante et le chassis sombre d'un sampler pro, et
   la lecture en gros chiffres d'une interface de jeu de sport (le REGLAGE est
   la valeur, pas l'etiquette).

   Deux principes qui portent tout :
     1. La waveform est le heros. Elle est haute, pleine, degradee.
     2. Chaque parametre est une carte-stat : chiffre enorme, unite dessous,
        etiquette mono minuscule au-dessus. Aucune uniformite.

   Motif signature : la coupe en biais (clip-path) sur le chassis et les cartes.
   Palette : uniquement les tokens de site.css.
   ============================================================================ */

/* --- chassis -------------------------------------------------------------- */
.lm-tool {
  --lm-cut: 18px;
  position: relative;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg) 100%);
  border: 1px solid var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--lm-cut)),
                     calc(100% - var(--lm-cut)) 100%, 0 100%);
}

/* bandeau : plaque + fichier + etat */
.lm-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-input);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.lm-plate {
  font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .16em;
  color: var(--ink); background: var(--accent); color: var(--accent-ink);
  padding: 7px 14px 7px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.lm-head .lm-spacer { flex: 1; }
.lm-file-name { color: var(--ink-dim); letter-spacing: .1em; }
.lm-status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.lm-status.is-error { color: var(--red); }
.lm-status.is-ok { color: var(--green); }
.lm-status.is-busy { color: var(--amber); }
.lm-status.is-busy::before,
.lm-status.is-ok::before { content: '\25CF'; margin-right: 7px; }

/* --- zone de depot -------------------------------------------------------- */
.lm-drop {
  display: grid; place-items: center; gap: 12px;
  padding: clamp(44px, 9vh, 92px) var(--pad-x);
  margin: clamp(18px, 3vw, 26px);
  border: 1px dashed var(--line-2);
  cursor: pointer; text-align: center;
  transition: border-color .18s ease, background .18s ease;
}
.lm-drop:hover, .lm-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.lm-drop:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.lm-drop-title {
  font-family: var(--loud); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 4.4vw, 46px); line-height: .95; color: var(--ink); letter-spacing: .01em;
}
.lm-drop-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.lm-drop-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--ink-mute); max-width: 48ch; line-height: 1.8;
}
.lm-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lm-body { display: none; padding: 0 clamp(18px, 3vw, 26px) clamp(24px, 4vh, 36px); }
.lm-tool.has-audio .lm-body { display: block; }
.lm-tool.has-audio .lm-drop { padding: 18px var(--pad-x); }
.lm-tool.has-audio .lm-drop-title { font-size: clamp(15px, 1.8vw, 19px); }
.lm-tool.has-audio .lm-drop-hint { display: none; }
.lm-tool.is-busy .lm-body { opacity: .5; pointer-events: none; }

/* --- LE HEROS : la platine ------------------------------------------------ */
.lm-deck {
  position: relative;
  background: #08090B;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
}
.lm-wave {
  display: block; width: 100%;
  height: clamp(150px, 30vh, 260px);
  cursor: crosshair;
}
/* graduations discretes, comme une regle de montage */
.lm-deck::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 12px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 40px);
  opacity: .55;
}

/* transport : barre sombre et tactile sous la platine */
.lm-transport {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px clamp(12px, 2vw, 18px);
  border-top: 1px solid var(--line-2);
  background: var(--bg-input);
}
.lm-transport .lm-spacer { flex: 1; }
.lm-readout {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-dim);
}
.lm-readout b { color: var(--accent); font-weight: 500; }

/* --- boutons -------------------------------------------------------------- */
.lm-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 17px; background: var(--bg-raised); color: var(--ink-dim);
  border: 1px solid var(--line-2); cursor: pointer; transition: all .15s ease;
}
.lm-btn:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.lm-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.lm-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.lm-btn[disabled] { opacity: .35; cursor: not-allowed; }
.lm-btn-play {
  min-width: 104px; font-weight: 700; font-size: 11px;
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.lm-btn-play:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--accent-ink); }
.lm-btn-play::before { content: '\25B6'; margin-right: 9px; }
.lm-btn-play.is-playing::before { content: '\275A\275A'; }

/* --- LES CARTES-STAT ------------------------------------------------------ */
/* Grille a 4 colonnes sur grand ecran, pour deux rangees pleines :
     rangee 1 : TEMPO (2 colonnes) + PITCH + VOLUME
     rangee 2 : FADE IN + FADE OUT + FORME (2 colonnes)
   En auto-fit on obtenait 5 colonnes et une seconde rangee a moitie vide. */
.lm-rack {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(16px, 2.6vh, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .lm-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .lm-rack { grid-template-columns: minmax(0, 1fr); }
}
.lm-stat {
  --lm-cut: 12px;
  position: relative; background: var(--bg-panel); border: 1px solid var(--line);
  padding: clamp(15px, 1.8vw, 20px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--lm-cut)),
                     calc(100% - var(--lm-cut)) 100%, 0 100%);
  transition: border-color .16s ease;
}
.lm-stat:hover, .lm-stat:focus-within { border-color: var(--line-2); }
/* la carte tempo domine : elle occupe deux colonnes des que la place existe */
.lm-stat.is-wide { grid-column: span 2; }
@media (max-width: 520px) { .lm-stat.is-wide { grid-column: span 1; } }

.lm-stat-lbl {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
/* le chiffre est le heros de la carte */
.lm-stat-val {
  font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.6vw, 52px); line-height: .88; color: var(--ink);
  letter-spacing: -.02em;
}
.lm-stat-val.is-accent { color: var(--accent); }
.lm-stat-unit {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 7px; display: block;
}

/* duo de tempo : deux chiffres et une fleche entre les deux */
.lm-tempo-duo { display: flex; align-items: baseline; gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap; }
.lm-tempo-arrow { font-family: var(--mono); font-size: 20px; color: var(--accent); }
.lm-num {
  width: 3.2ch; min-width: 68px; background: transparent; border: 0; border-bottom: 2px solid var(--line-2);
  color: var(--ink); font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.6vw, 52px); line-height: .9; letter-spacing: -.02em;
  padding: 0 0 4px; text-align: left; -moz-appearance: textfield;
}
.lm-num::-webkit-outer-spin-button, .lm-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lm-num:focus { outline: none; border-bottom-color: var(--accent); }
.lm-num.is-target { color: var(--accent); border-bottom-color: var(--accent-2); }
/* champs secondaires (decoupe) : discrets, ce ne sont pas des heros */
.lm-num-sm {
  width: 92px; background: var(--bg-input); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 13px; padding: 9px 10px; text-align: right;
}
.lm-num-sm:focus { outline: none; border-color: var(--accent); }

/* --- sliders : epais et tactiles ------------------------------------------ */
.lm-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: var(--bg-input); border: 1px solid var(--line-2); margin: 14px 0 2px; cursor: pointer;
}
.lm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 26px; background: var(--accent);
  border: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.lm-slider::-moz-range-thumb {
  width: 14px; height: 26px; background: var(--accent); border: 0; border-radius: 0; cursor: pointer;
}
.lm-slider:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }

/* --- rangee de bascules --------------------------------------------------- */
.lm-toggles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* --- pied : mesures + export --------------------------------------------- */
.lm-meta {
  display: flex; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; align-items: baseline;
  margin-top: clamp(16px, 2.4vh, 22px); padding-top: 15px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.lm-meta b { color: var(--ink); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; }
/* Ecretage : on le signale, on ne le corrige pas en douce. */
.lm-meta b.is-clip { color: var(--red); }

.lm-export {
  width: 100%; margin-top: clamp(16px, 2.4vh, 22px);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(16px, 2.2vw, 21px); letter-spacing: .08em;
  padding: 19px 24px; background: var(--accent); color: var(--accent-ink);
  border: 0; cursor: pointer; transition: background .15s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.lm-export:hover:not([disabled]) { background: var(--accent-bright); }
.lm-export[disabled] { opacity: .35; cursor: not-allowed; }
.lm-export:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* --- GUIDE ---------------------------------------------------------------- */
/* Element <dialog> natif : le navigateur fournit le piege de focus, la touche
   Echap, le fond modal et le retour du focus au bouton. Rien a reimplementer,
   donc rien a rater sur l'accessibilite.
   PIEGE : ne jamais poser display sur .lm-guide sans [open], sinon un dialogue
   ferme resterait visible dans la page. */
.lm-guide-open {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 13px; background: transparent; color: var(--ink-mute);
  border: 1px solid var(--line-2); cursor: pointer; transition: all .15s ease;
}
.lm-guide-open::before { content: '?'; color: var(--accent); font-weight: 700; margin-right: 7px; }
.lm-guide-open:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.lm-guide-open:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.lm-guide {
  --lm-cut: 18px;
  width: min(790px, calc(100vw - 32px));
  max-height: min(84vh, 920px);
  /* Le navigateur centre un <dialog> modal avec margin:auto. Le reset global
     *{margin:0} de site.css l'ecrasait et collait le guide en haut a gauche.
     On le repose explicitement. */
  margin: auto;
  padding: 0; overflow: hidden;
  background: var(--bg-panel); color: var(--ink);
  border: 1px solid var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--lm-cut)),
                     calc(100% - var(--lm-cut)) 100%, 0 100%);
}
.lm-guide[open] { display: flex; flex-direction: column; }
.lm-guide::backdrop { background: rgba(9, 10, 12, .86); }

.lm-guide-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 16px);
  padding: 13px clamp(14px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-input);
}
.lm-guide-title {
  flex: 1; margin: 0;
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(15px, 2vw, 19px); color: var(--ink);
}
.lm-guide-x {
  flex: 0 0 auto; width: 34px; height: 34px; line-height: 1; font-size: 20px;
  background: transparent; color: var(--ink-mute);
  border: 1px solid var(--line-2); cursor: pointer; transition: all .15s ease;
}
.lm-guide-x:hover { border-color: var(--red); color: var(--red); }
.lm-guide-x:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.lm-guide-body {
  overflow-y: auto;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 26px) clamp(26px, 4vw, 34px);
  /* La barre native claire cassait le chassis sombre. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.lm-guide-body::-webkit-scrollbar { width: 10px; }
.lm-guide-body::-webkit-scrollbar-track { background: transparent; }
.lm-guide-body::-webkit-scrollbar-thumb { background: var(--line-2); }
.lm-guide-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* site.css:124 met jusqu'a 102px de padding vertical sur TOUT <section>. Les
   sections du guide en heritaient et creusaient un trou entre chaque bloc.
   Le guide gere sa propre respiration. */
.lm-guide-sec { padding: 0; }
.lm-guide-sec + .lm-guide-sec { margin-top: clamp(24px, 3.4vh, 34px); }
.lm-guide-sec h3 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 15px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--loud); font-weight: 400; text-transform: uppercase;
  font-size: clamp(19px, 2.6vw, 25px); letter-spacing: .01em; color: var(--ink);
}
/* Les numeros sont legitimes ici : le guide suit l'ordre reel d'utilisation
   de l'outil, du fichier depose au WAV exporte. */
.lm-guide-no { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--accent); }

.lm-guide dl { margin: 0; }
.lm-guide dt {
  margin-top: 17px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.lm-guide dt:first-of-type { margin-top: 0; }
.lm-guide dd {
  margin: 6px 0 0; max-width: 64ch;
  color: var(--ink-dim); font-size: 14.5px; line-height: 1.72;
}
.lm-guide code {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--bg-input); border: 1px solid var(--line); padding: 2px 6px;
}

/* La chaine de traitement : l'information que personne d'autre ne donne. */
.lm-guide-chain {
  margin: clamp(26px, 3.6vh, 36px) 0 0; padding: 14px 16px;
  background: var(--bg-input); border-left: 3px solid var(--accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-dim); line-height: 1.9;
}
.lm-guide-chain b {
  display: block; margin-bottom: 6px; color: var(--accent); font-weight: 500;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
}
.lm-guide-note {
  margin: 14px 0 0; max-width: 64ch;
  color: var(--ink-mute); font-size: 13px; line-height: 1.7;
}

@media (max-width: 560px) {
  .lm-btn { padding: 10px 13px; letter-spacing: .12em; }
  .lm-tool { --lm-cut: 12px; }
  .lm-guide { --lm-cut: 12px; max-height: 88vh; }
  .lm-guide dd { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-tool *, .lm-tool *::before, .lm-tool *::after,
  .lm-guide *, .lm-guide *::before, .lm-guide *::after { transition: none !important; }
}