/* =====================================================================
   PAGE PROGRAMME
   ===================================================================== */

/* ---------- Layout programme (nav rapide + contenu) ---------- */
.prog-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
.side-nav {
  position: sticky; top: calc(var(--header-height) + 1rem);
  align-self: start;
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 1.25rem;
  height: max-content;
}
.side-nav h3 { color: var(--color-yellow); font-size: var(--fs-xsmall); text-transform: uppercase; margin-bottom: 0.5rem; }
.side-nav a { display: block; padding: 0.6rem 0; font-size: var(--fs-small); border-bottom: 1px solid var(--color-border-dark); }
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover { color: var(--color-yellow); }

/* ---------- Grille horaire ---------- */
.schedule { display: grid; gap: 0; }
.schedule__row {
  display: grid;
  grid-template-columns: 130px 1fr 150px;
  gap: 1rem;
  padding: 1.1rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.schedule__time { font-weight: var(--fw-bold); color: var(--color-orange); font-size: var(--fs-small); }
.schedule__body h3 { font-size: var(--fs-small); }
.schedule__body p { font-size: var(--fs-small); color: var(--color-muted); }
.schedule__badge { display: inline-block; font-size: var(--fs-xsmall); font-weight: var(--fw-bold); color: var(--color-navy); background: var(--color-cream); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); margin-top: 0.25rem; }
.schedule__place { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xsmall); color: var(--color-muted); justify-self: end; }
.schedule__place svg { color: var(--color-orange); flex: 0 0 auto; }
.provisional-note { font-size: var(--fs-xsmall); color: var(--color-muted); font-style: italic; margin-top: 0.75rem; }

/* ---------- Thématiques ---------- */
.themes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.9rem; }
.theme-card {
  display: grid; justify-items: center; gap: 0.5rem; text-align: center;
  padding: 1.5rem 0.75rem;
  background: var(--color-navy); color: #fff;
  border-radius: var(--radius-md);
}
.theme-card svg { color: var(--color-yellow); }
.theme-card h3 { font-size: var(--fs-xsmall); }

/* ---------- Temps forts ---------- */
.highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.highlight-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); }
.highlight-card img { width: 100%; height: 170px; object-fit: cover; }
.highlight-card__body { padding: 1rem; }
.highlight-card__body h3 { font-size: var(--fs-small); margin-bottom: 0.35rem; }
.highlight-card__body p { font-size: var(--fs-small); color: var(--color-muted); }

/* ---------- Barre infos pratiques ---------- */
.info-bar { background: linear-gradient(90deg, var(--color-yellow-soft), var(--color-yellow)); color: var(--color-navy); }
.info-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.info-bar__item { display: flex; align-items: center; gap: 0.5rem; font-weight: var(--fw-bold); font-size: var(--fs-small); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .prog-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; }
  .themes-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .schedule__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .schedule__place { justify-self: start; }
  .themes-grid { grid-template-columns: repeat(2, 1fr); }
}