/* Mobile */
@media (max-width: 768px) {
  .font-mobile { font-size: 0.9rem; }
  .main-media { height: 300px; } /* un peu plus compacte sur mobile */
}

/* ===== Miniatures (thumbs) ===== */
.thumb {
  width: 110px;                 /* largeur fixe, hauteur via ratio-1x1 dans le HTML */
  aspect-ratio: 1 / 1;          /* backup si le ratio Bootstrap ne s’applique pas */
  background: #f8f8f8;
  border: 1px solid #d0d7e3 !important;
  border-radius: .75rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color: #203864 !important;
}

.thumb.is-active {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

/* L'image dans la vignette (on cible directement l'img du bouton) */
.thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: .5rem;
}

/* ===== Zone média principale ===== */
.main-media {
  height: 400px;                /* hauteur fixe, le HTML gère le centrage et overflow */
}

/* Image/iframe principales : prennent tout le cadre et restent contenues */
.main-media img,
.main-media iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: .75rem;
}