h1 {
  margin-left: 35px;
  margin-right: 35px;
}

/* Styles de base pour le conteneur de la plaquette */
.container-plaquette {
  margin: 0;
  /* Aucune marge */
  padding: 0;
  /* Aucun remplissage */
}

/* Styles pour le lien d'image */
.image-link {
  display: block;
  /* Affiche le lien comme un bloc */
  position: relative;
  /* Positionnement relatif pour le texte */
  margin: 0;
  /* Aucune marge */
  padding: 0;
  /* Aucun remplissage */
  text-decoration: none;
  /* Pas de soulignement */
}

/* Styles pour l'enveloppe de l'image */
.image-wrapper {
  position: relative;
  /* Positionnement relatif pour le conteneur */
  display: flex;
  /* Utilisation de flexbox */  
  flex-direction: column; /* Aligne les éléments en colonne */
  align-items: center; /* Aligne les éléments au centre */
  margin-bottom: 0;
  /* Supprime l'espace sous l'image */
}

/* Styles pour l'image sur PC */
.pc-image {
  display: block;
  /* Affiche l'image comme un bloc */
  width: 100%;
  /* Largeur à 100% */
  height: auto;
  /* Hauteur automatique pour maintenir le ratio */
}

/* Styles pour l'image mobile */
.mobile-image {
  display: none;
  /* Cache l'image mobile par défaut */
}

/* Styles pour le texte sur l'image */
.image-text {
  position: absolute; /* Positionnement absolu pour superposition */
  top: 55px; /* Positionne le texte très haut */
  color: white; /* Couleur du texte en blanc */
  background-color: rgba(0, 0, 0, 0.459); /* Fond semi-transparent */
  padding: 10px 22px; /* Remplissage autour du texte */
  border-radius: 5px; /* Coins arrondis */
  font-size: 1.5rem; /* Taille de police */
  font-weight: bold; /* Texte en gras */
  text-align: center; /* Centre le texte */
}

/* Positionnement spécifique pour le texte "Intérieur" */
.interieur-text {
  left: 20px; /* Positionne le texte "Intérieur" à gauche */
}

/* Positionnement spécifique pour le texte "Extérieur" */
.exterieur-text {
  right: 20px; /* Positionne le texte "Extérieur" à droite */
}

/* Styles pour le bouton "En savoir plus" */
.btn-en-savoir-plus {
  position: relative; /* Positionnement relatif pour le bouton */
  padding: 5px 15px; /* Remplissage du bouton */
  background-color: rgba(0, 123, 255, 0.8); /* Couleur de fond du bouton avec transparence */
  color: white; /* Couleur du texte */
  text-decoration: none; /* Pas de soulignement */
  border-radius: 30px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère */
  text-align: center; /* Centre le texte du bouton */
  font-size: 1rem; /* Taille de police plus petite */
  opacity: 0.9; /* Légèrement transparent pour le rendre visible */
  margin-top: 0px; /* Espace au-dessus du bouton pour le séparer du texte */
  top: -120px;
  display: none;
}

/* Media Queries pour les écrans plus petits */
@media (max-width: 992px) {

  /* Styles pour l'image sur PC */
  .pc-image {
    display: none; /* Cache l'image PC pour les petits écrans */
  }

  /* Styles pour l'image mobile */
  .mobile-image {
    display: block !important; /* Affiche l'image mobile pour les petits écrans */
    width: 100%; /* Largeur à 100% */
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    margin-top: 0; /* Assure qu'il n'y a pas d'espace au-dessus */
  }

  /* Styles pour le texte sur l'image */
  .image-text {
    display: block !important; /* Affiche le texte sur les petits écrans */
    z-index: 999999; /* Assure que le texte est au-dessus */
  }

  .btn-en-savoir-plus {
    display: block; /* Affiche le bouton sur les petits écrans */
  }
}