: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;
  --perfect:#238b59;--perfect-soft:#edf9f2;--half:#c27b12;--half-soft:#fff7e9;
  --deceptive:#d65349;--deceptive-soft:#fff0ee;--plagal:#2476b8;--plagal-soft:#eef7ff;
}
*{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{font:inherit;cursor:pointer}
button:focus-visible,.cadence-option:focus-visible{outline:3px solid #ffb52e;outline-offset:3px}

.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,#dff1ff,#edf8ee);font-size:25px;color:var(--blue);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}.hidden{display:none!important}
h2,h3{color:var(--navy)}h2{font-size:1.55rem;margin:4px 0 6px}.mini{color:var(--muted);line-height:1.48;margin:0}.section-eyebrow{display:block;color:#738391;text-transform:uppercase;letter-spacing:.08em;font-size:.71rem;font-weight:850;margin-bottom:2px}

/* Accueil */
#home.show{display:block}.home-intro{max-width:790px;margin:4px auto 20px}.home-intro h2{font-size:1.72rem}
.mode-grid{display:grid;gap:14px}.mode-grid-three{grid-template-columns:repeat(3,1fr)}
.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}

/* Barre identique sur tous les écrans internes */
.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}.home-mini:hover{background:#edf3f7}
.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:hover{background:#fff}.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)}
.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>div{max-width:800px}

/* Tuto */
.tonality-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px;margin:5px 0 12px;border:1px solid #cfe5e1;border-radius:15px;background:#f6fbfa;text-align:left}
.tonality-copy{display:flex;flex-direction:column;gap:2px}.tonality-label{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;font-weight:850;color:#357d75}.tonality-copy strong{font-size:1.12rem;color:var(--navy)}.tonality-copy small{color:var(--muted);margin-top:2px}
.key-choice{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.key-choice button{min-width:46px;padding:8px 11px;border:1px solid #a8d6d0;border-radius:10px;background:#fff;color:#24786f;font-weight:850}.key-choice button:hover{background:#e8f7f4}.key-choice button.selected{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 3px 9px #2d9b8d28}
.tuto-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}.tuto-nav button{--cad:#6b7f90;--cad-bg:#f4f7f9;margin:0;padding:9px 7px;border:1px solid color-mix(in srgb,var(--cad) 35%,white);border-radius:10px;background:var(--cad-bg);color:var(--cad);font-weight:850;transition:transform .14s ease,background .14s ease,color .14s ease}.tuto-nav button:hover{transform:translateY(-1px)}.tuto-nav button[data-tutorial="perfect"]{--cad:var(--perfect);--cad-bg:var(--perfect-soft)}.tuto-nav button[data-tutorial="half"]{--cad:var(--half);--cad-bg:var(--half-soft)}.tuto-nav button[data-tutorial="deceptive"]{--cad:var(--deceptive);--cad-bg:var(--deceptive-soft)}.tuto-nav button[data-tutorial="plagal"]{--cad:var(--plagal);--cad-bg:var(--plagal-soft)}.tuto-nav button.selected{background:var(--cad);border-color:var(--cad);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--cad) 24%,transparent)}
.tuto-detail{--cad-accent:var(--plagal);--cad-soft:var(--plagal-soft);border:1px solid color-mix(in srgb,var(--cad-accent) 28%,white);border-radius:16px;padding:14px;background:linear-gradient(145deg,#fff,var(--cad-soft))}.tuto-detail[data-cadence="perfect"]{--cad-accent:var(--perfect);--cad-soft:#f2fbf6}.tuto-detail[data-cadence="half"]{--cad-accent:var(--half);--cad-soft:#fff9ef}.tuto-detail[data-cadence="deceptive"]{--cad-accent:var(--deceptive);--cad-soft:#fff4f2}.tuto-detail[data-cadence="plagal"]{--cad-accent:var(--plagal);--cad-soft:#f2f8fd}
.tuto-detail h3{font-size:1.35rem;margin:0;color:var(--cad-accent)}.explanation{max-width:720px;margin:6px auto 8px;line-height:1.42;color:#435767}.tuto-detail .cadence-focus{color:var(--cad-accent)}
.listening{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:8px}.listening button{padding:9px 15px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:850;box-shadow:0 3px 8px #1769c222}.listening .secondary-listen{background:#fff0d6;color:#9c620b;border:1px solid #eac26e;box-shadow:none}.listening .secondary-listen:hover{background:#ffe8bc}
.tip{margin-top:9px;background:#fff8e1;border-left:5px solid #ffc247;padding:9px 12px;text-align:left;border-radius:8px;color:#5d4c24}



/* Guidé : trois étapes vivantes mais cohérentes */
.guided-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:5px 0 0;flex:1}
.guided-step{--step:#1769c2;--step-soft:#eef6ff;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:17px;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(--step-soft));text-align:left;box-shadow:0 7px 16px #193f5910}
.guided-step.step-1{--step:#2476b8;--step-soft:#eff7ff}.guided-step.step-2{--step:#d65349;--step-soft:#fff3f1}.guided-step.step-3{--step:#6d57c7;--step-soft:#f5f1ff}
.step-number{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--step);color:#fff;font-weight:900;box-shadow:0 3px 8px color-mix(in srgb,var(--step) 28%,transparent)}
.guided-copy{display:flex;flex-direction:column;gap:4px}.guided-copy strong{color:var(--navy);font-size:1.05rem}.guided-copy small{color:var(--step);font-weight:800}.guided-copy p{margin:7px 0 0;color:var(--muted);font-size:.91rem;line-height:1.46}

/* À la carte */
.direct-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:5px 0 12px}.cadence-option{--cad:#6b7f90;--soft:#f7f9fb;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid color-mix(in srgb,var(--cad) 24%,white);border-radius:14px;padding:15px;background:var(--soft);cursor:pointer;transition:transform .12s ease,border-color .12s ease}.cadence-option:hover{transform:translateY(-1px)}.cadence-option[data-cadence="perfect"]{--cad:var(--perfect);--soft:var(--perfect-soft)}.cadence-option[data-cadence="half"]{--cad:var(--half);--soft:var(--half-soft)}.cadence-option[data-cadence="deceptive"]{--cad:var(--deceptive);--soft:var(--deceptive-soft)}.cadence-option[data-cadence="plagal"]{--cad:var(--plagal);--soft:var(--plagal-soft)}.cadence-option:has(input:checked){border-color:var(--cad);box-shadow:0 0 0 2px color-mix(in srgb,var(--cad) 12%,transparent)}.cadence-option input{width:20px;height:20px;accent-color:var(--cad);flex:none}.cadence-option span{display:flex;flex-direction:column}.cadence-option strong{font-size:1.02rem;color:var(--navy)}.cadence-option small{color:var(--muted);margin-top:3px}.selection-status{min-height:24px;font-weight:750;color:#25823a}.selection-status.warning{color:#d32f2f}

/* Exercice + bilan */
.primary-action,.play,#replayExample,#again{border:0;border-radius:10px;padding:11px 19px;font-weight:850;color:#fff}.primary-action{background:linear-gradient(180deg,#ff7568,var(--coral))}.play{background:var(--blue)}#replayExample,#again{background:var(--green)}button:disabled{opacity:.45;cursor:not-allowed}
#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}.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))}.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}.listen-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:9px 0}.listen-row button{min-width:220px;padding:10px 16px}.listen-end{background:#fff0d6;color:#94600e;border:1px solid #e9c26f;border-radius:10px;font-weight:850}
.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:9px auto;width:min(100%,760px);min-height:52px}.answers button{--cad:#5480a3;--soft:#f2f7fb;width:100%;margin:0;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[data-cadence="perfect"]{--cad:var(--perfect);--soft:var(--perfect-soft)}.answers button[data-cadence="half"]{--cad:var(--half);--soft:var(--half-soft)}.answers button[data-cadence="deceptive"]{--cad:var(--deceptive);--soft:var(--deceptive-soft)}.answers button[data-cadence="plagal"]{--cad:var(--plagal);--soft:var(--plagal-soft)}.answers button:hover{filter:brightness(.985)}
.correction-stage{width:min(100%,840px);margin:4px auto 0;position:relative}.visual-answer{background:transparent;border:0;border-radius:0;padding:0 8px;margin:0 auto;width:min(100%,800px);min-height:196px;opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}.cadence-name{font-size:1.12rem;font-weight:850;color:var(--blue);text-align:center;margin:0 0 3px}.notation{width:min(100%,760px);height:184px;margin:3px auto 4px;background:#fff;border:1px solid #dfe4ea;border-radius:10px;overflow:hidden}.notation svg{width:100%;height:100%}
#game .visual-answer{transition:background .16s ease,border-color .16s ease,opacity .16s ease,transform .16s ease}#game .visual-answer.placeholder{background:#fbfcfd;border-color:#edf2f5}#game .visual-answer.placeholder .cadence-name{color:#8ca0b2}#game .visual-answer.placeholder .notation{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fcfdfe,#f8fafc);border-style:dashed;border-color:#e6edf3}#game .visual-answer.placeholder .notation-placeholder{color:#9aabba;font-weight:700;font-size:.92rem;text-align:center;padding:18px}#game .visual-answer.placeholder .cadence-focus{color:#7f93a5}.cadence-focus{font-weight:900;color:#1565c0;margin:4px}.tonality{color:#667784;text-align:center}
.feedback{min-height:38px;font-size:.98rem;font-weight:800;padding:5px 8px;text-align:center;transition:opacity .16s ease}.feedback.ok{color:#25823a}.feedback.no{color:#d32f2f}.feedback.neutral{color:#6f8090;font-weight:700}.feedback.empty{color:transparent}.action-slot{min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px}.primary-action.pending{opacity:.55}.correction-stage.revealed .visual-answer{animation:correctionReveal .18s ease-out}@keyframes correctionReveal{from{opacity:.92;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.result{font-size:54px;font-weight:850;color:var(--blue);text-align:center}#results>h2{text-align:center;margin-top:20px}#results>p{text-align:center}.result+#message{max-width:650px;margin:8px auto 18px}.result~#again{align-self:center}

/* Partition */
.tuto-detail .notation{height:184px}
.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}

html[data-input-mode="gamepad"] .pad-focus,html[data-input-mode="keyboard"] .pad-focus{outline:4px solid rgba(255,181,46,.82)!important;outline-offset:3px!important;position:relative;z-index:2}
html[data-input-mode="gamepad"] .cadence-option.pad-focus,html[data-input-mode="keyboard"] .cadence-option.pad-focus{box-shadow:0 0 0 4px rgba(255,181,46,.36)}


.harmony-overlay .harmony-chip{stroke:none}.harmony-overlay .harmony-chip.preparation{fill:#edf1f4}
.harmony-overlay .harmony-chip.cadential{fill:#e8f2fd}
.harmony-overlay .harmony-degree{font:800 13px/1 "Segoe UI",sans-serif;dominant-baseline:middle;stroke:none}
.harmony-overlay .harmony-degree.preparation{fill:#687887}
.harmony-overlay .harmony-degree.cadential{fill:#1565c0}
.harmony-overlay .harmony-arrow{fill:#9aa9b5;font:800 15px/1 "Segoe UI",sans-serif;stroke:none}

/* PC : même cadre et mêmes repères d'une page à l'autre */
@media(min-width:901px){
  body{padding:10px 10px 11px}
  main{height:calc(100vh - 21px);min-height:650px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .module-titlebar{min-height:58px;padding:7px 13px;margin-bottom:8px;border-radius:16px}.module-logo{width:39px;height:39px;border-radius:12px;font-size:23px}.module-titlecopy h1{font-size:1.55rem}.module-kicker{font-size:.7rem}
  .section{padding:14px 18px;border-radius:18px;min-height:0;overflow:hidden}.screen.show{height:100%;min-height:0}
  .mode-subnav-wrap{margin:0 0 8px;padding-bottom:8px;min-height:43px}.home-mini{padding:6px 9px}.mode-subnav{padding:3px}.mode-subnav button{padding:6px 12px}
  .screen-heading{margin:0 0 7px;min-height:58px;flex-basis:58px}.screen-heading h2{font-size:1.32rem;margin:2px 0 3px}.screen-heading .mini{font-size:.89rem;line-height:1.34}.section-eyebrow{font-size:.66rem}
  #tuto .tonality-panel{padding:8px 12px;margin:4px 0 7px;border-radius:12px}.tonality-copy{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}.tonality-label{grid-column:1/-1;font-size:.66rem}.tonality-copy strong{font-size:1rem}.tonality-copy small{font-size:.77rem;margin:0}.key-choice button{padding:6px 10px;min-width:43px}
  #tuto .tuto-nav{margin:0 0 7px;gap:7px}.tuto-nav button{padding:7px 6px;font-size:.9rem}
  #tuto .tuto-detail{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(430px,1.35fr);grid-template-areas:"title visual" "explanation visual" "focus visual" "tonality listening";column-gap:18px;row-gap:3px;align-items:center;padding:10px 13px;min-height:190px}
  #tuto .tuto-detail h3{grid-area:title;font-size:1.24rem;align-self:end}.tuto-detail .explanation{grid-area:explanation;margin:2px 0 3px;line-height:1.32;font-size:.88rem;text-align:left}.tuto-detail .notation{height:184px;margin:0;align-self:stretch;width:100%}.tuto-detail .cadence-focus{grid-area:focus;margin:2px 0;text-align:left;font-size:.9rem}.tuto-detail .tonality{grid-area:tonality;text-align:left;font-size:.83rem}.tuto-detail .listening{grid-area:listening;margin:0;justify-content:flex-end;gap:7px}.tuto-detail .listening button{padding:8px 10px;font-size:.86rem}.tip{margin-top:7px;padding:7px 10px;font-size:.82rem}
  .guided-steps{align-items:stretch}.guided-step{min-height:235px}.direct-choice{margin-top:3px}
  #game .correction-stage{min-height:294px;display:grid;grid-template-rows:208px 38px 48px;align-content:start;border-top:1px solid #edf2f5;padding-top:6px}#game .visual-answer{min-height:208px;padding:0 6px}.correction-stage .cadence-name{margin-bottom:3px}#game .notation{height:154px}.feedback{min-height:38px;padding:4px}.action-slot{min-height:48px}
}
@media(min-width:901px) and (min-height:700px){body{height:100vh;overflow-y:hidden}}

@media(max-width:900px){.mode-grid-three{grid-template-columns:1fr}.mode-card{min-height:118px}.guided-steps{grid-template-columns:1fr}.guided-step{grid-template-columns:auto 1fr auto;align-items:center}.guided-copy p{display:none}.section{overflow:visible}.screen.show{height:auto}}
@media(max-width:760px){#game .correction-stage{min-height:0;display:block;border-top:0;padding-top:0}.correction-stage .feedback:empty{min-height:0;padding:0}body{padding:8px 7px 22px}.module-titlebar{min-height:58px;border-radius:14px}.module-logo{width:36px;height:36px}.section{padding:15px;border-radius:17px}.mode-card{min-height:116px;padding:16px}.mode-subnav-wrap{grid-template-columns:1fr;gap:8px;min-height:0}.mode-subnav-wrap::after{display:none}.home-mini{justify-self:start}.mode-subnav{justify-self:stretch;display:grid;grid-template-columns:repeat(3,1fr)}.mode-subnav button{padding:8px 6px}.screen-heading{min-height:0;flex-basis:auto;margin-bottom:12px}.tonality-panel{align-items:flex-start;flex-direction:column}.tonality-copy{display:flex}.key-choice{justify-content:flex-start}.tuto-nav{grid-template-columns:repeat(2,1fr)}.guided-step{grid-template-columns:auto 1fr}.direct-choice{grid-template-columns:1fr}.listen-row button{min-width:0;flex:1 1 210px}.answers{grid-template-columns:1fr}#game #visualAnswer.hidden{display:none!important}.visual-answer{min-height:0}.notation{height:204px}}

/* V13 — cartes Guidé compactes et navigation centrée sur l'action utile */
.guided-steps{flex:none;align-items:stretch;gap:12px}
.guided-step{
  appearance:none;width:100%;min-height:146px;border-width:1px;border-top-width:4px;
  grid-template-columns:auto 1fr auto;grid-template-rows:1fr;align-items:center;
  gap:12px;padding:15px 16px;cursor:pointer;color:inherit;font:inherit;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,filter .14s ease;
}
.guided-step:hover{transform:translateY(-2px);box-shadow:0 10px 20px color-mix(in srgb,var(--step) 13%,transparent);filter:saturate(1.03)}
.guided-step:active{transform:translateY(0)}
.guided-copy{min-width:0;align-self:center}
.guided-copy strong{font-size:1.04rem;line-height:1.2}
.guided-copy small{font-size:.87rem}
.guided-desc{display:block;margin-top:6px;color:var(--muted);font-size:.88rem;line-height:1.38}
.step-open{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--step) 11%,white);color:var(--step);font-size:1.25rem;font-weight:900;transition:transform .14s ease,background .14s ease,color .14s ease}
.guided-step:hover .step-open,.guided-step.pad-focus .step-open{transform:translateX(2px);background:var(--step);color:#fff}

html[data-input-mode="gamepad"] .guided-step.pad-focus,html[data-input-mode="keyboard"] .guided-step.pad-focus{outline-color:rgba(255,181,46,.9)!important;box-shadow:0 0 0 4px rgba(255,181,46,.22),0 10px 20px color-mix(in srgb,var(--step) 14%,transparent)}

/* Dans un exercice, l'écoute est une commande secondaire (Y/X), la réponse est la cible. */
#game .listen-row button:focus{outline:none}
#game .answers button.pad-focus{box-shadow:0 0 0 4px rgba(255,181,46,.26),0 5px 13px color-mix(in srgb,var(--cad) 17%,transparent)}

@media(min-width:901px){
  .guided-steps{margin-top:5px}
  .guided-step{min-height:146px}
  #guided .screen-heading{margin-bottom:10px}
}
@media(max-width:900px){
  .guided-step{min-height:112px;grid-template-columns:auto 1fr auto}
  .guided-desc{display:block}
}
@media(max-width:620px){
  .guided-step{padding:13px;min-height:105px}
  .guided-desc{font-size:.82rem}
  .step-open{width:28px;height:28px}
}

/* Partition mobile lisible */
@media(max-width:760px){
}

@media(max-width:760px){
  .notation{width:100%}
}


#game #gameTonality{min-height:28px}.cadence-meta{display:flex;align-items:center;justify-content:center;gap:7px;min-height:28px;color:#667784;font-size:.92rem;white-space:nowrap}.cadence-meta .cadence-focus{margin:0}.cadence-meta .meta-separator{color:#a7b3bc}.cadence-meta .hint{color:#7d8f9f;font-size:.88rem;white-space:normal}.correction-stage .action-slot .primary-action{min-width:180px}#replayExample{min-width:160px}.action-slot #replayExample:disabled{opacity:.38}

html[data-input-mode="gamepad"] button:disabled.pad-focus,html[data-input-mode="keyboard"] button:disabled.pad-focus{outline:none!important;box-shadow:none!important}

/* V27 — Bilan : récompense d'abord, score sur demande, envoi commun Notalix */
#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:#c89517;--award-soft:#fff7db;position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"badge kicker reveal" "badge title reveal" "badge message details";column-gap:16px;row-gap:3px;align-items:center;padding:16px 18px;border:1px solid color-mix(in srgb,var(--award) 42%,white);border-radius:18px;background:linear-gradient(135deg,var(--award-soft),#fff 66%);box-shadow:0 9px 22px color-mix(in srgb,var(--award) 10%,transparent)}
.award-card[data-award="3"]{--award:#c89517;--award-soft:#fff7d7}.award-card[data-award="2"]{--award:#8498a8;--award-soft:#f1f5f7}.award-card[data-award="1"]{--award:#b06b43;--award-soft:#fff0e6}.award-card[data-award="0"]{--award:#748a9b;--award-soft:#f3f7f9}
.award-card>.section-eyebrow{grid-area:kicker;color:var(--award);margin:0}.award-badge{grid-area:badge;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--award) 62%,white),var(--award));box-shadow:0 7px 18px color-mix(in srgb,var(--award) 25%,transparent);color:#fff}.award-badge span{font-size:2.25rem;font-weight:950;line-height:1}.award-title{grid-area:title;color:var(--navy);font-size:1.55rem;line-height:1.05}.award-message{grid-area:message;margin:3px 0 0;color:#5e7385;line-height:1.4;font-weight:650}.score-reveal{grid-area:reveal;align-self:center;border:1px solid color-mix(in srgb,var(--award) 45%,white);border-radius:12px;background:#fff;color:var(--award);font-weight:900;min-height:42px;padding:0 14px;white-space:nowrap}.score-reveal:hover{background:var(--award-soft)}.score-details{grid-area:details;justify-self:end;display:flex;align-items:baseline;gap:10px;padding:7px 10px;border-radius:11px;background:#fff;border:1px solid color-mix(in srgb,var(--award) 25%,white);color:var(--navy)}.score-details[hidden]{display:none!important}.score-details strong{font-size:1.22rem;color:var(--award)}.score-details span{font-size:1.05rem;font-weight:900}.score-details small{color:#718595;font-weight:750}
.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:inherit;font-weight:900;min-height:40px;padding:0 15px;cursor:pointer;white-space:nowrap}.result-send-open:hover,.result-send-submit:hover{background:#def6e9}.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.25fr .65fr 1fr 1fr;gap:9px}.result-send-fields label{display:grid;gap:4px;color:#294864;font-size:.72rem;font-weight:850}.result-send-fields label small{font-weight:600;color:var(--muted)}.result-send-fields input{width:100%;height:38px;border:1px solid #cbdde8;border-radius:10px;background:#fff;padding:0 10px;color:var(--navy);font:inherit;font-size:.82rem;outline:none}.result-send-fields input:focus{border-color:#2a79c9;box-shadow:0 0 0 3px rgba(42,121,201,.09)}.result-send-consent{display:flex;align-items:center;gap:7px;margin-top:8px;color:#36516c;font-size:.76rem}.result-send-consent input{accent-color:#2da76b}.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:inherit;font-size:.8rem;font-weight:850;min-height:38px;padding:0 14px;cursor:pointer}.result-send-submit{background:#1f9e62;color:#fff;border-color:#1f9e62;min-width:112px}.result-send-submit:hover{background:#178451}.result-send-submit:disabled{cursor:default;opacity:.68}.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-send-status[data-kind="pending"]{color:#246ea9}.result-actions{display:flex;justify-content:center}.result-actions #again{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:cadAwardScene 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:cadAwardCore .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:cadAwardRing 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:cadAwardNote .78s ease-out .48s both}
@keyframes cadAwardScene{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}@keyframes cadAwardCore{0%{opacity:0;transform:scale(.35) rotate(-18deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1)}}@keyframes cadAwardRing{0%{opacity:0;transform:scale(.55)}30%{opacity:.85}100%{opacity:0;transform:scale(1.45)}}@keyframes cadAwardNote{0%{opacity:0;scale:.4}40%{opacity:1;scale:1.15}100%{opacity:0;scale:.85}}
@media(max-width:700px){.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}.award-badge span{font-size:1.8rem}.award-title{font-size:1.28rem}.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(min-width:901px) and (max-height:760px){.result-layout{gap:8px;margin-top:2px}.award-card{padding:11px 14px;grid-template-columns:62px minmax(0,1fr) auto}.award-badge{width:58px;height:58px}.award-badge span{font-size:1.9rem}.award-title{font-size:1.32rem}.award-message{font-size:.82rem}.result-send{padding:9px 11px}.result-send-head p{font-size:.72rem}.result-send-open{min-height:36px}.result-actions #again{min-height:38px;padding-block:8px}}
@media(prefers-reduced-motion:reduce){.award-celebration.play,.award-celebration.play *{animation:none!important}.award-celebration.play{opacity:0}}

/* Intégration au site Notalix : retour discret vers l’accueil général. */

/* Le bandeau global porte désormais la navigation Retour. */
.mode-subnav-back-spacer{display:block;width:110px;min-width:0}
@media(max-width:760px){.mode-subnav-back-spacer{display:none}}