/* ==================== Studio cinématique × instrument numérique : les fondations (phase 2) ====================
   Une « teinte » posée sur l'habillage premium : <html data-skin="premium" data-tone="studio">.
   Elle ne change que l'apparence. Sans data-tone, on retrouve le premium bleu (gardé en réserve).
   Toutes les couleurs sont des variables, définies ici une seule fois pour le sombre et pour le clair.
   L'orange est la signature : actions importantes, sélection, progression. Jamais sur le manche, où le code des
   notes reste celui de la méthode (1 rouge et carrée, 3 verte, ♭3 violette, 5 encre, 7 ambre). */

/* ---------- thème clair : ivoire ---------- */
:root[data-look="carnet"][data-skin="premium"][data-tone="studio"]{
  --bg:#F1E9DD; --panel:#FAF7F2; --ink:#211D19; --muted:#6F665C; --line:#E2D8C9; --line-strong:#D2C6B4;
  /* l'orange #D96725 colore les boutons pleins (texte sombre dessus : contraste 4,7) ; pour le texte et les petits
     éléments orange sur l'ivoire, une teinte plus profonde (#A34A17 : contraste 4,9), lisible à toutes les tailles */
  --acc:#A34A17; --acc-fill:#D96725; --acc-ink:#211D19; --acc-soft:#F6DCC8; --amb:#8F5B22; --soft:#E7DDCE; --char:#211D19; --char-ink:#F5F0E9;
  --f-display:'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Music', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, 'Noto Music', monospace;
  --tr5:#211D19;
  --nk-bg:#FAF7F2; --nk-bg2:#F3EDE3; --nk-fret:#CDBFAB; --nk-str:#8C8479; --nk-inl:#E2D8C9; --nk-txt:#6F665C;
  --bar:rgba(241,233,221,.84);
  --glass:rgba(250,247,242,.7); --glass-strong:rgba(246,240,231,.92); --glass-pill:rgba(33,29,25,.07);
  --glass-hi:rgba(255,255,255,.9); --glass-lo:rgba(255,255,255,.3); --glass-edge:rgba(33,29,25,.09); --glass-sheet:#FAF7F2;
  --glass-shadow:0 12px 30px -12px rgba(60,40,20,.28), 0 2px 6px -2px rgba(60,40,20,.1);
  /* l'échelle du système */
  --r-s:10px; --r-m:14px; --r-l:20px; --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px;
}
/* ---------- thème sombre : graphite, charbon ---------- */
@media (prefers-color-scheme: dark){ :root[data-look="carnet"][data-skin="premium"][data-tone="studio"]:not([data-theme="light"]){
  --bg:#171411; --panel:#24201C; --ink:#F5F0E9; --muted:#A9A198; --line:#2E2924; --line-strong:#39332D;
  --acc:#EF762B; --acc-fill:#EF762B; --acc-ink:#140D07; --acc-soft:#3B2515; --amb:#C58B55; --soft:#2E2924; --char:#0D0C0B; --char-ink:#F5F0E9;
  --tr5:#F5F0E9;
  --nk-bg:#0D0C0B; --nk-bg2:#131110; --nk-fret:#39332D; --nk-str:#8C8479; --nk-inl:#24201C; --nk-txt:#A9A198;
  --bar:rgba(23,20,17,.84);
  --glass:rgba(36,32,28,.66); --glass-strong:rgba(23,20,17,.9); --glass-pill:rgba(245,240,233,.1);
  --glass-hi:rgba(255,255,255,.1); --glass-lo:rgba(255,255,255,.03); --glass-edge:rgba(255,255,255,.07); --glass-sheet:#24201C;
  --glass-shadow:0 16px 36px -12px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5);
} }
:root[data-look="carnet"][data-skin="premium"][data-tone="studio"][data-theme="dark"]{
  --bg:#171411; --panel:#24201C; --ink:#F5F0E9; --muted:#A9A198; --line:#2E2924; --line-strong:#39332D;
  --acc:#EF762B; --acc-fill:#EF762B; --acc-ink:#140D07; --acc-soft:#3B2515; --amb:#C58B55; --soft:#2E2924; --char:#0D0C0B; --char-ink:#F5F0E9;
  --tr5:#F5F0E9;
  --nk-bg:#0D0C0B; --nk-bg2:#131110; --nk-fret:#39332D; --nk-str:#8C8479; --nk-inl:#24201C; --nk-txt:#A9A198;
  --bar:rgba(23,20,17,.84);
  --glass:rgba(36,32,28,.66); --glass-strong:rgba(23,20,17,.9); --glass-pill:rgba(245,240,233,.1);
  --glass-hi:rgba(255,255,255,.1); --glass-lo:rgba(255,255,255,.03); --glass-edge:rgba(255,255,255,.07); --glass-sheet:#24201C;
  --glass-shadow:0 16px 36px -12px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5);
}

/* ---------- typographie : des titres qui ont du caractère, des données nettes ---------- */
[data-tone="studio"] :is(.pm-large,.pm-h,.pm-hero-t,.tl-title,.fo-t,.se-title,.sp-q,.sp-h,.tu-top h2,.pm-glyph,.cf-t,.page h2){font-family:var(--f-display) !important; font-stretch:88%; font-weight:700 !important; letter-spacing:-.015em}
[data-tone="studio"] .pm-large{font-size:36px; line-height:40px; letter-spacing:-.02em}
[data-tone="studio"] .pm-hero-t{font-weight:750 !important; font-stretch:84%; letter-spacing:-.02em}
[data-tone="studio"] :is(.fo-clock,.pm-week-n b,.pm-min,.im-met output,#im-bpm,.pm-val){font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* ---------- les boutons ---------- */
/* primaire : orange plein, sans reflet ; coins maîtrisés plutôt que capsule */
[data-tone="studio"] :is(.se-go,#sh-play,.sh-start,.fo-b.fo-next,.pm-hero-go){border-radius:var(--r-m); box-shadow:none; background:var(--acc); color:var(--acc-ink); -webkit-backdrop-filter:none; backdrop-filter:none}
[data-tone="studio"] .page button.play:not(#play):not([aria-pressed="true"]), [data-tone="studio"] .sp-hub button.play, [data-tone="studio"] .tu button.play:not([aria-pressed="true"]){border-radius:var(--r-m)}
/* secondaire : une surface et un filet */
[data-tone="studio"] .fo-b:not(.fo-next):not([data-fo-tt]){background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-strong)}
[data-tone="studio"] .im-tune{border-radius:var(--r-m)}
/* les boutons ronds du haut : une surface mate, l'icône en encre (l'orange n'est pas partout) */
[data-tone="studio"] :is(.sh-ic svg,.tl-ic,.tl-back,.pm-back:not([hidden])){background:var(--panel) !important; color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:inset 0 0 0 1px var(--line-strong) !important}
[data-tone="studio"] .tl-ic[aria-pressed="true"]{background:var(--acc) !important; color:var(--acc-ink)}
[data-tone="studio"] .tu-top .link{border-radius:var(--r-s)}

/* ---------- la navigation : le seul verre de l'appli, avec le mini-lecteur ---------- */
[data-tone="studio"] #sh-tabs .sp-tab[aria-pressed="true"]{color:var(--acc)}
[data-tone="studio"] #sh-tabs .sp-tab:not([aria-pressed="true"]){color:var(--muted)}
[data-tone="studio"] .tu{-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 -10px 40px -12px rgba(0,0,0,.4)}
[data-tone="studio"] :is(body.pm-top.pm-scrolled .sh-top,.fo-head){background:var(--bar)}

/* ---------- les surfaces ---------- */
[data-tone="studio"] :is(.sp-list,.pm-week,.fo-card,.cf-notes li){border-radius:var(--r-m)}
[data-tone="studio"] .fo-card{background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .fo-card > .fo-g{background:var(--bg)}
/* les pastilles d'icônes des listes : une seule teinte, plus d'arc-en-ciel */
[data-tone="studio"] .pm-ic{background:var(--soft) !important; color:var(--ink)}
/* les pochettes : la lumière d'un studio, du charbon à l'ambre et à l'orange */
[data-tone="studio"] .pm-pochette::before{filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(-14deg) brightness(.82) contrast(1.08)}
[data-tone="studio"] .pm-art{background:radial-gradient(70% 70% at 20% 15%, var(--acc) 0%, transparent 70%), radial-gradient(70% 70% at 85% 85%, #C58B55 0%, transparent 70%), #0D0C0B}
/* la grande carte de la séance : charbon, un halo orange, le bouton orange */
[data-tone="studio"] .pm-hero{border-radius:var(--r-l); box-shadow:0 20px 44px -26px rgba(0,0,0,.7)}
[data-tone="studio"] .pm-hero .pm-pochette::before{filter:none; background:radial-gradient(70% 80% at 96% -6%, rgba(239,118,43,.55) 0%, transparent 62%), radial-gradient(60% 60% at -10% 110%, rgba(197,139,85,.28) 0%, transparent 70%), #0D0C0B}
[data-tone="studio"] .pm-hero-go{background:#EF762B; color:#140D07}
[data-tone="studio"] .pm-hero-steps i:first-child{background:#EF762B}
/* la séance en plein écran : un fond calme */
[data-tone="studio"] body.fo{background:var(--bg)}
[data-tone="studio"] .pm-steps i.done{background:var(--muted)}
/* le retour visuel au toucher reste, sans reflet */
[data-tone="studio"] .pm-mini .pm-art{border-radius:50%}
/* l'orange n'est pas partout : les repères de lecture passent en gris ou en ambre */
[data-tone="studio"] .fo-card .im-t{color:var(--muted)}
[data-tone="studio"] .fo-card > .fo-g b{color:var(--amb)}
[data-tone="studio"] .im-tune{background:var(--bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong)}
/* grand écran : le grand titre s'aligne sur la colonne du contenu, la colonne de navigation est lisible */
@media (min-width:900px){
  [data-tone="studio"] body.se-today .sh-panel > .pm-large{max-width:760px; margin-left:auto; margin-right:auto}
  [data-tone="studio"] #sh-tabs .sp-tab span{font-size:15px}
}

/* ==================== Studio, phase 3 : l'accueil ==================== */
/* la salutation remplace le grand titre « Accueil » (qui reste dans la barre quand on fait défiler) */
[data-tone="studio"] body.se-today .sh-panel > .pm-large{display:none}
[data-tone="studio"] .st-hello{margin:2px 2px 16px}
[data-tone="studio"] .st-date{margin:0; font-size:13px; font-weight:600; color:var(--muted)}
[data-tone="studio"] .st-hi{margin:2px 0 6px; font:750 40px/1.02 var(--f-display); font-stretch:84%; letter-spacing:-.025em; color:var(--ink)}
[data-tone="studio"] .st-state{margin:0; font-size:16px; line-height:1.4; color:var(--muted); max-width:34ch}
/* les raccourcis : quatre touches, comme sur un appareil */
[data-tone="studio"] .st-quick{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-2); margin-top:var(--e-3)}
[data-tone="studio"] .st-q{display:flex; flex-direction:column; align-items:center; gap:6px; min-height:76px; padding:12px 4px 10px; border:0; border-radius:var(--r-m); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font:500 12.5px var(--f-body); letter-spacing:-.01em; cursor:pointer}
[data-tone="studio"] .st-q-ic{width:28px; height:28px; display:grid; place-items:center; color:var(--acc)}
[data-tone="studio"] .st-q-ic svg{width:24px; height:24px}
[data-tone="studio"] .st-h4{margin:18px 2px 8px; font:600 13px var(--f-body); color:var(--muted)}
[data-tone="studio"] .st-prog .pm-week{box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .st-home .pm-sec{margin-top:28px}
@media (min-width:900px){
  [data-tone="studio"] .st-home{max-width:1040px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:28px; align-items:start}
  [data-tone="studio"] .st-home > *{grid-column:1}
  [data-tone="studio"] .st-home > .st-hello{grid-column:1 / -1}
  [data-tone="studio"] .st-home > .st-prog{grid-column:2; grid-row:2 / span 4; margin-top:0}
  [data-tone="studio"] .st-home > .pm-hero{grid-row:2}
  [data-tone="studio"] .st-q{flex-direction:row; justify-content:center; min-height:52px; font-size:14px; gap:10px}
}
[data-tone="studio"] .st-home .pm-hero, [data-tone="studio"] .st-home .pm-hero-in{min-height:330px}

/* ==================== Studio, phase 4.1 : Explorer ==================== */
[data-tone="studio"] .st-explorer .sp-head{display:none}
[data-tone="studio"] .st-lede{margin:-4px 2px 14px; font-size:17px; color:var(--muted)}
[data-tone="studio"] .st-explorer #sp-q{background-color:var(--panel); box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-m); min-height:44px}
/* les filtres : une rangée qui défile, l'actif en orange */
[data-tone="studio"] .ex-cats{display:flex; gap:var(--e-2); overflow-x:auto; margin:var(--e-3) -14px 0; padding:2px 14px; scrollbar-width:none}
[data-tone="studio"] .ex-cats::-webkit-scrollbar{display:none}
[data-tone="studio"] .ex-cat{flex:none; min-height:36px; padding:0 14px; border:0; border-radius:18px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font:500 15px var(--f-body); letter-spacing:-.01em; cursor:pointer; transition:background .2s, color .2s}
[data-tone="studio"] .ex-cat[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}
/* l'aperçu d'un accord */
[data-tone="studio"] .ex-chips{display:flex; gap:6px; overflow-x:auto; margin:0 -14px 10px; padding:2px 14px; scrollbar-width:none}
[data-tone="studio"] .ex-chips::-webkit-scrollbar{display:none}
[data-tone="studio"] .ex-chip{flex:none; min-width:52px; min-height:36px; padding:0 12px; border:0; border-radius:var(--r-s); background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--muted); font:600 15px var(--f-mono); cursor:pointer}
[data-tone="studio"] .ex-chip[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}
[data-tone="studio"] .ex-card{padding:16px; border-radius:var(--r-l); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .ex-name{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
[data-tone="studio"] .ex-name b{font:750 40px/1 var(--f-display); font-stretch:86%; letter-spacing:-.025em}
[data-tone="studio"] .ex-name span{color:var(--muted); font-size:15px}
[data-tone="studio"] .ex-notes{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 6px}
[data-tone="studio"] .ex-note{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 5px; border-radius:17px; background:var(--bg); font-size:15px; font-weight:500}
[data-tone="studio"] .ex-r{min-width:24px; height:24px; padding:0 4px; border-radius:12px; display:grid; place-items:center; font:700 11.5px var(--f-mono); font-style:normal; letter-spacing:-.04em; box-shadow:inset 0 0 0 1.5px var(--line-strong); color:var(--ink)}
[data-tone="studio"] .ex-r-1{border-radius:6px; background:var(--tr1); color:#fff; box-shadow:none}
[data-tone="studio"] .ex-r-3{background:var(--tr3); color:#000; box-shadow:none}
[data-tone="studio"] .ex-r-3m{background:var(--tr3m); color:#fff; box-shadow:none}
[data-tone="studio"] .ex-r-5{background:var(--tr5); color:var(--bg); box-shadow:none}
[data-tone="studio"] .ex-r-7{background:var(--tr7); color:#000; box-shadow:none}
[data-tone="studio"] .ex-figs{display:flex; gap:10px; margin-top:6px}
[data-tone="studio"] .ex-fig{flex:1; min-width:0; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px 8px; border:0; border-radius:var(--r-m); background:transparent; color:var(--ink); cursor:pointer; transition:background .2s}
[data-tone="studio"] .ex-fig svg{width:100%; height:auto; max-height:150px}
[data-tone="studio"] .ex-fig small{font-size:12.5px; color:var(--muted)}
[data-tone="studio"] .ex-fig.on{background:var(--acc-soft)}
[data-tone="studio"] .ex-acts{display:flex; gap:var(--e-2); margin-top:12px}
[data-tone="studio"] .ex-hear{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:var(--r-m); background:var(--acc); color:var(--acc-ink); font:600 16px var(--f-body); cursor:pointer}
[data-tone="studio"] .ex-hear svg{width:14px; height:14px}
[data-tone="studio"] .ex-sheet{min-height:44px; padding:0 16px; border:0; border-radius:var(--r-m); background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); font:500 16px var(--f-body); cursor:pointer}
/* les listes par thème */
[data-tone="studio"] .ex-ic{flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--soft); color:var(--ink)}
[data-tone="studio"] .ex-ic svg{width:19px; height:19px}
[data-tone="studio"] .st-row{gap:12px}
[data-tone="studio"] .ex-sec .pm-h{font-size:20px}
@media (min-width:900px){
  [data-tone="studio"] .st-explorer{max-width:1080px; margin:0 auto}
  [data-tone="studio"] .ex-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; align-items:start}
  [data-tone="studio"] .ex-cols > .ex-lists:only-child{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; column-gap:28px}
  [data-tone="studio"] .ex-pv{position:sticky; top:12px}
  [data-tone="studio"] .ex-cats,[data-tone="studio"] .ex-chips{margin-left:0; margin-right:0; padding-left:0; padding-right:0; flex-wrap:wrap}
}

/* ==================== Studio, phase 4.2 : la fiche d'accord et le manche ==================== */
/* --- les sélections partout : une puce claire, l'actif en orange doux (l'orange plein reste pour l'action) --- */
[data-tone="studio"] .chip{background:var(--panel); border-color:var(--line-strong); color:var(--ink); border-radius:var(--r-s); min-height:40px}
[data-tone="studio"] .chip[aria-pressed="true"]{background:var(--acc-soft); color:var(--acc); border-color:var(--acc)}
[data-tone="studio"] .chip[aria-pressed="true"] b{color:inherit; opacity:1}
[data-tone="studio"] .seg{border-radius:var(--r-s)}
[data-tone="studio"] .seg button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}
/* --- les consignes d'exercice : plus de vert, une surface et un repère ambre --- */
[data-tone="studio"] .ex-task{background:var(--bg); box-shadow:inset 3px 0 0 var(--amb); border-radius:var(--r-s); color:var(--ink)}
[data-tone="studio"] .ex-task b{color:var(--amb)}
/* --- la fiche : un en-tête net, les notes en code couleur, Écouter en action principale --- */
[data-tone="studio"] .cf-sheet{background:var(--panel)}
[data-tone="studio"] .cf-top{background:var(--panel); color:var(--ink); padding:20px 18px 14px}
[data-tone="studio"] .cf-eye{color:var(--muted); font-size:13px}
[data-tone="studio"] .cf-t{font-size:48px !important; line-height:1 !important; font-weight:750 !important; font-stretch:84%; letter-spacing:-.03em; margin:2px 0 12px}
[data-tone="studio"] .cf-notes li{min-width:50px; padding:6px 10px 5px; border-radius:var(--r-s)}
[data-tone="studio"] .cf-notes li b{font:700 18px/1.1 var(--f-display); font-stretch:90%}
[data-tone="studio"] .cf-notes li span{font:600 11.5px var(--f-mono); opacity:.85}
[data-tone="studio"] .cf-x{width:44px; height:44px; background:var(--bg); border:0; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); font-size:15px}
[data-tone="studio"] .cf-x:focus{outline:none} [data-tone="studio"] .cf-x:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
[data-tone="studio"] .cf-act{padding:0 18px 14px; gap:var(--e-2); border-bottom:1px solid var(--line)}
[data-tone="studio"] .cf-act [data-cf-hear]{background:var(--acc); color:var(--acc-ink); border:0; border-radius:var(--r-m); font-weight:600; min-height:46px}
[data-tone="studio"] .cf-act [data-cf-work]{background:transparent; color:var(--ink); border:0; box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:var(--r-m); min-height:46px}
[data-tone="studio"] .cf-act [data-cf-work][aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--amb); color:var(--amb)}
[data-tone="studio"] .cf-body :is(#labo,#dico){background:transparent; box-shadow:none; border:0}

/* --- le grand manche : un instrument, sur un fond charbon dans les deux thèmes --- */
[data-tone="studio"] :is(#shell .stage,.stage){background:var(--bg); border-bottom:1px solid var(--line)}
[data-tone="studio"] .stage-cap{flex-wrap:wrap; row-gap:6px; white-space:normal; padding:2px 14px 8px; align-items:center}
[data-tone="studio"] #stage-t{flex:none; font:700 19px/1.15 var(--f-display); font-stretch:90%; letter-spacing:-.01em; color:var(--ink)}
[data-tone="studio"] #stage-s{flex:1 1 140px; font-size:13.5px; white-space:nowrap}
[data-tone="studio"] .stage-btns{margin-left:0; width:100%; gap:6px}
[data-tone="studio"] .stg-b{min-height:34px; padding:0 12px; border-radius:var(--r-s); border:0; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font:500 13.5px var(--f-body)}
[data-tone="studio"] .stg-b[aria-expanded="true"]{background:var(--acc-soft); color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
[data-tone="studio"] .stage-neck{margin:0 10px; padding:0; border-radius:var(--r-m); background:#0D0C0B; box-shadow:inset 0 0 0 1px #24201C}
[data-tone="studio"] .stage-neck svg .nk-str{stroke:#B6AA9C}
[data-tone="studio"] .stage-neck svg .nk-fret{stroke:#4A423A}
[data-tone="studio"] .stage-neck svg .nk-nut{stroke:#F5F0E9}
[data-tone="studio"] .stage-neck svg .nk-inlay{fill:#39332D}
[data-tone="studio"] .stage-neck svg .nk-num{fill:#7D746A}
[data-tone="studio"] .stage-neck svg :is(.nd-x){fill:#171411; stroke:#8C8479}
[data-tone="studio"] .stage-neck svg .ndt-x{fill:#F5F0E9}
[data-tone="studio"] .stage-neck svg .nd-5{fill:#F5F0E9}
[data-tone="studio"] .stage-neck svg .ndt-5{fill:#171411}
[data-tone="studio"] .stage-lg{padding:8px 16px 2px; gap:12px}
@media (min-width:900px){
  [data-tone="studio"] .stage-btns{width:auto; margin-left:auto}
  [data-tone="studio"] .stage-cap{flex-wrap:nowrap}
}
/* le grand manche garde son fond charbon aussi en thème clair : ses couleurs sont fixées sur place */
[data-tone="studio"] .stage-neck{--nk-bg:#0D0C0B; --nk-bg2:#131110; --nk-fret:#4A423A; --nk-str:#B6AA9C; --nk-inl:#39332D; --nk-txt:#7D746A; --tr5:#F5F0E9; --ink:#F5F0E9; --bg:#171411; --panel:#24201C}
[data-tone="studio"] .stage-neck svg{background:transparent !important}
[data-tone="studio"] .stage-lg .ndk-5{background:var(--tr5)}
[data-tone="studio"] .stage-neck svg text.ndt-5{fill:#171411 !important}
[data-tone="studio"] .stage-neck svg .nd-5{fill:#F5F0E9 !important}
[data-tone="studio"] .stage-lg .ndk-5{background:#F5F0E9; box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ==================== Studio, phase 4.3 : Pratiquer ==================== */
[data-tone="studio"] .st-pratiquer .sp-head{display:none}
[data-tone="studio"] .pr-paused{display:flex; align-items:center; gap:12px; width:100%; margin:0 0 12px; padding:12px 14px; border:0; border-radius:var(--r-m); background:var(--acc-soft); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-tone="studio"] .pr-paused > span:nth-child(2){flex:1; display:flex; flex-direction:column}
[data-tone="studio"] .pr-paused b{font-weight:600} [data-tone="studio"] .pr-paused span span{font-size:14px; color:var(--muted)}
[data-tone="studio"] .pr-dot{flex:none; width:10px; height:10px; border-radius:50%; background:var(--acc); animation:pr-pulse 1.8s ease-in-out infinite}
@keyframes pr-pulse{50%{opacity:.35}}
/* le cycle en cours : la pièce maîtresse de l'écran */
[data-tone="studio"] .pr-focus{position:relative; overflow:hidden; padding:20px; border-radius:var(--r-l); background:radial-gradient(80% 90% at 100% 0%, rgba(239,118,43,.32) 0%, transparent 60%), #0D0C0B; color:#F5F0E9; box-shadow:0 20px 44px -26px rgba(0,0,0,.7)}
[data-tone="studio"] .pr-k{margin:0; font-size:13px; font-weight:600; color:#C58B55}
[data-tone="studio"] .pr-t{margin:8px 0 8px; font:750 30px/1.05 var(--f-display); font-stretch:84%; letter-spacing:-.02em}
[data-tone="studio"] .pr-goal{margin:0; font-size:15px; line-height:1.45; color:#A9A198; max-width:46ch}
[data-tone="studio"] .pr-meter{display:flex; align-items:center; gap:12px; margin:18px 0 16px; font:500 13px var(--f-mono); color:#A9A198; white-space:nowrap}
[data-tone="studio"] .pr-meter .pr-bar{flex:1; background:rgba(245,240,233,.12)}
[data-tone="studio"] .pr-go{display:inline-flex; align-items:center; gap:8px; min-height:48px; max-width:100%; padding:0 20px; border:0; border-radius:var(--r-m); background:#EF762B; color:#140D07; font:600 16px var(--f-body); cursor:pointer}
[data-tone="studio"] .pr-go span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-tone="studio"] .pr-go svg{flex:none; width:14px; height:14px}
/* les barres de progression : fines, orange */
[data-tone="studio"] .pr-bar{display:block; height:5px; margin-top:8px; border-radius:3px; background:var(--line); overflow:hidden}
[data-tone="studio"] .pr-bar i{display:block; height:100%; border-radius:3px; background:var(--acc); transition:width .8s cubic-bezier(.32,.72,0,1)}
[data-tone="studio"] .pr-meter .pr-bar{margin-top:0}
[data-tone="studio"] .pr-track .sp-tx{padding:2px 0}
@media (min-width:900px){
  [data-tone="studio"] .st-pratiquer{max-width:1080px; margin:0 auto}
  [data-tone="studio"] .pr-focus{padding:28px 30px}
  [data-tone="studio"] .pr-t{font-size:38px}
}
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] .pr-dot{animation:none} }
[data-tone="studio"] .pr-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ==================== Studio, phase 4.4 : Créer ==================== */
[data-tone="studio"] .st-creer .sp-head{display:none}
/* le Jam : la grille en grandes touches, comme sur un pad */
[data-tone="studio"] .cr-jam{background:radial-gradient(80% 90% at 0% 0%, rgba(197,139,85,.3) 0%, transparent 60%), #0D0C0B}
[data-tone="studio"] .cr-jam, [data-tone="studio"] .cr-jam .pm-hero-in{min-height:0}
[data-tone="studio"] .cr-jam .pm-hero-k{color:#C58B55}
[data-tone="studio"] .cr-pads{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0 10px}
[data-tone="studio"] .cr-pad{display:grid; place-items:center; height:64px; border-radius:var(--r-s); background:rgba(245,240,233,.07); box-shadow:inset 0 0 0 1px rgba(245,240,233,.1); font:700 22px var(--f-display); font-stretch:88%; color:#F5F0E9; white-space:nowrap; overflow:hidden}
[data-tone="studio"] .cr-pad:first-child{background:rgba(239,118,43,.2); box-shadow:inset 0 0 0 1px rgba(239,118,43,.55)}
[data-tone="studio"] .cr-jam .pm-hero-s{color:#A9A198; opacity:1}
[data-tone="studio"] .cr-jam .pm-hero-row{margin-top:14px; padding-top:0}
/* le chemin de l'idée : trois gestes côte à côte */
[data-tone="studio"] .cr-flow{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2)}
[data-tone="studio"] .cr-step{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:150px; padding:12px; border:0; border-radius:var(--r-m); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-tone="studio"] .cr-step b{margin-top:6px; font:700 18px var(--f-display); font-stretch:90%}
[data-tone="studio"] .cr-step > span:not(.cr-n):not(.ex-ic){font-size:13px; line-height:1.3; color:var(--ink)}
[data-tone="studio"] .cr-step small{margin-top:auto; font-size:12px; line-height:1.3; color:var(--muted)}
[data-tone="studio"] .cr-n{position:absolute; top:10px; right:12px; font:600 12px var(--f-mono); color:var(--muted)}
[data-tone="studio"] .cr-step .ex-ic{color:var(--acc)}
[data-tone="studio"] .cr-grid{font-family:var(--f-mono); font-size:13px; letter-spacing:-.02em}
@media (min-width:900px){
  [data-tone="studio"] .st-creer{max-width:1080px; margin:0 auto}
  [data-tone="studio"] .st-creer .ex-cols > div:last-child > .pm-sec:first-child{margin-top:0}
}
[data-tone="studio"] .pm-hero-in > span.cr-pads{display:grid}

/* ==================== Studio, phase 4.5 : Mon carnet ==================== */
[data-tone="studio"] .st-carnet .sp-head{display:none}
/* trois chiffres, comme le tableau de bord d'un appareil */
[data-tone="studio"] .cn-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2)}
[data-tone="studio"] .cn-stat{padding:14px 12px; border-radius:var(--r-m); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .cn-stat b{display:block; font:600 30px/1 var(--f-mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ink)}
[data-tone="studio"] .cn-stat:first-child b{color:var(--acc)}
[data-tone="studio"] .cn-stat span{display:block; margin-top:6px; font-size:12.5px; line-height:1.25; color:var(--muted)}
[data-tone="studio"] .cn-week .pm-week{box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .cn-search{margin-top:var(--e-5)}
[data-tone="studio"] #cn-q{min-height:44px; border:0; border-radius:var(--r-m); background-color:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding-left:34px; font-size:16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23A9A198' stroke-width='1.8'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%23A9A198' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:10px center; background-size:16px}
[data-tone="studio"] #cn-found:not(:empty){margin-top:var(--e-2)}
/* ton histoire en quatre entrées */
[data-tone="studio"] .cn-tiles{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2)}
[data-tone="studio"] .cn-tile{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:112px; padding:12px; border:0; border-radius:var(--r-m); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-tone="studio"] .cn-tile b{margin-top:auto; font:700 17px var(--f-display); font-stretch:92%}
[data-tone="studio"] .cn-tile > span:last-child{font-size:13px; color:var(--muted)}
[data-tone="studio"] .cn-tile .ex-ic{color:var(--acc)}
@media (min-width:900px){
  [data-tone="studio"] .st-carnet{max-width:1080px; margin:0 auto}
  [data-tone="studio"] .st-carnet .ex-cols > div:last-child > .pm-sec:first-child{margin-top:26px}
}

/* ==================== Studio, phase 4.6 : les outils, les anciens écrans, la séance ==================== */
/* --- le système de base, appliqué aux anciens écrans --- */
[data-tone="studio"] .btn{border:0; box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:var(--r-m); color:var(--ink); background:transparent; min-height:40px; padding:0 14px; font-weight:500}
[data-tone="studio"] .btn[aria-pressed="true"], [data-tone="studio"] .btn.on{background:var(--acc-soft); color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
[data-tone="studio"] .play{border-radius:var(--r-m); background:var(--acc); color:var(--acc-ink); min-height:44px; font-weight:600}
[data-tone="studio"] .play[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
[data-tone="studio"] .tog{border-radius:var(--r-m)}
[data-tone="studio"] .tog[aria-pressed="true"]{background:var(--acc-soft); color:var(--acc); border-color:var(--acc)}
[data-tone="studio"] :is(.page,.tu,#cf,#shell) select, [data-tone="studio"] :is(.page,.tu,#cf,#shell) input:is([type="text"],[type="number"],[type="search"],:not([type])){border-radius:var(--r-s); border:0; box-shadow:inset 0 0 0 1px var(--line-strong); background-color:var(--panel); color:var(--ink); min-height:42px}
[data-tone="studio"] textarea{border-radius:var(--r-s); border:0; box-shadow:inset 0 0 0 1px var(--line-strong); background:var(--panel); color:var(--ink)}
[data-tone="studio"] :is(button,select,input,textarea,summary,a):focus{outline:none}
[data-tone="studio"] :is(button,select,input,textarea,summary,a):focus-visible{outline:2px solid var(--acc); outline-offset:2px}
[data-tone="studio"] .page :is(.card,.panel,section.pc,section.metro,section.dico,section.lb,section.rp,section.jr,section.bk,section.ec,section.quiz,section.drill,section.rl,section.rhythm,.fk-card){border-radius:var(--r-l); border:0; box-shadow:inset 0 0 0 1px var(--line); background:var(--panel)}
[data-tone="studio"] .page .sec-h h3{font-family:var(--f-display); font-stretch:92%; font-weight:700; letter-spacing:-.01em}
[data-tone="studio"] .caption{color:var(--muted); font-size:14px; line-height:1.45}
[data-tone="studio"] details > summary{color:var(--ink); font-weight:600}

/* --- le métronome : le tempo et le départ au premier plan, sans carte autour --- */
[data-tone="studio"] .page section.metro{background:transparent; box-shadow:none; padding-left:0; padding-right:0}
[data-tone="studio"] .metro > .sec-h{display:none}
[data-tone="studio"] .m-top{grid-template-columns:48px 44px minmax(0,1fr) 44px 48px; gap:6px; margin-top:6px}
[data-tone="studio"] .m-top button{height:52px; border:0; border-radius:var(--r-m); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); font:600 16px var(--f-mono)}
[data-tone="studio"] .m-bpm b{font:600 88px/1 var(--f-mono); letter-spacing:-.06em; color:var(--ink)}
[data-tone="studio"] .m-bpm span{margin-top:6px; font:600 11px var(--f-mono); letter-spacing:.2em}
[data-tone="studio"] #m-tname{display:block}
[data-tone="studio"] #m-range{accent-color:var(--acc); margin:14px 0 6px}
[data-tone="studio"] .m-lights{min-height:56px; gap:8px}
[data-tone="studio"] .m-go{display:grid; grid-template-columns:1.4fr 1fr; gap:var(--e-2)}
[data-tone="studio"] .m-go .play, [data-tone="studio"] .m-go .btn{justify-content:center; min-height:56px; font-size:17px}
[data-tone="studio"] .m-row{margin-top:16px}
@media (max-width:380px){ [data-tone="studio"] .m-bpm b{font-size:72px} }

/* --- la séance : le tempo et le clic sur une seule ligne, faciles à atteindre --- */
[data-tone="studio"] .im-met{flex-wrap:nowrap; gap:6px; padding:8px 8px 8px 14px; border-radius:var(--r-m); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line)}
[data-tone="studio"] .im-met .im-ml{font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap}
[data-tone="studio"] .im-met .btn-sm{min-width:40px; min-height:40px; border-radius:50%}
[data-tone="studio"] .im-met output{font-size:24px; min-width:2.4ch}
[data-tone="studio"] .im-met .im-u{font:600 10px var(--f-mono); letter-spacing:.12em; color:var(--muted)}
[data-tone="studio"] .im-met .im-go{margin-left:auto; min-height:40px; padding:0 14px; white-space:nowrap}
[data-tone="studio"] .im-met .im-go[aria-pressed="true"]{background:var(--acc); color:var(--acc-ink); box-shadow:none}
/* la consigne de « Trouve la forme » : une carte calme */
[data-tone="studio"] .fo-card .tr-dr{background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-m)}

/* --- l'accordeur et le mixeur : des feuilles nettes --- */
[data-tone="studio"] .tu{border-radius:var(--r-l) var(--r-l) 0 0}
@media (min-width:640px){ [data-tone="studio"] .tu{border-radius:var(--r-l)} }
[data-tone="studio"] .tu-top h2{font-size:24px}
[data-tone="studio"] .mx-row input[type="range"], [data-tone="studio"] .tu input[type="range"]{accent-color:var(--acc)}
[data-tone="studio"] .tu .seg button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}
[data-tone="studio"] .m-l.one.on i{background:var(--acc)} [data-tone="studio"] .m-l i{background:var(--soft)}
[data-tone="studio"] .page :is(section.pc,section.dico,section.lb,section.rp,section.jr,section.bk,section.ec,section.quiz,section.drill,section.rl,section.rhythm,.fk-card){padding:16px}
[data-tone="studio"] .page section.metro{padding:0}
[data-tone="studio"] .dc-r{color:var(--muted)}
[data-tone="studio"] .page :is(summary,a){color:var(--ink)}
[data-tone="studio"] .page :is(summary)::marker{color:var(--muted)}
[data-tone="studio"] .page a.link, [data-tone="studio"] .page .link{color:var(--acc)}

/* ==================== Phase 5 : la lisibilité de l'orange en thème clair ==================== */
/* tous les aplats d'action prennent l'orange plein (et le texte sombre), le texte orange garde la teinte profonde */
[data-tone="studio"] :is(.se-go,#sh-play,.sh-start,.fo-b.fo-next,.pm-hero-go,.ex-hear,.play:not([aria-pressed="true"]):not([data-cf-work]),.tl-ic[aria-pressed="true"],.im-met .im-go[aria-pressed="true"],.pm-step:first-child .pm-n){background:var(--acc-fill) !important; color:var(--acc-ink) !important}
[data-tone="studio"] .cf-act [data-cf-hear]{background:var(--acc-fill); color:var(--acc-ink)}
[data-tone="studio"] :is(.pr-bar i,.pm-day i.on,.pm-mini-bar i,.pm-steps i.cur,.pm-prog i,.m-l.one.on i,.pr-dot,.pm-hero-steps i:first-child){background:var(--acc-fill)}

/* ==================== Studio, compléments du cahier des charges ==================== */
/* --- changer d'espace : une entrée courte, qui ne retarde rien --- */
@keyframes st-enter{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
[data-tone="studio"] .sh-panel.st-enter > *{animation:st-enter .24s cubic-bezier(.32,.72,0,1) both}
/* les barres de progression se remplissent à l'arrivée */
@keyframes st-grow{from{transform:scaleX(0)} to{transform:none}}
@keyframes st-rise{from{transform:scaleY(0)} to{transform:none}}
[data-tone="studio"] .sh-panel.st-enter :is(.pr-bar i,.pm-prog i){transform-origin:left; animation:st-grow .7s cubic-bezier(.32,.72,0,1) .1s both}
[data-tone="studio"] .sh-panel.st-enter .pm-day i.on{transform-origin:bottom; animation:st-rise .6s cubic-bezier(.32,.72,0,1) .1s both}
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] .sh-panel.st-enter > *, [data-tone="studio"] .sh-panel.st-enter :is(.pr-bar i,.pm-prog i,.pm-day i.on){animation:none} }
/* --- l'accueil sans séance programmée --- */
[data-tone="studio"] .st-free-b{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:18px}
[data-tone="studio"] .st-ghost{min-height:48px; padding:0 18px; border:0; border-radius:var(--r-m); background:transparent; box-shadow:inset 0 0 0 1px rgba(245,240,233,.3); color:#F5F0E9; font:500 16px var(--f-body); cursor:pointer}
/* --- les messages : une seule forme pour les confirmations, les erreurs et les chargements --- */
[data-tone="studio"] .st-toast:not([hidden]){position:fixed; left:16px; right:16px; width:fit-content; bottom:calc(var(--dock, calc(84px + env(safe-area-inset-bottom,0px))) + 10px); z-index:60; pointer-events:none; margin:0 auto; max-width:calc(100vw - 32px); padding:10px 16px; border-radius:var(--r-m); background:var(--char); color:var(--char-ink); font-size:14.5px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); animation:st-enter .2s both}
[data-tone="studio"] :is(.sh-msg,.audio-msg,#bk-msg,.cf-msg,.so-msg,#m-status,.dc-msg):not(:empty):not([hidden]){margin:8px 0; padding:10px 12px; border-radius:var(--r-s); background:var(--bg); box-shadow:inset 3px 0 0 var(--amb); color:var(--ink); font-size:14.5px; line-height:1.4}
[data-tone="studio"] .cf-msg:not(:empty){margin:8px 18px}
/* --- le Carnet : les filtres de la recherche --- */
[data-tone="studio"] .cn-cats{margin-top:var(--e-2)}
/* --- l'accordage du manche --- */
[data-tone="studio"] #so-tune{align-items:center}
[data-tone="studio"] #nk-tune{flex:1; min-width:0; max-width:320px}
[data-tone="studio"] #nk-msg:empty{display:none}
/* --- iPad (700 à 899 px) : la largeur sert à poser deux colonnes, la barre d'onglets reste compacte --- */
@media (min-width:700px) and (max-width:899px){
  [data-tone="studio"] .sh-panel{padding-left:28px; padding-right:28px}
  [data-tone="studio"] #sh-tabs{left:50%; right:auto; width:520px; transform:translateX(-50%)}
  [data-tone="studio"] .pm-mini:not([hidden]){left:50%; right:auto; width:520px; transform:translateX(-50%)}
  [data-tone="studio"] .ex-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-items:start}
  [data-tone="studio"] .ex-cats,[data-tone="studio"] .ex-chips{margin-left:0; margin-right:0; padding-left:0; padding-right:0; flex-wrap:wrap}
  [data-tone="studio"] .st-home{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:24px; align-items:start}
  [data-tone="studio"] .st-home > *{grid-column:1}
  [data-tone="studio"] .st-home > .st-hello{grid-column:1 / -1}
  [data-tone="studio"] .st-home > .st-prog{grid-column:2; grid-row:2 / span 4; margin-top:0}
  [data-tone="studio"] .st-home > .pm-hero{grid-row:2}
  [data-tone="studio"] .st-creer .ex-cols > div:last-child > .pm-sec:first-child{margin-top:0}
  [data-tone="studio"] .fo-card{max-width:680px; margin-left:auto; margin-right:auto}
}

/* ==================== Passe de design, étape 1 : la séance dessinée comme une corde ==================== */
/* la séance n'est plus une carte : un titre, une phrase, la corde, le bouton, posés sur la page */
[data-tone="studio"] .st-home .st-session, [data-tone="studio"] .st-home .st-session .pm-hero-in{min-height:0}
[data-tone="studio"] .st-session{background:none; box-shadow:none; border-radius:0; overflow:visible; color:var(--ink); padding:6px 2px 0}
[data-tone="studio"] .st-session .pm-hero-t{margin:0; max-width:14ch; font-size:clamp(34px,10.4vw,46px); line-height:.98; font-weight:780 !important; font-stretch:78%; letter-spacing:-.02em; color:var(--ink)}
[data-tone="studio"] .st-meta{margin:10px 0 0; font-size:16px; color:var(--muted)}
[data-tone="studio"] .st-why{margin:0 0 16px; font-size:16px; line-height:1.4; color:var(--ink); max-width:36ch}
[data-tone="studio"] .st-session .pm-hero-go{height:52px; padding:0 26px; font-size:17px}
/* la corde */
[data-tone="studio"] .st-corde{margin:26px 0 20px}
[data-tone="studio"] .st-c-neck{position:relative; height:34px; border-left:5px solid var(--ink); border-radius:2px 0 0 2px}
[data-tone="studio"] .st-c-str{position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:linear-gradient(90deg, var(--ink), var(--muted)); transform-origin:left; animation:st-string .9s cubic-bezier(.32,.72,0,1) both}
@keyframes st-string{from{transform:scaleX(0)} to{transform:none}}
[data-tone="studio"] .st-c-fret{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; border-radius:1px; background:var(--line-strong)}
[data-tone="studio"] .st-c-fret.done{background:var(--muted)}
[data-tone="studio"] .st-c-dot{position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--acc-fill); box-shadow:0 0 0 4px var(--bg); transition:left .6s cubic-bezier(.32,.72,0,1)}
[data-tone="studio"] .st-c-dot[style*="left:0.00%"]{margin-left:-11px}
[data-tone="studio"] .st-c-names{display:flex; margin-top:8px; padding-left:5px}
[data-tone="studio"] .st-c-names span{display:flex; flex-direction:column; gap:1px; min-width:0; padding-right:6px}
[data-tone="studio"] .st-c-names b{font:600 13px var(--f-body); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-tone="studio"] .st-c-names small{font:500 12px var(--f-mono); color:var(--muted)}
[data-tone="studio"] .st-c-names .cur b{color:var(--acc)}
/* les raccourcis : une ligne d'outils, sans cartes */
[data-tone="studio"] .st-quick{margin-top:26px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); gap:0}
[data-tone="studio"] .st-q{background:none; box-shadow:none; border-radius:var(--r-s); min-height:64px; padding:8px 2px}
[data-tone="studio"] .st-q-ic{color:var(--ink)}
/* la salutation : plus petite que le titre de la séance, qui est la vedette */
[data-tone="studio"] .st-hi{font-size:26px; font-weight:700; font-stretch:92%; margin:2px 0 4px}
[data-tone="studio"] .st-hello{margin-bottom:22px}
/* dans la séance et le mini-lecteur : la même corde */
[data-tone="studio"] .pm-steps{gap:0; align-items:stretch; height:16px; border-left:4px solid var(--ink); background:linear-gradient(var(--muted),var(--muted)) left center/100% 1.5px no-repeat}
[data-tone="studio"] .pm-steps i{height:auto; border-radius:0; background:none !important; border-right:2px solid var(--line-strong); position:relative}
[data-tone="studio"] .pm-steps i.done{border-right-color:var(--muted)}
[data-tone="studio"] .pm-steps i.cur::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--acc-fill); box-shadow:0 0 0 3px var(--bar)}
[data-tone="studio"] .pm-mini-bar{height:1.5px; background:var(--muted); overflow:visible}
[data-tone="studio"] .pm-mini-bar i{position:relative; height:1.5px; background:none !important}
[data-tone="studio"] .pm-mini-bar i::after{content:""; position:absolute; right:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--acc-fill)}
@media (min-width:700px){ [data-tone="studio"] .st-session .pm-hero-t{font-size:52px; max-width:16ch} }
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] .st-c-str{animation:none} [data-tone="studio"] .st-c-dot{transition:none} }
[data-tone="studio"] .st-c-dot[style*="left:0.00%"]{margin-left:-2px; box-shadow:none}

/* ==================== Passe de design, étape 2 : des listes simples, des textes sans tics ==================== */
/* plus de flèche ajoutée aux liens et aux boutons : le mot suffit */
[data-tone="studio"] .link::after{content:none}
[data-tone="studio"] .fo-next > span[aria-hidden]{display:none}
[data-tone="studio"] .link{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
[data-tone="studio"] .fo-w-more{text-decoration:none}
/* les listes des espaces : des lignes séparées par un filet, plus de carte autour */
[data-tone="studio"] :is(.sp-hub,.st-home) .sp-list{background:none; border-radius:0; box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
[data-tone="studio"] :is(.sp-hub,.st-home) .sp-list > .sp-row{padding-left:2px; padding-right:2px; min-height:60px}
[data-tone="studio"] :is(.sp-hub,.st-home) .sp-list > .sp-row + .sp-row::before{left:0; background:var(--line)}
[data-tone="studio"] :is(.sp-hub,.st-home) .ex-ic{width:26px; height:26px; background:none; border-radius:0; color:var(--muted)}
[data-tone="studio"] :is(.sp-hub,.st-home) .ex-ic svg{width:22px; height:22px}
[data-tone="studio"] :is(.sp-hub,.st-home) .pm-ic{background:none !important; color:var(--muted); width:26px}
[data-tone="studio"] .st-home .pm-n{background:none; color:var(--muted); font:500 15px var(--f-mono); width:22px; justify-content:flex-start}
[data-tone="studio"] .st-home .pm-step:first-child .pm-n{background:none !important; color:var(--acc) !important}
/* « De l'idée au morceau » : une vraie suite en trois temps, donc une liste numérotée, pas trois cartes */
[data-tone="studio"] .cr-flow{grid-template-columns:1fr; gap:0; box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
[data-tone="studio"] .cr-step{flex-direction:row; align-items:baseline; gap:12px; min-height:60px; padding:16px 2px; background:none; box-shadow:none; border-radius:0}
[data-tone="studio"] .cr-step + .cr-step{box-shadow:inset 0 1px 0 var(--line)}
[data-tone="studio"] .cr-step .ex-ic, [data-tone="studio"] .cr-step small{display:none}
[data-tone="studio"] .cr-n{position:static; order:-1; width:20px; font:500 15px var(--f-mono); color:var(--muted)}
[data-tone="studio"] .cr-step b{margin:0; min-width:5.2em; font-size:19px}
[data-tone="studio"] .cr-step > span:not(.cr-n):not(.ex-ic){font-size:15px; color:var(--muted)}
/* les titres de section, plus discrets : la page a un seul grand titre */
[data-tone="studio"] :is(.sp-hub,.st-home) .pm-h{font-size:19px; margin-bottom:8px}
[data-tone="studio"] .ex-sec .pm-h{font-size:19px}
[data-tone="studio"] .pm-explorer .pm-sec, [data-tone="studio"] .sp-hub .pm-sec{margin-top:30px}

/* ==================== Passe de design, étape 3 : le Carnet en une phrase, un seul mouvement ==================== */
[data-tone="studio"] .cn-stats{display:block; margin:0 2px; font:500 22px/1.35 var(--f-display); font-stretch:92%; letter-spacing:-.01em; color:var(--muted); max-width:30ch}
[data-tone="studio"] .cn-stats .cn-stat{display:inline; padding:0; background:none; box-shadow:none; border-radius:0; font:600 1em var(--f-mono); letter-spacing:-.04em; color:var(--ink)}
[data-tone="studio"] .cn-stats .cn-stat:first-child{color:var(--acc)}
[data-tone="studio"] .cn-week .pm-week{background:none; box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); border-radius:0; padding-left:2px; padding-right:2px}
[data-tone="studio"] .cn-tiles{grid-template-columns:1fr; gap:0; box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
[data-tone="studio"] .cn-tile{flex-direction:row; align-items:center; gap:12px; min-height:60px; padding:12px 2px; background:none; box-shadow:none; border-radius:0}
[data-tone="studio"] .cn-tile + .cn-tile{box-shadow:inset 0 1px 0 var(--line)}
[data-tone="studio"] .cn-tile b{margin:0; flex:1; font:500 17px var(--f-body); letter-spacing:-.01em}
[data-tone="studio"] .cn-tile .ex-ic{color:var(--muted); background:none}
[data-tone="studio"] .cn-tile > span:last-child{font:500 14px var(--f-body)}
/* le mouvement : plus de glissement des blocs ni de barres qui se remplissent au changement d'onglet ;
   un simple fondu très court, qui répond au toucher, et la corde de l'accueil qui se tend */
[data-tone="studio"] .sh-panel.st-enter > *, [data-tone="studio"] .sh-panel.st-enter :is(.pr-bar i,.pm-prog i,.pm-day i.on){animation:none}
@keyframes st-fade{from{opacity:.4} to{opacity:1}}
[data-tone="studio"] .sh-panel.st-enter{animation:st-fade .16s ease-out}
@media (prefers-reduced-motion:reduce){ [data-tone="studio"] .sh-panel.st-enter{animation:none} }

/* ==================== Correctifs iPhone : le manche dans Gammes et arpèges, la fluidité ==================== */
/* Quand le grand manche est affiché dans un espace (Gammes et arpèges, Jam…), toute la page défile, manche compris :
   avant, seul le bas défilait et un glissement sur le manche ne faisait rien. La barre du haut reste accrochée. */
@media (max-width:899px){
  [data-tone="studio"] body.sh-on.stg-on:not(.fo):not(.sp-hub-on):not(.se-today):not(.neck-closed) #shell{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; display:block}
  [data-tone="studio"] body.sh-on.stg-on:not(.fo):not(.sp-hub-on):not(.se-today):not(.neck-closed) #shell > .sh-top{position:sticky; top:0; z-index:20; background:var(--bar); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
  [data-tone="studio"] body.sh-on.stg-on:not(.fo):not(.sp-hub-on):not(.se-today):not(.neck-closed) #shell .sh-panel{overflow:visible; min-height:0; padding-bottom:calc(var(--dock, calc(94px + env(safe-area-inset-bottom,0px))) + 16px)}
  [data-tone="studio"] body.sh-on.stg-on.pm-mini-on:not(.fo):not(.sp-hub-on):not(.se-today):not(.neck-closed) #shell .sh-panel{padding-bottom:calc(var(--dock, calc(154px + env(safe-area-inset-bottom,0px))) + 16px)}
  [data-tone="studio"] body.sh-on.stg-on:not(.fo):not(.sp-hub-on):not(.se-today):not(.neck-closed) #shell .stage-opt{max-height:none; overflow:visible; position:static; box-shadow:none}
}
/* un glissement vertical commencé sur le manche fait défiler la page ; un glissement horizontal fait glisser le manche */
[data-tone="studio"] .stage-neck{touch-action:pan-x pan-y}
/* Fluidité : plus de page entière qui glisse sous des barres floutées (coûteux sur iPhone) ;
   les ouvertures et retours sont de courts fondus, et le flou des barres est allégé */
@keyframes st-in{from{opacity:0} to{opacity:1}}
[data-tone="studio"] .page.pm-push, [data-tone="studio"] #shell.pm-pop{animation:st-in .16s ease-out}
[data-tone="studio"] .sh-panel.st-enter{animation:none}
[data-tone="studio"] #sh-tabs, [data-tone="studio"] .pm-mini:not([hidden]){-webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px)}
[data-tone="studio"] .st-c-str{animation-duration:.6s}
[data-tone="studio"] .cn-how{margin:10px 2px 0; font-size:13.5px; line-height:1.45; color:var(--muted); max-width:52ch}
/* lot B : la carte du haut de Pratiquer = la séance du jour, le parcours en second */
[data-tone="studio"] .pr-acts{display:flex; flex-wrap:wrap; gap:var(--e-2)}
[data-tone="studio"] .pr-alt{min-height:48px; padding:0 18px; border:0; border-radius:var(--r-m); background:transparent; box-shadow:inset 0 0 0 1px rgba(245,240,233,.3); color:#F5F0E9; font:500 16px var(--f-body); cursor:pointer}