/* Expositions du collectif : la une, chronologie des expositions passées,
   et la fiche d'une exposition. */

/* ── À la une ─────────────────────────────────────────────────────────── */

.featured {
  display: grid; align-items: center; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  padding: clamp(40px, 7vh, 80px) var(--gutter) 0;
}
.featured__image { max-height: 78vh; }
.featured__text { display: flex; flex-direction: column; gap: 22px; color: var(--color-text); }
.featured__text:hover { color: var(--color-text); }
.featured__status { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-primary); }
.featured__status::before { content: ''; width: 28px; height: 1px; background: var(--color-accent); }
.featured__title { font-family: var(--font-title); font-size: clamp(40px, 5.4vw, 84px); line-height: 0.94; text-wrap: balance; }
.featured__dates { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--color-primary); }
.featured__place { font-size: 14px; font-weight: 300; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 16px; }

/* ── Chronologie ──────────────────────────────────────────────────────── */

.timeline-section { padding: clamp(80px, 13vh, 150px) var(--gutter) 0; max-width: 1000px; margin: 0 auto; }
.timeline-section > h2 { margin-bottom: clamp(32px, 5vh, 56px); text-align: center; }
.timeline { position: relative; border-left: 1px solid var(--color-primary); margin-left: clamp(56px, 10vw, 120px); }
.timeline__item {
  position: relative; display: grid; align-items: center; gap: 20px 28px;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 160px);
  padding: 22px 0 22px clamp(24px, 4vw, 48px); color: var(--color-text);
}
.timeline__item:hover { color: var(--color-text); }
.timeline__dot {
  position: absolute; left: -1px; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-primary); transform: translate(-50%, -50%);
}
.timeline__year {
  position: absolute; left: calc(-1 * clamp(56px, 10vw, 120px)); width: clamp(48px, 9vw, 100px);
  top: 50%; transform: translateY(-50%); text-align: right;
  font-family: var(--font-display); font-size: clamp(16px, 2vw, 24px); color: var(--color-accent);
}
.timeline__text { display: flex; flex-direction: column; gap: 6px; }
.timeline__title { font-family: var(--font-title); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; }
.timeline__meta { font-size: 13px; font-weight: 300; line-height: 1.6; }
.timeline__image { display: block; }
.timeline__more {
  display: flex; justify-content: center; padding-top: 48px; min-height: 24px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary);
}
@media (max-width: 520px) {
  .timeline__item { grid-template-columns: minmax(0, 1fr); }
  .timeline__image { max-width: 200px; }
}

/* ── Fiche d'une exposition ───────────────────────────────────────────── */

.expo-head {
  display: grid; gap: 32px 48px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding: clamp(40px, 7vh, 80px) var(--gutter) 0;
}
.expo-head__title { display: flex; flex-direction: column; gap: 16px; }
.expo-head__facts { display: grid; gap: 14px; font-size: 14px; font-weight: 300; line-height: 1.7; }
.expo-head__facts strong { font-weight: 600; font-family: var(--font-title); font-size: 20px; }
.expo-body {
  display: grid; gap: clamp(40px, 6vw, 96px);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  padding: clamp(48px, 8vh, 96px) var(--gutter) 0;
}
.expo-body__main { display: flex; flex-direction: column; gap: 40px; }
.expo-aside { display: flex; flex-direction: column; gap: 24px; }
.expo-aside__box { background: var(--color-surface); padding: 24px; border-radius: 0 0 60px 0; font-size: 14px; font-weight: 300; line-height: 1.7; }
.expo-artists { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); padding-top: 24px; border-top: 1px solid var(--line); }
.expo-artist { display: flex; flex-direction: column; gap: 10px; color: var(--color-text); }
.expo-artist__name { font-family: var(--font-title); font-size: 18px; }
.map-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-primary); font: inherit; align-self: flex-start; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }