html, body {
    overflow-x: hidden; /* Enpeche le scroll horizontal */
}

.my-btn:hover {
    color: darkgray;
}

ul li a:hover {
    text-decoration: underline; /* souligne au survol */
}

ul li a.active {
    font-weight: bold;          /* optionnel, pour plus de visibilité */
}

.photo-hover {
  display: none;
}

.lien-conteneur-photo:hover .photo-hover {
  display: flex;
}

/* Version mobile/tablette → superposition */
.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.overlay-text {
    width: 50%;  
    padding-bottom: 170px;
}

/* À partir de md → plus de superposition → éléments empilés verticalement */
@media (max-width: 768px) {
    .section-photo {
        position: static; /* libère la section */
        padding: 0;
    }

    .overlay {
        position: static; /* libère l'overlay */
    }
    .overlay-text {
      width: 75%;       /* texte prend 75% de la largeur */
      padding-bottom: 30px; /* supprime le padding bottom */
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}