/* Hero background, vous pouvez mettre une image ou un dégradé */
.bg-hero {
  position: relative;
  background: url("../images/banner.png") center/cover no-repeat;
}
.bg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* ombre semi-transparente */
}
.bg-hero > .container {
  position: relative; /* pour que le texte soit au-dessus */
}

/* Lightbox (si vous conservez ce système) */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1050;
    justify-content: center;
    align-items: center;
}

#lightbox.hidden {
    display: none;
}

#lightbox.active {
    display: flex;
}

#lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
}

/* Survol des images */
.image-clickable {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-clickable:hover {
    transform: scale(1.02);
}

/* Conteneur global de la section */
#video .row {
  /* g-4 dans le HTML gère déjà l'espacement. */
}

/* Wrapper pour limiter la taille si vous le souhaitez */
#video .video-wrapper {
  max-width: 800px;   /* limite la largeur à 800px si vous voulez */
  width: 100%;        /* s'adapte à la colonne sur PC, se réduit sur mobile */
}

/* Vidéo responsive en ratio 1:1 */
.video-square {
  display: block;
  width: 100%;
  height: auto;
  /* Optionnel : ratio carré */
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
}