/* Fiche spectacle : page pleine largeur (414 px) sous l'en-tête jaune. */

.screen__body--bleed {
  padding: 0 0 var(--clearance-lists);
  background: var(--color-white);
}

.spectacle {
  background: var(--color-white);
}

/* ---- Carrousel ----------------------------------------------------------------- */
.carousel {
  position: relative;
  height: var(--carousel-height);
  background: var(--color-black);
}

.carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: none;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chevrons précédent / suivant : ronds blancs au milieu des bords de la photo. */
.carousel__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--carousel-nav-size);
  height: var(--carousel-nav-size);
  transform: translateY(-50%);
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-chip);
}

.carousel__nav[hidden] {
  display: none;
}

.carousel__nav--previous { left: var(--space-2); }
.carousel__nav--next { right: var(--space-2); }

.carousel__nav img {
  width: var(--menu-chevron-size);
  height: var(--menu-chevron-size);
}

.carousel__nav--previous img {
  transform: rotate(180deg);
}

.carousel__counter {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-0-5) var(--space-2);
  background: rgb(0 0 0 / 60%);
  border-radius: var(--radius-xs);
  font-size: var(--text-md);
  line-height: var(--leading-link);
  color: var(--color-white);
  pointer-events: none;
}

/* ---- Bannière + contenu -------------------------------------------------------- */
.spectacle__banner {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.spectacle__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

/* Cartes de représentation de la fiche : plus larges et plus basses que celles de la carte spectacle. */
.spectacle .rep {
  width: var(--rep-width-wide);
  min-height: 0;
}

.spectacle .rep__top {
  height: var(--rep-top-height-compact);
}

.spectacle .pin {
  width: var(--pin-size-compact);
  height: var(--pin-size-compact);
}

.spectacle__info {
  gap: var(--space-2);
}

.spectacle__text {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-xs);
  color: var(--color-ink);
}

.spectacle__text p + p,
.spectacle__text br {
  margin-top: 0;
}

.spectacle__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--card-inset);
}

/* Pastille-lien : même gabarit que « Lire plus », liseré de 1 px compris (23 px de haut). */
.pill--bordered {
  display: inline-block;
  padding-block: calc(var(--pill-padding-y) - var(--hairline));
  border: var(--hairline) solid var(--accent);
  text-decoration: none;
}

.pill--outline {
  background: var(--color-white);
  color: var(--color-black);
}

.spectacle__rule {
  margin-inline: var(--card-inset);
}

.spectacle__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: 0 var(--card-inset);
}

.spectacle__section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-link);
  color: var(--color-ink);
}