/**
 * image-fit.css — Correctifs d'affichage chargés après admin.css et
 * club-life.css : force les photos d'événement à s'afficher entières
 * (object-fit: contain, avec !important pour l'emporter sur les règles
 * plus anciennes) plutôt que recadrées, et élargit un peu la scène 3D de
 * vie-du-club.html.
 */
.event-image-preview {
  width: 100%;
  height: 240px;
  max-height: none;
  object-fit: contain;
  background: #fffaf1;
}

.viewport {
  width: calc(100% - 64px);
  max-width: 1900px;
  margin-inline: auto;
  border-inline: 1px solid rgba(59, 43, 35, 0.16);
  border-radius: 18px;
}

.preview-image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(220px, 40vh, 360px);
  overflow: hidden;
  background: #fffaf1;
}

.preview-image-frame img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
}

.event-detail__image {
  display: block;
  width: calc(100% - 56px);
  height: clamp(180px, 28vw, 280px);
  max-height: none;
  margin: 0 auto 18px;
  object-fit: contain !important;
  object-position: center;
  background: #fffaf1;
}

.event-detail__image[hidden] {
  display: none !important;
}

.event-detail {
  top: 50% !important;
  max-height: calc(100% - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.event-detail h3 {
  overflow-wrap: anywhere;
  font-size: clamp(1.75rem, 4vw, 3rem);
}

@media (max-width: 700px) {
  .viewport {
    width: calc(100% - 24px);
    border-radius: 12px;
  }

  .event-detail {
    width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    padding: 20px;
  }

  .event-detail__image {
    width: calc(100% - 20px);
  }
}