@layer pages {
/* ============================================================================
   CARTE D'ENTRAINEMENT
   Une seance annulee cumule hachures + titre barre + badge + mention pour
   lecteurs d'ecran : jamais la couleur seule.
   ========================================================================= */

.training {
  --training-accent: var(--c-border-strong);
  position: relative;
  border-left: var(--bw-brand) solid var(--training-accent);
}
.training .card__body { gap: var(--sp-3); }

.training--next {
  --training-accent: var(--c-red-500);
  box-shadow: var(--sh-3);
}
.training--next .training__title { font-size: var(--fs-xl); }

.training--cancelled {
  --training-accent: var(--c-danger);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 10px, rgb(194 32 12 / .07) 10px 20px);
}
.training--cancelled .training__title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--c-text-muted);
}

.training--exceptional {
  --training-accent: var(--c-gold-500);
  background: var(--c-gold-100);
}

.training__when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-bold);
  color: var(--c-text-muted);
}
.training__rel { color: var(--c-red-600); }

.training__head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.training__title { font-size: var(--fs-lg); }

.training__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.training__facts li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.training__icon { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

.training__reason {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-danger);
}

.training__locked {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--r-sm);
  border: var(--bw-hair) dashed var(--c-border-strong);
}

.training__workout-name {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-red-600);
}
.training__workout {
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
}
.training__workout-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.training__workout-details dt {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.training__workout-details dd { white-space: pre-line; }

/* ---- PAGE ENTRAINEMENTS ------------------------------------------------- */
.week-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}
/* Les deux boutons restent compacts : le libelle de semaine est long, et le
   theme sombre pousse tous les boutons au grand format. La couche `pages`
   passe apres `components`, donc ces variables l'emportent. */
.week-nav .btn { --btn-pad-x: 1.25rem; --btn-fs: var(--fs-base); }
.week-nav__label {
  flex: 1 1 16rem;
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

.week { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 768px) { .week { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .week { grid-template-columns: repeat(4, 1fr); } }

.day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  border: var(--bw-hair) solid var(--c-border);
}
.day.is-today { border-color: var(--c-red-500); box-shadow: var(--sh-2); }
.day__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.day__name {
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.day.is-today .day__name { color: var(--c-red-600); }
.day__num { font-size: var(--fs-xs); color: var(--c-text-muted); }
.day__empty { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; }
.day .training { border-radius: var(--r-lg); }

.alerts { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.alert__list { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.alert__list li { font-weight: var(--fw-semibold); }

}

@layer pages {
/* Theme sombre : les trois endroits ou la carte codait un rouge "encre",
   illisible sur fond noir, et le fond or clair de la seance exceptionnelle. */
/* Un liseré de 6 px sur un rayon de 36 px ne se voit plus que par son milieu :
   les cartes d'entrainement gardent donc le rayon moyen. */
.theme-dark .training { border-radius: var(--r-lg); }
.theme-dark .training__rel { color: var(--c-accent); }
.theme-dark .training__workout-name { color: var(--c-accent); }
.theme-dark .training--exceptional { background: rgb(245 168 0 / .10); }
.theme-dark .training--cancelled {
  background-image: repeating-linear-gradient(135deg,
    transparent 0 10px, rgb(255 128 105 / .09) 10px 20px);
}
.theme-dark .day.is-today .day__name { color: var(--c-accent); }
.theme-dark .day.is-today { border-color: var(--c-accent); }
}