/* ==================== Refonte, lot C : le design system ====================
   Direction validée le 13/11/2026 : DESIGN_SYSTEM.md du dossier de refonte, avec l'ambiance de la maquette
   « sombre, ambre et photos » (fond brun très sombre, ambre, titres Fraunces, photos en tête d'écran au lot D).
   Cette couche définit les jetons SÉMANTIQUES une seule fois (sombre et clair dessinés séparément) et branche
   dessus les anciens noms de variables (--bg, --panel, --ink, --acc…) utilisés par les couches précédentes :
   on change l'apparence de toute l'appli à un seul endroit, sans toucher aux fonctions.
   Contrastes mesurés (WCAG AA) : voir DESIGN_SYSTEM_APPLIQUE.md. */

/* ---------- la palette : chaque couleur nommée une seule fois (les jetons sémantiques plus bas et les composants s'en servent ;
   le studio, toujours sombre, s'en sert directement) ---------- */
:root{--k-noir:#0D0A08; --k-noir-2:#120D0A; --k-charbon:#17120E; --k-charbon-2:#1A120C; --k-brun-nuit:#1F1712; --k-charbon-3:#211913; --k-charbon-4:#221912; --k-graphite:#2C221A; --k-brun-ligne:#2E231B; --k-brun:#3A2C21; --k-brun-2:#4A3A2E; --k-brun-3:#3A2A1C; --k-creme:#F6EEE6; --k-creme-2:#E9DCCD; --k-creme-3:#F4ECE4; --k-sable:#C9B8A8; --k-taupe:#B9A898; --k-taupe-2:#8E7E70; --k-taupe-3:#7D6E62; --k-orange:#F08A3C; --k-orange-clair:#FFB27A; --k-orange-pale:#FFB16B; --k-orange-fonce:#C8611E; --k-sur-orange:#2A1405; --k-terracotta:#B94E25; --k-ambre:#E6B45B; --k-ambre-fonce:#8A5E16; --k-rouge:#E5524A; --k-vert:#3FBF6E; --k-blanc:#FFFFFF;}
/* le mouvement et le toucher : 3 durées, 2 courbes, une taille de doigt (les composants de 24-composants.css s'en servent) */
:root{--d-1:.12s; --d-2:.22s; --d-3:.38s; --ease:cubic-bezier(.32,.72,0,1); --ease-pop:cubic-bezier(.3,1.4,.5,1); --tap:44px;
  --c-terra:var(--k-terracotta); --c-orange-glow:0 0 0 6px rgba(240,138,60,.14), 0 10px 26px -10px rgba(240,138,60,.8)}

@font-face{font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/fraunces-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- communs aux deux thèmes : polices et échelle de texte ---------- */
:root[data-look="carnet"][data-skin="premium"][data-tone="studio"]{
  --f-title:'Fraunces', Georgia, 'Noto Music', serif; --f-display:var(--f-title);
  /* 3 polices en tout : la serif des titres (et des noms d'accords), la police du texte (et des chiffres, alignés),
     Noto Music pour les signes ♭ ♯. Plus de police « machine à écrire » hors des tablatures (.tabx garde la sienne). */
  --f-chord:var(--f-title); --f-mono:var(--f-body, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Music', system-ui, sans-serif);
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-26:26px; --t-32:32px; --t-40:40px;
}
/* ---------- sombre (thème principal) ---------- */
:root[data-look="carnet"][data-skin="premium"][data-tone="studio"]:not([data-theme="light"]){
  /* jetons sémantiques (la spécificité dépasse celle des couches 21 et 22, qui définissent les mêmes noms) */
  --c-bg:var(--k-noir); --c-surface-1:var(--k-charbon); --c-surface-2:var(--k-charbon-3); --c-surface-3:var(--k-graphite);
  --c-line:var(--k-brun-ligne); --c-line-strong:#3D3026;
  --c-text:var(--k-creme); --c-text-muted:var(--k-taupe); --c-text-faint:#8F7F72;
  --c-accent:var(--k-orange); --c-accent-fill:var(--k-orange); --c-on-accent:var(--k-sur-orange); --c-accent-soft:rgba(240,138,60,.16);
  --c-amber:var(--k-ambre); --c-success:#7FC495; --c-warning:var(--k-ambre); --c-danger:#E8857D;
  --c-glass:rgba(24,18,14,.78); --c-glass-edge:rgba(255,255,255,.08); --c-glow:0 0 28px rgba(240,138,60,.55);
  /* les anciens noms, branchés sur les jetons */
  --bg:var(--c-bg); --panel:var(--c-surface-1); --soft:var(--c-surface-2); --ink:var(--c-text); --muted:var(--c-text-muted);
  --line:var(--c-line); --line-strong:var(--c-line-strong);
  --acc:var(--c-accent); --acc-fill:var(--c-accent-fill); --acc-ink:var(--c-on-accent); --acc-soft:#3A2414; --amb:var(--c-amber);
  --char:#060403; --char-ink:var(--c-text);
  --bar:var(--c-glass); --glass:rgba(34,24,17,.66); --glass-strong:rgba(23,18,14,.92); --glass-pill:var(--c-accent-soft);
  --glass-hi:rgba(255,255,255,.08); --glass-lo:rgba(255,255,255,.02); --glass-edge:var(--c-glass-edge); --glass-sheet:var(--c-surface-1);
  --tr5:var(--k-creme-3); --nk-txt:var(--c-text-muted);
  color-scheme:dark;
}
/* ---------- clair (dessiné à part) ---------- */
@media (prefers-color-scheme: light){ :root[data-look="carnet"][data-skin="premium"][data-tone="studio"]:not([data-theme="dark"]){
  --c-bg:#F4F1EB; --c-surface-1:var(--k-blanc); --c-surface-2:#ECE8E1; --c-surface-3:#E3DED5;
  --c-line:#D8D2C8; --c-line-strong:#C9C1B4;
  --c-text:#242321; --c-text-muted:#6B665E; --c-text-faint:#6B665E;
  --c-accent:#A8481C; --c-accent-fill:var(--k-terracotta); --c-on-accent:var(--k-blanc); --c-accent-soft:rgba(185,78,37,.12);
  --c-amber:var(--k-ambre-fonce); --c-success:#356E48; --c-warning:var(--k-ambre-fonce); --c-danger:#B3403A;
  --c-glass:rgba(244,241,235,.86); --c-glass-edge:rgba(36,35,33,.1); --c-glow:0 8px 22px -8px rgba(185,78,37,.55);
  --acc-soft:#F5DFD3; --char:#242321; --char-ink:#F4F1EB;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(244,241,235,.94); --glass-hi:rgba(255,255,255,.9); --glass-lo:rgba(255,255,255,.3);
  --tr5:#242321;
  color-scheme:light;
} }
:root[data-look="carnet"][data-skin="premium"][data-tone="studio"][data-theme="light"]{
  --c-bg:#F4F1EB; --c-surface-1:var(--k-blanc); --c-surface-2:#ECE8E1; --c-surface-3:#E3DED5;
  --c-line:#D8D2C8; --c-line-strong:#C9C1B4;
  --c-text:#242321; --c-text-muted:#6B665E; --c-text-faint:#6B665E;
  --c-accent:#A8481C; --c-accent-fill:var(--k-terracotta); --c-on-accent:var(--k-blanc); --c-accent-soft:rgba(185,78,37,.12);
  --c-amber:var(--k-ambre-fonce); --c-success:#356E48; --c-warning:var(--k-ambre-fonce); --c-danger:#B3403A;
  --c-glass:rgba(244,241,235,.86); --c-glass-edge:rgba(36,35,33,.1); --c-glow:0 8px 22px -8px rgba(185,78,37,.55);
  --acc-soft:#F5DFD3; --char:#242321; --char-ink:#F4F1EB;
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(244,241,235,.94); --glass-hi:rgba(255,255,255,.9); --glass-lo:rgba(255,255,255,.3);
  --tr5:#242321;
  color-scheme:light;
}
/* Le thème sombre est le thème principal : sans choix explicite, l'appli s'ouvre en sombre, sauf si
   l'iPhone est réglé en clair (réglage « Auto » du Carnet). */

/* ---------- typographie : Fraunces pour les titres, la police du système pour le texte ---------- */
[data-tone="studio"] body{font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, 'Noto Music', sans-serif}
[data-tone="studio"] :is(.pm-large,.pm-hero-t,.tl-title,.fo-t,.se-title,.sp-q,.tu-top h2,.cf-t,.st-hi,.pr-t,.ex-name b,.cn-stats,.st-session .pm-hero-t){font-family:var(--f-title) !important; font-stretch:100% !important; font-weight:600 !important; letter-spacing:-.015em !important; font-optical-sizing:auto}
[data-tone="studio"] :is(.pm-h,.sp-h,.page .sec-h h3,.ex-sec .pm-h){font-family:var(--f-title) !important; font-stretch:100% !important; font-weight:600 !important; letter-spacing:-.01em !important; font-size:var(--t-20)}
[data-tone="studio"] .pm-large{font-size:34px; line-height:1.08}
[data-tone="studio"] .st-session .pm-hero-t{font-size:clamp(32px,9.6vw,42px) !important; line-height:1.04 !important; max-width:15ch}
[data-tone="studio"] .st-hi{font-size:var(--t-26); font-weight:600 !important}
[data-tone="studio"] .cn-stats{font-weight:500 !important}
[data-tone="studio"] :is(.cr-pad,.cr-step b,.cn-tile b,.pm-glyph){font-family:var(--f-title); font-stretch:100%; font-weight:600}

/* ---------- boutons ---------- */
/* principal : l'aplat orange, un léger halo (c'est ce qu'on touche) */
[data-tone="studio"] :is(.se-go,#sh-play,.sh-start,.fo-b.fo-next,.pm-hero-go,.ex-hear,.pr-go,.play:not([aria-pressed="true"]):not([data-cf-work]),.cf-act [data-cf-hear]){background:var(--c-accent-fill) !important; color:var(--c-on-accent) !important; box-shadow:var(--c-glow)}
/* secondaire : un filet ; tertiaire : le mot seul, souligné ; destructif : rouge */
[data-tone="studio"] .btn{box-shadow:inset 0 0 0 1px var(--c-line-strong); color:var(--c-text)}
[data-tone="studio"] :is(.btn-danger,[data-bk-wipe],[data-danger]){color:var(--c-danger); box-shadow:inset 0 0 0 1px var(--c-danger)}
/* sélection : fond orange doux, texte orange */
[data-tone="studio"] :is(.chip[aria-pressed="true"],.btn[aria-pressed="true"],.tog[aria-pressed="true"],.stg-b[aria-expanded="true"]){background:var(--c-accent-soft); color:var(--c-accent); box-shadow:inset 0 0 0 1px var(--c-accent)}

/* ---------- surfaces : listes, panneaux, feuilles ---------- */
[data-tone="studio"] :is(.page :is(.card,.panel,section.pc,section.dico,section.lb,section.rp,section.jr,section.bk,section.ec,section.quiz,section.drill,section.rl,section.rhythm,.fk-card),.fo-card,.ex-card){background:var(--c-surface-1)}
[data-tone="studio"] :is(.tu,.cf-sheet){background:var(--c-surface-1)}
[data-tone="studio"] :is(.ex-task,.fo-card > .fo-g){background:var(--c-surface-2)}

/* ---------- progression et états ---------- */
[data-tone="studio"] :is(.pr-bar i,.pm-prog i,.pm-mini-bar i){background:linear-gradient(90deg, var(--c-accent-fill), var(--c-amber))}
[data-tone="studio"] .pm-day i.on{background:linear-gradient(180deg, var(--c-amber), var(--c-accent-fill))}
[data-tone="studio"] .pm-empty, [data-tone="studio"] .home-none{color:var(--c-text-muted)}
[data-tone="studio"] :is(.sh-msg,.audio-msg,#bk-msg,.cf-msg,.so-msg,#m-status,.dc-msg):not(:empty):not([hidden]){box-shadow:inset 3px 0 0 var(--c-amber)}
[data-tone="studio"] #dc-msg:not([hidden]){box-shadow:inset 3px 0 0 var(--c-danger)}

/* ---------- navigation : la barre basse en pilule de verre, l'onglet actif en orange doux ---------- */
@media (max-width:899px){
  [data-tone="studio"] #sh-tabs{background:var(--c-glass); box-shadow:inset 0 0 0 1px var(--c-glass-edge), 0 10px 30px rgba(0,0,0,.45)}
}
[data-tone="studio"] #sh-tabs .sp-tab[aria-pressed="true"]{background:var(--c-accent-soft); color:var(--c-accent)}
[data-tone="studio"] #sh-tabs .sp-tab:not([aria-pressed="true"]){color:var(--c-text-muted)}
@media (min-width:900px){ [data-tone="studio"] #sh-tabs{background:var(--c-surface-1); box-shadow:inset -1px 0 0 var(--c-line)} }
/* sur Aujourd'hui, les raccourcis (accordeur, métronome, Jam, mixeur) sont sur la page : on ne les répète pas en haut */
[data-tone="studio"] body.se-today.sh-on .sh-top .sh-ic{display:none}

/* ---------- focus et mouvement ---------- */
[data-tone="studio"] :is(button,a,select,input,textarea,summary):focus-visible{outline:2px solid var(--c-accent); outline-offset:2px}

/* ==================== Lot D1 : l'écran Aujourd'hui (maquette « sombre, ambre et photos ») ==================== */
/* la photo en tête, qui passe sous la barre du haut, et le dégradé vers le fond */
[data-tone="studio"] .am-home{padding-bottom:12px}
[data-tone="studio"] .am-hero{position:relative; isolation:isolate; margin:-48px -14px 0; padding:62px 20px 132px; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:var(--k-creme)}
[data-tone="studio"] .am-photo{position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:50% 32%}
[data-tone="studio"] .am-veil{position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(13,10,8,.55) 0%, rgba(13,10,8,.08) 28%, rgba(13,10,8,.42) 62%, var(--c-bg) 100%)}
[data-tone="studio"] .am-glow{position:absolute; left:-80px; bottom:-60px; z-index:-1; width:420px; height:240px; border-radius:50%; background:radial-gradient(closest-side, rgba(240,138,60,.24), rgba(240,138,60,0))}
[data-tone="studio"] .am-logo{position:absolute; left:20px; top:calc(14px + env(safe-area-inset-top,0px)); margin:0; display:flex; align-items:center; gap:9px; color:var(--k-orange); font:600 18px/1 var(--f-title)}
[data-tone="studio"] .am-logo svg{width:30px; height:30px}
[data-tone="studio"] .am-logo span{color:var(--k-creme)} [data-tone="studio"] .am-logo em{font-style:normal; color:#F29A52}
[data-tone="studio"] .am-hi{margin:0; font:600 36px/1.05 var(--f-title); letter-spacing:-.5px; text-shadow:0 2px 18px rgba(0,0,0,.6)}
[data-tone="studio"] .am-sub{margin:6px 0 0; font-size:15px; line-height:1.4; color:#E4D6C8; text-shadow:0 1px 10px rgba(0,0,0,.7); max-width:34ch}
/* la séance du jour, en verre sur la photo, avec le bouton rond lumineux */
[data-tone="studio"] .am-card{position:relative; z-index:2; margin:-114px 0 0; padding:16px; border-radius:26px; background:rgba(34,24,17,.66); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px rgba(255,186,128,.22), 0 18px 40px rgba(0,0,0,.45); color:var(--k-creme); min-height:0; overflow:visible}
[data-tone="studio"] .am-card-go{display:flex; align-items:center; gap:14px; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer}
[data-tone="studio"] .am-play{flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, var(--k-orange-pale), var(--k-orange) 55%, var(--k-orange-fonce)); box-shadow:0 0 28px rgba(240,138,60,.65); color:var(--k-sur-orange); transition:transform .15s}
[data-tone="studio"] .am-card-go:active .am-play{transform:scale(.94)}
[data-tone="studio"] .am-play svg{width:22px; height:22px; margin-left:2px}
[data-tone="studio"] .am-card-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
[data-tone="studio"] .am-kick{font-size:12px; font-weight:600; color:#F7B985}
[data-tone="studio"] .am-card .am-title{margin:0; font:600 21px/1.15 var(--f-title) !important; letter-spacing:-.01em !important; color:var(--k-creme); max-width:none}
[data-tone="studio"] .am-goal{font-size:13px; line-height:1.35; color:#CDBDAE}
[data-tone="studio"] .am-chev{flex:none; width:18px; height:18px; color:#E4D6C8}
[data-tone="studio"] .am-bar{display:flex; gap:3px; height:5px; margin-top:14px}
[data-tone="studio"] .am-bar i{border-radius:3px; background:rgba(255,255,255,.14)}
[data-tone="studio"] .am-bar i.done{background:var(--k-orange)} [data-tone="studio"] .am-bar i.cur{background:linear-gradient(90deg,var(--k-orange),var(--k-orange-pale))}
/* Jouer par style : des vignettes photo */
[data-tone="studio"] .am-sec{margin-top:24px}
[data-tone="studio"] .am-sec-h{display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 10px}
[data-tone="studio"] .am-sec-h h2{margin:0; font:600 17px var(--f-body, inherit); font-family:-apple-system, system-ui, sans-serif; color:var(--c-text)}
[data-tone="studio"] .am-more{min-height:44px; margin:-12px 0; padding:0 2px; border:0; background:none; color:var(--c-accent); font:500 14px -apple-system, system-ui, sans-serif; cursor:pointer}
[data-tone="studio"] .am-styles{display:flex; gap:10px; overflow-x:auto; margin:0 -14px; padding:0 14px; scrollbar-width:none; scroll-snap-type:x mandatory}
[data-tone="studio"] .am-styles::-webkit-scrollbar{display:none}
[data-tone="studio"] .am-style{position:relative; flex:none; width:104px; height:128px; padding:0; border:0; border-radius:18px; overflow:hidden; scroll-snap-align:start; background:var(--k-charbon); cursor:pointer}
[data-tone="studio"] .am-style img{width:100%; height:100%; object-fit:cover; display:block}
[data-tone="studio"] .am-style::after{content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.8))}
[data-tone="studio"] .am-style span{position:absolute; left:10px; right:8px; bottom:9px; z-index:1; color:#fff; font:600 13px -apple-system, system-ui, sans-serif; text-align:left}
/* Ta semaine : l'anneau des séances, les minutes, les jours */
[data-tone="studio"] .am-week{display:flex !important; align-items:center; gap:14px; margin-top:14px; padding:12px 16px !important; border-radius:22px !important; background:linear-gradient(135deg, var(--c-surface-2), var(--c-surface-1)) !important; box-shadow:inset 0 0 0 1px var(--c-line) !important}
[data-tone="studio"] .am-ring{position:relative; flex:none; width:58px; height:58px}
[data-tone="studio"] .am-ring svg{width:58px; height:58px; filter:drop-shadow(0 0 6px rgba(240,138,60,.45))}
[data-tone="studio"] .am-ring circle{fill:none; stroke-width:6}
[data-tone="studio"] .am-ring-bg{stroke:var(--c-surface-3)} [data-tone="studio"] .am-ring-on{stroke:var(--c-accent-fill); stroke-linecap:round}
[data-tone="studio"] .am-ring b{position:absolute; inset:0; display:grid; place-items:center; font:700 15px -apple-system, system-ui, sans-serif; font-variant-numeric:tabular-nums; color:var(--c-text)}
[data-tone="studio"] .am-week-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
[data-tone="studio"] .am-week-tx b{font-size:15px; font-weight:600; color:var(--c-text)}
[data-tone="studio"] .am-week-tx span{font-size:13px; color:var(--c-text-muted)}
[data-tone="studio"] .am-days{flex:none; display:flex; align-items:flex-end; gap:4px; height:36px}
[data-tone="studio"] .am-days i{width:6px; border-radius:3px; background:var(--c-surface-3)}
[data-tone="studio"] .am-days i.on{background:linear-gradient(180deg,var(--k-orange-pale),var(--k-orange))}
[data-tone="studio"] .am-days i.today:not(.on){background:var(--c-text-muted)}
/* le reste de l'accueil garde ses blocs, un peu plus serrés */
[data-tone="studio"] .am-home .st-quick{margin-top:22px}
@media (min-width:700px){
  [data-tone="studio"] .am-home{max-width:760px; margin:0 auto}
  [data-tone="studio"] .am-hero{margin-left:0; margin-right:0; border-radius:0 0 28px 28px; min-height:300px}
  [data-tone="studio"] .am-styles{margin:0; padding:0}
}
/* sur Mac (grand écran) : l'accueil prend la largeur disponible au lieu d'une colonne de téléphone au milieu */
@media (min-width:1280px){ [data-tone="studio"] .am-home{max-width:1040px} }
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] .am-play{transition:none} }
/* (correctifs : la carte ne reprend pas la hauteur minimale de l'ancienne grande carte ; la photo occupe plus de place) */
[data-tone="studio"] .am-home .am-card{min-height:0 !important; margin-top:-146px}
[data-tone="studio"] .am-home .am-hero{min-height:420px; padding-bottom:160px}
[data-tone="studio"] .am-veil{background:linear-gradient(180deg, rgba(13,10,8,.55) 0%, rgba(13,10,8,.1) 26%, rgba(13,10,8,.45) 58%, rgba(13,10,8,.78) 84%, var(--c-bg) 100%)}

/* ==================== Lot D2 : Explorer et la fiche d'accord ==================== */
/* l'en-tête photo d'un espace (plus court que celui d'Aujourd'hui) ; le grand titre de l'espace est alors sur la photo */
[data-tone="studio"] .am-top{position:relative; isolation:isolate; margin:-48px -14px 14px; padding:110px 20px 20px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:var(--k-creme)}
[data-tone="studio"] .sh-panel:has(.am-top) > .pm-large{display:none}
[data-tone="studio"] .am-top .am-hi{font-size:36px}
@media (min-width:700px){ [data-tone="studio"] .am-top{margin-left:0; margin-right:0; border-radius:0 0 28px 28px; min-height:260px} }
/* la fiche : où l'accord apparaît, ses autres vues, l'exercice */
[data-tone="studio"] .cfm{padding:8px 18px 28px; border-top:1px solid var(--c-line)}
[data-tone="studio"] .cfm-h{margin:20px 2px 10px; font:600 19px var(--f-title)}
[data-tone="studio"] .cfm-acts{display:flex; flex-wrap:wrap; gap:8px}
[data-tone="studio"] .cfm-ex{margin:14px 0 0; padding:12px 14px; border-radius:var(--r-s); background:var(--c-surface-2); box-shadow:inset 3px 0 0 var(--c-amber); font-size:15px; line-height:1.45}
[data-tone="studio"] .cfm-ex b{color:var(--c-amber)}

/* ==================== Lot D3 : Pratiquer ==================== */
[data-tone="studio"] .am-prat .pr-hero{min-height:300px; padding-bottom:96px; margin-bottom:0}
[data-tone="studio"] .am-prat .pr-hero .am-photo{object-position:50% 40%}
/* la séance du jour, en verre sur la photo, comme sur Aujourd'hui */
[data-tone="studio"] .am-prat .pr-focus{position:relative; z-index:2; margin-top:-82px; background:rgba(34,24,17,.66); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px rgba(255,186,128,.22), 0 18px 40px rgba(0,0,0,.45); border-radius:26px}
[data-tone="studio"] .am-prat .pr-k{color:#F7B985}
[data-tone="studio"] .am-prat .pr-t{font-size:26px; line-height:1.12}
[data-tone="studio"] .am-prat .pr-go{border-radius:999px; padding:0 22px 0 8px; background:radial-gradient(circle at 30% 30%, var(--k-orange-pale), var(--k-orange) 55%, var(--k-orange-fonce)) !important; color:var(--k-sur-orange) !important; box-shadow:0 0 24px rgba(240,138,60,.55)}
[data-tone="studio"] .am-prat .pr-go svg{width:32px; height:32px; padding:9px; border-radius:50%; background:rgba(42,20,5,.12)}
[data-tone="studio"] .am-prat .pr-paused{margin-top:-60px; position:relative; z-index:3; margin-bottom:72px}
[data-tone="studio"] .pr-quick{margin-top:20px}
[data-tone="studio"] .pr-quick{grid-template-columns:repeat(3,1fr)}
/* sur Pratiquer, l'accordeur et le métronome sont dans les outils rapides : on ne les répète pas en haut (le mixeur reste) */
[data-tone="studio"] body:has(.am-prat) .sh-top :is(#sh-tuner,#sh-metro){display:none}
/* en clair, la carte de séance de Pratiquer dépasse de la photo : elle passe en charbon plein (le verre deviendrait gris sur l'ivoire) */
:root[data-tone="studio"][data-theme="light"] .am-prat .pr-focus{background:var(--k-brun-nuit); -webkit-backdrop-filter:none; backdrop-filter:none}
@media (prefers-color-scheme: light){ :root[data-tone="studio"]:not([data-theme="dark"]) .am-prat .pr-focus{background:var(--k-brun-nuit); -webkit-backdrop-filter:none; backdrop-filter:none} }

/* ==================== Lot D4 : Créer ==================== */
[data-tone="studio"] .am-creer .cr-hero{min-height:290px; padding-bottom:92px; margin-bottom:0}
[data-tone="studio"] .am-creer .cr-hero .am-photo{object-position:50% 45%}
[data-tone="studio"] .am-creer .cr-jam{position:relative; z-index:2; margin-top:-78px; background:rgba(34,24,17,.7) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px rgba(255,186,128,.22), 0 18px 40px rgba(0,0,0,.45) !important; border-radius:26px}
[data-tone="studio"] .am-creer .cr-jam .pm-hero-k{color:#F7B985}
[data-tone="studio"] .am-creer .cr-pad{font-family:var(--f-title); font-weight:600}
[data-tone="studio"] .am-creer .cr-jam .pm-hero-go{border-radius:999px; padding:0 22px 0 8px; background:radial-gradient(circle at 30% 30%, var(--k-orange-pale), var(--k-orange) 55%, var(--k-orange-fonce)) !important; color:var(--k-sur-orange) !important; box-shadow:0 0 24px rgba(240,138,60,.55) !important}
[data-tone="studio"] .am-creer .cr-jam .pm-hero-go svg{width:32px; height:32px; padding:9px; border-radius:50%; background:rgba(42,20,5,.12)}
:root[data-tone="studio"][data-theme="light"] .am-creer .cr-jam{background:var(--k-brun-nuit) !important; -webkit-backdrop-filter:none; backdrop-filter:none}
@media (prefers-color-scheme: light){ :root[data-tone="studio"]:not([data-theme="dark"]) .am-creer .cr-jam{background:var(--k-brun-nuit) !important; -webkit-backdrop-filter:none; backdrop-filter:none} }
@media (min-width:700px){ [data-tone="studio"] .am-creer .ex-cols > div:first-child{margin-top:0} }
@media (min-width:700px){
  [data-tone="studio"] .am-creer .cr-hero{padding-bottom:24px; min-height:240px; margin-bottom:18px}
  [data-tone="studio"] .am-creer .cr-jam{margin-top:0}
}

/* ==================== Lot D5 : Mon carnet ==================== */
[data-tone="studio"] .am-carnet .cn-hero .am-photo{object-position:50% 55%}
[data-tone="studio"] .am-carnet .cn-stats{margin-top:4px}
/* la semaine : des barres lumineuses */
[data-tone="studio"] .am-carnet .pm-day i.on{background:linear-gradient(180deg,var(--k-orange-pale),var(--k-orange)) !important; box-shadow:0 0 14px rgba(240,138,60,.55)}
[data-tone="studio"] .am-carnet .pm-day i:not(.on){background:var(--c-surface-3)}
/* les dernières séances : une vignette, le titre, le bilan en pastille, la durée réelle, ta note */
[data-tone="studio"] .cn-sessions{display:flex; flex-direction:column; gap:10px}
[data-tone="studio"] .cn-ses{display:flex; gap:12px; width:100%; padding:10px; border:0; border-radius:18px; background:var(--c-surface-1); box-shadow:inset 0 0 0 1px var(--c-line); color:var(--c-text); text-align:left; font:inherit; cursor:pointer}
[data-tone="studio"] .cn-ses img{flex:none; width:58px; height:58px; border-radius:12px; object-fit:cover}
[data-tone="studio"] .cn-ses-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
[data-tone="studio"] .cn-ses-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
[data-tone="studio"] .cn-ses-h b{font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-tone="studio"] .cn-pill{flex:none; padding:2px 9px; border-radius:999px; font:600 12px -apple-system, system-ui, sans-serif; font-style:normal}
[data-tone="studio"] .cn-pill.cn-facile{background:rgba(127,196,149,.16); color:var(--c-success)}
[data-tone="studio"] .cn-pill.cn-juste{background:var(--c-accent-soft); color:var(--c-accent)}
[data-tone="studio"] .cn-pill.cn-dur{background:rgba(232,133,125,.16); color:var(--c-danger)}
[data-tone="studio"] .cn-ses-m{font-size:13px; color:var(--c-text-muted); font-variant-numeric:tabular-nums}
[data-tone="studio"] .cn-ses-n{font-size:13.5px; line-height:1.4; color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ==================== Lot E : le mini-lecteur du Jam et du métronome ==================== */
[data-tone="studio"] body.le-mini-on .sh-panel{padding-bottom:calc(var(--dock, calc(148px + env(safe-area-inset-bottom,0px))) + 16px)}
[data-tone="studio"] body.le-mini-on:not(.sh-on) .page{padding-bottom:calc(var(--dock, calc(148px + env(safe-area-inset-bottom,0px))) + 16px)}
[data-tone="studio"] .le-mini[data-kind="metro"] .pm-art{background:radial-gradient(circle at 35% 30%, var(--k-orange-pale), var(--k-orange) 55%, var(--k-orange-fonce))}
[data-tone="studio"] .le-mini[data-kind="jam"] .pm-art{background:url(../img/style-folk.jpg) center/cover}
[data-tone="studio"] .pm-mini{background:var(--c-glass) !important; box-shadow:inset 0 0 0 1px var(--c-glass-edge), 0 10px 30px rgba(0,0,0,.45) !important}

/* ==================== Lot F : le manche en bois (maquette) ====================
   Un instrument : touche en palissandre (dégradé et veinage), frettes argentées, cordes filées et lisses,
   repères nacrés, notes lumineuses dans le code de la méthode (1 rouge et carrée, 3 vert, ♭3 violet, 5 ivoire,
   7 ambre) ; les notes hors de la position choisie en pointillé. Même dessin dans les deux thèmes.
   Seule l'apparence change : positions, notes et sons viennent du même moteur. */
[data-tone="studio"] :is(.stage-neck,.neck-scroll){
  --wood:repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px), linear-gradient(180deg, #2E1A0E 0%, #4A2C17 18%, #3B2212 50%, #4A2C17 82%, #2E1A0E 100%);
  background:var(--wood) !important; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.7) !important;
  --nk-bg:transparent; --nk-txt:#E9D7B8; --tr5:var(--k-creme-3);
}
[data-tone="studio"] .neck-scroll{padding:4px 0}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg{background:transparent !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nk-fret{stroke:#CFC9C1 !important; stroke-width:2.6 !important; opacity:1 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nk-nut{stroke:#EFE6D6 !important; stroke-width:5 !important; opacity:1 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nk-str{stroke:#E2D0AE !important; opacity:1 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nk-inlay{fill:#EDE6DA !important; opacity:.82 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.nk-num,.nk-sname){fill:#E9D7B8 !important; opacity:.85}
/* les notes, lumineuses : un halo peint sous la note (pas de filtre CSS : Safari sur iPhone gère mal les filtres sur les éléments SVG) */
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-1{fill:var(--k-rouge) !important; stroke:rgba(229,82,74,.45); stroke-width:3.5; paint-order:stroke}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-3{fill:var(--k-vert) !important; stroke:rgba(63,191,110,.42); stroke-width:3.5; paint-order:stroke}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-3m{fill:#A86BE0 !important; stroke:rgba(168,107,224,.42); stroke-width:3.5; paint-order:stroke}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-5{fill:var(--k-creme-3) !important; stroke:rgba(255,255,255,.32); stroke-width:3.5; paint-order:stroke}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-7{fill:#F0A43C !important; stroke:rgba(240,164,60,.42); stroke-width:3.5; paint-order:stroke}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .nd-x{fill:rgba(13,10,8,.55) !important; stroke:#E9D7B8 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.ndt-1,.ndt-3m){fill:#fff !important} [data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.ndt-3,.ndt-5,.ndt-7){fill:#1A0F07 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .ndt-x{fill:var(--k-creme-3) !important}
/* l'autre position (hors de la forme choisie) : en pointillé, comme sur la maquette */
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim) .nd{fill:rgba(13,10,8,.45) !important; stroke-dasharray:3 2.5; stroke-width:1.8; filter:none !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .pn-d.dim .nd-1, [data-tone="studio"] :is(.stage-neck,.neck-scroll) svg .sxd.dim .nd-1{stroke:#FF8A82 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim) :is(.nd-3){stroke:#7FE0A0 !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim) :is(.nd-5,.nd-x){stroke:rgba(255,255,255,.75) !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim) :is(.nd-7){stroke:#F0A43C !important}
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim) .ndt{fill:var(--k-creme-3) !important; opacity:.85}
@media (prefers-reduced-transparency:reduce){ [data-tone="studio"] :is(.stage-neck,.neck-scroll) svg *{filter:none !important} }
[data-tone="studio"] :is(.stage-neck,.neck-scroll) svg :is(.pn-d.dim,.sxd.dim){opacity:.9 !important}

/* ==================== Lot G : statistiques ==================== */
[data-tone="studio"] .lg-goal{display:flex; align-items:center; gap:12px; margin-top:12px}
[data-tone="studio"] .lg-bar{flex:1; display:flex; height:8px; border-radius:4px; background:var(--c-surface-3); overflow:hidden}
[data-tone="studio"] .lg-bar i{display:block; height:100%}
[data-tone="studio"] .lg-mes{background:var(--c-accent-fill)}
[data-tone="studio"] .lg-est{background:repeating-linear-gradient(135deg, var(--c-amber) 0 3px, transparent 3px 6px); opacity:.8}
[data-tone="studio"] .lg-lab{flex:none; font-size:13.5px; color:var(--c-text-muted); font-variant-numeric:tabular-nums}
[data-tone="studio"] .lg-lab b{color:var(--c-text); font-size:15px}
[data-tone="studio"] .lg-src{display:inline-block; margin-top:3px; padding:1px 8px; border-radius:999px; font:600 11.5px -apple-system, system-ui, sans-serif; font-style:normal; width:max-content}
[data-tone="studio"] .lg-mes{} [data-tone="studio"] i.lg-mes.lg-src{background:var(--c-accent-soft); color:var(--c-accent)}
[data-tone="studio"] i.lg-src.lg-auto{background:var(--c-surface-2); color:var(--c-text-muted)}
[data-tone="studio"] i.lg-src.lg-new{background:transparent; color:var(--c-text-faint); box-shadow:inset 0 0 0 1px var(--c-line-strong)}
[data-tone="studio"] .lg-how{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:14.5px; line-height:1.45; color:var(--c-text-muted)}
[data-tone="studio"] .lg-how b{color:var(--c-text)}
[data-tone="studio"] .pg-line{stroke:var(--c-accent-fill); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round}
[data-tone="studio"] .pg-dot{fill:var(--c-accent-fill); stroke:var(--c-surface-1); stroke-width:2}
[data-tone="studio"] .pg-grid{stroke:var(--c-line); stroke-width:1}
[data-tone="studio"] .pg-ax{fill:var(--c-text-muted)}

/* ==================== Lot H : contrôle final ==================== */
/* cibles tactiles : 44 px minimum partout (puces, filtres, accords, boutons ronds) */
[data-tone="studio"] :is(.ex-cat,.ex-chip,.chip,.cf-chip,.cr-pad,.seg button,.stg-b,.tog){min-height:44px}
[data-tone="studio"] :is(.ex-chip,.cf-chip,.sh-jcc){min-width:44px}
[data-tone="studio"] :is(.sh-ic svg,.tl-ic,.tl-back,.pm-back:not([hidden])){width:44px !important; height:44px !important; min-height:44px}
[data-tone="studio"] .sh-ic svg{padding:12px !important}
/* écran de 320 px : la ligne du clic de la séance passe sur deux lignes au lieu de déborder */
@media (max-width:360px){
  [data-tone="studio"] .im-met{flex-wrap:wrap; row-gap:8px}
  [data-tone="studio"] .im-met .im-go{margin-left:0}
}
[data-tone="studio"] .sh-top .sh-ic{width:44px; height:44px; min-height:44px}
[data-tone="studio"] .pm-carnet .sp-theme .seg button, [data-tone="studio"] .bkh :is(button,a){min-height:44px}

/* ==================== Micro : ce que le micro entend pendant « Vérifier au micro » ==================== */
.tm-lvl{width:100%; height:6px; border-radius:3px; background:var(--c-line, var(--k-brun-ligne)); overflow:hidden; margin:6px 0 10px}
.tm-lvl i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--c-accent, var(--k-orange)), var(--c-amber, var(--k-ambre))); transition:width .08s linear}

/* ==================== Navigation : icônes de guitare, pastille qui glisse, transitions ==================== */
[data-tone="studio"] #sh-tabs .nav-ic{width:26px; height:26px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
[data-tone="studio"] #sh-tabs .nav-ic .nv-fill{fill:currentColor; stroke:none; opacity:0; transition:opacity .25s ease}
[data-tone="studio"] #sh-tabs .nav-ic .nv-dot{fill:currentColor; stroke:none}
[data-tone="studio"] #sh-tabs .sp-tab[aria-pressed="true"] .nav-ic .nv-fill{opacity:.24}
[data-tone="studio"] #sh-tabs .sp-tab[aria-pressed="true"] .nav-ic{transform:translateY(-1px)}
[data-tone="studio"] #sh-tabs .sp-tab:active .nav-ic{transform:scale(.86)}
[data-tone="studio"] #sh-tabs .sp-tab span{font:600 10.5px/1.15 var(--f-body, system-ui); letter-spacing:.005em}
[data-tone="studio"] #sh-tabs .sp-tab{position:relative; z-index:1; background:transparent !important; -webkit-tap-highlight-color:transparent; transition:color .2s ease}
/* la pastille, une seule, qui glisse sous l'onglet actif */
[data-tone="studio"] #sh-tabs .sp-ind{position:absolute; left:0; top:0; z-index:0; display:block; border-radius:999px; background:var(--c-accent-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 22%, transparent); pointer-events:none;
  transition:transform .42s cubic-bezier(.3,1.25,.4,1), width .42s cubic-bezier(.3,1.25,.4,1), height .3s ease, opacity .2s}
[data-tone="studio"] #sh-tabs .sp-ind.still{transition:none}
@media (min-width:900px){ [data-tone="studio"] #sh-tabs .sp-ind{border-radius:12px} [data-tone="studio"] #sh-tabs .sp-tab span{font-size:15px} }

/* changer d'espace : la page arrive du côté de l'onglet touché ; ouvrir un outil : de la droite ; revenir : de la gauche */
@keyframes nv-r{from{opacity:0; transform:translate3d(40px,0,0)} to{opacity:1; transform:none}}
@keyframes nv-l{from{opacity:0; transform:translate3d(-40px,0,0)} to{opacity:1; transform:none}}
[data-tone="studio"] :is(#sh-panel,.page,#shell).nv-r{animation:nv-r .26s var(--ease) both !important; will-change:transform,opacity}
[data-tone="studio"] :is(#sh-panel,.page,#shell).nv-l{animation:nv-l .26s var(--ease) both !important; will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] :is(#sh-panel,.page,#shell):is(.nv-r,.nv-l){animation:none !important} [data-tone="studio"] #sh-tabs .sp-ind{transition:none} }
[data-tone="studio"] #sh-tabs .nav-ic .nv-thin{stroke-width:1.3}
[data-tone="studio"] #sh-tabs .nav-ic .nv-nut{stroke-width:2.8; stroke-linecap:round}

/* ==================== Studio de boucles (lots A à E) ====================
   Une pièce de studio : toujours sombre (comme le manche), dans les deux thèmes. Les clips portent la couleur
   de leur piste ; celui qui joue s'éclaire et montre son avancée, celui qui attend la mesure clignote doucement. */
body.bx-on{overflow:hidden}
body.bx-on #sh-tabs, body.bx-on .pm-mini, body.bx-on .le-mini{display:none !important}
.bx{--bx-bg:var(--k-noir); --bx-s1:var(--k-charbon); --bx-s2:var(--k-charbon-3); --bx-s3:var(--k-graphite); --bx-line:var(--k-brun-ligne); --bx-tx:var(--k-creme); --bx-mu:var(--k-taupe); --bx-acc:var(--k-orange);
  position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; background:radial-gradient(120% 60% at 50% -10%, #2A1A0E 0%, var(--bx-bg) 55%); color:var(--bx-tx);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px); font-family:var(--f-body, system-ui, -apple-system, sans-serif);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent}
.bx[hidden]{display:none}
@keyframes bx-in{from{transform:translate3d(0,28px,0); opacity:0}}
@keyframes bx-out{to{transform:translate3d(0,36px,0); opacity:0}}
.bx.bx-in{animation:bx-in .3s var(--ease) both}
.bx.bx-out{animation:bx-out .24s cubic-bezier(.4,0,1,1) both; pointer-events:none}
.bx button{font:inherit; color:inherit; cursor:pointer}
.bx :focus-visible{outline:2px solid var(--bx-acc); outline-offset:2px}
.bx-top{display:flex; align-items:center; gap:10px; padding:10px 14px 6px}
.bx-ib{min-width:44px; min-height:44px; border-radius:999px; border:1px solid var(--bx-line); background:var(--bx-s1); display:grid; place-items:center; font-size:20px; line-height:1}
.bx-ib svg{width:22px; height:22px}
.bx-title{flex:1; margin:0; font:600 26px/1 var(--f-title, Georgia, serif); letter-spacing:-.01em}
.bx-play{width:56px; height:56px; border-radius:999px; border:0; background:var(--bx-acc); color:var(--k-sur-orange); display:grid; place-items:center; box-shadow:0 0 0 6px rgba(240,138,60,.14), 0 10px 26px -10px rgba(240,138,60,.8)}
.bx-play svg{width:24px; height:24px}
.bx-play[aria-pressed="true"]{background:var(--k-creme); color:var(--k-charbon); box-shadow:0 0 0 6px rgba(246,238,230,.12)}
.bx-tempo{display:flex; align-items:center; gap:4px}
.bx-tempo .bx-ib{min-width:var(--tap); width:var(--tap); font-size:18px}
.bx-bpm{min-width:58px; min-height:44px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-s2); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.bx-bpm b{font:600 19px/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums}
.bx-bpm small{font-size:9.5px; letter-spacing:.06em; color:var(--bx-mu); margin-top:2px}
.bx-bar{display:flex; gap:8px; padding:4px 14px 10px; flex-wrap:wrap}
.bx .bx-seg{display:inline-flex; background:var(--bx-s1); border:1px solid var(--bx-line); border-radius:999px; padding:3px; gap:2px}
.bx .bx-seg button{min-height:var(--tap); padding:0 14px; border-radius:999px; border:0; background:transparent; color:var(--bx-mu); font-weight:600; font-size:14px}
.bx .bx-seg button[aria-pressed="true"]{background:var(--bx-s3); color:var(--bx-tx); box-shadow:inset 0 0 0 1px rgba(240,138,60,.35)}
.bx-body{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 10px calc(24px + env(safe-area-inset-bottom,0px))}
/* la grille : une colonne pour lancer les scènes, puis une colonne par piste */
.bx-gwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -10px; padding:0 10px 4px; scrollbar-width:none}
.bx-gwrap::-webkit-scrollbar{display:none}
.bx-grid{display:grid; grid-template-columns:64px repeat(var(--n),minmax(84px,1fr)); gap:6px; align-items:stretch; min-width:min-content}
.bx-grid > .bx-sc, .bx-grid > .bx-corner{position:sticky; left:0; z-index:2}
.bx-grid > .bx-sc{background:var(--k-charbon); box-shadow:6px 0 10px -6px rgba(0,0,0,.8)}
.bx-corner{min-height:10px}
.bx-th{display:flex; flex-direction:column; gap:6px; padding:8px 6px; border-radius:14px; background:var(--bx-s1); border-top:3px solid var(--tc); min-width:0}
.bx-tn{border:0; background:none; padding:0; text-align:left; min-height:40px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.bx-tn b{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-tn span{font-size:11px; color:var(--bx-mu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-ms{display:flex; gap:4px}
.bx-m,.bx-s{flex:1; min-height:var(--tap); border-radius:10px; border:1px solid var(--bx-line); background:var(--bx-s2); color:var(--bx-mu); font-size:12px !important; font-weight:800}
.bx-m[aria-pressed="true"]{background:#5A2A22; color:#FFC9BF; border-color:#7A3A30}
.bx-s[aria-pressed="true"]{background:#5B4A16; color:#FFE6A6; border-color:#7A6420}
.bx-sc{min-height:58px; border-radius:14px; border:1px solid var(--bx-line); background:var(--bx-s1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px; color:var(--bx-mu)}
.bx-sc svg{width:16px; height:16px; color:var(--bx-acc)}
.bx-sc span{font-size:11px; font-weight:600; line-height:1.1; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bx-sc:active{background:var(--bx-s2)}
.bx-c{position:relative; min-height:58px; border-radius:14px; border:1px solid color-mix(in srgb, var(--tc) 45%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, var(--k-charbon)), color-mix(in srgb, var(--tc) 16%, var(--k-charbon)));
  display:flex; flex-direction:column; justify-content:center; gap:2px; padding:6px 8px 10px; text-align:left; overflow:hidden; min-width:0; transition:transform .12s ease, filter .2s}
.bx-c b{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-c span{font-size:10.5px; color:color-mix(in srgb, var(--tc) 55%, var(--k-creme))}
.bx-c:active{transform:scale(.96)}
.bx-c.on{background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, var(--k-charbon)), color-mix(in srgb, var(--tc) 45%, var(--k-charbon))); border-color:var(--tc); box-shadow:0 0 0 1px var(--tc), 0 8px 22px -10px var(--tc)}
.bx-c.on b{color:#fff}
.bx-c.q{animation:bx-q .5s ease-in-out infinite alternate}
@keyframes bx-q{from{filter:brightness(1)} to{filter:brightness(1.55)}}
.bx-c.dim{opacity:.45}
.bx-pg{position:absolute; left:8px; right:8px; bottom:5px; height:3px; border-radius:2px; background:rgba(0,0,0,.35); overflow:hidden}
.bx-pg i{display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0)}
.bx-c:not(.on) .bx-pg{opacity:0}
.bx-e{background:transparent; border:1px dashed var(--bx-line); color:var(--bx-mu); align-items:center; font-size:22px}
.bx-e span{font-size:22px; color:var(--bx-mu)}
.bx-stop{min-height:40px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-s1); color:var(--bx-mu); display:grid; place-items:center}
.bx-stop svg{width:18px; height:18px}
.bx-stop.on{color:var(--bx-tx); border-color:var(--k-brun-2)}
.bx-stopall{min-height:40px}
.bx-hint{margin:12px 4px 0; font-size:13px; line-height:1.45; color:var(--bx-mu)}
/* l'éditeur : une feuille qui monte du bas */
.bx-sheet{position:fixed; left:0; right:0; bottom:0; max-height:82vh; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2; background:var(--bx-s1); border-radius:22px 22px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px))}
.bx-sheet.bx-in{animation:bx-up .28s cubic-bezier(.22,.9,.25,1)}
@keyframes bx-up{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .bx-sheet{animation:none} .bx-c.q{animation:none; filter:brightness(1.4)} }
.bx-sh-h{display:flex; gap:10px; align-items:center; position:sticky; top:-10px; background:var(--bx-s1); padding:6px 0; z-index:1}
.bx-name{flex:1; min-width:0; min-height:44px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-tx); font:600 20px var(--f-title, Georgia, serif); padding:0 12px; -webkit-user-select:text; user-select:text}
.bx-sh-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 6px}
.bx-kit{min-height:44px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-tx); font:600 14px var(--f-body, system-ui); padding:0 10px; flex:1; min-width:150px}
.bx-drummer h3{margin:14px 0 8px; font:600 17px var(--f-title, Georgia, serif)}
.bx-stys{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.bx-stys::-webkit-scrollbar{display:none}
.bx .bx-stys .chip{flex:none; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-mu); font-weight:600; font-size:13.5px}
.bx .bx-stys .chip[aria-pressed="true"]{background:rgba(240,138,60,.16); color:var(--k-orange-clair); border-color:rgba(240,138,60,.5)}
.bx-dr{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
@media (min-width:560px){ .bx-dr{grid-template-columns:1fr 180px} }
.bx-xy{position:relative; height:170px; border-radius:16px; border:1px solid var(--bx-line); touch-action:none; overflow:hidden;
  background:linear-gradient(90deg, rgba(240,138,60,.0), rgba(240,138,60,.10)), linear-gradient(0deg, rgba(230,180,91,.0), rgba(230,180,91,.10)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 25%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 25%), var(--bx-bg)}
.bx-dot{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; left:calc(var(--x)*100%); top:calc((1 - var(--y))*100%); border-radius:50%; background:var(--bx-acc); box-shadow:0 0 0 6px rgba(240,138,60,.22), 0 0 24px rgba(240,138,60,.8); pointer-events:none}
.bx-xyl{position:absolute; font-size:11px; color:var(--bx-mu); pointer-events:none}
.bx-xyl-x1{left:10px; bottom:8px} .bx-xyl-x2{right:10px; bottom:8px} .bx-xyl-y1{left:10px; top:auto; bottom:24px; display:none} .bx-xyl-y2{left:10px; top:8px}
.bx-dr-b{display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start}
.bx .bx-dr-b .btn{min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-tx); font-weight:600; font-size:14px}
.bx .bx-dr-b .btn[disabled]{opacity:.4}
.bx .bx-del{min-height:40px; background:none; border:0; color:#E8857D; font-weight:600; font-size:14px; padding:0 6px}
.bx-seq{margin-top:16px}
.bx .bx-pages{margin-bottom:8px; flex-wrap:wrap}
.bx-steps{display:flex; flex-direction:column; gap:4px}
.bx-row{display:grid; grid-template-columns:46px repeat(var(--per),minmax(0,1fr)); gap:3px; align-items:stretch}
.bx-row.off .bx-vl{color:var(--k-taupe-3)}
.bx-vl{min-height:36px; border-radius:8px; border:0; background:var(--bx-s2); color:var(--bx-tx); font-size:11px !important; font-weight:700; padding:0 2px; text-align:center}
.bx-st{min-height:var(--tap); border-radius:7px; border:0; background:#241B15; position:relative}
.bx-st.b{background:#2E241C}
.bx-st.f{background:var(--bx-acc); box-shadow:0 0 12px -2px rgba(240,138,60,.7)}
.bx-st.d{background:rgba(240,138,60,.42)}
.bx-st.now{outline:2px solid var(--k-creme); outline-offset:-2px}
@media (min-width:900px){ .bx-body{max-width:980px; margin:0 auto; width:100%} .bx-sheet{left:50%; right:auto; width:760px; transform:translateX(-50%); animation:none} }
/* l'entrée dans Créer : une carte charbon, la grille en miniature */
.bx-card{display:flex; align-items:center; gap:14px; width:100%; margin:14px 0 4px; padding:14px; border-radius:20px; border:1px solid var(--k-brun); background:linear-gradient(135deg,#221810,var(--k-noir-2)); color:var(--k-creme); text-align:left; box-shadow:0 14px 32px -18px rgba(0,0,0,.8)}
.bx-card:active{transform:scale(.985)}
.bx-mini{display:flex; gap:3px; flex:none}
.bx-mini-col{display:flex; flex-direction:column; gap:3px}
.bx-mini-col i{display:block; width:12px; height:9px; border-radius:3px; background:var(--k-graphite)}
.bx-mini-col i.f{background:var(--tc); opacity:.9}
.bx-card-t{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.bx-card-t b{font:600 18px var(--f-title, Georgia, serif)}
.bx-card-t span{font-size:13.5px; line-height:1.4; color:var(--k-sable)}
.bx-card-go{width:44px; height:44px; flex:none; border-radius:999px; background:var(--k-orange); color:var(--k-sur-orange); display:grid; place-items:center}
.bx-card-go svg{width:18px; height:18px}

/* lots B à E : vues, messages, mixage, morceau, grille de notes */
.bx .bx-views{width:100%; display:grid; grid-template-columns:repeat(4,1fr)}
.bx .bx-views button{padding:0 6px}
.bx-msg{margin:0 14px 8px; padding:10px 12px; border-radius:12px; background:var(--bx-s2); border-left:3px solid var(--k-ambre); font-size:14px; line-height:1.4}
.bx-live{border-left-color:var(--k-rouge); font-weight:700; font-variant-numeric:tabular-nums}
.bx-recdot{display:inline-block; width:10px; height:10px; margin-left:8px; border-radius:50%; background:var(--k-rouge); vertical-align:middle; animation:bx-q .6s ease-in-out infinite alternate}
.bx-coach{margin:0 0 10px; padding:10px 12px; border-radius:14px; background:linear-gradient(135deg, rgba(240,138,60,.14), rgba(230,180,91,.06)); border:1px solid rgba(240,138,60,.28); font-size:13.5px; line-height:1.45; color:var(--k-creme-2)}
.bx-coach b{display:block; font:600 14px var(--f-title, Georgia, serif); color:var(--k-orange-clair); margin-bottom:2px}
.bx-add{min-height:96px; border-radius:14px; border:1px dashed var(--k-brun-2); background:transparent; color:var(--bx-mu); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.bx-add span{font-size:24px; line-height:1} .bx-add small{font-size:11px}
.bx-pad{display:block}
.bx-lv{display:block; height:4px; border-radius:2px; background:rgba(0,0,0,.4); overflow:hidden}
.bx-lv > i{display:block; height:100%; background:linear-gradient(90deg,#5CC8B8,var(--k-ambre) 70%,var(--k-rouge)); transform-origin:left; transform:scaleX(0)}
.bx-c.rec{box-shadow:0 0 0 2px var(--k-rouge); animation:bx-q .5s ease-in-out infinite alternate}
.bx-c.bx-ce{background:transparent; border-style:dashed}
.bx-v-mix, .bx-v-song{display:flex; flex-direction:column; gap:10px}
.bx-strip, .bx-card2{background:var(--bx-s1); border:1px solid var(--bx-line); border-radius:16px; padding:12px 14px}
.bx-strip{border-top:3px solid var(--tc, var(--k-orange))}
.bx-mstr{--tc:var(--k-creme)}
.bx-strip h3, .bx-card2 h3{margin:0 0 8px; font:600 17px var(--f-title, Georgia, serif); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bx-strip h3 span{font:500 12px var(--f-body, system-ui); color:var(--bx-mu)}
.bx-strip h3 .bx-lv{flex-basis:100%}
.bx-dotc{width:10px; height:10px; border-radius:50%; background:var(--tc)}
.bx-rg{display:grid; grid-template-columns:96px 1fr 70px; align-items:center; gap:8px; min-height:44px; font-size:13px; color:var(--bx-mu)}
.bx-rg output{font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:var(--bx-tx)}
.bx input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:32px; background:transparent; margin:0}
.bx input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(90deg, var(--tc, var(--k-orange)), var(--k-brun))}
.bx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:var(--k-creme); box-shadow:0 2px 8px rgba(0,0,0,.6)}
.bx input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--k-brun)}
.bx input[type=range]::-moz-range-thumb{width:24px; height:24px; border:0; border-radius:50%; background:var(--k-creme)}
.bx-tog{min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-mu); font-weight:600; font-size:13.5px; margin-top:4px}
.bx-tog[aria-pressed="true"]{background:rgba(240,138,60,.16); color:var(--k-orange-clair); border-color:rgba(240,138,60,.5)}
.bx-tg2{display:flex; gap:8px; flex-wrap:wrap}
.bx-swr{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:13px; color:var(--bx-mu)}
.bx-card2 p{margin:0 0 10px; font-size:13.5px; line-height:1.45; color:var(--k-sable)}
.bx-row2{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0}
.bx .btn{min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-tx); font-weight:600; font-size:14px; display:inline-flex; align-items:center; text-decoration:none}
.bx .btn[disabled]{opacity:.4}
.bx .btn.bx-hot{background:#3A1712; border-color:#7A3A30; color:#FFC9BF}
.bx .btn.bx-hot[aria-pressed="true"]{background:var(--k-rouge); color:#fff; border-color:var(--k-rouge)}
.bx .link{background:none; border:0; color:var(--k-orange-clair); font-weight:600; font-size:14px; min-height:44px; padding:0 4px; text-decoration:underline}
.bx-file audio{width:100%; margin-top:6px}
.bx-tpls{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:6px}
@media (min-width:560px){ .bx-tpls{grid-template-columns:1fr 1fr} }
.bx-tpl{min-height:64px; padding:10px 12px; border-radius:14px; border:1px solid var(--bx-line); background:var(--bx-bg); text-align:left; display:flex; flex-direction:column; gap:2px}
.bx-tpl b{font:600 16px var(--f-title, Georgia, serif)} .bx-tpl span{font-size:12.5px; color:var(--bx-mu); line-height:1.35}
.bx-tpl.on{border-color:rgba(240,138,60,.6); box-shadow:inset 0 0 0 1px rgba(240,138,60,.4)}
.bx-sheet-s{max-height:70vh}
.bx-sh-t{flex:1; margin:0; font:600 20px var(--f-title, Georgia, serif)}
.bx-sheet h3{margin:16px 0 8px; font:600 17px var(--f-title, Georgia, serif)}
.bx-prog{width:100%; min-height:48px; border-radius:12px; border:1px solid var(--bx-line); background:var(--bx-bg); color:var(--bx-tx); font:600 17px ui-monospace, "SF Mono", Menlo, monospace; padding:0 12px; -webkit-user-select:text; user-select:text}
.bx-prog.bad{border-color:var(--k-rouge)}
.bx-lab{font-size:13px; color:var(--bx-mu)}
.bx-octv{min-width:28px; text-align:center; font-variant-numeric:tabular-nums}
.bx-roll{gap:2px}
.bx-pr .bx-st{min-height:28px; border-radius:4px; background:#1E1611}
.bx-pr .bx-st.b{background:#251C16}
.bx-pr .bx-st.ct{background:var(--k-brun-3)}
.bx-pr .bx-st.rt{background:#4A3220}
.bx-pr .bx-st.n0{background:var(--bx-acc); box-shadow:0 0 10px -2px rgba(240,138,60,.7); border-radius:4px 0 0 4px}
.bx-pr .bx-st.n1{background:rgba(240,138,60,.7); border-radius:0}
.bx-pr .bx-vl{min-height:28px; display:flex; align-items:center; justify-content:center; font-size:10px !important; background:transparent; color:var(--k-taupe-3)}
.bx-pr .bx-vl.c{color:var(--bx-tx); font-weight:800}
.bx-chr .bx-vl{min-height:24px; background:transparent; font-size:10px !important; color:var(--bx-mu); display:flex; align-items:center; justify-content:center}
.bx-chn{font-size:10.5px; font-weight:700; color:var(--k-orange-clair); white-space:nowrap; overflow:visible; display:flex; align-items:center}

/* ==================== Design, étape 1 : moins de texte ==================== */
[data-tone="studio"] #fo-card .fo-w{font-size:var(--t-20,20px); line-height:1.35; font-weight:600; color:var(--c-text); -webkit-line-clamp:unset; display:block; max-height:none; overflow:visible}
[data-tone="studio"] .fo-goal{display:flex; align-items:flex-start; gap:10px; margin:12px 0 4px; padding:12px 14px; border-radius:16px; background:var(--c-accent-soft); color:var(--c-text); font-size:15px; line-height:1.4; font-weight:600}
[data-tone="studio"] .fo-goal svg{flex:none; width:22px; height:22px; color:var(--c-accent); margin-top:-1px}
[data-tone="studio"] details.fo-plus{margin:10px 0 4px; border-radius:14px; border:1px solid var(--c-line); background:var(--c-surface-1)}
[data-tone="studio"] details.fo-plus > summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 14px; font-weight:600; font-size:14.5px; color:var(--c-text-muted)}
[data-tone="studio"] details.fo-plus > summary::-webkit-details-marker{display:none}
[data-tone="studio"] details.fo-plus > summary::after{content:''; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease}
[data-tone="studio"] details.fo-plus[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
[data-tone="studio"] details.fo-plus > div, [data-tone="studio"] details.fo-plus > p{padding:0 14px 12px; font-size:14px; line-height:1.5; color:var(--c-text-muted)}
[data-tone="studio"] details.fo-plus > div p{margin:0 0 8px}
@media (hover:none){ [data-tone="studio"] .sp-keys{display:none !important} }

/* ==================== Design, étape 2 : le mouvement ==================== */
@keyframes d2-up{from{opacity:0; transform:translate3d(0,10px,0)} to{opacity:1; transform:none}}
@keyframes d2-pop{0%{transform:scale(1)} 40%{transform:scale(1.22) translateY(-2px)} 70%{transform:scale(.94)} 100%{transform:scale(1)}}
@keyframes d2-breathe{0%,100%{box-shadow:0 0 0 0 rgba(240,138,60,.45), 0 10px 26px -10px rgba(240,138,60,.7)} 50%{box-shadow:0 0 0 12px rgba(240,138,60,0), 0 10px 30px -8px rgba(240,138,60,.9)}}
@keyframes d2-grow{from{transform:scaleX(0)} to{transform:none}}
@keyframes d2-beat{0%{transform:scale(1.045)} 100%{transform:scale(1)}}
@keyframes d2-fade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
[data-tone="studio"] .d2-in{animation:d2-up .3s var(--ease) both; animation-delay:calc(var(--d2i,0) * 30ms)}
[data-tone="studio"] #sh-panel.d2-grow :is(.pr-bar i,.pm-prog i,.pm-bar i,.lg-bar i){transform-origin:left; animation:d2-grow 1s cubic-bezier(.2,.9,.25,1) .25s both}
/* le doigt : chaque bouton répond */
[data-tone="studio"] :is(button,.btn,a.btn,.sp-row,.cn-tile,.cr-step,.am-card,.pm-hero,.bx-card,.chip,.ex-chip){transition:transform .18s cubic-bezier(.3,1.4,.5,1), background-color .2s, box-shadow .2s, opacity .2s}
[data-tone="studio"] :is(button,.btn,.sp-row,.cn-tile,.cr-step,.chip,.ex-chip):active:not(:disabled){transform:scale(.965)}
[data-tone="studio"] :is(.am-card,.pm-hero,.bx-card):active{transform:scale(.985)}
/* le bouton de lecture respire tant qu'on ne l'a pas touché */
[data-tone="studio"] :is(.am-play,.bx-play[aria-pressed="false"],.bx-card-go){animation:d2-breathe 2.6s ease-in-out infinite}
/* l'onglet choisi : un petit bond */
[data-tone="studio"] #sh-tabs .sp-tab[aria-pressed="true"] .nav-ic{animation:d2-pop .45s cubic-bezier(.3,1.4,.5,1)}
/* les volets qui s'ouvrent */
[data-tone="studio"] details[open] > :not(summary){animation:d2-fade .28s ease both}
/* le studio bat la mesure */
.bx-c.d2-beat, .bx-play.d2-beat{animation:d2-beat .22s ease-out}
@media (prefers-reduced-motion:reduce){
  [data-tone="studio"] :is(.d2-in,.am-play,.bx-play,.bx-card-go,details[open] > *), [data-tone="studio"] #sh-tabs .sp-tab .nav-ic, [data-tone="studio"] #sh-panel.d2-grow *, .bx-c.d2-beat{animation:none !important}
  [data-tone="studio"] :is(button,.sp-row):active{transform:none}
}

/* ==================== Design, étape 3 : les icônes en tuiles de couleur ==================== */
[data-tone="studio"] .ex-ic.d2-tile{--ih:28; width:42px !important; height:42px !important; min-width:42px; border-radius:12px !important; display:grid !important; place-items:center;
  background:linear-gradient(150deg, hsl(var(--ih) 78% 62%) 0%, hsl(var(--ih) 70% 44%) 100%) !important; color:#fff !important; border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.18), 0 6px 14px -8px hsl(var(--ih) 70% 40% / .9) !important}
[data-tone="studio"] .ex-ic.d2-tile svg{width:24px !important; height:24px !important; color:#fff !important; stroke:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
[data-tone="studio"] .ex-ic.d2-tile svg *{stroke:#fff}
[data-tone="studio"] .ex-ic.d2-tile svg [fill="currentColor"]{fill:#fff}
:root[data-theme="dark"][data-tone="studio"] .ex-ic.d2-tile, :root:not([data-theme="light"])[data-tone="studio"] .ex-ic.d2-tile{background:linear-gradient(150deg, hsl(var(--ih) 70% 56%) 0%, hsl(var(--ih) 64% 36%) 100%) !important}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"])[data-tone="studio"] .ex-ic.d2-tile{background:linear-gradient(150deg, hsl(var(--ih) 78% 60%) 0%, hsl(var(--ih) 70% 44%) 100%) !important} }
[data-tone="studio"] :is(.sp-row,.cr-step,.cn-tile):active .ex-ic.d2-tile{animation:d2-pop .4s cubic-bezier(.3,1.4,.5,1)}

/* ==================== L'accordeur en instrument ==================== */
[data-tone="studio"] .tu-disp.ta-on{position:relative; padding:14px 12px 16px; border-radius:24px; background:radial-gradient(120% 90% at 50% 100%, #2A1A0E 0%, var(--k-noir-2) 70%) !important; color:var(--k-creme); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -22px rgba(0,0,0,.8); transition:box-shadow .35s ease}
[data-tone="studio"] .tu-disp.ta-on .tu-gauge{display:none}
.ta-wrap{position:relative; width:100%; max-width:340px; margin:0 auto}
.ta-svg{display:block; width:100%; height:auto; overflow:visible}
.ta-track{fill:none; stroke:var(--k-graphite); stroke-width:14; stroke-linecap:round}
.ta-flat, .ta-sharp{fill:none; stroke-width:14; stroke-linecap:round; opacity:.55}
.ta-flat{stroke:url(#none); stroke:#5A3A20} .ta-sharp{stroke:#5A3A20}
.ta-zone{fill:none; stroke:var(--k-vert); stroke-width:14; stroke-linecap:round; opacity:.85}
.ta-t{stroke:var(--k-taupe-3); stroke-width:1.6; stroke-linecap:round} .ta-t.big{stroke:#E9D7B8; stroke-width:2.4}
.ta-l{fill:var(--k-taupe); font:600 10px var(--f-body, system-ui); text-anchor:middle}
.ta-needle{transform-origin:150px 165px; transform:rotate(0deg); transition:transform .14s cubic-bezier(.3,1.3,.5,1)}
.ta-needle line{stroke:var(--k-orange); stroke-width:3.5; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(240,138,60,.8))}
.ta-needle circle{fill:var(--k-orange)}
.ta-hub{fill:var(--k-creme); stroke:var(--k-noir-2); stroke-width:3}
.ta-wrap.idle .ta-needle{opacity:.35}
.ta-wrap .tu-note{position:relative; justify-content:center; margin-top:-8px; pointer-events:none}
[data-tone="studio"] .ta-wrap .tu-note #tu-n{font:600 52px/1 var(--f-title, Georgia, serif); color:var(--k-creme); transition:color .25s, text-shadow .25s}
[data-tone="studio"] .ta-wrap .tu-note .tu-oct{font:600 15px var(--f-body, system-ui); color:var(--k-taupe)}
[data-tone="studio"] .tu-disp.ta-on :is(.tu-cents,.tu-hint){color:var(--k-creme-2); text-align:center}
[data-tone="studio"] .tu-disp.ta-on .tu-hint{font-size:17px; font-weight:700; min-height:1.4em}
/* juste : halo vert ; proche : ambre */
[data-tone="studio"] .tu-disp.ta-on.ok{box-shadow:inset 0 0 0 2px rgba(63,191,110,.7), 0 0 44px -6px rgba(63,191,110,.55), 0 18px 40px -22px rgba(0,0,0,.8)}
[data-tone="studio"] .tu-disp.ta-on.ok .ta-needle line{stroke:var(--k-vert); filter:drop-shadow(0 0 8px rgba(63,191,110,.9))} [data-tone="studio"] .tu-disp.ta-on.ok .ta-needle circle{fill:var(--k-vert)}
[data-tone="studio"] .tu-disp.ta-on.ok #tu-n{color:#7FE0A0; text-shadow:0 0 22px rgba(63,191,110,.7)}
[data-tone="studio"] .tu-disp.ta-on.ok .tu-hint{color:#7FE0A0}
[data-tone="studio"] .tu-disp.ta-on.near .tu-hint{color:var(--k-ambre)}
/* la tête de guitare : 3 mécaniques de chaque côté */
[data-tone="studio"] .tu-strings.ta-head{display:grid; grid-template-columns:1fr 112px 1fr; grid-template-rows:repeat(3,64px) auto; grid-template-areas:"l1 h r1" "l2 h r2" "l3 h r3" "a a a"; gap:6px 12px; align-items:center; margin:14px auto 4px; max-width:360px}
[data-tone="studio"] .tu-strings.ta-head::before{content:''; grid-area:1 / 2 / 4 / 3; align-self:stretch; background:var(--ta-head) center / contain no-repeat; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
[data-tone="studio"] .ta-head .tu-s{width:58px; height:58px; min-height:58px; padding:0; border-radius:50%; border:0; justify-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:radial-gradient(circle at 35% 30%, var(--k-blanc) 0%, #D9D2C8 38%, #8E857B 100%); color:var(--k-charbon-2); box-shadow:0 6px 14px -6px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.8); transition:transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .25s}
[data-tone="studio"] .ta-head .tu-s .tu-sl{font:700 19px/1 var(--f-title, Georgia, serif)}
[data-tone="studio"] .ta-head .tu-s .tu-sn{font-size:9.5px; color:#5A4A3E; font-weight:800}
[data-tone="studio"] .ta-head .tu-s:active{transform:scale(.9) rotate(-25deg)}
[data-tone="studio"] .ta-head .tu-s.cur{box-shadow:0 0 0 3px var(--k-orange), 0 0 22px rgba(240,138,60,.65), inset 0 -3px 6px rgba(0,0,0,.25)}
[data-tone="studio"] .ta-head .tu-s[aria-pressed="true"]:not(.auto){background:radial-gradient(circle at 35% 30%, #FFD3B0 0%, var(--k-orange) 55%, #9A4A16 100%); color:var(--k-sur-orange)}
[data-tone="studio"] .ta-head .tu-s.done .tu-ck{display:grid; place-items:center; position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:var(--k-vert); color:#fff; font-size:11px}
[data-tone="studio"] .ta-head .tu-s[data-tu-s="2"]{grid-area:l1} [data-tone="studio"] .ta-head .tu-s[data-tu-s="1"]{grid-area:l2} [data-tone="studio"] .ta-head .tu-s[data-tu-s="0"]{grid-area:l3}
[data-tone="studio"] .ta-head .tu-s[data-tu-s="3"]{grid-area:r1} [data-tone="studio"] .ta-head .tu-s[data-tu-s="4"]{grid-area:r2} [data-tone="studio"] .ta-head .tu-s[data-tu-s="5"]{grid-area:r3}
[data-tone="studio"] .ta-head .tu-s.auto{grid-area:a; width:auto; height:auto; min-height:44px; border-radius:999px; padding:0 22px; justify-self:center; font-size:14px; background:var(--c-surface-2); color:var(--c-text); box-shadow:none}
[data-tone="studio"] .ta-head .tu-s.auto[aria-pressed="true"]{background:var(--c-accent-soft); color:var(--c-accent)}
@media (prefers-reduced-motion:reduce){ .ta-needle{transition:none} }

/* ==================== Les récompenses ==================== */
.d4-layer{position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden}
.d4-p{position:absolute; display:block; border-radius:50%; will-change:transform,opacity}
.d4-p.d4-s{border-radius:2px}
.d4-cele{position:fixed; left:50%; top:40%; z-index:9999; transform:translate(-50%,-50%) scale(.8); opacity:0; pointer-events:none; min-width:240px; max-width:86vw; padding:22px 26px; border-radius:24px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #3A2312 0%, var(--k-charbon) 70%); color:var(--k-creme); box-shadow:0 0 0 1px rgba(240,138,60,.45), 0 0 60px -6px rgba(240,138,60,.55), 0 24px 60px -20px rgba(0,0,0,.8); transition:transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s}
.d4-cele.on{transform:translate(-50%,-50%) scale(1); opacity:1}
.d4-cele b{display:block; font:600 28px/1.1 var(--f-title, Georgia, serif)}
.d4-cele span{display:block; margin-top:6px; font-size:15px; line-height:1.4; color:var(--k-creme-2)}
.d4-cele.d4-soft{box-shadow:0 0 0 1px rgba(230,180,91,.4), 0 24px 60px -20px rgba(0,0,0,.8)}
.d4-streak{display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:10px 14px; border-radius:999px; background:var(--c-surface-2, var(--k-charbon-3)); color:var(--c-text, var(--k-creme)); font-variant-numeric:tabular-nums; flex-wrap:wrap}
.d4-streak b{font:700 22px/1 var(--f-title, Georgia, serif)}
.d4-of{font-size:13px; color:var(--c-text-muted, var(--k-taupe))}
.d4-fl{width:22px; height:22px; color:var(--k-taupe-3); transition:color .3s}
.d4-fl svg{width:100%; height:100%}
.d4-dots{display:flex; gap:4px; margin-left:auto}
.d4-dots i{width:9px; height:9px; border-radius:50%; background:var(--c-line-strong, #3D3026); transition:background .3s, transform .3s}
.d4-dots i.on{background:var(--c-accent, var(--k-orange)); box-shadow:0 0 8px rgba(240,138,60,.6)}
.d4-streak.hot .d4-fl{color:var(--k-orange); filter:drop-shadow(0 0 6px rgba(240,138,60,.8))}
.d4-streak.done{background:linear-gradient(90deg, rgba(63,191,110,.22), rgba(63,191,110,.08)); box-shadow:inset 0 0 0 1px rgba(63,191,110,.5)}
.d4-streak.done .d4-dots i.on{background:var(--k-vert); box-shadow:0 0 8px rgba(63,191,110,.7)}
@keyframes d4-pop{0%{transform:scale(1)} 35%{transform:scale(1.08)} 100%{transform:scale(1)}}
@keyframes d4-shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.d4-streak.pop{animation:d4-pop .4s cubic-bezier(.3,1.5,.5,1)}
.d4-streak.shake{animation:d4-shake .45s ease}
@media (prefers-reduced-motion:reduce){ .d4-streak.pop,.d4-streak.shake{animation:none} .d4-cele{transition:opacity .2s} }

/* ==================== Le métronome qui bat ==================== */
[data-tone="studio"] .d5-dial{position:relative; width:min(78vw,290px); aspect-ratio:1; margin:10px auto 6px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #2A1A0E 0%, var(--k-noir-2) 72%); box-shadow:inset 0 2px 0 rgba(255,255,255,.05), inset 0 -10px 30px rgba(0,0,0,.6), 0 22px 46px -24px rgba(0,0,0,.85)}
.d5-svg{position:absolute; inset:0; width:100%; height:100%}
.d5-track{fill:none; stroke:#241B15; stroke-width:14}
.d5-seg{fill:none; stroke:var(--k-brun); stroke-width:14; stroke-linecap:round; transition:stroke .12s ease, filter .25s ease}
.d5-seg.one{stroke:#4A3220}
.d5-seg.on{stroke:var(--k-ambre); filter:drop-shadow(0 0 8px rgba(230,180,91,.85))}
.d5-seg.one.on{stroke:var(--k-orange); filter:drop-shadow(0 0 12px rgba(240,138,60,.95))}
.d5-wave{position:absolute; inset:18%; border-radius:50%; border:2px solid rgba(230,180,91,.0); pointer-events:none}
.d5-wave.go{animation:d5-wave .55s cubic-bezier(.2,.8,.3,1) forwards}
.d5-wave.go.one{border-width:3px; animation-duration:.7s}
@keyframes d5-wave{0%{transform:scale(.72); border-color:rgba(230,180,91,.85); opacity:1} 100%{transform:scale(1.18); border-color:rgba(230,180,91,0); opacity:0}}
.d5-wave.go.one{animation-name:d5-wave1}
@keyframes d5-wave1{0%{transform:scale(.7); border-color:rgba(240,138,60,.95); opacity:1; box-shadow:0 0 24px rgba(240,138,60,.5)} 100%{transform:scale(1.24); border-color:rgba(240,138,60,0); opacity:0}}
.d5-dial.silent .d5-wave.go{border-style:dashed}
.d5-mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; pointer-events:none}
[data-tone="studio"] .d5-mid .m-bpm{display:flex; flex-direction:column; align-items:center; background:none !important; box-shadow:none !important; padding:0 !important}
[data-tone="studio"] .d5-mid .m-bpm b{font:600 76px/1 var(--f-title, Georgia, serif) !important; letter-spacing:-.03em; color:var(--k-creme) !important; font-variant-numeric:tabular-nums}
[data-tone="studio"] .d5-mid .m-bpm span{color:var(--k-taupe) !important; font:600 11px var(--f-body, system-ui) !important; letter-spacing:.18em}
.d5-tn{font-size:12.5px; color:var(--k-sable); margin-top:4px; text-align:center; max-width:70%}
.d5-dial.run .d5-mid .m-bpm b{text-shadow:0 0 22px rgba(240,138,60,.35)}
[data-tone="studio"] .m-top.d5-top{display:grid; grid-template-columns:repeat(4,1fr) !important; gap:8px; max-width:360px; margin:6px auto 0}
[data-tone="studio"] .m-top.d5-top button{height:48px; border-radius:999px; font-weight:700}
@media (prefers-reduced-motion:reduce){ .d5-wave{display:none} .d5-seg{transition:none} }
[data-tone="studio"] #metro .m-top.d5-top{width:100%; max-width:360px; justify-content:stretch}
[data-tone="studio"] #metro .m-top.d5-top button{width:100% !important; min-width:0; height:48px !important; border-radius:999px !important; font-size:16px}

/* ==================== Le studio en matériel ==================== */
/* les boutons rotatifs : une rangée par piste */
.bx-strip{display:flex; flex-wrap:wrap; gap:4px 0; align-items:flex-start}
.bx-strip > h3, .bx-strip > .bx-vu, .bx-strip > .bx-tog, .bx-strip > .bx-tg2, .bx-strip > .bx-swr{flex-basis:100%}
.bx-kn{position:relative; flex:1 0 20%; min-width:64px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; --tc2:var(--tc, var(--k-orange))}
.bx-kn-c{position:relative; width:52px; height:52px; border-radius:50%; touch-action:none; cursor:ns-resize;
  background:conic-gradient(from -135deg, var(--tc2) 0 calc(var(--p) * 270deg), #2E241C calc(var(--p) * 270deg) 270deg, transparent 270deg);
  -webkit-mask:radial-gradient(circle, transparent 0 21px, #000 22px); mask:radial-gradient(circle, transparent 0 21px, #000 22px)}
.bx-kn-c::after{content:''; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--k-brun-2) 0%, var(--k-charbon-4) 60%, var(--k-noir-2) 100%); box-shadow:0 4px 10px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.12)}
.bx-kn-c{-webkit-mask:none; mask:none}
.bx-kn-c::before{content:''; position:absolute; inset:0; border-radius:50%; background:inherit; -webkit-mask:radial-gradient(circle, transparent 0 20px, #000 21px); mask:radial-gradient(circle, transparent 0 20px, #000 21px)}
.bx-kn-c{background:none}
.bx-kn-c::before{background:conic-gradient(from -135deg, var(--tc2) 0 calc(var(--p) * 270deg), #2E241C calc(var(--p) * 270deg) 270deg, transparent 270deg)}
.bx-kn-c > i{position:absolute; left:50%; top:50%; width:3px; height:17px; margin:-17px 0 0 -1.5px; border-radius:2px; background:var(--k-creme); z-index:1; transform-origin:50% 100%; transform:rotate(calc(-135deg + var(--p) * 270deg)); box-shadow:0 0 6px rgba(246,238,230,.6)}
.bx-kn.turn .bx-kn-c::after{box-shadow:0 0 0 2px var(--tc2), 0 0 18px var(--tc2)}
.bx-kn-in{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.bx-kn-in:focus-visible + .bx-kn-l{outline:2px solid var(--k-orange); outline-offset:2px; border-radius:4px}
.bx-kn-l{font-size:11px; font-weight:700; color:var(--k-sable); text-align:center; line-height:1.15}
.bx-kn output{font-size:10.5px; color:var(--k-taupe-2); font-variant-numeric:tabular-nums; text-align:center}
.bx-mstr .bx-kn{flex-basis:40%}
.bx-mstr .bx-kn-c{width:72px; height:72px}
.bx-mstr .bx-kn-c::before{-webkit-mask:radial-gradient(circle, transparent 0 28px, #000 29px); mask:radial-gradient(circle, transparent 0 28px, #000 29px)}
.bx-mstr .bx-kn-c::after{inset:9px}
.bx-mstr .bx-kn-c > i{height:24px; margin-top:-24px}
/* le vu-mètre à aiguille */
.bx-vu{position:relative; max-width:260px; margin:0 auto 8px; padding:10px 12px 8px; border-radius:14px; background:linear-gradient(180deg,#F3E6C8,#E2CFA4); box-shadow:inset 0 2px 8px rgba(0,0,0,.35), 0 0 0 3px #2A1E15}
.bx-vu svg{display:block; width:100%; height:auto}
.bx-vu-a{fill:none; stroke:var(--k-brun-3); stroke-width:2} .bx-vu-r{fill:none; stroke:#C0392B; stroke-width:5}
.bx-vu line{stroke:var(--k-brun-3); stroke-width:2}
.bx-vu-n{transform-origin:100px 96px; transform:rotate(-50deg); transition:transform .06s linear}
.bx-vu-n line{stroke:var(--k-charbon-2); stroke-width:2.2}
.bx-vu circle{fill:var(--k-charbon-2)}
.bx-vu > span{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font:700 11px var(--f-body, system-ui); letter-spacing:.2em; color:var(--k-brun-3)}
.bx-vu .bx-lvm{display:none}
/* les diodes des pistes */
.bx .bx-lv{height:6px; background:#1A130E; border-radius:2px}
.bx .bx-lv > i{background:linear-gradient(90deg,var(--k-vert) 0%,var(--k-vert) 60%,var(--k-ambre) 60%,var(--k-ambre) 82%,var(--k-rouge) 82%); -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px); mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px); transition:transform .05s linear}
/* les pads : du caoutchouc rétroéclairé */
.bx-c:not(.bx-e){box-shadow:inset 0 -3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08)}
.bx-c.on{box-shadow:0 0 0 1px var(--tc), 0 0 26px -4px var(--tc), inset 0 0 18px rgba(255,255,255,.18)}
.bx-c:active:not(.bx-e){transform:scale(.95); box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
/* le séquenceur : des touches à diode, la colonne jouée éclairée */
.bx-st{box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.bx-st.f{box-shadow:0 0 14px -2px rgba(240,138,60,.85), inset 0 1px 0 rgba(255,255,255,.35)}
.bx-st.now{outline:none !important; filter:brightness(1.6); box-shadow:inset 0 0 0 2px var(--k-creme)}
.bx-st.f.now{filter:brightness(1.25); box-shadow:0 0 18px rgba(255,214,170,.95), inset 0 0 0 2px #fff}

/* ==================== Explorer en cartes illustrées ==================== */
[data-tone="studio"] .sp-list.d6-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; border:0 !important}
@media (min-width:700px){ [data-tone="studio"] .sp-list.d6-grid{grid-template-columns:repeat(3,1fr)} }
[data-tone="studio"] .d6-card.sp-row{--ih:28; display:flex !important; flex-direction:column; align-items:stretch; gap:0; padding:0 !important; min-height:0; border:0 !important; border-radius:18px; overflow:hidden; text-align:left;
  background:var(--c-surface-1) !important; box-shadow:inset 0 0 0 1px var(--c-line), 0 10px 24px -18px rgba(0,0,0,.6)}
[data-tone="studio"] .d6-card .ex-ic, [data-tone="studio"] .d6-card .sp-chev{display:none !important}
.d6-art{display:block; height:92px; background:radial-gradient(120% 110% at 30% 0%, hsl(var(--ih) 60% 30%) 0%, hsl(var(--ih) 45% 12%) 75%); position:relative}
.d6-art svg{position:absolute; inset:6px 8px; width:calc(100% - 16px); height:calc(100% - 12px)}
.d6-art .a-th{fill:none; stroke:hsl(var(--ih) 40% 70% / .28); stroke-width:1.3}
.d6-art .a-th2{fill:none; stroke:hsl(var(--ih) 30% 80% / .45); stroke-width:2}
.d6-art .a-ln{fill:none; stroke:hsl(var(--ih) 60% 85% / .9); stroke-width:2; stroke-linecap:round}
.d6-art .a-dash{stroke-dasharray:4 4; stroke-opacity:.6}
.d6-art .a-nut{stroke:#F1E6D2; stroke-width:5}
.d6-art .a-dot{fill:hsl(var(--ih) 85% 62%); filter:drop-shadow(0 0 5px hsl(var(--ih) 85% 60% / .8))}
.d6-art .a-dot2{fill:var(--k-creme); opacity:.9}
.d6-art .a-fill{fill:hsl(var(--ih) 80% 58%)}
.d6-art .a-box{fill:hsl(var(--ih) 40% 60% / .18); stroke:hsl(var(--ih) 50% 75% / .45)}
.d6-art .a-box2{fill:hsl(var(--ih) 40% 60% / .10); stroke:hsl(var(--ih) 50% 75% / .3); stroke-dasharray:4 3}
.d6-art .a-q{fill:none; stroke:var(--k-creme); stroke-dasharray:3 3}
.d6-art .a-tx{fill:var(--k-charbon-2); font:800 9px var(--f-body, system-ui); text-anchor:middle}
.d6-art .a-tx2{fill:var(--k-creme); font:800 11px var(--f-body, system-ui); text-anchor:middle}
.d6-art .a-tx3{fill:var(--k-creme); font:700 11px var(--f-title, Georgia, serif); text-anchor:middle}
.d6-art .a-tx4{fill:var(--k-charbon-2); font:700 11px var(--f-title, Georgia, serif); text-anchor:middle}
.d6-art .a-beam{stroke:hsl(var(--ih) 60% 85%); stroke-width:4; fill:none}
.d6-art .a-arrow{fill:none; stroke:var(--k-creme); stroke-width:2.2; stroke-linecap:round; marker-end:none}
.d6-art .a-wave{fill:none; stroke:hsl(var(--ih) 80% 65%); stroke-width:2; stroke-linejoin:round}
.d6-art .a-vinyl{fill:#0E0A08; stroke:hsl(var(--ih) 50% 60% / .5)}
.d6-art .a-arm{stroke:#D9D2C8; stroke-width:3; stroke-linecap:round}
[data-tone="studio"] .d6-card .sp-tx{display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px}
[data-tone="studio"] .d6-card .sp-tx b{font:600 15.5px/1.2 var(--f-title, Georgia, serif); color:var(--c-text)}
[data-tone="studio"] .d6-card .sp-tx span{font-size:12.5px; line-height:1.35; color:var(--c-text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
[data-tone="studio"] .d6-card:active{transform:scale(.97)}
[data-tone="studio"] .d6-card:active .d6-art svg{transform:scale(1.04); transition:transform .2s}

/* ==================== Studio : les effets ==================== */
.bx .bx-views{grid-template-columns:repeat(5,1fr)}
.bx .bx-views button{padding:0 2px; font-size:13px}
.bx-macros{flex-basis:100%; display:flex; gap:6px; margin:4px 0; padding:8px 4px 4px; border-radius:14px; background:rgba(240,138,60,.07); box-shadow:inset 0 0 0 1px rgba(240,138,60,.2)}
.bx-macros .bx-kn{--tc2:var(--k-orange)}
.bx-det{flex-basis:100%; margin-top:8px; border-radius:14px; background:var(--k-noir-2); box-shadow:inset 0 0 0 1px var(--k-brun-ligne)}
.bx-det > summary{list-style:none; min-height:44px; display:flex; align-items:center; padding:0 14px; font-weight:700; font-size:14px; color:var(--k-creme-2); cursor:pointer}
.bx-det > summary::-webkit-details-marker{display:none}
.bx-det > summary::after{content:''; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s}
.bx-det[open] > summary::after{transform:rotate(-135deg)}
.bx-det > :not(summary){margin:0 10px 10px}
.bx-dev{border-radius:12px; padding:8px; background:linear-gradient(180deg,var(--k-charbon-4),var(--k-charbon)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--k-brun); margin-bottom:8px}
.bx-dev.off{opacity:.5}
.bx-dev-h{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.bx-dev-h b{flex:1; font:600 15px var(--f-title, Georgia, serif)}
.bx-pow{width:30px; height:30px; min-height:30px; border-radius:50%; border:0; background:var(--k-graphite); box-shadow:inset 0 0 0 2px var(--k-brun-2); position:relative}
.bx-pow::after{content:''; position:absolute; inset:9px; border-radius:50%; background:#5A4A3E}
.bx-pow[aria-pressed="true"]::after{background:var(--k-orange); box-shadow:0 0 10px var(--k-orange)}
.bx .bx-mini-b{min-width:var(--tap); width:var(--tap); height:var(--tap); min-height:var(--tap); font-size:14px}
.bx-devm{margin:2px 0 4px}
.bx .bx-devm button{min-height:32px; padding:0 10px; font-size:12.5px}
.bx-devk{display:flex; flex-wrap:wrap}
.bx-addfx{display:flex; flex-wrap:wrap; gap:6px}
.bx .bx-addfx .chip{min-height:36px; padding:0 12px; border-radius:999px; border:1px dashed var(--k-brun-2); background:transparent; color:var(--k-sable); font-size:12.5px; font-weight:600}
.bx-swr{flex-wrap:wrap}
/* la vue Live */
.bx-v-live{display:flex; flex-direction:column; gap:10px}
.bx-lsc{display:flex; flex-wrap:wrap; gap:6px}
.bx-lsb{min-height:48px; padding:0 16px; border-radius:12px; border:0; background:linear-gradient(180deg,var(--k-brun-3),var(--k-charbon-4)); color:var(--k-creme); font-weight:700; box-shadow:inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 1px var(--k-brun-2)}
.bx-lsb:active{transform:scale(.95)}
.bx-lxy{height:240px; background:radial-gradient(circle at var(--x) calc((1 - var(--y)) * 100%), rgba(240,138,60,.35), transparent 40%), linear-gradient(90deg, rgba(92,200,184,.12), transparent 40%, transparent 60%, rgba(169,139,232,.14)), #0E0A08 !important}
.bx-lxy.on .bx-dot{box-shadow:0 0 0 10px rgba(240,138,60,.22), 0 0 40px rgba(240,138,60,.95)}
.bx-hold{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.bx-hb{min-height:72px; border-radius:16px; border:0; background:linear-gradient(180deg,var(--k-graphite),var(--k-charbon)); color:var(--k-creme); font-weight:700; font-size:15px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.45), 0 0 0 1px var(--k-brun); touch-action:none; -webkit-user-select:none; user-select:none}
.bx-hb.on{background:linear-gradient(180deg,var(--k-orange),#B95E20); color:var(--k-sur-orange); box-shadow:0 0 26px rgba(240,138,60,.7)}
.bx-cutb.on{background:linear-gradient(180deg,var(--k-rouge),#9A2A24); color:#fff; box-shadow:0 0 26px rgba(229,82,74,.7)}

/* ==================== Le studio simple ==================== */
.bx.ss-on .bx-bar{display:none}
.ss-body{padding-top:4px}
.ss-h{margin:4px 0 4px; font:600 26px/1.15 var(--f-title, Georgia, serif)}
.ss-p{margin:0 0 14px; color:var(--k-sable); font-size:15px; line-height:1.45}
.ss-amb{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (min-width:700px){ .ss-amb{grid-template-columns:repeat(3,1fr)} }
.ss-card{position:relative; height:150px; border:0; border-radius:20px; overflow:hidden; padding:0; text-align:left; background:var(--k-charbon); box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.ss-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ss-card:active img{transform:scale(1.06)}
.ss-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,10,8,0) 30%, rgba(13,10,8,.88) 100%)}
.ss-card b{position:absolute; left:14px; right:10px; bottom:30px; font:600 19px/1.1 var(--f-title, Georgia, serif); color:var(--k-creme)}
.ss-card small{position:absolute; left:14px; bottom:12px; font-size:12px; color:var(--k-ambre); font-weight:700}
.ss-card.on{box-shadow:0 0 0 3px var(--k-orange), 0 14px 30px -18px rgba(0,0,0,.9)}
.ss-back{margin-top:12px}
/* le guide */
.ss-guide{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:12px 14px; border-radius:16px; background:linear-gradient(135deg, rgba(240,138,60,.18), rgba(230,180,91,.08)); box-shadow:inset 0 0 0 1px rgba(240,138,60,.35); font-size:15px; line-height:1.4}
.ss-guide b{color:var(--k-orange-clair)}
.ss-dots{display:flex; gap:5px; margin-right:4px}
.ss-dots i{width:9px; height:9px; border-radius:50%; background:var(--k-brun)}
.ss-dots i.ok{background:var(--k-vert)} .ss-dots i.cur{background:var(--k-orange); box-shadow:0 0 8px var(--k-orange)}
/* la table de jeu */
.ss-table{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.ss-col{display:flex; flex-direction:column; gap:8px; padding:8px 6px; border-radius:18px; background:var(--k-noir-2); box-shadow:inset 0 0 0 1px var(--k-brun-ligne); transition:box-shadow .3s}
.ss-col.hint{box-shadow:inset 0 0 0 2px var(--tc), 0 0 22px -6px var(--tc); animation:ss-hint 1.6s ease-in-out infinite}
@keyframes ss-hint{50%{box-shadow:inset 0 0 0 2px var(--tc), 0 0 30px -2px var(--tc)}}
.ss-ch{display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0 2px; color:var(--tc)}
.ss-ic{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--tc) 22%, transparent)}
.ss-ic svg{width:22px; height:22px}
.ss-ch b{font-size:12.5px; color:var(--k-creme); text-align:center; line-height:1.1}
.ss-pad.bx-c{min-height:64px; border-radius:14px; justify-content:center; align-items:center; text-align:center; padding:8px 4px 12px}
.ss-pad.bx-c b{font-size:13px; white-space:normal; line-height:1.15}
.ss-none{margin:6px 2px; font-size:11.5px; color:var(--k-taupe-2); text-align:center}
.ss-rec{min-height:72px; border-radius:14px; border:1px dashed #6A4A8E; background:rgba(169,139,232,.08); color:var(--k-creme-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; text-align:center}
.ss-rec b{font-size:12.5px; line-height:1.15} .ss-rec small{font-size:10.5px; color:var(--k-taupe)}
.ss-rec.on{border-style:solid; border-color:var(--k-rouge); background:rgba(229,82,74,.15)}
.ss-dotrec{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--k-rouge); box-shadow:0 0 8px rgba(229,82,74,.8)}
@media (max-width:360px){ .ss-table{grid-template-columns:repeat(2,1fr)} }
/* parties, effets, actions */
.ss-sec{margin-top:16px}
.ss-h2{margin:0 0 8px; font:600 18px var(--f-title, Georgia, serif)}
.ss-parts{display:flex; gap:8px; flex-wrap:wrap}
.ss-part{flex:1 1 0; min-width:76px; min-height:56px; border-radius:16px; border:0; background:linear-gradient(180deg,var(--k-brun-3),var(--k-charbon-4)); color:var(--k-creme); font-weight:700; font-size:15px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 1px var(--k-brun-2)}
.ss-part:active{transform:scale(.95)}
.ss-fx{height:170px !important}
.ss-small{margin:6px 2px 0; font-size:12.5px; color:var(--k-taupe)}
.ss-actions{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.ss-big{display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; border-radius:999px; border:0; background:#2A1512; color:#FFC9BF; font-weight:700; font-size:16px; box-shadow:inset 0 0 0 1px #7A3A30}
.ss-big.on{background:var(--k-rouge); color:#fff; box-shadow:0 0 26px rgba(229,82,74,.6)}
.ss-big.on .ss-dotrec{background:#fff; border-radius:3px}
.ss-coach{margin:0; padding:10px 12px; border-radius:14px; background:var(--k-charbon); box-shadow:inset 0 0 0 1px var(--k-brun-ligne); font-size:13.5px; line-height:1.45; color:var(--k-creme-2)}
.ss-coach b{color:var(--k-orange-clair); font-family:var(--f-title, Georgia, serif); font-weight:600}
.ss-more{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
/* les boutons du studio (Studio avancé, Changer d'ambiance, Morceau de départ, Studio simple) : comme les autres boutons du Carnet */
.bx .btn.ss-mb{min-height:44px; padding:0 16px; border-radius:999px; border:0; background:var(--k-charbon-3); box-shadow:inset 0 0 0 1px var(--k-brun); color:var(--k-creme); font-weight:650; font-size:14px; display:inline-flex; align-items:center; gap:8px}
.bx .btn.ss-mb .ico{width:18px; height:18px; color:var(--k-orange)}
.bx .bx-bar .ss-tosimple{margin:0 0 8px}
.bx .ss-tosimple{margin-right:6px; padding:0 6px}
/* le crayon de chaque boucle, la nouvelle boucle */
.ss-padw{position:relative}
.ss-padw .ss-pad.bx-c{width:100%}
.ss-edit{position:absolute; top:-6px; right:-6px; width:30px; height:30px; min-height:30px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--k-graphite); color:var(--k-creme); box-shadow:0 0 0 2px var(--k-noir-2), 0 4px 10px rgba(0,0,0,.5); z-index:2}
.ss-edit svg{width:15px; height:15px}
.ss-edit::before{content:''; position:absolute; inset:-7px}
.ss-edit:active{transform:scale(.9); background:var(--k-orange); color:var(--k-sur-orange)}
.ss-new{min-height:44px; border-radius:14px; border:1px dashed color-mix(in srgb, var(--tc) 55%, var(--k-brun)); background:transparent; color:var(--tc); font-size:12px; font-weight:700; padding:4px}
.bx .ss-new{font-size:12px; line-height:1.2; font-weight:700}

/* ==================== Le studio en frise ==================== */
.fz-wrap{position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -10px; padding:0 10px 6px 0; scrollbar-width:thin}
.fz-grid{position:relative; display:grid; grid-template-columns:100px max-content; row-gap:6px; width:max-content}
.fz-corner{position:sticky; left:0; z-index:3; background:var(--k-noir); font-size:10.5px; color:var(--k-taupe-2); display:flex; align-items:flex-end; padding:0 0 4px 12px}
.fz-ruler{display:flex; height:30px; border-bottom:1px solid var(--k-brun-ligne)}
.fz-bar{flex:none; width:var(--bw); height:30px; border:0; border-left:1px solid #241B15; background:transparent; color:var(--k-taupe); font-size:11px; font-weight:700; text-align:left; padding:0 0 0 3px}
.fz-bar.b4{border-left-color:var(--k-brun-2); color:var(--k-creme)}
.fz-bar:active{background:rgba(240,138,60,.2)}
.fz-ins{position:sticky; left:0; z-index:3; display:flex; align-items:center; gap:6px; background:var(--k-noir); box-shadow:6px 0 10px -6px rgba(0,0,0,.9); color:var(--tc)}
.fz-ins .ss-ic{width:26px; height:26px; border-radius:8px; flex:none}
.fz-ins .ss-ic svg{width:17px; height:17px}
.fz-in{display:flex; flex-direction:column; gap:3px; min-width:0}
.fz-in b{font-size:11px; line-height:1.15; color:var(--k-creme); white-space:normal; word-break:break-word; max-width:58px}
.fz-in .bx-ms{gap:4px} .fz-in .bx-m, .fz-in .bx-s{position:relative; min-height:28px; width:26px; flex:none; font-size:11px !important; border-radius:7px; padding:0}
/* la zone de toucher dépasse en haut et en bas (44 px de haut), pas sur le côté : M et S ne se chevauchent pas */
.fz-in .bx-m::before, .fz-in .bx-s::before{content:""; position:absolute; left:-2px; right:-2px; top:-8px; bottom:-8px}
.fz-lane{position:relative; height:56px; border-radius:8px; background:repeating-linear-gradient(90deg, var(--k-charbon) 0 calc(var(--bw) - 1px), var(--k-charbon-4) calc(var(--bw) - 1px) var(--bw)); cursor:pointer}
.fz-blk{position:absolute; top:4px; bottom:4px; border:0; border-radius:8px; padding:4px 6px; text-align:left; overflow:hidden; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 85%, #fff 0%), color-mix(in srgb, var(--tc) 60%, var(--k-charbon))); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25)}
.fz-blk b{position:relative; z-index:1; font-size:11.5px; font-weight:700; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.fz-reps{position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(var(--rw) - 2px), rgba(0,0,0,.35) calc(var(--rw) - 2px) var(--rw))}
.fz-blk.sel{box-shadow:0 0 0 2px var(--k-creme), 0 0 18px var(--tc); z-index:2; touch-action:none; cursor:grab}
.fz-ghost{position:absolute; top:4px; bottom:4px; width:calc(var(--bw) * 2 - 3px); border-radius:8px; border:2px dashed var(--k-orange); pointer-events:none}
.fz-head{position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--k-creme); box-shadow:0 0 8px rgba(246,238,230,.8); z-index:4; pointer-events:none; transform:translateX(100px)}
.fz-under{display:flex; align-items:center; gap:10px; margin:8px 0}
.fz-more{min-height:40px; padding:0 14px; border-radius:999px; border:1px dashed var(--k-brun-2); background:transparent; color:var(--k-sable); font-weight:700; font-size:13px}
.fz-len{font-size:12.5px; color:var(--k-taupe-2)}
.fz-panel{margin:6px 0 4px; padding:12px; border-radius:16px; background:var(--k-charbon); box-shadow:inset 0 0 0 1px var(--k-brun)}
.fz-pt{margin:0 0 10px; font-size:14px; color:var(--k-creme-2)} .fz-pt b{font-family:var(--f-title, Georgia, serif); font-size:16px; color:var(--k-creme)}
.fz-acts, .fz-opts{display:flex; flex-wrap:wrap; gap:8px}
.fz-a{min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--k-brun); background:var(--k-charbon-4); color:var(--k-creme); font-weight:700; font-size:13.5px}
.fz-del{color:#FFB3AC; border-color:#5A2A22}
.fz-x{width:44px; padding:0; margin-left:auto}
.fz-hint{margin:8px 0 0; font-size:12.5px; color:var(--k-taupe-2)}
.fz-opt{min-height:56px; min-width:96px; padding:6px 12px; border-radius:14px; border:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 75%, var(--k-charbon)), color-mix(in srgb, var(--tc) 45%, var(--k-charbon)))}
.fz-opt b{font-size:13px} .fz-opt small{font-size:11px; opacity:.85}
.fz-newopt, .fz-recopt{background:transparent; border:1px dashed #6A5A4E; color:var(--k-creme-2)}
.fz-recopt{border-color:#7A3A30}
.fz-blk{-webkit-touch-callout:none; transition:transform var(--d-2) var(--ease), box-shadow var(--d-2)}
/* appui long : le bloc s'enfonce un peu, puis se soulève quand on peut le déplacer */
.fz-blk.press{transform:scale(.96); transition:transform .32s var(--ease)}
.fz-blk.lift{transform:scale(1.05) translateY(-2px); z-index:6; box-shadow:0 0 0 2px var(--k-creme), 0 14px 26px -8px rgba(0,0,0,.85), 0 0 22px var(--tc); transition:transform var(--d-2) var(--ease-pop), box-shadow var(--d-2)}
.fz-dragging .fz-blk.lift{transition:transform var(--d-2) var(--ease-pop), box-shadow var(--d-2); will-change:left,width}
.fz-blk.settle{transition:left .16s var(--ease), width .16s var(--ease), transform .16s var(--ease), box-shadow .16s}
/* où le bloc se posera */
.fz-snap{position:absolute; top:4px; bottom:4px; border-radius:8px; border:2px dashed rgba(246,238,230,.7); background:rgba(246,238,230,.06); pointer-events:none; z-index:1; transition:left .08s, width .08s}
.fz-snap.bad{border-color:#E5524A; background:rgba(229,82,74,.1)}
.fz-dragging, .fz-dragging *{cursor:grabbing !important}
/* les poignées du bloc choisi : on les tire pour rallonger ou raccourcir */
.fz-h{position:absolute; top:0; bottom:0; width:24px; z-index:3; touch-action:none; cursor:ew-resize}
.fz-hl{left:0} .fz-hr{right:0}
.fz-h::after{content:""; position:absolute; top:50%; width:5px; height:22px; margin-top:-11px; border-radius:3px; background:var(--k-creme); box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.fz-hl::after{left:4px} .fz-hr::after{right:4px}
/* le nom d'instrument glisse vers la gauche et découvre « Supprimer » */
.fz-ins{touch-action:pan-y; -webkit-touch-callout:none; overflow:hidden; padding:0}
.fz-insc{position:relative; z-index:1; display:flex; align-items:center; gap:6px; width:100%; height:100%; padding:4px 3px 4px 8px; gap:5px; background:var(--k-noir)}
.fz-insdel{position:absolute; top:4px; bottom:4px; right:4px; width:64px; border:0; border-radius:10px; background:#C8433A; color:#fff; display:grid; place-items:center}
.fz-insdel .ico{width:22px; height:22px}
.fz-ins.far .fz-insdel{background:#E5524A}
/* la feuille d'actions d'une piste (appui long sur son nom) */
.fz-sheet-back{position:fixed; inset:0; z-index:400; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.5); animation:fz-fade var(--d-2) ease-out both}
.fz-sheet-back[hidden]{display:none}
.fz-sheet{width:min(520px,100%); margin:0 8px calc(8px + env(safe-area-inset-bottom,0px)); padding:8px 12px 12px; border-radius:22px; background:var(--k-charbon); color:var(--k-creme); box-shadow:0 -10px 40px -10px rgba(0,0,0,.8); animation:fz-up var(--d-3) var(--ease) both}
.fz-sheet .pm-grab{display:block; width:36px; height:5px; margin:2px auto 10px; border-radius:3px; background:var(--k-brun-2)}
.fz-sheet-t{margin:0 4px 10px; font-size:14px; color:var(--k-taupe)} .fz-sheet-t b{font:600 18px var(--f-title, Georgia, serif); color:var(--k-creme)}
.fz-sa{display:flex; align-items:center; gap:10px; width:100%; min-height:52px; margin-top:6px; padding:0 16px; border:0; border-radius:14px; background:var(--k-charbon-3); color:var(--k-creme); font:600 16px var(--f-body, system-ui, sans-serif); text-align:left}
.fz-sa .ico{width:20px; height:20px}
.fz-sa-del{color:#FFB3AC}
.fz-sa-x{justify-content:center; margin-top:10px; background:transparent; box-shadow:inset 0 0 0 1px var(--k-brun)}
.fz-sheet-back.out{animation:fz-fade var(--d-2) ease-in reverse both} .fz-sheet-back.out .fz-sheet{animation:fz-down var(--d-2) ease-in both}
/* le bandeau « Annuler » après une suppression */
.fz-undo{position:fixed; left:12px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:410; margin:0 auto; width:fit-content; max-width:calc(100vw - 24px); display:flex; align-items:center; gap:14px; padding:8px 8px 8px 16px; border-radius:16px; background:var(--k-creme); color:var(--k-noir); font-size:14.5px; font-weight:600; box-shadow:0 12px 30px -10px rgba(0,0,0,.7); animation:fz-up var(--d-3) var(--ease) both}
.fz-undo[hidden]{display:none} .fz-undo.out{animation:fz-down var(--d-2) ease-in both}
.fz-undo-b{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border:0; border-radius:12px; background:var(--k-noir); color:var(--k-creme); font-weight:700}
@keyframes fz-fade{from{opacity:0}}
@keyframes fz-up{from{transform:translate3d(0,100%,0); opacity:.4}}
@keyframes fz-down{to{transform:translate3d(0,110%,0); opacity:0}}

/* ==================== Les pochettes dessinées ==================== */
.pm-pochette.pa-on::before, .pm-pochette.pa-on::after{display:none !important}
.pm-pochette.pa-on{background:var(--k-noir-2) !important}
.pm-pochette.pa-on .pa-svg{position:absolute; inset:0; width:100%; height:100%; z-index:0; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pm-pochette.pa-on .pm-glyph{position:absolute; left:10px; right:10px; bottom:8px; z-index:1; font:600 19px/1.05 var(--f-title, Georgia, serif) !important; color:var(--k-creme) !important; text-shadow:0 2px 8px rgba(0,0,0,.6); letter-spacing:-.01em}
.pm-card:active .pm-pochette.pa-on .pa-svg{transform:scale(1.06)}
[data-tone="studio"] .pm-card .pm-pochette.pa-on{box-shadow:0 14px 28px -16px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06)}
/* le son dessiné dans les blocs */
.fz-wave{position:absolute; left:2px; right:2px; top:14px; bottom:3px; width:calc(100% - 4px); height:calc(100% - 17px); fill:var(--k-blanc); stroke:var(--k-blanc); opacity:.6; pointer-events:none}
.fz-blk b{position:relative; z-index:1}

/* ==================== Fluidité ====================
   Les longues listes ne dessinent que ce qui est à l'écran ; les barres floutées coûtent moins cher au défilement. */
[data-tone="studio"] .sp-list > .sp-row, [data-tone="studio"] .bt-list > *, [data-tone="studio"] .gd-list > *, [data-tone="studio"] .mo-list > *{content-visibility:auto; contain-intrinsic-size:auto 68px}
[data-tone="studio"] #sh-tabs, [data-tone="studio"] .pm-mini:not([hidden]){-webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px)}
[data-tone="studio"] #sh-panel{-webkit-overflow-scrolling:touch; overscroll-behavior-y:contain}
[data-tone="studio"] .pm-card, [data-tone="studio"] .d6-card, [data-tone="studio"] .bx-c{contain:layout paint}
.fz-blk b{display:inline-block; padding:0 5px; border-radius:5px; background:rgba(13,10,8,.45)}

/* ==================== Studio : plus libre, plus clair ==================== */
/* la piste choisie dans la frise, et son panneau */
.fz-ins.on .fz-insc{background:color-mix(in srgb, var(--tc) 22%, var(--k-noir)); box-shadow:inset 3px 0 0 var(--tc)}
.fz-insc{cursor:pointer}
.fz-tpanel{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, var(--k-brun)), inset 0 3px 0 var(--tc)}
.fz-tph{display:flex; align-items:center; gap:8px} .fz-tph .fz-pt{flex:1; margin:0}
.fz-tpanel .fz-acts{margin-top:10px}
.fz-a-main{background:var(--k-orange); border-color:var(--k-orange); color:var(--k-sur-orange)}
.fz-a.on{background:color-mix(in srgb, #E5524A 25%, var(--k-charbon-4)); border-color:#E5524A}
.fz-a .ico{width:18px; height:18px}
.fz-strip{display:flex; flex-wrap:wrap; gap:4px 0; align-items:flex-start; margin-top:10px}
.fz-strip > .bx-det, .fz-strip > .bx-tog, .fz-strip > .bx-macros, .fz-strip > .link{flex-basis:100%}
.bx-song-fz .fz-wrap{margin:0 -14px; padding-right:14px}
/* les boîtes : l'appui long s'annonce */
.bx-c{-webkit-touch-callout:none}
.bx-c.press{transform:scale(.95); transition:transform .4s var(--ease)}
/* Effets live : la scène qui joue s'allume, celle qui attend clignote */
.bx-live-go{display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:12px 14px; border-radius:14px; background:rgba(240,138,60,.12); color:var(--k-orange-clair); font-size:14px}
.bx-lsb{display:inline-flex; align-items:center; gap:8px}
.bx-lsd{width:9px; height:9px; border-radius:50%; background:var(--k-brun-2); flex:none}
.bx-lsb.on{background:linear-gradient(180deg,var(--k-orange),#B95E20); color:var(--k-sur-orange); box-shadow:0 0 22px rgba(240,138,60,.55)}
.bx-lsb.on .bx-lsd{background:var(--k-sur-orange)}
.bx-lsb.q .bx-lsd{background:var(--k-orange); animation:bx-blink .5s steps(2) infinite}
@keyframes bx-blink{50%{opacity:.2}}
.bx-card2 > p{margin:0 0 10px; font-size:13.5px; line-height:1.45; color:var(--k-taupe)}