.elementor-5977 .elementor-element.elementor-element-7d9ad2de{--display:flex;}.elementor-5977 .elementor-element.elementor-element-7b787428{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5977 .elementor-element.elementor-element-69e1b418 .gallery-item{padding:0 2px 2px 0;}.elementor-5977 .elementor-element.elementor-element-69e1b418 .gallery{margin:0 -2px -2px 0;}.elementor-5977 .elementor-element.elementor-element-69e1b418 .gallery-item img{border-style:solid;border-color:var( --e-global-color-accent );}.elementor-5977 .elementor-element.elementor-element-69e1b418 .gallery-item .gallery-caption{text-align:center;}/* Start custom CSS for container, class: .elementor-element-7b787428 *//* 1. On prépare la case pour accueillir la légende par-dessus l'image */
.elementor-image-gallery .gallery-item {
  position: relative;
  overflow: hidden; /* Empêche la légende de dépasser si elle est animée */
}

/* 2. On masque la légende et on la positionne sur l'image */
.elementor-image-gallery .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important; /* Annule les marges d'Elementor */
  
  /* Style du fond (noir semi-transparent) et du texte */
  background-color: rgba(255, 255, 255, 0.85); /* Ajustez l'opacité ici (0.7) */
  color: #000000; !important;
  
  /* Centrage parfait du texte de la légende */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  
  /* Effet invisible par défaut + transition fluide */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Permet de cliquer à travers la légende si besoin */
}

/* 3. Au survol de l'image, on affiche la légende */
.elementor-image-gallery .gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* Optionnel : Léger zoom sur l'image au survol */
.elementor-image-gallery .gallery-item img {
  transition: transform 0.3s ease-in-out;
}
.elementor-image-gallery .gallery-item:hover img {
  transform: scale(1.05);
}/* End custom CSS */