/* HOP Les Concerts — page-only layout, production-aligned. */
.concerts-collage {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 7rem;
  background: #fff;
}

.concerts-collage::after,
.concerts-catalogue::after {
  content: "";
  position: absolute;
  width: 3px;
  background: var(--color-teal, #159f9a);
  opacity: .72;
  pointer-events: none;
}

.concerts-collage::after { right: clamp(22px, 4vw, 64px); bottom: 1.5rem; height: 14rem; }

.concerts-collage__inner {
  position: relative;
  min-height: 860px;
}

.concerts-collage__title {
  position: relative;
  z-index: 3;
  max-width: 700px;
  margin: 0 0 2.5rem auto;
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  line-height: 1.15;
  color: var(--color-navy);
}

.concerts-collage__image {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  top: 1rem;
  width: min(35%, 365px);
  height: 625px;
  object-fit: contain;
  object-position: center bottom;
}

.concerts-collage__intro {
  position: relative;
  z-index: 3;
  width: 58%;
  margin-left: auto;
  color: var(--color-text);
  line-height: 1.8;
  font-size: 1rem;
}

.concerts-collage__cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  margin: 0;
}

.concerts-collage__card {
  position: absolute;
  width: 32%;
  padding: 1.35rem 1.65rem;
  background: var(--color-teal, #159f9a);
  color: #fff;
  line-height: 1.65;
  font-size: .92rem;
  box-shadow: 0 16px 36px rgba(18, 64, 110, .12);
}

.concerts-collage__card:nth-child(1) { left: 0; top: 34rem; }
.concerts-collage__card:nth-child(2) { left: 34%; top: 26rem; }
.concerts-collage__card:nth-child(3) { right: 0; top: 18rem; }

.concerts-catalogue {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 6rem;
  background: #f6f8fa;
}

.concerts-catalogue::after { right: clamp(22px, 4vw, 64px); bottom: 8rem; height: 20rem; }

.concerts-catalogue__heading {
  font-family: var(--font-title);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  color: var(--color-navy);
  margin-bottom: 1.75rem;
}

.concerts-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 3.5rem;
}

.concerts-year-nav a {
  padding: .65rem 1rem;
  border: 1px solid var(--color-teal, #159f9a);
  border-radius: 999px;
  color: var(--color-navy);
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
}

.concerts-year-nav a:hover,
.concerts-year-nav a:focus-visible { background: var(--color-teal, #159f9a); color: #fff; }

.concert-group { scroll-margin-top: 110px; margin-top: 4rem; }
.concert-group:first-of-type { margin-top: 0; }
.concert-group__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--color-navy);
}
.concert-group__title::after { content: ""; flex: 1; height: 2px; background: var(--color-teal, #159f9a); opacity: .55; }

.featured-grid,
.posters-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; }
.featured-grid { margin-bottom: 4.5rem; }

.poster-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 18px;
  background: #dfe8eb center top / cover no-repeat;
  text-decoration: none;
  box-shadow: 0 7px 24px rgba(18, 64, 110, .12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.poster-card:hover,
.poster-card:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(18, 64, 110, .22); }
.poster-card__info {
  position: absolute;
  inset: auto 0 0;
  padding: 4rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(18, 64, 110, .95));
  color: #fff;
}
.poster-card__hospital,
.poster-card__artist { display: block; font-weight: 750; line-height: 1.3; }
.poster-card__artist { color: #9be3df; font-size: .82rem; margin-bottom: .18rem; }
.poster-card__date { display: block; margin-top: .3rem; font-size: .74rem; color: #c9f0ee; }

.action-temoignages { padding: 5rem 0; background: #fff; }
.action-temoignages__heading { margin-bottom: 2rem; font-family: var(--font-title); font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--color-navy); }
.temoignages-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.temoignage { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.75rem 1.5rem; border-left: 4px solid var(--color-teal, #159f9a); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); }
.temoignage__header { display: flex; align-items: center; gap: .875rem; }
.temoignage__avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; object-fit: cover; }
.temoignage__name,
.temoignage__role { margin: 0; }
.temoignage__name { color: var(--color-navy); font-size: .9rem; font-weight: 750; line-height: 1.3; }
.temoignage__role { margin-top: .1rem; color: var(--color-text-muted, #6b7280); font-size: .75rem; }
.temoignage__quote { flex: 1; margin: 0; color: var(--color-text); font-style: italic; line-height: 1.75; }
.action-footer { padding-top: 3rem; padding-bottom: 5rem; }
.action-footer__text { padding-top: 1.5rem; border-top: 1px solid #dfe7e9; color: #64727c; line-height: 1.7; font-style: italic; }
.action-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .featured-grid,
  .posters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concerts-collage__inner { min-height: 760px; }
  .concerts-collage__image { left: -1rem; width: 38%; }
  .concerts-collage__intro { width: 62%; }
  .concerts-collage__cards { width: 82%; }
}

@media (max-width: 600px) {
  .concerts-collage { padding: 3rem 0 3.5rem; }
  .concerts-collage::after,
  .concerts-catalogue::after { width: 2px; opacity: .45; }
  .concerts-collage__inner { min-height: 0; }
  .concerts-collage__title { margin: 0 1rem 1.5rem; }
  .concerts-collage__image {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: 74%;
    height: 390px;
    margin: 0 auto -2rem;
  }
  .concerts-collage__intro,
  .concerts-collage__cards { width: auto; margin-left: 1rem; margin-right: 1rem; }
  .concerts-collage__cards { position: relative; inset: auto; margin-top: 2rem; }
  .concerts-collage__card,
  .concerts-collage__card:nth-child(1),
  .concerts-collage__card:nth-child(2),
  .concerts-collage__card:nth-child(3) { position: relative; inset: auto; width: auto; margin: 0 0 .8rem; padding: 1.1rem 1.2rem; }
  .concerts-catalogue { padding: 3.75rem 0 4.5rem; }
  .featured-grid,
  .posters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .poster-card { border-radius: 12px; }
  .poster-card__info { padding: 3.3rem .75rem .75rem; }
  .poster-card__hospital { font-size: .76rem; }
  .poster-card__artist,
  .poster-card__date { font-size: .68rem; }
  .concerts-year-nav { gap: .5rem; margin-bottom: 2.5rem; }
  .concerts-year-nav a { padding: .55rem .75rem; font-size: .78rem; }
  .temoignages-list { grid-template-columns: 1fr; }
}