/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor page builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

 @import "assets/css/lightbox.css";
 @import "assets/css/popup.css";
 @import "assets/css/single.css";
 @import "assets/css/header.css";
 @import "assets/css/footer.css";



 @font-face {
  font-family: 'combine-caps2';
  src: url('../hello-elementor-child/assets/fonts/combineCaps2/combine-caps2.woff2') format('woff2'),
      url('../hello-elementor-child/assets/fonts/combineCaps2/combine-caps2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


 body {
  background-color: #FBFAF8!important ;
}

/* pour une page coming soon en canva, a suprimer lors du lancemant */
.page-id-1643 #footer, .page-id-1643 .elementor-912, .page-id-1643 .elementor-845 {
  display: none;
}


   /* page d'accueil */

/* CSS pour la galerie */

.gallery {
  width: 68%;
  max-width: 1200px; /* Définissez une largeur maximale pour éviter que la galerie ne devienne trop large sur les grands écrans */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto; /* Centre la galerie horizontalement */
}


.gallery-image {
  flex: 0 0 calc(50% - 1em); /* Affiche deux images par ligne avec un petit espace entre elles */
  margin-bottom: 2em; /* Ajoute un espace en dessous de chaque image */
  overflow: hidden; /* Cache les parties de l'image qui dépassent du conteneur */
  position: relative; /* Permet de positionner l'image absolument à l'intérieur du conteneur */

  width: 100%;
  height: 100%;
  background-size: cover; /* Ajuste la taille de l'image de fond pour couvrir la div */
  background-position: center; /* Centre l'image de fond */
}

.gallery-image::before {
  content: "";
  display: block;
  padding-bottom: 100%; /* Crée un espace carré */
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image:hover:before {
  opacity: 1;
}

.gallery-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 35vw;

  height: auto;
  aspect-ratio: 1;
  object-fit: cover; /* Ajuste la taille de l'image pour couvrir la zone définie par son conteneur tout en préservant son ratio */
  transition: filter 0.3s ease; /* Ajoute une transition pour un effet de fondu */
}

.gallery-image:hover img {
  filter: brightness(40%); /* Diminue la luminosité de l'image au survol */
}


.wp-post-image {
  margin-top: 0 !important; 
}

.article-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center; /* Centre le texte horizontalement */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1; /* Place le titre au-dessus de la superposition */

}

.gallery-image:hover .article-title  {
  opacity: 1;
}

.elementor-element-populated{
  padding: 0 !important;
}


  @media (max-width: 990px) {

    .gallery {
      width: 80%;
    }
}

@media (max-width: 620px) {

  .gallery {
    width: 80%;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}