/* Style pour la modal */
.modal {
  display: none; /* Masquée par défaut */
  position: fixed;
  z-index: 1000; /* Priorité d'affichage */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fond sombre semi-transparent */
  overflow: hidden; /* Empêche le défilement de la page principale */
}

/* Contenu de la modal */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; /* Presque toute la largeur de l'écran pour mobile */
  max-width: 400px; /* Limite la taille sur des écrans plus grands */
  background-color: var(--couleur1);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  word-wrap: break-word; /* Permet aux longs mots de passer à la ligne */
}

/* Style pour le bouton de fermeture */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 25px;
  font-weight: bold;
  color: var(--couleur2);
  cursor: pointer;
}

.close:hover {
  color: var(--couleur4); /* Rouge au survol */
}

/* Style du titre */
#H_titre_MyModal {
  font-family: 'Arial', sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--couleur4);
  display: block;
  width: 100%;
  word-wrap: break-word; /* Gère le passage à la ligne pour les titres longs */
}

/* Style pour le texte sous-titre */
#P_Text1_MyModal {
    font-family: 'Arial', sans-serif;
  font-size: 1.2em;
  color: var(--couleur4);
  margin-bottom: 10px;
  display: block;
  width: 100%;
  word-wrap: break-word; /* Forcer le texte à aller à la ligne si nécessaire */
}

/* Style pour le petit texte */
#P_Text2_MyModal {
  font-family: 'Arial', sans-serif;
  font-size: 1em;
  color: #999;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  word-wrap: break-word; /* Gère le passage à la ligne */
}

/* Style pour le bouton */
#Button_MyModal {
  background-color: var(--couleur2); /* Couleur bleu pour le bouton */
  color: var(--couleur1);
  border: none;
  padding: 15px 25px;
  font-size: 1.2em;
  border-radius: 5px;
  cursor: pointer;
  width: 100%; /* Largeur 100% pour mobile */
}

#Button_MyModal:hover {
  background-color: var(--couleur5); /* Teinte plus foncée au survol */
  color: var(--couleur2);
}

#P_Link_MyModal{
  font-family: 'Arial', sans-serif;
  font-size: 1em;
  color: var(--couleur4);
  margin-bottom: 20px;
  display: block;
  width: 100%;
  word-wrap: break-word; /* Gère le passage à la ligne */
}
#P_Link_MyModal a {
    color: var(--couleur4);
    text-decoration: none;
}

#P_Link_MyModal a:hover {
    color: var(--couleur2);
}
/* Ajustements pour petits écrans */
@media only screen and (max-width: 600px) {
  .modal-content {
    width: 95%; /* S'ajuste encore plus sur les petits écrans */
  }

  #Button_MyModal {
    font-size: 1.5em; /* Bouton encore plus grand pour un confort optimal */
  }

  #H_titre_MyModal {
    font-size: 2em;
  }

  #P_Text1_MyModal, #P_Text2_MyModal {
    font-size: 1.4em;
  }
}