:root{
  --blue:#1769c2;--blue2:#0f5aa8;--green:#2da867;--green2:#218654;--purple:#7657c8;--purple2:#5e45ac;
  --coral:#e65a4f;--orange:#c27b12;--teal:#278f84;--navy:#173b63;--ink:#2b3e50;--muted:#687887;
  --line:#d8e3eb;--bg:#eef4f8;--white:#fff;--gold:#d9a514;--silver:#7d8b99;--bronze:#a85f2f;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(135deg,#f1f5ef 0%,#eef5fb 55%,#eaf3f8 100%);color:#333;padding:14px 10px 18px}main{max-width:1100px;margin:auto}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid #4f86b5;outline-offset:2px}html[data-input-mode="gamepad"] .pad-focus{outline:3px solid #ffb52e!important;outline-offset:3px!important}.hidden{display:none!important}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.module-titlebar{display:flex;align-items:center;gap:13px;min-height:64px;padding:9px 14px;margin-bottom:10px;border-radius:18px;background:#fff;box-shadow:0 5px 18px #1b3b5512;border:1px solid #dbe7ef;text-align:left}.module-logo{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#fff0e8,#edf8ee);font-size:25px;color:var(--coral);font-weight:900}.module-titlecopy{display:flex;flex-direction:column;gap:1px;min-width:0}.module-titlecopy h1{margin:0;color:var(--navy);font-size:1.7rem;line-height:1}.module-kicker{font-size:.76rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.section{background:#fff;border-radius:20px;box-shadow:0 5px 22px #15364f18;padding:18px 20px;border:1px solid #dce7ee;position:relative}.screen{display:none}.screen.show{display:flex;flex-direction:column}h2,h3{color:var(--navy)}h2{font-size:1.55rem;margin:4px 0 6px}.section-eyebrow{display:block;color:#738391;text-transform:uppercase;letter-spacing:.08em;font-size:.71rem;font-weight:850;margin-bottom:2px}.screen-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;text-align:left;margin:0 0 12px;min-height:72px;flex:0 0 72px}.screen-heading p,.home-intro p{color:var(--muted);margin:0;line-height:1.45}
/* Accueil */
#home.show{display:block}.home-intro{max-width:820px;margin:4px auto 20px;text-align:center}.home-intro h2{font-size:1.72rem}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mode-card{min-height:168px;border:0;border-radius:20px;padding:20px;display:grid;grid-template-columns:50px 1fr auto;gap:15px;align-items:center;text-align:left;color:#fff;box-shadow:0 9px 20px #1e425425;transition:transform .16s ease,filter .16s ease}.mode-card:hover{transform:translateY(-2px);filter:brightness(1.025)}.mode-tuto{background:linear-gradient(145deg,var(--purple),var(--purple2))}.mode-guided{background:linear-gradient(145deg,#2780d6,var(--blue2))}.mode-custom{background:linear-gradient(145deg,#38b874,var(--green2))}.mode-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.17);font-size:27px;font-weight:900}.mode-copy{display:flex;flex-direction:column;gap:7px}.mode-copy strong{font-size:1.38rem}.mode-copy small{font-size:.93rem;line-height:1.45;color:rgba(255,255,255,.94)}.mode-arrow{font-size:2.25rem;opacity:.82}.home-tip{margin:18px auto 0;padding:11px 15px;border-radius:12px;background:#fff7e2;border:1px solid #f2d189;color:#6c5218;text-align:left}
/* navigation interne */
.mode-subnav-wrap{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:12px;min-height:49px;margin:0 0 12px;padding:0 0 11px;border-bottom:1px solid #e1e9ef;flex:0 0 auto}.mode-subnav-wrap::after{content:"";width:110px}.home-mini{justify-self:start;margin:0;padding:8px 11px;border:1px solid #cfdce5;background:#f6f9fb;color:#51697b;border-radius:10px;font-weight:800;min-width:96px}.mode-subnav{justify-self:center;display:flex;gap:5px;padding:4px;background:#edf3f7;border-radius:12px}.mode-subnav button{border:0;background:transparent;color:#657989;border-radius:9px;padding:7px 13px;font-weight:800;font-size:.86rem;min-width:64px}.mode-subnav button.active{color:#fff;box-shadow:0 2px 7px #1d36452a}.mode-subnav button[data-mode-link="tuto"].active{background:var(--purple)}.mode-subnav button[data-mode-link="guided"].active{background:var(--blue)}.mode-subnav button[data-mode-link="custom"].active{background:var(--green)}
/* Tuto */
.root-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px;margin:4px 0 9px;border:1px solid #cfe5e1;border-radius:14px;background:#f6fbfa;text-align:left}.root-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.root-label{width:100%;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:850;color:#357d75}.root-copy strong{font-size:1.05rem;color:var(--navy)}.root-copy small{color:var(--muted)}.root-choice{display:flex;gap:6px;flex-wrap:wrap}.root-choice button{min-width:44px;padding:7px 10px;border:1px solid #a8d6d0;border-radius:10px;background:#fff;color:#24786f;font-weight:850}.root-choice button.selected{background:var(--teal);border-color:var(--teal);color:#fff}.tuto-nav{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:0 0 8px}.tuto-nav button{--cad:#6b7f90;--soft:#f4f7f9;padding:8px 5px;border:1px solid color-mix(in srgb,var(--cad) 35%,white);border-radius:10px;background:var(--soft);color:var(--cad);font-weight:850;font-size:.82rem}.tuto-nav button[data-chord="M"]{--cad:#278f63;--soft:#eef9f3}.tuto-nav button[data-chord="m"]{--cad:#2476b8;--soft:#eef7ff}.tuto-nav button[data-chord="dim"]{--cad:#c27b12;--soft:#fff7e9}.tuto-nav button[data-chord="aug"]{--cad:#7657c8;--soft:#f5f1ff}.tuto-nav button[data-chord="7"]{--cad:#d65349;--soft:#fff0ee}.tuto-nav button.selected{background:var(--cad);border-color:var(--cad);color:#fff}.tuto-detail{--cad:#2476b8;border:1px solid color-mix(in srgb,var(--cad) 25%,white);border-radius:16px;padding:12px 14px;background:linear-gradient(145deg,#fff,#f8fbfd)}.tuto-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(430px,1.25fr);grid-template-areas:"title visual" "ear visual" "stack visual" "compare listen";gap:6px 18px;align-items:center}.tuto-title{grid-area:title;text-align:left}.tuto-title h3{margin:0;font-size:1.32rem}.tuto-title p{margin:4px 0;color:var(--muted);font-size:.88rem}.ear-note{grid-area:ear;text-align:left;padding:8px 10px;border-radius:10px;background:#fff7e8;border-left:4px solid #ffc247;color:#5f4c24;font-size:.88rem;line-height:1.35}.third-stack{grid-area:stack;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.third-stack span{padding:6px 9px;border-radius:9px;background:#eaf3fb;color:var(--navy);font-weight:800;font-size:.82rem}.third-stack b{color:#90a0ad}.tuto-visual{grid-area:visual}.notation{width:100%;height:145px;background:#fff;border:1px solid #dfe4ea;border-radius:10px;overflow:hidden}.note-names{text-align:center;color:var(--navy);font-weight:850;margin:4px 0 0}.compare-box{grid-area:compare;text-align:left;color:var(--muted);font-size:.83rem}.compare-box strong{display:block;color:var(--navy);margin-bottom:3px}.tuto-listen{grid-area:listen;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.tuto-listen button,.listen-row button{border:0;border-radius:10px;padding:9px 14px;font-weight:850}.listen-main{background:var(--blue);color:#fff}.listen-secondary{background:#fff0d6;color:#94600e;border:1px solid #e9c26f!important}.tip{margin-top:8px;background:#fff8e1;border-left:5px solid #ffc247;padding:8px 11px;text-align:left;border-radius:8px;color:#5d4c24;font-size:.84rem}
/* Guidé */
.guided-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}.guided-step{--step:#1769c2;--soft:#eff7ff;appearance:none;width:100%;min-height:150px;border:1px solid color-mix(in srgb,var(--step) 28%,white);border-top:4px solid var(--step);border-radius:17px;background:linear-gradient(155deg,#fff,var(--soft));display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px;color:inherit;text-align:left;transition:.14s}.guided-step:hover{transform:translateY(-2px);box-shadow:0 10px 20px color-mix(in srgb,var(--step) 13%,transparent)}.step-1{--step:#2476b8;--soft:#eff7ff}.step-2{--step:#c27b12;--soft:#fff7e9}.step-3{--step:#d65349;--soft:#fff3f1}.step-4{--step:#7657c8;--soft:#f5f1ff}.step-number{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--step);color:#fff;font-weight:900}.guided-copy{display:flex;flex-direction:column;gap:4px}.guided-copy strong{color:var(--navy);font-size:1rem}.guided-copy small{color:var(--step);font-weight:800}.guided-desc{display:block;margin-top:4px;color:var(--muted);font-size:.84rem;line-height:1.36}.step-open{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--step) 11%,white);color:var(--step);font-size:1.2rem;font-weight:900}
/* À la carte */
.preset-row{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 10px}.preset-row button{border:1px solid #cbdde7;background:#f7fafc;color:#48647a;border-radius:9px;padding:7px 10px;font-weight:800;font-size:.8rem}.preset-row button.active{background:#eaf8f0;border-color:#80c9a4;color:#19704a}.direct-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.chord-option{--cad:#5c7c98;--soft:#f5f8fa;display:flex;align-items:center;gap:10px;padding:11px;border:2px solid color-mix(in srgb,var(--cad) 25%,white);border-radius:12px;background:var(--soft);cursor:pointer;text-align:left}.chord-option:has(input:checked){border-color:var(--cad);box-shadow:0 0 0 2px color-mix(in srgb,var(--cad) 10%,transparent)}.chord-option input{width:19px;height:19px;accent-color:var(--cad)}.chord-option span{display:flex;flex-direction:column}.chord-option strong{color:var(--navy)}.chord-option small{color:var(--muted);margin-top:2px}.selection-status{min-height:24px;margin-top:8px;font-weight:750;color:#25823a}.selection-status.warning{color:#d32f2f}.start-custom{align-self:center;margin-top:4px}.primary-action{border:0;border-radius:10px;padding:11px 19px;font-weight:850;color:#fff;background:linear-gradient(180deg,#ff7568,var(--coral));min-width:180px}.primary-action:disabled,.secondary-action:disabled{opacity:.48;cursor:default}
/* Exercice */
#game.show,#results.show{height:100%}.topbar,.hud{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar{margin:0 0 4px;min-height:32px}.pill{background:#eef3f7;border-radius:999px;padding:6px 10px;font-weight:800;color:var(--navy)}#game>h2{text-align:center;margin:4px 0 5px;min-height:34px}.progress{height:10px;background:#e5ebef;border-radius:999px;overflow:hidden;flex:1}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green))}.listen-row{display:flex;justify-content:center;margin:9px 0}.play{background:var(--blue);color:#fff;min-width:230px}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:9px auto;width:min(100%,780px);min-height:52px}.answers button{--cad:#5480a3;--soft:#f2f7fb;width:100%;padding:11px;border:2px solid color-mix(in srgb,var(--cad) 36%,white);border-radius:10px;background:var(--soft);color:var(--navy);font-weight:850}.answers button.answer-ok,.answers button.correct-answer{background:#2f945f!important;border-color:#2f945f!important;color:#fff!important;opacity:1!important}.answers button.answer-no{background:#c85a55!important;border-color:#c85a55!important;color:#fff!important;opacity:1!important}.correction-stage{min-height:290px;display:grid;grid-template-rows:210px 35px 48px;align-content:start;border-top:1px solid #edf2f5;padding-top:6px;width:min(100%,820px);margin:0 auto}.visual-answer{min-height:210px;padding:7px;border-radius:12px;background:#f9fbfc;border:1px solid #e3ebf0;transition:.16s}.visual-answer.placeholder{background:#fbfcfd;border-color:#edf2f5}.visual-answer.placeholder .notation{display:flex;align-items:center;justify-content:center;border-style:dashed;color:#9aabba}.notation-placeholder{color:#9aabba;font-weight:700}.chord-name{text-align:center;font-size:1.12rem;font-weight:900;color:var(--blue);margin-bottom:4px}.visual-answer.placeholder .chord-name{color:#8ca0b2}.visual-answer .notation{height:125px}.note-names.hint{color:#7d8f9f;font-weight:700}.construction-line{text-align:center;color:#667784;font-size:.82rem;font-weight:750;min-height:18px}.feedback{min-height:35px;text-align:center;font-size:.95rem;font-weight:800;padding:5px}.feedback.no{color:#c54b42}.feedback.neutral{color:#7b8d9d;font-weight:700}.feedback.empty{color:transparent}.action-slot{min-height:48px;display:flex;justify-content:center;gap:10px;align-items:center}.replay{border:0;border-radius:10px;padding:10px 15px;font-weight:850;background:#2daf70;color:#fff;min-width:150px}.primary-action.pending{opacity:.5}
/* Résultats */
#results.show{position:relative;overflow-y:auto;overscroll-behavior:contain}.result-layout{width:min(100%,860px);margin:6px auto 0;display:grid;gap:12px;padding:2px 2px 10px}.award-card{--award:#d9a514;--award-soft:#fff8d9;position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"badge kicker reveal" "badge title reveal" "badge message details";align-items:center;column-gap:14px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--award) 35%,white);border-radius:17px;background:linear-gradient(135deg,#fff,var(--award-soft));overflow:hidden}.award-card[data-award="2"]{--award:var(--silver);--award-soft:#f0f3f5}.award-card[data-award="1"]{--award:var(--bronze);--award-soft:#fff0e6}.award-card[data-award="0"]{--award:#738391;--award-soft:#f3f6f8}.award-card .section-eyebrow{grid-area:kicker;color:var(--award)}.award-badge{grid-area:badge;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff 0 8%,color-mix(in srgb,var(--award) 55%,white) 15%,var(--award) 70%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.4),0 6px 14px color-mix(in srgb,var(--award) 22%,transparent)}.award-badge span{font-size:2.1rem;color:#fff;font-weight:900}.award-title{grid-area:title;font-size:1.5rem;color:var(--award);font-weight:950}.award-message{grid-area:message;margin:2px 0;color:#506779;font-size:.86rem}.score-reveal{grid-area:reveal;align-self:center;border:1px solid color-mix(in srgb,var(--award) 45%,white);border-radius:11px;background:#fff;color:var(--navy);min-height:42px;padding:0 14px;font-weight:900}.score-details{grid-area:details;display:flex;gap:8px;align-items:center;justify-content:flex-end}.score-details strong,.score-details span,.score-details small{padding:5px 8px;border-radius:9px;background:#fff}.score-details strong{color:var(--award);font-size:1.04rem}.score-details span{font-weight:900;color:var(--navy)}.score-details small{color:var(--muted)}.result-send{padding:12px 14px;border:1px solid #cfe3d8;border-radius:15px;background:linear-gradient(135deg,#f8fcfa,#f2faf6)}.result-send-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.result-send-head h3{margin:2px 0 4px;color:var(--navy);font-size:1.02rem}.result-send-head p{margin:0;max-width:620px;color:var(--muted);font-size:.8rem;line-height:1.4}.result-send-open,.result-send-submit{border:1px solid #2da76b;border-radius:11px;background:#ecfaf2;color:#08723e;font-weight:900;min-height:40px;padding:0 15px;white-space:nowrap}.result-send-form{margin-top:10px;padding-top:10px;border-top:1px solid #d9e9e0}.result-send-preview{display:grid;gap:3px;margin-bottom:9px;padding:9px 11px;border-radius:11px;background:#fff;border:1px solid #dce8ee;color:#34516b;font-size:.78rem;line-height:1.35}.result-send-preview strong{color:var(--navy)}.result-send-preview small{color:#64798c}.result-send-fields{display:grid;grid-template-columns:1.35fr .75fr 1fr;gap:9px}.result-send-fields label{display:grid;gap:4px;color:#294864;font-size:.72rem;font-weight:850}.result-send-fields input{width:100%;height:38px;border:1px solid #cbdde8;border-radius:10px;background:#fff;padding:0 10px;color:var(--navy)}.result-send-consent{display:flex;align-items:center;gap:7px;margin-top:8px;color:#36516c;font-size:.76rem}.result-send-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.result-send-cancel{border:1px solid #cadce7;border-radius:11px;background:#fff;color:#36516c;font-size:.8rem;font-weight:850;min-height:38px;padding:0 14px}.result-send-submit{background:#1f9e62;color:#fff;border-color:#1f9e62;min-width:112px}.result-send-status{min-height:16px;margin:6px 0 0;text-align:right;color:#64798c;font-size:.75rem;font-weight:750}.result-send-status[data-kind="success"]{color:#08723e}.result-send-status[data-kind="error"]{color:#b6493e}.result-actions{display:flex;justify-content:center}.result-actions #again{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:10px 16px;font-weight:850;min-width:180px}.award-celebration{--award:#c89517;position:absolute;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at center,color-mix(in srgb,var(--award) 16%,white),rgba(255,255,255,.30) 42%,transparent 70%);opacity:0}
.award-celebration[hidden]{display:none!important}
.award-celebration[data-award="3"]{--award:#c89517}.award-celebration[data-award="2"]{--award:#8797a4}.award-celebration[data-award="1"]{--award:#ad6840}
.award-celebration.play{animation:accAwardScene 1.55s ease both}
.award-celebration .core{position:absolute;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--award) 58%,white),var(--award));color:#fff;font-size:2.7rem;font-weight:950;box-shadow:0 10px 30px color-mix(in srgb,var(--award) 28%,transparent);animation:accAwardCore .92s cubic-bezier(.18,.85,.22,1.12) .08s both}
.award-celebration .ring{position:absolute;width:132px;height:132px;border:3px solid color-mix(in srgb,var(--award) 45%,transparent);border-radius:50%;opacity:0}.award-celebration .r2{width:172px;height:172px}
.award-celebration.play .ring{animation:accAwardRing 1.12s ease-out .28s both}.award-celebration.play .r2{animation-delay:.4s}
.award-celebration i{position:absolute;color:var(--award);font-size:1.45rem;font-style:normal;font-weight:950;opacity:0}.award-celebration .n1{transform:translate(-86px,-68px)}.award-celebration .n2{transform:translate(92px,-56px)}.award-celebration .n3{transform:translate(-98px,50px)}.award-celebration .n4{transform:translate(94px,56px)}.award-celebration .n5{transform:translate(0,92px)}.award-celebration.play i{animation:accAwardNote .78s ease-out .48s both}
@keyframes accAwardScene{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}@keyframes accAwardCore{0%{opacity:0;transform:scale(.35) rotate(-18deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1)}}@keyframes accAwardRing{0%{opacity:0;transform:scale(.55)}30%{opacity:.85}100%{opacity:0;transform:scale(1.45)}}@keyframes accAwardNote{0%{opacity:0;scale:.4}40%{opacity:1;scale:1.15}100%{opacity:0;scale:.85}}
@media(prefers-reduced-motion:reduce){.award-celebration.play,.award-celebration.play *{animation:none!important}.award-celebration.play{opacity:0}}
@media(max-width:760px){body{padding:8px 7px 22px}.module-titlebar{min-height:58px}.module-logo{width:36px;height:36px}.section{padding:15px;border-radius:17px}.mode-subnav-wrap{grid-template-columns:1fr;gap:8px;min-height:0}.mode-subnav-wrap::after{display:none}.mode-subnav{justify-self:stretch;display:grid;grid-template-columns:repeat(3,1fr)}.screen-heading{min-height:0;flex-basis:auto}.root-panel{align-items:flex-start;flex-direction:column}.root-choice{justify-content:flex-start}.tuto-nav{grid-template-columns:repeat(3,1fr)}.guided-steps{grid-template-columns:1fr}.guided-step{min-height:108px}.direct-choice{grid-template-columns:1fr}.answers{grid-template-columns:1fr}.correction-stage{min-height:0;display:block;border-top:0;padding-top:0}.visual-answer{min-height:0}.visual-answer .notation{height:150px}.shortcut-help{display:none!important}.award-card{grid-template-columns:58px 1fr;grid-template-areas:"badge kicker" "badge title" "message message" "reveal reveal" "details details";padding:13px}.award-badge{width:56px;height:56px}.score-reveal{width:100%;margin-top:5px}.score-details{justify-self:stretch;justify-content:center;flex-wrap:wrap}.result-send-head{align-items:flex-start;flex-direction:column}.result-send-open{width:100%}.result-send-fields{grid-template-columns:1fr}.result-send-actions>*{flex:1}.result-send-status{text-align:left}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* ===== Chiffrage d’accords : extension du langage visuel Accords/Cadences ===== */
:root{--bach:#9a5b31;--bach2:#704225;--fig:#6e57c7;--figsoft:#f5f1ff}
.module-panel{min-height:min(760px,calc(100vh - 112px))}
.chiffrage-home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.chiffrage-home-grid .mode-card{min-height:156px;padding:17px;grid-template-columns:46px 1fr auto;gap:12px}
.chiffrage-home-grid .mode-icon{width:46px;height:46px}
.mode-bach{background:linear-gradient(145deg,var(--bach),var(--bach2))}
.chiffrage-subnav-wrap{grid-template-columns:110px 1fr 110px}
.chiffrage-subnav{grid-template-columns:repeat(4,auto)}
.mode-subnav button[data-mode-link="practice"].active{background:var(--blue)}
.mode-subnav button[data-mode-link="challenges"].active{background:var(--green)}
.mode-subnav button[data-mode-link="bach"].active{background:var(--bach)}
.chiffrage-tuto-nav{grid-template-columns:repeat(6,1fr);margin-bottom:10px}
.chiffrage-tuto-nav button{min-height:46px;font-size:.78rem;line-height:1.15;display:grid;place-items:center}
.chiffrage-tuto-nav button[data-step="1"]{--cad:#2476b8;--soft:#eef7ff}
.chiffrage-tuto-nav button[data-step="2"]{--cad:#278f84;--soft:#eefaf8}
.chiffrage-tuto-nav button[data-step="3"]{--cad:#7657c8;--soft:#f5f1ff}
.chiffrage-tuto-nav button[data-step="4"]{--cad:#d65349;--soft:#fff2ef}
.chiffrage-tuto-nav button[data-step="5"]{--cad:#c27b12;--soft:#fff7e8}
.chiffrage-tuto-nav button[data-step="6"]{--cad:#2d8a61;--soft:#eef9f3}
.chiffrage-tuto-nav button.selected{background:var(--cad);border-color:var(--cad);color:#fff}
.chiffrage-tuto-detail{padding:13px 15px;min-height:330px}
.fig-tuto-layout{display:grid;grid-template-columns:minmax(245px,.72fr) minmax(430px,1.28fr);grid-template-areas:"copy score" "rule score" "mini actions";gap:10px 20px;align-items:center}
.fig-tuto-copy{grid-area:copy;text-align:left}.fig-tuto-copy h3{font-size:1.32rem;margin:0 0 5px}.fig-tuto-copy p{margin:0;color:var(--muted);line-height:1.42}
.fig-rule{grid-area:rule;padding:10px 12px;border-radius:11px;background:#fff8e6;border-left:4px solid #efb63e;text-align:left;color:#5f4b22;line-height:1.4}
.fig-mini{grid-area:mini;display:flex;gap:7px;flex-wrap:wrap}.fig-mini span{padding:7px 10px;border-radius:10px;background:#eef5fa;color:var(--navy);font-weight:850;font-size:.84rem}.fig-mini b{display:inline-grid;place-items:center;color:#8193a2}
.fig-score-wrap{grid-area:score;position:relative}.fig-score{height:230px!important;background:#fff}.fig-caption{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:5px;color:#607486;font-size:.82rem;font-weight:750}.fig-caption strong{color:var(--fig)}
.fig-actions{grid-area:actions;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.fig-actions button{border:1px solid #ccdce7;border-radius:10px;background:#fff;color:#425f77;padding:9px 13px;font-weight:850}.fig-actions .primary-action{border-color:var(--blue);background:var(--blue);color:#fff}
.figure-stack{display:inline-grid;grid-auto-rows:1em;align-items:center;justify-items:center;line-height:.8;font-variant-numeric:tabular-nums}.figure-stack .line{height:1em}.figure-stack .slash{font-size:.78em;opacity:.7}

.chiffrage-level-grid{grid-template-columns:repeat(3,1fr);gap:11px}
.chiffrage-level-grid .guided-step{min-height:142px}
.chiffrage-level-grid .guided-step:nth-child(5){--step:#9a5b31;--soft:#fff5ee}
.chiffrage-level-grid .guided-step:nth-child(6){--step:#2d8a61;--soft:#eef9f3}
.level-figure{display:inline-flex;align-items:center;gap:5px;color:var(--step);font-weight:950;font-size:.94rem}
.challenge-medal{display:inline-flex;align-items:center;gap:4px;color:#7b8b98;font-size:.75rem;font-weight:850}

.game-mode-nav{grid-template-columns:110px 1fr 110px}.game-mode-nav::after{content:"";width:110px}
.game-mode-label{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:1px;color:#6b7d8c}.game-mode-label span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850}.game-mode-label strong{font-size:.92rem;color:var(--navy)}
.game-hint{text-align:center;margin:0 auto 7px;color:var(--muted);font-size:.88rem;min-height:20px}
.chiffrage-game-notation{height:250px;max-width:850px;margin:0 auto;background:#fff}
.figure-display{min-height:42px;display:flex;align-items:center;justify-content:center;gap:11px;margin:5px auto 0;color:#7c8e9e;font-size:.85rem;font-weight:800}
.figure-display .bass-chip,.figure-display .figure-chip,.figure-display .degree-chip{padding:7px 11px;border-radius:10px;background:#f5f8fa;border:1px solid #dce6ed;color:var(--navy)}
.figure-display .figure-chip{background:var(--figsoft);border-color:#d9d0f5;color:var(--fig);font-size:1.02rem;font-weight:950}
.figure-display .degree-chip{background:#eef8f2;border-color:#c9e7d6;color:#24774f}
.chiffrage-answers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:820px;min-height:54px}
.chiffrage-answers button{min-height:49px;font-size:.94rem}.chiffrage-answers button .figure-stack{font-size:1.08rem}
.chiffrage-correction{min-height:120px;grid-template-rows:35px 38px 48px;border-top:0;padding-top:2px}
.correction-explain{min-height:34px;display:flex;align-items:center;justify-content:center;text-align:center;color:#617587;font-size:.84rem;line-height:1.35}
.primary-action{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:10px 16px;font-weight:850;min-width:180px}

.bach-heading{margin-bottom:9px}.bach-lab{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(430px,1.2fr);gap:13px;align-items:stretch}.bach-source-card,.bach-analysis-card{border:1px solid #dce7ee;border-radius:17px;padding:15px;background:linear-gradient(145deg,#fff,#f8fbfd);text-align:left}.bach-source-card{border-top:4px solid var(--bach)}.bach-analysis-card{border-top:4px solid var(--purple)}
.bach-source-head{display:flex;align-items:center;gap:11px}.bach-source-head>div{display:flex;flex-direction:column;gap:3px}.bach-source-head strong{color:var(--navy);font-size:1.04rem}.bach-source-head small{color:var(--muted)}.bach-badge{display:grid;place-items:center;min-width:72px;height:40px;border-radius:11px;background:#fff1e8;color:var(--bach);font-weight:950}.bach-source-card p,.bach-analysis-card p{color:var(--muted);font-size:.86rem;line-height:1.42}.bach-player-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.bach-player-row button{border-radius:10px;padding:9px 12px;font-weight:850}.bach-progress{height:8px;border-radius:99px;background:#e5edf2;overflow:hidden;margin-top:12px}.bach-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--bach),#d69a66)}.bach-time{text-align:right;color:#7b8c99;font-size:.75rem;margin-top:4px}.bach-score{height:155px!important}.bach-answer-row{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:8px 0}.bach-answer-row button{border:1px solid #d3dee6;background:#f7fafc;color:var(--navy);border-radius:10px;padding:9px;font-weight:850}.bach-answer-row button.answer-ok{background:#2f945f;color:#fff;border-color:#2f945f}.bach-answer-row button.answer-no{background:#c85a55;color:#fff;border-color:#c85a55}.bach-reveal{display:block;margin:5px auto 0}.bach-credits{margin-top:10px;padding:9px 12px;border:1px solid #e0e8ee;border-radius:12px;background:#fafcfd;color:#607486;font-size:.78rem}.bach-credits summary{cursor:pointer;color:var(--navy);font-weight:850}.bach-credits p{line-height:1.45;margin:7px 0 0}

/* notation VexFlow : éviter qu'un SVG trop large pousse l'interface */
.notation svg{display:block;max-width:100%}
.single-chord-score{display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.single-chord-score .single-chord-svg{flex:0 0 auto;margin:0 auto;max-width:none}
.notation.scrollable-score{overflow-x:auto;overflow-y:hidden}
.notation.scrollable-score svg{max-width:none!important;margin:0}


@media(max-width:980px){
  .chiffrage-home-grid{grid-template-columns:repeat(2,1fr)}
  .chiffrage-level-grid{grid-template-columns:repeat(2,1fr)}
  .bach-lab{grid-template-columns:1fr}
  .fig-tuto-layout{grid-template-columns:1fr;grid-template-areas:"copy" "rule" "score" "mini" "actions"}
  .fig-actions{justify-content:center}
}
@media(max-width:760px){
  .module-panel{min-height:0}.chiffrage-home-grid{grid-template-columns:1fr}.chiffrage-home-grid .mode-card{min-height:112px}
  .chiffrage-subnav-wrap{grid-template-columns:1fr}.chiffrage-subnav{grid-template-columns:repeat(4,1fr)}.chiffrage-subnav button{padding:7px 5px;font-size:.75rem;min-width:0}
  .chiffrage-tuto-nav{grid-template-columns:repeat(3,1fr)}.chiffrage-tuto-detail{min-height:0}.fig-score{height:175px!important}.fig-caption{gap:8px}
  .chiffrage-level-grid{grid-template-columns:1fr}.chiffrage-level-grid .guided-step{min-height:106px}
  .game-mode-nav{grid-template-columns:1fr;gap:7px}.game-mode-nav::after{display:none}.game-mode-label{justify-self:stretch;align-items:flex-start;padding-left:2px}
  .chiffrage-game-notation{height:225px}.chiffrage-answers{grid-template-columns:repeat(2,1fr)}.chiffrage-correction{display:grid;grid-template-rows:auto auto 48px}
  .bach-answer-row{grid-template-columns:1fr}.bach-player-row>*{flex:1 1 130px}.bach-score{height:170px!important}
}
@media(max-width:430px){
  .chiffrage-tuto-nav{grid-template-columns:repeat(2,1fr)}
  .chiffrage-answers{grid-template-columns:1fr}.figure-display{flex-wrap:wrap}.chiffrage-game-notation{height:165px}.fig-score{height:165px!important}.fig-caption{display:none}
}
.sensitive-figure{font-weight:950;letter-spacing:.01em}
/* Compactage smartphone : la zone de réponse et la correction restent visibles sans effet de grand saut. */
@media(max-width:430px){
  body{padding:8px 7px 12px}
  .module-titlebar{min-height:54px;padding:7px 10px;margin-bottom:7px;border-radius:15px}.module-logo{width:38px;height:38px}.module-titlecopy h1{font-size:1.45rem}.module-kicker{font-size:.66rem}
  .section{padding:11px 15px;border-radius:16px}
  #game .mode-subnav-wrap{min-height:58px;margin-bottom:7px;padding-bottom:7px;grid-template-columns:92px 1fr;align-items:center}.game-mode-nav::after{display:none}.game-mode-label{justify-self:end;align-items:flex-end;padding:0}.home-mini{min-width:92px;padding:7px 9px}
  #game .topbar{margin:0 0 4px}.pill{padding:5px 9px}.hud{margin-bottom:5px}
  #game h2{font-size:1.36rem;line-height:1.08;margin:4px 0}.game-hint{font-size:.79rem;line-height:1.2;margin-bottom:4px}
  .chiffrage-game-notation{height:165px}.fig-score{height:165px!important}.notation{border-radius:11px}
  .figure-display{min-height:32px;margin-top:2px}.figure-display .bass-chip,.figure-display .figure-chip,.figure-display .degree-chip{padding:5px 8px}
  .chiffrage-answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:0;margin:5px auto}.chiffrage-answers button{min-height:43px;padding:7px 5px;font-size:.82rem}
  .chiffrage-correction{grid-template-rows:auto auto 42px;min-height:92px}.correction-explain{font-size:.75rem;min-height:25px}.primary-action{min-width:160px;padding:8px 12px}
}
/* Les panneaux masqués restent réellement absents même lorsqu'un composant définit display:flex/grid. */
[hidden]{display:none!important}
.figure-display{height:42px;min-height:42px;overflow:visible}
@media(max-width:430px){.figure-display{height:34px;min-height:34px}}

/* Chiffrage V2 : le symbole et le degré de basse sont sous la portée, jamais sur la note. */
.figure-overlay,.bass-degree-overlay{pointer-events:none;user-select:none}
.bass-degree-overlay{font-family:"Segoe UI",Roboto,Arial,sans-serif}

/* Intégration au site Notalix : retour discret vers l’accueil général. */
.notalix-return{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 11px;border:1px solid #cfdde7;border-radius:10px;background:#f7fbfd;color:var(--navy);font-size:.78rem;font-weight:850;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .14s ease,background .14s ease,border-color .14s ease}
.notalix-return:hover{transform:translateY(-1px);background:#eef6fb;border-color:#abc8db}
.notalix-return:focus-visible{outline:3px solid #ffb52e;outline-offset:3px}
@media(max-width:520px){.notalix-return{padding:8px 9px;font-size:.7rem}}