: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;
  --rh-primary-action-height: 58px;
  --rh-practice-assist-height: 82px;
  --rh-practice-score-height: clamp(150px, 20dvh, 188px);
}

* { 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, a { font: inherit; }

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

html[data-input-mode="gamepad"] button:focus,
html[data-input-mode="keyboard"] button:focus {
  outline: 3px solid rgba(255, 181, 46, .72);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.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; }

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

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

.rh-intro {
  margin: 0 auto clamp(22px, 4vw, 42px);
  text-align: center;
}

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

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

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

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

.rh-pulse {
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.rh-pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b8cad8;
}

.rh-pulse i:first-child {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 103, 88, .10);
}

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

.rh-card {
  position: relative;
  min-width: 0;
  min-height: clamp(210px, 25vw, 270px);
  padding: clamp(18px, 2.6vw, 28px);
  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-width: 3px;
  border-radius: var(--radius-md);
  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;
}

.rh-card:hover,
.rh-card[data-selected="true"] {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 43, 102, .10);
}

.rh-card[data-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(23, 105, 194, .16);
  border-radius: 11px;
  pointer-events: none;
}

.rh-card--guided { background: var(--soft-blue); border-top-color: #63a8ef; }
.rh-card--custom { background: var(--soft-green); border-top-color: #59bb83; }
.rh-card--challenge { background: var(--soft-orange); border-top-color: #f4a12a; }

.rh-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .52);
}

.rh-card-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #73aee7;
}

.rh-card--custom .rh-card-icon svg { color: #62bc84; }
.rh-card--challenge .rh-card-icon svg { color: #f0a337; }
.rh-card-icon .accent-stroke { stroke: var(--blue); }
.rh-card-icon .accent-fill { fill: currentColor; stroke: none; }

.rh-card-copy {
  min-width: 0;
  align-self: center;
  display: grid;
  gap: 5px;
}

.rh-card-copy strong {
  color: #17365d;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.08;
}

.rh-card-copy span {
  color: #34495e;
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.35;
}

.rh-card-copy small {
  color: #718295;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.35;
}

.rh-card-action {
  grid-column: 1 / -1;
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .64);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.rh-card--custom .rh-card-action { color: #218150; }
.rh-card--challenge .rh-card-action { color: #b76d0a; }

.rh-input-hint {
  width: max-content;
  max-width: 100%;
  margin: clamp(16px, 2.8vw, 26px) auto 10px;
  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;
}

.rh-gamepad-state {
  color: #8a98a8;
  white-space: nowrap;
}

.rh-gamepad-state[data-connected="true"] {
  color: #218150;
  font-weight: 750;
}

.rh-story {
  margin-top: 10px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
}

.rh-story strong {
  color: var(--navy);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rh-story p {
  margin: 0;
  color: #607187;
  font-size: 12px;
  line-height: 1.4;
}

.rh-section {
  min-height: min(600px, calc(100vh - 120px));
}

.rh-section-head {
  min-height: 66px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr) minmax(88px, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}

.rh-back {
  justify-self: start;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #c7d9e8;
  border-radius: 10px;
  background: #f4f9fd;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(11, 43, 102, .06);
}

.rh-back:hover { background: #e9f3fb; }

.rh-section-title {
  min-width: 0;
  text-align: center;
}

.rh-section-title h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.08;
}

.rh-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.rh-placeholder {
  width: min(720px, 100%);
  min-height: 260px;
  margin: clamp(20px, 5vw, 56px) auto 0;
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed #c9d9e6;
  border-top: 3px solid #63a8ef;
  border-radius: 16px;
  background: var(--soft-blue);
  text-align: center;
}


.rh-placeholder-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .68);
  color: var(--blue);
  font-size: 24px;
  font-weight: 800;
}

.rh-placeholder h2 {
  margin: 4px 0 0;
  color: #17365d;
  font-size: clamp(20px, 2.5vw, 28px);
}

.rh-placeholder p {
  max-width: 520px;
  margin: 0;
  color: #607187;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.45;
}

.rh-announcer {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .nl-topbar { min-height: 60px; border-radius: 15px; }
  .nl-module { font-size: 13px; }

  .rh-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rh-card--guided { grid-column: 1 / -1; }
  .rh-card { min-height: 205px; }

  .rh-section { min-height: 0; }
  .rh-placeholder { min-height: 230px; }
}

@media (max-width: 620px) {
  :root { --page-pad: 7px; }

  .nl-topbar {
    min-height: 54px;
    margin-bottom: 8px;
    padding: 7px 8px;
    gap: 8px;
  }

  .nl-brand { gap: 5px; }
  .nl-note { font-size: 23px; }
  .nl-word { font-size: 18px; }
  .nl-by { font-size: 10px; }
  .nl-module { display: none; }
  .nl-site {
    min-height: 38px;
    max-width: 47vw;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
  }

  .rh-view {
    padding: 12px;
    border-radius: 16px;
  }

  .rh-intro { margin-bottom: 18px; }
  .rh-title-icon { width: 30px; height: 30px; font-size: 17px; }
  .rh-intro h1 { font-size: clamp(23px, 7vw, 29px); }

  .rh-home-grid { grid-template-columns: 1fr; gap: 9px; }
  .rh-card--guided { grid-column: auto; }

  .rh-card {
    min-height: 0;
    padding: 15px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px 12px;
  }

  .rh-card-icon { width: 44px; height: 44px; }
  .rh-card-icon svg { width: 29px; height: 29px; }
  .rh-card-copy strong { font-size: 18px; }
  .rh-card-copy span { font-size: 13px; }
  .rh-card-copy small { font-size: 11px; }
  .rh-card-action { min-height: 38px; font-size: 12px; }

  .rh-input-hint {
    width: 100%;
    border-radius: 12px;
    margin-top: 12px;
    gap: 3px 8px;
  }

  .rh-gamepad-state { width: 100%; text-align: center; }

  .rh-story {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px 11px;
  }

  .rh-story strong { white-space: normal; }

  .rh-section-head {
    min-height: 84px;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "back title"
      "back title";
    gap: 8px 10px;
  }

  .rh-back { grid-area: back; min-height: 40px; padding-inline: 10px; }
  .rh-section-title { grid-area: title; text-align: left; }
  .rh-head-spacer { display: none; }
  .rh-section-title h1 { font-size: 20px; }
  .rh-section-title p { font-size: 11px; }

  .rh-placeholder {
    min-height: 210px;
    margin-top: 14px;
    padding: 22px 16px;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  :root { --page-pad: 6px; }
  .nl-topbar { min-height: 48px; margin-bottom: 6px; padding-block: 5px; }
  .nl-note { font-size: 21px; }
  .nl-word { font-size: 18px; }
  .nl-site { min-height: 36px; padding-block: 5px; }

  .rh-view { padding: 10px 14px 12px; }
  .rh-intro { margin-bottom: 12px; }
  .rh-title-icon { width: 29px; height: 29px; }
  .rh-intro h1 { font-size: 24px; }
  .rh-intro p { margin-top: 3px; }
  .rh-pulse { margin-top: 6px; }
  .rh-card { min-height: 150px; padding: 13px 15px; }
  .rh-card-icon { width: 42px; height: 42px; }
  .rh-card-copy strong { font-size: 18px; }
  .rh-card-action { min-height: 34px; padding-block: 5px; }
  .rh-input-hint { margin-top: 10px; margin-bottom: 6px; padding-block: 5px; }
  .rh-story { margin-top: 6px; padding-block: 7px; }

  .rh-section { min-height: 0; }
  .rh-section-head { min-height: 54px; padding-block: 5px; }
  .rh-back { min-height: 36px; padding-block: 5px; }
  .rh-placeholder {
    min-height: 190px;
    margin-top: 12px;
    padding-block: 18px;
  }
}


/* Z4 — premier composant du moteur de gravure. */
.rh-render-preview {
  width: min(780px, 100%);
  min-height: 0;
  margin-top: clamp(14px, 3vw, 30px);
  padding: clamp(18px, 3vw, 30px);
}

.rh-score-shell {
  width: min(680px, 100%);
  margin-top: 6px;
  padding: 10px 12px 8px;
  border: 1px solid #d5e0e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 43, 102, .07);
}

.rh-score-meta {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: left;
}

.rh-score-host {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
}

.rh-score-host svg {
  width: 100%;
  height: 132px;
}

.rh-render-status {
  min-height: 18px;
  margin-top: 0 !important;
  color: var(--green) !important;
  font-size: 11px !important;
  font-weight: 750;
}

@media (max-width: 620px) {
  .rh-render-preview { padding: 16px 12px; }
  .rh-score-shell { padding-inline: 6px; }
}

/* Z5 — galerie de tests du renderer commun. */
.rh-render-preview {
  width: min(940px, 100%);
}

.rh-score-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}

.rh-score-shell {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.rh-score-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 0;
  padding-inline: 2px;
  color: var(--ink);
  text-align: left;
}

.rh-score-heading strong {
  font-size: 13px;
  font-weight: 850;
}

.rh-score-heading span {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.rh-score-note {
  min-height: 17px;
  margin: -2px 2px 2px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-align: left;
}

.rh-score-host,
.rh-score-host svg {
  min-height: 136px;
  height: 136px;
}

@media (max-width: 760px) {
  .rh-score-gallery { grid-template-columns: 1fr; }
}

/* Z6 — lignes multi-mesures et retours de système communs. */
.rh-system-test {
  width: 100%;
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: clamp(16px, 2.5vw, 24px);
  border-top: 1px solid #d7e3eb;
}

.rh-system-intro {
  margin: 0 auto 10px;
  text-align: left;
}

.rh-system-intro h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 2vw, 19px);
}

.rh-system-intro p {
  margin: 4px 0 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.rh-system-gallery {
  display: grid;
  gap: 12px;
  width: 100%;
}

.rh-system-shell {
  width: 100%;
  min-width: 0;
  padding: 10px 12px 8px;
  border: 1px solid #d5e0e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 43, 102, .07);
}

.rh-system-host {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.rh-system-host svg {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 620px) {
  .rh-system-shell { padding-inline: 6px; }
}

/* Z7 — diagnostic du moteur de timing commun, sans son. */
.rh-timing-test {
  width: 100%;
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: clamp(16px, 2.5vw, 24px);
  border-top: 1px solid #d7e3eb;
}

.rh-timing-panel {
  width: min(620px, 100%);
  margin: 12px auto 0;
  padding: clamp(14px, 2.5vw, 20px);
  border: 1px solid #d5e0e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 43, 102, .07);
}

.rh-timing-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}

.rh-timing-summary strong { font-size: clamp(15px, 2vw, 18px); }
.rh-timing-summary span { color: var(--muted); font-size: 11px; font-weight: 750; text-align: right; }

.rh-timing-pulses {
  display: grid;
  grid-template-columns: repeat(var(--pulse-count, 4), minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.rh-timing-pulses span {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid #cfdde7;
  border-radius: 13px;
  background: #f7fbfd;
  color: #6a8294;
  font-size: 18px;
  font-weight: 850;
  transition: transform 90ms ease, background 90ms ease, border-color 90ms ease, color 90ms ease;
}

.rh-timing-pulses span[data-active="true"] {
  transform: translateY(-2px);
  border-color: #176ac3;
  background: #176ac3;
  color: #fff;
}

.rh-timing-pulses span[data-active="true"][data-first="true"] {
  border-color: #ff655d;
  background: #ff655d;
}

.rh-timing-progress {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3edf3;
}

.rh-timing-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, #176ac3, #ff655d);
}

.rh-timing-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.rh-timing-button {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #cbdbe6;
  border-radius: 12px;
  background: #f7fbfd;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.rh-timing-button--primary {
  border-color: #176ac3;
  background: #176ac3;
  color: #fff;
}

.rh-timing-button:focus-visible {
  outline: 3px solid rgba(23, 106, 195, .23);
  outline-offset: 2px;
}

.rh-timing-detail {
  min-height: 17px;
  margin: 10px 0 0 !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-align: center;
}

@media (max-width: 520px) {
  .rh-timing-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .rh-timing-summary span { text-align: left; }
  .rh-timing-pulses { gap: 5px; }
  .rh-timing-pulses span { min-height: 46px; }
  .rh-timing-actions { align-items: stretch; flex-direction: column; }
  .rh-timing-button { width: 100%; }
}


/* Z9 — contrôles du moteur audio commun et subdivisions. */
.rh-audio-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2eaf0;
}

.rh-audio-field {
  display: grid;
  gap: 5px;
  min-width: min(270px, 100%);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.rh-audio-field select {
  min-height: 42px;
  padding: 8px 34px 8px 11px;
  border: 1px solid #c8d6e0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.rh-audio-field select:focus-visible,
.rh-audio-switch:has(input:focus-visible) {
  outline: 3px solid rgba(11, 94, 168, .20);
  outline-offset: 2px;
}

.rh-audio-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #c8d6e0;
  border-radius: 10px;
  background: #f7fafc;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rh-audio-switch input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0b5ea8;
}

@media (max-width: 620px) {
  .rh-audio-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .rh-audio-field,
  .rh-audio-field select,
  .rh-audio-switch {
    width: 100%;
  }
}

/* Z11 — banc d’essai du moteur commun d’évaluation des attaques. */
.rh-eval-test {
  width: 100%;
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: clamp(16px, 2.5vw, 24px);
  border-top: 1px solid #d7e3eb;
}

.rh-eval-panel {
  width: min(620px, 100%);
  margin: 12px auto 0;
  padding: clamp(14px, 2.5vw, 20px);
  border: 1px solid #d5e0e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 43, 102, .07);
}

.rh-eval-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.rh-eval-summary > div {
  display: grid;
  gap: 2px;
}

.rh-eval-summary strong {
  color: var(--ink);
  font-size: clamp(15px, 2vw, 18px);
}

.rh-eval-summary > div span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.rh-eval-feedback {
  min-width: 112px;
  padding: 7px 10px;
  border: 1px solid #d8e4eb;
  border-radius: 999px;
  background: #f7fafc;
  color: #587083;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.rh-eval-feedback[data-kind="perfect"] { border-color: #9bd9bd; background: #eefaf4; color: #126b48; }
.rh-eval-feedback[data-kind="early"],
.rh-eval-feedback[data-kind="late"] { border-color: #f4cd82; background: #fff8e9; color: #895800; }
.rh-eval-feedback[data-kind="miss"],
.rh-eval-feedback[data-kind="extra"] { border-color: #efb1ad; background: #fff1f0; color: #a43c34; }

.rh-eval-pulses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.rh-eval-pulses span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid #cfdde7;
  border-radius: 13px;
  background: #f7fbfd;
  color: #6a8294;
  font-size: 17px;
  font-weight: 850;
  transition: transform 90ms ease, background 90ms ease, border-color 90ms ease, color 90ms ease;
}

.rh-eval-pulses span[data-active="true"] {
  transform: translateY(-2px);
  border-color: #176ac3;
  background: #176ac3;
  color: #fff;
}

.rh-eval-pulses span:first-child[data-active="true"] {
  border-color: #ff655d;
  background: #ff655d;
}

.rh-eval-tap {
  width: 100%;
  min-height: 58px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: #176ac3;
  color: #fff;
  font: inherit;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.rh-eval-tap:active { transform: translateY(1px) scale(.995); }
.rh-eval-tap:focus-visible { outline: 3px solid rgba(23, 106, 195, .25); outline-offset: 2px; }
.rh-eval-panel[data-status="precount"] .rh-eval-tap { background: #7893a7; }

.rh-eval-hint {
  margin: 6px 0 0 !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  text-align: center;
}

.rh-eval-track {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin-top: 14px;
}

.rh-eval-track span {
  display: grid;
  place-items: center;
  min-height: 30px;
  border: 1px solid #d8e3ea;
  border-radius: 8px;
  background: #f7fafc;
  color: #7b909e;
  font-size: 10px;
  font-weight: 900;
}

.rh-eval-track span[data-kind="perfect"] { border-color: #92d2b2; background: #eaf8f1; color: #126b48; }
.rh-eval-track span[data-kind="early"],
.rh-eval-track span[data-kind="late"] { border-color: #efca7f; background: #fff7e7; color: #895800; }
.rh-eval-track span[data-kind="miss"] { border-color: #eaa8a4; background: #ffefee; color: #a43c34; }

@media (max-width: 520px) {
  .rh-eval-summary { align-items: stretch; flex-direction: column; }
  .rh-eval-feedback { width: 100%; }
  .rh-eval-pulses { gap: 5px; }
  .rh-eval-track { gap: 3px; }
}

/* Z12 — premier exercice Guidé réel, construit uniquement avec les moteurs communs. */
.rh-guided-live {
  width: min(940px, 100%);
  margin: clamp(14px, 3vw, 28px) auto 0;
  padding: clamp(14px, 2.6vw, 22px);
  border: 1px solid #cddde8;
  border-top: 3px solid var(--blue);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(11, 43, 102, .07);
}

.rh-guided-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.rh-level-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rh-guided-live h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 2.5vw, 25px);
}

.rh-guided-live-head p {
  max-width: 620px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rh-level-tempo {
  flex: none;
  padding: 7px 10px;
  border: 1px solid #cfdeea;
  border-radius: 999px;
  background: #f4f9fd;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.rh-guided-score-shell {
  width: 100%;
  margin-top: 14px;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid #dae5ec;
  border-radius: 13px;
  background: #fff;
}

.rh-guided-score {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.rh-guided-score svg {
  display: block;
  width: 100%;
  max-width: 100%;
}

:is(.rh-guided-score, .rh-challenge-score) .rh-rhythm-event[data-rhythm-state="perfect"] * {
  fill: #16845b !important;
  stroke: #16845b !important;
}

:is(.rh-guided-score, .rh-challenge-score) .rh-rhythm-event[data-rhythm-state="near"] * {
  fill: #d58a09 !important;
  stroke: #d58a09 !important;
}

:is(.rh-guided-score, .rh-challenge-score) .rh-rhythm-event[data-rhythm-state="extra"] *,
:is(.rh-guided-score, .rh-challenge-score) .rh-rhythm-event[data-rhythm-state="miss"] * {
  fill: #c94b43 !important;
  stroke: #c94b43 !important;
}

.rh-guided-status {
  margin-top: 12px;
  padding: 12px;
  border-radius: 13px;
  background: #f6fafc;
}

.rh-guided-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rh-guided-summary > div { display: grid; gap: 2px; text-align: left; }
.rh-guided-summary strong { color: var(--ink); font-size: 15px; }
.rh-guided-summary > div span { color: var(--muted); font-size: 11px; font-weight: 750; }

.rh-guided-summary > .rh-guided-feedbacks {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 7px;
  min-width: min(330px, 48vw);
}

.rh-guided-feedback-part {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #d5e1e8;
  border-radius: 10px;
  background: #fff;
  color: #587083;
  font-size: 10px;
  text-align: left;
}

.rh-guided-feedback-part strong {
  color: #40596c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.rh-guided-summary .rh-guided-feedback-part > span {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rh-guided-feedback-part[data-kind="active"] { border-color: #b8d5ec; background: #f1f8fe; color: #176ac3; }
.rh-guided-feedback-part[data-kind="perfect"] { border-color: #9bd9bd; background: #eefaf4; color: #126b48; }
.rh-guided-feedback-part[data-kind="early"],
.rh-guided-feedback-part[data-kind="late"] { border-color: #f4cd82; background: #fff8e9; color: #895800; }
.rh-guided-feedback-part[data-kind="miss"],
.rh-guided-feedback-part[data-kind="extra"] { border-color: #efb1ad; background: #fff1f0; color: #a43c34; }

 :is(.rh-guided-score, .rh-custom-score, .rh-challenge-score) .rh-score-playhead {
  stroke: #df3029;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .96;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9));
}

/* Métronome visuel commun — Guidé, À la carte et Défis.
   Une seule géométrie, une seule animation et les mêmes couleurs d'accent. */
.rh-metronome-pulses {
  display: grid;
  grid-template-columns: repeat(var(--rh-metronome-pulse-count, 4), minmax(0, 1fr));
  gap: 7px;
  width: min(440px, 100%);
  margin: 10px auto 0;
}

.rh-metronome-pulses span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #d2dfe7;
  border-radius: 10px;
  background: #fff;
  color: #6f8493;
  font-size: 14px;
  font-weight: 900;
  transition: transform 80ms ease, background 80ms ease, border-color 80ms ease, color 80ms ease, opacity 80ms ease;
}

.rh-metronome-pulses span[data-active="true"] {
  transform: translateY(-1px);
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.rh-metronome-pulses span[data-active="true"][data-first="true"] {
  border-color: #ff655d;
  background: #ff655d;
}

/* Le métronome fantôme reste le même composant : seul son état silencieux change. */
.rh-metronome-pulses span[data-ghost="true"] {
  border-style: dashed;
  border-color: #b7a9d6;
  background: #f7f4ff;
  color: #705f9a;
}
.rh-metronome-pulses span[data-ghost="true"][data-active="true"] {
  border-color: #9d87cd;
  background: #eee7ff;
  color: #5d478b;
}

.rh-guided-tap {
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  border: 0;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.rh-guided-status[data-status="precount"] .rh-guided-tap { background: #7893a7; }
.rh-guided-tap:active { transform: translateY(1px) scale(.996); }

.rh-guided-hint,
.rh-guided-result {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.rh-guided-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.rh-guided-button {
  min-height: 40px;
  padding: 7px 15px;
  border: 1px solid #cbdbe6;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.rh-guided-button--primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.rh-guided-button:focus-visible { outline: 3px solid rgba(23, 106, 195, .22); outline-offset: 2px; }
.rh-guided-button:disabled { cursor: not-allowed; opacity: .62; box-shadow: none; }
.rh-guided-tap:disabled { cursor: default; opacity: .72; filter: saturate(.55); }


/* 2026-08-19 — géométrie commune des écrans de lecture.
   Le contenu peut évoluer (battue, feedback, fin d'exercice), mais la zone
   d'action principale conserve exactement la même ligne. */
:is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-live-head {
  min-height: 72px;
}

:is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-score-shell {
  height: var(--rh-practice-score-height);
  display: grid;
  align-items: center;
}

:is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-score {
  height: 100%;
  max-height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-width: none;
}

:is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-score::-webkit-scrollbar {
  width: 0;
  height: 0;
}

:is(#rh-guided-panel, #rh-custom-panel) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(52px, auto)
    var(--rh-practice-assist-height)
    48px
    var(--rh-primary-action-height)
    minmax(18px, auto)
    auto
    minmax(18px, auto);
  grid-template-areas:
    "summary"
    "assist"
    "pulses"
    "action"
    "hint"
    "secondary"
    "result";
  gap: 0;
}

:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-summary { grid-area: summary; align-self: center; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-practice-aids { grid-area: assist; align-self: start; z-index: 1; }
#rh-guided-panel > .rh-practice-aids { justify-content: flex-start; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-practice-conducting { grid-area: assist; align-self: center; justify-self: center; margin: 0; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-pulses { grid-area: pulses; align-self: center; margin-top: 0; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-tap { grid-area: action; align-self: stretch; height: var(--rh-primary-action-height); min-height: var(--rh-primary-action-height); margin-top: 0; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-hint { grid-area: hint; align-self: center; margin-top: 4px; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-actions { grid-area: secondary; align-self: center; margin-top: 6px; }
:is(#rh-guided-panel, #rh-custom-panel) > .rh-guided-result { grid-area: result; align-self: center; margin-top: 4px; }

/* Une battue masquée n'enlève plus sa rangée : elle devient invisible dans
   l'emplacement réservé. Ainsi son activation ne pousse jamais le bouton. */
:is(#rh-guided-panel, #rh-custom-panel) > .rh-practice-conducting[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

/* À la fin, on change le contenu visible mais jamais sa géométrie. */
:is(#rh-guided-panel, #rh-custom-panel)[data-status="ended"] {
  padding: 12px;
  background: #f6fafc;
}
:is(#rh-guided-panel, #rh-custom-panel)[data-status="ended"] > :is(.rh-guided-summary, .rh-practice-aids, .rh-practice-conducting, .rh-guided-pulses, .rh-guided-hint) {
  visibility: hidden;
  pointer-events: none;
}
:is(#rh-guided-panel, #rh-custom-panel)[data-status="ended"] > .rh-guided-tap {
  display: block;
  visibility: visible;
  pointer-events: auto;
  background: var(--blue);
  color: #fff;
}

/* Défis : même hauteur d'action que Guidé et À la carte. La grille des défis
   réservait déjà sa ligne ; on partage désormais la même métrique. */
.rh-challenge-action {
  height: var(--rh-primary-action-height);
  min-height: var(--rh-primary-action-height);
}

@media (max-width: 620px) {
  :root {
    --rh-practice-assist-height: 70px;
    --rh-practice-score-height: clamp(178px, 29dvh, 250px);
  }
  :is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-live-head {
    min-height: 88px;
  }
  :is(#rh-guided-panel, #rh-custom-panel) {
    grid-template-rows:
      minmax(96px, auto)
      var(--rh-practice-assist-height)
      44px
      var(--rh-primary-action-height)
      minmax(32px, auto)
      auto
      minmax(18px, auto);
  }
}

/* Sur un écran de bureau assez haut, deux systèmes de la partition tiennent
   réellement dans la zone réservée. On les montre donc ensemble au lieu de
   rogner la deuxième portée. Les écrans plus bas gardent le pupitre défilant. */
@media (min-width: 621px) and (min-height: 820px) {
  :root {
    --rh-practice-score-height: 252px;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  :root {
    --rh-practice-assist-height: 58px;
    --rh-practice-score-height: clamp(118px, 25dvh, 155px);
  }
  :is(.rh-guided-screen--practice, .rh-view[data-view="custom-play"]) .rh-guided-live-head {
    min-height: 58px;
  }
}

.rh-dev-suite {
  width: min(940px, 100%);
  margin: 14px auto 0;
}

.rh-dev-suite > summary {
  padding: 9px 12px;
  cursor: pointer;
  color: #6f8292;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.rh-dev-suite .rh-render-preview { margin-top: 4px; }

@media (max-width: 620px) {
  .rh-guided-live { padding: 12px 9px; }
  .rh-guided-live-head { gap: 8px; }
  .rh-level-tempo { padding-inline: 8px; font-size: 11px; }
  .rh-guided-summary { align-items: stretch; flex-direction: column; }
  .rh-guided-summary > .rh-guided-feedbacks { width: 100%; min-width: 0; grid-template-columns: 1fr; }
  .rh-guided-actions { align-items: stretch; flex-direction: column; }
  .rh-guided-button { width: 100%; }
}

@media (max-width: 620px) {
  .rh-metronome-pulses { gap: 4px; }
  .rh-metronome-pulses span { min-height: 34px; font-size: 13px; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .rh-metronome-pulses { margin-top: 6px; gap: 4px; }
  .rh-metronome-pulses span { min-height: 31px; font-size: 12px; }
}


/* P1.1 bis — parcours Guidé en trois écrans : parcours → niveaux → lecture. */
.rh-guided-view{position:relative}
.rh-guided-main-head{margin-bottom:0}
.rh-guided-screen{width:min(980px,100%);margin:0 auto}
.rh-guided-screen[hidden]{display:none!important}

.rh-guided-paths{margin:clamp(22px,4vw,42px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rh-guided-path-card{--tone:#2878c8;--soft:#edf6ff;min-width:0;min-height:150px;padding:20px 18px;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--tone) 30%,#d6e2ea);border-top:3px solid var(--tone);border-radius:18px;background:linear-gradient(145deg,var(--soft),#fff 72%);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 7px 18px rgba(18,50,82,.045);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.rh-guided-path-card.tone-coral{--tone:#ef665a;--soft:#fff1ef}.rh-guided-path-card.tone-green{--tone:#2b9560;--soft:#edf8f1}
.rh-guided-path-card:hover{transform:translateY(-2px);box-shadow:0 11px 24px rgba(18,50,82,.08)}
.rh-guided-path-card:focus-visible{outline:3px solid color-mix(in srgb,var(--tone) 35%,transparent);outline-offset:3px}
.rh-guided-path-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:color-mix(in srgb,var(--tone) 10%,#fff);color:var(--tone);font-size:1.45rem;font-weight:950}
.rh-guided-path-icon.irregular{font-size:1rem}
.rh-guided-path-copy{min-width:0;display:grid;gap:5px}.rh-guided-path-copy strong{font-size:1.28rem;color:var(--navy)}.rh-guided-path-copy span{font-size:.93rem;font-weight:750;line-height:1.3}.rh-guided-path-copy small{color:var(--muted);font-size:.78rem;font-weight:800}
.rh-guided-path-arrow{color:var(--tone);font-size:1.25rem;font-weight:950}
.rh-guided-story{margin-top:clamp(24px,5vw,72px)}

.rh-guided-subhead{margin:16px 0 12px;min-height:58px;padding:9px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #d7e3eb;border-radius:14px;background:#fff}
.rh-guided-subhead>div{min-width:0;text-align:center;display:grid;gap:2px}.rh-guided-subhead strong{font-size:1.12rem;color:var(--navy)}.rh-guided-subhead small{color:var(--muted);font-weight:750}
.rh-guided-subback{min-height:36px;padding:7px 11px;border:1px solid #bfd5e5;border-radius:10px;background:#f6fbff;color:var(--navy);font:inherit;font-weight:850;cursor:pointer}
.rh-guided-progress-chip{min-width:74px;padding:7px 10px;border-radius:999px;background:#eef5fa;color:#60798e;text-align:center;font-size:.78rem;font-weight:900}

.rh-guided-journey{display:grid;gap:10px}
.rh-guided-journey-group{--journey:#1769c2;--journey-soft:#edf6ff;padding:10px;display:grid;grid-template-columns:176px minmax(0,1fr);gap:10px;border:1px solid color-mix(in srgb,var(--journey) 18%,#d8e4eb);border-radius:18px;background:linear-gradient(105deg,var(--journey-soft) 0 176px,#fff 176px);overflow:hidden}
.rh-guided-journey-group.tone-coral{--journey:#ef665a;--journey-soft:#fff1ef}.rh-guided-journey-group.tone-green{--journey:#2b9560;--journey-soft:#edf8f1}
.rh-guided-journey-head{padding:10px 8px;display:grid;align-content:center;gap:4px}.rh-guided-journey-head p{margin:0;color:var(--journey);font-size:.69rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.rh-guided-journey-head h3{margin:0;color:var(--navy);font-size:1.03rem}.rh-guided-journey-head small{color:#6d8293;font-size:.78rem;line-height:1.3}
.rh-guided-journey-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.rh-guided-level-card{min-width:0;min-height:112px;padding:8px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:42px auto auto;column-gap:7px;align-items:center;border:1px solid #d6e3eb;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#fff);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 9px rgba(18,50,82,.035);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.rh-guided-level-card:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(18,50,82,.075);border-color:color-mix(in srgb,var(--journey) 35%,#d6e3eb)}
.rh-guided-level-card:focus-visible{outline:3px solid color-mix(in srgb,var(--journey) 30%,transparent);outline-offset:2px}
.rh-guided-level-number{grid-row:1;grid-column:1;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--journey-soft);color:var(--journey);font-size:.72rem;font-weight:950}
.rh-guided-level-preview{grid-row:1;grid-column:2;min-width:0;height:44px;padding:2px 6px;border-radius:9px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;background:color-mix(in srgb,var(--journey-soft) 84%,#fff);color:var(--navy);overflow:hidden}
.rh-guided-level-preview .rh-mini-rhythm{width:100%;height:40px;display:block;overflow:visible}.rh-guided-level-preview .rh-mini-rhythm svg{display:block;width:100%;height:100%}.rh-guided-level-preview-caption{max-width:60px;color:#637b8f;font-size:.58rem;line-height:1.05;font-weight:900;text-align:right}
.rh-guided-level-copy{grid-column:1/-1;grid-row:2;min-width:0;display:grid;gap:1px}.rh-guided-level-copy strong{font-size:.83rem;color:var(--navy);line-height:1.15}.rh-guided-level-copy small{font-size:.68rem;color:#647c90;line-height:1.2}
.rh-guided-level-stage{grid-column:1/-1;grid-row:3;justify-self:start;padding:2px 7px;border:1px solid #cad9e4;border-radius:999px;background:#f7fafc;color:#667f92;font-size:.61rem;font-weight:900}
.rh-guided-level-stage.mastery-discovery{border-color:#cad9e4;background:#f7fafc;color:#667f92}
.rh-guided-level-stage.mastery-training{border-color:#9fc5e4;background:#eef7ff;color:#1769c2}
.rh-guided-level-stage.mastery-solid{border-color:#9fd2b6;background:#effaf3;color:#23734b}

.rh-guided-subhead--practice{margin-bottom:8px}.rh-guided-screen--practice .rh-guided-live{margin-top:0;position:relative;overflow:hidden}
.rh-guided-reward{margin-top:10px;padding:11px 14px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #efcf75;border-radius:15px;background:linear-gradient(135deg,#fff9e6,#fff 72%);box-shadow:0 7px 18px rgba(143,101,15,.08)}
.rh-guided-reward[hidden]{display:none!important}.rh-guided-reward[data-award="2"]{border-color:#cbd4db;background:linear-gradient(135deg,#f5f8fa,#fff 72%)}.rh-guided-reward[data-award="1"]{border-color:#deb99a;background:linear-gradient(135deg,#fff4eb,#fff 72%)}.rh-guided-reward[data-award="0"]{border-color:#d6e1e8;background:#f8fbfd}
.rh-guided-reward-note{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd96a,#d79808);color:#fff;font-size:1.65rem;font-weight:950;box-shadow:0 5px 12px rgba(184,129,6,.22)}
.rh-guided-reward[data-award="2"] .rh-guided-reward-note{background:linear-gradient(145deg,#eef2f5,#99a9b5)}.rh-guided-reward[data-award="1"] .rh-guided-reward-note{background:linear-gradient(145deg,#e2a67b,#aa633d)}.rh-guided-reward[data-award="0"] .rh-guided-reward-note{background:#dbe7ef;color:#668198}
.rh-guided-reward-copy{min-width:0;display:grid;gap:1px}.rh-guided-reward-copy span{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;font-weight:950;color:#92700e}.rh-guided-reward-copy strong{font-size:1.08rem;color:var(--navy)}.rh-guided-reward-copy small{color:#667d90;font-weight:750}
.rh-guided-reward-score{font-size:1.2rem;font-weight:950;color:#a36e00}

.rh-guided-celebration{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at center,rgba(255,248,219,.82),rgba(255,255,255,.3) 42%,transparent 70%);opacity:0}
.rh-guided-celebration[hidden]{display:none!important}.rh-guided-celebration.play{animation:rhGuidedScene 1.55s ease both}
.rh-guided-celebration .core{position:absolute;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd968,#d99a08);color:#fff;font-size:2.55rem;font-style:normal;font-weight:950;box-shadow:0 10px 30px rgba(181,128,8,.25);animation:rhGuidedCore .92s cubic-bezier(.18,.85,.22,1.12) .08s both}
.rh-guided-celebration .ring{position:absolute;width:126px;height:126px;border:3px solid rgba(227,170,28,.34);border-radius:50%;opacity:0}.rh-guided-celebration .r2{width:164px;height:164px}.rh-guided-celebration.play .ring{animation:rhGuidedRing 1.12s ease-out .28s both}.rh-guided-celebration.play .r2{animation-delay:.4s}
.rh-guided-celebration i{position:absolute;color:#d79709;font-size:1.42rem;font-style:normal;font-weight:950;opacity:0}.rh-guided-celebration .n1{transform:translate(-84px,-66px)}.rh-guided-celebration .n2{transform:translate(88px,-54px)}.rh-guided-celebration .n3{transform:translate(-96px,48px)}.rh-guided-celebration .n4{transform:translate(92px,54px)}.rh-guided-celebration .n5{transform:translate(0,88px)}.rh-guided-celebration.play i{animation:rhGuidedNote .78s ease-out .48s both}
@keyframes rhGuidedScene{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}@keyframes rhGuidedCore{0%{opacity:0;transform:scale(.35) rotate(-18deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1)}}@keyframes rhGuidedRing{0%{opacity:0;transform:scale(.55)}30%{opacity:.85}100%{opacity:0;transform:scale(1.45)}}@keyframes rhGuidedNote{0%{opacity:0;scale:.4}40%{opacity:1;scale:1.15}100%{opacity:0;scale:.85}}

@media (max-width:820px){.rh-guided-paths{grid-template-columns:1fr}.rh-guided-path-card{min-height:104px}.rh-guided-journey-group{grid-template-columns:145px minmax(0,1fr);background:linear-gradient(105deg,var(--journey-soft) 0 145px,#fff 145px)}.rh-guided-journey-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rh-guided-path-card{grid-template-columns:46px minmax(0,1fr) auto;padding:14px 12px}.rh-guided-path-icon{width:44px;height:44px;border-radius:14px}.rh-guided-path-copy strong{font-size:1.05rem}.rh-guided-subhead{grid-template-columns:auto 1fr;gap:8px}.rh-guided-progress-chip{grid-column:1/-1;justify-self:center;padding-block:4px}.rh-guided-journey-group{display:block;padding:7px;background:linear-gradient(180deg,var(--journey-soft) 0 68px,#fff 68px)}.rh-guided-journey-head{padding:3px 5px 10px}.rh-guided-journey-cards{grid-template-columns:1fr}.rh-guided-level-card{min-height:90px;grid-template-rows:38px auto auto}.rh-guided-reward{grid-template-columns:44px minmax(0,1fr) auto;padding:9px}.rh-guided-reward-note{width:42px;height:42px;font-size:1.35rem}.rh-guided-reward-score{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.rh-guided-celebration.play,.rh-guided-celebration.play *{animation:none!important}.rh-guided-celebration.play{opacity:0}}

/* Z13.4 — trace de geste sous la note : attaque (point), tenue (ligne), fin (point). */
.rh-guided-score .rh-performance-traces {
  pointer-events: none;
}

.rh-guided-score .rh-performance-hold {
  fill: none;
  stroke: #2878c8;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .9;
}

.rh-guided-score .rh-performance-hold[data-state="perfect"] { stroke: #16845b; }
.rh-guided-score .rh-performance-hold[data-state="near"] { stroke: #d58a09; }
.rh-guided-score .rh-performance-hold[data-state="wrong"] { stroke: #c94b43; }

.rh-guided-score .rh-performance-attack {
  stroke: #fff;
  stroke-width: 1.25;
}

.rh-guided-score .rh-performance-release {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.rh-guided-score .rh-performance-attack[data-state="perfect"] { fill: #16845b; }
.rh-guided-score .rh-performance-attack[data-state="near"] { fill: #d58a09; }
.rh-guided-score .rh-performance-attack[data-state="wrong"] { fill: #c94b43; }
.rh-guided-score .rh-performance-attack[data-state="idle"] { fill: #2878c8; }

.rh-guided-score .rh-performance-release[data-state="perfect"] { stroke: #16845b; }
.rh-guided-score .rh-performance-release[data-state="near"] { stroke: #d58a09; }
.rh-guided-score .rh-performance-release[data-state="wrong"] { stroke: #c94b43; }
.rh-guided-score .rh-performance-release[data-state="active"] { stroke: #2878c8; }


/* Z15.2 — squelette commun des Défis + pupitre multi-systèmes.
   Le nombre de systèmes ne change jamais la place de l'action ; sur petite
   largeur le pupitre gagne de la hauteur pour conserver une mesure d'avance.

   Z14.2 — squelette commun des Défis.
   Une seule structure pour toutes les mécaniques : catalogue, progression,
   consigne, zone d'exercice, statut et action. Les règles responsive sont
   fondées sur l'espace disponible, jamais sur un modèle d'appareil. */
.rh-challenge-intro {
  width: min(940px, 100%);
  margin: clamp(16px, 2.5vw, 24px) auto 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.rh-challenge-intro strong { color: var(--navy); font-size: 14px; }

.rh-challenge-grid {
  width: min(940px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rh-challenge-card {
  min-width: 0;
  min-height: 116px;
  padding: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d5e2eb;
  border-top: 2px solid #f0a23a;
  border-radius: 14px;
  background: #fffaf3;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rh-challenge-card:hover:not(:disabled),
.rh-challenge-card:focus-visible { border-color: #e0a248; background: #fff6e9; }
.rh-challenge-card:disabled { cursor: not-allowed; opacity: .62; background: #f7f8f9; border-top-color: #b9c6cf; }
.rh-challenge-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.85);
  color: #b46d08;
  font-size: 20px;
  font-weight: 900;
}
.rh-challenge-card-copy { min-width: 0; display: grid; gap: 3px; }
.rh-challenge-card-copy strong { color: var(--navy); font-size: 15px; }
.rh-challenge-card-copy span { color: var(--muted); font-size: 11px; line-height: 1.25; }
.rh-challenge-card-state { color: #a56a10; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.rh-challenge-card-arrow { color: #b87917; font-weight: 900; }

/* Les vies sont un indicateur fonctionnel, pas une décoration. */
.rh-challenge-lives {
  min-width: 134px;
  min-height: 46px;
  padding: 7px 15px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0d0ca;
  border-radius: 999px;
  background: #fff5f3;
  color: #c74e45;
  font-family: "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .10em;
  white-space: nowrap;
}

.rh-challenge-shell {
  width: min(880px, 100%);
  margin: clamp(14px, 2.4vw, 22px) auto 0;
  display: grid;
  grid-template-rows:
    auto
    104px
    clamp(285px, 31dvh, 360px)
    64px
    64px;
  gap: 10px;
  align-items: stretch;
}

.rh-challenge-stages {
  display: grid;
  grid-template-columns: repeat(var(--rh-stage-count, 3), minmax(0, 1fr));
  gap: 7px;
}
.rh-challenge-stage-chip {
  min-width: 0;
  min-height: 46px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid #d5e2eb;
  border-radius: 11px;
  background: #f7fafc;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.rh-challenge-stage-chip b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7eef4;
  color: #70869a;
}
.rh-challenge-stage-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-challenge-stage-chip[data-state="current"] { border-color: #f1b55f; background: #fff7ea; color: #965d0c; }
.rh-challenge-stage-chip[data-state="current"] b { background: var(--coral); color: #fff; }
.rh-challenge-stage-chip[data-state="done"] { border-color: #b9ddca; background: #f1faf5; color: #237249; }
.rh-challenge-stage-chip[data-state="done"] b { background: var(--green); color: #fff; }

.rh-challenge-instruction {
  min-height: 104px;
  padding: 14px 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid #e5d9c7;
  border-radius: 14px;
  background: #fffaf3;
  text-align: center;
}
.rh-challenge-kicker { color: #9a600e; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.rh-challenge-instruction h2 { margin: 4px 0; color: var(--navy); font-size: clamp(18px, 2.4vw, 23px); }
.rh-challenge-instruction p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.35; }

.rh-challenge-stage {
  min-height: 0;
  height: 100%;
  padding: clamp(14px, 2.2vw, 22px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
  overflow: hidden;
  border: 1px solid #d6e3ec;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
/* Barre de repères compacte : la battue n'occupe plus une ligne entière.
   La partition conserve ainsi son pupitre complet dès la préparation. */
.rh-challenge-guidebar {
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.rh-challenge-guidebar strong {
  justify-self: start;
  color: var(--navy);
  font-size: 12px;
  text-align: left;
}
.rh-challenge-guidebar > span {
  justify-self: end;
  min-width: 0;
  text-align: right;
}
/* Le pupitre a sa propre fenêtre : le nombre de systèmes ne pousse jamais
   le feedback ni le bouton d’action. Le défilement est piloté par le renderer,
   mais reste aussi tactile si l’élève veut revoir une ligne. */
/* Battue commune. Dans Premier temps, les pastilles de pulsation sont masquées :
   la battue devient alors le repère visuel principal et récupère cet espace. */
.rh-challenge-conducting {
  width: clamp(88px, 10vw, 112px);
  height: clamp(66px, 7.8vw, 84px);
  margin: 0;
}
.rh-challenge-stage[data-conducting="true"] .rh-challenge-guidebar {
  min-height: clamp(68px, 8.6vw, 86px);
}
.rh-challenge-pulses[hidden] { display: none; }
.rh-challenge-conducting[hidden] { display: none; }
.rh-conducting-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rh-conducting-path { fill: none; stroke: #d8e3ea; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rh-conducting-beat circle { fill: #f7fafc; stroke: #b9cbd7; stroke-width: 1.5; transition: fill .08s ease, stroke .08s ease, transform .08s ease; transform-box: fill-box; transform-origin: center; }
.rh-conducting-beat text { fill: #71879a; font-size: 9px; font-weight: 900; font-family: system-ui, sans-serif; pointer-events: none; }
.rh-conducting-beat[data-beat="1"] circle { fill: #fff1ed; stroke: #ef9a8f; }
.rh-conducting-beat[data-beat="1"] text { fill: #b84f45; }
.rh-conducting-beat[data-active="true"] circle { transform: scale(1.16); fill: #fff1dc; stroke: #e6a13c; }
.rh-conducting-beat[data-active="true"] text { fill: #965d0c; }
.rh-conducting-beat[data-beat="1"][data-active="true"] circle { fill: #ffdcd6; stroke: #e56f61; }
.rh-conducting-baton { fill: #24384a; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 2px rgba(26,48,66,.20)); }

.rh-challenge-score {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-width: none;
}
.rh-challenge-score::-webkit-scrollbar { width: 0; height: 0; }
.rh-challenge-score svg { display: block; width: 100%; max-width: 100%; }

/* Feedback et résultat partagent strictement la même case. */
.rh-challenge-status-slot {
  min-height: 64px;
  display: grid;
  grid-template-areas: "status";
  align-items: stretch;
}
.rh-challenge-feedback,
.rh-challenge-result {
  grid-area: status;
  min-height: 64px;
  height: 64px;
  padding: 10px 14px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #d7e3ec;
  border-radius: 12px;
  background: #f7fafc;
  color: var(--ink);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.rh-challenge-feedback[data-kind="active"] { border-color: #bdd7ee; background: #eef7ff; color: #1d5e9d; }
.rh-challenge-feedback[data-kind="good"] { border-color: #b9ddca; background: #f1faf5; color: #24754b; }
.rh-challenge-feedback[data-kind="wrong"] { border-color: #f1c7c2; background: #fff3f1; color: #bd4b43; }
.rh-challenge-result { gap: 3px; border-color: #b9ddca; background: #f1faf5; }
.rh-challenge-result strong { color: #24754b; font-size: 16px; }
.rh-challenge-result span { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Une seule zone d’action : même place et même bleu pour l’action principale. */
.rh-challenge-actionbar {
  min-height: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.rh-challenge-action {
  width: min(360px, 100%);
  height: 52px;
  min-height: 52px;
  padding: 11px 18px;
  border: 0;
  border-radius: 13px;
  background: #2878c8;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(40, 120, 200, .20);
}
.rh-challenge-action:hover { filter: brightness(.98); }


/* Surfaces de frappe/tenue : l'appui long est une entrée musicale, pas un geste navigateur. */
:is(.rh-guided-tap, .rh-eval-tap, .rh-challenge-action[data-tone="play"]) {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


/* Tablettes et petites fenêtres : le catalogue passe sur deux colonnes. */
@media (max-width: 760px) {
  .rh-challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-challenge-intro { display: grid; gap: 3px; }
}

/* Petite largeur : l'en-tête du défi devient deux lignes et les étapes
   se réduisent à leurs numéros. Cela fonctionne aussi avec 5 étapes. */
@media (max-width: 620px) {
  .rh-view[data-view="challenge"] { padding: 10px; }

  .rh-view[data-view="challenge"] .rh-section-head {
    min-height: 0;
    padding: 9px 10px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "back . lives"
      "title title title";
    gap: 7px 8px;
    align-items: center;
  }
  .rh-view[data-view="challenge"] .rh-back { grid-area: back; }
  .rh-view[data-view="challenge"] .rh-section-title { grid-area: title; text-align: center; }
  .rh-view[data-view="challenge"] .rh-section-title h1 { font-size: 21px; }
  .rh-view[data-view="challenge"] .rh-section-title p { margin-top: 2px; font-size: 10px; }
  .rh-view[data-view="challenge"] .rh-challenge-lives { grid-area: lives; justify-self: end; }

  .rh-challenge-lives {
    min-width: 126px;
    min-height: 44px;
    padding: 6px 12px 7px;
    font-size: 28px;
    letter-spacing: .08em;
  }

  .rh-challenge-shell {
    width: 100%;
    margin-top: 10px;
    gap: 8px;
    grid-template-rows:
      auto
      92px
      clamp(325px, 40dvh, 375px)
      60px
      62px;
  }
  .rh-challenge-instruction { min-height: 92px; padding: 11px 12px; }
  .rh-challenge-instruction h2 { font-size: 19px; }
  .rh-challenge-instruction p { font-size: 11px; }

  .rh-challenge-stages { gap: 5px; }
  .rh-challenge-stage-chip {
    min-height: 42px;
    padding: 5px 3px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    text-align: center;
  }
  .rh-challenge-stage-chip b { width: 25px; height: 25px; }
  .rh-challenge-stage-chip span { display: none; }

  .rh-challenge-stage { padding: 16px 12px; }
  .rh-challenge-guidebar { gap: 5px; font-size: 9px; }
  .rh-challenge-guidebar strong { font-size: 10px; }
  .rh-challenge-stage[data-conducting="true"] .rh-challenge-guidebar { min-height: 72px; }
  .rh-challenge-conducting { width: 96px; height: 72px; }

  .rh-challenge-status-slot,
  .rh-challenge-feedback,
  .rh-challenge-result { min-height: 60px; height: 60px; }
  .rh-challenge-feedback,
  .rh-challenge-result { padding: 8px 10px; font-size: 11px; }
  .rh-challenge-result strong { font-size: 14px; }
  .rh-challenge-result span { font-size: 10px; }

  .rh-challenge-actionbar { min-height: 62px; height: 62px; }
  .rh-challenge-action { width: 100%; height: 52px; min-height: 52px; }
}

@media (max-width: 520px) {
  .rh-challenge-grid { grid-template-columns: 1fr; }
  .rh-challenge-card { min-height: 88px; padding: 11px; }
  .rh-challenge-intro { margin-top: 12px; }

  .rh-challenge-lives {
    min-width: 120px;
    font-size: 27px;
  }

  .rh-challenge-instruction { min-height: 88px; }
}

/* Écrans bas en paysage : on compacte verticalement sans changer le modèle. */
@media (orientation: landscape) and (max-height: 650px) {
  .rh-challenge-shell {
    margin-top: 8px;
    gap: 6px;
    grid-template-rows:
      auto
      76px
      clamp(170px, 35dvh, 215px)
      54px
      58px;
  }
  .rh-challenge-instruction { min-height: 76px; padding: 8px 12px; }
  .rh-challenge-instruction h2 { margin-block: 2px; font-size: 18px; }
  .rh-challenge-stage { padding: 12px; }
  .rh-challenge-guidebar { min-height: 26px; gap: 5px; font-size: 9px; }
  .rh-challenge-guidebar strong { font-size: 10px; }
  .rh-challenge-stage[data-conducting="true"] .rh-challenge-guidebar { min-height: 60px; }
  .rh-challenge-conducting { width: 82px; height: 60px; }
  .rh-challenge-status-slot,
  .rh-challenge-feedback,
  .rh-challenge-result { min-height: 54px; height: 54px; }
  .rh-challenge-actionbar { min-height: 58px; height: 58px; }
  .rh-challenge-action { height: 48px; min-height: 48px; }
}

/* Fenêtres peu hautes, quelle que soit leur marque : on garde l’action visible
   en réduisant seulement les zones fixes autour du pupitre. */
@media (max-width: 620px) and (max-height: 760px) {
  .rh-challenge-shell {
    margin-top: 7px;
    gap: 6px;
    grid-template-rows:
      auto
      74px
      clamp(245px, 37dvh, 285px)
      52px
      56px;
  }
  .rh-challenge-instruction { min-height: 74px; padding: 7px 10px; }
  .rh-challenge-instruction h2 { margin-block: 1px; font-size: 17px; }
  .rh-challenge-instruction p { font-size: 10px; }
  .rh-challenge-stage { padding: 9px 10px; gap: 5px; }
  .rh-challenge-guidebar { min-height: 26px; gap: 4px; font-size: 8.5px; }
  .rh-challenge-guidebar strong { font-size: 9.5px; }
  .rh-challenge-stage[data-conducting="true"] .rh-challenge-guidebar { min-height: 58px; }
  .rh-challenge-conducting { width: 78px; height: 58px; }
  .rh-challenge-status-slot,
  .rh-challenge-feedback,
  .rh-challenge-result { min-height: 52px; height: 52px; }
  .rh-challenge-actionbar { min-height: 56px; height: 56px; }
  .rh-challenge-action { height: 48px; min-height: 48px; }
}



/* Z22 — À la carte : configuration puis série d’exercices sur un écran dédié. */
.rh-custom-config {
  width: min(940px, 100%);
  margin: clamp(14px, 3vw, 26px) auto 0;
  padding: clamp(14px, 2.6vw, 22px);
  border: 1px solid #cfe3d7;
  border-top: 3px solid var(--green);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(20, 92, 58, .06);
}

.rh-custom-inline-back{display:none;flex:none;min-height:30px;padding:5px 8px;border:1px solid #c7d9e8;border-radius:9px;background:#f4f9fd;color:var(--navy);font-size:10px;font-weight:850;cursor:pointer}
.rh-custom-inline-back:hover{background:#e9f3fb}

.rh-custom-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.rh-custom-config h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(19px, 2.5vw, 25px);
}

.rh-custom-config-head p {
  max-width: 650px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rh-custom-family {
  flex: none;
  padding: 7px 10px;
  border: 1px solid #b8dcc7;
  border-radius: 999px;
  background: #effaf3;
  color: #24734c;
  font-size: 11px;
  font-weight: 900;
}

.rh-custom-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.rh-custom-fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid #d7e4e9;
  border-radius: 12px;
  background: #f8fbfc;
}

.rh-custom-fieldset--wide { grid-column: 1 / -1; }

.rh-custom-fieldset legend {
  padding: 0 5px;
  color: #526a7a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.rh-custom-choice-row,
.rh-custom-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rh-custom-choice,
.rh-custom-pattern,
.rh-custom-step {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #cbdbe4;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.rh-custom-choice[aria-pressed="true"],
.rh-custom-pattern[aria-pressed="true"] {
  border-color: #55aa79;
  background: #eaf8f0;
  color: #17623e;
  box-shadow: inset 0 0 0 1px rgba(85, 170, 121, .14);
}

.rh-custom-choice:focus-visible,
.rh-custom-pattern:focus-visible,
.rh-custom-step:focus-visible {
  outline: 3px solid rgba(41, 143, 91, .18);
  outline-offset: 2px;
}

.rh-custom-tempo-row {
  display: grid;
  grid-template-columns: 38px minmax(110px, 1fr) 38px;
  align-items: center;
  gap: 7px;
}

.rh-custom-tempo-row strong {
  color: var(--navy);
  font-size: 11px;
  text-align: center;
}

.rh-custom-step {
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.rh-custom-live { border-top-color: var(--green); }

.rh-custom-config-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dce8e2;
}

.rh-custom-config-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.rh-custom-start {
  flex: none;
  min-width: min(240px, 100%);
  min-height: 48px;
  padding: 11px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(28, 110, 184, .18);
}

.rh-custom-start:hover { filter: brightness(.97); }
.rh-custom-start:focus-visible {
  outline: 3px solid rgba(28, 110, 184, .24);
  outline-offset: 3px;
}

.rh-custom-series-chip {
  min-width: 72px;
  padding: 8px 12px;
  border: 1px solid #cfe2d7;
  border-radius: 999px;
  background: #effaf3;
  color: #24734c;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.rh-custom-score {
  max-height: clamp(220px, 39vh, 370px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  overflow-anchor: none;
}


@media (max-width: 720px) {
  .rh-custom-config-grid { grid-template-columns: 1fr 1fr; }
  .rh-custom-fieldset--wide { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .rh-custom-config { padding: 12px 9px; }
  .rh-custom-config-head { gap: 8px; }
  .rh-custom-family { padding-inline: 8px; }
  .rh-custom-config-grid { grid-template-columns: 1fr; gap: 8px; }
  .rh-custom-fieldset--wide { grid-column: auto; }
  .rh-custom-choice-row, .rh-custom-patterns { gap: 6px; }
  .rh-custom-choice, .rh-custom-pattern { flex: 1 1 auto; }
  .rh-custom-score { max-height: clamp(250px, 43vh, 400px); }
  .rh-custom-config-footer { align-items: stretch; flex-direction: column; }
  .rh-custom-start { width: 100%; min-width: 0; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .rh-custom-config-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rh-custom-fieldset { padding: 7px; }
  .rh-custom-fieldset--wide { grid-column: span 3; }
  .rh-custom-score { max-height: clamp(175px, 34vh, 250px); }
}


/* P1 final — découverte pédagogique et état de maîtrise distinct des médailles. */
.rh-guided-screen--discover{max-width:900px}
.rh-guided-subhead--discover{margin-bottom:10px}
.rh-discover-card{padding:clamp(14px,2.7vw,24px);display:grid;gap:14px;border:1px solid #d5e2eb;border-top:3px solid var(--blue);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 10px 24px rgba(18,50,82,.055)}
.rh-discover-copy{text-align:center}.rh-discover-copy h2{margin:2px 0 4px;color:var(--navy);font-size:clamp(1.3rem,3vw,1.8rem)}.rh-discover-copy p{max-width:700px;margin:0 auto;color:var(--muted);font-size:.9rem;line-height:1.45}
.rh-discover-score-shell{min-height:118px;padding:8px;border:1px solid #dce7ee;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden}.rh-discover-score{width:min(650px,100%);min-height:102px}
.rh-discover-syllables{justify-self:center;max-width:720px;padding:9px 14px;border:1px solid #cbddeb;border-radius:999px;background:#f2f8fd;color:#315a78;text-align:center}.rh-discover-syllables[hidden]{display:none!important}.rh-discover-syllables strong{margin-right:7px;color:var(--navy)}.rh-discover-syllables span{font-weight:850}
.rh-discover-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.rh-discover-step{min-height:86px;padding:11px;border:1px solid #d4e1e9;border-radius:14px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;text-align:left;align-items:center}.rh-discover-step>span{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eaf4fd;color:#1769c2;font-weight:950}.rh-discover-step strong{color:var(--navy);font-size:.95rem}.rh-discover-step small{color:#667e90;font-size:.72rem;line-height:1.2}.rh-discover-step:hover{border-color:#9fc6e4;background:#f9fcff}.rh-discover-step:focus-visible,.rh-discover-start:focus-visible,.rh-discover-pad:focus-visible,.rh-discover-tempo button:focus-visible{outline:3px solid rgba(23,105,194,.2);outline-offset:2px}
.rh-discover-practice[hidden]{display:none!important}.rh-discover-pad{width:100%;min-height:68px;border:0;border-radius:15px;background:linear-gradient(180deg,#eaf4ff,#dceeff);color:var(--navy);font:inherit;cursor:pointer;display:grid;place-items:center;gap:2px;box-shadow:inset 0 0 0 1px rgba(23,105,194,.16)}.rh-discover-pad strong{font-size:1.05rem}.rh-discover-pad small{font-size:.72rem;color:#56728a}.rh-discover-pad:active{transform:translateY(1px);background:#d5eaff}
.rh-discover-feedback{min-height:22px;margin:0;color:#5c7487;text-align:center;font-size:.82rem;font-weight:750}
.rh-discover-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding-top:4px;border-top:1px solid #e1e9ee}.rh-discover-tempo{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px}.rh-discover-tempo button{width:38px;height:38px;border:1px solid #c7d9e5;border-radius:10px;background:#fff;color:var(--navy);font-size:1.2rem;font-weight:900;cursor:pointer}.rh-discover-tempo>div{display:grid;gap:2px;text-align:center}.rh-discover-tempo strong{color:var(--navy);font-size:.9rem}.rh-discover-tempo small{color:#6a8092;font-size:.7rem}.rh-discover-start{min-height:48px;padding:11px 20px;border:0;border-radius:13px;background:var(--blue);color:#fff;font:inherit;font-weight:950;cursor:pointer;box-shadow:0 8px 18px rgba(23,105,194,.18)}

/* Fin de lecture guidée : un seul grand bouton pour la variation suivante. */
.rh-guided-actions:not(:has(button:not([hidden]))){display:none}

/* P2 — À la carte : palette musicale compacte et types mis en avant. */
.rh-custom-subrow{margin-top:6px;padding-top:6px;border-top:1px dashed #d7e4e9}.rh-custom-subrow[hidden]{display:none!important}
.rh-custom-tempo-row>div{display:grid;gap:2px;text-align:center}.rh-custom-tempo-row small{color:#6b8090;font-size:9px;line-height:1.15}
.rh-custom-rhythm-fieldset{padding:10px;background:#fbfdfe}
.rh-custom-rhythm-help{margin:0 0 7px;color:#6a8090;font-size:9.5px;line-height:1.25}

/* Les quatre univers sont le premier vrai choix pédagogique de l'écran. */
#rh-custom-types{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:100%;
}
.rh-custom-type-card{
  --rh-type-accent:#2da867;--rh-type-soft:#f1fbf5;--rh-type-line:#bfe2ce;
  min-width:0;min-height:86px;padding:8px 11px;display:grid;grid-template-columns:minmax(92px,42%) minmax(0,1fr);
  align-items:center;gap:8px;border:1.5px solid var(--rh-type-line);border-radius:13px;background:linear-gradient(135deg,var(--rh-type-soft),#fff 72%);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.rh-custom-type-card[data-custom-type="ternary"]{--rh-type-accent:#2878c8;--rh-type-soft:#f0f7ff;--rh-type-line:#bed9f4}
.rh-custom-type-card[data-custom-type="both"]{--rh-type-accent:#8559c7;--rh-type-soft:#f8f3ff;--rh-type-line:#dac7f2}
.rh-custom-type-card[data-custom-type="irregular"]{--rh-type-accent:#e47b39;--rh-type-soft:#fff6ef;--rh-type-line:#f1cfb5}
.rh-custom-type-card:hover{border-color:var(--rh-type-accent);box-shadow:0 7px 18px rgba(30,70,105,.09);transform:translateY(-1px)}
.rh-custom-type-card[aria-pressed="true"]{border:2px solid var(--rh-type-accent);background:linear-gradient(135deg,var(--rh-type-soft),#fff 86%);box-shadow:0 7px 18px color-mix(in srgb,var(--rh-type-accent) 13%,transparent)}
.rh-custom-type-card:focus-visible{outline:3px solid color-mix(in srgb,var(--rh-type-accent) 24%,transparent);outline-offset:2px}
.rh-custom-type-preview{min-width:0;height:58px;display:flex;align-items:center;justify-content:center;gap:2px;position:relative;color:var(--rh-type-accent)}
.rh-custom-type-mini{display:block;width:100%;height:58px;min-width:0}
.rh-custom-type-card[data-custom-type="both"] .rh-custom-type-mini{width:46%}
.rh-custom-type-preview svg{display:block;width:100%;height:100%}
.rh-custom-type-preview svg path,.rh-custom-type-preview svg line,.rh-custom-type-preview svg polygon,.rh-custom-type-preview svg rect{stroke:currentColor}
.rh-custom-type-preview svg path[fill]:not([fill="none"]),.rh-custom-type-preview svg polygon[fill]:not([fill="none"]),.rh-custom-type-preview svg rect[fill]:not([fill="none"]){fill:currentColor}
.rh-custom-type-plus{flex:none;color:var(--rh-type-accent);font-size:20px;line-height:1;font-weight:950}
.rh-custom-type-grouping{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);padding:1px 5px;border-radius:999px;background:#fff;color:var(--rh-type-accent);font-size:8.5px;font-weight:950;letter-spacing:.03em;white-space:nowrap}
.rh-custom-type-copy{min-width:0;display:grid;gap:3px}
.rh-custom-type-copy strong{color:var(--rh-type-accent);font-size:13px;font-weight:950;line-height:1.05}
.rh-custom-type-copy small{color:#617589;font-size:9.5px;font-weight:750;line-height:1.15}

.rh-custom-family[data-type="binary"]{border-color:#b8dcc7;background:#effaf3;color:#24734c}
.rh-custom-family[data-type="ternary"]{border-color:#bfd9f2;background:#f0f7ff;color:#1f6fb7}
.rh-custom-family[data-type="both"]{border-color:#d7c4ef;background:#f7f1ff;color:#7447b3}
.rh-custom-family[data-type="irregular"]{border-color:#efceb5;background:#fff5ed;color:#c8662f}

/* Les familles rythmiques deviennent des panneaux colorés réguliers. */
.rh-custom-patterns{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:7px!important;align-items:stretch}
.rh-custom-pattern-group{
  --rh-palette-accent:#2878c8;--rh-palette-soft:#edf6ff;--rh-palette-border:#c9def3;
  min-width:0;display:grid;align-content:start;gap:6px;padding:7px;border:1px solid var(--rh-palette-border);
  border-radius:13px;background:linear-gradient(145deg,var(--rh-palette-soft),rgba(255,255,255,.96) 72%);
}
.rh-custom-pattern-group[data-group="simple"],.rh-custom-pattern-group[data-group="ternary-core"],.rh-custom-pattern-group[data-group="binary-family"]{--rh-palette-accent:#2878c8;--rh-palette-soft:#edf6ff;--rh-palette-border:#c9def3}
.rh-custom-pattern-group[data-group="divisions"],.rh-custom-pattern-group[data-group="ternary-splits"],.rh-custom-pattern-group[data-group="short-groups"]{--rh-palette-accent:#2f9b66;--rh-palette-soft:#eef9f3;--rh-palette-border:#c8e5d4}
.rh-custom-pattern-group[data-group="rests"],.rh-custom-pattern-group[data-group="ternary-rests"]{--rh-palette-accent:#e36f61;--rh-palette-soft:#fff2ef;--rh-palette-border:#f0d2cc}
.rh-custom-pattern-group[data-group="compositions"],.rh-custom-pattern-group[data-group="long-groups"],.rh-custom-pattern-group[data-group="ternary-family"]{--rh-palette-accent:#cf9328;--rh-palette-soft:#fff8e8;--rh-palette-border:#ecdcae}
.rh-custom-pattern-group h3{margin:0;padding:1px 3px 3px;color:var(--rh-palette-accent);font-size:9px;font-weight:950;letter-spacing:.065em;text-align:center;text-transform:uppercase}
.rh-custom-pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:5px}
.rh-custom-patterns[data-group-count="3"] .rh-custom-pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.rh-custom-patterns[data-group-count="2"] .rh-custom-pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.rh-custom-pattern{
  position:relative;min-width:0!important;width:100%;min-height:72px!important;padding:4px 5px 6px!important;display:grid!important;
  grid-template-rows:40px minmax(18px,auto);place-items:center;gap:1px;text-align:center!important;border-radius:10px!important;
  border-color:color-mix(in srgb,var(--rh-palette-accent) 20%,#cbdbe4)!important;background:rgba(255,255,255,.96)!important;
}
.rh-custom-pattern:hover{border-color:color-mix(in srgb,var(--rh-palette-accent) 52%,#b8cad8)!important;box-shadow:0 5px 12px rgba(42,78,106,.07);transform:translateY(-1px)}
.rh-custom-pattern[aria-pressed="true"]{border-color:#45a56f!important;background:linear-gradient(180deg,#f0fbf4,#e6f7ed)!important;color:#17623e!important;box-shadow:inset 0 0 0 1px rgba(69,165,111,.15),0 5px 12px rgba(40,121,76,.07)!important}
.rh-custom-pattern[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:5px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#3ca266;color:#fff;font-size:9px;font-weight:1000;box-shadow:0 2px 4px rgba(28,111,66,.14)}
.rh-custom-pattern-preview{width:100%;height:40px;display:block;overflow:visible;color:var(--navy)}
.rh-custom-pattern-preview svg{display:block;width:100%;height:100%}
.rh-custom-pattern strong{align-self:start;color:inherit;font-size:8.8px;line-height:1.08;text-align:center}
.rh-custom-aids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px!important}
.rh-custom-aids .rh-custom-choice{min-width:0;min-height:32px;padding:5px 7px;white-space:nowrap}
.rh-custom-live-syllables{margin:-2px auto 9px;padding:7px 12px;width:max-content;max-width:100%;border:1px solid #cfe0eb;border-radius:999px;background:#f4f9fd;color:#335f7c;font-size:.76rem;font-weight:850;text-align:center}.rh-custom-live-syllables[hidden]{display:none!important}
.rh-custom-choice:disabled{opacity:.75;cursor:default}

/* Desktop : toute la configuration doit tenir dans un écran standard. */
@media(min-width:1000px){
  .rh-view[data-view="custom"]{padding:12px 14px 14px}
  .rh-view[data-view="custom"] .rh-section-head{min-height:52px;padding-block:5px}
  .rh-view[data-view="custom"] .rh-section-title h1{font-size:22px}
  .rh-view[data-view="custom"] .rh-section-title p{margin-top:2px;font-size:10px}
  .rh-custom-config{width:min(1100px,100%);margin-top:8px;padding:11px 12px;border-radius:15px}
  .rh-custom-config-head{gap:10px}
  .rh-custom-config h2{font-size:21px}
  .rh-custom-config-head p{max-width:760px;margin-top:2px;font-size:10px;line-height:1.25}
  .rh-custom-family{padding:5px 9px;font-size:10px}
  .rh-custom-config-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:8px}
  .rh-custom-fieldset{padding:7px;border-radius:11px}
  .rh-custom-fieldset legend{font-size:9px}
  .rh-custom-fieldset--wide{grid-column:1/-1}
  .rh-custom-fieldset--meter{grid-column:span 4}
  .rh-custom-fieldset--tempo{grid-column:span 4}
  .rh-custom-fieldset--length{grid-column:span 3}
  .rh-custom-fieldset--count{grid-column:span 3}
  .rh-custom-fieldset--aids{grid-column:span 6}
  .rh-custom-choice{min-height:32px;padding:5px 9px;font-size:10px}
  .rh-custom-step{min-height:32px;font-size:18px}
  .rh-custom-tempo-row{grid-template-columns:34px minmax(105px,1fr) 34px;gap:5px}
  .rh-custom-tempo-row strong{font-size:10px}
  .rh-custom-rhythm-fieldset{padding:7px 8px 8px}
  .rh-custom-rhythm-help{display:none}
  .rh-custom-patterns{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:6px!important}
  .rh-custom-patterns[data-group-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rh-custom-patterns[data-group-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rh-custom-patterns[data-group-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-custom-patterns[data-group-count="1"]{grid-template-columns:1fr}
  .rh-custom-config-footer{margin-top:7px;padding-top:7px}
  .rh-custom-config-footer p{font-size:9px}
  .rh-custom-start{min-height:43px;padding:8px 20px;font-size:13px}
}

@media(min-width:1000px) and (max-height:950px){
  :root{--page-pad:8px}
  .nl-topbar{min-height:54px;margin-bottom:7px;padding-block:6px}
  .nl-note{font-size:23px}.nl-word{font-size:19px}.nl-module{font-size:13px}.nl-site{min-height:36px;padding-block:5px}
  .rh-view[data-view="custom"]{padding:5px 7px 7px}
  .rh-view[data-view="custom"]>.rh-section-head{display:none}
  .rh-custom-inline-back{display:inline-flex;align-items:center;justify-content:center}
  .rh-custom-config{margin-top:0;padding:7px 8px}
  .rh-custom-config-head{align-items:center;gap:7px}.rh-custom-config-copy{min-width:0;flex:1}.rh-custom-config h2{font-size:18px}.rh-custom-config-head p{display:none}.rh-custom-family{padding:4px 8px;font-size:9px}
  .rh-custom-config-grid{gap:4px;margin-top:5px}.rh-custom-fieldset{padding:5px}.rh-custom-fieldset legend{font-size:8px}
  #rh-custom-types{gap:6px}.rh-custom-type-card{min-height:68px;padding:5px 8px;grid-template-columns:minmax(78px,39%) minmax(0,1fr);gap:5px}
  .rh-custom-type-preview,.rh-custom-type-mini{height:46px}.rh-custom-type-copy strong{font-size:11px}.rh-custom-type-copy small{font-size:8px}.rh-custom-type-grouping{font-size:7.5px}
  .rh-custom-choice{min-height:28px;padding:4px 7px;font-size:9px}.rh-custom-step{min-height:28px;font-size:16px}.rh-custom-tempo-row{grid-template-columns:30px minmax(100px,1fr) 30px}
  .rh-custom-rhythm-fieldset{padding:5px 6px}.rh-custom-pattern-group{gap:4px;padding:5px}.rh-custom-pattern-group h3{font-size:8px}
  .rh-custom-pattern-grid{gap:4px}.rh-custom-pattern{min-height:59px!important;padding:2px 4px 4px!important;grid-template-rows:32px minmax(16px,auto)}
  .rh-custom-pattern-preview{height:32px}.rh-custom-pattern strong{font-size:7.8px}.rh-custom-pattern[aria-pressed="true"]::after{width:13px;height:13px;font-size:8px;top:3px;right:4px}
  .rh-custom-aids{gap:4px!important}.rh-custom-aids .rh-custom-choice{min-height:27px;padding:3px 5px;font-size:8.5px}
  .rh-custom-config-footer{margin-top:4px;padding-top:4px}.rh-custom-start{min-height:38px;padding:6px 17px;font-size:12px}.rh-custom-config-footer p{font-size:8px}
}

@media(max-width:999px){
  .rh-custom-patterns[data-group-count="2"] .rh-custom-pattern-grid,.rh-custom-patterns[data-group-count="3"] .rh-custom-pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #rh-custom-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-custom-patterns{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rh-custom-fieldset--aids{grid-column:1/-1}
}
@media(max-width:700px){
  .rh-custom-patterns[data-group-count="2"] .rh-custom-pattern-grid,.rh-custom-patterns[data-group-count="3"] .rh-custom-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-discover-steps{grid-template-columns:1fr}.rh-discover-step{min-height:64px}.rh-discover-bottom{grid-template-columns:1fr}.rh-discover-start{width:100%}
  #rh-custom-types{grid-template-columns:1fr 1fr;gap:6px}.rh-custom-type-card{min-height:76px;padding:6px 8px;grid-template-columns:82px minmax(0,1fr)}
  .rh-custom-type-preview,.rh-custom-type-mini{height:50px}.rh-custom-type-copy strong{font-size:11px}.rh-custom-type-copy small{font-size:8.5px}
  .rh-custom-patterns{grid-template-columns:1fr!important}.rh-custom-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-custom-aids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .rh-discover-card{padding:11px 8px}.rh-discover-score-shell{min-height:98px;padding:4px}.rh-discover-score{min-height:90px}.rh-discover-syllables{border-radius:12px}.rh-discover-tempo{grid-template-columns:36px minmax(0,1fr) 36px}
  #rh-custom-types{grid-template-columns:1fr}.rh-custom-type-card{grid-template-columns:96px minmax(0,1fr)}
  .rh-custom-pattern{min-height:66px!important;grid-template-rows:36px auto}.rh-custom-pattern-preview{height:36px}
}
@media(max-width:420px){.rh-custom-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.rh-custom-pattern-group{gap:4px;padding:5px}.rh-custom-pattern{min-height:64px!important}}
@media(max-height:620px) and (orientation:landscape){.rh-discover-card{gap:8px;padding:9px}.rh-discover-score-shell{min-height:82px}.rh-discover-score{min-height:74px}.rh-discover-step{min-height:58px}.rh-discover-bottom{padding-top:2px}.rh-discover-copy p{font-size:.78rem}}

@media(max-width:700px){.rh-discover-steps{grid-template-columns:1fr}.rh-discover-step{min-height:64px}.rh-discover-bottom{grid-template-columns:1fr}.rh-discover-start{width:100%}.rh-custom-pattern{min-width:0;flex:1 1 135px}}
@media(max-width:520px){.rh-discover-card{padding:11px 8px}.rh-discover-score-shell{min-height:98px;padding:4px}.rh-discover-score{min-height:90px}.rh-discover-syllables{border-radius:12px}.rh-discover-tempo{grid-template-columns:36px minmax(0,1fr) 36px}.rh-custom-aids .rh-custom-choice{flex:1 1 45%}.rh-custom-pattern{min-height:84px!important;grid-template-rows:48px auto}.rh-custom-pattern-preview{height:48px}}
@media(max-width:760px){.rh-custom-pattern-grid{grid-template-columns:repeat(auto-fill,minmax(122px,150px))}}
@media(max-width:420px){.rh-custom-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.rh-custom-pattern-group{gap:6px;padding:8px}.rh-custom-rhythm-help{font-size:9px}.rh-custom-pattern{min-height:90px!important}}
@media(max-height:620px) and (orientation:landscape){.rh-discover-card{gap:8px;padding:9px}.rh-discover-score-shell{min-height:82px}.rh-discover-score{min-height:74px}.rh-discover-step{min-height:58px}.rh-discover-bottom{padding-top:2px}.rh-discover-copy p{font-size:.78rem}}

/* P3/P4 final — familles de défis, oreille, cible et récompenses */
.rh-challenge-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.rh-challenge-family { display: grid; gap: 9px; }
.rh-challenge-family-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 2px; }
.rh-challenge-family-head div { min-width:0; }
.rh-challenge-family-head strong { display:block; color:var(--navy); font-size:15px; }
.rh-challenge-family-head span { display:block; margin-top:2px; color:var(--muted); font-size:10px; line-height:1.3; }
.rh-challenge-family-head b { flex:none; min-width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#edf5ff; color:var(--blue); font-size:14px; }
.rh-challenge-family-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rh-challenge-family[data-family="pulse"] .rh-challenge-family-head b { background:#fff3ee; color:var(--coral); }
.rh-challenge-family[data-family="ear"] .rh-challenge-family-head b { background:#f0faf4; color:var(--green); }
.rh-challenge-family[data-family="stage"] .rh-challenge-family-head b { background:#fff8e9; color:#a86d0e; }
.rh-challenge-card { position:relative; }
.rh-challenge-catalog-award { position:absolute; right:10px; top:8px; display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:3px 7px; border-radius:999px; background:#eef3f7; color:#60758a; font-size:8px; font-weight:900; text-transform:uppercase; }
.rh-challenge-catalog-award[data-award="1"] { background:#fff0e8; color:#a75b2b; }
.rh-challenge-catalog-award[data-award="2"] { background:#f1f5f8; color:#5d7080; }
.rh-challenge-catalog-award[data-award="3"] { background:#fff8d9; color:#98700a; box-shadow:0 0 0 1px rgba(211,162,29,.18); }

.rh-challenge-lives[data-resource="darts"] { letter-spacing:5px; color:#1269bb; font-size:20px; }
.rh-challenge-target { display:grid; justify-items:center; gap:7px; margin:0 auto 4px; }
.rh-target-rings { position:relative; width:154px; height:154px; border-radius:50%; background:#fff4ee; border:5px solid #31465a; box-shadow:0 9px 22px rgba(24,48,72,.16); overflow:visible; }
/* Premier temps : une vraie cible de fléchettes, distincte du métronome commun. */
.rh-target-rings::before,.rh-target-rings::after,.rh-target-rings>i { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.rh-target-rings::before { width:78%; height:78%; background:#fff0d5; border:2px solid #eabf69; }
.rh-target-rings::after { width:55%; height:55%; background:#eaf6ef; border:2px solid #86c59f; }
.rh-target-rings>i:nth-child(1) { width:31%; height:31%; background:#e7f1ff; border:2px solid #7aa9dc; z-index:2; }
.rh-target-rings>i:nth-child(2) { width:27px; height:27px; background:#2da867; border:5px solid #fff; box-shadow:0 0 0 3px #1769c2,0 3px 7px rgba(11,43,102,.18); z-index:3; }
.rh-target-rings>i:nth-child(3) { width:84%; height:2px; border-radius:0; background:rgba(141,163,182,.34); z-index:4; }
.rh-target-rings>b { position:absolute; inset:0; z-index:5; display:grid; place-items:center; color:#fff; font-size:12px; pointer-events:none; }
#rh-challenge-target-markers { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:visible; }

.rh-target-dart { position:absolute; left:var(--land-x); top:var(--land-y); width:62px; height:10px; opacity:0; z-index:10; transform-origin:7px 50%; transform:translate(145px,-118px) rotate(-34deg) scale(1.45); filter:drop-shadow(0 4px 4px rgba(0,0,0,.26)); pointer-events:none; }
.rh-target-dart>i { position:absolute; left:7px; top:3px; width:45px; height:4px; border-radius:999px; background:linear-gradient(90deg,#273543,#687787 65%,#4f56bd 66%); }
.rh-target-dart>i::before { content:""; position:absolute; left:-9px; top:-2px; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:11px solid #c9d1d7; }
.rh-target-dart>i::after { content:""; position:absolute; right:-6px; top:-8px; width:17px; height:20px; background:#ff6758; clip-path:polygon(0 40%,100% 0,75% 50%,100% 100%,0 60%); }
.rh-target-dart.near>i::after { background:#f0a331; }
.rh-target-dart.wrong>i::after { background:#d8584a; }
.rh-target-dart.fly { animation:rhTargetDartFly .64s cubic-bezier(.18,.78,.26,1.05) forwards; }
.rh-target-dart.landed { opacity:1; transform:translate(-2px,-4px) rotate(-8deg) scale(.82); }
@keyframes rhTargetDartFly { 0%{opacity:0;transform:translate(145px,-118px) rotate(-34deg) scale(1.45)} 18%{opacity:1} 78%{transform:translate(12px,-8px) rotate(-12deg) scale(.92)} 100%{opacity:1;transform:translate(-2px,-4px) rotate(-8deg) scale(.82)} }
.rh-target-impact { position:absolute; left:var(--land-x); top:var(--land-y); width:16px; height:16px; border:3px solid #ffe273; border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.2); z-index:9; pointer-events:none; }
.rh-target-impact.show { animation:rhTargetImpact .62s ease-out forwards; }
@keyframes rhTargetImpact { 0%{opacity:1;transform:translate(-50%,-50%) scale(.2)} 55%{opacity:.9;transform:translate(-50%,-50%) scale(2.1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3)} }
.rh-challenge-target.hit .rh-target-rings { animation:rhTargetBoardHit .2s ease; }
@keyframes rhTargetBoardHit { 50%{transform:scale(.985)} 100%{transform:none} }
.rh-challenge-target small { color:var(--muted); font-size:9px; text-align:center; }

.rh-challenge-recognition { display:grid; gap:12px; width:min(620px,100%); margin:0 auto; padding:16px; border:1px solid #dbe7ef; border-radius:16px; background:linear-gradient(180deg,#fff,#f7fbfe); }
.rh-recognition-visual { min-height:78px; display:grid; place-items:center; padding:12px; border-radius:13px; background:#eef6fd; color:var(--navy); font-weight:900; font-size:18px; text-align:center; }
.rh-recognition-visual small { display:block; margin-top:5px; color:var(--muted); font-size:10px; font-weight:700; }
.rh-recognition-answers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.rh-recognition-answers button { min-width:120px; min-height:45px; padding:9px 14px; border:1px solid #c8dceb; border-radius:12px; background:#fff; color:var(--navy); font:inherit; font-weight:900; cursor:pointer; }
.rh-recognition-answers button:hover,.rh-recognition-answers button:focus-visible { border-color:var(--blue); background:#edf6ff; outline:none; }
.rh-recognition-answers button:disabled { cursor:default; opacity:.56; }
.rh-recognition-window { display:flex; justify-content:center; gap:6px; min-height:16px; }
.rh-recognition-window i { width:11px; height:11px; border-radius:50%; background:#d9e3ea; }
.rh-recognition-window i.good { background:var(--green); }
.rh-recognition-window i.wrong { background:var(--coral); }

.rh-challenge-result { align-items:center; }
.rh-challenge-award { display:inline-flex; align-items:center; gap:7px; margin-bottom:6px; padding:7px 11px; border-radius:999px; background:#edf2f6; color:#647586; }
.rh-challenge-award i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#dce5eb; font-style:normal; font-weight:900; }
.rh-challenge-award[data-award="1"] { background:#fff0e7; color:#a4572a; }
.rh-challenge-award[data-award="1"] i { background:#d98b5a; color:#fff; }
.rh-challenge-award[data-award="2"] { background:#f1f5f8; color:#526878; }
.rh-challenge-award[data-award="2"] i { background:#aab9c4; color:#fff; }
.rh-challenge-award[data-award="3"] { background:#fff7d2; color:#8d6809; box-shadow:0 0 0 1px rgba(214,168,33,.18),0 8px 20px rgba(214,168,33,.12); animation:rhGoldAward .7s ease both; }
.rh-challenge-award[data-award="3"] i { background:#e2b321; color:#fff; }
@keyframes rhGoldAward { 0%{transform:scale(.82) rotate(-4deg);opacity:.2} 60%{transform:scale(1.07) rotate(2deg)} 100%{transform:scale(1);opacity:1} }

@media(max-width:850px){ .rh-challenge-family-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){
  .rh-challenge-family-cards{grid-template-columns:1fr;}
  .rh-target-rings{width:126px;height:126px;}
  
  .rh-target-dart{width:53px;transform:translate(118px,-96px) rotate(-34deg) scale(1.25)} .rh-target-dart>i{width:39px}
  .rh-recognition-answers button{flex:1 1 42%;min-width:0;}
}
.rh-challenge-stage[data-challenge="first-beat"] { grid-template-rows:auto auto minmax(0,1fr); }
.rh-challenge-stage[data-challenge="first-beat"] .rh-challenge-target { min-height:156px; }
.rh-challenge-stage[data-challenge="groupings"] { grid-template-rows:auto minmax(0,1fr); }
.rh-challenge-stage[data-challenge="groupings"] .rh-challenge-recognition { align-self:center; }
@media(max-width:560px){
 .rh-challenge-stage[data-challenge="first-beat"] .rh-challenge-target{min-height:132px;}
}

@media(prefers-reduced-motion:reduce){.rh-target-dart.fly{animation-duration:.15s}.rh-target-impact.show{animation-duration:.2s}}

/* Audit pédagogique/visuel 2026-08 — aides transversales et hiérarchie stable. */
.rh-practice-aids{
  display:flex;justify-content:flex-end;align-items:center;min-height:30px;margin:2px 0 4px;
}
.rh-practice-aid{
  border:1px solid #c9d8e4;background:#fff;color:#36516c;border-radius:999px;padding:6px 10px;
  font:800 .74rem/1 system-ui,sans-serif;cursor:pointer;
}
.rh-practice-aid[aria-pressed="true"]{background:#eef5ff;border-color:#7aaae0;color:#1769c2}
.rh-practice-conducting{
  width:112px;height:82px;margin:0 auto 4px;padding:4px;border:1px solid #dbe6ee;border-radius:14px;background:#fbfdff;
}
.rh-practice-conducting[hidden]{display:none}
.rh-practice-conducting .rh-conducting-svg{width:100%;height:100%}

@media(max-width:700px){
  .rh-practice-conducting{width:96px;height:70px}
}

/* Défis : une même carte, avec un accent de famille discret et constant. */
.rh-challenge-family{--rh-family:#2878c8;--rh-family-soft:#f3f8ff;--rh-family-ink:#1769c2}
.rh-challenge-family[data-family="pulse"]{--rh-family:#ef7b6b;--rh-family-soft:#fff6f2;--rh-family-ink:#b9574b}
.rh-challenge-family[data-family="ear"]{--rh-family:#38a66d;--rh-family-soft:#f3fbf6;--rh-family-ink:#247b4e}
.rh-challenge-family[data-family="stage"]{--rh-family:#d89a2f;--rh-family-soft:#fff9ed;--rh-family-ink:#996814}
.rh-challenge-family-head{justify-content:flex-start;align-items:center}
.rh-challenge-family-head b{order:-1;background:var(--rh-family-soft)!important;color:var(--rh-family-ink)!important}
.rh-challenge-family .rh-challenge-card{border-top-color:var(--rh-family);background:var(--rh-family-soft)}
.rh-challenge-family .rh-challenge-card:hover:not(:disabled),
.rh-challenge-family .rh-challenge-card:focus-visible{border-color:var(--rh-family);background:#fff}
.rh-challenge-family .rh-challenge-card-icon,
.rh-challenge-family .rh-challenge-card-arrow,
.rh-challenge-family .rh-challenge-card-state{color:var(--rh-family-ink)}

/* P2.1 — stabilité visuelle À la carte.
   Le changement de type modifie les contenus, jamais les grands repères spatiaux. */
@media(min-width:1000px){
  /* Une seule en-tête sur PC, quelle que soit la hauteur de la fenêtre. */
  .rh-view[data-view="custom"]{padding:6px 8px 8px}
  .rh-view[data-view="custom"]>.rh-section-head{display:none}
  .rh-custom-inline-back{display:inline-flex;align-items:center;justify-content:center}
  .rh-custom-config{width:min(1100px,100%);margin-top:0}

  /* Mesure et tempo occupent toujours la même hauteur. L'irrégulier peut
     révéler son groupement sans faire descendre tout le reste de l'écran. */
  .rh-custom-fieldset--meter,.rh-custom-fieldset--tempo{min-height:66px}
  .rh-custom-fieldset--meter{position:relative}
  .rh-custom-subrow{min-height:27px}
  .rh-custom-subrow[hidden]{display:flex!important;visibility:hidden;pointer-events:none}

  /* Quatre panneaux fixes pour tous les modes. */
  .rh-custom-patterns,
  .rh-custom-patterns[data-group-count="1"],
  .rh-custom-patterns[data-group-count="2"],
  .rh-custom-patterns[data-group-count="3"],
  .rh-custom-patterns[data-group-count="4"]{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch;
  }
  .rh-custom-rhythm-fieldset{height:284px;min-height:284px;overflow:hidden}
  .rh-custom-patterns{height:100%}
  .rh-custom-pattern-group{height:100%;min-height:0;overflow:hidden}
  .rh-custom-pattern-grid,
  .rh-custom-patterns[data-group-count="2"] .rh-custom-pattern-grid,
  .rh-custom-patterns[data-group-count="3"] .rh-custom-pattern-grid,
  .rh-custom-patterns[data-group-count="4"] .rh-custom-pattern-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
  }
  .rh-custom-pattern{min-height:61px!important;grid-template-rows:34px minmax(15px,auto)}
  .rh-custom-pattern-preview{height:34px}
  .rh-custom-pattern strong{font-size:7.6px}

  /* Les trois réglages du bas forment une barre fixe. */
  .rh-custom-fieldset--length,.rh-custom-fieldset--count,.rh-custom-fieldset--aids{min-height:72px}
}

@media(min-width:1000px) and (max-height:820px){
  .rh-custom-config{padding:6px 7px}
  .rh-custom-config-grid{gap:4px;margin-top:4px}
  .rh-custom-fieldset--meter,.rh-custom-fieldset--tempo{min-height:60px}
  .rh-custom-rhythm-fieldset{height:250px;min-height:250px}
  .rh-custom-pattern-group{padding:4px;gap:3px}
  .rh-custom-pattern-group h3{font-size:7.3px;padding-bottom:1px}
  .rh-custom-pattern-grid{gap:3px}
  .rh-custom-pattern{min-height:52px!important;padding:1px 2px 3px!important;grid-template-rows:28px minmax(14px,auto)}
  .rh-custom-pattern-preview{height:28px}
  .rh-custom-pattern strong{font-size:6.9px;line-height:1.03}
  .rh-custom-fieldset--length,.rh-custom-fieldset--count,.rh-custom-fieldset--aids{min-height:62px}
}

/* Couleurs des quatre panneaux stables selon l'univers choisi. */
.rh-custom-pattern-group[data-group="ternary-pulse"],
.rh-custom-pattern-group[data-group="binary-bases"],
.rh-custom-pattern-group[data-group="short-bases"]{--rh-palette-accent:#2878c8;--rh-palette-soft:#edf6ff;--rh-palette-border:#c9def3}
.rh-custom-pattern-group[data-group="ternary-cells"],
.rh-custom-pattern-group[data-group="binary-divisions"],
.rh-custom-pattern-group[data-group="short-cells"]{--rh-palette-accent:#2f9b66;--rh-palette-soft:#eef9f3;--rh-palette-border:#c8e5d4}
.rh-custom-pattern-group[data-group="ternary-rests"]{--rh-palette-accent:#e36f61;--rh-palette-soft:#fff2ef;--rh-palette-border:#f0d2cc}
.rh-custom-pattern-group[data-group="ternary-splits"],
.rh-custom-pattern-group[data-group="ternary-bases"],
.rh-custom-pattern-group[data-group="long-bases"]{--rh-palette-accent:#cf9328;--rh-palette-soft:#fff8e8;--rh-palette-border:#ecdcae}
.rh-custom-pattern-group[data-group="ternary-variations"],
.rh-custom-pattern-group[data-group="long-variations"]{--rh-palette-accent:#8559c7;--rh-palette-soft:#f8f3ff;--rh-palette-border:#dac7f2}

/* 2026-08-18 — préparation libre + bilan pédagogique À la carte. */
.rh-practice-report{
  width:min(940px,100%);margin:28px auto 0;padding:24px;border:1px solid #cfe0ea;border-top:4px solid var(--green);
  border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(11,43,102,.08);box-sizing:border-box;
}
.rh-report-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}
.rh-report-score{width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 57%,transparent 58%),conic-gradient(var(--green) 0 var(--report-progress,78%),#e6eef3 var(--report-progress,78%) 100%);border:1px solid #d4e3eb;color:var(--navy);font-size:28px;font-weight:1000;box-shadow:inset 0 0 0 8px #f7fbf9}
.rh-report-copy h2{margin:4px 0 7px;color:var(--navy);font-size:28px;line-height:1.05}
.rh-report-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.rh-report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.rh-report-metric{--metric:#2878c8;--metric-soft:#f3f8ff;padding:12px 13px;border:1px solid color-mix(in srgb,var(--metric) 26%,#d7e5ee);border-radius:14px;background:var(--metric-soft);min-height:92px;box-sizing:border-box}
.rh-report-metric.tone-green{--metric:#2f9b66;--metric-soft:#f0faf4}.rh-report-metric.tone-coral{--metric:#df7063;--metric-soft:#fff4f1}.rh-report-metric.tone-amber{--metric:#c9912e;--metric-soft:#fff9ec}
.rh-report-metric span{display:block;color:var(--metric);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.055em}
.rh-report-metric strong{display:block;margin:5px 0 2px;color:var(--navy);font-size:24px}.rh-report-metric small{display:block;color:#667b8e;font-size:10px;line-height:1.25}
.rh-report-advice{margin-top:14px;padding:14px 16px;border:1px solid #d8e5ed;border-radius:15px;background:#f9fcfe}
.rh-report-advice-head{display:flex;gap:10px;align-items:center}.rh-report-advice-head>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eaf4ff;color:var(--blue);font-weight:1000}
.rh-report-advice-head strong{display:block;color:var(--navy);font-size:13px}.rh-report-advice-head small{display:block;margin-top:2px;color:var(--muted);font-size:9px}
.rh-report-advice ul{margin:10px 0 0;padding-left:20px;color:#36516c;font-size:12px;line-height:1.4}.rh-report-advice li+li{margin-top:5px}
.rh-report-actionbar{margin-top:16px}.rh-report-action{width:100%;min-height:58px;margin:0;background:var(--blue);color:#fff}

/* La préparation n'est plus un compte à rebours imposé : les deux mesures
   forment une boucle d'installation et l'élève choisit son prochain premier temps. */
#rh-custom-panel[data-status="precount"],#rh-guided-panel[data-status="precount"]{background:#f5f9fc}
#rh-custom-panel[data-status="precount"] .rh-guided-summary>div:first-child strong,
#rh-guided-panel[data-status="precount"] .rh-guided-summary>div:first-child strong{color:var(--blue)}
#rh-custom-panel[data-status="precount"] #rh-custom-tap,
#rh-guided-panel[data-status="precount"] #rh-guided-tap{background:var(--blue);color:#fff}
#rh-custom-panel[data-status="precount"] #rh-custom-tap:disabled,
#rh-guided-panel[data-status="precount"] #rh-guided-tap:disabled{background:#7897ac;color:#fff;opacity:1}

@media(max-width:700px){
  .rh-practice-report{margin-top:12px;padding:15px;border-radius:16px}.rh-report-hero{grid-template-columns:92px minmax(0,1fr);gap:12px}.rh-report-score{width:84px;height:84px;font-size:20px}.rh-report-copy h2{font-size:21px}.rh-report-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rh-report-metric{min-height:82px;padding:10px}
}
@media(min-width:1000px) and (max-height:820px){
  .rh-practice-report{margin-top:10px;padding:16px 18px}.rh-report-hero{grid-template-columns:105px minmax(0,1fr);gap:14px}.rh-report-score{width:92px;height:92px;font-size:22px}.rh-report-copy h2{font-size:23px}.rh-report-copy p{font-size:11px}.rh-report-metrics{margin-top:12px;gap:7px}.rh-report-metric{min-height:74px;padding:8px 10px}.rh-report-metric strong{font-size:20px}.rh-report-advice{margin-top:9px;padding:10px 12px}.rh-report-advice ul{margin-top:6px;font-size:10.5px}.rh-report-actionbar{margin-top:10px}.rh-report-action{min-height:50px}
}
@media(min-width:1000px) and (max-height:820px){
  .rh-view[data-view="custom-play"]{padding:10px 14px 12px}
  .rh-view[data-view="custom-play"]>.rh-section-head{min-height:58px;padding-block:5px}
  .rh-view[data-view="custom-play"] .rh-custom-live{margin-top:8px;padding-top:16px;padding-bottom:16px}
}

/* Envoi facultatif du bilan vers le tableau pédagogique commun Notalix */
.rh-result-send{margin-top:12px;padding:13px 15px;border:1px solid #cfe3d8;border-radius:15px;background:linear-gradient(135deg,#f8fcfa,#f2faf6)}
.rh-result-send-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rh-result-send-head h3{margin:2px 0 4px;color:var(--navy);font-size:16px;line-height:1.1}
.rh-result-send-head p{margin:0;max-width:650px;color:var(--muted);font-size:10.5px;line-height:1.4}
.rh-result-send-open,.rh-result-send-submit{border:1px solid #2da76b;border-radius:12px;background:#ecfaf2;color:#08723e;font:inherit;font-size:11px;font-weight:900;min-height:42px;padding:0 16px;cursor:pointer;white-space:nowrap}
.rh-result-send-open:hover,.rh-result-send-submit:hover{background:#def6e9}
.rh-result-send-form{margin-top:12px;padding-top:12px;border-top:1px solid #d9e9e0}
.rh-result-send-preview{display:grid;gap:3px;margin-bottom:10px;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid #dce8ee;color:#34516b;font-size:10.5px;line-height:1.35}
.rh-result-send-preview strong{color:var(--navy);font-size:11px}.rh-result-send-preview small{color:#64798c}
.rh-result-send-fields{display:grid;grid-template-columns:1.25fr .65fr 1fr 1fr;gap:9px}
.rh-result-send-fields label{display:grid;gap:4px;color:#294864;font-size:9.5px;font-weight:850}.rh-result-send-fields label small{font-weight:600;color:var(--muted)}
.rh-result-send-fields input{box-sizing:border-box;width:100%;height:38px;border:1px solid #cbdde8;border-radius:10px;background:#fff;padding:0 10px;color:var(--navy);font:inherit;font-size:11px;outline:none}
.rh-result-send-fields input:focus{border-color:#2a79c9;box-shadow:0 0 0 3px rgba(42,121,201,.09)}
.rh-result-recipient-help{margin:7px 0 0;color:#526b80;font-size:10px;font-weight:700}.rh-result-send-consent{display:flex;align-items:center;gap:7px;margin-top:9px;color:#36516c;font-size:10px}.rh-result-send-consent input{accent-color:#2da76b}
.rh-result-send-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}
.rh-result-send-cancel{border:1px solid #cadce7;border-radius:11px;background:#fff;color:#36516c;font:inherit;font-size:10.5px;font-weight:850;min-height:40px;padding:0 14px;cursor:pointer}
.rh-result-send-submit{background:#1f9e62;color:#fff;border-color:#1f9e62;min-width:118px}.rh-result-send-submit:hover{background:#178451}.rh-result-send-submit:disabled{cursor:default;opacity:.68}
.rh-result-send-status{min-height:16px;margin:7px 0 0;text-align:right;color:#64798c;font-size:10px;font-weight:750}.rh-result-send-status[data-kind="success"]{color:#08723e}.rh-result-send-status[data-kind="error"]{color:#b6493e}.rh-result-send-status[data-kind="pending"]{color:#246ea9}
@media(max-width:700px){.rh-result-send-head{align-items:flex-start;flex-direction:column}.rh-result-send-open{width:100%}.rh-result-send-fields{grid-template-columns:1fr}.rh-result-send-actions>*{flex:1}.rh-result-send-status{text-align:left}}
@media(min-width:900px) and (max-height:850px){.rh-result-send{margin-top:8px;padding:9px 11px}.rh-result-send-head p{font-size:9.5px}.rh-result-send-open{min-height:36px}.rh-result-send-form{margin-top:8px;padding-top:8px}.rh-result-send-preview{margin-bottom:7px;padding:7px 9px}.rh-result-send-fields input{height:34px}.rh-result-recipient-help{margin:7px 0 0;color:#526b80;font-size:10px;font-weight:700}.rh-result-send-consent{margin-top:6px}.rh-result-send-actions{margin-top:6px}.rh-result-send-cancel,.rh-result-send-submit{min-height:35px}}

/* Concert V2 — le répertoire enrichit l'écran de choix, puis disparaît pendant
   la prestation pour ne jamais déplacer le pupitre ni l'action principale.
   2026-08-19 : la fiche d'œuvre a une hauteur stable et la frise des cinq étapes
   a été retirée de cet écran ; elle reste disponible une fois la répétition lancée. */
.rh-concert-repertoire {
  width: min(1000px, 100%);
  margin: clamp(12px, 2vw, 18px) auto 0;
  padding: clamp(12px, 1.8vw, 17px);
  display: grid;
  gap: 10px;
  border: 1px solid #d7e4ed;
  border-radius: 18px;
  background: linear-gradient(145deg, #fbfdff, #f5f9fc);
  box-shadow: 0 10px 28px rgba(28, 62, 87, .07);
}
.rh-concert-repertoire[hidden] { display: none; }
.rh-concert-repertoire-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}
.rh-concert-repertoire-head > div { display: grid; gap: 2px; }
.rh-concert-repertoire-head span { color: var(--green); font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.rh-concert-repertoire-head strong { color: var(--navy); font-size: 20px; }
.rh-concert-repertoire-head > small { color: var(--muted); font-size: 10px; font-weight: 750; text-align: right; }
.rh-concert-repertoire-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.rh-concert-piece-card {
  min-width: 0;
  min-height: 64px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid #d7e3ec;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rh-concert-piece-card > b {
  width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 50%; background: #eaf1f6; color: #668096; font-size: 10px;
}
.rh-concert-piece-card > span { min-width: 0; display: grid; gap: 2px; }
.rh-concert-piece-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); font-size: 10px; }
.rh-concert-piece-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; font-weight: 750; }
.rh-concert-piece-card[aria-pressed="true"] { border-color: #73bd96; background: #f0faf5; box-shadow: inset 0 0 0 1px #a9d8bf; }
.rh-concert-piece-card[aria-pressed="true"] > b { background: var(--green); color: #fff; }
.rh-concert-piece-card:focus-visible { outline: 3px solid rgba(40,120,200,.24); outline-offset: 2px; }

.rh-concert-piece-detail {
  min-width: 0;
  height: 170px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(155px, .46fr);
  gap: 13px;
  align-items: center;
  border: 1px solid #dfe8ee;
  border-radius: 14px;
  background: #fff;
}
.rh-concert-piece-detail img { width: 96px; height: 96px; object-fit: cover; border-radius: 11px; background: #f0f3f5; }
.rh-concert-piece-copy { min-width: 0; max-height: 148px; display: grid; gap: 2px; overflow: hidden; }
.rh-concert-piece-copy > span { color: #9a600e; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.rh-concert-piece-copy h2 { margin: 0; color: var(--navy); font-size: clamp(16px, 2vw, 20px); }
.rh-concert-piece-copy > strong { color: #435d70; font-size: 10px; }
.rh-concert-piece-copy p { margin: 2px 0 0; color: var(--ink); font-size: 10px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.rh-concert-piece-copy > p:not(.rh-concert-history) { -webkit-line-clamp: 2; line-clamp: 2; }
.rh-concert-piece-copy .rh-concert-history { -webkit-line-clamp: 3; line-clamp: 3; }
.rh-concert-piece-copy .rh-concert-history { color: var(--muted); }
.rh-concert-piece-copy em { margin-top: 3px; color: #24754b; font-size: 10px; font-weight: 850; font-style: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rh-concert-piece-side { min-width: 0; display: grid; gap: 7px; align-content: center; }
.rh-concert-piece-side > small { color: var(--muted); font-size: 9px; line-height: 1.3; font-weight: 750; }
.rh-concert-preview {
  min-height: 38px; padding: 8px 11px; border: 1px solid #b9d6ed; border-radius: 10px;
  background: #eef7ff; color: #1d5e9d; font-size: 10px; font-weight: 900; cursor: pointer;
}
.rh-concert-source { opacity: .82; }
@media (max-width: 900px) {
  .rh-concert-repertoire-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rh-concert-piece-detail { height: 205px; grid-template-columns: 82px minmax(0, 1fr); }
  .rh-concert-piece-detail img { width: 82px; height: 82px; }
  .rh-concert-piece-side { grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; }
}
@media (max-width: 620px) {
  .rh-concert-repertoire { padding: 10px; gap: 8px; }
  .rh-concert-repertoire-head { align-items: start; }
  .rh-concert-repertoire-head > small { display: none; }
  .rh-concert-repertoire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-concert-piece-card { min-height: 58px; }
  .rh-concert-piece-detail { height: 220px; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding: 8px; }
  .rh-concert-piece-detail img { width: 64px; height: 64px; }
  .rh-concert-piece-copy .rh-concert-history { display: none; }
  .rh-concert-piece-side { grid-template-columns: 1fr; }
  .rh-concert-piece-side > small:first-child { display: none; }
}


/* Concert : priorité au pupitre. On resserre les marges internes pour garder
   le métronome commun tout en laissant de la hauteur à la partition et à
   l'aperçu de la portée suivante. */
.rh-challenge-stage[data-challenge="concert"] {
  padding-block: clamp(9px, 1.5vw, 14px);
}
.rh-challenge-stage[data-challenge="concert"] .rh-challenge-guidebar {
  min-height: 28px;
}
.rh-challenge-stage[data-challenge="concert"][data-conducting="true"] .rh-challenge-guidebar {
  min-height: clamp(54px, 6.5vw, 66px);
}
.rh-challenge-stage[data-challenge="concert"] .rh-challenge-conducting {
  height: clamp(50px, 6vw, 62px);
}

/* Le Concert garde le même métronome visuel commun, simplement plus compact
   pour ne pas sacrifier l'anticipation de la portée suivante. */
.rh-challenge-stage[data-challenge="concert"] .rh-metronome-pulses {
  width: min(360px, 72%);
  margin-top: 6px;
  gap: 5px;
}
.rh-challenge-stage[data-challenge="concert"] .rh-metronome-pulses span {
  min-height: 28px;
  border-radius: 9px;
  font-size: 11px;
}
.rh-challenge-stage[data-challenge="concert"] .rh-metronome-pulses span[data-silent="true"] {
  opacity: .34;
}

/* Accueil Concert : on ne mélange plus choix du répertoire et HUD de jeu.
   La partition reste visible comme aperçu, mais les éléments qui n'ont de sens
   qu'après le démarrage (progression, consigne d'étape, préparation, feedback,
   métronome/battue) restent masqués. */
.rh-challenge-shell[data-concert-preview="true"] {
  width: min(1000px, 100%);
  margin-top: 10px;
  grid-template-rows: clamp(285px, 33dvh, 310px) 60px;
  gap: 8px;
}
.rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-stages,
.rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-instruction,
.rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-status-slot {
  display: none !important;
}
.rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-stage {
  height: 100%;
  min-height: 0;
  padding: 12px 18px 10px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-guidebar,
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-target,
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-recognition,
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-pulses {
  display: none !important;
}
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-score {
  position: relative;
  padding-top: 26px;
  overflow-y: hidden;
}
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-score::before {
  content: "Aperçu de la partition";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
}
.rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-actionbar {
  min-height: 60px;
  height: 60px;
}
.rh-challenge-shell[data-concert-preview="true"] .rh-challenge-action {
  width: min(420px, 100%);
}
@media (max-width: 620px) {
  .rh-challenge-shell[data-concert-preview="true"] {
    grid-template-rows: 255px 58px;
  }
  .rh-challenge-shell[data-concert-preview="true"] > .rh-challenge-stage {
    padding-inline: 10px;
  }
}

/* 2026-08-18 — écran final pédagogique du défi Concert.
   Il remplace le mini-résultat de défi : une seule fin, lisible, animée et envoyable. */
.rh-challenge-shell[data-final="true"]{
  width:min(980px,100%);
  display:block;
  margin-top:14px;
}
.rh-challenge-shell[data-final="true"]>.rh-challenge-stages,
.rh-challenge-shell[data-final="true"]>.rh-challenge-instruction,
.rh-challenge-shell[data-final="true"]>.rh-challenge-stage,
.rh-challenge-shell[data-final="true"]>.rh-challenge-status-slot,
.rh-challenge-shell[data-final="true"]>.rh-challenge-actionbar{display:none!important}
.rh-concert-final-report{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid #cfe0ea;
  border-top:4px solid var(--green);
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0,#fbfefd 100%);
  box-shadow:0 14px 34px rgba(11,43,102,.08);
}
.rh-concert-final-report[hidden]{display:none!important}
.rh-concert-final-hero{position:relative;z-index:2;grid-template-columns:150px minmax(0,1fr)}
.rh-concert-final-medal{
  width:132px;height:132px;box-sizing:border-box;padding:13px 8px;
  display:grid;grid-template-rows:auto 1fr auto;place-items:center;
  border:1px solid #d4e3eb;border-radius:50%;background:radial-gradient(circle at 50% 44%,#fff 0 52%,#f5faf7 53% 100%);
  color:var(--navy);box-shadow:inset 0 0 0 8px #f7fbf9,0 7px 20px rgba(19,58,83,.08);text-align:center
}
.rh-concert-final-medal>span{color:#c7932e;font-size:24px;font-weight:950;line-height:1}
.rh-concert-final-medal>strong{font-size:25px;line-height:1;font-weight:1000}
.rh-concert-final-medal>b{font-size:9px;line-height:1.15;color:#5e7485}
.rh-concert-final-medal[data-award="3"]{border-color:#e7c56d;background:radial-gradient(circle at 50% 44%,#fffdf5 0 52%,#fff6cf 53% 100%);box-shadow:inset 0 0 0 8px #fffaf0,0 8px 24px rgba(196,147,38,.18)}
.rh-concert-final-medal[data-award="3"]>span,.rh-concert-final-medal[data-award="3"]>b{color:#a87308}
.rh-concert-final-medal[data-award="2"]{border-color:#bcc8d1;background:radial-gradient(circle at 50% 44%,#fff 0 52%,#edf3f6 53% 100%)}
.rh-concert-final-medal[data-award="1"]{border-color:#d4aa85;background:radial-gradient(circle at 50% 44%,#fff 0 52%,#f9eee7 53% 100%)}
.rh-concert-worked{margin-top:13px;padding:12px 15px;border:1px solid #d8e5ed;border-radius:14px;background:#f7fbff;color:#36516c}
.rh-concert-worked>div{display:flex;align-items:center;gap:8px}.rh-concert-worked>div>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#eaf4ff;color:var(--blue);font-weight:950}.rh-concert-worked strong{color:var(--navy);font-size:12px}.rh-concert-worked p{margin:7px 0 0;font-size:10.5px;line-height:1.45}
.rh-concert-final-actions{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:9px;margin-top:13px}
.rh-concert-final-secondary,.rh-concert-final-primary{min-height:50px;border-radius:13px;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.rh-concert-final-secondary{border:1px solid #bfd3e1;background:#fff;color:#34516b}
.rh-concert-final-primary{border:0;background:var(--blue);color:#fff}
.rh-concert-final-secondary:focus-visible,.rh-concert-final-primary:focus-visible{outline:3px solid rgba(40,120,200,.22);outline-offset:2px}

.rh-concert-final-celebration{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:0}
.rh-concert-final-celebration[data-active="true"]{opacity:1}
.rh-concert-final-celebration i{position:absolute;left:50%;top:86px;color:#e4aa36;font-size:22px;font-style:normal;font-weight:950;opacity:0;animation:rh-concert-note-fly 1.35s cubic-bezier(.2,.7,.15,1) both}
.rh-concert-final-celebration i:nth-child(1){--dx:-310px;--dy:-58px;animation-delay:.04s}
.rh-concert-final-celebration i:nth-child(2){--dx:-210px;--dy:-104px;animation-delay:.13s;color:#2f9b66}
.rh-concert-final-celebration i:nth-child(3){--dx:-92px;--dy:-80px;animation-delay:.20s;color:#2878c8}
.rh-concert-final-celebration i:nth-child(4){--dx:110px;--dy:-92px;animation-delay:.08s;color:#ef665a}
.rh-concert-final-celebration i:nth-child(5){--dx:225px;--dy:-68px;animation-delay:.17s;color:#8b67bf}
.rh-concert-final-celebration i:nth-child(6){--dx:320px;--dy:-108px;animation-delay:.24s;color:#2f9b66}
@keyframes rh-concert-note-fly{0%{transform:translate(-50%,22px) scale(.55) rotate(0);opacity:0}20%{opacity:.95}75%{opacity:.85}100%{transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.15) rotate(18deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.rh-concert-final-celebration i{animation:none!important}.rh-concert-final-celebration[data-active="true"]{opacity:0}}

@media(max-width:700px){
  .rh-concert-final-report{padding:15px;border-radius:16px}
  .rh-concert-final-hero{grid-template-columns:90px minmax(0,1fr);gap:12px}
  .rh-concert-final-medal{width:84px;height:84px;padding:8px 5px;box-shadow:inset 0 0 0 5px #f7fbf9}
  .rh-concert-final-medal>span{font-size:17px}.rh-concert-final-medal>strong{font-size:18px}.rh-concert-final-medal>b{font-size:7px}
  .rh-concert-final-actions{grid-template-columns:1fr}
}
@media(min-width:1000px) and (max-height:850px){
  .rh-challenge-shell[data-final="true"]{margin-top:8px}
  .rh-concert-final-report{padding:14px 17px}
  .rh-concert-final-hero{grid-template-columns:105px minmax(0,1fr);gap:14px}
  .rh-concert-final-medal{width:92px;height:92px;padding:8px 5px;box-shadow:inset 0 0 0 6px #f7fbf9}
  .rh-concert-final-medal>span{font-size:18px}.rh-concert-final-medal>strong{font-size:20px}.rh-concert-final-medal>b{font-size:7.5px}
  .rh-concert-worked{margin-top:8px;padding:8px 11px}.rh-concert-worked p{margin-top:4px;font-size:9px}
  .rh-concert-final-actions{margin-top:8px}.rh-concert-final-secondary,.rh-concert-final-primary{min-height:42px}
}

/* Concert V3 — répertoire par difficulté, compact et lisible. */
.rh-concert-difficulty-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.rh-concert-difficulty-tab {
  min-width: 0;
  min-height: 44px;
  padding: 6px 9px;
  display: grid;
  grid-template-columns: 23px minmax(0,1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e4ec;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}
.rh-concert-difficulty-tab > b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3f7;
  color: #60798c;
  font-size: 9px;
}
.rh-concert-difficulty-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 900; }
.rh-concert-difficulty-tab > small { color: var(--muted); font-size: 8px; font-weight: 750; white-space: nowrap; }
.rh-concert-difficulty-tab[aria-pressed="true"] { border-color: #79bfa0; background: #f1faf5; box-shadow: inset 0 0 0 1px #b7dec8; }
.rh-concert-difficulty-tab[aria-pressed="true"] > b { background: var(--green); color: #fff; }
.rh-concert-difficulty-tab:focus-visible { outline: 3px solid rgba(40,120,200,.24); outline-offset: 2px; }

/* Une difficulté ne montre que 2 ou 3 œuvres : on leur laisse de l'air. */
.rh-concert-repertoire-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rh-concert-piece-portrait-fallback {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border-radius: 11px;
  background: linear-gradient(145deg,#f1f6fa,#e7eef4);
  color: #61798b;
  text-align: center;
}
.rh-concert-piece-portrait-fallback > span { font-size: 27px; line-height: 1; color: var(--green); }
.rh-concert-piece-portrait-fallback > strong { max-width: 82px; font-size: 8px; line-height: 1.15; }
.rh-concert-input-assist {
  margin-top: 5px;
  padding: 6px 8px;
  display: grid;
  gap: 1px;
  border: 1px solid #dfd4f5;
  border-radius: 9px;
  background: #faf7ff;
  color: #694b91;
  font-style: normal;
}
.rh-concert-input-assist b { font-size: 8px; font-weight: 950; }
.rh-concert-input-assist span { font-size: 8px; line-height: 1.3; font-weight: 700; }

@media (max-width: 900px) {
  .rh-concert-difficulty-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-concert-piece-portrait-fallback { width: 82px; height: 82px; }
}
@media (max-width: 620px) {
  .rh-concert-difficulty-tab { min-height: 40px; grid-template-columns: 21px minmax(0,1fr); }
  .rh-concert-difficulty-tab > small { display: none; }
  .rh-concert-repertoire-grid { grid-template-columns: 1fr; min-height: 188px; align-content: start; }
  .rh-concert-piece-portrait-fallback { width: 64px; height: 64px; }
  .rh-concert-piece-portrait-fallback > strong { max-width: 55px; font-size: 7px; }
}

/* Beethoven : comparaison métrique source, compacte pour conserver la hauteur
   fixe de la fiche Concert et donc la stabilité du pupitre. */
.rh-concert-comparison{margin:3px 0;display:flex;align-items:center;gap:6px;min-width:0}
.rh-concert-comparison>span{min-width:0;display:grid;grid-template-columns:18px auto;grid-template-rows:auto auto;column-gap:5px;align-items:center;padding:3px 6px;border:1px solid #d6e5ef;border-radius:8px;background:#f7fbfe}
.rh-concert-comparison b{grid-row:1/3;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#2476c8;color:#fff;font-size:8px}
.rh-concert-comparison strong{color:var(--navy);font-size:9px;line-height:1}
.rh-concert-comparison small{color:var(--muted);font-size:7px;font-weight:750;white-space:nowrap}
.rh-concert-comparison i{color:#69859a;font-style:normal;font-weight:950}
@media(max-width:620px){.rh-concert-comparison small{display:none}.rh-concert-comparison>span{grid-template-rows:auto}.rh-concert-comparison b{grid-row:auto}.rh-concert-comparison em{display:none}}

.rh-concert-source--tempo{display:block;margin-top:5px;font-weight:700;line-height:1.35}
.rh-concert-source--study{display:block;margin-top:4px;font-style:italic;line-height:1.35}

/* Beethoven comparatif : la carte reste une porte d'entrée, pas une notice.
   Les deux écoutes ont le même poids visuel et tiennent sans agrandir le bandeau. */
.rh-concert-piece-side--compare{gap:6px}
.rh-concert-preview-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rh-concert-preview-pair .rh-concert-preview{padding-inline:7px;white-space:nowrap}
.rh-concert-piece-side--compare .rh-concert-source{font-size:8px;line-height:1.2}
@media(max-width:620px){.rh-concert-preview-pair{grid-template-columns:1fr 1fr}.rh-concert-preview-pair .rh-concert-preview{font-size:9px;padding-inline:5px}}

/* Le bandeau global porte désormais les retours de navigation. */
.rh-nav-spacer{display:block;min-width:88px;min-height:1px}
.rh-guided-subback-spacer{display:block;min-width:86px;min-height:1px}
@media(max-width:560px){.rh-guided-subback-spacer{min-width:1px}}