/* Audyo — éditeur façon Audacity 4 : menus, barre d'outils, pistes avec panneau de contrôle et échelle d'amplitude,
   barre de sélection. Thème bleu « studio », limité à l'éditeur (les autres programmes gardent leur style).
   © 2026 TontonStudio99 */
:root {
  --st-bg: #08122c;
  --st-bar: #0d1b42;
  --st-panel: #0f1f4b;
  --st-panel2: #132757;
  --st-track: #0a1634;
  --st-line: rgba(120, 155, 255, .18);
  --st-line2: rgba(120, 155, 255, .32);
  --st-accent: #4f7cff;
  --st-accent2: #7aa0ff;
  --st-text: #e8eeff;
  --st-muted: #93a6d8;
}

/* ---------- en-tête : menus ---------- */
.apphead { position: relative; z-index: 20; min-width: 0; }
.app { grid-template-columns: minmax(0, 1fr); }
.menubar { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.menubar::-webkit-scrollbar { display: none; }
body.mode-alt .menubar, body.mode-alt .edbar { display: none !important; }
.mb-item { position: relative; flex: none; }
.mb-top {
  height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 700 14px var(--font-ui); color: #cfdafc; white-space: nowrap; transition: background .15s, color .15s;
}
.mb-top:hover, .mb-top.open { background: rgba(122, 160, 255, .16); color: #fff; }
.mb-top:focus-visible { outline: 2px solid var(--yellow, #facc15); outline-offset: -2px; }
.mb-pop {
  position: fixed; margin-top: 4px; min-width: 260px; max-height: calc(100vh - 140px); overflow-y: auto; padding: 6px; z-index: 60;
  background: #101f4c; border: 1px solid var(--st-line2); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2);
}
.mb-pop[hidden] { display: none; }
.mb-entry {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  min-height: 34px; padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
  font: 600 14px var(--font-ui); color: var(--st-text);
}
.mb-entry:hover:not(:disabled), .mb-entry:focus-visible { background: var(--st-accent); color: #fff; outline: none; }
.mb-entry:disabled { opacity: .38; cursor: default; }
.mb-ico { display: grid; place-items: center; color: var(--st-accent2); }
.mb-ico .ico { width: 16px; height: 16px; }
.mb-entry:hover:not(:disabled) .mb-ico, .mb-entry:focus-visible .mb-ico { color: #fff !important; }
.mb-entry[aria-checked="true"] .mb-ico::after { content: '✓'; font: 800 14px var(--font-ui); color: #7dffb0; }
.mb-entry[aria-checked="true"] .mb-ico .ico { display: none; }
.mb-entry[aria-checked="false"] .mb-ico { opacity: .45; }
.mb-key { font: 600 12px var(--font-mono); color: var(--st-muted); white-space: nowrap; }
.mb-entry:hover:not(:disabled) .mb-key { color: #dbe6ff; }
.mb-sep { height: 1px; margin: 5px 8px; background: var(--st-line); }

/* ---------- barre d'outils (transport + édition) ---------- */
.edbar {
  display: flex; align-items: center; gap: 14px; padding: 7px 16px; min-width: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--st-bar); border-bottom: 1px solid var(--st-line);
}
.edbar::-webkit-scrollbar { display: none; }
body:not(.mode-alt) .topbar::after { background: linear-gradient(90deg, #4f7cff, #7aa0ff 50%, #4f7cff); opacity: .55; }
.edbar .tcontrols {
  gap: 3px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--st-line); flex: none;
}
.edbar .pbtn {
  width: 38px; height: 38px; border-radius: 8px; border: 0; background: transparent; color: #d7e2ff;
}
.edbar .pbtn .ico { width: 19px; height: 19px; }
.edbar .pbtn:hover { background: rgba(122, 160, 255, .18); }
.edbar .pbtn.play { width: 44px; height: 38px; background: #22a45a; box-shadow: none; color: #fff; }
.edbar .pbtn.play:hover { background: #28b865; box-shadow: none; }
.edbar .pbtn.play.playing { background: var(--st-accent); }
.edbar .pbtn.play .ico { width: 22px; height: 22px; }
.edbar #btnStop .ico { color: #fff; }
.edbar .recbtn { color: #ff5a6a; }
.edbar .recbtn[aria-pressed="true"] { background: #e23b4c; color: #fff; }
.edbar .pbtn.toggle[aria-pressed="true"] { background: rgba(79, 124, 255, .35); color: #fff; box-shadow: inset 0 0 0 1px var(--st-accent2); }
.edbar .toolbar { flex: none; overflow: visible; gap: 8px; padding: 0; }
.edbar .tgroup { border-radius: 10px; background: rgba(0, 0, 0, .22); border-color: var(--st-line); padding: 4px; }
.edbar .tgroup::before { display: none; }
.edbar .tbtn { height: 38px; min-width: 38px; border-radius: 8px; color: #d7e2ff; }
.edbar .tbtn:hover:not(:disabled) { background: rgba(122, 160, 255, .18); }
.edbar .tbtn.active { background: var(--st-accent); color: #fff; }
.edbar .tbtn.active span { color: #fff; }

/* ---------- zone principale ---------- */
body:not(.mode-alt) .main { grid-template-columns: 260px minmax(0, 1fr) 256px; gap: 10px; padding: 10px; background: var(--st-bg); }
body.studio-no-side:not(.mode-alt) .main { grid-template-columns: minmax(0, 1fr) 256px; }
body.studio-no-insp:not(.mode-alt) .main { grid-template-columns: 260px minmax(0, 1fr); }
body.studio-no-side.studio-no-insp:not(.mode-alt) .main { grid-template-columns: minmax(0, 1fr); }
body.studio-no-side .sidebar, body.studio-no-insp .inspector { display: none !important; }

body:not(.mode-alt) .sidebar .panel, body:not(.mode-alt) .inspector .panel {
  background: var(--st-panel); border-color: var(--st-line); border-radius: 10px; backdrop-filter: none; box-shadow: none;
}
body:not(.mode-alt) .panel-head h2 { font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #bcccf6; }
body:not(.mode-alt) .count { background: var(--st-accent); }
body:not(.mode-alt) .file-item { border-radius: 8px; }
body:not(.mode-alt) .dropzone { border-radius: 8px; border-color: var(--st-line2); }
body:not(.mode-alt) .fx-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
body:not(.mode-alt) .fx-btn { min-height: 34px; padding: 4px 8px; border-radius: 7px; border-color: transparent; background: transparent; font-size: 13.5px; }
body:not(.mode-alt) .fx-btn:hover:not(:disabled) { background: rgba(122, 160, 255, .14); border-color: transparent; }
body:not(.mode-alt) .fx-btn .fx-ico { width: 24px; height: 24px; border-radius: 6px; }
body:not(.mode-alt) .stats div { background: rgba(0, 0, 0, .2); border-radius: 6px; }
body:not(.mode-alt) .stats dd { color: #9cc0ff; }

/* ---------- l'éditeur ---------- */
.editor { gap: 8px; }
body:not(.mode-alt) .editor { padding: 8px; border-radius: 10px; background: var(--st-panel); border-color: var(--st-line); box-shadow: none; }
body:not(.mode-alt) .overview-wrap { height: 34px; border-radius: 7px; border-color: var(--st-line); background: var(--st-track); }

.wave-wrap {
  display: grid; grid-template-columns: 196px 46px minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr);
  border-radius: 8px; border: 1px solid var(--st-line2); background: var(--st-track);
}
.tl-corner {
  grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: 7px; padding: 0 12px;
  background: var(--st-panel2); border-bottom: 1px solid var(--st-line); border-right: 1px solid var(--st-line);
  font: 800 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted);
}
.tl-corner .ico { width: 15px; height: 15px; color: var(--st-accent2); }
.wave-wrap .ruler { grid-column: 3; grid-row: 1; height: 30px; background: var(--st-panel2); border-bottom: 1px solid var(--st-line); }
.track-ctl {
  grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden auto; padding: 12px;
  background: var(--st-panel2); border-right: 1px solid var(--st-line); scrollbar-width: thin;
}
.amp-scale { grid-column: 2; grid-row: 2; width: 100%; height: 100%; display: block; background: #0c1a40; border-right: 1px solid var(--st-line); }
.wave-wrap .wave-stage { grid-column: 3; grid-row: 2; }

/* panneau de contrôle de la piste */
.track-ctl .track-head { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 6px 8px; }
.track-ctl .track-dot { width: 10px; height: 10px; }
.track-ctl .track-name { font: 800 14px var(--font-ui); margin: 0; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-ctl .chip, .track-ctl .dirty-flag { grid-column: 2; justify-self: start; }
.track-ctl .chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .25); border-color: var(--st-line); color: #b9c7ef; }
.track-ctl .dirty-flag { font-size: 11px; border-radius: 6px; }
.track-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tc-btn {
  height: 28px; border-radius: 6px; border: 1px solid var(--st-line2); background: rgba(0, 0, 0, .22); cursor: pointer;
  font: 700 12.5px var(--font-ui); color: #d7e2ff; transition: background .15s, color .15s;
}
.tc-btn:hover { background: rgba(122, 160, 255, .18); }
.tc-btn:focus-visible { outline: 2px solid var(--yellow, #facc15); outline-offset: 1px; }
#btnMute[aria-pressed="true"] { background: #f5b82e; border-color: #f5b82e; color: #231500; }
#btnLoopTrack[aria-pressed="true"] { background: #22a45a; border-color: #22a45a; color: #fff; }
.track-gain { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; max-width: none; min-width: 0; color: inherit; }
.tg-lbl { font: 800 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.track-gain input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--st-accent2) 0 var(--p, 50%), rgba(255, 255, 255, .14) var(--p, 50%) 100%); }
.track-gain input[type="range"]::-webkit-slider-thumb { border-color: var(--st-accent); width: 16px; height: 16px; margin-top: -5px; }
.track-gain input[type="range"]::-moz-range-progress { background: var(--st-accent2); }
.track-gain input[type="range"]::-moz-range-thumb { border-color: var(--st-accent); }
.track-gain output { font: 600 11px var(--font-mono); color: var(--st-muted); min-width: 4ch; text-align: right; }

/* état vide */
body:not(.mode-alt) .empty-state { background: radial-gradient(ellipse at 50% 30%, #17306f, var(--st-panel) 70%); border-radius: 10px; }

/* ---------- barre de sélection (bas) ---------- */
body:not(.mode-alt) .transport { gap: 22px; padding: 8px 16px; background: var(--st-bar); border-top: 1px solid var(--st-line); flex-wrap: wrap; }
.sb-field, .sb-sel { display: flex; align-items: center; gap: 8px; flex: none; }
.sb-lbl { font: 800 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); white-space: nowrap; }
.sb-val {
  min-width: 9.5ch; padding: 5px 10px; border-radius: 7px; background: #08122e; border: 1px solid var(--st-line2);
  font: 600 13px var(--font-mono); color: #c9d8ff; font-variant-numeric: tabular-nums; text-align: center;
}
.sb-arrow { color: var(--st-muted); }
.sb-sel .sb-lbl + .sb-val { margin-right: 4px; }
.sb-sel .sb-lbl:not(:first-child) { margin-left: 6px; }
body:not(.mode-alt) .time-box { padding: 6px 18px; border-radius: 10px; background: #08122e; border-color: var(--st-line2); box-shadow: inset 0 0 18px rgba(79, 124, 255, .18); }
body:not(.mode-alt) .time { font-size: 26px; color: #a9c6ff; text-shadow: 0 0 14px rgba(79, 124, 255, .55); }
body:not(.mode-alt) .time.rec { color: #ff6b7a; text-shadow: 0 0 14px rgba(255, 71, 87, .6); }

/* ---------- adaptations ---------- */
@media (max-width: 1500px) {
  .wave-wrap { grid-template-columns: 170px 42px minmax(0, 1fr); }
  .sb-field { display: none; }
}
@media (max-width: 1280px) {
  body:not(.mode-alt) .main { grid-template-columns: 250px minmax(0, 1fr); }
  body.studio-no-side:not(.mode-alt) .main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .mb-top { padding: 0 8px; font-size: 13px; }
}
@media (max-width: 860px) {
  body:not(.mode-alt) .main { grid-template-columns: minmax(0, 1fr); }
  .wave-wrap { grid-template-columns: 0 40px minmax(0, 1fr); }
  .track-ctl, .tl-corner { visibility: hidden; padding: 0; border: 0; }
  .tl-corner { grid-column: 1 / 3; }
  .sb-sel .sb-lbl:not(:first-child), #barSelLen { display: none; }
}
/* écrans moyens : on libère la place des menus de l'éditeur */
@media (max-width: 1440px) {
  body:not(.mode-alt) .brand-text { display: none; }
  body:not(.mode-alt) .gloss-btn span, body:not(.mode-alt) .install-btn span { display: none; }
  body:not(.mode-alt) .gloss-btn, body:not(.mode-alt) .install-btn { width: 42px; padding: 0; }
}
/* téléphone : les menus passent sur leur propre ligne (défilement au doigt),
   Glossaire / Raccourcis / Installer sont dans le menu Aide */
@media (max-width: 860px) {
  body:not(.mode-alt) .topbar { flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; }
  body:not(.mode-alt) .menubar { order: 10; flex: 1 0 100%; margin: 0 -8px; padding: 0 4px; }
  body:not(.mode-alt) .top-right { margin-left: auto; }
  body:not(.mode-alt) #btnGlossary, body:not(.mode-alt) #btnHelp, body:not(.mode-alt) #btnInstall { display: none; }
  .mb-top { height: 34px; }
  .mb-pop { min-width: min(280px, calc(100vw - 16px)); }
  .edbar { padding: 6px 10px; gap: 8px; }
  body:not(.mode-alt) .transport { gap: 10px; justify-content: center; }
  .sb-sel { flex-wrap: wrap; justify-content: center; }
}

/* ---------- multipiste : un panneau de contrôle par piste ---------- */
.track-ctl { padding: 0; gap: 0; }
.tk {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; overflow: hidden; cursor: pointer;
  border-bottom: 1px solid var(--st-line2); border-left: 3px solid transparent; transition: background .15s;
}
.tk:last-child { border-bottom: 0; }
.tk.active { background: rgba(122, 160, 255, .12); border-left-color: var(--fc, var(--st-accent)); }
.tk.muted .tk-head, .tk.muted .tk-info { opacity: .5; }
.tk-head { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; }
.tk-head .track-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px var(--fc); }
.tk-name { font: 800 13px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-head .dirty-flag { font-size: 10px; padding: 1px 6px; border-radius: 5px; }
.tk-close { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--st-muted); cursor: pointer; }
.tk-close:hover { background: rgba(255, 71, 87, .2); color: #ff6b7a; }
.tk-info { font: 600 10.5px var(--font-mono); color: #a9b8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tk-btns .tc-btn { height: 24px; font-size: 12px; }
.tk-mute[aria-pressed="true"] { background: #f5b82e; border-color: #f5b82e; color: #231500; }
.tk-solo[aria-pressed="true"] { background: #4f7cff; border-color: #4f7cff; color: #fff; }
.tk-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 50px; align-items: center; gap: 6px; }
.tk-row output { font: 600 10.5px var(--font-mono); color: var(--st-muted); text-align: right; white-space: nowrap; }
.tk-row input[type="range"] { height: 18px; }
.tk-row input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, .16); }
.tk-row input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; border: 2px solid var(--st-accent); }
.tk-row input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--st-accent); }
.track-ctl.compact .tk-info, .track-ctl.compact .tk-p { display: none; }
.track-ctl.tiny .tk-g, .track-ctl.tiny .tk-btns { display: none; }
#overlay.grab { cursor: grab; }
#overlay.grabbing { cursor: grabbing; }
#overlay.env { cursor: crosshair; }

/* volume de lecture dans la barre d'outils */
.ed-vol { flex: none; width: 190px; min-width: 0; max-width: none; color: #d7e2ff; margin-left: auto; }
.ed-vol .ico { width: 18px; height: 18px; }
@media (max-width: 1100px) { .ed-vol { width: 130px; } .ed-vol output { display: none; } }

/* historique */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.hist-step {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: center; width: 100%; min-height: 28px; padding: 3px 8px;
  border: 0; border-radius: 6px; background: transparent; color: var(--st-text); text-align: left; cursor: pointer; font: 600 13px var(--font-ui);
}
.hist-step:hover { background: rgba(122, 160, 255, .14); }
.hist-n { font: 700 10.5px var(--font-mono); color: var(--st-muted); }
.hist-step.current { background: var(--st-accent); color: #fff; }
.hist-step.current .hist-n { color: #dbe6ff; }
.hist-step.future { opacity: .5; }
.hist-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }