.mpExSequenceThumb {
  width: 188px;
  min-width: 168px;
}

.mpExTablatureThumb__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-b-surface, #fff) 92%, var(--theme-b-tag-bg, #f3f1ec)) 0%,
    color-mix(in srgb, var(--theme-b-tag-bg, #f3f1ec) 58%, var(--theme-b-surface, #fff)) 100%
  );
}

.mpExTablatureThumb__host {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.35rem;
  box-sizing: border-box;
  pointer-events: none;
}

.mpExTablatureThumb__preview {
  width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  pointer-events: none;
}

.mpExTablatureThumb__preview .tabStaff {
  font-size: 0.52rem;
  max-width: 100%;
  margin: 0 auto;
}

.mpExTablatureThumb__preview .tabStaff__viewport {
  max-width: 100%;
  overflow: hidden;
}

.mpExTablatureThumb__emptyHint {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--tv2-muted, #74675b);
}

.mpExSequenceThumb__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 78px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-b-surface) 92%, var(--theme-b-tag-bg)) 0%,
    color-mix(in srgb, var(--theme-b-tag-bg) 58%, var(--theme-b-surface)) 100%
  );
}

.mpExSequenceThumb__host {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  overflow: hidden;
}

.mpExSequenceThumb__diagram {
  transform: scale(0.34);
  transform-origin: top left;
  margin-right: -57%;
  margin-bottom: -54%;
  flex: 0 0 auto;
}

.mpExSequenceThumb .exerciseThumb__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(9, 14, 26, 0.66) 0%,
    rgba(9, 14, 26, 0.34) 58%,
    rgba(9, 14, 26, 0.04) 100%
  );
}

.mpExSequenceThumb__caption {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.34rem 0.52rem;
  border-radius: 8px;
  background: transparent;
  color: #f8fafc;
  pointer-events: none;
}

.mpExSequenceThumb__title {
  display: block;
  margin: 0;
  width: 100%;
  max-width: 160px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.mpExSequenceThumb__meta {
  font-size: 0.76rem;
  font-weight: 720;
  color: #f8fafc;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(0, 0, 0, 0.28);
}

.mpExSequenceThumb__symbolChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0.12rem 0.45rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.94);
  color: #1e293b;
  border: 1px solid rgba(15, 23, 42, 0.14);
  flex: 0 0 auto;
}

.mpExSequenceThumb__emptyHint {
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
/* Page programme utilisateur — lecture / timers / objectifs (DA Carnet lumineux) */

@import url("/frontend/css/theme-b-tokens.css");
@import url("/frontend/css/modulePrograms-audio-reveal.css");

html {
  overflow-x: hidden;
}

.moduleProgramsBody {
  /* Alias locaux sur le body : résolution correcte des --theme-b-* bridgés par .theme-carnet-lumineux */
  --mp-bg: var(--theme-b-page-shell);
  --mp-surface: var(--theme-b-surface);
  --mp-text: var(--theme-b-text);
  --mp-muted: var(--theme-b-text-muted);
  --mp-border: var(--theme-b-border);
  --mp-accent: var(--theme-b-action);
  --mp-accent-soft: color-mix(in srgb, var(--theme-b-action) 16%, transparent);
  --mp-accent2: var(--theme-b-primary);
  --mp-teal: var(--theme-b-success-text);
  --mp-teal-soft: color-mix(in srgb, var(--theme-b-success-text) 14%, transparent);
  --mp-violet-soft: color-mix(in srgb, var(--theme-b-primary) 14%, transparent);
  --mp-radius: var(--da-radius-card, 16px);
  --mp-radius-sm: 12px;
  --mp-shadow: var(--da-shadow-card, 0 2px 10px rgba(85, 68, 48, 0.05));
  --mp-shadow-hover: var(--da-shadow-warm, 0 16px 36px rgba(100, 80, 58, 0.05));
  --mp-font: var(--da-font-sans, "DM Sans", "Nunito", system-ui, sans-serif);
  /* Ombres portées (encre = --theme-b-text, suit le pont DA / craie) */
  --mp-ink-07: color-mix(in srgb, var(--theme-b-text) 7%, transparent);
  --mp-ink-08: color-mix(in srgb, var(--theme-b-text) 8%, transparent);
  --mp-ink-10: color-mix(in srgb, var(--theme-b-text) 10%, transparent);
  --mp-ink-12: color-mix(in srgb, var(--theme-b-text) 12%, transparent);
  --mp-ink-18: color-mix(in srgb, var(--theme-b-text) 18%, transparent);
  --mp-ink-20: color-mix(in srgb, var(--theme-b-text) 20%, transparent);
  box-sizing: border-box;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: var(--shell-content-offset, 0px);
  overflow-x: hidden;
  font-family: var(--mp-font);
  color: var(--mp-text);
  background:
    radial-gradient(
      1200px 500px at 10% -10%,
      color-mix(in srgb, var(--theme-b-success-bg) 65%, transparent),
      transparent 55%
    ),
    radial-gradient(
      900px 400px at 100% 0%,
      color-mix(in srgb, var(--theme-b-tag-bg) 55%, transparent),
      transparent 50%
    ),
    var(--mp-bg);
}

body.moduleProgramsBody--trainV2 {
  overscroll-behavior-y: auto;
  overflow-y: auto;
}

/* Contenu principal — zone programme plus large */
.moduleProgramsMain {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.75rem 1.25rem 3.5rem;
  padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.moduleProgramsMain > p {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--mp-muted);
  background: var(--mp-surface);
  border-radius: var(--mp-radius-sm);
  border: 1px dashed var(--mp-border);
}

.moduleTitle {
  margin: 0.25rem 0 0;
  font-family: var(--da-font-serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: center;
  color: var(--mp-text);
}

/* Carte programme */
.programBlock {
  position: relative;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 1.85rem 1.65rem 2rem;
  max-width: 100%;
  min-width: 0;
  box-shadow: var(--mp-shadow);
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
  scroll-margin-top: 1.25rem;
}

.programBlock:hover {
  box-shadow: var(--mp-shadow-hover);
  border-color: color-mix(in srgb, var(--mp-teal) 22%, transparent);
}

.programBlock > h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--mp-muted);
  border-bottom: 1px solid var(--mp-border);
  letter-spacing: -0.01em;
}

/* Sélecteur de jours — piste scrollable + glisseur sous le jour actif */
.programDaysShell {
  position: relative;
  margin: 0 0 1.35rem;
  width: 100%;
  min-width: 0;
}

.programDays {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
  /* Marge latérale : le dernier jour (souvent « sélectionné » vert) ne colle pas au bord, surtout sur grand écran / TV */
  padding: 0.4rem clamp(0.45rem, 1.4vw, 1rem) 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* iOS / tactile : le scroll programmé « smooth » coûte cher ; le natif est plus fluide */
@media (pointer: coarse) {
  .programDays {
    scroll-behavior: auto;
  }
}

.programDaysGlider {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--theme-b-action),
    color-mix(in srgb, var(--theme-b-primary-hover) 85%, var(--theme-b-action))
  );
  pointer-events: none;
  z-index: 2;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width;
}

.dayProgramBtn {
  appearance: none;
  flex: 0 0 auto;
  padding: 0.85rem 1.2rem;
  min-width: 5.75rem;
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 650;
  font-family: inherit;
  border-radius: 14px;
  border: 1px solid var(--mp-border);
  background: var(--theme-b-subtle);
  color: var(--mp-text);
  cursor: pointer;
  text-align: center;
  scroll-snap-align: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.dayProgramBtn:hover {
  background: var(--theme-b-surface);
  border-color: color-mix(in srgb, var(--mp-teal) 35%, transparent);
  transform: translateY(-1px);
}

.dayProgramBtn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.dayProgramBtn.selected {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-action) 92%, #fff),
    var(--theme-b-action)
  );
  border-color: color-mix(in srgb, var(--theme-b-action) 40%, var(--mp-border));
  color: var(--theme-b-on-action);
  box-shadow: var(--theme-b-btn-shadow);
}

.objectivesContainer {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* Bloc objectif : en-tête (titre + puces) puis corps (échelle + timer + exercices) */
.objectiveItem {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-border);
  background: var(--theme-b-surface);
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
}

.objectiveItem__head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.25rem 0.9rem;
  border: none;
  border-bottom: 1px solid var(--mp-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--theme-b-surface) 88%, var(--theme-b-subtle));
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  box-sizing: border-box;
  transition:
    background 0.22s ease,
    border-color 0.22s ease;
}

.objectiveItem__head:hover {
  background: color-mix(in srgb, var(--theme-b-surface) 82%, var(--theme-b-subtle));
}

.objectiveItem__head:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.objectiveItem--open .objectiveItem__head {
  border-bottom-color: color-mix(in srgb, var(--mp-teal) 22%, var(--mp-border));
}

.objectiveItem__headKicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-bottom: 0.35rem;
}

.objectiveItem__headTitle {
  display: block;
  margin: 0;
  font-family: var(--da-font-sans, "DM Sans", "Nunito", sans-serif);
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--mp-text);
  letter-spacing: -0.02em;
}

.objectiveItem__headMeta {
  margin-top: 0.55rem;
}

.objectiveItem__headMeta .objectiveMeta {
  margin-top: 0;
}

/* Corps replié par défaut ; ouverture au clic sur l’en-tête */
.objectiveItem__bodyShell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.46s cubic-bezier(0.33, 1, 0.68, 1);
}

.objectiveItem--open .objectiveItem__bodyShell {
  grid-template-rows: 1fr;
}

.objectiveItem__bodyReveal {
  overflow: hidden;
  min-height: 0;
}

/* Colonne unique : ligne principale (texte + difficulté | minuterie), puis bande médias */
.objectiveItem__body {
  padding: 0.85rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--theme-b-tag-bg) 14%, var(--theme-b-surface));
}

.objectiveItem__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem 1rem;
  width: 100%;
  min-width: 0;
}

/* Bloc streaming : pleine largeur dans la bande médias */
.objectiveItem__mediaStrip > .exercise-streaming.musicPlatformContainer {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.objectiveItem:hover {
  border-color: color-mix(in srgb, var(--theme-b-text) 12%, transparent);
  box-shadow: var(--da-shadow-card, 0 4px 16px rgba(85, 68, 48, 0.06));
}

.objectiveItem.completed {
  background: var(--theme-b-success-bg) !important;
  border-color: var(--theme-b-success-border);
}

/* train v2 : pas de panneau vert sur toute la carte exercice (statut sur le rail / menu mobile) */
.moduleProgramsBody--trainV2 .objectiveItem.mpExRoot.completed {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.objectiveItem__main {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

.objectiveItem__textStack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.objectiveItem__textStack--empty {
  display: none;
}

.objectiveItem__textStack .exercise-html,
.objectiveItem__textStack .exercise-text,
.objectiveItem__textStack .noExercise {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mp-text);
}

.objectiveItem__textStack .noExercise {
  color: var(--mp-muted);
  font-style: italic;
  text-align: center;
  background: var(--theme-b-subtle);
}

/* Bandeau sous le texte : bouton + piste qui s’ouvre */
.objectiveItem__difficultyRow {
  --objective-difficulty-band-h: 3.05rem;
  display: grid;
  grid-template-columns: auto 0fr;
  align-items: stretch;
  column-gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem;
  transition:
    grid-template-columns 0.52s cubic-bezier(0.4, 0, 0.2, 1),
    column-gap 0.52s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s ease,
    background 0.45s ease,
    box-shadow 0.4s ease;
}

.objectiveItem__difficultyRow--expanded {
  --objective-difficulty-band-h: 3.2rem;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.3rem;
  overflow-x: clip;
  border-color: color-mix(in srgb, var(--mp-teal) 22%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--theme-b-success-bg) 42%, var(--theme-b-surface)) 0%,
    var(--theme-b-subtle) 52%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 4px var(--mp-ink-07);
}

/* Mêmes couleurs que .dayProgramBtn (inactif / hover / « sélectionné » quand la piste est ouverte) */
.objectiveItem__difficultyReveal {
  appearance: none;
  margin: 0;
  justify-self: start;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--objective-difficulty-band-h);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--mp-text);
  background: var(--theme-b-subtle);
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    padding 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    font-size 0.4s cubic-bezier(0.33, 1, 0.68, 1),
    min-height 0.35s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.objectiveItem__difficultyReveal:hover {
  background: var(--theme-b-surface);
  border-color: color-mix(in srgb, var(--mp-teal) 35%, transparent);
}

.objectiveItem__difficultyReveal:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.objectiveItem__difficultyRow--expanded .objectiveItem__difficultyReveal {
  padding: 0.68rem 0.72rem;
  min-height: var(--objective-difficulty-band-h);
  font-size: 0.88rem;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-action) 92%, #fff),
    var(--theme-b-action)
  );
  border-color: color-mix(in srgb, var(--theme-b-action) 40%, var(--mp-border));
  color: var(--theme-b-on-action);
  box-shadow: var(--theme-b-btn-shadow);
}

.objectiveItem__scaleShell {
  min-width: 0;
  min-height: var(--objective-difficulty-band-h);
  display: flex;
  align-items: stretch;
  align-self: stretch;
  overflow: hidden;
  opacity: 0;
  /* Fermeture : fondu plus doux et un peu plus long */
  transition: opacity 0.55s ease-out;
  transition-delay: 0s;
}

.objectiveItem__difficultyRow--expanded .objectiveItem__scaleShell {
  opacity: 1;
  /* Ouverture : léger délai puis apparition un peu plus vive */
  transition: opacity 0.38s ease-out;
  transition-delay: 0.1s;
}

.objectiveText {
  min-width: 0;
  width: 100%;
}

.objectiveItem__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: auto;
  min-width: 5.5rem;
  max-width: 7.5rem;
  align-self: start;
  gap: 0.35rem;
  padding: 0.15rem 0 0;
}

/* Minuterie un peu plus compacte dans la colonne de droite */
.objectiveItem__aside .cloche {
  width: 76px;
  height: 76px;
}

.objectiveItem__aside .timerDisplay {
  font-size: 0.92rem;
}

/* Vignettes / audio : bande sous le texte, sans manger toute la largeur */
.objectiveItem__mediaStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.65rem;
  width: 100%;
  min-width: 0;
  padding-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--mp-border) 70%, transparent);
}

.objectiveItem__mediaStrip:empty {
  display: none;
}

.objectiveItem__mediaStrip > .exerciseThumb {
  flex: 0 1 auto;
  width: min(200px, 42vw);
  min-width: min(148px, 100%);
  max-width: 220px;
}

.objectiveItem__mediaStrip > .exercise-streaming.musicPlatformContainer {
  margin-top: 0.15rem;
}

.objectiveNumber {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-accent);
  margin-bottom: 0.45rem;
}

.objectiveTitle {
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--mp-text);
}

.objectiveMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.objectiveMeta__chip {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  line-height: 1.25;
}

.objectiveMeta__chip--hint {
  background: var(--mp-teal-soft);
  color: var(--mp-teal);
}

.objectiveMeta__chip--cat {
  background: var(--mp-violet-soft);
  color: var(--theme-b-tag-text);
}

.objectiveMeta__chip--audience {
  background: color-mix(
    in srgb,
    var(--da-accent-warm, var(--theme-b-strength-2)) 22%,
    transparent
  );
  color: var(--da-accent-wood, var(--theme-b-strength-2));
}

.objectiveMeta__chip--time {
  background: color-mix(in srgb, var(--theme-b-action) 12%, transparent);
  color: var(--theme-b-primary);
}

.objectiveItem__scaleRow {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.objectiveItem__main .scalePanel {
  width: 100%;
  max-width: 100%;
}

/* Panneau d’échelle intégré au bandeau : pas de bordure ni fond séparé */
.objectiveItem__scaleRow .scalePanel {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  min-height: var(--objective-difficulty-band-h, 3.05rem);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.4rem 0.2rem 0.15rem;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.objectiveItem__difficultyRow--expanded .objectiveItem__scaleRow .scalePanel {
  padding: 0.18rem clamp(0.35rem, 1.1vw, 0.65rem) 0.18rem 0.1rem;
}

/* Ouvert : pastilles groupées (pas space-between) pour tenir dans le cadre arrondi */
.objectiveItem__difficultyRow--expanded
  .objectiveItem__scaleRow
  .objectiveItem__difficultyScale
  .scale__track {
  justify-content: flex-start;
  gap: 0.04rem;
  /* Espace à droite : la dernière pastille (souvent verte, scale + halo) ne touche pas le bord du bandeau */
  padding: 0.1rem clamp(0.22rem, 0.95vw, 0.55rem) 0.1rem 0.08rem;
}

/* Pastilles : un peu plus grandes, réparties sur la largeur */
.objectiveItem__scaleRow .scale-button {
  width: 20px;
  height: 20px;
  border-width: 2.5px;
  box-shadow: 0 2px 4px var(--mp-ink-10);
  /* Marge autour de chaque pastille : ne colle pas aux bords du bandeau ni aux voisines */
  margin: 0.12rem 0.14rem;
  flex-shrink: 0;
}

.objectiveItem__scaleRow .scale-button.big {
  width: 26px;
  height: 26px;
}

.objectiveItem__scaleRow .scale-button.small {
  width: 15px;
  height: 15px;
}

.objectiveItem__scaleRow .scale-button.selected {
  box-shadow:
    0 0 0 2px var(--theme-b-surface),
    0 3px 10px var(--mp-ink-20);
}

.objectiveItem__scaleRow .objectiveItem__difficultyScale {
  display: flex;
  width: 100%;
  align-items: center;
  min-width: 0;
}

.objectiveItem__scaleRow .objectiveItem__difficultyScale .scale__track {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.08rem, 1.2vw, 0.28rem);
  padding: 0.14rem 0.12rem;
  flex-wrap: nowrap;
}

.scalePanel {
  flex: 1 1 16rem;
  align-self: center;
  width: auto;
  min-width: min(100%, 15rem);
  max-width: min(100%, 30rem);
  min-height: 3rem;
  padding: 0.55rem 0.65rem 0.58rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mp-teal) 22%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--theme-b-success-bg) 55%, var(--theme-b-surface)) 0%,
    var(--theme-b-subtle) 50%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
}

.scalePanel .scale {
  width: 100%;
}

.objectiveItem__aside .objectiveTimer {
  align-self: center;
}

/* Échelle : piste + pastilles */
.scale.scale--withLabels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}

.scale__edge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-muted);
  flex-shrink: 0;
  width: 3.1rem;
}

.scale__edge:first-of-type {
  text-align: left;
}

.scale__edge:last-of-type {
  text-align: right;
}

.scale__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.22rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0;
}

.scale-button {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.92;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-sizing: border-box;
  box-shadow: 0 1px 2px var(--mp-ink-08);
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.scale-button.big {
  width: 26px;
  height: 26px;
}

.scale-button.small {
  width: 15px;
  height: 15px;
}

.scale-button:hover {
  transform: scale(1.1);
  opacity: 1;
  z-index: 1;
}

.scale-button:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.scale-button.selected {
  border-color: color-mix(in srgb, var(--theme-b-text) 55%, transparent);
  transform: scale(1.18);
  opacity: 1;
  box-shadow:
    0 0 0 2px var(--theme-b-surface),
    0 2px 8px var(--mp-ink-18);
  z-index: 2;
}

/* Pastilles difficulté : rampes --theme-b-strength-* (aligné DA / tableau de bord) */
.scale-button.big.orange {
  background-color: var(--theme-b-strength-2);
}
.scale-button.orange {
  background-color: color-mix(in srgb, var(--theme-b-strength-2) 88%, var(--theme-b-surface));
}
.scale-button.small.orange {
  background-color: color-mix(in srgb, var(--theme-b-strength-2) 65%, var(--theme-b-surface));
}
.scale-button.grey {
  background-color: color-mix(in srgb, var(--theme-b-text-muted) 28%, var(--theme-b-subtle));
}
.scale-button.small.green {
  background-color: color-mix(in srgb, var(--theme-b-strength-3) 55%, var(--theme-b-surface));
}
.scale-button.green {
  background-color: var(--theme-b-strength-3);
}
.scale-button.big.green {
  background-color: var(--theme-b-strength-4);
}

/* Temps estimé */
.timeDisplay {
  display: none;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mp-muted);
  min-width: 4.5rem;
}

.timeDisplay.updated {
  color: var(--mp-text);
}

/* Timer — cloche à droite */
.objectiveTimer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: center;
  padding: 0.25rem;
  border-radius: 999px;
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, var(--mp-teal) 16%, transparent) 0%,
    color-mix(in srgb, var(--mp-teal) 5%, transparent) 55%,
    transparent 72%
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-teal) 14%, transparent);
}

.cloche {
  position: relative;
  width: 94px;
  height: 94px;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px var(--mp-ink-08));
}

.zoomWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

.timerDisplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.06rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--mp-text);
  letter-spacing: -0.02em;
  user-select: none;
  z-index: 10;
}

.objectiveTimer--paused .timerDisplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--mp-text) 84%, #111 16%);
}

.objectiveTimer__pauseGlyph {
  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.2em;
  width: 0.88em;
  height: 1em;
  box-sizing: border-box;
  color: inherit;
}

.objectiveTimer__pauseGlyph::before,
.objectiveTimer__pauseGlyph::after {
  content: "";
  flex: 1 1 30%;
  max-width: 6px;
  min-width: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.92;
}

.moduleProgramsBody--trainV2 .objectiveTimer--paused .timerDisplay {
  color: var(--tv2-text);
}

.moduleProgramsBody--trainV2 .objectiveTimer__pauseGlyph {
  width: 0.95em;
  height: 1.08em;
  gap: 0.24em;
}

.moduleProgramsBody--trainV2 .objectiveTimer__pauseGlyph::before,
.moduleProgramsBody--trainV2 .objectiveTimer__pauseGlyph::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-b-action) 55%, #fff) 0%,
    color-mix(in srgb, var(--theme-b-primary) 45%, #0f172a) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(15, 23, 42, 0.12);
}

.objectiveTimer--paused .circle {
  stroke: color-mix(in srgb, var(--mp-accent) 60%, #8b5cf6 40%);
}

.cloche svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transition: transform 0.35s ease;
}

.cloche:hover svg {
  transform: rotate(-90deg) scale(1.06);
}

.circle-bg {
  fill: none;
  stroke: var(--theme-b-border);
  stroke-width: 4.25;
}

.circle {
  fill: none;
  stroke: var(--mp-accent);
  stroke-width: 4.25;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.objectiveTimer--completed {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mp-accent) 28%, transparent);
}

.objectiveTimer--completed .cloche {
  cursor: default;
  filter: none;
}

.objectiveTimer--completed .cloche:hover svg {
  transform: rotate(-90deg);
}

.objectiveTimer__doneGlyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mp-accent);
  z-index: 10;
  user-select: none;
  pointer-events: none;
}

.moduleProgramsBody--trainV2 .objectiveTimer--completed {
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, #22c55e 26%, transparent) 0%,
    color-mix(in srgb, #16a34a 10%, transparent) 58%,
    transparent 72%
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 38%, transparent);
}

.moduleProgramsBody--trainV2 .objectiveTimer--completed .circle-bg {
  stroke: color-mix(in srgb, #bbf7d0 75%, #166534);
  opacity: 0.95;
}

.moduleProgramsBody--trainV2 .objectiveTimer--completed .circle {
  stroke: #22c55e;
}

.moduleProgramsBody--trainV2 .objectiveTimer__doneGlyph {
  color: #15803d;
}

/* Cartes texte pleine largeur si elles sont un enfant direct du corps (autres contextes) */
.exerciseItem,
.exercise-html,
.exercise-text,
.noExercise {
  grid-column: 1 / -1;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mp-text);
}

.noExercise {
  grid-column: 1 / -1;
  color: var(--mp-muted);
  font-style: italic;
  text-align: center;
  background: var(--theme-b-subtle);
}

/* Vignettes image / vidéo (aperçu ; ouverture en plein écran voir .exerciseOverlay) */
.exerciseThumb {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--theme-b-subtle);
  box-shadow: 0 2px 12px var(--mp-ink-08);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid var(--mp-border);
}

.exerciseThumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--mp-ink-12);
  border-color: color-mix(in srgb, var(--mp-teal) 28%, var(--mp-border));
}

.exerciseThumb:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 3px;
}

.exerciseThumb__frame {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--theme-b-primary) 12%, var(--theme-b-subtle));
}

.exerciseThumb__visual {
  position: relative;
  display: block;
}

.exerciseThumb__frame--video {
  aspect-ratio: 16 / 9;
}

.exerciseThumb__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.exerciseThumb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.exerciseThumb__play::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
}

/* Modale média — fond flouté */
.exerciseOverlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
}

.exerciseOverlay[hidden] {
  display: none !important;
}

/* Aligné sur .videoModalBackdrop (admin-module / dashboardAdmin) */
.exerciseOverlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Aligné sur .videoModalContent — même logique que #videoModalMediaHost */
.exerciseOverlay__panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 94vw);
  max-height: min(92vh, 100%);
  margin: auto;
  padding: 30px 14px 14px;
  border-radius: 12px;
  background: #0f1116;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  border: none;
  overflow: hidden;
  box-sizing: border-box;
}

/* Vidéo : panneau plus large, peu de marge — le média remplit au max (voir mediaHost + cover) */
.exerciseOverlay__panel--video {
  width: min(98vw, 1400px);
  padding: 36px 4px 4px;
  max-height: min(96vh, 100vh);
}

.exerciseOverlay__body {
  position: relative;
  width: 100%;
  min-height: min(42vh, 200px);
  min-width: 0;
}

.exerciseOverlay__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(
      circle at 50% 30%,
      rgba(70, 84, 114, 0.25),
      rgba(12, 14, 20, 0.05) 45%
    ),
    linear-gradient(180deg, rgba(8, 10, 14, 0.96), rgba(20, 24, 33, 0.92));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exerciseOverlay__panel.is-loading .exerciseOverlay__loading {
  opacity: 1;
}

.exerciseOverlay__loadingGlow {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 18% auto 0;
  background: radial-gradient(
    circle,
    rgba(138, 165, 255, 0.25) 0%,
    rgba(110, 131, 212, 0.05) 45%,
    rgba(0, 0, 0, 0) 70%
  );
  animation: exerciseOverlayPulse 1.4s ease-in-out infinite;
}

@keyframes exerciseOverlayPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.78;
  }
  100% {
    transform: scale(0.92);
    opacity: 0.45;
  }
}

.exerciseOverlay__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: transparent;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.exerciseOverlay__close:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.08);
}

.exerciseOverlay__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

.exerciseOverlay__mediaHost {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  box-sizing: border-box;
}

/* Plus grande fenêtre 16:9 possible dans la viewport, sans bandes latérales du panneau */
.exerciseOverlay__panel--video .exerciseOverlay__mediaHost {
  width: min(100%, calc(min(90vh, 92vh) * 16 / 9));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  max-height: min(90vh, 92vh);
  height: auto;
}

.exerciseOverlay__mediaHost mux-player.exerciseOverlay__mux {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* Remplit le cadre : coupe les bords si besoin, plus de letterbox noir */
  --media-object-fit: cover;
  --media-object-position: center;
  --media-radius: 8px;
  background-color: #0f1116;
}

.exerciseOverlay__panel--image .exerciseOverlay__mediaHost {
  aspect-ratio: auto;
  max-height: none;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exerciseOverlay__panel--sequence .exerciseOverlay__mediaHost {
  aspect-ratio: auto;
  max-height: min(80vh, 900px);
  min-height: 260px;
  overflow: auto;
  background: #fff;
}

.exerciseOverlay__panel--tablature .exerciseOverlay__mediaHost {
  aspect-ratio: auto;
  max-height: min(78vh, 720px);
  min-height: 0;
  overflow: auto;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpOverlayTablature {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.mpOverlayTablature__label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  text-align: center;
}

.mpOverlayTablature__staffHost {
  width: max-content;
  max-width: min(92vw, 1000px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.45rem 0.35rem 0.55rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin: 0 auto;
}

.mpOverlayTablature__empty {
  margin: 0.5rem;
  color: #64748b;
  text-align: center;
}

.mpOverlaySequence {
  width: 100%;
  padding: 10px 12px 8px;
  box-sizing: border-box;
}

.mpOverlaySequence__label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.mpOverlaySequence__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mpOverlaySequence__toggle {
  border: 1px solid #d6dbe4;
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mpOverlaySequence__toggle.is-active {
  border-color: #9eb2d8;
  background: #edf3ff;
  color: #1f3b6b;
}

.mpOverlaySequence__gallery {
  margin-top: 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.mpOverlaySequence__diagram {
  flex: 0 0 auto;
}

.mpOverlaySequence__diagram .chordDiagram {
  --string-gap: 21px;
  --fret-gap: 27px;
  --dot-size: 14px;
  --label-col-w: 20px;
  --label-to-neck-gap: 5px;
  padding: 0.4rem 0.46rem 0.48rem;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
}

.mpOverlaySequence__empty {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

/* Repli lisible quand le snapshot est vide ou non exploitable (ex. iPhone / API légère) */
.mpOverlaySequence__diagram--symbolOnly {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min(7.5rem, 28vw);
  min-height: 5.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 2px solid #d1d5db;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  box-sizing: border-box;
}

.mpOverlaySequenceChordName {
  margin: 0;
  text-align: center;
  font-size: clamp(1.25rem, 4.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f172a;
  word-break: break-word;
}

.exerciseOverlay__mediaHost iframe,
.exerciseOverlay__mediaHost video {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #0f1116;
  border: none;
}

.exerciseOverlay__mediaHost img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #000;
  object-fit: contain;
}

/* Train v2 + carnet lumineux : même logique que framework-admin (aperçu clair, pas d’écran noir plein) */
.moduleProgramsBody--trainV2 .exerciseOverlay__backdrop {
  background: color-mix(in srgb, var(--da-bg-page-end, #ebe4da) 55%, rgba(58, 48, 38, 0.14));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel {
  padding: 2.1rem 1rem 1rem;
  border-radius: var(--da-radius-card, 18px);
  background: var(--da-surface-elevated, #fff);
  border: 1px solid var(--da-border, #e8e2d8);
  box-shadow: var(--da-shadow-warm, 0 16px 36px rgba(100, 80, 58, 0.08));
  overflow: visible;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--video {
  padding: 2.1rem 0.85rem 0.85rem;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--video .exerciseOverlay__body,
.moduleProgramsBody--trainV2 .exerciseOverlay__panel--image .exerciseOverlay__body,
.moduleProgramsBody--trainV2 .exerciseOverlay__panel--tablature .exerciseOverlay__body {
  gap: 0.75rem;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--video .mpOverlaySequenceTop,
.moduleProgramsBody--trainV2 .exerciseOverlay__panel--image .mpOverlaySequenceTop,
.moduleProgramsBody--trainV2 .exerciseOverlay__panel--tablature .mpOverlaySequenceTop {
  padding: 0 0.2rem 0 min(38%, 9.5rem);
  margin: 0;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  min-height: 0;
}

/* Image : panneau calé sur le média + barre de difficulté (pas de grande carte vide) */
.moduleProgramsBody--trainV2 .exerciseOverlay__panel--image {
  width: fit-content;
  max-width: min(96vw, 920px);
  min-width: min(100%, 260px);
  padding: 1.65rem 0.75rem 0.65rem;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--sequence {
  position: relative;
  width: min(96vw, 1100px);
  max-width: 96vw;
  padding: 1.65rem 0.75rem 0.75rem;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--tablature {
  width: fit-content;
  max-width: min(96vw, 1100px);
  min-width: min(100%, 280px);
  padding: 1.65rem 0.75rem 0.65rem;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--tablature .exerciseOverlay__close {
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 88%, var(--da-bg-page-mid));
  color: var(--tv2-text);
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(58, 48, 38, 0.06);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--tablature .exerciseOverlay__mediaHost {
  width: auto;
  max-width: min(94vw, 1040px);
  max-height: min(78vh, 720px);
  min-height: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: color-mix(in srgb, var(--da-surface-elevated) 94%, var(--da-bg-page-mid));
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--sequence .exerciseOverlay__close {
  top: 0.6rem;
  right: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 88%, var(--da-bg-page-mid));
  color: var(--tv2-text);
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(58, 48, 38, 0.06);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--sequence .exerciseOverlay__body {
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .moduleProgramsBody--trainV2 .mpOverlaySequence__gallery {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
    justify-content: center;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .moduleProgramsBody--trainV2 .mpOverlaySequence__diagram,
  .moduleProgramsBody--trainV2 .mpOverlaySequence__diagram--symbolOnly {
    max-width: min(100%, 220px);
  }
}

.moduleProgramsBody--trainV2 .mpOverlaySequenceTop {
  width: 100%;
  box-sizing: border-box;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.moduleProgramsBody--trainV2 .mpOverlayClockDock {
  position: fixed;
  top: max(0.55rem, env(safe-area-inset-top, 0px));
  right: max(0.55rem, env(safe-area-inset-right, 0px));
  /* Au-dessus de frameworkAdminMediaModal (z-index 12000) */
  z-index: 12050;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.42rem 0.48rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #ffffff 55%, var(--tv2-border-soft));
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--da-surface-elevated) 92%, #ffffff) 0%,
    color-mix(in srgb, var(--da-surface-elevated) 78%, var(--da-bg-page-mid)) 100%
  );
  backdrop-filter: blur(14px) saturate(128%);
  -webkit-backdrop-filter: blur(14px) saturate(128%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

.moduleProgramsBody--trainV2 .mpOverlayClockDock .mpExTimerCol {
  margin: 0;
}

.moduleProgramsBody--trainV2 .mpOverlayClockDock .timeDisplay {
  color: var(--tv2-text);
  font-size: 0.82rem;
  font-weight: 750;
}

.moduleProgramsBody--trainV2 .mpOverlayClockDock .cloche {
  width: 64px;
  height: 64px;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--sequence .exerciseOverlay__mediaHost {
  background: color-mix(in srgb, var(--da-surface-elevated) 94%, var(--da-bg-page-mid));
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--image .exerciseOverlay__mediaHost {
  width: auto;
  max-width: min(92vw, 900px);
  max-height: min(70vh, 680px);
  min-height: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__panel--image .exerciseOverlay__mediaHost img {
  max-height: min(70vh, 680px);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Section Sensibilité : barre type frameworkAdmin (.difficultyScale) */
.moduleProgramsBody--trainV2 .mpExScalePanel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: 100%;
  min-width: 0;
}

/*
 * Difficulté — mobile par défaut : bouton puis barre en dessous (grille lignes 0fr → 1fr).
 * ≥901px : barre à droite du bouton (grille colonnes), ouverture gauche→droite.
 * Courbes : ease-out « naturel » + léger décalage contenu (barInner) après la grille.
 */
.moduleProgramsBody--trainV2 .mpExDifficultyToggleRow {
  --mp-diff-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mp-diff-ease-spring: cubic-bezier(0.34, 1.15, 0.5, 1);
  --mp-diff-dur-grid: 0.44s;
  --mp-diff-dur-panel: 0.48s;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 0fr;
  align-items: stretch;
  justify-items: stretch;
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1.15rem;
  margin-top: 0.15rem;
  transition:
    grid-template-rows var(--mp-diff-dur-grid) var(--mp-diff-ease),
    row-gap var(--mp-diff-dur-grid) var(--mp-diff-ease);
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0.55rem;
}

/* Mobile : sans hauteur de grille explicite, 1fr peut tomber à 0 — la barre disparaît / coupe les pastilles. */
@media (max-width: 900px) {
  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open {
    grid-template-rows: auto auto;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyBarShell {
    overflow: visible;
  }
}

@media (min-width: 901px) {
  /* Colonne bouton = largeur intrinsèque fixe (évite le saut quand la 2e colonne s’ouvre) */
  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow {
    grid-template-columns: max-content 0fr;
    grid-template-rows: auto;
    row-gap: 0;
    /* Même écart ouvert/fermé : pas d’animation de gap qui décale le bouton */
    column-gap: 0.5rem;
    justify-items: stretch;
    align-items: center;
    transition: grid-template-columns var(--mp-diff-dur-grid) var(--mp-diff-ease);
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 0.5rem;
    row-gap: 0;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggle {
    min-width: max-content;
  }
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggle {
  appearance: none;
  margin: 0;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0.5rem 0.95rem;
  border-radius: 12px;
  /* 2px fermé comme ouvert : évite tout décalage au toggle (avant 1px → 2px) */
  border: 2px solid var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 92%, var(--da-bg-page-mid));
  color: var(--tv2-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition:
    background 0.26s var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.26s var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.32s var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.26s ease;
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggle:hover {
  border-color: color-mix(in srgb, var(--theme-b-action) 35%, var(--tv2-border-soft));
  background: color-mix(in srgb, var(--theme-b-action) 8%, var(--da-surface-elevated));
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-b-action) 45%, var(--da-border));
  outline-offset: 2px;
}

/* Ouvert : état actif (sans chevron — le libellé reste « Difficulté » en entier) */
.moduleProgramsBody--trainV2 .mpExDifficultyToggle--open {
  border-color: color-mix(in srgb, var(--theme-b-action) 62%, var(--tv2-border-soft));
  background: linear-gradient(
    148deg,
    color-mix(in srgb, #fff 82%, var(--theme-b-action)),
    color-mix(in srgb, var(--theme-b-action) 22%, var(--da-surface-elevated))
  );
  color: var(--theme-b-primary);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--theme-b-action) 20%, transparent),
    0 6px 20px rgba(120, 92, 62, 0.18);
  letter-spacing: 0.04em;
}

.moduleProgramsBody--trainV2 .mpExDifficultyBarShell {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 2px, 0);
  transition:
    opacity var(--mp-diff-dur-panel, 0.48s) var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--mp-diff-dur-panel, 0.48s) var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.34s ease,
    background 0.34s ease,
    box-shadow 0.34s ease;
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarShell {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  border-color: var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 96%, var(--da-bg-page-mid));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(58, 48, 38, 0.07);
}

.moduleProgramsBody--trainV2 .mpExDifficultyBarInner {
  min-width: 0;
  padding: 0.45rem 0.55rem 0.5rem 0.35rem;
  transform-origin: top center;
  /* Mobile : la piste monte depuis sous le bouton */
  transform: translate3d(0, 0.75rem, 0) scale(0.96);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform var(--mp-diff-dur-panel, 0.48s) var(--mp-diff-ease-spring, cubic-bezier(0.34, 1.15, 0.5, 1)),
    opacity calc(var(--mp-diff-dur-panel, 0.48s) * 0.92) var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    filter var(--mp-diff-dur-panel, 0.48s) var(--mp-diff-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: 0s;
}

.moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarInner {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.06s;
}

@media (min-width: 901px) {
  .moduleProgramsBody--trainV2 .mpExDifficultyBarShell {
    align-self: center;
    width: auto;
    min-height: unset;
    transform: translate3d(-4px, 0, 0);
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarShell {
    transform: translate3d(0, 0, 0);
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyBarInner {
    transform-origin: left center;
    padding: 0.45rem 0.55rem 0.5rem 0.35rem;
    transform: translate3d(-1.4rem, 0, 0) scale(0.96);
    filter: blur(2px);
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarInner {
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition-delay: 0.06s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow {
    transition-duration: 0.01ms;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyBarShell,
  .moduleProgramsBody--trainV2 .mpExDifficultyBarInner {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyBarShell {
    transform: none;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyBarInner {
    transform: none;
    filter: none;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarShell {
    opacity: 1;
  }

  .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarInner {
    opacity: 1;
  }

  @media (min-width: 901px) {
    .moduleProgramsBody--trainV2 .mpExDifficultyToggleRow--open .mpExDifficultyBarInner {
      transition-delay: 0s;
    }
  }
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__label {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  min-width: 3.75rem;
  text-align: center;
  color: var(--da-text-muted, #74675b);
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__label--hard {
  color: color-mix(in srgb, var(--theme-b-strength-1, #b45346) 85%, var(--da-text-muted));
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__label--easy {
  color: color-mix(in srgb, var(--theme-b-strength-4, #2f5d40) 88%, var(--da-text-muted));
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__track {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.28rem 0.45rem;
  border-radius: var(--da-radius-pill, 999px);
  border: 1px solid var(--da-border-soft, var(--da-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--da-surface-elevated, #fff) 88%, var(--da-bg-page-mid, #f2ede5)) 0%,
    color-mix(in srgb, var(--da-bg-page-mid, #f2ede5) 35%, var(--da-surface, #fefbf7)) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(58, 48, 38, 0.04);
}

.moduleProgramsBody--trainV2 .mpExSensitivity .scale-button.difficultyScale__btn {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(58, 48, 38, 0.08);
  transition: transform 0.2s ease;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="1"],
.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="7"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="2"],
.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="6"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="3"],
.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="5"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="4"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="1"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-1, #b45346) 92%, #fff),
    var(--theme-b-strength-1, #b45346)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="2"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-1, #b45346) 45%, var(--theme-b-strength-2, #c67f2e)),
    var(--theme-b-strength-2, #c67f2e)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="3"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-2, #c67f2e) 88%, #fff),
    var(--theme-b-strength-2, #c67f2e)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="4"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--da-border, #e8e2d8) 55%, var(--da-surface, #fefbf7)),
    color-mix(in srgb, var(--da-bg-page-mid, #f2ede5) 65%, var(--da-surface, #fefbf7))
  );
  border-color: color-mix(in srgb, var(--da-text-muted, #74675b) 22%, var(--da-border));
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="5"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-3, #6b8f6b) 82%, #fff),
    var(--theme-b-strength-3, #6b8f6b)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="6"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-3, #6b8f6b) 35%, var(--theme-b-strength-4, #2f5d40)),
    var(--theme-b-strength-4, #2f5d40)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn[data-value="7"] {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-b-strength-4, #2f5d40) 88%, #fff),
    var(--theme-b-strength-4, #2f5d40)
  );
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn.selected {
  transform: scale(1.12);
  border-color: var(--da-surface-elevated, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--da-cta-from, #c49a6c) 55%, transparent),
    0 4px 12px rgba(58, 48, 38, 0.1);
  z-index: 1;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--da-cta-from, #c49a6c) 65%, transparent);
  outline-offset: 3px;
}

.moduleProgramsBody--trainV2 .mpExSensitivity .difficultyScale__btn:hover {
  transform: scale(1.06);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__close {
  color: var(--da-text-muted, #74675b);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__close:hover {
  color: var(--da-text, #3a322b);
  background: color-mix(in srgb, var(--da-bg-page-mid, #f2ede5) 80%, transparent);
  opacity: 1;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--da-cta-from, #c49a6c) 55%, transparent);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__loading {
  background: color-mix(in srgb, var(--da-surface-elevated, #fff) 88%, rgba(58, 48, 38, 0.06));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__loadingGlow {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--da-cta-from, #c49a6c) 22%, transparent) 0%,
    transparent 70%
  );
}

.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost {
  background: var(--da-bg-page-mid, #f2ede5);
  border-radius: 14px;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost img {
  background: transparent;
}

.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost iframe,
.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost video {
  background: var(--da-bg-page-mid, #f2ede5);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost mux-player.exerciseOverlay__mux {
  --media-object-fit: contain;
  --media-object-position: center;
  --media-radius: 12px;
  background-color: color-mix(in srgb, var(--da-bg-page-mid, #f2ede5) 94%, #1a1a1a);
}

.moduleProgramsBody--trainV2 .exerciseOverlay__mediaHost mux-player.exerciseOverlay__mux::part(top) {
  display: none;
}

body.exercise-overlay-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .exerciseThumb {
    transition: none;
  }

  .exerciseThumb:hover {
    transform: none;
  }

  .exerciseOverlay__loading {
    transition: none;
  }

  .exerciseOverlay__loadingGlow {
    animation: none;
    opacity: 0.55;
  }
}

/*
 * Widget streaming (lecteur Spotify / Deezer / Apple…)
 * ─ .exercise-streaming          → marqueur « exercice de type streaming »
 * ─ .musicPlatformContainer      → bloc racine : bouton casque + zone lecteur
 * ─ .musicPlatformToggleBtn      → ouvrir / fermer (masque le lecteur par défaut)
 * ─ .musicPlatformRevealOuter    → grille 0fr→1fr (hauteur animée)
 * ─ .musicPlatformReveal         → cible du clip-path (clip-lr, clip-tb…)
 * ─ .musicPlatformEmbedHost       → iframe injectée par hydrateStreamingWidgets.js
 * ─ .mpStreamDock (train v2)     → enveloppe optionnelle autour du bloc dans « Ressources »
 */
/* Streaming (Spotify / Deezer / Apple Music) — compact : pas de « double carte », lecteur + bouton alignés quand la place le permet */
.exercise-streaming.musicPlatformContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--mp-radius-sm);
  background: transparent;
  width: 100%;
  max-width: min(100%, 360px);
  min-width: 0;
  margin: 0.3rem 0 0.45rem;
  gap: 0;
  transition: none;
}

.exercise-streaming.musicPlatformContainer:not(.open) {
  overflow: visible;
  padding: 4px 6px 6px;
  margin: 0.25rem 0 0.5rem;
  width: auto;
  max-width: fit-content;
  align-self: flex-start;
}

.exercise-streaming.musicPlatformContainer.open {
  overflow: visible;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.65rem;
  width: 100%;
  max-width: min(100%, 360px);
  padding: 0;
  margin: 0.2rem 0 0.45rem;
  background: transparent;
  border: none;
  box-shadow: none;
  align-self: stretch;
}

.exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter {
  flex: 1 1 min(260px, 100%);
  min-width: 0;
}

/* Ouvert : bandeau même fond que le corps d’objectif (plus de « trou » visuel sur fond tag/surface) */
.objectiveItem__body .exercise-streaming.musicPlatformContainer.open,
.objectiveItem__mediaStrip .exercise-streaming.musicPlatformContainer.open,
.mpStreamDock .exercise-streaming.musicPlatformContainer.open {
  max-width: min(100%, 360px);
  width: min(100%, 360px);
  box-sizing: border-box;
  background: transparent;
  padding: 0;
  border-radius: 0;
  align-items: center;
  margin: 0.12rem 0 0.35rem;
}

.exercise-streaming .musicPlatformToggleBtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--theme-b-border);
  border-radius: 10px;
  background: var(--theme-b-surface);
  color: var(--mp-accent);
  box-shadow: 0 1px 3px var(--mp-ink-08);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease;
  flex-shrink: 0;
}

.exercise-streaming .musicPlatformToggleBtn:hover {
  background: var(--theme-b-subtle);
  border-color: color-mix(in srgb, var(--mp-teal) 40%, transparent);
  color: var(--mp-teal);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mp-teal) 14%, transparent);
}

.exercise-streaming .musicPlatformToggleBtn:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.exercise-streaming .musicPlatformToggleBtn__glyph {
  display: block;
}

/* Zone embed : hauteur = attribut sur l’iframe (frontend/js/utils/streamingEmbeds.js), pas une règle CSS trop haute */
.musicPlatformEmbedHost {
  line-height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.musicPlatformEmbedHost iframe {
  width: 100%;
  min-height: 0;
  /* Ne pas mettre height:auto ici : le layout interne embed (ex. Spotify / OverflowMenu) peut étirer le cadre. */
  max-height: 220px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--mp-ink-08);
  display: block;
}

/* Même document que la page (pas iframe) : éviter une ligne réservée type overflow menu */
.moduleProgramsBody [class^="OverflowMenuBase_wrapper__"],
.moduleProgramsBody [class*=" OverflowMenuBase_wrapper__"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.streamingFallback {
  margin: 0;
  padding: 0.5rem 0.35rem;
  font-size: 0.88rem;
  color: var(--mp-muted);
  line-height: 1.4;
}

.streamingFallback--link a {
  color: var(--mp-action, var(--theme-b-action));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Actions programme (si présentes) */
.programHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.programActions button {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: 0.5rem;
  border: 1px solid var(--mp-border);
  background: var(--theme-b-subtle);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: background 0.18s ease;
}

.programActions button:hover {
  background: var(--theme-b-bg);
}

.deleteProgramBtn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--mp-border);
  background: var(--theme-b-surface);
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  color: var(--mp-muted);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.deleteProgramBtn:hover {
  background: color-mix(in srgb, var(--theme-b-danger) 8%, var(--theme-b-surface));
  color: var(--theme-b-danger);
  border-color: color-mix(in srgb, var(--theme-b-danger) 28%, transparent);
}

.objectiveItem p[contenteditable="true"] {
  border: 1px dashed color-mix(in srgb, var(--mp-teal) 45%, transparent);
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-b-success-bg) 55%, var(--theme-b-surface));
}

.dayButtonsContainer {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
  margin-bottom: 0.75rem;
}

/* Responsive — mobile / tablette étroite */
@media (max-width: 768px) {
  .moduleProgramsBody {
    padding-left: 0;
  }

  .moduleProgramsMain {
    gap: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: max(2.75rem, env(safe-area-inset-bottom));
    padding-left: max(1.125rem, env(safe-area-inset-left), env(safe-area-inset-right));
    padding-right: max(1.125rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .programBlock {
    padding: 1.35rem 1.1rem 1.5rem;
  }

  .programHeader {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .programActions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .programActions button {
    margin-left: 0;
    min-height: 44px;
  }

  .dayButtonsContainer {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .exercise-streaming.musicPlatformContainer.open {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding-left: 4px;
  }

  .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter {
    flex-basis: auto;
    width: 100%;
  }

  /* Moins de marge interne : plus de largeur utile pour le bandeau difficulté */
  .objectiveItem__head {
    padding: 0.95rem 0.95rem 0.75rem;
  }

  .objectiveItem__body {
    padding: 0.7rem 0.85rem 0.95rem;
    gap: 0.6rem;
  }

  .objectiveItem__main {
    max-width: 100%;
    gap: 0.52rem;
  }

  .objectiveItem__row {
    grid-template-columns: 1fr;
    gap: 0.5rem 0;
  }

  .objectiveItem__aside {
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.35rem 0 0;
  }

  .objectiveItem__aside .cloche {
    width: 86px;
    height: 86px;
  }

  .objectiveItem__mediaStrip {
    gap: 0.5rem;
    padding-top: 0.35rem;
  }

  .objectiveItem__mediaStrip > .exerciseThumb {
    width: min(168px, 47vw);
    min-width: min(140px, 100%);
    max-width: none;
  }

  .objectiveItem__scaleRow .scalePanel {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  /* Bandeau difficulté : un peu plus compact pour que bouton + 7 pastilles tiennent en largeur */
  .objectiveItem__difficultyRow {
    --objective-difficulty-band-h: 2.72rem;
    padding: 0.12rem;
  }

  .objectiveItem__difficultyRow--expanded {
    --objective-difficulty-band-h: 2.85rem;
    column-gap: 0.22rem;
  }

  .objectiveItem__difficultyReveal {
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .objectiveItem__difficultyRow--expanded .objectiveItem__difficultyReveal {
    padding: 0.48rem 0.52rem;
    font-size: 0.78rem;
  }

  .objectiveItem__scaleRow .scalePanel {
    padding: 0.12rem 0.2rem 0.12rem 0.05rem;
  }

  .objectiveItem__difficultyRow--expanded .objectiveItem__scaleRow .scalePanel {
    padding: 0.1rem 0.38rem 0.1rem 0.04rem;
  }

  .objectiveItem__scaleRow .objectiveItem__difficultyScale .scale__track {
    gap: clamp(0.06rem, 1.2vw, 0.22rem);
    padding: 0.06rem 0.04rem;
  }

  .objectiveItem__difficultyRow--expanded
    .objectiveItem__scaleRow
    .objectiveItem__difficultyScale
    .scale__track {
    gap: 0.02rem;
    padding: 0.08rem 0.3rem 0.08rem 0.04rem;
  }

  .objectiveItem__scaleRow .scale-button {
    width: 17px;
    height: 17px;
    border-width: 2px;
    margin: 0.08rem 0.09rem;
  }

  .objectiveItem__scaleRow .scale-button.big {
    width: 22px;
    height: 22px;
  }

  .objectiveItem__scaleRow .scale-button.small {
    width: 13px;
    height: 13px;
  }

  .scale.scale--withLabels {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .scale__edge {
    width: auto;
    text-align: center;
  }

  .scale__track {
    width: 100%;
    justify-content: space-between;
    padding: 0.4rem 0;
  }

  .objectiveTimer {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .programBlock,
  .objectiveItem,
  .dayProgramBtn,
  .scale-button,
  .cloche svg {
    transition: none;
  }

  .objectiveItem__difficultyRow,
  .objectiveItem__difficultyReveal,
  .objectiveItem__scaleShell,
  .objectiveItem__bodyShell {
    transition: none;
  }

  .programDaysGlider {
    transition: none;
  }

  .programDays {
    scroll-behavior: auto;
  }
}

/* ——— Programme d’entraînement v2 : hero + rail (desktop) / bas (mobile) + workspace glass ——— */

.moduleProgramsBody--trainV2 {
  --tv2-text: var(--theme-b-text);
  --tv2-muted: var(--theme-b-text-muted);
  --tv2-glass: var(--da-surface-elevated);
  --tv2-glass-strong: color-mix(in srgb, var(--da-surface-elevated) 96%, var(--da-bg-page-mid) 4%);
  --tv2-border: color-mix(in srgb, var(--theme-b-border) 92%, #fff 8%);
  --tv2-border-soft: color-mix(in srgb, var(--theme-b-border) 80%, #fff 20%);
  --tv2-sheen: rgba(255, 255, 255, 0.52);
  --tv2-panel-bg: var(--da-surface);
  --tv2-shadow: 0 10px 32px rgba(120, 92, 62, 0.1);
  --tv2-shadow-soft: 0 8px 24px rgba(128, 98, 66, 0.08);
  --tv2-radius: 18px;
  color: var(--tv2-text);
  background:
    radial-gradient(ellipse 72% 52% at 6% -14%, var(--da-halo-sun) 0%, transparent 58%),
    radial-gradient(ellipse 60% 42% at 94% -8%, var(--da-halo-sun-fade) 0%, transparent 62%),
    linear-gradient(180deg, var(--da-bg-page) 0%, var(--da-bg-page-mid) 44%, var(--da-bg-page-end) 100%);
}

.moduleProgramsBody--trainV2 .moduleProgramsMain {
  max-width: min(1320px, 100%);
  gap: clamp(0.65rem, 1.8vw, 1.1rem);
  padding: 0.65rem clamp(0.45rem, 1.2vw, 0.85rem) max(3rem, env(safe-area-inset-bottom));
}

.moduleProgramsBody--trainV2 .moduleProgramsMain > p {
  background: var(--tv2-glass);
  border: 1px solid var(--tv2-border);
  color: var(--tv2-muted);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
}

.moduleProgramsBody--trainV2 .moduleTitle {
  color: var(--tv2-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Carrousel : même largeur que le contenu (un peu plus large sur PC) */
.mpDeckWrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(1320px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Train v2 : conserve des marges latérales symétriques autour de mpDeckWrap */
@media (min-width: 901px) {
  .moduleProgramsBody--trainV2 .mpDeckWrap {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: min(1320px, 100%);
  }
}

@media (max-width: 900px) {
  .moduleProgramsBody--trainV2 .mpDeckWrap {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    width: calc(100% + 1.5rem);
    max-width: none;
  }
}

/* Sélecteur de jour : petit bloc en haut à gauche (#moduleProgramBlock), taille proche d’une mpRailCard */
.moduleProgramsBody--trainV2 .mpDayPicker {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.18rem;
  border-radius: 14px;
  background: var(--tv2-panel-bg);
  border: 1px solid var(--tv2-border-soft);
  box-shadow: var(--tv2-shadow-soft);
}

/* Carrousel : une « carte jour » centrée, voisins entrevus, flèches latérales */
.mpDayCarousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.18rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.mpDayCarousel--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Flèches discrètes : même hauteur de base que .dayProgramBtn / ligne mpRailCard */
.mpDayCarousel__arrow {
  appearance: none;
  flex-shrink: 0;
  width: 1.42rem;
  min-height: 2.85rem;
  height: 100%;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.52);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.mpDayCarousel__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
}

.mpDayCarousel__arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.mpDayCarousel__arrow:focus-visible {
  outline: 2px solid rgba(253, 230, 138, 0.85);
  outline-offset: 2px;
}

.mpDayCarousel__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #fff 72%, var(--da-surface-elevated)) 0%,
      color-mix(in srgb, var(--da-surface) 92%, #fff) 100%
    );
  border: 1px solid var(--tv2-border-soft);
  box-shadow: inset 0 1px 0 var(--tv2-sheen);
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}

.moduleProgramsBody--trainV2 .mpDayCarousel__track.programDays {
  margin: 0;
  padding: 0.45rem 0.45rem 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.45rem;
  scroll-behavior: smooth;
  gap: 0.45rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__track.programDays::-webkit-scrollbar {
  display: none;
  height: 0;
}

@media (pointer: coarse) {
  .moduleProgramsBody--trainV2 .mpDayCarousel__track.programDays {
    scroll-behavior: auto;
  }
}

.moduleProgramsBody--trainV2 .mpDayPicker .dayProgramBtn {
  flex: 0 0 min(220px, 100%);
  width: min(220px, 100%);
  box-sizing: border-box;
  min-height: 2.85rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.84rem;
  scroll-snap-align: center;
  border-radius: 14px;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__viewport .programDaysGlider {
  bottom: 0.12rem;
}

/* v10 compact : piste seule, sans flèches latérales */
.moduleProgramsBody--trainV2 .mpDayCarousel--v10compact {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.12rem;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__viewport--v10compact {
  container-type: inline-size;
  container-name: mp-v10-compact;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__viewport--v10compact::-webkit-scrollbar {
  display: none;
  height: 0;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__track--v10compact.programDays {
  margin: 0;
  overflow: visible;
  scroll-snap-type: none;
  scroll-behavior: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.22rem calc(21cqi + 0.18rem);
  min-height: 2.5rem;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}

.moduleProgramsBody--trainV2 .mpDayCarousel--v10compact .dayProgramBtn {
  flex: 0 0 calc(48cqi - 0.3rem);
  max-width: calc(48cqi - 0.3rem);
  width: auto;
  min-width: 0;
  min-height: 2.05rem;
  scroll-snap-align: center;
  font-size: 0.66rem;
  border-radius: 10px;
  padding: 0.28rem 0.34rem;
  transition:
    opacity 0.38s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.38s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.38s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    color 0.28s ease;
}

.moduleProgramsBody--trainV2 .mpDayCarousel--v10compact .dayProgramBtn:not(.selected) {
  opacity: 0.56;
  transform: scale(0.9);
}

.moduleProgramsBody--trainV2 .mpDayCarousel--v10compact .dayProgramBtn.selected {
  opacity: 1;
  transform: scale(1);
  border-color: color-mix(in srgb, var(--theme-b-border-strong) 55%, #94a3b8 45%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 78%, transparent),
    color-mix(in srgb, #f1f5f9 58%, transparent)
  );
  color: var(--tv2-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px color-mix(in srgb, #ffffff 70%, transparent);
}

.moduleProgramsBody--trainV2 .mpDayCarousel__arrow--v10compact {
  width: 0.78rem;
  min-height: 2.05rem;
  border: 1px solid var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 94%, #fff);
  color: var(--theme-b-text-muted);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 600;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__arrow--v10compact:hover:not(:disabled) {
  background: color-mix(in srgb, var(--theme-b-action) 12%, var(--da-surface-elevated));
  border-color: color-mix(in srgb, var(--theme-b-action) 28%, var(--tv2-border-soft));
  color: var(--theme-b-primary);
}

.moduleProgramsBody--trainV2 .mpDayCarousel__arrow--v10compact:disabled {
  opacity: 0.22;
  cursor: not-allowed;
}

.moduleProgramsBody--trainV2 .mpDayCarousel__status--v10compact {
  margin: 0.28rem 0 0;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--tv2-muted) 90%, var(--theme-b-action));
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .moduleProgramsBody--trainV2 .mpDayCarousel__viewport--v10compact {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moduleProgramsBody--trainV2 .mpDayCarousel--v10compact .dayProgramBtn {
    transition:
      opacity 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease,
      color 0.15s ease;
  }

  .moduleProgramsBody--trainV2 .mpDayCarousel--v10compact .dayProgramBtn:not(.selected) {
    transform: none;
  }
}

/*
 * Grille : col. gauche = jour + sous-titre « Exercices disponibles » + rail
 *          col. droite = workspace (pleine hauteur)
 */
.mpSessionMain {
  display: grid;
  grid-template-columns: minmax(188px, 272px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 0.35rem 1.05rem;
  align-items: stretch;
  min-height: min(93vh, 1040px);
  flex: 1 1 auto;
  min-width: 0;
}

.moduleProgramsBody--trainV2 .mpSessionMain .mpDayPicker {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.moduleProgramsBody--trainV2 .mpRailSectionKicker {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0 0.05rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-b-text-muted);
  line-height: 1.3;
}

/* Modale fin de journée (tous les exos faits) */
.mpDayCompleteOverlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mpDayCompleteOverlay--open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.mpDayCompleteOverlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
}

.mpDayCompleteOverlay__panel {
  position: relative;
  z-index: 1;
  max-width: 22rem;
  width: 100%;
  padding: 1.35rem 1.25rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--tv2-border-soft);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #ecfdf5 88%, #fff),
    color-mix(in srgb, var(--da-surface-elevated) 94%, #fff)
  );
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.mpDayCompleteOverlay__title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #047857;
}

.mpDayCompleteOverlay__text {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--tv2-text);
}

.mpDayCompleteOverlay__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mpDayCompleteOverlay__btn {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  border-radius: 12px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  border: none;
}

.mpDayCompleteOverlay__btn--primary {
  color: #fffefb;
  background: linear-gradient(145deg, #059669, #047857);
  box-shadow: 0 4px 14px rgba(5, 120, 85, 0.28);
}

.mpDayCompleteOverlay__btn--primary:hover {
  filter: brightness(1.04);
}

.mpDayCompleteOverlay__btn--ghost {
  background: transparent;
  color: color-mix(in srgb, var(--tv2-text) 78%, #64748b);
  border: 1px solid var(--tv2-border-soft);
}

.mpSessionMain .mpRail {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.15rem 0.15rem 0.3rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.mpSessionMain .mpRail::-webkit-scrollbar {
  width: 8px;
}

.mpSessionMain .mpRail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.mpSessionMain .mpWorkspace {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.mpTrainDeck {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--tv2-radius);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.mpTrainDeck::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.mpTrainDeck:focus-visible {
  outline: 2px solid rgba(253, 230, 138, 0.75);
  outline-offset: 3px;
}

.mpSlide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

.mpSlide__inner {
  padding: 0.15rem 0.1rem 0.85rem;
  box-sizing: border-box;
}

.mpSlide__inner--session {
  padding-top: 0;
  padding-bottom: 0.1rem;
}

/* Hero programme (slide Aperçu) */
.mpHero {
  border-radius: var(--tv2-radius);
  margin: 0.45rem;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  background: color-mix(in srgb, var(--da-surface-elevated) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--tv2-border) 76%, #ffffff 24%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow:
    0 4px 10px rgba(63, 42, 27, 0.16),
    0 1px 4px rgba(63, 42, 27, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .mpHero:has(.mpHero__figure) {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
    align-items: start;
  }
}

.mpHero__main {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.8vw, 1rem);
  min-width: 0;
}

.mpHero__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--da-ink-muted, var(--theme-b-text-muted));
  line-height: 1.25;
}

.mpHero__title {
  margin: 0;
  font-family: var(--typo-display, var(--mp-font));
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--da-ink, var(--tv2-text));
}

.mpHero__lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--da-ink-muted, var(--tv2-muted));
}

.mpHero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.mpHero__stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--da-surface-elevated) 90%, var(--da-bg-page-mid));
  border: 1px solid var(--tv2-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mpHero__statLabel {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-b-text-muted);
}

.mpHero__statValue {
  font-size: 1.06rem;
  font-weight: 780;
  color: var(--tv2-text);
}

.mpHero__objectives {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.mpHero__objectivesTitle {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-b-text-muted);
}

.mpHero__objectivesList {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5rem 1rem 0.5rem 2.15rem;
  max-height: min(36vh, 260px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--tv2-border-soft);
  background: color-mix(in srgb, var(--da-surface-elevated) 92%, var(--da-bg-page-mid));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tv2-text);
  scrollbar-width: thin;
}

.mpHero__objectivesList li {
  margin: 0.28rem 0;
}

.mpHero__cta {
  margin-top: 0.25rem;
}

.mpHero__ctaBtn {
  appearance: none;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  display: block;
  padding: 0.72rem 1.2rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #ffffff 65%, var(--tv2-border-soft));
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--da-surface-elevated) 94%, #ffffff) 0%,
    color-mix(in srgb, var(--da-surface-elevated) 82%, var(--da-bg-page-mid)) 100%
  );
  color: var(--tv2-text);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 780;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 22px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.mpHero__ctaBtn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tv2-border-soft) 80%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 28px rgba(15, 23, 42, 0.1);
}

.mpHero__ctaBtn:focus-visible {
  outline: 2px solid rgba(253, 230, 138, 0.95);
  outline-offset: 3px;
}

.mpHero__figure {
  margin: 0;
  border-radius: calc(var(--tv2-radius) - 4px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tv2-border-soft) 88%, transparent);
  box-shadow: var(--tv2-shadow-soft);
  aspect-ratio: 4 / 3;
  max-height: 220px;
  width: 100%;
}

@media (max-width: 719px) {
  .mpHero:has(.mpHero__figure) {
    grid-template-columns: 1fr;
  }

  .mpHero__figure {
    max-height: 200px;
    order: -1;
  }
}

.mpHero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.mpda-live-applied[data-fx-hero="surface"] .mpHero__eyebrow {
  color: color-mix(in srgb, var(--da-on-surface) 72%, transparent);
}

.mpSlide__inner--session .programBlock--v2 {
  width: 100%;
  box-sizing: border-box;
}

/* Carte jour + workspace */
.programBlock--v2 {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid var(--tv2-border);
  box-shadow: var(--tv2-shadow-soft);
  color: var(--tv2-text);
  padding: 0.5rem clamp(1rem, 2vw, 1.35rem) 0.55rem;
  min-height: 0;
}

.moduleProgramsBody--trainV2 .programBlock--v2 {
  border-radius: 18px 18px 14px 14px;
  overflow: hidden;
}

.programBlock--v2:hover {
  border-color: color-mix(in srgb, var(--theme-b-border-strong) 80%, #fff 20%);
  box-shadow: 0 12px 34px rgba(120, 92, 62, 0.14);
}

/* Titre du module + programme (au-dessus de la séance) */
.moduleProgramsBody--trainV2 .mpProgramHeadBlock {
  align-self: start;
  max-width: min(100%, 46rem);
  margin: 0 0 0.5rem;
  padding: 0 0.1rem;
}

.moduleProgramsBody--trainV2 .mpProgramHeadBlock__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-b-text-muted);
  line-height: 1.25;
}

.moduleProgramsBody--trainV2 .mpProgramHeadBlock__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--theme-b-text);
}

.moduleProgramsBody--trainV2 .mpProgramHeadBlock__titleRow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.moduleProgramsBody--trainV2 .mpProgramHeadBlock__titleRow .mpProgramHeadBlock__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Sélecteur natif « jour » : masqué par défaut (sync desktop / mobile dans modulePrograms-mobile.css) */
.mpDayNativeSelect {
  display: none;
}

.moduleProgramsBody--trainV2 .mpSessionMain .mpRail {
  scrollbar-color: color-mix(in srgb, var(--theme-b-border) 88%, var(--theme-b-primary)) transparent;
}

.moduleProgramsBody--trainV2 .mpSessionMain .mpRail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-b-border-strong) 55%, var(--da-bg-page-mid));
}

.moduleProgramsBody--trainV2 .dayProgramBtn {
  background: color-mix(in srgb, var(--da-surface-elevated) 90%, transparent);
  border-color: var(--tv2-border);
  color: var(--tv2-text);
}

.moduleProgramsBody--trainV2 .dayProgramBtn:hover {
  background: color-mix(in srgb, var(--da-surface-elevated) 96%, #fff);
  border-color: color-mix(in srgb, var(--theme-b-border-strong) 75%, #fff);
}

.moduleProgramsBody--trainV2 .dayProgramBtn.selected {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 76%, transparent),
    color-mix(in srgb, #f8fafc 58%, transparent)
  );
  border-color: color-mix(in srgb, var(--theme-b-border-strong) 52%, #94a3b8 48%);
  color: var(--tv2-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0 1px color-mix(in srgb, #ffffff 68%, transparent);
}

.mpRailCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.72rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--tv2-border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--tv2-text);
  font: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.mpRailCard:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.3);
}

.mpRailCard:focus-visible {
  outline: 2px solid rgba(253, 230, 138, 0.95);
  outline-offset: 2px;
}

.mpRailCard--active {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, #fff 88%, var(--theme-b-action)),
      color-mix(in srgb, var(--theme-b-action) 14%, var(--da-surface-elevated))
    );
  border-color: rgba(253, 230, 138, 0.55);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.mpRailCard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.25);
  color: var(--tv2-text);
}

.mpRailCard--active .mpRailCard__num {
  background: color-mix(in srgb, var(--theme-b-action) 82%, #fff);
  color: var(--theme-b-primary);
}

.mpRailCard__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.mpRailCard__title {
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--tv2-text);
}

.mpRailCard__meta {
  margin-top: 0;
}

.mpRailCard__check {
  color: rgba(167, 243, 208, 0.95);
  font-weight: 800;
  align-self: center;
}

.moduleProgramsBody--trainV2 .mpRailCard {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #fff 94%, var(--da-surface-elevated)),
    var(--da-surface-elevated)
  );
  border: 1px solid var(--tv2-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.moduleProgramsBody--trainV2 .mpRailCard:hover {
  background: linear-gradient(
    180deg,
    #fff,
    color-mix(in srgb, var(--da-surface-elevated) 88%, var(--theme-b-action))
  );
  border-color: color-mix(in srgb, var(--theme-b-border-strong) 65%, #fff);
}

.moduleProgramsBody--trainV2 .mpRailCard--active {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, #fff 88%, var(--theme-b-action)),
    color-mix(in srgb, var(--theme-b-action) 14%, var(--da-surface-elevated))
  );
  border-color: color-mix(in srgb, var(--theme-b-action) 38%, var(--tv2-border-soft));
  box-shadow:
    0 4px 18px rgba(120, 92, 62, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.moduleProgramsBody--trainV2 .mpRailCard__check {
  color: color-mix(in srgb, var(--theme-b-action) 78%, #1e3d3e);
}

.moduleProgramsBody--trainV2 .mpRailCard.mpRailCard--completed {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ecfdf5 94%, #fff),
    color-mix(in srgb, #d1fae5 55%, var(--da-surface-elevated))
  );
  border-color: color-mix(in srgb, #34d399 42%, var(--tv2-border-soft));
}

.moduleProgramsBody--trainV2 .mpRailCard.mpRailCard--active.mpRailCard--completed {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, #a7f3d0 55%, #fff),
    color-mix(in srgb, #059669 22%, var(--da-surface-elevated))
  );
  border-color: color-mix(in srgb, #047857 38%, var(--tv2-border-soft));
  box-shadow:
    0 4px 20px rgba(5, 120, 85, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.moduleProgramsBody--trainV2 .mpRailCard.mpRailCard--completed .mpRailCard__check {
  color: #047857;
}

.moduleProgramsBody--trainV2 .mpRailCard.mpRailCard--nextBlink:not(.mpRailCard--active) {
  animation: mpRailCardNextBlink 1.05s ease-in-out infinite;
  border-color: color-mix(in srgb, #22c55e 48%, var(--tv2-border-soft)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #22c55e 22%, transparent),
    0 4px 16px color-mix(in srgb, #22c55e 14%, transparent);
}

@keyframes mpRailCardNextBlink {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, #22c55e 22%, transparent),
      0 4px 14px rgba(5, 120, 85, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, #22c55e 48%, transparent),
      0 8px 26px rgba(5, 120, 85, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .moduleProgramsBody--trainV2 .mpRailCard.mpRailCard--nextBlink:not(.mpRailCard--active) {
    animation: none;
    border-color: color-mix(in srgb, #22c55e 52%, var(--tv2-border-soft)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 28%, transparent);
  }
}

/* Navigation exercice mobile : masquée sur grand écran (cf. modulePrograms-mobile.css) */
.mpMobileExerciseNav,
.mpMobileExerciseSheet {
  display: none;
}

/* Bloc audio / streaming sous les vignettes, au-dessus de la difficulté */
.moduleProgramsBody--trainV2 .mpExStreamBlock {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.35rem 1.15rem 0.5rem;
}

/* Exercice monté */
.objectiveItem.mpExRoot {
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.moduleProgramsBody--trainV2 .objectiveItem.mpExRoot {
  position: relative;
  gap: 1.05rem;
}

/* Train v2 : 1er objectif — panneau blanc translucide */
.moduleProgramsBody--trainV2 .objectiveItem.mpExRoot.mpExRoot--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #ffffff 55%, var(--tv2-border-soft));
  box-shadow: var(--tv2-shadow-soft);
}

.moduleProgramsBody--trainV2 .objectiveItem.mpExRoot.mpExRoot--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.58) 42%,
    rgba(255, 255, 255, 0.66) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.moduleProgramsBody--trainV2 .objectiveItem.mpExRoot.mpExRoot--hero > * {
  position: relative;
  z-index: 1;
}

.mpExTopMetaWrap {
  margin-top: 0.55rem;
}

.mpExTopMetaWrap .objectiveMeta {
  margin-top: 0;
}

.objectiveItem.mpExRoot:focus,
.objectiveItem.mpExRoot:focus-visible {
  outline: none;
}

.mpExTopBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65rem 1.25rem;
  padding: 1.1rem 1.15rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.15);
}

.moduleProgramsBody--trainV2 .mpExTopMetaWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.mpExTitleCol {
  min-width: 0;
}

.mpExMetaRow {
  padding: 0 1.15rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.08);
}

.mpExMetaRow .objectiveMeta {
  margin-top: 0;
}

.mpExKicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35rem;
}

.mpExTitle {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--tv2-text);
}

.mpExTopMeta .objectiveMeta__chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.moduleProgramsBody--trainV2 .mpExTopMeta .objectiveMeta__chip--difficulty {
  border-color: color-mix(in srgb, var(--theme-b-action) 35%, var(--tv2-border-soft));
  background: color-mix(in srgb, #fff 86%, var(--da-surface-elevated));
  color: var(--theme-b-action);
}

.moduleProgramsBody--trainV2 .mpExTopMeta .objectiveMeta__chip--category {
  border-color: color-mix(in srgb, var(--theme-b-primary) 28%, var(--tv2-border-soft));
  background: color-mix(in srgb, #fff 90%, var(--da-surface-elevated));
  color: color-mix(in srgb, var(--theme-b-primary) 78%, var(--theme-b-text));
}

.mpExTimerCol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 0.35rem;
  min-width: 5.5rem;
}

.mpExTimerCol .timeDisplay {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  text-align: right;
}

.mpExTimerCol .objectiveTimer {
  align-self: center;
}

.mpExTimerCol .cloche {
  width: 72px;
  height: 72px;
}

.mpExTimerCol .timerDisplay {
  font-size: 0.88rem;
}

.mpExSection {
  padding: 0;
}

.mpExSection__title {
  margin: 0 0 0.5rem;
  padding: 0 1.15rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.mpExSection--instructions {
  padding: 1rem 0 0.85rem;
}

.mpExSection--resources {
  padding: 0.35rem 0 0.85rem;
}

.mpExSection--tools {
  padding: 0.15rem 0 0.65rem;
}

.mpExSection--sensitivity {
  padding: 0;
}

.mpExPieceConsigne {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.mpExInstructions {
  padding: 0 1.15rem 0.15rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.mpExInstructions .exercise-text,
.mpExInstructions .exercise-html,
.mpExInstructions .noExercise {
  color: inherit;
}

.mpExInstructions .noExercise {
  font-style: italic;
  opacity: 0.85;
}

.moduleProgramsBody--trainV2 .mpExTopBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.65rem 1rem;
  border-bottom: none;
  padding: 1.25rem 1.35rem 1.05rem;
  background: color-mix(in srgb, var(--da-surface-elevated) 96%, var(--da-bg-page-mid));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tv2-border-soft) 85%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.moduleProgramsBody--trainV2 .mpExKicker {
  color: var(--theme-b-text-muted);
}

.moduleProgramsBody--trainV2 .mpExSection__title {
  color: var(--theme-b-text-muted);
}

.moduleProgramsBody--trainV2 .mpExSection--instructions {
  padding: 0;
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.moduleProgramsBody--trainV2 .mpExSection--instructions .mpExSection__title {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: none;
  color: var(--theme-b-text-muted);
}

.moduleProgramsBody--trainV2 .mpExInstructions {
  padding: 0.5rem 1.15rem 0.55rem 1.2rem;
  margin-top: 0.2rem;
  border-left: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--da-surface-elevated) 55%, transparent);
  color: var(--tv2-text);
  font-size: 1rem;
  line-height: 1.65;
}

.moduleProgramsBody--trainV2 .mpExTimerCol .timeDisplay {
  color: var(--tv2-text);
}

/* Minuteur : pastille verre cohérente avec le thème */
.moduleProgramsBody--trainV2 .mpExTimerCol .objectiveTimer {
  padding: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--da-surface-elevated) 88%, #ffffff),
    color-mix(in srgb, var(--da-surface-elevated) 72%, var(--da-bg-page-mid))
  );
  border: 1px solid color-mix(in srgb, #ffffff 45%, var(--tv2-border-soft));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}

.moduleProgramsBody--trainV2 .mpExTimerCol .cloche svg .circle-bg {
  stroke: color-mix(in srgb, var(--tv2-border-soft) 55%, transparent);
}

.moduleProgramsBody--trainV2 .mpExTimerCol .cloche svg .circle {
  stroke: color-mix(in srgb, var(--theme-b-action) 35%, var(--tv2-muted));
}

.moduleProgramsBody--trainV2 .mpExTopMeta .objectiveMeta__chip {
  border: 1px solid var(--tv2-border-soft);
}

.moduleProgramsBody--trainV2 .mpExResources {
  padding-top: 0.15rem;
}

.moduleProgramsBody--trainV2 .mpExSection--resources .mpExSection__title {
  padding-top: 0.35rem;
}

.moduleProgramsBody--trainV2 .mpExTools {
  border: none;
  background: color-mix(in srgb, var(--da-bg-page-mid) 22%, transparent);
}

.moduleProgramsBody--trainV2 .mpExTools__placeholder {
  color: var(--tv2-muted);
}

.moduleProgramsBody--trainV2 .mpExSensitivity {
  border-top: none;
  padding-top: 0.45rem;
  margin-top: 0.35rem;
  background: transparent;
}

.mpExResources {
  padding: 0 1.15rem 0.35rem;
}

.mpExMediaStrip {
  border-top: none;
  padding-top: 0;
}

.moduleProgramsBody--trainV2 .mpExMediaStrip {
  border-top: none;
  padding-top: 0.35rem;
  margin-top: 0.15rem;
}

.mpStreamDock {
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
}

/* Train v2 : bandeau streaming — grille pour garder le bouton casque fixe à gauche */
.moduleProgramsBody--trainV2 .exercise-streaming.musicPlatformContainer.open {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: start;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  gap: 0.5rem 0.65rem;
}

.moduleProgramsBody--trainV2 .exercise-streaming.musicPlatformContainer.open .musicPlatformToggleBtn {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.moduleProgramsBody--trainV2 .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter {
  grid-column: 2;
  grid-row: 1;
  flex: unset !important;
  width: 100%;
  min-width: 0;
}

.moduleProgramsBody--trainV2 .mpExMediaStrip .exercise-streaming.musicPlatformContainer.open,
.moduleProgramsBody--trainV2 .mpStreamDock .exercise-streaming.musicPlatformContainer.open {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.moduleProgramsBody--trainV2 .exercise-streaming .musicPlatformToggleBtn {
  background: color-mix(in srgb, var(--da-surface) 92%, #fff);
  border-color: var(--tv2-border-soft);
  color: var(--tv2-text);
  box-shadow: none;
}

.moduleProgramsBody--trainV2 .exercise-streaming .musicPlatformToggleBtn:hover {
  background: color-mix(in srgb, var(--theme-b-action) 14%, var(--da-surface-elevated));
  border-color: color-mix(in srgb, var(--theme-b-action) 32%, var(--tv2-border-soft));
  color: var(--theme-b-primary);
}

/* Audio / streaming dans « Ressources » : compact (contrôles lisibles sans barre pleine largeur) */
.moduleProgramsBody--trainV2 .mpExStreamBlock .exercise-streaming.musicPlatformContainer,
.moduleProgramsBody--trainV2 .mpStreamDock .exercise-streaming.musicPlatformContainer {
  align-self: flex-start;
  width: min(100%, 360px);
  max-width: min(100%, 360px);
  margin-left: 0;
  box-sizing: border-box;
}

.moduleProgramsBody--trainV2
  .mpExStreamBlock
  .exercise-streaming.musicPlatformContainer:not(.open),
.moduleProgramsBody--trainV2
  .mpStreamDock
  .exercise-streaming.musicPlatformContainer:not(.open) {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0.15rem;
}

.moduleProgramsBody--trainV2 .mpExStreamBlock .musicPlatformEmbedHost iframe,
.moduleProgramsBody--trainV2 .mpStreamDock .musicPlatformEmbedHost iframe {
  border: 0 !important;
  outline: none;
}

@media (max-width: 620px) {
  .moduleProgramsBody--trainV2 .mpOverlaySequenceTop {
    justify-content: center;
    padding-left: 0;
    margin-top: 0.15rem;
  }
}

.mpExTools {
  margin: 0 1.15rem 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

.mpExTools__placeholder {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.mpExSensitivity {
  margin-top: auto;
  padding: 0.85rem 1.15rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
}

.mpExSection--sensitivity .mpExSection__title {
  padding-top: 0.15rem;
  margin-bottom: 0.55rem;
}

/* Vignettes image / vidéo : bords clairs, focus clavier seulement, moins de « cadre » */
.moduleProgramsBody--trainV2 .mpWorkspace .exerciseThumb {
  border: 1px solid color-mix(in srgb, #fff 78%, var(--tv2-border-soft));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--theme-b-border) 18%, transparent);
}

.moduleProgramsBody--trainV2 .mpWorkspace .exerciseThumb:hover {
  border-color: color-mix(in srgb, #fff 55%, var(--theme-b-action));
}

.moduleProgramsBody--trainV2 .mpWorkspace .exerciseThumb:focus:not(:focus-visible) {
  outline: none;
}

.moduleProgramsBody--trainV2 .mpWorkspace .exerciseThumb:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-b-action) 28%, var(--tv2-border-soft)),
    0 4px 16px color-mix(in srgb, var(--theme-b-border) 22%, transparent);
}

.moduleProgramsBody--trainV2 .mpWorkspace .mpExSequenceThumb.exerciseThumb {
  max-width: 100%;
}

.moduleProgramsBody--trainV2 .mpWorkspace .mpExSequenceThumb.exerciseThumb--sequence {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--da-surface-elevated) 96%, transparent),
      color-mix(in srgb, var(--da-bg-page-mid) 30%, transparent)
    );
}

.moduleProgramsBody--trainV2 .mpWorkspace .mpExSequenceThumb .mpExSequenceThumb__frame {
  min-height: 84px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Zone trainingResult : suppression de toutes les ombres */
#trainingResult,
#trainingResult :where(*, *::before, *::after) {
  box-shadow: none !important;
}

/* Exception : conserver du relief sur le Hero */
#trainingResult .mpHero {
  box-shadow:
    0 8px 18px rgba(63, 42, 27, 0.2),
    0 2px 8px rgba(63, 42, 27, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  .moduleProgramsBody--trainV2 .mpOverlaySequence__gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 0.4rem 0.55rem;
    max-height: min(48svh, 360px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .moduleProgramsBody--trainV2 .mpOverlaySequence__diagram {
    flex: 0 1 auto;
    max-width: min(150px, 30vw);
  }

  .moduleProgramsBody--trainV2 .mpExSequenceThumb {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .moduleProgramsBody--trainV2 .mpExSequenceThumb__host {
    justify-content: center;
    left: 6px;
    right: 6px;
  }

  .moduleProgramsBody--trainV2 .mpExSequenceThumb .mpExSequenceThumb__diagram {
    transform: scale(0.26);
    transform-origin: top center;
    margin-right: -48%;
    margin-bottom: -46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpTrainDeck {
    scroll-behavior: auto;
  }

  .mpRailCard,
  .programBlock--v2 {
    transition: none;
  }
}

/* Tactile : transitions plus courtes, moins de will-change (GPU / batterie) */
@media (hover: none) and (pointer: coarse) {
  .programDaysGlider {
    transition-duration: 0.22s;
    will-change: auto;
  }

  .programBlock,
  .dayProgramBtn,
  .exerciseThumb {
    transition-duration: 0.16s;
  }

  .cloche svg {
    transition-duration: 0.22s;
  }

  .objectiveItem__bodyShell {
    transition-duration: 0.34s;
  }
}

/* Morceau complet (atelier → programme) */
.mpExSection--piece {
  margin-top: 1rem;
}

.mpPiecePanel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--da-base, #fff) 92%, #eaf1ff);
  padding: 12px 14px 16px;
}

.mpPiecePanel--withVisual {
  padding: 0;
  background: color-mix(in srgb, var(--da-base, #fff) 96%, #eef4ff);
}

.mpPiecePanel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.mpPiecePanel__bg::before,
.mpPiecePanel__bg::after {
  content: "";
  position: absolute;
  inset: -14px;
}

.mpPiecePanel__bg::before {
  background-image: var(--mp-piece-panel-bg-image, none);
  background-size: cover;
  background-position: center;
  filter: blur(2px) saturate(1.04) brightness(1.04);
  transform: scale(1.01);
  opacity: 0;
}

.mpPiecePanel__bg::after {
  background:
    linear-gradient(180deg, rgba(18, 16, 30, 0.1) 0%, rgba(18, 16, 28, 0.22) 100%),
    radial-gradient(120% 82% at 12% 8%, rgba(255, 255, 255, 0.24), transparent 58%);
  opacity: 0.08;
}

.mpPiecePanel--withVisual .mpPiecePanel__bg::before {
  opacity: 0.92;
}

.mpPiecePanel--withVisual .mpPiecePanel__bg::after {
  opacity: 1;
}

.mpPiecePanel__surface {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}

.mpPiecePanel--withVisual .mpPiecePanel__surface {
  padding: 12px 14px 16px;
}

.mpPiecePanel--withVisual .mpPiecePanel__surface::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.mpPiecePanel--withVisual.mpPiecePanel--titleLumaLight .mpPiecePanel__surface::before {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0.44) 0%,
    rgba(10, 12, 20, 0.15) 52%,
    rgba(10, 12, 20, 0) 100%
  );
}

.mpPiecePanel--withVisual.mpPiecePanel--titleLumaMid .mpPiecePanel__surface::before {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0.24) 0%,
    rgba(10, 12, 20, 0.08) 55%,
    rgba(10, 12, 20, 0) 100%
  );
}

.mpPiecePanel--withVisual.mpPiecePanel--titleLumaDark .mpPiecePanel__surface::before {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 20, 0.11) 0%,
    rgba(10, 12, 20, 0.03) 48%,
    rgba(10, 12, 20, 0) 100%
  );
}

.mpPiecePanel--withVisual .mpPiecePanel__surface > * {
  position: relative;
  z-index: 1;
}

.mpPiecePanel--withVisual .mpPiecePanel__title {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.62),
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(255, 255, 255, 0.2);
}

.mpPiecePanel--withVisual .mpPiecePanel__meta,
.mpPiecePanel--withVisual .mpPiecePanel__desc {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .mpPiecePanel--withVisual .mpPiecePanel__surface::before {
    transition: none;
  }
}

.mpPiecePanel__header {
  margin-bottom: 12px;
}

.mpPiecePanel__title {
  margin: 0 0 4px;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
}

.mpPiecePanel__meta,
.mpPiecePanel__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #64748b;
}

.mpPiecePanel__desc {
  margin-top: 6px;
}

.mpPiecePanel__sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moduleProgramsBody--trainV2 .mpPiecePanel .workshopPiece__previewSection {
  border-radius: 10px;
}

.faPiecePreviewHost {
  width: 100%;
  margin-top: 8px;
}

.mpPiecePanel__headerRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mpPiecePanel__artwork {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: #fff;
  overflow: hidden;
}

.mpPiecePanel__artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpPiecePanel__artwork--empty img {
  display: none;
}

.mpPiecePanel__headerRow--withTonics {
  justify-content: space-between;
}

.mpPiecePanel__tonicTimeline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.32rem;
  flex-shrink: 0;
  max-width: min(100%, 12rem);
}

.mpPiecePanel__tonicTimelineSep {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, #64748b);
  line-height: 1;
  user-select: none;
}

.mpPiecePanel__tonicTimelineSepIcon {
  display: block;
  flex-shrink: 0;
}

.mpPieceTonicChip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0.2rem 0.62rem;
  border-radius: 7px;
  line-height: 1.1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--da-ink, #2a2824) 88%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 78%, transparent);
}

.mpPieceTonicChip__word {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.82;
}

.mpPieceTonicChip__value {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mpPieceTonicChip.is-modulation {
  color: var(--da-accent-ink, #fff);
  background: color-mix(in srgb, var(--da-accent-2, #8b7355) 88%, var(--da-ink, #2a2824));
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 55%, transparent);
}

.mpPieceTonicChip.is-modulation .mpPieceTonicChip__word {
  opacity: 0.9;
}

/* Badge modulation (style capo) */
.mpPieceModulationBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-accent-2, #8b7355) 48%, transparent);
  background: color-mix(in srgb, var(--da-accent-2, #8b7355) 14%, #fff);
  color: color-mix(in srgb, var(--da-accent-2, #8b7355) 92%, var(--da-ink, #2a2824));
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.1;
}

.mpPieceModulationBadge.is-pivot {
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 62%, transparent);
  background: color-mix(in srgb, var(--da-accent-2, #8b7355) 22%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent-2, #8b7355) 18%, transparent);
}

.mpPieceModulationBadge__icon {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--da-accent-2, #8b7355) 88%, var(--da-ink, #2a2824));
}

.mpPieceModulationBadge__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mpPieceModulationBadge__tonic {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--da-accent-2, #8b7355) 95%, var(--da-ink, #2a2824));
}

.mpPiecePanel__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.mpPiecePanel__mediaDock {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 12px;
}

@media (min-width: 860px) {
  .mpPiecePanel__mediaDock {
    flex-direction: row;
    align-items: flex-start;
  }

  .mpPiecePanel__videoMount {
    flex: 1.15 1 0;
  }

  .mpPiecePanel__streamMount {
    flex: 0.85 1 220px;
  }
}

.mpPiecePanel__videoMount {
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--da-ink, #2a2824) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 70%, transparent);
}

.mpPiecePanel__videoMount[hidden] {
  display: none !important;
}

.mpPiecePanel__mux {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(42vh, 360px);
  --media-object-fit: cover;
  --media-object-position: center;
  background: #0f172a;
}

.mpPiecePanel__mux::part(top) {
  display: none;
}

.mpPiecePanel__streamMount {
  min-width: 0;
  margin-top: 0;
}

.mpPiecePanel__streamMount[hidden] {
  display: none !important;
}

.mpPiecePanel__noWidget {
  margin: 0.35rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--da-line, rgba(40, 48, 62, 0.18));
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 88%, var(--da-accent-2, #8b7e74));
  color: var(--da-ink-muted, #5a6270);
  font-family: var(--typo-body, Manrope, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Panneau morceau : lecteur toujours visible (pas de clip « casque fermé ») */
.mpPiecePanel__streamMount .exercise-streaming.musicPlatformContainer .musicPlatformReveal {
  clip-path: none !important;
}

.mpPiecePanel__streamMount .exercise-streaming.musicPlatformContainer.open .musicPlatformRevealOuter {
  flex: 1 1 100%;
  min-width: 0;
  display: grid !important;
  grid-template-rows: 1fr !important;
  width: 100%;
}

/* Panneau morceau : pas de grille « casque » train v2 */
.moduleProgramsBody--trainV2 .mpPiecePanel__streamMount .exercise-streaming.musicPlatformContainer,
.moduleProgramsBody--trainV2 .mpPiecePanel__streamMount .exercise-streaming.musicPlatformContainer.open {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  max-width: 100% !important;
  width: 100% !important;
}

.moduleProgramsBody--trainV2 .mpPiecePanel__streamMount .musicPlatformRevealOuter {
  grid-column: unset !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

.moduleProgramsBody--trainV2 .mpPiecePanel__streamMount .musicPlatformEmbedHost iframe {
  min-height: 152px;
}

.mpPieceSpotifyEmbed,
.mpPieceSpotifyEmbed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* Clic ▶ fiable : l’iframe Spotify statique ignore souvent le clic (hover OK).
   Même chemin que « Démarrer capture » → playFromStart / upgrade IFrame API. */
.mpPiecePanel__streamMount .musicPlatformContainer {
  position: relative;
}

.mpPieceSpotifyStartHit {
  position: absolute;
  inset: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mpPieceSpotifyStartHit:hover {
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 10%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent);
}

.mpPieceSpotifyStartHit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--da-accent, #6b8cae) 65%, transparent);
  outline-offset: 2px;
}

.mpPieceSpotifyStartHit[hidden] {
  display: none !important;
}

.mpPieceSpotifyStartHit:disabled {
  cursor: wait;
  opacity: 0.85;
}

.mpPieceSpotifyRetry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--da-ink-muted, #64748b);
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 35%, var(--da-base, #fff));
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 70%, transparent);
}

.mpPieceSpotifyRetry[hidden] {
  display: none !important;
}

.mpPieceSpotifyRetry__btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
}

.mpPieceSpotifyRetry__link {
  font-weight: 600;
  color: var(--da-accent, #4a6fa5);
  text-decoration: none;
}

.mpPieceSpotifyRetry__link:hover {
  text-decoration: underline;
}

.mpPiecePanel__externalLink {
  display: inline-flex;
  align-items: center;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--da-accent, #4a6fa5);
  text-decoration: none;
}

.mpPiecePanel__externalLink:hover {
  text-decoration: underline;
}

/* Barre d'aperçu morceau (framework admin + programme élève) */
.mpPiecePreviewBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0.65rem 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: color-mix(in srgb, var(--da-base, #fff) 94%, #eef4ff);
}

.mpPiecePreviewBar--split {
  justify-content: space-between;
}

.mpPiecePreviewBar--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.mpPiecePreviewBar__placementRow,
.mpPiecePreviewBar__capoRow,
.mpPiecePreviewBar__displayRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mpPiecePreviewBar__capoRow {
  padding: 0.35rem 0.42rem;
  gap: 0.3rem 0.42rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: color-mix(in srgb, #fff 92%, #eef4ff);
  overflow: hidden;
}

.mpPiecePreviewBar__toggles--placement,
.mpPiecePreviewBar__toggles--drones {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.mpPiecePreviewBar__modeSlot--closed,
.mpPiecePreviewBar__modeSlot--open {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.42rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.mpPiecePreviewBar__displayRow {
  padding-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 72%, transparent);
}

.mpPiecePreviewBar__capoAssistBtn {
  min-height: 2rem;
}

.mpPiecePreviewBar__capoBadge--prominent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: min(100%, 7.75rem);
  padding: 0.35rem 0.55rem;
  min-height: 2.1rem;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 14%, #fff);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--da-accent, #6b8cae) 18%, transparent);
}

.mpPiecePreviewBar__capoBadge--prominent .mpPiecePreviewBar__capoIcon {
  width: 22px;
  height: 22px;
}

.mpPiecePreviewBar__capoBadge--prominent .mpPiecePreviewBar__capoLabel {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mpPiecePreviewBar__capoBadge--prominent .mpPiecePreviewBar__capoFret {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  min-width: 1.1rem;
  text-align: center;
}

.mpPiecePreviewBar__capoRow .mpPiecePreviewBar__select {
  min-width: 4.25rem;
  max-width: 100%;
}

.mpPiecePreviewBar__capoRow .mpPiecePreviewBar__toggle {
  padding: 0.24rem 0.55rem;
  font-size: 0.74rem;
}

.mpPiecePreviewBar__capoBadge--prominent.is-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
}

.mpPiecePreviewBar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mpPiecePreviewBar__modeSlot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.mpPiecePreviewBar__modeSlot[hidden],
.mpPiecePreviewBar__modeSlot.is-hidden {
  display: none !important;
}

.mpPiecePreviewBar__display {
  flex: 0 0 auto !important;
  margin-left: auto;
  padding-left: 0.85rem;
  border-left: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 80%, transparent);
}

@media (max-width: 720px) {
  .mpPiecePreviewBar__display {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
  }
}

.mpPiecePreviewBar__field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.mpPiecePreviewBar__fieldLabel {
  font-weight: 600;
  white-space: nowrap;
}

.mpPiecePreviewBar__select {
  min-width: 5.5rem;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 90%, transparent);
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
}

.mpPiecePreviewBar__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.mpPiecePreviewBar__toggle {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 92%, transparent);
  background: color-mix(in srgb, #fff 96%, #f1f5f9);
  color: #475569;
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.mpPiecePreviewBar__toggle.is-active {
  background: color-mix(in srgb, #6b8cae 16%, #fff);
  border-color: color-mix(in srgb, #6b8cae 55%, transparent);
  color: #0f172a;
}

.mpPiecePreviewBar__labelToggle {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
  line-height: 1;
}

.mpPiecePreviewBar__labelToggleTrack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-width: 9.75rem;
  padding: 0.18rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 92%, transparent);
  background: color-mix(in srgb, #e2e8f0 48%, #f8fafc);
}

.mpPiecePreviewBar__labelToggleThumb {
  position: absolute;
  top: 0.18rem;
  bottom: 0.18rem;
  left: 0.18rem;
  width: calc(50% - 0.18rem);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 92%, #f1f5f9);
  box-shadow:
    0 1px 2px color-mix(in srgb, #64748b 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 70%, transparent);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  will-change: transform;
}

.mpPiecePreviewBar__labelToggle.is-chords .mpPiecePreviewBar__labelToggleThumb {
  transform: translateX(calc(100% + 0.18rem));
}

.mpPiecePreviewBar__labelToggleOpt {
  position: relative;
  z-index: 1;
  padding: 0.28rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  color: #64748b;
  white-space: nowrap;
  transition: color 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.mpPiecePreviewBar__labelToggle.is-degrees .mpPiecePreviewBar__labelToggleOpt[data-mode="degrees"],
.mpPiecePreviewBar__labelToggle.is-chords .mpPiecePreviewBar__labelToggleOpt[data-mode="chords"] {
  color: #0f172a;
}

.mpPiecePreviewBar__labelToggle:focus-visible .mpPiecePreviewBar__labelToggleTrack {
  outline: 2px solid color-mix(in srgb, #6b8cae 65%, transparent);
  outline-offset: 2px;
}

.mpPiecePreviewBar__labelToggle.is-follow .mpPiecePreviewBar__labelToggleOpt[data-mode="follow"],
.mpPiecePreviewBar__labelToggle.is-free .mpPiecePreviewBar__labelToggleOpt[data-mode="free"] {
  color: #0f172a;
}

/* Switch Direct / Libre — toujours visible sur le panneau */
.mpPiecePanel__studyModeDock {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  pointer-events: none;
}

.mpPiecePanel__studyModeDock[hidden] {
  display: none !important;
}

.mpPiecePanel__studyModeToggle {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  pointer-events: auto;
}

.mpPiecePanel__studyModeTrack {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-width: 9.5rem;
  padding: 0.18rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: color-mix(in srgb, #fff 92%, #f1f5f9);
  box-shadow:
    0 2px 10px color-mix(in srgb, #64748b 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 65%, transparent);
  backdrop-filter: blur(6px);
}

.mpPiecePanel__studyModeThumb {
  position: absolute;
  top: 0.18rem;
  bottom: 0.18rem;
  left: 0.18rem;
  width: calc(50% - 0.18rem);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 94%, #f1f5f9);
  box-shadow:
    0 1px 2px color-mix(in srgb, #64748b 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 70%, transparent);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  will-change: transform;
}

.mpPiecePanel__studyModeToggle.is-free .mpPiecePanel__studyModeThumb {
  transform: translateX(calc(100% + 0.18rem));
}

.mpPiecePanel__studyModeOpt {
  position: relative;
  z-index: 1;
  padding: 0.28rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  color: #64748b;
  white-space: nowrap;
  transition: color 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.mpPiecePanel__studyModeToggle.is-follow .mpPiecePanel__studyModeOpt[data-mode="follow"],
.mpPiecePanel__studyModeToggle.is-free .mpPiecePanel__studyModeOpt[data-mode="free"] {
  color: #0f172a;
}

.mpPiecePanel__studyModeToggle:focus-visible .mpPiecePanel__studyModeTrack {
  outline: 2px solid color-mix(in srgb, #6b8cae 65%, transparent);
  outline-offset: 2px;
}

.mpPiecePanel__mediaSourceToggle {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  pointer-events: auto;
}

.mpPiecePanel__mediaSourceToggle.is-video .mpPiecePanel__studyModeThumb {
  transform: translateX(0);
}

.mpPiecePanel__mediaSourceToggle.is-audio .mpPiecePanel__studyModeThumb {
  transform: translateX(calc(100% + 0.18rem));
}

.mpPiecePanel__mediaSourceToggle.is-video .mpPiecePanel__studyModeOpt[data-mode="video"],
.mpPiecePanel__mediaSourceToggle.is-audio .mpPiecePanel__studyModeOpt[data-mode="audio"] {
  color: #0f172a;
}

.mpPiecePanel__mediaSourceToggle:focus-visible .mpPiecePanel__studyModeTrack {
  outline: 2px solid color-mix(in srgb, #6b8cae 65%, transparent);
  outline-offset: 2px;
}

/* Source média exclusive */
.mpPiecePanel--media-audio .mpPiecePanel__videoMount {
  display: none !important;
}

/* Mode Vidéo : masquer le widget sans display:none (sinon iframe Spotify non prête pour la capture). */
.mpPiecePanel--media-video .mpPiecePanel__streamMount {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Widget audio visible : iframe cliquable (Libre / Direct / capture). */
.mpPiecePanel--media-audio .mpPiecePanel__streamMount,
.mpPiecePanel--media-audio .mpPiecePanel__streamMount[hidden],
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount[hidden] {
  position: relative;
  z-index: 5;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  opacity: 1;
  pointer-events: auto !important;
  display: block !important;
}

/* Grille reveal toujours ouverte + iframe cliquable (sinon 0fr = clic mort). */
.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformContainer,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformContainer {
  max-width: 100% !important;
  width: 100% !important;
  pointer-events: auto !important;
}

.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformContainer:not(.open),
.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformContainer.open,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformContainer:not(.open),
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformContainer.open {
  display: flex !important;
  flex-direction: column !important;
}

.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformRevealOuter,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformRevealOuter {
  display: grid !important;
  grid-template-rows: 1fr !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 152px !important;
  pointer-events: auto !important;
}

.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformReveal,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformReveal {
  overflow: visible !important;
  clip-path: none !important;
  min-height: 152px !important;
  pointer-events: auto !important;
  contain: none !important;
}

.mpPiecePanel--media-audio .mpPiecePanel__streamMount .musicPlatformEmbedHost,
.mpPiecePanel--media-audio .mpPiecePanel__streamMount .mpPieceSpotifyEmbed,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .musicPlatformEmbedHost,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount .mpPieceSpotifyEmbed {
  min-height: 152px !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

.mpPiecePanel--media-audio .mpPiecePanel__streamMount iframe,
.mpPiecePanel--capture-audio .mpPiecePanel__streamMount iframe {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
  min-height: 152px !important;
}

.mpPiecePanel--capture-audio.mpPiecePanel--media-video .mpPiecePanel__streamMount {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  opacity: 1;
  pointer-events: auto !important;
  display: block !important;
}

/* Mode Direct : média choisi en haut, une seule structure visible sous le média */
.mpPiecePanel--study-follow {
  padding: 0.35rem 0.35rem 0.75rem;
}

.mpPiecePanel--study-follow .mpPiecePanel__identity,
.mpPiecePanel--study-follow .mpPiecePanel__tonicTimeline,
.mpPiecePanel--study-follow .mpPiecePreviewBar {
  display: none !important;
}

.mpPiecePanel--study-follow.mpPiecePanel--media-video:not(.mpPiecePanel--capture-audio) .mpPiecePanel__streamMount {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

.mpPiecePanel--study-follow.mpPiecePanel--media-audio .mpPiecePanel__videoMount {
  display: none !important;
}

.mpPiecePanel--study-follow.mpPiecePanel--media-audio .mpPiecePanel__streamMount {
  display: block !important;
}

.mpPiecePanel--study-follow .mpPiecePanel__header {
  margin: 0 0 0.35rem;
}

.mpPiecePanel--study-follow .mpPiecePanel__headerRow {
  display: none;
}

.mpPiecePanel--study-follow .mpPiecePanel__mediaDock {
  margin-top: 0;
  flex-direction: column;
}

.mpPiecePanel--study-follow .mpPiecePanel__videoMount,
.mpPiecePanel--study-follow .mpPiecePanel__streamMount {
  flex: none;
  width: 100%;
  margin: 0;
  border-radius: 10px;
}

.mpPiecePanel--study-follow .mpPiecePanel__mux {
  max-height: min(38vh, 320px);
}

.mpPiecePanel--study-follow .mpPiecePanel__sections {
  gap: 0;
  margin-top: 0;
}

.mpPiecePanel--study-follow .mpPieceSectionDetails:not(.is-media-active) {
  display: none !important;
}

/* Atelier Morceau : accordéon manuel même en Direct (ouvrir / fermer les parties). */
.mpPiecePanel--manual-accordion.mpPiecePanel--study-follow .mpPieceSectionDetails:not(.is-media-active) {
  display: block !important;
}

.mpPiecePanel--manual-accordion.mpPiecePanel--study-follow .mpPieceSectionDetails {
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #fff 96%, #f8fafc);
  box-shadow: none;
  margin-bottom: 0.45rem;
}

.mpPiecePanel--manual-accordion.mpPiecePanel--study-follow .mpPieceSectionDetails__summary {
  display: flex !important;
}

.mpPiecePanel--manual-accordion.mpPiecePanel--study-follow .mpPieceSectionDetails.is-media-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 28%, transparent);
}

.mpPiecePanel--manual-accordion.mpPiecePanel--study-follow .mpPieceSectionDetails.is-media-active .mpPieceSectionDetails__body {
  padding-top: inherit;
}

.mpPiecePanel--study-follow .mpPieceSectionDetails.is-media-active {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mpPiecePanel--study-follow .mpPieceSectionDetails.is-media-active .mpPieceSectionDetails__summary {
  display: none;
}

.mpPiecePanel--study-follow .mpPieceSectionDetails.is-media-active .mpPieceSectionDetails__body {
  padding-top: 0;
}

.mpPiecePanel--study-follow .workshopPiece__diagramStrip--compact {
  --piece-diagram-cols: 4;
  gap: 0.65rem 0.75rem;
}

.mpPiecePanel--study-follow .workshopPiece__diagramCard {
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 72%, #fff);
  border-radius: 10px;
  padding: 0.45rem 0.35rem 0.5rem;
}

.mpPiecePanel--study-follow .workshopPiece__diagramItem.is-chord-active .workshopPiece__diagramCard {
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
}

.mpPiecePreviewBar__capoBadge.is-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 38%, transparent);
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 95%, var(--da-ink, #2a2824));
}

.mpPiecePreviewBar__capoBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #6b8cae 42%, transparent);
  background: color-mix(in srgb, #6b8cae 12%, #fff);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.mpPiecePreviewBar__capoFret {
  font-size: 0.92rem;
  font-weight: 800;
}

.mpPiecePreviewBar__capoBadge[hidden] {
  display: none !important;
}

.mpPieceSectionDetails {
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #fff 96%, #f8fafc);
  overflow: hidden;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.28s ease;
}

.mpPieceSectionDetails.is-media-closing {
  opacity: 0.45;
  pointer-events: none;
}

.mpPieceSectionDetails.is-media-opening {
  animation: mpPieceSectionMediaOpen 0.32s ease;
}

@keyframes mpPieceSectionMediaOpen {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

.mpPieceSectionDetails.is-media-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 28%, transparent);
}

.workshopPiece__diagramItem.is-chord-active .workshopPiece__diagramCard {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent),
    0 8px 18px color-mix(in srgb, var(--da-accent, #6b8cae) 16%, transparent);
  transform: translateY(-2px);
}

.mpPieceSectionDetails__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  list-style: none;
}

.mpPieceSectionDetails__timecode {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 38%, transparent);
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 88%, var(--da-ink, #2a2824));
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.mpPieceSectionDetails__summary::-webkit-details-marker {
  display: none;
}

.mpPieceSectionDetails__repeat {
  display: inline-flex;
  align-items: center;
  min-width: 1.65rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, #6b8cae 14%, #fff);
  border: 1px solid color-mix(in srgb, #6b8cae 35%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
}

.mpPieceSectionDetails__compact {
  flex: 1 1 100%;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #64748b;
}

.mpPieceCompactLabel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem 0.22rem;
}

.mpPieceCompactLabel__token.is-altered .mpPieceCompactLabel__main {
  color: var(--da-accent, #6b8cae);
  font-weight: 700;
}

.mpPieceCompactLabel__qualityTag {
  margin-left: 0.08rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  opacity: 0.92;
  vertical-align: super;
  line-height: 0;
}

.mpPieceCompactLabel__sep {
  opacity: 0.55;
  user-select: none;
}

.mpPieceSectionDetails__capoBadge,
.mpPieceSectionDetails__modBadge {
  margin-left: auto;
}

.mpPieceSectionDetails__capoBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 42%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 12%, #fff);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 92%, var(--da-ink, #2a2824));
}

.mpPieceSectionDetails__capoBadge.is-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 38%, transparent);
}

.mpPieceSectionDetails__capoBadge.is-recommended {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 18%, #fff);
}

.mpPieceSectionDetails__capoFret {
  font-size: 0.88rem;
  font-weight: 800;
}

.mpPieceSectionDetails__tonic {
  margin-left: auto;
}

.mpPieceSectionDetails__modBadge + .mpPieceSectionDetails__tonic,
.mpPieceSectionDetails__capoBadge + .mpPieceSectionDetails__modBadge {
  margin-left: 0;
}