/* Variables du thème sombre du studio (déplacées depuis style.css en v60) */
body.dawPremium{
  --bg:#0b0d10 !important;
  --panel:#13161a !important;
  --panel-2:#191d22 !important;
  --line:#2a2e34 !important;
  --line-strong:#3a4047 !important;
  --text:#eceef1 !important;
  --text-dim:#a1a7af !important;
  --text-faint:#737b84 !important;
  --amber:#e6e8eb !important;
  --amber-dim:#6f757d !important;
  --ghost:#555b63 !important;
  background:radial-gradient(900px 500px at 50% -20%,rgba(255,255,255,.05),transparent 70%),linear-gradient(135deg,#080a0d,#15181d 52%,#090b0e) !important;
}

/* ==========================================================================
   PHONK BATTLE — STUDIO GRILLE · COUCHE VISUELLE v59
   Chargée en dernier : elle unifie l'en-tête, les barres d'outils, la
   sidebar, les boutons et les knobs, et réorganise l'interface selon la
   largeur de la fenêtre (grand écran, portable, tablette, téléphone).
   Aucun identifiant ni comportement JavaScript n'est modifié.
   ========================================================================== */

body.studioPage{
  --v-bg:#0b0c0f;
  --v-panel:#111317;
  --v-panel-2:#16191e;
  --v-panel-3:#1c2026;
  --v-raise:#232831;
  --v-line:#23272e;
  --v-line-2:#323842;
  --v-text:#eceef1;
  --v-dim:#a0a6b0;
  --v-faint:#6a707a;
  --v-lit:#f2f3f5;
  --v-lit-ink:#0e1013;
  --v-steel:linear-gradient(180deg,#f4f5f7 0%,#c9cdd3 100%);
  --v-radius:8px;
  --v-ease:cubic-bezier(.2,.7,.2,1);
  background:var(--v-bg) !important;
  color:var(--v-text);
}

/* ---------- Barres de défilement fines et discrètes ---------- */
body.studioPage *{ scrollbar-width:thin; scrollbar-color:#343a44 transparent; }
body.studioPage ::-webkit-scrollbar{ width:8px; height:8px; }
body.studioPage ::-webkit-scrollbar-thumb{ background:#343a44; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
body.studioPage ::-webkit-scrollbar-thumb:hover{ background:#4a515d; background-clip:padding-box; }
body.studioPage ::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
body.studioPage .topbar{
  display:grid !important;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"brand tabs transport files";
  align-items:center;
  column-gap:14px;
  row-gap:8px;
  min-height:58px;
  padding:9px 16px !important;
  background:linear-gradient(180deg,#17191e 0%,#111317 100%) !important;
  border-bottom:1px solid var(--v-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset, 0 10px 30px rgba(0,0,0,.28) !important;
  overflow:visible !important;
  position:relative;
  z-index:30;
}
/* Filet « acier brossé » : rappel discret de l'identité monochrome */
body.studioPage .topbar::before{
  content:"" !important;
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 30%,rgba(255,255,255,.08) 70%,transparent) !important;
  pointer-events:none;
}
body.studioPage .topbar > .panelToggle{ grid-area:menu; }
body.studioPage .topbar > .brand{ grid-area:brand; justify-self:start; min-width:0; color:var(--v-text) !important; }
body.studioPage .topbar > .pageTabs{ grid-area:tabs; justify-self:start; min-width:0; }
body.studioPage .topbar > .transport{ grid-area:transport; justify-self:center; min-width:0; }
body.studioPage .topbar > .fileActions{ grid-area:files; justify-self:end; min-width:0; margin:0 !important; padding:0 !important; }

body.studioPage .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); }
body.studioPage .studioLogo{ width:28px; height:28px; object-fit:contain; filter:invert(1) brightness(1.25); flex:none; }
body.studioPage .brand small{
  color:var(--v-faint) !important; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.4px;
  padding:3px 7px; border:1px solid var(--v-line-2); border-radius:999px; white-space:nowrap;
}

/* Onglets de page : commutateur segmenté */
body.studioPage .pageTabs{
  display:flex; gap:2px; padding:3px !important;
  background:#0a0b0e !important; border:1px solid var(--v-line) !important; border-radius:10px !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5) !important;
}
body.studioPage .pageTab{
  color:var(--v-dim) !important; background:transparent !important; border:0 !important;
  border-radius:7px !important; padding:7px 13px !important;
  font-size:10.5px !important; letter-spacing:.7px; text-transform:uppercase; white-space:nowrap;
  transition:color .15s ease, background-color .2s var(--v-ease) !important;
}
body.studioPage .pageTab:hover{ color:var(--v-text) !important; background:rgba(255,255,255,.05) !important; transform:none !important; }
body.studioPage .pageTab.active{
  color:var(--v-lit-ink) !important; background:var(--v-steel) !important; font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 12px rgba(0,0,0,.35) !important;
}
body.studioPage #splitViewBtn{ margin-left:4px; white-space:nowrap; }

/* Transport */
body.studioPage .transport{ display:flex; align-items:center; gap:10px; }
body.studioPage .playBtn{
  width:40px !important; height:40px !important; border-radius:50% !important; flex:none;
  background:var(--v-panel-3) !important; color:var(--v-lit) !important;
  border:1px solid var(--v-line-2) !important; font-size:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(0,0,0,.35) !important;
  transition:transform .12s var(--v-ease), background-color .2s ease, box-shadow .25s ease !important;
}
body.studioPage .playBtn:hover{ border-color:#5a616c !important; transform:none !important; }
body.studioPage .playBtn:active{ transform:scale(.94) !important; }
body.studioPage .playBtn.playing{
  background:var(--v-steel) !important; color:var(--v-lit-ink) !important; border-color:#fff !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 22px rgba(255,255,255,.22) !important;
}
body.studioPage .counter{
  background:#08090b !important; color:var(--v-lit) !important; border:1px solid var(--v-line) !important;
  border-radius:8px !important; padding:7px 12px !important; font-size:12px !important; letter-spacing:.6px;
  font-variant-numeric:tabular-nums; white-space:nowrap; box-shadow:inset 0 1px 4px rgba(0,0,0,.6) !important;
}
body.studioPage .counter span{ display:inline-block; min-width:1.4ch; text-align:right; }
body.studioPage .counter span.sep{ color:var(--v-faint) !important; min-width:0; }
body.studioPage .countInBadge{ background:rgba(255,255,255,.08) !important; border-color:var(--v-lit) !important; color:var(--v-lit) !important; border-radius:8px; animation:v59Beat .5s ease-out; }
@keyframes v59Beat{ from{ transform:scale(1.12); } to{ transform:none; } }
body.studioPage .countInField,
body.studioPage .bpmField{ color:var(--v-faint) !important; text-shadow:none !important; font-size:10px !important; letter-spacing:.8px; white-space:nowrap; }
body.studioPage .countInField input{ accent-color:#e6e8eb; }
body.studioPage .bpmField input{
  width:58px !important; background:#08090b !important; color:var(--v-lit) !important;
  border:1px solid var(--v-line) !important; border-radius:8px !important; padding:7px 6px !important;
  font-variant-numeric:tabular-nums;
}
body.studioPage .bpmField input:focus{ border-color:#8b929d !important; }

/* Actions de fichier */
body.studioPage .fileActions{ display:flex; gap:6px !important; align-items:center; }

/* ==========================================================================
   BOUTONS — une seule famille, trois niveaux
   ========================================================================== */
body.studioPage .ghostBtn,
body.studioPage .topbar .ghostBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:32px; padding:6px 11px !important;
  background:var(--v-panel-3) !important; color:#d6d9de !important;
  border:1px solid var(--v-line-2) !important; border-radius:8px !important;
  font-size:10.5px !important; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset !important;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease !important;
  filter:none !important; opacity:1;
}
body.studioPage .ghostBtn:hover,
body.studioPage .topbar .ghostBtn:hover{
  background:var(--v-raise) !important; border-color:#4b525d !important; color:#fff !important;
  transform:none !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset !important;
}
body.studioPage .ghostBtn:active{ transform:translateY(1px) !important; }
body.studioPage .ghostBtn.active{
  background:rgba(242,243,245,.1) !important; color:var(--v-lit) !important; border-color:#9aa1ab !important;
}
body.studioPage .ghostBtn:disabled{ opacity:.4 !important; cursor:not-allowed; }
/* Action principale : Enregistrer */
body.studioPage #saveBtn{
  background:var(--v-steel) !important; color:var(--v-lit-ink) !important; border-color:#fff !important; font-weight:700;
}
body.studioPage #saveBtn:hover{ background:#fff !important; }
/* Retour : action discrète */
body.studioPage #backToMenuBtn{ background:transparent !important; border-color:transparent !important; color:var(--v-dim) !important; }
body.studioPage #backToMenuBtn:hover{ color:#fff !important; border-color:var(--v-line-2) !important; }

/* Anneau de focus clavier visible partout */
body.studioPage :is(button,select,input,[tabindex]):focus-visible{
  outline:2px solid #e9ebee !important; outline-offset:2px !important;
}

/* ==========================================================================
   BARRE DE BLOCS (au-dessus de la grille)
   ========================================================================== */
body.studioPage .patternBar{
  display:flex; align-items:center; gap:6px !important;
  padding:8px 12px !important;
  background:var(--v-panel) !important; border-bottom:1px solid var(--v-line) !important;
  box-shadow:none !important;
}
body.studioPage .modeToggle{
  display:flex; gap:2px; padding:3px; border-radius:9px;
  background:#0a0b0e !important; border:1px solid var(--v-line) !important;
}
body.studioPage .modeBtn{
  border-radius:6px !important; padding:6px 11px !important; color:var(--v-dim) !important;
  font-size:10.5px !important; letter-spacing:.6px; background:transparent !important; border:0 !important;
}
body.studioPage .modeBtn.active{ background:var(--v-raise) !important; color:var(--v-lit) !important; box-shadow:0 1px 0 rgba(255,255,255,.07) inset; }
body.studioPage .patternBar select,
body.studioPage .timelineHead select,
body.studioPage .sidebar select{
  background:#0c0d10 !important; color:var(--v-text) !important; border:1px solid var(--v-line-2) !important;
  border-radius:7px !important; padding:5px 8px; font-size:11px; min-height:30px;
}
body.studioPage .barsField{ color:var(--v-faint) !important; font-size:10px !important; letter-spacing:.6px; gap:6px; white-space:nowrap; }
body.studioPage .zoomControl{ display:flex; gap:4px; }

/* Onglets de blocs : puces nettes, bloc actif éclairé */
body.studioPage .patternChip{ border-radius:8px !important; transition:background-color .15s ease, border-color .15s ease; }

/* ==========================================================================
   SIDEBAR DES PISTES
   ========================================================================== */
body.studioPage #pageEdit > .sidebar,
body.studioPage .blockPalette{
  background:var(--v-panel) !important; border-right:1px solid var(--v-line) !important;
}
body.studioPage .sidebarHead{
  background:rgba(17,19,23,.94) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--v-faint) !important; border-bottom:1px solid var(--v-line) !important;
  font-size:10px !important; letter-spacing:1.4px;
}
body.studioPage .trackSectionHead{ color:var(--v-faint) !important; letter-spacing:1.2px; }
body.studioPage .track{
  background:var(--v-panel-2) !important; border:1px solid var(--v-line) !important; border-radius:12px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset !important;
  transition:border-color .15s ease, background-color .15s ease !important;
}
body.studioPage .track:hover{ border-color:var(--v-line-2) !important; }
body.studioPage .track.selected,
body.studioPage .track.active{
  border-color:var(--trackColor, #9aa1ab) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--trackColor, #9aa1ab) 35%, transparent), 0 10px 24px rgba(0,0,0,.3) !important;
}
body.studioPage .addTrackBtn{
  border:1px dashed var(--v-line-2) !important; background:rgba(17,19,23,.94) !important; color:var(--v-dim) !important;
  border-radius:10px !important; transition:border-color .15s ease, color .15s ease !important;
}
body.studioPage .addTrackBtn:hover{ border-color:#8b929d !important; color:#fff !important; transform:none !important; }

/* Knobs des pistes : volume et hauteur côte à côte */
body.studioPage .track .sliderRow{
  display:inline-flex !important; flex-direction:column; align-items:center; justify-content:flex-start;
  width:calc(50% - 4px); margin-top:8px !important; gap:4px !important; vertical-align:top;
}
body.studioPage .track .sliderRow + .sliderRow{ margin-left:4px; }
body.studioPage .track .sliderRow span.lbl{ width:auto !important; font-size:9.5px !important; letter-spacing:1px; color:var(--v-faint) !important; }
body.studioPage .track .sliderRow span.val{ width:auto !important; text-align:center !important; font-size:10px !important; color:var(--v-dim) !important; font-variant-numeric:tabular-nums; }
body.studioPage .track .sliderRow .rotaryWrap{ margin:0 !important; padding:0 !important; }
body.studioPage .track .sliderRow .rotaryValue{ display:none !important; }

body.studioPage .rotaryKnob{
  --knob-accent:var(--trackColor, #e6e8eb);
  width:44px !important; height:44px !important;
  background:
    radial-gradient(circle at 50% 42%, #2b3038 0 45%, #16191e 62%, transparent 63%),
    conic-gradient(from 225deg, var(--knob-accent) var(--turn,0deg), #2a2f37 var(--turn,0deg) 270deg, transparent 270deg) !important;
  border:1px solid #3a404a !important;
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:box-shadow .15s ease;
}
body.studioPage .rotaryKnob:hover{ box-shadow:0 4px 12px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.06) !important; }
body.studioPage .rotaryKnob::after{ background:#f4f5f7 !important; box-shadow:none !important; width:2px; }
body.studioPage .aurora .rotaryKnob{ --knob-accent:#70e2ce; }
body.studioPage .rotaryValue{
  background:#0a0b0e !important; border-color:var(--v-line-2) !important; color:var(--v-dim) !important; border-radius:6px !important;
}

/* ==========================================================================
   ARRANGEMENT / GROUPES
   ========================================================================== */
body.studioPage .timelineHead,
body.studioPage .groupsToolbarFixed{
  background:var(--v-panel) !important; border-bottom:1px solid var(--v-line) !important; box-shadow:none !important;
}
body.studioPage .timelineWrap{ background:#0a0b0e !important; }
body.studioPage .timelineRuler{ background:var(--v-panel-2) !important; }
body.studioPage .sideSection{ border-color:var(--v-line) !important; }
body.studioPage .sideSection > summary{ cursor:pointer; }
body.studioPage .paletteItem:hover{ transform:none !important; }

/* ==========================================================================
   FENÊTRES ET MODALES — apparition en réponse à l'action
   ========================================================================== */
body.studioPage .modalOverlay{
  background:rgba(5,6,8,.62) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
body.studioPage .modalOverlay .modal{
  background:var(--v-panel-2) !important; color:var(--v-text); border:1px solid var(--v-line-2) !important;
  border-radius:14px !important; box-shadow:0 30px 80px rgba(0,0,0,.6) !important;
  animation:v59Pop .22s var(--v-ease) both;
}
body.studioPage .synthFloatWindow{ animation:v59Pop .22s var(--v-ease) both; border-radius:14px !important; }
@keyframes v59Pop{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   PERFORMANCE D'AFFICHAGE
   ========================================================================== */
body.studioPage .gridScroll{ contain:content; }
body.studioPage .playCol{ transition:none !important; }

/* ==========================================================================
   MISE EN PAGE ADAPTATIVE
   ========================================================================== */

/* Très grand écran : tout tient sur une ligne. */
@media (min-width:1760px){
  body.studioPage .topbar > .panelToggle{ display:none !important; }
}

/* Portable / écran moyen : les actions passent sur une 2e ligne compacte. */
@media (max-width:1759px) and (min-width:1100px){
  body.studioPage .topbar{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:"brand tabs transport" "files files files";
    padding:8px 16px 7px !important;
  }
  body.studioPage .topbar > .panelToggle{ display:none !important; }
  body.studioPage .topbar > .transport{ justify-self:end; }
  body.studioPage .topbar > .fileActions{
    justify-self:stretch; justify-content:flex-start;
    padding-top:8px !important; border-top:1px solid var(--v-line);
    overflow-x:auto; flex-wrap:nowrap;
  }
  body.studioPage #backToMenuBtn{ margin-right:auto; order:-1; }
  body.studioPage .fileActions > #saveBtn{ order:5; }
}

/* Tablette : bouton pistes + en-tête sur plusieurs rangées défilantes. */
@media (max-width:1099px){
  body.studioPage .topbar{
    display:flex !important; flex-wrap:wrap; align-items:center;
    gap:8px 10px !important; padding:8px 12px !important;
  }
  body.studioPage .topbar > .panelToggle{
    display:flex !important; order:0; width:38px; height:38px; border-radius:9px !important;
    background:var(--v-panel-3) !important; border:1px solid var(--v-line-2) !important; color:var(--v-lit) !important;
  }
  body.studioPage .topbar > .brand{ order:1; flex:0 1 auto; }
  body.studioPage .topbar > .transport{ order:2; margin-left:auto; }
  body.studioPage .topbar > .pageTabs{ order:3; flex:0 0 auto; }
  body.studioPage .topbar > .fileActions{
    order:4; flex:1 1 0; min-width:0; overflow-x:auto; flex-wrap:nowrap !important;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent);
    padding-right:24px !important;
  }
  body.studioPage .countInField{ display:none !important; }
}

/* Téléphone : trois rangées nettes, cibles tactiles confortables. */
@media (max-width:760px){
  body.studioPage .topbar{ gap:7px 8px !important; padding:7px 10px 8px !important; }
  body.studioPage .brand small{ display:none !important; }
  body.studioPage .transport{ gap:6px; }
  body.studioPage .counter{ padding:7px 9px !important; font-size:11px !important; letter-spacing:.2px; }
  body.studioPage .bpmField{ font-size:0 !important; gap:0; }
  body.studioPage .bpmField input{ width:52px !important; font-size:13px !important; }
  body.studioPage .topbar > .pageTabs{
    flex:1 1 100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
  }
  body.studioPage .topbar > .pageTabs::-webkit-scrollbar{ display:none; }
  body.studioPage .pageTab{ flex:1 0 auto; padding:8px 12px !important; }
  body.studioPage .topbar > .fileActions{ flex:1 1 100%; }
  body.studioPage .ghostBtn,
  body.studioPage .topbar .ghostBtn{ min-height:36px; }
  body.studioPage .patternBar{ padding:6px 8px !important; }
}

@media (max-width:420px){
  body.studioPage .counter{ font-size:10.5px !important; }
  body.studioPage .playBtn{ width:38px !important; height:38px !important; }
}

/* Écrans peu hauts (portable 13", paysage) : on gagne de la hauteur utile. */
@media (max-height:760px) and (min-width:1100px){
  body.studioPage .topbar{ min-height:0; padding-top:6px !important; padding-bottom:6px !important; }
  body.studioPage .playBtn{ width:36px !important; height:36px !important; }
  body.studioPage .ghostBtn,
  body.studioPage .topbar .ghostBtn{ min-height:28px; padding:4px 10px !important; }
}

@media (prefers-reduced-motion:reduce){
  body.studioPage *{ animation:none !important; }
}

/* ---------- Correctifs de mise en page (v59.1) ---------- */
body.studioPage .studioLogo{ filter:invert(1) brightness(1.25) !important; }
body.studioPage #pageEdit > .sidebar{ scrollbar-gutter:auto !important; }
body.studioPage #pageEdit > .sidebar .trackList{ width:100% !important; min-width:0 !important; box-sizing:border-box; padding:8px 10px 12px !important; }
body.studioPage #pageEdit > .sidebar .trackList > *{ max-width:100%; box-sizing:border-box; }
body.studioPage #pageEdit > .sidebar .track{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }
body.studioPage #pageEdit > .sidebar .addTrackBtn{ margin:8px 10px !important; width:auto !important; }
/* Barre de blocs : une seule ligne, défilement horizontal si nécessaire */
body.studioPage .patternBar{ flex-wrap:nowrap !important; overflow-x:auto !important; }
body.studioPage .patternBar > *{ flex-shrink:0; }
body.studioPage .patternBarSpacer{ flex:1 1 auto !important; min-width:8px; }
body.studioPage .patternTabs{ flex-wrap:nowrap !important; max-width:none !important; }
body.studioPage #pageEdit > .sidebar .trackList{ grid-template-columns:minmax(0,1fr) !important; }
body.studioPage #pageEdit > .sidebar select{ max-width:100%; min-width:0; width:100%; text-overflow:ellipsis; }
@media (max-width:1099px){
  body.studioPage .topbar{ flex-direction:row !important; height:auto !important; }
  body.studioPage .topbar > .pageTabs,
  body.studioPage .topbar > .fileActions,
  body.studioPage .topbar > .transport,
  body.studioPage .topbar > .brand{ height:auto !important; width:auto; }
  body.studioPage .topbar > .fileActions{ flex:1 1 100% !important; }
}
/* Correctif : une page masquée (attribut hidden) ne transparaît plus sous l'onglet actif */
body.studioPage .body > .page[hidden]{ display:none !important; }

/* ==========================================================================
   v60 — BANDEAU DE COMPÉTITION (studio ouvert depuis une salle)
   ========================================================================== */
body.studioPage .compBar{
  position:relative; z-index:29; flex-shrink:0;
  display:grid; grid-template-columns:auto minmax(200px,1fr) auto auto; align-items:center; gap:10px 18px;
  padding:8px 16px;
  background:linear-gradient(180deg,#1b1e24,#14161b);
  border-bottom:1px solid var(--v-line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  font-family:'Inter',var(--font-display),system-ui,sans-serif;
  animation:v60BarIn .45s var(--v-ease) both;
}
@keyframes v60BarIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
body.studioPage .compInfo{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
body.studioPage .compLive{ width:8px; height:8px; border-radius:50%; background:#86d6a8; box-shadow:0 0 0 0 rgba(134,214,168,.5); animation:v60Live 2s ease-out infinite; }
@keyframes v60Live{ 0%{ box-shadow:0 0 0 0 rgba(134,214,168,.5); } 70%,100%{ box-shadow:0 0 0 8px rgba(134,214,168,0); } }
body.studioPage .compLabel{ font-size:13px; font-weight:600; color:var(--v-dim); }
body.studioPage .compCode{
  font-family:var(--font-mono); font-weight:700; letter-spacing:.2em; font-size:13px; color:var(--v-text); text-decoration:none;
  padding:4px 6px 4px 9px; border:1px solid var(--v-line-2); border-radius:7px; background:#0c0d10;
}
body.studioPage .compCode:hover{ border-color:#6a717c; }
body.studioPage .compTimer{ display:flex; align-items:center; gap:14px; min-width:0; }
body.studioPage .compTime{ font-family:var(--font-mono); font-weight:700; font-size:24px; letter-spacing:-.02em; color:var(--v-lit); font-variant-numeric:tabular-nums; min-width:5ch; transition:color .3s ease; }
body.studioPage .compProgress{ flex:1; height:5px; border-radius:5px; background:#0c0d10; border:1px solid var(--v-line); overflow:hidden; min-width:60px; }
body.studioPage .compProgress i{ display:block; height:100%; width:100%; background:var(--v-steel); border-radius:inherit; transition:width .25s linear; }
body.studioPage .compStatus{ font-size:13px; color:var(--v-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }
body.studioPage .compStatus a{ color:var(--v-text); }
body.studioPage .compSubmit{
  min-height:38px; padding:0 18px; border-radius:10px; cursor:pointer; white-space:nowrap;
  font:700 13.5px 'Inter',system-ui,sans-serif; color:var(--v-lit-ink); border:1px solid #fff; background:var(--v-steel);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 8px 20px rgba(0,0,0,.35);
  transition:transform .12s var(--v-ease), filter .15s ease, opacity .2s;
}
body.studioPage .compSubmit:hover:not(:disabled){ filter:brightness(1.06); }
body.studioPage .compSubmit:active:not(:disabled){ transform:translateY(1px); }
body.studioPage .compSubmit:disabled{ opacity:.5; cursor:not-allowed; }
body.studioPage .compSubmit.isDone{ background:#1f2329; color:var(--v-text); border-color:var(--v-line-2); box-shadow:none; }
body.studioPage .compBar.isLow .compTime{ color:#ffb0a6; animation:v60Blink 1s ease-in-out infinite; }
body.studioPage .compBar.isLow .compProgress i{ background:linear-gradient(90deg,#f08377,#ffb0a6); }
@keyframes v60Blink{ 50%{ opacity:.65; } }
body.studioPage .compBar.isBusy .compSubmit{ position:relative; overflow:hidden; }
body.studioPage .compBar.isBusy .compSubmit::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%); animation:v60Shine 1.1s linear infinite;
}
@keyframes v60Shine{ to{ transform:translateX(100%); } }
body.studioPage .compBar.justSent{ animation:v60Sent 1.4s var(--v-ease); }
@keyframes v60Sent{ 0%{ box-shadow:inset 0 0 0 1px rgba(134,214,168,.8), 0 0 30px rgba(134,214,168,.25); } 100%{ box-shadow:inset 0 0 0 1px transparent; } }
body.studioPage .compModal{ width:min(440px,92vw) !important; padding:24px !important; }
body.studioPage .compModal h3{ margin:0 0 10px; font-family:var(--font-display); font-size:19px; color:var(--v-text); }
body.studioPage .compModal p{ margin:0; color:var(--v-dim); font-size:13.5px; line-height:1.55; font-family:'Inter',system-ui,sans-serif; }

/* Boutons des modales du studio, alignés sur le site */
body.studioPage .modal .primaryBtn{
  background:var(--v-steel) !important; color:var(--v-lit-ink) !important; border:1px solid #fff !important;
  border-radius:9px !important; padding:9px 16px !important; font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
body.studioPage .modal .textBtn{ border-radius:9px; color:var(--v-dim); }
body.studioPage .modal .textBtn:hover{ color:#fff; background:rgba(255,255,255,.05); }

@media (max-width:1099px){
  body.studioPage .compBar{ grid-template-columns:auto minmax(0,1fr) auto; }
  body.studioPage .compStatus{ grid-column:1 / -1; grid-row:2; max-width:none; font-size:12.5px; }
}
@media (max-width:560px){
  body.studioPage .compBar{ grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:7px 10px; }
  body.studioPage .compInfo{ grid-column:1 / -1; }
  body.studioPage .compLabel{ display:none; }
  body.studioPage .compTime{ font-size:21px; }
  body.studioPage .compSubmit{ min-height:36px; padding:0 13px; font-size:13px; }
  body.studioPage .compInfo{ order:0; }
}
@media (max-width:560px){ body.studioPage .compStatus{ grid-row:3; } }

/* ==========================================================================
   v61 — PRISM, synthé polyvalent
   ========================================================================== */
body.studioPage .synthFloatWindow.prismWindow{
  width:min(1000px,calc(100vw - 24px)); height:min(880px,calc(100vh - var(--prism-top,12px) - 12px)); max-height:calc(100vh - 24px);
  display:flex; flex-direction:column; border:1px solid var(--v-line-2); border-radius:16px;
  background:linear-gradient(180deg,#15171c,#0f1114); box-shadow:0 32px 100px rgba(0,0,0,.7); overflow:hidden;
}
body.studioPage .prismWindow .synthFloatBody{ padding:0; overflow:hidden; flex:1; min-height:0; display:flex; }
body.studioPage .prismPanel{ display:flex; flex-direction:column; flex:1; min-height:0; width:100%; font-family:'Inter',var(--font-display),system-ui,sans-serif; color:var(--v-text); }
body.studioPage .prismHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px 10px; }
body.studioPage .prismBrand{ display:flex; align-items:center; gap:12px; min-width:0; }
body.studioPage .prismBrand strong{ display:block; font-family:var(--font-display); font-size:20px; letter-spacing:.14em; }
body.studioPage .prismBrand small{ display:block; font-size:12.5px; color:var(--v-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
body.studioPage .prismLogo{
  width:34px; height:34px; flex:none; border-radius:9px; position:relative; overflow:hidden;
  background:conic-gradient(from 200deg,#f4f5f7,#8c929b,#f4f5f7,#5b616b,#f4f5f7); box-shadow:0 6px 16px rgba(0,0,0,.45);
}
body.studioPage .prismLogo::after{ content:""; position:absolute; inset:9px; background:#111317; transform:rotate(45deg); border-radius:2px; }
body.studioPage .prismActions{ display:flex; gap:6px; flex-wrap:wrap; }
body.studioPage .prismBtn{
  min-height:32px; padding:0 12px; border-radius:9px; cursor:pointer; font:600 12.5px 'Inter',system-ui,sans-serif;
  background:var(--v-panel-3); color:var(--v-text); border:1px solid var(--v-line-2); transition:background-color .15s, border-color .15s;
}
body.studioPage .prismBtn:hover{ background:var(--v-raise); border-color:#4b525d; }
body.studioPage .prismBtn.primary{ background:var(--v-steel); color:var(--v-lit-ink); border-color:#fff; }
body.studioPage .prismMeter{ display:flex; align-items:center; gap:10px; padding:0 18px 10px; font-size:12px; color:var(--v-faint); }
body.studioPage .prismMeterBar{ width:90px; height:5px; border-radius:5px; background:#0b0c0f; border:1px solid var(--v-line); position:relative; overflow:hidden; flex:none; }
body.studioPage .prismMeterBar::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--load,0) * 100%); background:linear-gradient(90deg,#86d6a8,#e9c56d 70%,#f08377); transition:width .25s ease; }

body.studioPage .prismKeys{ display:flex; align-items:center; gap:6px; padding:0 18px 12px; }
body.studioPage .prismKeys > .prismBtn{ min-height:28px; width:28px; padding:0; }
body.studioPage .prismKeysOct{ font:600 12px var(--font-mono); color:var(--v-dim); min-width:24px; text-align:center; }
body.studioPage .prismKeyRow{ position:relative; flex:1; display:flex; height:44px; gap:2px; min-width:0; }
body.studioPage .pk{ cursor:pointer; border:0; padding:0; }
body.studioPage .pk.white{ flex:1; background:linear-gradient(180deg,#e9ebee,#c9cdd3); border-radius:0 0 5px 5px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
body.studioPage .pk.black{ position:absolute; top:0; width:4.6%; height:60%; background:linear-gradient(180deg,#2a2e35,#0d0e11); border-radius:0 0 4px 4px; z-index:2; box-shadow:0 3px 6px rgba(0,0,0,.5); }
body.studioPage .pk.white.on, body.studioPage .pk.white:active{ background:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.2); transform:translateY(1px); }
body.studioPage .pk.black.on, body.studioPage .pk.black:active{ background:#4a505a; }

body.studioPage .prismTabs{ display:flex; gap:2px; margin:0 18px; padding:4px; border-radius:11px; background:#0a0b0e; border:1px solid var(--v-line); overflow-x:auto; scrollbar-width:none; flex:none; }
body.studioPage .prismTabs::-webkit-scrollbar{ display:none; }
body.studioPage .prismTab{ flex:1 0 auto; min-height:32px; padding:0 14px; border-radius:8px; border:0; background:transparent; color:var(--v-dim); font:600 12.5px 'Inter',system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
body.studioPage .prismTab:hover{ color:var(--v-text); }
body.studioPage .prismTab.active{ background:var(--v-steel); color:var(--v-lit-ink); }
body.studioPage .prismBody{
  flex:1; min-height:0; overflow-y:auto; padding:14px 18px 22px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:12px; align-content:start;
  animation:v61Tab .25s var(--v-ease);
}
@keyframes v61Tab{ from{ opacity:.4; transform:translateY(4px); } to{ opacity:1; transform:none; } }
body.studioPage .prismBody > .prismVisual,
body.studioPage .prismBody > .prismHint,
body.studioPage .prismBody > .prismFxStrip,
body.studioPage .prismBody > .prismBrowserTop,
body.studioPage .prismBody > .prismChips,
body.studioPage .prismBody > .prismPresetGrid{ grid-column:1 / -1; }
body.studioPage .prismCard{ background:linear-gradient(180deg,#191c21,#14161a); border:1px solid var(--v-line); border-radius:12px; padding:12px 14px 14px; min-width:0; }
body.studioPage .prismCard h4{ margin:0 0 4px; font:700 13.5px var(--font-display); letter-spacing:.02em; color:var(--v-text); }
body.studioPage .prismHint{ margin:0 0 8px; font-size:12px; line-height:1.5; color:var(--v-faint); }
body.studioPage .prismGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px 8px; align-items:start; margin-top:8px; }
body.studioPage .prismGrid .fxGroup{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; min-width:0; }
body.studioPage .prismGrid .fxLabel{ display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center; font-size:11px; }
body.studioPage .prismGrid .fxLabel b{ font-weight:600; color:var(--v-dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
body.studioPage .prismGrid .fxLabel span{ font:600 11px var(--font-mono); color:var(--v-text); font-variant-numeric:tabular-nums; }
body.studioPage .prismGrid .rotaryWrap{ display:flex; flex-direction:column; align-items:center; gap:4px; }
body.studioPage .prismGrid .rotaryValue{ width:64px; font-size:10.5px; text-align:center; padding:2px 4px; }
body.studioPage .prismPanel .rotaryKnob{ --knob-accent:#e6e8eb; }
body.studioPage .prismGrid .prismSelect{ grid-column:span 2; align-items:stretch; }
body.studioPage .prismGrid .prismSelect .fxLabel{ align-items:flex-start; }
body.studioPage .prismPanel select{ width:100%; min-height:32px; background:#0c0d10; color:var(--v-text); border:1px solid var(--v-line-2); border-radius:8px; padding:0 8px; font-size:12px; }
body.studioPage .prismToggle{ grid-column:span 2; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--v-dim); cursor:pointer; align-self:center; }
body.studioPage .prismToggle input{ accent-color:#e6e8eb; width:16px; height:16px; }

body.studioPage .prismVisual{ background:#0a0b0e; border:1px solid var(--v-line); border-radius:12px; padding:8px; }
body.studioPage .prismWave, body.studioPage .prismEnv{ display:block; width:100%; height:110px; }
body.studioPage .prismWave .axis{ stroke:#262a31; stroke-width:1; }
body.studioPage .prismWave polyline{ fill:none; stroke-linejoin:round; }
body.studioPage .prismWave .waveA{ stroke:#6f7580; stroke-width:1.2; stroke-dasharray:3 3; }
body.studioPage .prismWave .waveB{ stroke:#4a505a; stroke-width:1.2; stroke-dasharray:1 3; }
body.studioPage .prismWave .waveMix{ stroke:#f1f2f4; stroke-width:2; filter:drop-shadow(0 0 4px rgba(255,255,255,.25)); }
body.studioPage .prismEnv polyline{ fill:none; stroke-linejoin:round; stroke-linecap:round; }
body.studioPage .prismEnv .envAmp{ stroke:#f1f2f4; stroke-width:2; }
body.studioPage .prismEnv .envFlt{ stroke:#8d939c; stroke-width:1.5; }
body.studioPage .prismEnv .envMod{ stroke:#5a606a; stroke-width:1.5; stroke-dasharray:4 3; }
body.studioPage .prismEnv .envLegend{ fill:#6a707a; font:10px var(--font-mono); }

body.studioPage .prismBrowserTop input{ width:100%; min-height:38px; background:#0c0d10; color:var(--v-text); border:1px solid var(--v-line-2); border-radius:10px; padding:0 12px; font-size:13px; }
body.studioPage .prismChips{ display:flex; gap:6px; flex-wrap:wrap; }
body.studioPage .prismChip{ min-height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--v-line-2); background:#15171b; color:var(--v-dim); font:600 12px 'Inter',system-ui,sans-serif; cursor:pointer; }
body.studioPage .prismChip:hover{ color:var(--v-text); border-color:#4b525d; }
body.studioPage .prismChip.on{ background:var(--v-steel); color:var(--v-lit-ink); border-color:#fff; }
body.studioPage .prismPresetGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
body.studioPage .prismPreset{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:10px 12px; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#191c21,#141619); border:1px solid var(--v-line); color:var(--v-text);
  transition:border-color .15s, transform .15s var(--v-ease), background-color .15s;
}
body.studioPage .prismPreset:hover{ border-color:#4b525d; transform:translateY(-1px); }
body.studioPage .prismPreset.current{ border-color:#e6e8eb; box-shadow:0 0 0 3px rgba(230,232,235,.08); }
body.studioPage .prismPreset .pg{ font:600 10.5px var(--font-mono); color:var(--v-faint); letter-spacing:.04em; }
body.studioPage .prismPreset strong{ font-size:13px; font-weight:600; }
body.studioPage .prismPreset em{ font-style:normal; font-size:11px; color:var(--v-faint); min-height:13px; }

body.studioPage .prismFxStrip{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px; border-radius:12px; background:#0a0b0e; border:1px solid var(--v-line); }
body.studioPage .fxChip{ min-height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--v-line-2); background:#15171b; color:var(--v-faint); font:600 11.5px 'Inter',system-ui,sans-serif; cursor:pointer; transition:all .15s; }
body.studioPage .fxChip.on{ color:var(--v-lit-ink); background:var(--v-steel); border-color:#fff; }
body.studioPage .fxArrow{ color:#3f4550; font-size:11px; }

body.studioPage .prismMatrix{ display:grid; gap:6px; margin-top:8px; }
body.studioPage .prismMatrixRow{ display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 96px; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; background:#101216; border:1px solid var(--v-line); }
body.studioPage .prismMatrixRow .slot{ font:700 12px var(--font-mono); color:var(--v-faint); text-align:center; }
body.studioPage .prismMatrixRow .fxGroup{ margin:0; min-width:0; display:flex; flex-direction:column; gap:3px; }
body.studioPage .prismMatrixRow .fxLabel{ font-size:10.5px; }
body.studioPage .prismMatrixRow .fxLabel b{ font-weight:600; color:var(--v-faint); }
body.studioPage .prismMatrixRow .rotaryWrap{ display:flex; align-items:center; gap:6px; }
body.studioPage .prismMatrixRow .rotaryKnob{ width:34px !important; height:34px !important; }
body.studioPage .prismMatrixRow .rotaryValue{ width:52px; font-size:10.5px; }
body.studioPage .prismMatrixRow .fxGroup:last-child .fxLabel{ display:none; }

body.studioPage .prismSectionHead{ color:#c9ced5 !important; }
body.studioPage .addPrismBtn{ border-style:solid !important; border-color:#4b525d !important; color:var(--v-text) !important; }

@media (max-width:760px){
  body.studioPage .synthFloatWindow.prismWindow{ left:6px !important; top:6px !important; width:calc(100vw - 12px); height:calc(100vh - 12px); border-radius:12px; }
  body.studioPage .prismBody{ grid-template-columns:1fr; padding:12px; }
  body.studioPage .prismHead, body.studioPage .prismMeter, body.studioPage .prismKeys{ padding-left:12px; padding-right:12px; }
  body.studioPage .prismTabs{ margin:0 12px; }
  body.studioPage .prismMatrixRow{ grid-template-columns:22px 1fr 1fr; }
  body.studioPage .prismMatrixRow .fxGroup:last-child{ grid-column:2 / -1; }
  body.studioPage .prismBrand small{ max-width:180px; }
}

/* ==========================================================================
   v61 — MENU DU SITE EN HAUT DU STUDIO (identique aux autres pages)
   ========================================================================== */
body.studioPage .studioSiteHeader{
  position:relative; z-index:40; flex:none; min-height:48px; --header-h:48px;
  background:#0b0c0f; border-bottom:1px solid var(--v-line);
  padding-top:0; font-family:'Inter',system-ui,sans-serif;
}
body.studioPage .studioSiteHeader .siteBrand img{ width:26px; height:26px; }
body.studioPage .studioSiteHeader .siteBrand strong{ font-size:15px; }
body.studioPage .studioSiteHeader .siteBrand small{ font-size:11.5px; }
body.studioPage .studioSiteHeader .siteNav a{ font-size:13.5px; padding:7px 11px; color:var(--v-dim); }
body.studioPage .studioSiteHeader .siteNav a:hover{ color:#fff; }
body.studioPage .studioSiteHeader .siteNav a[aria-current="page"]{ color:#fff; }
body.studioPage .studioSiteHeader .acctWrap .btn{ min-height:32px; font-size:12.5px; }
body.studioPage .studioSiteHeader .navToggle{ width:36px; height:36px; }
body.studioPage #backToMenuBtn{ display:none !important; }
/* La marque du studio (logo + version) fait doublon avec l'en-tête du site */
body.studioPage .topbar > .brand .studioLogo{ display:none; }
@media (max-width:920px){
  body.studioPage .studioSiteHeader{ min-height:46px; }
  body.studioPage .studioSiteHeader .siteNav{ z-index:60; }
}
@media (max-height:760px) and (min-width:921px){
  body.studioPage .studioSiteHeader{ min-height:42px; }
}
body.studioPage .prismPanel .fxLabel,
body.studioPage .prismPanel .fxLabel b{ text-transform:none !important; letter-spacing:0 !important; }
body.studioPage .prismGrid{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); }
body.studioPage .prismGrid .fxLabel b{ white-space:normal !important; line-height:1.2; min-height:2.4em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.studioPage .prismGrid .prismSelect .fxLabel b{ min-height:0; }
body.studioPage .topbar > .brand{ display:none !important; }

/* ==========================================================================
   v63 — PUBLIER SUR MON PROFIL
   ========================================================================== */
body.studioPage #publishProdBtn{ border-color:#6a717c !important; color:#fff !important; }
body.studioPage .publishModal{ width:min(520px,94vw) !important; padding:24px !important; font-family:'Inter',system-ui,sans-serif; }
body.studioPage .publishModal h3{ margin:0 0 6px; font-family:var(--font-display); font-size:20px; color:var(--v-text); }
body.studioPage .pubLead{ margin:0 0 14px; color:var(--v-dim); font-size:13.5px; line-height:1.5; }
body.studioPage .pubField{ display:flex; flex-direction:column; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--v-dim); }
body.studioPage .pubField small{ font-weight:400; color:var(--v-faint); }
body.studioPage .pubField :is(input,select,textarea){
  width:100%; min-height:40px; padding:0 12px; border-radius:10px; background:#0c0d10; color:var(--v-text);
  border:1px solid var(--v-line-2); font:500 14px 'Inter',system-ui,sans-serif; box-sizing:border-box;
}
body.studioPage .pubField textarea{ padding:10px 12px; min-height:76px; resize:vertical; }
body.studioPage .pubField :is(input,select,textarea):focus{ outline:none; border-color:#9aa1ab; }
body.studioPage .pubRow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.studioPage .pubVis{ border:0; padding:0; margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
body.studioPage .pubVis legend{ font-size:12.5px; font-weight:600; color:var(--v-dim); margin-bottom:6px; padding:0; }
body.studioPage .pubVis label{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:11px; border:1px solid var(--v-line-2); background:#111317; cursor:pointer; }
body.studioPage .pubVis label:has(input:checked){ border-color:#e6e8eb; background:rgba(230,232,235,.05); }
body.studioPage .pubVis input{ accent-color:#e6e8eb; margin-top:2px; }
body.studioPage .pubVis b{ display:block; font-size:13.5px; color:var(--v-text); }
body.studioPage .pubVis small{ display:block; font-size:11.5px; color:var(--v-faint); margin-top:2px; }
body.studioPage .pubStatus{ min-height:20px; margin-top:12px; font-size:13px; color:var(--v-dim); }
body.studioPage .modalOverlay.isBusy .pubStatus::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%; border:2px solid #e6e8eb; border-right-color:transparent; animation:spinPub .7s linear infinite; vertical-align:-1px; }
@keyframes spinPub{ to{ transform:rotate(360deg); } }
body.studioPage #studioToast .toastLink{ color:#111317; font-weight:700; margin-left:6px; }
@media (max-width:560px){ body.studioPage .pubRow, body.studioPage .pubVis{ grid-template-columns:1fr; } }
body.studioPage .publishModal{ position:relative; }
body.studioPage .pubClose{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--v-line-2); background:#15171b; color:var(--v-dim); cursor:pointer; font-size:14px; }
body.studioPage .pubClose:hover{ color:#fff; border-color:#6a717c; }

/* ==========================================================================
   v64 — ARRANGEMENT MODULABLE
   ========================================================================== */
body.studioPage .arrangeTools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
body.studioPage .arrSeg{ display:flex; gap:2px; padding:3px; border-radius:9px; background:#0a0b0e; border:1px solid var(--v-line); }
body.studioPage .arrSeg button{ min-height:28px; padding:0 10px; border-radius:6px; border:0; background:transparent; color:var(--v-dim); font:600 11.5px 'Inter',system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
body.studioPage .arrSeg button:hover{ color:#fff; background:rgba(255,255,255,.05); }
body.studioPage .arrSeg button.active{ background:var(--v-steel); color:var(--v-lit-ink); }
body.studioPage .arrSnap{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--v-faint); }
body.studioPage .arrSnap select{ min-height:30px; background:#0c0d10; color:var(--v-text); border:1px solid var(--v-line-2); border-radius:7px; font-size:11.5px; padding:0 6px; }

body.studioPage .laneChipsArea{
  position:relative;
  background-image:linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:var(--bar,40px) 100%, calc(var(--bar,40px) / 4) 100%;
}
body.studioPage .laneChipsArea.dropHover{ background-color:rgba(230,232,235,.05); box-shadow:inset 0 0 0 1px rgba(230,232,235,.35); }
body.studioPage .blockChip.clip{
  position:absolute; top:6px; bottom:6px; height:auto !important; padding:0 !important; display:block !important; overflow:hidden; border-radius:7px; cursor:grab; touch-action:none; user-select:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--chipColor) 40%, #1b1e24), color-mix(in srgb, var(--chipColor) 22%, #121418));
  border:1px solid color-mix(in srgb, var(--chipColor) 70%, #000);
  transition:box-shadow .15s ease, border-color .15s ease, opacity .15s;
}
@supports not (background:color-mix(in srgb, red 50%, blue)){
  body.studioPage .blockChip.clip{ background:#242830; border-color:#4b525d; }
}
body.studioPage .blockChip.clip:hover{ border-color:#c9ced5; }
body.studioPage .blockChip.clip.dragging{ cursor:grabbing; z-index:5; box-shadow:0 10px 24px rgba(0,0,0,.55); opacity:.92; }
body.studioPage .blockChip.clip.selectedClip{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 8px 20px rgba(0,0,0,.45); z-index:3; }
body.studioPage .blockChip.clip.mutedClip{ opacity:.4; filter:grayscale(1); }
body.studioPage .blockChip.clip .chipLabel{ position:relative; z-index:1; padding:3px 8px 0; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
body.studioPage .blockChip.clip .chipBars{ position:absolute; left:8px; right:8px; bottom:3px; z-index:1; font:600 10px var(--font-mono); color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.studioPage .clipPreview{ position:absolute; inset:16px 0 14px; pointer-events:none; opacity:.85; }
body.studioPage .clipPreview svg{ position:absolute; top:0; height:100%; }
body.studioPage .clipPreview .loopMark{ position:absolute; top:-12px; bottom:-10px; width:1px; background:rgba(255,255,255,.35); border-left:1px dashed rgba(255,255,255,.3); }
body.studioPage .clipHandle{ position:absolute; top:0; bottom:0; width:8px; z-index:2; cursor:ew-resize; }
body.studioPage .clipHandle.l{ left:0; } body.studioPage .clipHandle.r{ right:0; }
body.studioPage .clipHandle::after{ content:""; position:absolute; top:30%; bottom:30%; left:3px; width:2px; border-radius:2px; background:rgba(255,255,255,.0); transition:background-color .15s; }
body.studioPage .blockChip.clip:hover .clipHandle::after{ background:rgba(255,255,255,.7); }
body.studioPage #timelineLanesWrap[data-tool="cut"] .blockChip.clip{ cursor:crosshair; }
body.studioPage #timelineLanesWrap[data-tool="erase"] .blockChip.clip{ cursor:not-allowed; }
body.studioPage #timelineLanesWrap[data-tool="erase"] .blockChip.clip:hover{ border-color:#f08377; box-shadow:0 0 0 2px rgba(240,131,119,.6); }
body.studioPage #timelineLanesWrap[data-tool="stretch"] .clipHandle{ cursor:col-resize; }
body.studioPage #timelineLanesWrap[data-tool="stretch"] .blockChip.clip:hover .clipHandle::after{ background:#e9c56d; }
body.studioPage .paletteItem[draggable="true"]{ cursor:grab; }

/* Inspecteur du bloc */
body.studioPage .timelineWrap{ display:flex; flex-direction:column; min-height:0; }
body.studioPage .timelineWrap > .timelineScroll{ flex:1; min-height:0; }
body.studioPage .clipInspector{
  flex:none; border-top:1px solid var(--v-line-2); background:linear-gradient(180deg,#16191e,#111317);
  padding:10px 14px 12px; font-family:'Inter',system-ui,sans-serif; animation:v60BarIn .2s var(--v-ease);
  max-height:45vh; overflow:auto;
}
body.studioPage .clipInspector[hidden]{ display:none; }
body.studioPage .ciHead{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
body.studioPage .ciHead strong{ font-size:13.5px; color:var(--v-text); }
body.studioPage .ciSub{ font-size:11.5px; color:var(--v-faint); flex:1; }
body.studioPage .ciClose{ width:26px; height:26px; border-radius:50%; border:1px solid var(--v-line-2); background:transparent; color:var(--v-dim); cursor:pointer; }
body.studioPage .ciGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 12px; }
body.studioPage .ciGrid label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:var(--v-dim); }
body.studioPage .ciGrid :is(input[type=number],select){ min-height:30px; background:#0c0d10; color:var(--v-text); border:1px solid var(--v-line-2); border-radius:7px; padding:0 8px; font:500 12.5px 'Inter',system-ui,sans-serif; }
body.studioPage .ciGrid input[type=range]{ accent-color:#e6e8eb; }
body.studioPage .ciGrid output{ font:600 11px var(--font-mono); color:var(--v-text); }
body.studioPage .ciGrid .ciCheck{ flex-direction:row; align-items:center; gap:8px; align-self:end; min-height:30px; }
body.studioPage .ciCheck input{ accent-color:#e6e8eb; }
body.studioPage .ciActions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
body.studioPage .ciActions button{ min-height:30px; padding:0 12px; border-radius:8px; border:1px solid var(--v-line-2); background:var(--v-panel-3); color:var(--v-text); font:600 12px 'Inter',system-ui,sans-serif; cursor:pointer; }
body.studioPage .ciActions button:hover{ border-color:#6a717c; }
body.studioPage .ciActions button.danger:hover{ border-color:#f08377; color:#ffb3aa; }
@media (max-width:760px){
  body.studioPage .arrangeTools{ flex:1 1 100%; order:5; }
  body.studioPage .ciGrid{ grid-template-columns:1fr 1fr; }
}

/* v65 : colonne de lecture unique (performances) */
body.studioPage #gridInner{ position:relative; }
body.studioPage .gridPlayCol{
  position:absolute; top:0; bottom:0; left:0; z-index:1; pointer-events:none; display:none;
  background:rgba(230,232,235,.07); box-shadow:inset 1px 0 0 rgba(255,255,255,.4); will-change:transform;
}
body.studioPage .arrangePlayhead{ will-change:transform; }

/* v67 : curseur de lecture de l'arrangement */
body.studioPage .timelineRuler{ cursor:col-resize; user-select:none; touch-action:none; }
body.studioPage .timelineRuler .rulerMark{ cursor:col-resize !important; }
body.studioPage .rulerCursor{
  position:absolute; top:0; bottom:0; width:0; z-index:6; pointer-events:none;
}
body.studioPage .rulerCursor::before{
  content:""; position:absolute; bottom:0; left:-7px; width:14px; height:14px;
  background:#6fb6ff; clip-path:polygon(0 0,100% 0,100% 45%,50% 100%,0 45%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
body.studioPage .rulerCursor::after{ content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:rgba(111,182,255,.55); }
body.studioPage .timelineRuler.scrubbing .rulerCursor::before{ transform:scale(1.2); transform-origin:bottom center; }
body.studioPage #editCursorArrange{ background:#6fb6ff !important; box-shadow:0 0 8px rgba(111,182,255,.6) !important; }
body.studioPage #editCursorArrange::before{ display:none; }

/* ==========================================================================
   v68 — PRISM : macros, navigateur de sons repensé
   ========================================================================== */
body.studioPage .prismMacros{
  display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin:0 18px 12px; padding:8px 12px;
  border-radius:12px; border:1px solid var(--v-line); background:linear-gradient(180deg,#171a1f,#111316);
}
body.studioPage .prismMacroTitle{ font:700 11px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--v-faint); margin-right:4px; cursor:help; }
body.studioPage .prismMacros .fxGroup.prismMacro{ display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; min-width:150px; flex:1 1 150px; }
body.studioPage .prismMacros .prismMacro .fxLabel{ order:2; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; text-transform:none !important; letter-spacing:0 !important; }
body.studioPage .prismMacros .prismMacro .fxLabel b{ font:600 12px 'Inter',system-ui,sans-serif; color:var(--v-text); text-transform:none !important; letter-spacing:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
body.studioPage .prismMacros .prismMacro .fxLabel span{ font:600 11px var(--font-mono); color:var(--v-dim); }
body.studioPage .prismMacros .rotaryWrap{ order:1; }
body.studioPage .prismMacros .rotaryKnob{ --knob-accent:#e6e8eb; width:40px !important; height:40px !important; }
body.studioPage .prismMacros .rotaryValue{ display:none !important; }

body.studioPage .prismBrowserTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
body.studioPage .prismViews{ display:flex; gap:2px; padding:3px; border-radius:10px; background:#0a0b0e; border:1px solid var(--v-line); }
body.studioPage .prismView{ min-height:30px; padding:0 11px; border-radius:7px; border:0; background:transparent; color:var(--v-dim); font:600 12px 'Inter',system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
body.studioPage .prismView:hover{ color:#fff; }
body.studioPage .prismView.on{ background:var(--v-steel); color:var(--v-lit-ink); }
body.studioPage .prismChips[hidden]{ display:none; }
body.studioPage .prismCount{ grid-column:1 / -1; margin:0; font-size:11.5px; color:var(--v-faint); }
body.studioPage .prismGroup{ grid-column:1 / -1; margin:10px 0 0; font:700 12px var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--v-dim); border-bottom:1px solid var(--v-line); padding-bottom:6px; }
body.studioPage .prismGroup:first-child{ margin-top:0; }
body.studioPage .prismPresetGrid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; }
body.studioPage .prismPreset{ position:relative; padding:10px 12px 12px !important; gap:4px !important; min-height:104px; outline:none; }
body.studioPage .prismPreset:focus-visible{ box-shadow:0 0 0 2px #e6e8eb; }
body.studioPage .ppTop{ display:flex; align-items:center; gap:6px; width:100%; }
body.studioPage .ppType{ font:700 10.5px 'Inter',system-ui,sans-serif; padding:2px 7px; border-radius:999px; background:#22262d; border:1px solid var(--v-line-2); color:var(--v-text); white-space:nowrap; }
body.studioPage .ppTop .pg{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.studioPage .ppFav{ border:0; background:transparent; color:var(--v-faint); font-size:15px; line-height:1; cursor:pointer; padding:2px; }
body.studioPage .ppFav:hover, body.studioPage .ppFav.on{ color:#f3cf6a; }
body.studioPage .prismPreset strong{ padding-right:34px; line-height:1.25; }
body.studioPage .ppRef{ font-size:11px; font-weight:600; color:#aab3c2; }
body.studioPage .prismPreset em{ padding-right:34px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.studioPage .ppPlay{
  position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%; border:1px solid #fff; cursor:pointer;
  background:var(--v-steel); color:var(--v-lit-ink); font-size:11px; display:grid; place-items:center; padding:0 0 0 2px;
  box-shadow:0 4px 10px rgba(0,0,0,.4); transition:transform .12s var(--v-ease);
}
body.studioPage .ppPlay:hover{ transform:scale(1.08); }
body.studioPage .ppPlay.pulse{ animation:ppPulse .5s var(--v-ease); }
@keyframes ppPulse{ 0%{ box-shadow:0 0 0 0 rgba(230,232,235,.6); } 100%{ box-shadow:0 0 0 12px rgba(230,232,235,0); } }

body.studioPage .prismMacroEdit{ grid-column:1 / -1; }
body.studioPage .prismMacroRow{ display:grid; grid-template-columns:26px 150px repeat(3,minmax(0,1fr)); gap:8px 10px; align-items:center; padding:8px; margin-top:8px; border-radius:10px; background:#101216; border:1px solid var(--v-line); }
body.studioPage .prismMacroRow .slot{ font:700 12px var(--font-mono); color:var(--v-faint); text-align:center; }
body.studioPage .prismMacroName{ min-height:32px; background:#0c0d10; color:var(--v-text); border:1px solid var(--v-line-2); border-radius:8px; padding:0 8px; font:600 12.5px 'Inter',system-ui,sans-serif; min-width:0; }
body.studioPage .prismMacroSlot{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:end; min-width:0; }
body.studioPage .prismMacroSlot .fxGroup{ margin:0; min-width:0; }
body.studioPage .prismMacroSlot .fxGroup:not(.prismSelect) .fxLabel{ display:none; }
body.studioPage .prismMacroSlot .prismSelect .fxLabel b{ font-size:10.5px; color:var(--v-faint); }
body.studioPage .prismMacroSlot .rotaryKnob{ width:32px !important; height:32px !important; }
body.studioPage .prismMacroSlot .rotaryValue{ width:48px; font-size:10px; }
@media (max-width:760px){
  body.studioPage .prismMacros{ margin:0 12px 10px; }
  body.studioPage .prismBrowserTop{ grid-template-columns:1fr; }
  body.studioPage .prismViews{ overflow-x:auto; scrollbar-width:none; }
  body.studioPage .prismMacroRow{ grid-template-columns:22px 1fr; }
  body.studioPage .prismMacroSlot{ grid-column:1 / -1; }
}
body.studioPage .prismChips{ max-height:112px; overflow-y:auto; scrollbar-width:thin; }

/* ==========================================================================
   v78 — ATLAS, instruments réels
   ========================================================================== */
body.studioPage .atlasLogo{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:20px; background:radial-gradient(circle at 30% 30%,#2b3b52,#12161d); border:1px solid var(--v-line-2); box-shadow:0 6px 16px rgba(0,0,0,.45); }
body.studioPage .atlasPanel .prismBrand small{ max-width:520px; }
body.studioPage .atlasStatus{ color:var(--v-dim); }
body.studioPage .atlasStatus.busy{ color:#e9c56d; }
body.studioPage .atlasBody > .atlasTop, body.studioPage .atlasBody > .atlasChips, body.studioPage .atlasBody > .atlasGrid{ grid-column:1 / -1; }
body.studioPage .atlasSearch{ width:100%; min-height:36px; padding:0 12px; border-radius:10px; background:#0b0c0f; color:var(--v-text); border:1px solid var(--v-line-2); font:500 13px 'Inter',system-ui,sans-serif; }
body.studioPage .atlasSearch:focus{ outline:none; border-color:#8c929b; }
body.studioPage .atlasChips{ display:flex; flex-wrap:wrap; gap:6px; }
body.studioPage .atlasChip{ min-height:28px; padding:0 11px; border-radius:999px; cursor:pointer; background:var(--v-panel-3); color:var(--v-dim); border:1px solid var(--v-line-2); font:600 12px 'Inter',system-ui,sans-serif; }
body.studioPage .atlasChip:hover{ color:var(--v-text); }
body.studioPage .atlasChip.active{ background:var(--v-steel); color:var(--v-lit-ink); border-color:#fff; }
body.studioPage .atlasGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
body.studioPage .atlasCard{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; cursor:pointer; background:linear-gradient(180deg,#191c21,#14161a); border:1px solid var(--v-line); transition:border-color .15s, background-color .15s, transform .15s; min-width:0; }
body.studioPage .atlasCard:hover{ border-color:#4b525d; transform:translateY(-1px); }
body.studioPage .atlasCard:focus-visible{ outline:2px solid #8c929b; outline-offset:1px; }
body.studioPage .atlasCard.active{ border-color:#e6e8eb; background:linear-gradient(180deg,#252a31,#1a1d22); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
body.studioPage .atlasIcon{ font-size:22px; width:32px; text-align:center; flex:none; }
body.studioPage .atlasInfo{ min-width:0; }
body.studioPage .atlasInfo b{ display:block; font:600 13px 'Inter',system-ui,sans-serif; color:var(--v-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.studioPage .atlasInfo small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.35; color:var(--v-faint); }
body.studioPage .atlasSelect{ min-height:30px; border-radius:8px; background:#0b0c0f; color:var(--v-text); border:1px solid var(--v-line-2); padding:0 8px; }
body.studioPage .atlasToggle{ grid-column:span 3; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--v-dim); cursor:pointer; }
body.studioPage .atlasSectionHead{ color:#9fc3ff; }
@media (max-width:760px){
  body.studioPage .atlasGrid{ grid-template-columns:1fr 1fr; }
  body.studioPage .atlasChips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  body.studioPage .atlasChip{ flex:none; }
  body.studioPage .atlasCard{ padding:8px; gap:6px; }
  body.studioPage .atlasInfo small{ display:none; }
}

/* ==========================================================================
   v83 — PRISM : liste de sons
   ========================================================================== */
body.studioPage .prismPresetGrid.prismPresetList{ display:flex !important; flex-direction:column; gap:2px; }
body.studioPage .prismPresetList .prismGroup{ margin:10px 0 4px; }
body.studioPage .prismRow{ display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,.8fr) 32px; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; cursor:pointer;
  background:transparent; border:1px solid transparent; transition:background-color .12s, border-color .12s; outline:none; }
body.studioPage .prismRow:nth-child(even){ background:rgba(255,255,255,.018); }
body.studioPage .prismRow:hover{ background:var(--v-panel-3); border-color:var(--v-line-2); }
body.studioPage .prismRow:focus-visible{ border-color:#e6e8eb; }
body.studioPage .prismRow.current{ background:linear-gradient(90deg,rgba(230,232,235,.14),rgba(230,232,235,.04)); border-color:rgba(230,232,235,.45); }
body.studioPage .prismRow.mine .prIcon{ color:#e9c56d; }
body.studioPage .prIcon{ font-size:15px; text-align:center; color:var(--v-dim); }
body.studioPage .prMain{ display:flex; flex-direction:column; min-width:0; }
body.studioPage .prMain strong{ font:600 13px 'Inter',system-ui,sans-serif; color:var(--v-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.studioPage .prMain small{ font-size:11px; color:var(--v-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.studioPage .prTags{ font-style:normal; font-size:11px; color:var(--v-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.studioPage .prismRow .ppFav{ position:static !important; width:28px; height:28px; border-radius:7px; }
body.studioPage .prismRow .prDel{ opacity:0; transition:opacity .12s; }
body.studioPage .prismRow:hover .prDel, body.studioPage .prismRow:focus-within .prDel{ opacity:1; }
body.studioPage .prSave{ white-space:nowrap; }
@media (max-width:760px){ body.studioPage .prismRow{ grid-template-columns:24px minmax(0,1fr) 30px; } body.studioPage .prTags{ display:none; } body.studioPage .prismRow .prDel{ opacity:1; } }