/* Programmes d'entraînement — variante F (glass / flou), cf. programmsTrainning-style-explorer .v-f */

.programs-training-page .trainingLobby {
  /* Aligné sur l’explorateur : .v-f */
  --pt-user: #e9d5ff;
  --pt-user-soft: rgba(255, 255, 255, 0.12);
  --pt-glass: rgba(255, 255, 255, 0.14);
  --pt-glass-strong: rgba(255, 255, 255, 0.22);
  --pt-surface: var(--pt-glass-strong);
  --pt-text: #ffffff;
  --pt-muted: rgba(255, 255, 255, 0.88);
  --pt-accent: #fde68a;
  --pt-accent2: #f9a8d4;
  --pt-border: rgba(255, 255, 255, 0.28);
  --pt-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  --pt-card-shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.22);
  --pt-elev: 0 4px 24px rgba(0, 0, 0, 0.12);
  --pt-line: 1px solid rgba(255, 255, 255, 0.28);
  --pt-line-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --pt-radius: 18px;
  --pt-radius-sm: 18px;
  --pt-details-dur: 0.48s;
  --pt-details-ease: cubic-bezier(0.32, 0.72, 0.25, 1);
  --pt-section-gap: 1.875rem;
}

/*
 * Fond page = même dégradé que le lobby (évite la « tache » grise du shell dashboard).
 * Sans da-bg-lab : da-background-lab + calques utilisés sur la variante carnet (voir bloc fin de feuille).
 */
body.programs-training-page.dashboard-page:not(.da-bg-lab) {
  /* Même esprit que workshop : papier léger + halo discret (sans fond très sombre). */
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(255, 236, 212, 0.42),
      transparent 55%
    ),
    linear-gradient(180deg, #f7f4ee 0%, #f2ede5 52%, #ebe6de 100%);
  overflow-x: hidden;
}

.trainingLobby {
  --training-controlbar-gap-y: clamp(0.65rem, 1.4vh, 1.1rem);
  --training-controlbar-gap-x: clamp(0.45rem, 1vw, 0.85rem);
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  /* Air sous le rail / haut de fenêtre (vé cutout) + léger décalage depuis la controlbar */
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1.35rem, 2.6vh, 2.1rem) + var(--training-controlbar-gap-y));
  padding-right: clamp(0.8rem, 1.2vw, 1.35rem);
  padding-bottom: max(
    3.25rem,
    calc(env(safe-area-inset-bottom) + var(--shell-bottom-nav-h, 0px))
  );
  /* Mobile : dock bas ; le décalage rail + 8px vient dans @media ≥769px uniquement */
  padding-left: calc(var(--shell-rail-w, 64px) + clamp(1rem, 1.65vw, 1.9rem) + var(--training-controlbar-gap-x));
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(255, 236, 212, 0.38),
      transparent 55%
    ),
    linear-gradient(180deg, #f7f4ee 0%, #f2ede5 52%, #ebe6de 100%);
  font-family: "DM Sans", "Instrument Sans", system-ui, sans-serif;
  color: var(--pt-text);
}

@media (min-width: 769px) {
  .trainingLobby {
    /* Rail desktop : left: 8px (controlbar) + largeur + marge contenu */
    padding-left: calc(
      8px + var(--shell-rail-w, 64px) + clamp(1rem, 1.65vw, 1.9rem) + var(--training-controlbar-gap-x)
    );
  }
}

@media (max-width: 768px) {
  /* Barre en bas : gouttières un peu plus généreuses + safe-area */
  .trainingLobby {
    padding-left: max(1.25rem, calc(env(safe-area-inset-left) + 0.55rem));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1.1rem, calc(env(safe-area-inset-top) + var(--training-controlbar-gap-y, 0.65rem)));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 100dvh;
  }

  /* Onglets sections : restent accessibles au scroll (réf. control bar fixée au-dessus du contenu). */
  .trainingTabsNav {
    position: sticky;
    top: max(0.35rem, env(safe-area-inset-top));
    z-index: 30;
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
    margin-left: -0.15rem;
    margin-right: -0.15rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--da-bg-page, #f7f4ee) 94%, transparent) 0%,
      color-mix(in srgb, var(--da-bg-page, #f7f4ee) 78%, transparent) 72%,
      transparent 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Menu / rail : le placeholder control bar doit rester au-dessus du lobby (y compris da-bg-lab). */
@media (max-width: 768px) {
  body.dashboard-page #controlbar-placeholder {
    position: relative;
    z-index: 60000;
  }

  body.programs-training-page.dashboard-page .trainingLobby {
    position: relative;
    z-index: 1;
  }
}

.trainingLobby__hero {
  position: relative;
  max-width: min(100%, 56rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--pt-section-gap);
  padding: 0.35rem clamp(0.35rem, 3vw, 1rem) 0.5rem;
  text-align: center;
}

.trainingLobby__heroAccent {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -0.35rem;
  width: min(22rem, 92%);
  height: 8rem;
  border-radius: 55% 40% 60% 45% / 50% 55% 45% 50%;
  background: radial-gradient(
    ellipse 80% 70% at 40% 45%,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 68%
  );
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.trainingLobby__heroInner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 32rem;
  padding: 1.15rem 1.35rem 1.1rem;
  border-radius: var(--pt-radius);
  background: var(--pt-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pt-border);
  box-shadow: var(--pt-elev);
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.8vw, 1.875rem);
}

.trainingLobby__title {
  margin: 0;
  font-family: "DM Sans", "Instrument Sans", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--pt-text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.trainingLobby__lede {
  margin: 0 auto;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
  max-width: 36rem;
}

@media (min-width: 769px) {
  .trainingLobby__hero {
    text-align: start;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: var(--pt-section-gap);
    padding: 0.15rem 0 0.35rem;
  }

  .trainingLobby__heroAccent {
    left: -0.35rem;
    transform: none;
    width: min(72%, 22rem);
  }

  .trainingLobby__heroInner {
    margin: 0;
    max-width: none;
    padding: 0.85rem 1rem 0 0.15rem;
  }

  .trainingLobby__lede {
    margin-inline: 0;
  }
}

.trainingTabsNav {
  position: sticky;
  top: max(0.25rem, env(safe-area-inset-top));
  z-index: 5;
  margin: 0 0 1.15rem;
  padding: 0.42rem 0.5rem;
  border-radius: var(--pt-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--pt-elev), var(--pt-line-inset);
}

.trainingTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.trainingTabs__btn {
  appearance: none;
  border: 1px solid var(--pt-border);
  background: var(--pt-glass);
  color: var(--pt-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--pt-line-inset);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.trainingTabs__btn.has-news {
  animation: trainingTabBtnNewsHint 3.2s ease-in-out infinite;
}

@keyframes trainingTabBtnNewsHint {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.32);
  }
  50% {
    border-color: rgba(255, 214, 140, 0.55);
  }
}

.trainingTabs__btn:hover {
  background: var(--pt-glass-strong);
  border-color: rgba(255, 255, 255, 0.38);
}

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

.trainingTabs__btn.is-active {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: var(--pt-line-inset), 0 4px 14px rgba(0, 0, 0, 0.12);
}

.trainingTabPanel {
  scroll-margin-top: max(5.5rem, calc(env(safe-area-inset-top) + 4.25rem));
  outline: none;
}

.trainingTabPanel.trainingTabPanel--section {
  border-radius: var(--da-radius-card, var(--pt-radius, 18px));
  box-shadow:
    var(--da-shadow-card, 0 12px 32px rgba(58, 48, 38, 0.1)),
    0 4px 14px rgba(58, 48, 38, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.trainingActuelBlock {
  margin-bottom: var(--pt-section-gap);
}

.trainingActuelBlock:last-of-type {
  /* Garde la même marge qu’entre Récents / Favoris : évite que le slider « Nouveaux » colle à « Modules créés par vous ». */
  margin-bottom: var(--pt-section-gap);
}

.trainingActuelBlock__title {
  margin: 0 0 0.6rem;
  font-family: "DM Sans", "Instrument Sans", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pt-text);
}

.trainingSection {
  margin-bottom: var(--pt-section-gap);
  padding: 1.5rem 1.35rem 1.65rem;
  border-radius: var(--pt-radius);
  border: 1px solid var(--pt-border);
  background: var(--pt-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--pt-elev), var(--pt-line-inset);
}

.trainingSection--user {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-left: 4px solid rgba(253, 224, 71, 0.95);
  background: var(--pt-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--pt-elev), var(--pt-line-inset);
}

.trainingSection--assigned {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-left: 3px solid rgba(147, 197, 253, 0.95);
  background: var(--pt-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--pt-elev), var(--pt-line-inset);
}

/* Ouverture / fermeture : dépliage doux (pas sec, easing amorti) */
details.trainingSection {
  interpolate-size: allow-keywords;
}

details.trainingSection::details-content {
  transition:
    height var(--pt-details-dur) var(--pt-details-ease),
    content-visibility var(--pt-details-dur) allow-discrete;
  overflow: clip;
}

details.trainingSection:not([open])::details-content {
  height: 0;
}

details.trainingSection[open]::details-content {
  height: auto;
}

.trainingSection__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: margin-bottom var(--pt-details-dur) var(--pt-details-ease);
}

details.trainingSection[open] .trainingSection__summary {
  margin-bottom: 0.85rem;
}

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

.trainingSection__summaryMain {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.trainingSection__panel {
  margin-top: 0;
}

.trainingSection--flat .trainingSection__head {
  margin-bottom: 0.85rem;
}

.trainingSection--flat .trainingSection__titleRow {
  margin-bottom: 0;
}

/* Compact variant for "Vos modules" and "Assignés". */
.trainingSection--compact {
  padding: 1rem 1rem 1.1rem;
}

.trainingSection--compact .trainingSection__head {
  margin-bottom: 0.5rem;
}

.trainingSection--compact .modulesSlider {
  padding: 0.45rem 0.55rem;
  gap: 0.45rem;
}

.trainingSection--compact .modulesGrid--slider .moduleCard {
  --training-card-w: min(300px, 76vw);
}

.trainingSection--compact .moduleCard__body {
  min-height: 86px;
  padding: 0.72rem 0.82rem 0.78rem 0.95rem;
}

.trainingSection--compact .moduleCard__title {
  margin-bottom: 0.48rem;
}

.trainingSection--compact .moduleCard__stats {
  margin-bottom: 0.4rem;
  gap: 0.45rem 0.75rem;
  font-size: 0.82rem;
}

/*
 * Vos modules / Assignés (flat + compact) : neutre passe-partout,
 * fond transparent, filet gauche blanc / gris discret (plus de jaune / bleu).
 */
.trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--user,
.trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--assigned {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-left: 3px solid rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

.trainingSliderWrap {
  margin-bottom: 0;
}

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

.trainingSection__titleRow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.trainingSection__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.trainingSection__icon--user {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  position: relative;
}

.trainingSection__icon--user::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 14px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 2px;
  border-bottom: none;
}

.trainingSection__icon--user::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  width: 8px;
  height: 10px;
  background: #fff;
  border-radius: 1px;
}

/* Même idée que l’icône « vos modules », teinte bleue (pas de picto « modèle / + ») */
.trainingSection__icon--assigned {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
  position: relative;
}

.trainingSection__icon--assigned::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 14px;
  height: 10px;
  border: 2px solid #93c5fd;
  border-radius: 2px;
  border-bottom: none;
}

.trainingSection__icon--assigned::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  width: 8px;
  height: 10px;
  background: #93c5fd;
  border-radius: 1px;
}

.trainingSection__title {
  margin: 0;
  font-family: "DM Sans", "Instrument Sans", sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pt-text);
}

.trainingSection__hint {
  margin: 0;
  font-size: 0.92rem;
  color: var(--pt-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.trainingSection__hint strong {
  color: var(--pt-text);
  font-weight: 600;
}

@media (min-width: 769px) {
  .trainingSection__summary {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  details.trainingSection {
    interpolate-size: auto;
  }

  details.trainingSection::details-content {
    transition: none;
  }

  .trainingSection__summary {
    transition: none;
  }

  .moduleCard__new {
    animation: none !important;
  }

  .trainingTabs__btn.has-news {
    animation: none !important;
    border-color: rgba(255, 214, 140, 0.48);
  }
}

.modulesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}

.modulesGrid--assigned {
  gap: 1.15rem;
}

.modulesSlider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 16px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow:
    0 14px 36px rgba(38, 28, 42, 0.09),
    0 4px 14px rgba(38, 28, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Indication horizontale (faite maison) — grille #userModulesGrid sans scrollbar système */
.modulesSlider__track {
  margin: 0.65rem auto 0;
  width: min(180px, 45%);
  height: 5px;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}

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

.modulesSlider__nav {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.18;
  transform: scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.modulesSlider:hover .modulesSlider__nav,
.modulesSlider:focus-within .modulesSlider__nav {
  opacity: 0.92;
  transform: scale(1);
}

.modulesSlider__nav:hover,
.modulesSlider__nav:focus-visible {
  opacity: 1;
  box-shadow: 0 6px 14px rgba(22, 26, 34, 0.18);
}

.modulesSlider__nav:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  transform: scale(0.9);
}

.modulesGrid--slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.35rem 0.15rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: auto;
  overscroll-behavior-x: contain;
}

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

.modulesGrid--slider .moduleCard {
  --training-card-w: min(
    320px,
    max(248px, calc(100vw - var(--shell-rail-w, 64px) - 8rem))
  );
  width: var(--training-card-w);
  min-width: var(--training-card-w);
  max-width: var(--training-card-w);
  flex: 0 0 var(--training-card-w);
  scroll-snap-align: start;
}

/* Onglet Actuel — Récents / Nouveaux : cartes plates (ombres uniquement sur le chrome .modulesSlider) */
#actuelRecentGrid .moduleCard,
#actuelNewGrid .moduleCard {
  box-shadow: none;
}

#actuelRecentGrid .moduleCard:hover,
#actuelNewGrid .moduleCard:hover {
  box-shadow: none;
}

#actuelRecentGrid .moduleCard:focus-visible,
#actuelNewGrid .moduleCard:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-cta-from, #6366f1) 36%, transparent);
}

/* Vos modules / Assignés : cartes sans ombre dans les grilles */
#userModulesGrid .moduleCard,
#assignedModulesGrid .moduleCard {
  box-shadow: none;
}

#userModulesGrid .moduleCard:hover,
#assignedModulesGrid .moduleCard:hover {
  box-shadow: none;
}

#userModulesGrid .moduleCard:focus-visible,
#assignedModulesGrid .moduleCard:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-cta-from, #6366f1) 36%, transparent);
}

.modulesSlider__thumb {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: #c2c4cc;
  transform: translateX(0);
  transition: transform 0.2s ease;
}


.moduleCard {
  position: relative;
  border-radius: var(--pt-radius-sm);
  background: var(--pt-glass-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: var(--pt-card-shadow);
  outline: none;
}

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

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

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

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

.moduleCard--withVisual .moduleCard__bg::before {
  opacity: 0.92;
}

.moduleCard--withVisual .moduleCard__bg::after {
  opacity: 1;
}

.moduleCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-card-shadow-hover);
}

.moduleCard:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), var(--pt-card-shadow-hover);
}

.moduleCard--user,
.moduleCard--assigned {
  background: var(--pt-glass-strong);
}


@keyframes trainingNewBadgePulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255, 120, 40, 0.55),
      0 2px 10px rgba(200, 85, 20, 0.35);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 5px rgba(255, 140, 60, 0.2),
      0 4px 16px rgba(220, 100, 30, 0.45);
  }
}

.moduleCard--showNew .moduleCard__title {
  padding-right: 4.1rem;
}

.moduleCard__new {
  position: absolute;
  top: 0.62rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem 0.48rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
  background: rgba(17, 24, 39, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  animation: moduleCardNewPulse 2.4s ease-in-out infinite;
}

@keyframes moduleCardNewPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.12);
  }
  50% {
    transform: translateY(-0.5px) scale(1.04);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
  }
}

.moduleCard__accent {
  display: none;
}

.moduleCard__accent--assigned {
  display: none;
}

.moduleCard--user .moduleCard__accent {
  display: none;
}

.moduleCard__body {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  padding: 0.82rem 0.95rem 0.88rem 1.05rem;
  padding-left: 1.1rem;
  min-height: 96px;
  box-sizing: border-box;
}

/* Voile adaptatif sous le titre : renforcé si la miniature est claire en haut-gauche (mesure JS). */
.moduleCard__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.moduleCard--withVisual:not(.moduleCard--withFallbackVisual).moduleCard--titleLumaLight
  .moduleCard__body::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%
  );
}

.moduleCard--withVisual:not(.moduleCard--withFallbackVisual).moduleCard--titleLumaMid
  .moduleCard__body::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%
  );
}

.moduleCard--withVisual:not(.moduleCard--withFallbackVisual).moduleCard--titleLumaDark
  .moduleCard__body::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%
  );
}

.moduleCard__body > * {
  position: relative;
  z-index: 1;
}

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

.moduleCard__favBtn {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.22s ease,
    color 0.22s ease,
    text-shadow 0.22s ease;
}

.moduleCard__favGlyph {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-0.5px);
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Discret par défaut : devient vraiment visible au survol/focus de la carte */
.moduleCard:hover .moduleCard__favBtn,
.moduleCard:focus-within .moduleCard__favBtn {
  opacity: 0.92;
  pointer-events: auto;
  /* “contours” subtils pour signaler le favori sans le colorer */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 10px rgba(0, 0, 0, 0.18);
}

.moduleCard__favBtn:hover {
  opacity: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 0 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px) scale(1.06);
}

.moduleCard__favBtn:active {
  transform: translateY(0) scale(0.95);
  text-shadow: none;
}

.moduleCard__favBtn.is-fav {
  color: rgba(253, 224, 71, 0.92);
  opacity: 0.98;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(0, 0, 0, 0.22);
}

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

.moduleCard__title {
  margin: 0 0 0.58rem;
  /* Réserve visuelle pour éviter tout contact du titre avec les boutons top-right */
  padding-right: 2.25rem;
  font-family: "DM Sans", "Instrument Sans", sans-serif;
  font-size: clamp(1.22rem, 2.75vw, 1.48rem);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -0.022em;
  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);
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  hyphens: auto;
}

.moduleCard__stats {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.moduleCard__categories {
  margin: 0 0 0.42rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.moduleCard__pill--category {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.12rem 0.36rem;
  /* Contour plus translucide pour laisser respirer la miniature */
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.18);
  /* Texte catégorie : ton chaud crème / parchemin (pas gris froid) */
  color: rgba(255, 255, 255, 0.96);
  /* Flou léger : laisse mieux voir la miniature derrière */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.moduleCard__pill--more {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  cursor: default;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.moduleCard__statValue {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.moduleCard__pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.14rem 0.44rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: none;
}

.moduleCard__pill--soundFlag,
.moduleCard__pill--pieceFlag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.moduleCard__pillAuxText {
  font-size: 0.64rem;
  font-weight: 600;
}

.moduleCard__pill--soundFlag .training-card-ico--sound {
  color: #4ade80;
  flex-shrink: 0;
}

.moduleCard__pill--pieceFlag .training-card-ico--piece {
  color: rgba(253, 224, 71, 0.95);
  flex-shrink: 0;
}

.moduleCard__pill--duration {
  border-color: rgba(134, 239, 172, 0.28);
  background: rgba(134, 239, 172, 0.08);
  color: rgba(255, 255, 255, 0.88);
}

.moduleCard__pill--chordSeq {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(253, 230, 138, 0.14);
  color: rgba(255, 251, 235, 0.98);
  font-weight: 650;
}

.moduleCard__metaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem 0.45rem;
  margin: 0 0 0.45rem;
}

.moduleCard__difficulty {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.84);
  max-width: 100%;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.moduleCard__difficultyLabel {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.moduleCard__difficultyWord {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  max-width: 9rem;
  line-height: 1.2;
}

.moduleCard__difficultyMeter {
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
  min-width: 4.5rem;
  flex: 1 1 4.5rem;
}

.moduleCard__difficultySeg {
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
}

.moduleCard__difficultySeg--on {
  background: linear-gradient(
    180deg,
    rgba(253, 224, 71, 0.98) 0%,
    rgba(234, 179, 8, 0.88) 100%
  );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.moduleCard__difficultyNum {
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 768px) {
  .programs-training-page .moduleCard__difficulty {
    max-width: 100%;
  }

  .programs-training-page .moduleCard__difficultyMeter {
    min-width: 0;
    flex: 1 1 5.5rem;
    max-width: 100%;
    gap: 2px;
  }

  .programs-training-page .moduleCard__difficultySeg {
    height: 5px;
    border-radius: 2px;
  }

  .programs-training-page .moduleCard__difficultyWord {
    max-width: min(8.5rem, 46vw);
    font-size: 0.62rem;
  }
}

.moduleCard__audience {
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.moduleCard__pill--audience {
  font-size: 0.64rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.moduleCard__assignedExplain {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--pt-muted);
}

.moduleCard__assignedExplain strong {
  color: var(--pt-text);
}

.moduleCard__ctaStrip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 -1rem -1rem -1.25rem;
  padding: 0.55rem 1rem;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile : règles après les bases ci-dessus (sinon la cascade les écrase) */
@media (max-width: 768px) {
  .trainingLobby__hero {
    max-width: none;
    margin-bottom: var(--pt-section-gap);
  }

  .trainingSection {
    margin-bottom: var(--pt-section-gap);
  }

  .trainingSection--flat.trainingSection {
    padding: 1rem 0.48rem 1.12rem;
  }

  .trainingSection--compact.trainingSection {
    padding: 0.85rem 0.42rem 0.95rem;
  }

  /* Sections repliables : un peu plus d’air quand peu de place */
  details.trainingSection:not([open]) {
    padding: 0.65rem 0.42rem 0.75rem;
  }

  details.trainingSection[open] {
    padding: 1rem 0.48rem 1.12rem;
  }

  .modulesGrid,
  .modulesGrid--assigned {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .modulesSlider {
    grid-template-columns: 1fr;
    padding: 0.58rem 0.5rem;
  }

  .modulesSlider__nav {
    display: none;
  }

  .modulesSlider__track {
    width: min(200px, 55%);
    margin-top: 0.55rem;
  }

  .moduleCard__body {
    padding: 0.9rem 0.6rem 0.85rem 0.85rem;
  }

  .trainingSection--compact .moduleCard__body {
    min-height: 84px;
    padding: 0.75rem 0.52rem 0.72rem 0.75rem;
  }

  .moduleCard__ctaStrip {
    margin: 0 -0.6rem -0.85rem -0.85rem;
    padding: 0.55rem 0.6rem;
  }

  body.programs-training-page.dashboard-page:not(.da-bg-lab),
  body.programs-training-page.dashboard-page:not(.da-bg-lab) .trainingLobby {
    background:
      radial-gradient(
        120% 80% at 50% 0%,
        rgba(255, 236, 212, 0.38),
        transparent 55%
      ),
      linear-gradient(180deg, #f7f4ee 0%, #f2ede5 52%, #ebe6de 100%);
  }

  .trainingLobby__heroInner {
    padding: 1.1rem 1rem 1rem;
    border-radius: var(--pt-radius);
  }

  .trainingSection--user {
    border-left-width: 5px;
  }

  .trainingSection--assigned {
    border-left-width: 4px;
    border-left-color: rgba(147, 197, 253, 0.95);
  }

  .trainingSection__title {
    color: var(--pt-text);
  }

  .trainingSection__hint {
    color: var(--pt-muted);
  }

  .trainingSection__icon--user {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  .trainingSection__icon--assigned {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
  }
}

.moduleCard__ctaIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  font-size: 0.95rem;
}

.trainingEmpty {
  margin: 0;
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
  color: var(--pt-muted);
  background: var(--pt-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--pt-radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  box-shadow: var(--pt-line-inset);
}

@media (max-width: 768px) {
  .moduleCard__ctaIcon {
    background: rgba(255, 255, 255, 0.92);
  }

  .trainingEmpty {
    background: var(--pt-glass);
    border-color: rgba(255, 255, 255, 0.45);
  }
}

.trainingError {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--pt-radius-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  box-shadow: var(--pt-line-inset);
  color: #991b1b;
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .trainingLobby {
    padding-top: max(
      1.2rem,
      calc(env(safe-area-inset-top, 0px) + clamp(1rem, 2.8vw, 1.45rem) + var(--training-controlbar-gap-y))
    );
    padding-bottom: max(2.35rem, env(safe-area-inset-bottom));
    /* horizontal : hérite du bloc ≤768px (pas de faux décalage rail) */
  }
}

/* -------------------------------------------------------------------------- */
/* DA « Carnet lumineux » — même esprit que dashboard + da-carnet-lumineux-*   */
/* Nécessite : body.theme-carnet-lumineux + feuille da-carnet-lumineux-tokens  */
/* -------------------------------------------------------------------------- */

body.theme-carnet-lumineux.programs-training-page.dashboard-page:not(.da-bg-lab) {
  /* Aligné sur workshop.html : variations douces type « page de carnet ». */
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      var(--da-halo-sun, rgba(255, 236, 212, 0.45)),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--da-bg-page, #f7f4ee) 0%,
      var(--da-bg-page-mid, #f2ede5) 100%
    );
  color: var(--da-text);
}

/* Da-background-lab — même lecture que workshop.html (#e8e1ef + calques animés). */
body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #e8e1ef !important;
  color: var(--da-text);
  font-family: var(--da-font-sans, "DM Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* .bg-layer : voir dashboard.css (body.dashboard-page.da-bg-lab .bg-layer) */

/* Le lobby suit le flux : le rail / menu reste au-dessus (sinon .trainingLobby recouvre le bouton Menu). */
body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab #controlbar-placeholder {
  position: relative;
  z-index: 60000;
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingLobby {
  position: relative;
  z-index: 1;
}

body.theme-carnet-lumineux .trainingLobby {
  background: transparent;
  color: var(--da-text);
  /* Un peu moins de volume à droite (gouttière) en mode carnet */
  padding-right: max(1rem, env(safe-area-inset-right));
  --pt-text: var(--da-text);
  --pt-muted: var(--da-text-muted);
  --pt-glass: color-mix(in srgb, var(--da-surface-elevated) 95%, var(--da-bg-page-mid));
  --pt-glass-strong: var(--da-surface-elevated);
  --pt-border: var(--da-border);
  --pt-line: 1px solid var(--da-border);
  --pt-line-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --pt-card-shadow: var(--da-shadow-card);
  --pt-card-shadow-hover: 0 8px 28px rgba(90, 72, 54, 0.1);
  --pt-elev: var(--da-shadow-card);
}

body.theme-carnet-lumineux .trainingLobby__heroAccent {
  background: radial-gradient(
    ellipse 80% 70% at 40% 45%,
    var(--da-halo-sun-fade) 0%,
    transparent 68%
  );
  opacity: 0.88;
}

body.theme-carnet-lumineux .trainingLobby__title {
  color: var(--da-text);
  text-shadow: none;
}

body.theme-carnet-lumineux .trainingLobby__lede {
  color: var(--da-text-muted);
}

body.theme-carnet-lumineux .trainingLobby__heroInner {
  /* Pas de "carte blanche" visible : on laisse respirer le fond */
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0.35rem 0.1rem 0.15rem;
}

body.theme-carnet-lumineux .trainingLobby__meta {
  margin: 0.35rem 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  color: var(--da-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

body.theme-carnet-lumineux .trainingLobby__meta strong {
  color: var(--da-text);
  font-weight: 700;
}

body.theme-carnet-lumineux .trainingLobby__meta li::before {
  content: "•";
  display: inline-block;
  width: 1.05em;
  color: color-mix(in srgb, var(--da-text) 55%, var(--da-text-muted));
}

body.theme-carnet-lumineux .trainingSection {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--da-surface-elevated) 93%, var(--da-bg-page-mid));
  border-color: var(--da-border);
}

body.theme-carnet-lumineux .trainingSection--user {
  border: 1px solid var(--da-border);
  border-left: 4px solid color-mix(in srgb, var(--da-accent-warm) 55%, var(--da-border));
  background: color-mix(in srgb, var(--da-surface-elevated) 93%, var(--da-bg-page-mid));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-carnet-lumineux .trainingSection--assigned {
  border: 1px solid var(--da-border);
  border-left: 3px solid color-mix(in srgb, var(--da-accent-sage) 70%, var(--da-border));
  background: color-mix(in srgb, var(--da-surface-elevated) 93%, var(--da-bg-page-mid));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-carnet-lumineux .trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--user,
body.theme-carnet-lumineux .trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--assigned {
  background: transparent;
  border: none;
  border-left: 3px solid
    color-mix(in srgb, var(--da-border, #e8e2d8) 72%, rgba(88, 80, 72, 0.22));
  box-shadow: none;
}

body.theme-carnet-lumineux .trainingSection__icon--user {
  background: color-mix(in srgb, var(--da-accent-warm) 14%, var(--da-surface-elevated));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent-warm) 32%, var(--da-border));
}

body.theme-carnet-lumineux .trainingSection__icon--user::after {
  border-color: var(--da-text);
}

body.theme-carnet-lumineux .trainingSection__icon--user::before {
  background: var(--da-text);
}

body.theme-carnet-lumineux .trainingSection__icon--assigned {
  background: color-mix(in srgb, var(--da-accent-sage) 12%, var(--da-surface-elevated));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent-sage) 35%, var(--da-border));
}

body.theme-carnet-lumineux .trainingSection__icon--assigned::after {
  border-color: var(--da-accent-sage);
}

body.theme-carnet-lumineux .trainingSection__icon--assigned::before {
  background: var(--da-accent-sage);
}

body.theme-carnet-lumineux .modulesSlider {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow:
    var(--da-shadow-card),
    0 10px 28px rgba(58, 48, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Vos modules / Assignés (.trainingSection) : chrome slider sans ombre (onglet Actuel inchangé) */
.trainingSection .modulesSlider,
body.theme-carnet-lumineux .trainingSection .modulesSlider,
body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingSection .modulesSlider {
  box-shadow: none;
}

body.theme-carnet-lumineux .trainingTabPanel.trainingTabPanel--section {
  box-shadow:
    var(--da-shadow-card),
    0 6px 20px rgba(58, 48, 38, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.theme-carnet-lumineux .modulesSlider__nav {
  border: 1px solid var(--da-border);
  background: var(--da-surface-elevated);
  color: var(--da-text);
  opacity: 0.4;
}

body.theme-carnet-lumineux .modulesSlider:hover .modulesSlider__nav,
body.theme-carnet-lumineux .modulesSlider:focus-within .modulesSlider__nav {
  opacity: 0.95;
}

body.theme-carnet-lumineux .modulesSlider__nav:hover,
body.theme-carnet-lumineux .modulesSlider__nav:focus-visible {
  box-shadow: 0 4px 12px rgba(58, 48, 38, 0.1);
}

body.theme-carnet-lumineux .modulesSlider__track {
  background: #ffffff;
}

body.theme-carnet-lumineux .modulesSlider__thumb {
  background: color-mix(in srgb, var(--da-text-muted, #74675b) 38%, #cfd1d8);
}

body.theme-carnet-lumineux .moduleCard {
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-carnet-lumineux .moduleCard:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--da-cta-from) 32%, transparent),
    var(--pt-card-shadow-hover);
}

body.theme-carnet-lumineux .moduleCard--user:hover,
body.theme-carnet-lumineux .moduleCard--assigned:hover {
  box-shadow: var(--pt-card-shadow-hover);
}

body.theme-carnet-lumineux .moduleCard__accent {
  /* Par défaut : neutre, la couleur vient du type (user / assigned) */
  background: color-mix(in srgb, var(--da-border) 85%, var(--da-bg-page-mid));
}

body.theme-carnet-lumineux .moduleCard--user .moduleCard__accent {
  background: linear-gradient(
    180deg,
    var(--da-accent-warm),
    color-mix(in srgb, var(--da-cta-from) 55%, var(--da-accent-warm))
  );
}

body.theme-carnet-lumineux .moduleCard--assigned .moduleCard__accent {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--da-accent-sage) 85%, white),
    var(--da-accent-sage)
  );
}

body.theme-carnet-lumineux .moduleCard__pill--category {
  border: 1px solid color-mix(in srgb, var(--da-border) 32%, transparent);
  background: color-mix(in srgb, var(--da-surface-elevated) 34%, transparent);
  /* Ton chaud proche du carnet, sans dominante grise */
  color: #ffffff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.theme-carnet-lumineux .moduleCard__pill {
  background: color-mix(in srgb, var(--da-surface-elevated) 38%, transparent);
  color: color-mix(in srgb, var(--da-text) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--da-border) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.theme-carnet-lumineux .moduleCard__pill--more {
  border-color: color-mix(in srgb, var(--da-border) 30%, transparent);
  background: color-mix(in srgb, var(--da-text) 5%, transparent);
  color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.theme-carnet-lumineux .moduleCard__ctaStrip {
  background: color-mix(in srgb, var(--da-bg-page-mid) 88%, var(--da-text));
  border-top: 1px solid var(--da-border);
  color: var(--da-text-muted);
}

body.theme-carnet-lumineux .moduleCard__ctaIcon {
  background: var(--da-surface-elevated);
  color: var(--da-text);
  box-shadow: 0 1px 4px rgba(58, 48, 38, 0.1);
}

body.theme-carnet-lumineux .trainingEmpty {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--da-surface);
  border: 1px dashed var(--da-border);
  color: var(--da-text-muted);
}

@media (max-width: 768px) {
  body.theme-carnet-lumineux.programs-training-page.dashboard-page:not(.da-bg-lab),
  body.theme-carnet-lumineux:not(.da-bg-lab) .trainingLobby {
    background:
      radial-gradient(ellipse 72% 52% at 6% -14%, var(--da-halo-sun) 0%, transparent 58%),
      linear-gradient(180deg, var(--da-bg-page) 0%, var(--da-bg-page-mid) 44%, var(--da-bg-page-end) 100%);
  }

  body.theme-carnet-lumineux .trainingSection--user {
    border-left-color: color-mix(in srgb, var(--da-accent-warm) 55%, var(--da-border));
  }

  body.theme-carnet-lumineux .trainingSection--assigned {
    border-left-color: color-mix(in srgb, var(--da-accent-sage) 70%, var(--da-border));
  }

  body.theme-carnet-lumineux .trainingSection__icon--user {
    background: color-mix(in srgb, var(--da-accent-warm) 14%, var(--da-surface-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent-warm) 32%, var(--da-border));
  }

  body.theme-carnet-lumineux .trainingSection__icon--assigned {
    background: color-mix(in srgb, var(--da-accent-sage) 12%, var(--da-surface-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent-sage) 35%, var(--da-border));
  }
}

/* --- da-bg-lab + carnet : modules très lisibles, runway vitrée, scrollbar fine (sliders) --- */
body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingLobby {
  padding-right: max(1.35rem, env(safe-area-inset-right));
}

@media (min-width: 769px) {
  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingLobby {
    padding-left: calc(
      8px + var(--shell-rail-w, 64px) + clamp(1.2rem, 1.85vw, 2.15rem) + var(--training-controlbar-gap-x)
    );
  }
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingSection__panel {
  padding-left: clamp(0.15rem, 0.6vw, 0.45rem);
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .modulesSlider {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow:
    var(--da-shadow-card),
    0 14px 36px rgba(38, 28, 42, 0.1),
    0 5px 16px rgba(38, 28, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .moduleCard {
  border: none;
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(252, 249, 255, 0.58) 100%
  );
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  box-shadow:
    0 18px 40px rgba(38, 28, 42, 0.1),
    0 6px 14px rgba(38, 28, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .moduleCard:hover {
  box-shadow:
    0 24px 50px rgba(38, 28, 42, 0.13),
    0 8px 18px rgba(38, 28, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .moduleCard:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--da-cta-from) 32%, transparent),
    0 22px 46px rgba(38, 28, 42, 0.12);
}

@media (prefers-reduced-transparency: reduce) {
  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .modulesSlider,
  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .moduleCard {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .moduleCard {
    background: var(--da-surface-elevated, #ffffff);
    border: none;
  }

  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .modulesSlider {
    background: transparent;
    border: none;
    box-shadow:
      var(--da-shadow-card, 0 5px 22px rgba(85, 68, 48, 0.05)),
      0 8px 20px rgba(58, 48, 38, 0.08);
  }

  body.theme-carnet-lumineux.programs-training-page.dashboard-page.da-bg-lab .trainingSection .modulesSlider {
    box-shadow: none;
  }
}

/* ==========================================================================
   DA « Lin & Ardoise » — programmes d'entraînement
   Cartes compactes (réf. modules assignés), fond clair, typo League / Manrope.
   ========================================================================== */

body.theme-lin-ardoise.programs-training-page {
  font-family: var(--typo-body, "Manrope", system-ui, sans-serif);
  color: var(--da-ink);
}

body.theme-lin-ardoise.programs-training-page .trainingLobby {
  --pt-text: var(--da-ink);
  --pt-muted: var(--da-ink-muted);
  --pt-accent: var(--da-accent);
  --pt-accent2: var(--da-accent-2);
  --pt-border: var(--da-line);
  --pt-glass: color-mix(in srgb, var(--da-surface-elevated) 92%, transparent);
  --pt-glass-strong: var(--da-surface-elevated);
  --pt-surface: var(--da-base-raised);
  --pt-card-shadow: var(--da-shadow-card);
  --pt-card-shadow-hover: 0 10px 28px rgba(38, 42, 48, 0.1);
  --pt-elev: var(--da-shadow-card);
  --pt-line: 1px solid var(--da-line);
  --pt-radius: var(--da-radius-card, 18px);
  --pt-radius-sm: 14px;
  --pt-section-gap: 1.5rem;
  font-family: var(--typo-body, "Manrope", system-ui, sans-serif);
  color: var(--da-ink);
  background: transparent;
}

body.theme-lin-ardoise.programs-training-page.dashboard-page:not(.da-bg-lab),
body.theme-lin-ardoise.programs-training-page.dashboard-page:not(.da-bg-lab) .trainingLobby {
  background: transparent;
}

/* Hero */
body.theme-lin-ardoise.programs-training-page .trainingLobby__heroAccent {
  background: radial-gradient(
    ellipse 80% 70% at 40% 45%,
    var(--da-accent-soft) 0%,
    transparent 68%
  );
  opacity: 0.9;
}

body.theme-lin-ardoise.programs-training-page .trainingLobby__heroInner {
  background: var(--da-surface-elevated);
  border: 1px solid var(--da-line);
  box-shadow: var(--da-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.theme-lin-ardoise.programs-training-page .trainingLobby__title {
  font-family: var(--typo-display, "League Spartan", sans-serif);
  font-weight: 700;
  color: var(--da-ink);
  text-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .trainingLobby__lede {
  color: var(--da-ink-muted);
}

/* Onglets */
body.theme-lin-ardoise.programs-training-page .trainingTabsNav {
  background: color-mix(in srgb, var(--da-surface-elevated) 88%, transparent);
  border: 1px solid var(--da-line);
  box-shadow: var(--da-shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.theme-lin-ardoise.programs-training-page .trainingTabs__btn {
  background: var(--da-base-raised);
  border-color: var(--da-line);
  color: var(--da-ink-muted);
  box-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .trainingTabs__btn:hover {
  background: color-mix(in srgb, var(--da-accent-soft) 55%, var(--da-base-raised));
  border-color: color-mix(in srgb, var(--da-accent) 28%, var(--da-line));
  color: var(--da-ink);
}

body.theme-lin-ardoise.programs-training-page .trainingTabs__btn.is-active {
  background: var(--da-accent);
  border-color: var(--da-accent);
  color: var(--da-accent-ink);
  box-shadow: var(--da-shadow-btn);
}

body.theme-lin-ardoise.programs-training-page .trainingTabs__btn.has-news {
  animation: trainingTabBtnNewsHintLin 3.2s ease-in-out infinite;
}

@keyframes trainingTabBtnNewsHintLin {
  0%,
  100% {
    border-color: var(--da-line);
  }
  50% {
    border-color: color-mix(in srgb, var(--da-accent-2) 55%, var(--da-accent));
  }
}

/* Sections */
body.theme-lin-ardoise.programs-training-page .trainingActuelBlock__title,
body.theme-lin-ardoise.programs-training-page .trainingSection__title {
  font-family: var(--typo-display, "League Spartan", sans-serif);
  font-weight: 700;
  color: var(--da-ink);
}

body.theme-lin-ardoise.programs-training-page .trainingTabPanel.trainingTabPanel--section {
  box-shadow: none;
}

body.theme-lin-ardoise.programs-training-page
  .trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--user,
body.theme-lin-ardoise.programs-training-page
  .trainingSection.trainingSection--flat.trainingSection--compact.trainingSection--assigned {
  border-left: 3px solid var(--da-line);
  background: transparent;
}

body.theme-lin-ardoise.programs-training-page .trainingSection--user {
  border-left-color: color-mix(in srgb, var(--da-accent) 42%, var(--da-line)) !important;
}

body.theme-lin-ardoise.programs-training-page .trainingSection--assigned {
  border-left-color: color-mix(in srgb, var(--da-accent-2) 50%, var(--da-line)) !important;
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--user {
  background: var(--da-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent) 35%, var(--da-line));
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--user::after {
  border-color: var(--da-accent);
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--user::before {
  background: var(--da-accent);
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--assigned {
  background: var(--da-accent-2-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--da-accent-2) 35%, var(--da-line));
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--assigned::after {
  border-color: var(--da-accent-2);
}

body.theme-lin-ardoise.programs-training-page .trainingSection__icon--assigned::before {
  background: var(--da-accent-2);
}

/* Slider chrome */
body.theme-lin-ardoise.programs-training-page .modulesSlider {
  box-shadow: var(--da-shadow-card);
  border: 1px solid var(--da-line);
  background: color-mix(in srgb, var(--da-surface-elevated) 72%, transparent);
}

body.theme-lin-ardoise.programs-training-page .modulesSlider__nav {
  border-color: var(--da-line);
  background: var(--da-base-raised);
  color: var(--da-ink-muted);
}

body.theme-lin-ardoise.programs-training-page .modulesSlider__track {
  background: color-mix(in srgb, var(--da-ink) 8%, transparent);
}

body.theme-lin-ardoise.programs-training-page .modulesSlider__thumb {
  background: color-mix(in srgb, var(--da-accent) 55%, var(--da-ink-muted));
}

/* —— Cartes : format compact unifié (réf. assignés) —— */
body.theme-lin-ardoise.programs-training-page .modulesGrid--slider .moduleCard,
body.theme-lin-ardoise.programs-training-page .trainingSection--compact .modulesGrid--slider .moduleCard {
  --training-card-w: min(272px, 70vw);
}

body.theme-lin-ardoise.programs-training-page .moduleCard {
  background: var(--da-surface-elevated);
  border: 1px solid var(--da-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--da-shadow-card);
}

body.theme-lin-ardoise.programs-training-page .moduleCard:hover {
  border-color: color-mix(in srgb, var(--da-accent) 32%, var(--da-line));
  box-shadow: 0 10px 26px rgba(38, 42, 48, 0.09);
  transform: translateY(-2px);
}

body.theme-lin-ardoise.programs-training-page .moduleCard:focus-visible {
  box-shadow:
    0 0 0 3px var(--da-focus-ring),
    var(--da-shadow-card);
}

body.theme-lin-ardoise.programs-training-page .moduleCard__body {
  min-height: 0;
  padding: 0.62rem 0.72rem 0.66rem 0.82rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--da-surface-elevated) 82%, transparent),
    color-mix(in srgb, var(--da-base-raised) 55%, transparent)
  );
}

body.theme-lin-ardoise.programs-training-page .moduleCard--withVisual .moduleCard__body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
}

body.theme-lin-ardoise.programs-training-page .trainingSection--compact .moduleCard__body {
  min-height: 0;
  padding: 0.58rem 0.68rem 0.62rem 0.78rem;
}

body.theme-lin-ardoise.programs-training-page .moduleCard__title {
  font-family: var(--typo-display, "League Spartan", sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.32rem;
  line-height: 1.2;
}

body.theme-lin-ardoise.programs-training-page .moduleCard--withFallbackVisual .moduleCard__title,
body.theme-lin-ardoise.programs-training-page .moduleCard:not(.moduleCard--withVisual) .moduleCard__title {
  color: var(--da-ink);
  text-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .moduleCard__categories {
  margin-bottom: 0.26rem;
}

body.theme-lin-ardoise.programs-training-page .moduleCard__metaRow {
  margin-bottom: 0.24rem;
  gap: 0.24rem 0.35rem;
}

body.theme-lin-ardoise.programs-training-page .moduleCard__stats {
  margin-bottom: 0;
  font-size: 0.78rem;
  gap: 0.4rem 0.65rem;
}

body.theme-lin-ardoise.programs-training-page .trainingSection--compact .moduleCard__title {
  margin-bottom: 0.3rem;
}

body.theme-lin-ardoise.programs-training-page .trainingSection--compact .moduleCard__stats {
  margin-bottom: 0;
}

/* Pastilles — fond clair */
body.theme-lin-ardoise.programs-training-page .moduleCard--withFallbackVisual .moduleCard__pill,
body.theme-lin-ardoise.programs-training-page .moduleCard:not(.moduleCard--withVisual) .moduleCard__pill,
body.theme-lin-ardoise.programs-training-page .moduleCard--withFallbackVisual .moduleCard__pill--category,
body.theme-lin-ardoise.programs-training-page .moduleCard:not(.moduleCard--withVisual) .moduleCard__pill--category {
  border: 1px solid var(--da-line);
  background: var(--da-accent-soft);
  color: var(--da-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .moduleCard--withFallbackVisual .moduleCard__stats,
body.theme-lin-ardoise.programs-training-page .moduleCard:not(.moduleCard--withVisual) .moduleCard__stats {
  color: var(--da-ink-muted);
  text-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .moduleCard--withFallbackVisual .moduleCard__statValue,
body.theme-lin-ardoise.programs-training-page .moduleCard:not(.moduleCard--withVisual) .moduleCard__statValue {
  color: var(--da-accent);
}

body.theme-lin-ardoise.programs-training-page .moduleCard__favBtn {
  border-color: var(--da-line);
  background: color-mix(in srgb, var(--da-surface-elevated) 88%, transparent);
  color: var(--da-ink-muted);
}

body.theme-lin-ardoise.programs-training-page .moduleCard__favBtn.is-fav {
  color: var(--da-accent-2);
  border-color: color-mix(in srgb, var(--da-accent-2) 40%, var(--da-line));
  background: var(--da-accent-2-soft);
}

body.theme-lin-ardoise.programs-training-page .moduleCard__new {
  background: var(--da-accent);
  border-color: color-mix(in srgb, var(--da-accent) 60%, #fff);
  color: var(--da-accent-ink);
  text-shadow: none;
}

body.theme-lin-ardoise.programs-training-page .trainingEmpty {
  background: var(--da-base-raised);
  border: 1px dashed var(--da-line-strong);
  color: var(--da-ink-muted);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  body.theme-lin-ardoise.programs-training-page .trainingTabsNav {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--da-base) 96%, transparent) 0%,
      color-mix(in srgb, var(--da-base) 82%, transparent) 72%,
      transparent 100%
    );
  }

  body.theme-lin-ardoise.programs-training-page .trainingSection--compact .moduleCard__body {
    min-height: 0;
    padding: 0.56rem 0.6rem 0.58rem 0.72rem;
  }
}