:root {
  --navy: #0b2b66;
  --blue: #1769c2;
  --coral: #ff6758;
  --gold: #ffb52e;
  --green: #2da867;
  --ink: #23364a;
  --muted: #66758a;
  --bg: #eef5f8;
  --surface: #ffffff;
  --line: #d7e3ec;
  --soft-blue: #eef6ff;
  --soft-green: #f0faf5;
  --soft-orange: #fff7ed;
  --shadow: 0 12px 32px rgba(11, 43, 102, .10);
  --radius-lg: 20px;
  --radius-md: 15px;
  --page-pad: clamp(8px, 2vw, 22px);
  --content-max: 1100px;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  padding: var(--page-pad);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 181, 46, .13), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(23, 105, 194, .10), transparent 30rem),
    var(--bg);
}

button, input, select, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255, 181, 46, .72);
  outline-offset: 3px;
}

.nl-topbar {
  width: min(var(--content-max), 100%);
  min-height: 68px;
  margin: 0 auto clamp(10px, 1.8vw, 18px);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 7px 22px rgba(11,43,102,.08);
}

.nl-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.nl-note { color: var(--coral); font-size: 28px; line-height: 1; }
.nl-word { color: var(--navy); font-size: 22px; font-weight: 850; letter-spacing: .035em; }
.nl-by { color: var(--blue); font-size: 12px; font-weight: 750; font-style: italic; }
.nl-module {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.nl-site {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7d9e8;
  border-radius: 11px;
  background: #f7fbfe;
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.nl-site:hover { background: #e9f3fb; }

.it-page {
  width: min(var(--content-max), 100%);
  margin: 0 auto;
}

.it-view {
  padding: clamp(14px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
}

.it-intro {
  margin: 0 auto clamp(20px, 3vw, 34px);
  text-align: center;
}

.it-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.it-title-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0ee;
  color: var(--coral);
  font-size: 20px;
}

.it-intro h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.it-intro p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.5vw, 15px);
}

.it-pulse {
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.it-pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b8cad8;
}
.it-pulse i:first-child {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,103,88,.10);
}

.mode-selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 16px);
}

.mode-card {
  position: relative;
  min-width: 0;
  min-height: 190px;
  padding: clamp(18px, 2.6vw, 26px);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 12px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-md);
  background: var(--soft-blue);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(11,43,102,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mode-card[data-mode="progressive"] {
  border-top-color: var(--green);
  background: var(--soft-green);
}
.mode-card:hover,
.mode-card.selected {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11,43,102,.10);
}
.mode-card.selected::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(23,105,194,.18);
  border-radius: 11px;
  pointer-events: none;
}
.mode-card[data-mode="progressive"].selected::after { border-color: rgba(45,168,103,.24); }

.it-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  color: var(--blue);
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 5px 15px rgba(11,43,102,.07);
}
.mode-card[data-mode="progressive"] .it-card-icon { color: var(--green); }

.it-card-copy strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 24px);
}
.it-card-copy span {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.it-card-copy small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}
.it-card-action {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}
.mode-card[data-mode="progressive"] .it-card-action { color: #187749; }

.it-selection {
  margin-top: clamp(16px, 2.6vw, 28px);
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.it-selection-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.it-selection h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(18px, 2.2vw, 23px);
}
.it-selection p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.it-selection-count {
  display: inline-block;
  margin-left: 4px;
  color: var(--blue);
  font-weight: 800;
}

.interval-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.interval-card {
  flex: 0 1 calc((100% - 30px) / 4);
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.2;
  border: 2px solid #cfe0ec;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 3px 9px rgba(11,43,102,.04);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.interval-card:hover { transform: translateY(-1px); border-color: #8db8d8; background: #f6fbff; }
.interval-card.selected { background: var(--blue); border-color: var(--blue); color: #fff; }

.it-start-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

#start-game,
#play-interval {
  min-height: 48px;
  padding: 11px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,103,88,.20);
}
#start-game:hover:not(:disabled),
#play-interval:hover:not(:disabled) { filter: brightness(.97); transform: translateY(-1px); }
#start-game:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#play-interval { width: min(240px, 100%); }

.it-section-head {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
#return-to-index {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #c7d9e8;
  border-radius: 11px;
  background: #f7fbfe;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.it-section-title { text-align: center; }
.it-section-title h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(22px, 2.8vw, 30px);
}
.it-section-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.it-head-spacer { width: 105px; }

#game-container {
  padding: clamp(14px, 2.3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}

.it-game-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.it-kicker {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
#score {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #cfe0ec;
  border-radius: 999px;
  background: #f7fbfe;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
}

.speed-control {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(120px,1fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: var(--soft-blue);
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
}
.speed-control input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--blue); }
.speed-control .it-speed-slow,
.speed-control .it-speed-fast { color: var(--muted); font-size: 11px; font-weight: 700; }

.it-listen-area {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 6px 0 14px;
}
#play-interval:disabled { opacity: .55; cursor: wait; transform: none; }
.it-listen-hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }

#feedback {
  width: min(900px, 100%);
  height: 56px;
  margin: 10px auto 8px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  overflow: auto;
  color: var(--ink);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

#interval-options {
  width: min(900px, 100%);
  margin: 10px auto 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
#interval-options button {
  flex: 0 1 210px;
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  display: grid;
  place-items: center;
  border: 2px solid #a9c9e2;
  border-radius: 11px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(11,43,102,.04);
}
#interval-options button:hover:not(:disabled) { background: #eaf4fc; border-color: var(--blue); }
#interval-options button:disabled { opacity: .62; cursor: default; }
#interval-options button.is-correct,
#interval-options button.is-incorrect {
  position: relative;
  opacity: 1;
  padding-right: 34px;
}
#interval-options button.is-correct {
  border-color: #62b88a;
  background: #eaf8f1;
  color: #12683e;
}
#interval-options button.is-incorrect {
  border-color: #e98f88;
  background: #fff0ee;
  color: #a7342d;
}
#interval-options button.is-correct::after,
#interval-options button.is-incorrect::after {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 900;
}
#interval-options button.is-correct::after { content: "✓"; }
#interval-options button.is-incorrect::after { content: "✕"; }

.it-reveal {
  width: min(720px, 100%);
  height: 220px;
  margin: 12px auto 4px;
  padding: 10px 12px 8px;
  border: 1px solid #cfe0ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f3f8fc);
  overflow: hidden;
}
.it-reveal-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.it-reveal-placeholder > span:first-child { font-size: 18px; }
.it-reveal-content {
  height: 100%;
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr) 30px 44px;
  gap: 4px;
}
.it-reveal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}
.it-reveal-head strong { color: var(--navy); font-size: 12px; }
#interval-note-names { color: var(--muted); font-size: 12px; font-weight: 750; }
#interval-staff {
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
#interval-staff svg { display: block; width: 100%; height: auto; }
.it-replay-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#replay-interval {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #b9d2e5;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
#replay-interval:hover:not(:disabled) { background: #eef6fc; border-color: #8db8d8; }
#replay-interval:disabled { opacity: .55; cursor: wait; }
.it-reveal-error { margin: 25px 0; color: #bc3e34; font-size: 12px; text-align: center; }

.progress-container {
  width: min(800px, 100%);
  height: 9px;
  margin: 15px auto 0;
  border-radius: 999px;
  background: #e7eef3;
  overflow: hidden;
}
.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--coral);
  transition: width .25s ease;
}

#final-score {
  margin: 16px 0 0;
  color: var(--navy);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 850;
  text-align: center;
}
#end-game-options {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
#end-game-options > button,
#end-game-options form button,
#end-game-options div > button {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-weight: 780;
  cursor: pointer;
}
#end-game-options > div {
  flex-basis: 100%;
  width: min(640px, 100%);
  margin: 4px auto 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7fbfe;
}
#end-game-options input,
#end-game-options select {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #bfd3e2;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}


.it-story {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--gold);
  border-radius: 11px;
  background: var(--soft-orange);
}
.it-story strong { color: var(--navy); font-size: 13px; }
.it-story p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (min-width: 1000px) {
  .interval-card { flex-basis: calc((100% - 50px) / 6); }
}

@media (max-width: 760px) {
  .nl-topbar { min-height: 0; padding: 8px 9px; gap: 8px; }
  .nl-brand { white-space: normal; }
  .nl-module { display: none; }
  .nl-site { max-width: 46vw; min-height: 40px; padding: 7px 9px; font-size: 11px; line-height: 1.15; text-align: center; }
  .nl-note { font-size: 24px; }
  .nl-word { font-size: 19px; }
  .nl-by { font-size: 10px; }

  .mode-selection { grid-template-columns: 1fr; }
  .mode-card { min-height: 150px; }
  .interval-card,
  #interval-options button { flex-basis: calc(50% - 5px); }
  .it-section-head { grid-template-columns: auto minmax(0,1fr); }
  .it-head-spacer { display: none; }
  .it-section-title { text-align: right; }
  #end-game-options > div { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  body { padding: 7px; }
  .it-view { padding: 12px 10px; border-radius: 16px; }
  .it-intro { margin-bottom: 16px; }
  .it-title-icon { width: 30px; height: 30px; }
  .mode-card { min-height: 138px; padding: 15px; grid-template-columns: 46px minmax(0,1fr); gap: 10px 12px; }
  .it-card-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 23px; }
  .it-card-copy strong { font-size: 19px; }
  .it-card-copy span { font-size: 13px; }
  .it-card-copy small { font-size: 11px; }
  .interval-card { min-height: 54px; padding: 8px; font-size: 12px; }
  .it-selection { padding: 12px 10px; }
  .it-section-head { margin-bottom: 12px; gap: 8px; }
  #return-to-index { min-width: 86px; padding: 7px 9px; font-size: 12px; }
  .it-section-title h1 { font-size: 20px; }
  .it-section-title p { display: none; }
  #game-container { padding: 12px 9px; }
  .it-game-topline { margin-bottom: 10px; }
  .speed-control { grid-template-columns: 1fr; gap: 5px; text-align: center; }
  .speed-control .it-speed-slow, .speed-control .it-speed-fast { display: none; }
  #interval-options { gap: 7px; }
  #interval-options button { min-height: 46px; padding: 7px 6px; font-size: 11.5px; }
  #feedback { height: 64px; font-size: 14px; }
  .it-reveal { height: 205px; padding-inline: 6px; }
  .it-reveal-head { padding-inline: 5px; }
  #interval-staff { min-height: 0; }
}

@media (orientation: landscape) and (max-height: 620px) {
  body { padding-top: 5px; padding-bottom: 8px; }
  .nl-topbar { min-height: 48px; margin-bottom: 7px; padding-block: 5px; }
  .it-view { padding-top: 10px; padding-bottom: 10px; }
  .it-intro { margin-bottom: 12px; }
  .it-intro p, .it-pulse, .it-story { display: none; }
  .mode-card { min-height: 120px; padding-block: 12px; }
  .it-selection { margin-top: 10px; padding-block: 10px; }
  #game-container { padding-top: 10px; padding-bottom: 10px; }
  .speed-control { margin-bottom: 8px; padding-block: 7px; }
  .it-listen-area { margin-block: 3px 7px; }
  #feedback { height: 48px; margin-block: 4px; font-size: 13px; }
  #interval-options button { min-height: 40px; }
  .it-reveal { height: 180px; margin-top: 7px; padding-top: 6px; padding-bottom: 4px; }
  .it-reveal-content { grid-template-rows: 22px minmax(0,1fr) 28px 40px; gap: 2px; }
  #replay-interval { min-height: 34px; padding-block: 6px; }
  #interval-staff { min-height: 0; }
}

/* Commandes clavier / manette : composant autonome partagé par les écrans Intervalles. */
.it-input-hint {
  width: min(900px, 100%);
  margin: 14px auto 0;
  padding: 7px 11px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  border: 1px solid #e0e8ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #718295;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
.it-gamepad-state {
  color: #8a98a8;
  white-space: nowrap;
}
.it-gamepad-state[data-connected="true"] {
  color: #218150;
  font-weight: 800;
}
@media (max-width: 560px) {
  .it-input-hint {
    border-radius: 13px;
    gap: 4px 9px;
  }
  .it-input-hint > span:not(.it-gamepad-state) { display: none; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .it-input-hint { margin-top: 7px; padding-block: 5px; }
}


/* ===== Navigation clavier / manette : sélection explicite, indépendante du focus navigateur ===== */
html[data-input-mode="gamepad"] [data-nav-current="true"],
html[data-input-mode="keyboard"] [data-nav-current="true"] {
  outline: 3px solid rgba(255, 181, 46, .92);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 181, 46, .12), 0 7px 18px rgba(11, 43, 102, .10);
}
html[data-input-mode="gamepad"] .mode-card[data-nav-current="true"],
html[data-input-mode="keyboard"] .mode-card[data-nav-current="true"] {
  transform: translateY(-2px);
}
html[data-input-mode="gamepad"] .mode-card[data-nav-current="true"]::before,
html[data-input-mode="keyboard"] .mode-card[data-nav-current="true"]::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid var(--gold);
  border-radius: 18px;
  pointer-events: none;
}

/* ===== Mode Aventure : HUD jeu vidéo, compact et centré sur une seule vue ===== */
body.it-adventure-screen {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(6px, 1vh, 10px);
  padding: clamp(5px, 1.2vh, 12px) var(--page-pad);
}
.it-adventure-screen .nl-topbar {
  min-height: 54px;
  margin-bottom: 0;
  padding-block: 6px;
}
.it-adventure-screen .it-page {
  height: 100%;
  min-height: 0;
}
.it-adventure-view {
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.5vh, 15px) clamp(9px, 1.8vw, 18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(5px, .9vh, 9px);
  overflow: hidden;
}
.it-adventure-head {
  margin: 0;
  min-height: 44px;
}
.it-adventure-titleline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.it-adventure-badge {
  padding: 3px 7px;
  border: 1px solid #f0c45f;
  border-radius: 999px;
  background: #fff5d9;
  color: #855900;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.it-adventure-head .it-section-title h1 {
  font-size: clamp(20px, 2.4vw, 27px);
}
.it-adventure-head .it-section-title p {
  font-size: 12px;
}
.it-adventure-game {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: clamp(7px, 1.2vh, 12px) clamp(8px, 1.5vw, 15px) !important;
  display: grid;
  grid-template-rows: auto auto auto auto 38px auto minmax(105px, 1fr);
  align-content: stretch;
  gap: clamp(4px, .7vh, 7px);
  border-color: #c9dbe8 !important;
  background:
    linear-gradient(rgba(23,105,194,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,105,194,.025) 1px, transparent 1px),
    #fff !important;
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 24px rgba(11,43,102,.06);
}
.it-adventure-hud {
  display: grid;
  grid-template-columns: 1.1fr 1.55fr .8fr 1fr;
  gap: 7px;
}
.it-hud-block {
  min-width: 0;
  min-height: 52px;
  padding: 5px 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid #d7e4ec;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff, #f7fbfd);
  display: grid;
  align-content: center;
  justify-items: center;
  color: var(--navy);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(11,43,102,.05);
}
.it-hud-block::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #cfe0ec;
}
.it-hud-label {
  color: #708297;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.it-hud-block strong {
  font-size: 20px;
  line-height: 1;
}
.it-hud-level {
  justify-items: start;
  text-align: left;
  border-color: #bfd7ee;
  background: linear-gradient(135deg, #eef6ff, #f8fbff);
}
.it-hud-level::after { background: var(--blue); }
.it-hud-level > div {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.it-hud-level small {
  max-width: 100%;
  overflow: hidden;
  color: var(--blue);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-hud-mission {
  border-color: #ead8aa;
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.it-hud-mission::after { background: var(--gold); }
.it-hud-score {
  border-color: #cbd9e9;
  background: linear-gradient(135deg, #f5f8ff, #fff);
}
.it-hud-score::after { background: var(--navy); }
.it-hud-lives {
  border-color: #f2cbc8;
  background: linear-gradient(135deg, #fff2f0, #fff9f8);
}
.it-hud-lives::after { background: var(--coral); }
.it-hearts {
  color: #e44444;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3px;
  white-space: nowrap;
  filter: drop-shadow(0 2px 1px rgba(198,46,46,.12));
}
.it-hearts .is-empty { color: #d7a6a6; }
.it-hearts.is-hit { animation: itHeartHit .34s ease; }
@keyframes itHeartHit {
  35% { transform: scale(1.14); }
  65% { transform: translateX(-3px); }
  82% { transform: translateX(3px); }
}
.it-round-steps {
  width: min(220px, 100%);
  margin-top: 3px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
}
.it-round-step {
  height: 6px;
  border-radius: 999px;
  background: #dce6ed;
  box-shadow: inset 0 1px 2px rgba(11,43,102,.08);
}
.it-round-step.is-next {
  background: var(--gold);
  animation: itMissionPulse 1.15s ease-in-out infinite;
}
.it-round-step.is-correct { background: var(--green); }
.it-round-step.is-wrong { background: #e8665d; }
@keyframes itMissionPulse {
  50% { opacity: .55; transform: scaleY(.72); }
}
.it-level-path {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 1px 4px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  position: relative;
}
.it-level-path::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d4e1ea, #edf3f7);
  transform: translateY(-50%);
  box-shadow: inset 0 1px 2px rgba(11,43,102,.08);
}
.it-level-node {
  z-index: 1;
  width: 27px;
  height: 27px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 2px solid #c8d8e3;
  border-radius: 50%;
  background: #fff;
  color: #789;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(11,43,102,.08);
}
.it-level-node.is-current {
  border-color: var(--gold);
  background: #fff5d9;
  color: #8b5c00;
  box-shadow: 0 0 0 4px rgba(255,181,46,.16), 0 3px 8px rgba(139,92,0,.14);
  animation: itLevelPulse 1.6s ease-in-out infinite;
}
@keyframes itLevelPulse {
  50% { box-shadow: 0 0 0 7px rgba(255,181,46,.08), 0 3px 8px rgba(139,92,0,.14); }
}
.it-level-node.is-complete {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 3px 8px rgba(45,168,103,.20);
}
.it-adventure-speed {
  width: min(680px, 100%);
  margin-bottom: 0;
  padding: 7px 11px;
  gap: 7px 10px;
  border: 1px solid #d9e7f1;
  background: linear-gradient(180deg, #f4f9ff, #edf6ff);
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.it-adventure-speed input[type="range"] { margin: 0; }
.it-adventure-listen {
  margin: 0;
  gap: 3px;
}
.it-adventure-listen #play-interval {
  min-height: 42px;
  padding-block: 8px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 4px 0 #d84f43, 0 8px 18px rgba(255,103,88,.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.it-adventure-listen #play-interval:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #d84f43, 0 9px 20px rgba(255,103,88,.24);
}
.it-adventure-listen #play-interval:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d84f43, 0 4px 10px rgba(255,103,88,.18);
}
.it-adventure-listen .it-listen-hint {
  font-size: 10.5px;
}
.it-adventure-feedback {
  width: min(720px, 100%) !important;
  height: 38px !important;
  min-height: 38px;
  margin: 0 auto !important;
  padding: 3px 14px !important;
  overflow: hidden !important;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(247,251,254,.88);
  color: var(--navy) !important;
  font-size: clamp(12.5px, 1.6vw, 16px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.it-adventure-feedback[data-state="question"] {
  border-color: #cfe0ec;
  background: #f7fbfe;
}
.it-adventure-feedback[data-state="success"] {
  border-color: #9fd5b7;
  background: #effaf4;
  color: #12683e !important;
}
.it-adventure-feedback[data-state="danger"] {
  border-color: #f0b6b0;
  background: #fff2f0;
  color: #a7342d !important;
}
.it-adventure-feedback[data-state="victory"] {
  border-color: #e6c66e;
  background: #fff8df;
  color: #795300 !important;
}
/* Les réponses d'Aventure utilisent le flex commun : chaque ligne incomplète est centrée. */
.it-adventure-options {
  width: min(900px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 5px !important;
}
.it-adventure-options button {
  flex: 0 1 210px;
  max-width: 220px;
  min-height: 34px !important;
  padding: 5px 9px !important;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f9fcff);
  font-size: 11px !important;
  box-shadow: 0 3px 0 #d7e5ef, 0 4px 8px rgba(11,43,102,.04);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.it-adventure-options button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #b9d3e6, 0 6px 10px rgba(11,43,102,.07);
}
.it-adventure-options button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #b9d3e6;
}
.it-adventure-options button.is-correct {
  box-shadow: 0 3px 0 #91c9aa, 0 5px 10px rgba(45,168,103,.12);
}
.it-adventure-options button.is-incorrect {
  box-shadow: 0 3px 0 #e2aaa5, 0 5px 10px rgba(232,102,93,.10);
}
.it-adventure-reveal {
  height: auto;
  min-height: 105px;
  max-height: 170px;
  margin: 0 auto !important;
  padding: 6px 9px 4px;
  border-color: #c8dbe8;
  background: linear-gradient(180deg, #fbfdff, #f1f7fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.it-adventure-reveal .it-reveal-content {
  grid-template-rows: 24px minmax(0, 1fr) 22px;
  gap: 1px;
}
.it-adventure-reveal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.it-adventure-reveal .it-reveal-head strong,
.it-adventure-reveal #interval-note-names { font-size: 10.5px; }
.it-adventure-reveal #interval-note-names {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.it-adventure-replay {
  min-height: 25px !important;
  padding: 3px 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px !important;
}
.it-adventure-reveal #interval-staff {
  display: grid;
  place-items: center;
}
.it-adventure-reveal #interval-staff svg {
  max-height: 100%;
}
.it-adventure-victory {
  grid-column: 1 / -1;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: 10px;
  color: var(--navy);
  text-align: left;
}
.it-adventure-victory > span {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 32px;
}
.it-adventure-victory strong { font-size: 17px; }
.it-adventure-victory small { color: var(--muted); }
.it-input-hint--adventure {
  margin-top: 0;
  padding: 4px 9px;
  gap: 3px 12px;
  font-size: 9.5px;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .it-adventure-screen .nl-topbar { min-height: 46px; }
  .it-adventure-head { min-height: 38px; }
  .it-adventure-head .it-section-title p { display: none; }
  .it-adventure-game {
    grid-template-rows: auto auto auto auto 34px auto minmax(96px, 1fr);
    gap: 4px;
  }
  .it-adventure-hud {
    grid-template-columns: 1fr 1.2fr .8fr 1fr;
    gap: 4px;
  }
  .it-hud-block { min-height: 45px; padding: 4px 5px; }
  .it-hud-block strong { font-size: 17px; }
  .it-hud-level small { font-size: 8px; }
  .it-hud-label { font-size: 8px; }
  .it-level-node { width: 23px; height: 23px; font-size: 9px; }
  .it-adventure-speed { padding: 5px 8px; }
  .it-adventure-options button {
    flex: 0 1 calc((100% - 10px) / 3);
    max-width: none;
    min-height: 32px !important;
    font-size: 9.8px !important;
  }
  .it-adventure-reveal { min-height: 96px; max-height: 135px; }
  .it-input-hint--adventure > span:not(.it-gamepad-state) { display: none; }
  .it-input-hint--adventure { min-height: 18px; border: 0; background: transparent; }
}

@media (max-width: 430px) {
  body.it-adventure-screen { padding: 4px 6px; gap: 4px; }
  .it-adventure-screen .nl-topbar { padding: 4px 7px; }
  .it-adventure-screen .nl-site { display: none; }
  .it-adventure-screen .it-view { padding: 6px; }
  .it-adventure-head { gap: 5px; }
  .it-adventure-head #return-to-index { min-width: 72px; min-height: 34px; padding: 5px 7px; }
  .it-adventure-titleline { gap: 5px; }
  .it-adventure-badge { padding: 2px 5px; font-size: 6.5px; }
  .it-adventure-head .it-section-title h1 { font-size: 18px; }
  .it-adventure-game { padding: 5px !important; }
  .it-hud-level small { display: none; }
  .it-hearts { font-size: 18px; letter-spacing: 1px; }
  .it-level-node { width: 21px; height: 21px; border-width: 1.5px; }
  .it-adventure-speed { grid-template-columns: 1fr; gap: 2px; padding: 4px 7px; text-align: center; }
  .it-adventure-speed .it-speed-slow,
  .it-adventure-speed .it-speed-fast { display: none; }
  .it-adventure-speed input[type="range"] { grid-column: 1; }
  .it-adventure-listen .it-listen-hint { display: none; }
  .it-adventure-listen #play-interval { min-height: 38px; }
  .it-adventure-options { gap: 3px !important; }
  .it-adventure-options button {
    flex-basis: calc((100% - 6px) / 3);
    min-height: 30px !important;
    padding: 3px 4px !important;
    font-size: 9px !important;
    box-shadow: 0 2px 0 #d7e5ef;
  }
  .it-adventure-reveal { min-height: 90px; max-height: 120px; padding-inline: 4px; }
  .it-adventure-reveal .it-reveal-content { grid-template-rows: 22px minmax(0,1fr) 18px; }
  .it-adventure-reveal-head { gap: 3px; }
  .it-adventure-reveal #interval-note-names { font-size: 8.5px; }
  .it-adventure-replay { min-width: 28px; padding-inline: 5px !important; }
  .it-adventure-replay .it-replay-label { display: none; }
}

@media (max-height: 690px) {
  .it-adventure-screen .nl-topbar { min-height: 44px; }
  .it-adventure-screen .nl-module { display: none; }
  .it-adventure-view { padding-top: 6px; padding-bottom: 5px; gap: 4px; }
  .it-adventure-head { min-height: 34px; }
  .it-adventure-head .it-section-title p { display: none; }
  .it-adventure-game {
    grid-template-rows: auto auto auto auto 32px auto minmax(84px, 1fr);
    gap: 3px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .it-hud-block { min-height: 41px; }
  .it-level-node { width: 21px; height: 21px; }
  .it-adventure-speed { padding-block: 4px; }
  .it-adventure-listen #play-interval { min-height: 36px; padding-block: 5px; }
  .it-adventure-feedback { height: 32px !important; min-height: 32px; }
  .it-adventure-options button { min-height: 28px !important; }
  .it-adventure-reveal { min-height: 110px; max-height: 132px; }
  .it-input-hint--adventure { display: none; }
}

/* ===== Sens des intervalles + aide pédagogique ===== */
.it-direction-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2ebf2;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 14px;
}
.it-direction-copy h3 { margin: 0; color: var(--navy); font-size: 16px; }
.it-direction-copy p { margin: 3px 0 0; font-size: 12px; }
.it-direction-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.it-direction-card {
  min-height: 54px;
  padding: 7px 10px;
  border: 2px solid #cfe0ec;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.it-direction-card > span:last-child { display: grid; gap: 1px; }
.it-direction-card strong { font-size: 12px; }
.it-direction-card small { color: var(--muted); font-size: 10px; }
.it-direction-icon { font-size: 23px; font-weight: 900; color: var(--blue); }
.it-direction-card:hover { border-color: #8db8d8; background: #f6fbff; }
.it-direction-card.selected {
  border-color: var(--blue);
  background: #eaf4ff;
  box-shadow: inset 0 0 0 1px rgba(23,105,194,.08), 0 3px 9px rgba(23,105,194,.08);
}
.it-direction-card.selected strong,
.it-direction-card.selected .it-direction-icon { color: #0c5aa9; }

.it-start-row { gap: 9px; flex-wrap: wrap; }
.it-tutorial-link {
  min-height: 48px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9d2e5;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(11,43,102,.04);
}
.it-tutorial-link:hover { background: #f5faff; border-color: #8db8d8; }

.it-direction-badge,
.it-hud-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.it-direction-badge {
  margin-left: 6px;
  padding: 3px 7px;
  background: #eef6ff;
  color: #0c5aa9;
  font-size: 10px;
}
.it-hud-direction {
  margin-top: 2px;
  padding: 2px 6px;
  border: 1px solid #bfd7ee;
  background: #fff;
  color: #0c5aa9;
  font-size: 8.5px;
}
.it-hud-direction[data-direction="desc"] { border-color: #d7c5ed; color: #7144a1; background: #fbf7ff; }
.it-hud-direction[data-direction="both"] { border-color: #e6cf8c; color: #805a00; background: #fffaf0; }

.it-pedagogy-tip {
  min-width: 0;
  min-height: 26px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ecdba9;
  border-radius: 9px;
  background: #fffaf0;
  color: #684f13;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
}
.it-pedagogy-tip--adventure {
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: 8.8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .it-direction-section { grid-template-columns: 1fr; gap: 8px; }
  .it-direction-copy { text-align: center; }
}

@media (max-width: 430px) {
  .it-direction-picker { grid-template-columns: 1fr; }
  .it-direction-card { min-height: 44px; justify-content: flex-start; padding-inline: 14px; }
  .it-pedagogy-tip--adventure { font-size: 7.7px; padding-inline: 3px; }
}

/* Tutoriel d’oreille v5 : interface lisible, progression directe par cycle. */
.it-tutorial-screen { overflow-x:hidden; }
.it-tutorial-view { overflow:visible; padding:18px 20px 16px; }
.it-tutorial-head { margin-bottom:14px; }
.it-tutorial-head .it-section-title { min-width:0; }
.it-tutorial-titleline { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.it-tutorial-titleline h1 { margin:0; font-size:clamp(26px,2.5vw,34px); line-height:1.05; }
.it-tutorial-head .it-section-title > p { margin-top:6px; font-size:14px; line-height:1.35; }
.it-tutorial-badge,.it-tutorial-kicker { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }
.it-tutorial-badge { padding:6px 10px; border:1px solid #f0c765; background:#fff9e9; color:#805900; font-size:11px; box-shadow:0 2px 8px rgba(128,89,0,.06); }
.it-tutorial-kicker { color:var(--blue); font-size:11px; }

.it-cycle-picker { margin-bottom:14px; padding:15px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); align-items:center; gap:18px; border:1px solid #cfe0ec; border-radius:18px; background:linear-gradient(135deg,#f7fbff 0%,#fff 58%,#fff9e9 100%); box-shadow:0 5px 16px rgba(11,43,102,.05); }
.it-cycle-picker-copy { min-width:0; display:grid; gap:5px; }
.it-cycle-picker-copy > span { color:var(--blue); font-size:11px; font-weight:950; letter-spacing:.11em; }
.it-cycle-picker-copy strong { color:var(--navy); font-size:18px; line-height:1.2; }
.it-cycle-picker-copy small { color:var(--muted); font-size:13px; line-height:1.45; }
.it-cycle-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.it-cycle-buttons button { min-height:62px; padding:10px 9px; display:grid; place-items:center; gap:4px; border:2px solid #cbdde9; border-radius:14px; background:#fff; color:var(--navy); font-size:15px; font-weight:950; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.it-cycle-buttons button small { color:var(--muted); font-size:11px; font-weight:750; }
.it-cycle-buttons button:hover { transform:translateY(-1px); }
.it-cycle-buttons button.selected { border-color:#1769c2; background:linear-gradient(145deg,#eef7ff,#e4f1ff); color:#0d4f97; box-shadow:0 0 0 3px rgba(23,105,194,.08),0 5px 12px rgba(23,105,194,.08); }
.it-cycle-buttons button.selected small { color:#3d6f9e; }

.it-tutorial-mission-head { margin-bottom:10px; padding:11px 14px; display:grid; grid-template-columns:auto minmax(140px,1fr) auto; align-items:center; gap:14px; border:1px solid #d5e5ef; border-radius:14px; background:linear-gradient(90deg,#f7fbff,#fff); }
.it-tutorial-mission-head > div:first-child { display:flex; align-items:baseline; gap:9px; min-width:0; }
.it-tutorial-mission-head strong { color:var(--navy); font-size:18px; white-space:nowrap; }
.it-tutorial-progress { height:10px; overflow:hidden; border-radius:99px; background:#e5edf3; box-shadow:inset 0 1px 2px rgba(11,43,102,.06); }
.it-tutorial-progress span { display:block; height:100%; width:9%; border-radius:inherit; background:linear-gradient(90deg,#1769c2,#71b3f4); transition:width .35s ease; position:relative; }
.it-tutorial-progress span::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); animation:itProgressShine 2.8s ease-in-out infinite; }
@keyframes itProgressShine { 0%,55%{transform:translateX(-100%)} 85%,100%{transform:translateX(100%)} }
.it-tutorial-xp { min-width:66px; padding:7px 10px; border:1px solid #f2d984; border-radius:999px; background:#fff7da; color:#805900; font-size:13px; font-weight:950; text-align:center; }

.it-tutorial-coach { margin-bottom:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; border:1px solid #f0dfad; border-left:5px solid var(--gold); border-radius:13px; background:linear-gradient(90deg,#fffaf0,#fffdf7); color:#5f4b17; }
.it-tutorial-coach.is-pop { animation:itCoachPop .3s ease; }
.it-tutorial-coach-avatar { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(94,70,12,.10); font-size:22px; }
.it-tutorial-coach p { margin:0; font-size:14px; line-height:1.45; }
.it-tutorial-coach strong { color:var(--navy); }
@keyframes itCoachPop { 0%{transform:translateY(-3px);opacity:.55} 100%{transform:none;opacity:1} }

.it-tutorial-stepper { margin-bottom:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.it-tutorial-stepper button { min-height:52px; padding:7px 8px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #d3e1ea; border-radius:12px; background:#f8fbfd; color:#72869a; font-size:13px; font-weight:900; cursor:pointer; transition:.16s ease; }
.it-tutorial-stepper button > span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#e8eff4; font-size:11px; font-weight:950; }
.it-tutorial-stepper button.selected { border-color:#f0b230; background:#fff7df; color:#745200; box-shadow:0 0 0 3px rgba(240,178,48,.08); }
.it-tutorial-stepper button.selected > span { background:#f0b230; color:#fff; }
.it-tutorial-stepper button.done { border-color:#9acbaa; color:#21783d; background:#f4fff7; }
.it-tutorial-stepper button.done > span { background:#2aa055; color:#fff; }
.it-tutorial-stepper button:disabled { opacity:.45; cursor:default; }

.it-tutorial-stage-deck { min-height:390px; }
.it-tutorial-stage { min-width:0; min-height:390px; padding:20px 22px; border:1px solid #d4e3ed; border-radius:18px; background:#fff; box-shadow:0 5px 16px rgba(20,55,90,.05); position:relative; overflow:hidden; }
.it-tutorial-stage::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:#d9e9f5; }
.it-tutorial-stage.is-active { animation:itStageIn .25s ease; }
.it-tutorial-stage[hidden] { display:none !important; }
@keyframes itStageIn { 0%{opacity:.3;transform:translateY(6px)} 100%{opacity:1;transform:none} }
.it-tutorial-stage-head { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.it-tutorial-stage-number { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#eaf4ff; color:var(--blue); font-size:15px; font-weight:950; box-shadow:inset 0 0 0 1px #d7e9f7; }
.it-tutorial-stage-head div { display:grid; line-height:1.08; }
.it-tutorial-stage-head div > span { color:var(--blue); font-size:11px; font-weight:950; letter-spacing:.11em; }
.it-tutorial-stage-head strong { margin-top:4px; color:var(--navy); font-size:20px; }
.it-tutorial-meta { margin:0 0 14px; color:#815c05; font-size:14px; font-weight:850; text-align:center; }

.it-tutorial-stage--listen { background:linear-gradient(145deg,#fafdff,#fff); }
.it-tutorial-stage--listen::before { background:#71b3f4; }
.it-tutorial-audio-actions { max-width:820px; margin:8px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.it-tutorial-audio-actions button { min-height:86px; padding:13px 16px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:13px; border:2px solid #b9d5eb; border-radius:15px; background:linear-gradient(145deg,#f6fbff,#eef7ff); color:var(--navy); font-size:16px; font-weight:950; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.it-tutorial-audio-actions button > span { grid-row:1/3; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:29px; color:var(--blue); box-shadow:0 3px 10px rgba(23,105,194,.10); }
.it-tutorial-audio-actions button small { color:var(--muted); font-size:12px; font-weight:700; }
.it-tutorial-audio-actions button:last-child { border-color:#d5c2ea; background:linear-gradient(145deg,#fcf9ff,#f6efff); }
.it-tutorial-audio-actions button:last-child > span { color:#774aa7; }
.it-tutorial-audio-actions button:hover { transform:translateY(-2px); box-shadow:0 7px 16px rgba(11,43,102,.08); }
.it-tutorial-audio-actions button.is-playing,.it-tutorial-reference-main button.is-playing,.it-sing-actions button.is-playing,.it-contrast-actions button.is-playing { animation:itSoundPulse .7s ease; }
@keyframes itSoundPulse { 0%,100%{transform:scale(1)} 45%{transform:scale(.975)} 70%{box-shadow:0 0 0 7px rgba(23,105,194,.09)} }
.it-tutorial-listen-tip { margin:14px 0 0; min-height:22px; color:var(--muted); font-size:13px; line-height:1.4; text-align:center; }
.it-tutorial-stage-next { min-width:260px; min-height:48px; margin:16px auto 0; padding:9px 18px; display:block; border:0; border-radius:12px; background:linear-gradient(135deg,#1769c2,#0e57a6); color:#fff; font-size:14px; font-weight:950; cursor:pointer; box-shadow:0 6px 13px rgba(23,105,194,.15); transition:transform .15s ease,box-shadow .15s ease; }
.it-tutorial-stage-next:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 16px rgba(23,105,194,.19); }
.it-tutorial-stage-next:disabled { opacity:.38; cursor:default; box-shadow:none; }

.it-tutorial-stage--anchor { background:linear-gradient(145deg,#fffdf8,#fff); }
.it-tutorial-stage--anchor::before { background:var(--gold); }
.it-tutorial-reference-main { max-width:860px; min-height:132px; margin:2px auto 0; padding:16px 18px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; border:1px solid #ead8a6; border-radius:15px; background:linear-gradient(135deg,#fffaf0,#fff); }
.it-tutorial-reference-main[hidden] { display:none !important; }
.it-tutorial-reference-main > div { min-width:0; display:grid; gap:5px; }
.it-tutorial-reference-type { color:#946700; font-size:11px; font-weight:950; letter-spacing:.08em; }
.it-tutorial-reference-main strong { color:var(--navy); font-size:21px; }
.it-tutorial-reference-main p { margin:0; color:#536779; font-size:14px; line-height:1.45; }
.it-reference-tempo { color:#8a6a1f; font-size:12px; line-height:1.35; }
.it-tutorial-reference-main button { min-width:190px; min-height:50px; padding:10px 14px; border:2px solid #e7bd58; border-radius:12px; background:#fff; color:#6e4d00; font-size:14px; font-weight:950; cursor:pointer; }
.it-tutorial-reference-tabs { max-width:860px; margin:9px auto 0; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.it-tutorial-reference-tabs[hidden] { display:none !important; }
.it-tutorial-reference-tabs button { min-height:36px; padding:7px 12px; border:1px solid #d9c58f; border-radius:999px; background:#fff; color:#705619; font-size:12px; font-weight:850; cursor:pointer; }
.it-tutorial-reference-tabs button.selected { border-color:#d89e13; background:#fff7df; color:#694900; }
.it-anchor-cycle-note { max-width:860px; margin:12px auto 0; color:#5f6d79; font-size:13px; line-height:1.45; text-align:center; }

.it-contrast-card { max-width:860px; margin:3px auto 0; padding:17px 18px; border:1px solid #b9d8e9; border-radius:16px; background:linear-gradient(135deg,#f5fbff,#fff); }
.it-contrast-card[hidden] { display:none !important; }
.it-contrast-copy { text-align:center; }
.it-contrast-copy > span { color:var(--blue); font-size:11px; font-weight:950; letter-spacing:.1em; }
.it-contrast-copy strong { display:block; margin-top:4px; color:var(--navy); font-size:21px; }
.it-contrast-copy p { max-width:720px; margin:7px auto 0; color:#526779; font-size:14px; line-height:1.5; }
.it-contrast-actions { margin-top:15px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.it-contrast-actions button { min-height:78px; padding:11px 13px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; border:2px solid #c8dce9; border-radius:14px; background:#fff; color:var(--navy); text-align:left; cursor:pointer; }
.it-contrast-actions button > span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#eef7ff; color:var(--blue); font-size:21px; }
.it-contrast-actions button strong { font-size:16px; }
.it-contrast-actions button small { color:var(--muted); font-size:12px; }
.it-contrast-actions button.is-target { border-color:#f0b230; background:#fffaf0; box-shadow:0 0 0 3px rgba(240,178,48,.09); }
.it-contrast-actions button.is-heard > span { background:#e9f8ef; color:#21804a; }
.it-contrast-status { margin:12px 0 0; min-height:22px; color:#526779; font-size:13px; line-height:1.4; text-align:center; }

.it-tutorial-stage--sing { background:linear-gradient(145deg,#fffafd,#fff); }
.it-tutorial-stage--sing::before { background:#a263ca; }
.it-sing-card { max-width:860px; margin:0 auto; padding:13px 15px; display:flex; align-items:center; gap:13px; border:1px solid #e3d2ea; border-radius:14px; background:#fff; }
.it-sing-icon { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#f5ecfa; font-size:26px; }
.it-sing-card > div { min-width:0; }
.it-sing-card strong { color:var(--navy); font-size:17px; line-height:1.25; }
.it-sing-card p { margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.45; }
.it-sing-steps { max-width:860px; margin:10px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.it-sing-steps span { min-height:38px; padding:7px 9px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; background:#f6f8fb; color:#607487; font-size:12px; font-weight:800; text-align:center; }
.it-sing-steps b { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:#e8edf3; color:var(--navy); font-size:11px; }
.it-sing-pitch { height:70px; margin:14px auto 0; display:flex; align-items:center; justify-content:center; gap:24px; }
.it-sing-pitch-note { width:64px; height:64px; display:grid; place-content:center; gap:3px; text-align:center; border:2px solid #cbdce9; border-radius:50%; background:#fff; color:var(--navy); box-shadow:0 4px 12px rgba(11,43,102,.06); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.it-sing-pitch-note b { font-size:20px; line-height:1; }
.it-sing-pitch-note small { font-size:11px; font-weight:850; color:var(--muted); }
.it-sing-pitch-arrow { width:64px; text-align:center; color:#a263ca; font-size:31px; font-weight:950; line-height:1; }
.it-sing-pitch.is-asc .it-sing-pitch-target { transform:translateY(-10px); }
.it-sing-pitch.is-desc .it-sing-pitch-target { transform:translateY(10px); }
.it-sing-pitch.is-revealed .it-sing-pitch-target { border-color:#63bd80; background:#effcf3; color:#16723a; }
.it-sing-pitch.is-revealed .it-sing-pitch-arrow { color:#35a45a; }
.it-sing-actions { max-width:860px; margin:14px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.it-sing-actions button { min-height:56px; padding:10px 11px; border:2px solid #d7c3df; border-radius:12px; background:#fff; color:var(--navy); font-size:13px; font-weight:950; cursor:pointer; }
.it-sing-actions button:first-child { border-color:#b9d5eb; background:#f4faff; }
.it-sing-actions button:nth-child(2) { border-color:#d7c3df; background:#fff8fd; }
.it-sing-actions button:last-child { border-color:#9cccae; background:#f5fff8; color:#17662f; }
.it-sing-actions button.is-primary { border-color:#1769c2; background:#eef7ff; color:#0d4f97; box-shadow:0 0 0 3px rgba(23,105,194,.08); }
.it-sing-actions button.is-secondary { border-style:dashed; background:#fff; color:#617589; }
.it-sing-actions button:disabled { opacity:.38; cursor:default; }
.it-sing-actions button[hidden] { display:none; }
.it-sing-feedback { max-width:860px; margin:10px auto 0; min-height:48px; padding:10px 12px; display:grid; place-items:center; border-radius:11px; background:#f7fafc; color:#526779; font-size:13px; line-height:1.45; text-align:center; }
.it-sing-selfcheck { margin:9px auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:12px; }
.it-sing-selfcheck[hidden] { display:none; }
.it-sing-selfcheck button { min-height:36px; padding:7px 11px; border:1px solid #c7d9e5; border-radius:999px; background:#fff; color:var(--navy); font-size:12px; font-weight:850; cursor:pointer; }

.it-tutorial-stage--see { background:linear-gradient(145deg,#f8fbff,#fff); }
.it-tutorial-stage--see::before { background:#5c91d0; }
.it-tutorial-reveal { width:min(100%,760px); height:210px; margin:6px auto 0; padding:10px 13px; background:#fff; border-radius:15px; box-shadow:0 3px 12px rgba(11,43,102,.05); }
.it-tutorial-reveal .it-reveal-content { height:100%; min-height:0; grid-template-rows:32px minmax(0,1fr); gap:3px; }
.it-tutorial-reveal .it-reveal-head { min-height:32px; font-size:13px; }
.it-tutorial-reveal #interval-staff { width:min(100%,560px); min-height:145px; margin:0 auto; }
.it-notation-explain { max-width:760px; margin:11px auto 0; color:#536779; font-size:13px; line-height:1.45; text-align:center; }


.it-tutorial-nav { margin-top:11px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.it-tutorial-nav > button { min-height:44px; padding:8px 14px; border:1px solid #bcd4e5; border-radius:11px; background:#fff; color:var(--navy); font-size:13px; font-weight:900; cursor:pointer; }
.it-tutorial-dots { display:flex; justify-content:center; gap:7px; }
.it-tutorial-dot { width:34px; height:34px; padding:0; border:2px solid #cbdde9; border-radius:50%; background:#fff; color:#708497; font-size:11px; font-weight:950; cursor:pointer; transition:.15s ease; }
.it-tutorial-dot.done { border-color:#9acbaa; background:#f1fff5; color:#21783d; font-size:0; }
.it-tutorial-dot.done::after { content:"✓"; font-size:12px; }
.it-tutorial-dot.selected { border-color:#f0b230; background:#fff7df; color:#7b5700; box-shadow:0 0 0 3px rgba(240,178,48,.12); transform:scale(1.08); }



.it-tutorial-copyright-note { margin-top:12px; padding:11px 13px; display:flex; align-items:baseline; gap:10px; border:1px solid #e6dfc7; border-radius:11px; background:#fffdf8; }
.it-tutorial-copyright-note strong { flex:none; color:var(--navy); font-size:12px; }
.it-tutorial-copyright-note p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }

.it-tutorial-view #return-to-index { min-height:44px; padding:8px 13px; font-size:13px; font-weight:900; }
.it-tutorial-view .it-input-hint { margin-top:12px; min-height:38px; padding:7px 10px; gap:10px; font-size:11px; line-height:1.35; }
body.it-tutorial-screen .nl-module { font-size:13px; }
body.it-tutorial-screen .nl-site { font-size:12px; }

@media (max-width:900px) {
  .it-cycle-picker { grid-template-columns:1fr; }
  .it-cycle-buttons { width:100%; }
  .it-tutorial-mission-head { grid-template-columns:1fr auto; }
  .it-tutorial-progress { grid-column:1/-1; grid-row:2; }
  .it-tutorial-reference-main { grid-template-columns:1fr; text-align:center; }
  .it-tutorial-reference-main button { width:100%; }
}

@media (max-width:620px) {
  .it-tutorial-view { padding:12px 10px 10px; }
  .it-tutorial-head .it-section-title > p { display:block; font-size:12px; }
  .it-tutorial-titleline { gap:6px; }
  .it-tutorial-titleline h1 { font-size:24px; }
  .it-tutorial-badge { padding:4px 7px; font-size:11px; }
  .it-cycle-picker { padding:11px; gap:11px; }
  .it-cycle-picker-copy { text-align:center; }
  .it-cycle-picker-copy strong { font-size:16px; }
  .it-cycle-picker-copy small { font-size:12px; }
  .it-cycle-buttons { grid-template-columns:repeat(2,1fr); gap:7px; }
  .it-cycle-buttons button { min-width:0; min-height:58px; padding:7px 4px; font-size:13px; }
  .it-cycle-buttons button small { font-size:11px; }
  .it-tutorial-mission-head { padding:9px 10px; gap:8px; }
  .it-tutorial-mission-head > div:first-child { display:grid; gap:2px; }
  .it-tutorial-mission-head strong { font-size:16px; }
  .it-tutorial-xp { min-width:54px; font-size:12px; }
  .it-tutorial-coach { padding:9px 10px; }
  .it-tutorial-coach p { font-size:13px; }
  .it-tutorial-coach-avatar { width:34px; height:34px; flex-basis:34px; font-size:19px; }
  .it-tutorial-stepper { gap:4px; }
  .it-tutorial-stepper button { min-height:46px; padding:4px 2px; gap:4px; font-size:11px; }
  .it-tutorial-stepper button > span { width:23px; height:23px; font-size:11px; }
  .it-tutorial-stage-deck { min-height:0; }
  .it-tutorial-stage { min-height:0; padding:15px 12px; border-radius:15px; }
  .it-tutorial-stage-head { margin-bottom:10px; }
  .it-tutorial-stage-head strong { font-size:18px; }
  .it-tutorial-stage-number { width:34px; height:34px; flex-basis:34px; font-size:13px; }
  .it-tutorial-audio-actions { grid-template-columns:1fr; gap:8px; }
  .it-tutorial-audio-actions button { min-height:70px; font-size:14px; }
  .it-tutorial-audio-actions button > span { width:42px; height:42px; font-size:24px; }
  .it-tutorial-stage-next { width:min(100%,300px); min-width:0; font-size:13px; }
  .it-tutorial-reference-main { min-height:0; padding:12px; }
  .it-tutorial-reference-main strong { font-size:19px; }
  .it-tutorial-reference-main p { font-size:13px; }
  .it-contrast-card { padding:13px 12px; }
  .it-contrast-copy strong { font-size:18px; }
  .it-contrast-copy p { font-size:13px; }
  .it-contrast-actions { grid-template-columns:1fr; }
  .it-contrast-actions button { min-height:66px; }
  .it-sing-card { padding:11px; gap:9px; align-items:flex-start; }
  .it-sing-icon { width:40px; height:40px; flex-basis:40px; font-size:21px; }
  .it-sing-card strong { font-size:15px; }
  .it-sing-card p { font-size:13px; }
  .it-sing-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .it-sing-steps span { font-size:11px; }
  .it-sing-pitch { height:62px; gap:16px; }
  .it-sing-pitch-note { width:56px; height:56px; }
  .it-sing-pitch-note b { font-size:18px; }
  .it-sing-pitch-arrow { width:50px; font-size:27px; }
  .it-sing-actions { grid-template-columns:1fr; }
  .it-sing-actions button { min-height:48px; font-size:13px; }
  .it-sing-feedback { font-size:12px; }
  .it-tutorial-reveal { height:185px; padding:7px 8px; }
  .it-tutorial-reveal #interval-staff { min-height:125px; }
  .it-tutorial-nav { grid-template-columns:1fr 1fr; }
  .it-tutorial-dots { grid-column:1/-1; grid-row:1; order:-1; }
  .it-tutorial-nav > button { width:100%; }
  .it-tutorial-dot { width:31px; height:31px; font-size:11px; }
  .it-tutorial-copyright-note { display:block; }
  .it-tutorial-copyright-note strong { display:block; margin-bottom:4px; }
  .it-tutorial-copyright-note p { font-size:11px; }
}

@media (max-width:390px) {
  .it-tutorial-stepper button { font-size:11px; }
  .it-cycle-buttons button { font-size:12px; }
  .it-cycle-buttons button small { font-size:11px; }
}

@media (prefers-reduced-motion:reduce) {
  .it-tutorial-coach.is-pop,.it-tutorial-stage.is-active,.it-tutorial-progress span::after,.it-tutorial-audio-actions button.is-playing,.it-tutorial-reference-main button.is-playing,.it-sing-actions button.is-playing,.it-contrast-actions button.is-playing { animation:none !important; }
  .it-cycle-buttons button,.it-tutorial-dot,.it-tutorial-stage-next { transition:none !important; }
}

.recipient-help{margin:4px 0 8px;color:#526b80;font-size:.82rem;font-weight:700;}