: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,.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:grid;
  grid-template-columns:1fr;
  gap:4px;
  min-width:290px;
  align-self:stretch;
  align-content:center
}
.root-label {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:850;
  color:#357d75
}
.root-names {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-height:24px
}
.root-copy strong {
  font-size:1.05rem;
  color:var(--navy)
}
.root-alias {
  font-size:1rem;
  font-weight:850;
  color:#6b79a2;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease
}
.root-alias.visible {
  opacity:1;
  visibility:visible
}
.root-copy small {
  color:var(--muted);
  min-height:19px
}
.root-choice {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  flex:1;
  max-width:395px
}
.root-choice button {
  min-width:0;
  height:36px;
  padding:7px 8px;
  border:1px solid #a8d6d0;
  border-radius:10px;
  background:#fff;
  color:#24786f;
  font-weight:850;
  white-space:nowrap
}
.root-choice button.selected {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff
}
.tuto-nav {
  display:grid;
  grid-template-columns:repeat(8,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;
  height:42px
}
.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-layout>* {
  min-width:0
}
.tuto-title {
  grid-area:title;
  text-align:left;
  min-height:72px
}
.tuto-title h3 {
  margin:0;
  font-size:1.32rem;
  min-height:38px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  flex-wrap:wrap
}
.tuto-title p {
  margin:4px 0;
  color:var(--muted);
  font-size:.88rem;
  min-height:22px
}
.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;
  min-height:24px
}
.note-names::before {
  content:"";
  display:inline-block;
  width:0;
  height:0
}
.compare-box {
  grid-area:compare;
  text-align:left;
  color:var(--muted);
  font-size:.83rem;
  min-height:58px
}
.compare-box strong {
  display:block;
  color:var(--navy);
  margin-bottom:3px;
  min-height:20px
}
.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:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin:9px auto;
  width:min(100%,780px);
  min-height:52px
}
.answers button {
  --cad:#5480a3;
  --soft:#f2f7fb;
  flex:0 1 252px;
  min-width:220px;
  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;
  text-align:center
}
.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[hidden] {
  display:none!important
}
.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.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 input {
  width:100%;
  height:38px;
  border:1px solid #cbdde8;
  border-radius:10px;
  background:#fff;
  padding:0 10px;
  color:var(--navy)
}
.result-recipient-help { margin:7px 0 0; color:#526b80; font-size:.74rem; font-weight:700; }
.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(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-copy {
    width:100%;
    min-width:0
  }
  .root-choice {
    width:100%;
    max-width:none;
    justify-content:flex-start
  }
  .tuto-nav {
    grid-template-columns:repeat(3,1fr)
  }
  .tuto-detail {
    padding:12px;
    overflow:hidden
  }
  .tuto-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "title"
      "ear"
      "stack"
      "visual"
      "compare"
      "listen";
    gap:9px;
    align-items:stretch
  }
  .tuto-title {
    min-height:0
  }
  .tuto-title h3,
  .tuto-title p,
  .compare-box,
  .compare-box strong {
    min-height:0
  }
  .tuto-visual,
  .tuto-visual .notation {
    width:100%;
    max-width:100%
  }
  .tuto-visual .notation {
    height:132px
  }
  .tuto-listen {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch
  }
  .tuto-listen button {
    min-width:0;
    width:100%;
    padding:10px 7px;
    white-space:normal
  }
  .guided-steps {
    grid-template-columns:1fr
  }
  .guided-step {
    min-height:108px
  }
  .direct-choice {
    grid-template-columns:1fr
  }
  .answers button {
    flex:1 1 100%;
    min-width:0
  }
  .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(max-width:430px) {
  .tuto-listen {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important
  }
}
/* Passerelle d'écriture : mêmes sons, notation classique ou notation jazz */
.notation-mode-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:4px 0 9px;
  padding:9px 12px;
  border:1px solid #d8d4ef;
  border-radius:13px;
  background:linear-gradient(135deg,#fbfaff,#f7f5ff);
  color:#475c72
}
.notation-mode-panel.compact {
  margin:0 auto 12px;
  max-width:760px
}
.notation-mode-panel>span {
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left
}
.notation-mode-panel strong {
  color:#433873;
  font-size:.88rem
}
.notation-mode-panel small {
  color:#728096;
  font-size:.78rem;
  line-height:1.35
}
.notation-mode-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:3px;
  background:#ece9f7;
  border-radius:10px;
  flex:none;
  min-width:286px
}
.notation-mode-switch button {
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6b6581;
  font-weight:850;
  padding:7px 11px;
  min-height:38px
}
.notation-mode-switch button.active {
  background:#6f57c7;
  color:#fff;
  box-shadow:0 2px 7px #4f3d9425
}
.jazz-symbol {
  display:inline-block;
  color:#553ca9;
  font-weight:950;
  letter-spacing:-.02em
}
.tuto-title h3 .jazz-symbol {
  font-size:1.34em;
  margin-right:9px
}
.tuto-title h3 small,.chord-name small {
  font-size:.62em;
  color:#6f8090;
  font-weight:800
}
.given-root {
  width:max-content;
  max-width:100%;
  margin:0 auto 7px;
  padding:5px 10px;
  border-radius:999px;
  background:#f1edff;
  color:#553ca9;
  font-size:.82rem;
  font-weight:850;
  border:1px solid #d7cef5
}
.given-root[hidden] {
  display:none!important
}
html[data-notation-mode="jazz"] .answers button {
  font-size:1.08rem;
  letter-spacing:.01em
}
.chord-name .jazz-symbol {
  font-size:1.18em;
  margin-right:5px
}
@media(max-width:760px) {
  .notation-mode-panel {
    align-items:flex-start;
    flex-direction:column
  }
  .notation-mode-switch {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .notation-mode-switch button {
    width:100%
  }
  .notation-mode-panel.compact {
    max-width:none
  }
  .given-root {
    font-size:.78rem
  }
  .root-choice {
    max-width:none;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .root-copy {
    min-width:0;
    width:100%
  }
  .root-names {
    min-height:22px
  }
}
/* Bascule Classique / Jazz pendant l’exercice, sans déplacement */
.game-notation-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  margin:1px auto 2px;
  color:#6e7f8e;
  font-size:.78rem;
  font-weight:850
}
.game-notation-row>span {
  text-transform:uppercase;
  letter-spacing:.055em
}
.game-notation-switch {
  min-width:286px
}
.given-root-slot {
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 2px
}
.given-root-slot .given-root {
  margin:0;
  transition:opacity .12s ease,visibility .12s ease
}
.given-root-slot .given-root.is-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.game-notation-row .notation-mode-switch button {
  min-height:34px;
  padding:5px 10px;
  font-size:.78rem
}
@media(max-width:760px) {
  .game-notation-row {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    width:100%;
    gap:7px
  }
  .game-notation-switch {
    min-width:0;
    width:100%
  }
  .given-root-slot {
    height:32px
  }
}

/* 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}}