/* Styles personnalisés */
.hero {
    background-color: #6c757d;
    color: #fff;
    padding: 60px 0;
}
.hero img {
    max-width: 100%;
    height: auto;
}

.hero-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px; /* Bords arrondis */
  }
  
  .hero-img-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px; /* S'assurer que l'image adopte également ces bords arrondis */
  }
  
  /* Effet de fondu vers l'arrière-plan sur le bas de l'image */
  .hero-img-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(108,117,125,1) 100%);
  }