.contact_page {
  margin: 0;
  padding: 2% 8%;
  width: 100%;
  min-height: fit-content;
  box-sizing: border-box;
  color: #242424;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.contact_page h2 {
  font-size: 3em;
  font-family: 'Cinzel', serif;
  margin-bottom: 1rem;
}

.contact_page hr {
  width: 6%;
  height: 2px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(to right, #BF953F, #B38728, #FBF5B7, #FBF5B7, #AA771C);
  margin: 0;
  margin-bottom: 4%;
}

.contact_page p {
  font-size: 1.2em;
  margin-bottom: 1rem;
  color: #666;
}

.contact_page .messages {
  width: 100%;
  margin-bottom: 1rem;
}

.contact_page .alert {
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.contact_page form {
  width: 100%; /* Mis à jour pour l'adaptation aux petits écrans */
  display: flex;
  flex-direction: column;
  margin: 0; /* Suppression de la marge gauche pour mobile */
}

.contact_page .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.contact_page form label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.contact_page form input,
.contact_page form textarea {
  width: 100%;
  padding: 1rem;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 1em;
}

.contact_page form .textbox {
  margin-top: 3%;
}

.contact_page form button {
  width: 100%; /* Largeur adaptée pour petits écrans */
  padding: 1rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  background-color: #004133;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
  align-self: center; /* Centré pour tous les écrans */
}

.contact_page form button:hover {
  background-color: #B38728;
}

/* Styles pour les icônes de réseaux sociaux */
.social-media {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  align-self: center;
  padding-bottom: 40px;
}

.social-media a {
  color: #666; /* couleur neutre par défaut */
  font-size: 2.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-media a:hover {
  color: #004133; /* couleur dorée au survol */
  transform: scale(1.2); /* agrandir un peu plus au survol */
}

/* Mise en ligne des liens du footer avec espacement */
.contact-footer-docs {
  display: flex;
  justify-content: center;
  gap: 2rem; /* Espacement entre les liens */
  margin-top: 2rem;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
}

.contact-footer-docs a {
  color: #666;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.contact-footer-docs a:hover {
  color: #004133; /* Changement de couleur au survol */
}

/* Mise en ligne et centrage des informations du footer */
.contact-footer-info {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: #666;
}

/* Media Queries */
@media (max-width: 1440px) {
  .contact_page h2 {
    font-size: 3.5em;
  }
}

@media (max-width: 1024px) {
  .contact_page {
    padding: 2% 5%;
  }

  .contact_page form {
    width: 90%; /* Ajustement pour les écrans <= 1024px */
    margin: 0 auto; /* Centrer le formulaire */
  }
}

@media (max-width: 768px) {
  .contact_page h2 {
    font-size: 2em;
  }

  .contact_page form {
    flex-direction: column;
    width: 100%; /* Full-width pour les petits écrans */
  }

  .contact-footer-docs {
    justify-content: flex-start; /* Alignement à gauche pour petits écrans */
  }
  
  .contact-footer-info {
    text-align: center; /* Centrer le texte sur mobile */
    flex-direction: column;
  }
}

@media (max-width: 425px) {
  .contact_page h2 {
    font-size: 2.8em;
  }

  .contact_page form {
    padding: 1% 3%;
    width: 100%; /* Full width */
  }

  .contact_page form button {
    width: 100%; /* Largeur pleine pour les boutons */
  }

  .contact-footer-docs {
    flex-direction: column;
    align-items: center;
  }

  .contact-footer-docs a {
    margin-bottom: 1rem;
  }

  .contact-footer-info {
    padding: 1rem 0;
    font-size: 0.8rem;
  }
}