/* ==================== Étape 2 : la direction B « Bois du manche », appliquée partout ====================
   Variables de design (BRIEF-design.md) : papier chaud, encre, un seul accent (terracotta) pour l’action principale,
   le manche en bois sombre comme élément le plus beau de l’écran. Couleurs des notes inchangées. */
:root[data-design="b"]{--acc-ink:#FFFFFF}
@media (prefers-color-scheme: dark){ :root[data-design="b"]:not([data-theme="light"]){--acc-ink:#1A110A} }
:root[data-design="b"][data-theme="dark"]{--acc-ink:#1A110A}
:root[data-design="b"]{--nk-bg:#2A1C11; --nk-bg2:#352416; --nk-fret:#B8925F; --nk-str:#E2CFAC; --nk-inl:#4E3A27; --nk-txt:#C9B79B}
@media (prefers-color-scheme: dark){ :root[data-design="b"]:not([data-theme="light"]){--nk-bg:#24170D; --nk-bg2:#2E1E12} }
/* l’accent : le logo, l’onglet actif, les titres d’appel */
[data-design="b"] .sh-logo, [data-design="b"] .se-eyebrow, [data-design="b"] .ns-lab, [data-design="b"] .bd-now{color:var(--acc)}
[data-design="b"] .sh-tabs button[aria-pressed="true"] svg{color:var(--acc)}
[data-design="b"] .sh-tabs button[aria-pressed="true"]{color:var(--ink)}
[data-design="b"] .ns-card{border-color:var(--acc)}
[data-design="b"] .mo-plan li.cur .mo-d{border-color:var(--acc); color:var(--acc)}
/* un seul bouton principal par écran : Commencer, Jouer, Suivant, Créer mon plan, Vérifier au micro */
[data-design="b"] #sh-play, [data-design="b"] .sh-start, [data-design="b"] .fo-next{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
[data-design="b"] .tm-go{background:var(--ink); border-color:var(--ink); color:var(--bg)}
[data-design="b"] #sh-play[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
/* moins de cadres */
[data-design="b"] .sh-card, [data-design="b"] .tile, [data-design="b"] .mo-it, [data-design="b"] .son-ab{border-color:transparent; box-shadow:0 1px 0 var(--line), 0 6px 18px -14px rgba(40,24,12,.35)}
[data-design="b"] .son-ab{border-style:solid}
/* ---------- le manche, star de l’écran : bois sombre, frettes laiton, cordes claires ---------- */
[data-design="b"] #shell .stage, [data-design="b"] .stage{background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(245,235,220,.05) 21px 22px), linear-gradient(170deg,#3E2B1B,#20150C);
  border-bottom:0; box-shadow:0 10px 24px -16px rgba(20,12,6,.8); color:#F5EBDC}
[data-design="b"] .stage-cap b, [data-design="b"] #stage-t{color:#F5EBDC}
[data-design="b"] #stage-s, [data-design="b"] .stage-lg, [data-design="b"] .stage-lg span{color:rgba(245,235,220,.72)}
[data-design="b"] .stg-b{background:rgba(245,235,220,.08); border-color:rgba(245,235,220,.28); color:#F5EBDC; min-height:36px}
[data-design="b"] .stage-opt{background:#24170D !important; color:#F5EBDC}
[data-design="b"] .stage-opt .seg{background:rgba(245,235,220,.06); border-color:rgba(245,235,220,.25)}
[data-design="b"] .stage-opt .seg button{color:#F5EBDC}
/* ---------- Jam : la grille en cartes d’accords lisibles, les commandes sous le pouce ---------- */
[data-design="b"] .sh-jc{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px}
[data-design="b"] .sh-jcc{font-size:20px; min-height:56px; display:grid; place-items:center; padding:6px 4px; border-radius:var(--r1); border:0; background:var(--panel); box-shadow:0 1px 0 var(--line), 0 6px 14px -12px rgba(40,24,12,.4)}
[data-design="b"] .sh-jcc.on{background:linear-gradient(165deg,#3E2B1B,#20150C); color:var(--nk-ct); box-shadow:0 0 0 2px var(--nk-ct) inset}
[data-design="b"] body.sh-on .sh-tr{position:sticky; bottom:-24px; z-index:4; margin:0 calc(-1 * max(14px,env(safe-area-inset-left,0px))); padding:10px max(14px,env(safe-area-inset-left,0px)) 12px; background:var(--bg); box-shadow:0 -10px 18px -14px rgba(40,24,12,.35)}
[data-design="b"] #sh-play{min-height:52px; min-width:132px; font-size:17px}
/* ---------- la séance guidée : une étape à la fois, grosse typo, « Suivant » toujours au même endroit ---------- */
[data-design="b"] .fo-head{background:var(--bg); border-bottom:0; box-shadow:0 8px 18px -16px rgba(40,24,12,.45)}
[data-design="b"] .fo-next{min-height:48px; padding:8px 18px; font-size:16px; font-weight:800}
[data-design="b"] .fo-card{border:0; border-radius:var(--r2); padding:20px 18px; box-shadow:0 1px 0 var(--line), 0 14px 30px -22px rgba(40,24,12,.5)}
[data-design="b"] .fo-t{font-size:clamp(1.55rem,6.4vw,2.05rem); line-height:1.12}
[data-design="b"] .fo-w{font-size:17px; line-height:1.5}
[data-design="b"] .fo-g{font-size:15.5px}
/* ---------- les diagrammes de triades : plus grands, plus nets ---------- */
[data-design="b"] .tr-fig{width:118px}
[data-design="b"] .tr-ans .tr-fig, [data-design="b"] .tr-dr>.tr-figs .tr-fig{width:150px}
[data-design="b"] .tr-fig figcaption{font-size:12.5px}
[data-design="b"] .tr-figs{gap:10px 12px}
/* animations courtes et douces */
[data-design="b"] .sh-jcc, [data-design="b"] .se-go, [data-design="b"] #sh-play{transition:background-color .18s ease, transform .15s ease}
[data-design="b"] .se-go:active, [data-design="b"] #sh-play:active, [data-design="b"] .sh-jcc:active{transform:scale(.98)}