/* Nouvelle direction, étape 3 : les 5 espaces (Studio, Explorer, Pratiquer, Créer, Mon carnet) */
body.sp-hub-on #sh-neck{display:none}
#sh-tabs .sp-tab{min-width:0}
#sh-tabs .sp-tab span{font-size:11px; letter-spacing:.01em; white-space:nowrap}
#sh-tabs .sp-tab[aria-pressed="true"]{color:var(--acc, var(--ink))}
#sh-tabs .sp-tab[aria-pressed="true"] svg{color:var(--acc, var(--ink))}
#sh-tabs .sp-tab[aria-pressed="true"] span{font-weight:700}

.sp-hub{max-width:640px; margin:0 auto; padding:8px 2px 28px}
.sp-head{padding:6px 2px 4px}
.sp-eyebrow{margin:0; font:600 11.5px/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing:.12em; text-transform:uppercase; color:var(--acc, var(--muted))}
.sp-q{margin:6px 0 6px; font:400 32px/1.08 var(--f-display, Georgia, serif); letter-spacing:-.01em; color:var(--ink)}
.sp-intro{margin:0; font-size:14.5px; line-height:1.45; color:var(--muted); max-width:34em}
.sp-sec{margin-top:22px}
.sp-h{margin:0 4px 8px; font:600 11px/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sp-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--panel); overflow:hidden; box-shadow:var(--sh-soft, none)}
.sp-row{display:flex; align-items:center; gap:10px; width:100%; min-height:58px; padding:10px 14px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.sp-list > .sp-row:first-child{border-top:0}
button.sp-row:active{background:var(--soft, rgba(0,0,0,.04))}
@media (hover:hover){ button.sp-row:hover{background:var(--soft, rgba(0,0,0,.04))} }
button.sp-row:focus-visible{outline:2px solid var(--acc, currentColor); outline-offset:-2px}
.sp-tx{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.sp-tx b{font-size:15.5px; font-weight:600; line-height:1.25}
.sp-tx span{font-size:13px; line-height:1.35; color:var(--muted)}
.sp-where{flex:none; font:500 11px/1 var(--f-mono, ui-monospace, monospace); font-style:normal; color:var(--acc, var(--muted)); text-transform:uppercase; letter-spacing:.06em}
.sp-chev{flex:none; width:16px; height:16px; color:var(--muted); opacity:.7}
.sp-theme{cursor:default; flex-wrap:wrap}
.sp-theme .seg{flex:none}
.sp-theme .seg button{min-height:36px; min-width:62px}
.sp-search{margin-top:16px}
.sp-search input{width:100%; min-height:44px}
#sp-found:not(:empty){margin-top:10px}
body.sp-searching .sp-explorer .sp-sec{display:none}
/* étape 4 : la page Studio */
.sdo-sec{margin-top:20px}
.sdo-bars{display:flex; flex-direction:column; gap:12px; padding:14px 14px 12px}
.sdo-pl{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 6px; font-size:14px}
.sdo-pl b{font-weight:600}
.sdo-pl span{font:500 12px/1 var(--f-mono, ui-monospace, monospace); color:var(--muted)}
.sdo-bars + .sp-row{border-top:1px solid var(--line)}
/* étape 5 : l’en-tête commun des écrans d’outils (design « Carnet » seulement) */
.tl-head{display:none}
[data-look="carnet"] body:not(.sh-on):not(.fo) .tl-head{display:block; padding:6px 0 4px}
[data-look="carnet"] .page .top .intro, [data-look="carnet"] .page .top .tu-open, [data-look="carnet"] #subnav{display:none !important}
.tl-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px}
.tl-back{display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 10px 0 2px; margin-left:-4px; border:0; background:transparent; color:var(--acc); font:600 16px/1 var(--f-body, inherit); cursor:pointer}
.tl-back svg{width:20px; height:20px}
.tl-ics{display:flex; gap:6px}
.tl-ic{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); cursor:pointer; padding:0}
.tl-ic svg{width:17px; height:17px}
.tl-ic[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tl-title{margin:6px 0 2px; font:400 32px/1.08 var(--f-display, Georgia, serif); letter-spacing:-.01em; color:var(--ink)}
.tl-title:empty{display:none}
/* les écrans d’outils : l’action principale en sauge, les petits schémas à l’encre */
[data-look="carnet"] .page button.play:not(#play):not([aria-pressed="true"]){background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
[data-look="carnet"] .lk-mini circle{fill:var(--ink)}
[data-look="carnet"] .page h2{font-family:var(--f-display, Georgia, serif); font-weight:400; letter-spacing:-.005em}
/* les réglages généraux (tonalité, son, accords/degrés) sur une ligne compacte */
[data-look="carnet"] .page .top{padding-top:0; padding-bottom:6px; margin:0}
[data-look="carnet"] .page .top .settings{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; margin:4px 0 0}
[data-look="carnet"] .page .top .settings .field{margin:0; gap:3px}
[data-look="carnet"] .page .top .settings label, [data-look="carnet"] .page .top .settings #mode-lab{font:600 10px/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing:.1em}
[data-look="carnet"] .page .top .settings select{min-height:38px; padding-top:4px; padding-bottom:4px; font-size:14.5px}
[data-look="carnet"] .page .top .settings .seg button{min-height:34px; padding:0 12px; font-size:14px}
/* étape 6 : le manche contextuel */
body.neck-closed #stage .stage-cap > b, body.neck-closed #stage .stage-cap > span:not(.stage-btns), body.neck-closed #stage .stage-btns > :not(#stg-fold){display:none !important}
body.neck-closed #stage .stage-cap{justify-content:flex-start}
body.neck-closed #stg-fold{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); color:var(--acc, var(--ink)); font-weight:600}
body.neck-closed #stg-fold svg{width:16px; height:16px}
#stage.nk-compact #stage-neck{overflow:hidden}
#stage.nk-compact #stage-neck svg{width:100%; height:auto; max-height:46vh}
/* la barre du manche ne déborde plus : un titre long se coupe avec « … », les boutons restent visibles */
#stage .stage-cap{align-items:center}
#stage #stage-t{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
#stage .stage-cap #stage-s{flex:0 100 auto; min-width:0}
/* étape 7 : iPad et Mac */
.sp-brand, .sp-col{display:none}
@media (min-width:900px){
  :root{--sb:224px}
  #sh-tabs{top:0; bottom:0; right:auto; width:var(--sb); flex-direction:column; justify-content:flex-start; gap:2px; padding:calc(18px + env(safe-area-inset-top,0px)) 12px 16px max(12px,env(safe-area-inset-left,0px)); border-top:0; border-right:1px solid var(--line); box-shadow:none}
  #sh-tabs .sp-brand{display:block; margin:0 10px 22px; font:400 28px/1 var(--f-display, Georgia, serif); color:var(--ink)}
  #sh-tabs .sp-brand span{display:block; margin-top:4px; font:600 10.5px/1 var(--f-mono, ui-monospace, monospace); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
  #sh-tabs .sp-tab{flex:none; flex-direction:row; justify-content:flex-start; gap:12px; min-height:44px; padding:0 12px; border-radius:12px; width:100%}
  #sh-tabs .sp-tab span{font-size:15px}
  #sh-tabs .sp-tab[aria-pressed="true"]{background:var(--acc-soft, var(--soft))}
  body:not(.fo) .shell{left:var(--sb)}
  #shell{padding-bottom:env(safe-area-inset-bottom,0px)}
  body:not(.fo) .page{margin-left:var(--sb)}
  body:not(.fo) .transport, body:not(.fo) .pc-banner{left:var(--sb)}
  .sh-top .sh-logo{visibility:hidden}
  /* le manche complet occupe toute la largeur */
  #stage:not(.nk-compact) #stage-neck svg{width:100%; height:auto; max-height:42vh}
}
@media (min-width:1280px){
  .sp-col{position:fixed; top:0; bottom:0; left:var(--sb); width:240px; z-index:36; overflow-y:auto; padding:calc(24px + env(safe-area-inset-top,0px)) 12px 24px; border-right:1px solid var(--line); background:var(--bg)}
  body.sp-col-on .sp-col{display:block}
  body.sp-col-on:not(.fo) .shell{left:calc(var(--sb) + 240px)}
  body.sp-col-on:not(.fo) .page{margin-left:calc(var(--sb) + 240px)}
  body.sp-col-on:not(.fo) .transport, body.sp-col-on:not(.fo) .pc-banner{left:calc(var(--sb) + 240px)}
  .sp-col-h{margin:0 10px 14px; font:400 26px/1.1 var(--f-display, Georgia, serif); color:var(--ink)}
  .sp-col-g{margin:16px 10px 6px; font:600 10.5px/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .sp-col-i{display:block; width:100%; min-height:38px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; font-size:14.5px; text-align:left; cursor:pointer}
  .sp-col-i:hover{background:var(--soft, rgba(0,0,0,.04))}
  .sp-col-i[aria-current="page"]{background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-strong); font-weight:600}
}
/* étape 8 : le carnet d’idées et les favoris */
body.sp-page-on #sh-neck{display:none}
.fav-b{display:inline-grid; place-items:center; width:40px; height:40px; flex:none; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--panel); color:var(--muted); cursor:pointer; vertical-align:middle}
.fav-b svg{width:18px; height:18px; fill:none}
.fav-b[aria-pressed="true"]{color:var(--amb, #8E5F1A); border-color:var(--amb, #8E5F1A)}
.fav-b[aria-pressed="true"] svg{fill:currentColor}
.bt-title .fav-b{width:34px; height:34px; margin-left:6px}
#ph-title + .fav-b{margin:4px 0 6px}
.cf-act button.fav-b{flex:0 0 46px; width:46px; height:46px; min-height:46px; align-self:center}
.ic-box{padding:14px; gap:12px}
.ic-f{display:flex; flex-direction:column; gap:5px; min-width:0}
.ic-f > span{font:600 10.5px/1.2 var(--f-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ic-f input, .ic-f textarea{width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg); color:var(--ink); font:inherit; font-size:16px}
#ic-g{font-family:var(--f-mono, ui-monospace, monospace); font-size:17px; letter-spacing:.02em}
.ic-row{display:flex; gap:10px} .ic-t{flex:1 1 auto} .ic-b{flex:0 0 96px}
.ic-act{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ic-msg:empty{display:none} .ic-msg{margin:0; font-size:13.5px; color:var(--tr1, #B5452F)}
.ic-i{margin-bottom:10px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--panel)}
.ic-ih{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ic-ih b{font-size:16px; font-weight:600}
.ic-g{margin:8px 0 2px; font:500 18px/1.35 var(--f-mono, ui-monospace, monospace); color:var(--ink); overflow-wrap:anywhere}
.ic-m{margin:0 0 6px; font:500 12px/1.3 var(--f-mono, ui-monospace, monospace); color:var(--muted)}
.ic-n{margin:4px 0 10px; font-size:14px; line-height:1.45; color:var(--ink)}
.ic-del{color:var(--muted)}
.ic-none{margin:8px 4px; font-size:14px; color:var(--muted)}
.fav-row{padding:0 8px 0 0; gap:6px; cursor:default}
.fav-go{flex:1 1 auto; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 6px 8px 14px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; min-width:0}
[data-look="carnet"] .sp-hub button.play{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
/* étape 9 : toucher une note, gaucher, raccourcis */
[data-m]{cursor:pointer}
.nd-hit{animation:nd-hit .35s ease-out}
@keyframes nd-hit{0%{opacity:.35}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .nd-hit{animation:none} }
html[data-lefty="1"] :is(svg:has(.nd), svg.lk-mini):not(.lf-box svg){transform:scaleX(-1)}
html[data-lefty="1"] .lf-box{transform:scaleX(-1)}
html[data-lefty="1"] :is(svg:has(.nd), svg.lk-mini) text{transform-box:fill-box; transform-origin:center; transform:scaleX(-1)}
.sp-keys{cursor:default}
.sp-keys kbd{display:inline-block; min-width:1.4em; padding:0 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; background:var(--bg); font:600 11.5px/1.6 var(--f-mono, ui-monospace, monospace); color:var(--ink); text-align:center}
@media (hover:none){ .sp-keys{display:none} }

/* ---------- un outil = une page : les autres blocs de l'ancien écran sont masqués tant qu'on est dans l'outil ---------- */
.tl-solo-box > :not(.tl-keep){display:none !important}
body.tl-solo :is(#tsub, #view-tools > nav.jump){display:none !important}
/* les réglages du haut ne restent que là où ils agissent ; le petit titre qui répétait le grand est retiré */
body[data-solo-set="none"] .page .top{display:none !important}
body[data-solo-set="key"] .page .top .settings .field:not(:first-child){display:none !important}
.tl-target > .sec-h:first-child > :is(h3,h4){display:none}
body[data-solo-neck="off"] #stage{display:none !important}