/* ═════════════════════════════════════════════════════════════
   IMAGES.CSS
   Galeries d'images (responsive grid), images centrées avec hover,
   conteneurs vidéo avec ombres et animations.
   ═════════════════════════════════════════════════════════════ */

/* ─ IMAGES PAR DÉFAUT ──────────────────────────────────────────– */
img {
  max-width: 100%; /* Ne dépasse pas la largeur du conteneur */
  height: auto; /* Hauteur ajustée automatiquement */
  display: block; /* Supprime les espacements inline */
}

/* ─ IMAGE CENTRÉE AVEC HOVER ───────────────────────────────────– */
.image-center {
  margin: var(--spacing-xxl) auto; /* 40px avant/après, centré */
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre le contenu */
}

.image-center img {
  max-width: 560px; /* Largeur maximale 560px */
  width: 100%; /* Responsive jusqu'à 560px */
  height: auto;
  object-fit: cover; /* Remplit l'espace, coupe si nécessaire */
  border-radius: var(--border-radius-lg); /* Coins arrondis (8px) */
  box-shadow: var(--box-shadow); /* Ombre principale */
  transition:
    transform var(--transition-slow), /* Animation zoom 0.35s */
    box-shadow var(--transition-slow); /* Animation ombre 0.35s */
  margin: 0 auto;
}

.image-center img:hover {
  transform: scale(1.015); /* Zoom très léger (1.5%) */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7); /* Ombre plus prononcée au survol */
}

/* ─ GALERIE GRID ───────────────────────────────────────────────– */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 200px min par image, rempli auto */
  gap: var(--spacing-sm); /* 8px entre les images */
  margin: var(--spacing-md) 0; /* 16px avant/après */
  align-items: start; /* Aligne au sommet */
}

.image-gallery a {
  display: block;
  overflow: hidden; /* Coupe ce qui dépasse */
  border-radius: var(--border-radius); /* Coins arrondis (4px) */
  box-shadow: var(--box-shadow-sm); /* Petite ombre (2px) */
}

.image-gallery img {
  width: 100%; /* Remplir la colonne */
  height: 180px; /* Hauteur fixe (carré) */
  object-fit: cover; /* Couvre sans distortion */
  transition: transform 0.4s ease; /* Zoom lent 0.4s */
}

.image-gallery img:hover {
  transform: scale(1.06); /* Zoom 6% au survol */
}

/* ─ CONTENEUR VIDEO SIMPLE ────────────────────────────────────── */
.video-container {
  margin: var(--spacing-xxl) 0; /* 40px avant/après */
}

.video-container video {
  width: 100%; /* Responsive */
  max-width: 800px; /* Limite à 800px */
  height: auto;
  display: block;
  margin: 0 auto; /* Centré */
  border-radius: var(--border-radius-lg); /* Coins arrondis (8px) */
  box-shadow: var(--box-shadow); /* Ombre principale */
}

/* ─ GALERIE VIDÉO (flex colonne) ───────────────────────────────– */
.video-gallery {
  display: flex;
  flex-direction: column; /* Empilement vertical */
  gap: var(--spacing-lg); /* 24px entre les vidéos */
  margin: var(--spacing-xxl) 0; /* 40px avant/après */
}

.video-gallery video {
  width: 100%; /* Responsive */
  max-width: 600px; /* Limite à 600px */
  height: auto;
  margin: 0 auto; /* Centré */
  display: block;
  border-radius: var(--border-radius-lg); /* Coins arrondis (8px) */
  box-shadow: var(--box-shadow); /* Ombre principale */
}