html {
    scroll-behavior: smooth;
}

/* Section Portfolio */
.portfolio-category {
    text-align: center;
    padding: 2rem;
  }

  .portfolio-category h1{
    margin-bottom: 10px;
  }
  
  .retour{
    color: #13aae2;
    margin: 5px 0;
    text-decoration: none;
}

.retour:hover{
  color: #BF2726;
  }



   


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 16 / 9; /* ✅ garantit un ratio uniforme */
  background-color: #000;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ évite la déformation */
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

  .gallery-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  /* Style pour l'image agrandie */
  .gallery-item.active img {
    transform: scale(2);
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  }

  /* Conteneur plein écran */
#fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
  }
  
  #fullscreen-container.hidden {
    display: none;
  }
  
  #fullscreen-image {
    
     max-width: 90vw;  /* Ne dépasse jamais 90% de la largeur de l'écran */
  max-height: 90vh; /* Ne dépasse jamais 90% de la hauteur de l'écran */
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: auto;
  animation: fadeIn 0.3s ease; 
  }
  
  /* Animation d'apparition */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }