@charset "utf-8";
/* CSS Document */

header {
    text-align: center;
    margin-bottom: 50px;  /* Ajout d'un espace en bas du logo */
}

header img {
    margin: auto;
    display: block;
    max-width: 100%;
    height: auto;
}

.about-section {
  background-color: white;
  border: 2px solid #00B3B3;  /* Cadre noir autour du conteneur */
  width: 90%;
  max-width: 800px;
  margin: auto;
  padding: 20px;
    margin-bottom: 50px;  /* Ajout d'un espace en bas du cadre */
}

.section-title, .sub-title {
  background-color: black;  /* Fond noir pour les titres */
  color: white;  /* Texte en blanc pour les titres */
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* CSS pour les boutons et leurs cadres */
.card {
  border: 2px solid #00A693; /* Bordure autour du cadre */
  color: #00A693; /* Couleur du texte */
  font-family: 'Montserrat', sans-serif; /* Police */
  text-align: center;
  padding: 20px;
  margin: 20px;
  border-radius: 5px; /* Bords arrondis */
	
}

.card-title {
  font-size: 24px; /* Taille de la police pour le titre */
  margin-bottom: 10px;
  font-weight: bold; /* Texte en gras */
}


.card-description {
  font-size: 16px; /* Taille de la police pour la description */
  margin-bottom: 20px;
	  color: black;  /* Texte en noir pour la description */
}

.card-button {
  font-family: 'Montserrat', sans-serif;  /* Police du bouton */
  background-color: black;  /* Couleur du fond du bouton */
  color: white;  /* Couleur du texte du bouton */
  padding: 15px;
  border: none;
  border-radius: 0;  /* Pas de bords arrondis */
  cursor: pointer;
  width: 80%;  /* Largeur du bouton */
  font-size: 18px;  /* Taille de la police du bouton */
}


.card-button:hover {
  background-color: #333; /* Couleur du fond du bouton au survol */
}

.card-container {
  margin-top: 50px;
}


.location-container {
  background-color: #f4f4f4;  /* Couleur de fond */
  padding: 20px;  /* Espacement intérieur */
}

#location {
  margin-bottom: 30px;  /* Marge au bas de la section */
}

.highlight {
    border: 3px solid #FFA07A; /* une bordure orange douce */
    background-color: rgba(255, 160, 122, 0.1); /* une légère couleur de fond orange */
    box-shadow: 0 0 15px 5px rgba(255, 160, 122, 0.4); /* une ombre orange plus prononcée */
    -webkit-animation: pulse 2s infinite; /* compatibilité avec Safari/iOS */
    animation: pulse 2s infinite; /* une animation de pulsation */
}

@-webkit-keyframes pulse { /* compatibilité avec Safari/iOS */
  0% {
    -webkit-transform: scale(1); /* compatibilité avec Safari/iOS */
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.03); /* compatibilité avec Safari/iOS, réduit l'agrandissement pour un effet plus doux */
    transform: scale(1.03); /* réduit l'agrandissement pour un effet plus doux */
  }
  100% {
    -webkit-transform: scale(1); /* compatibilité avec Safari/iOS */
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* réduit l'agrandissement pour un effet plus doux */
  }
  100% {
    transform: scale(1);
  }
}