body {
  font-family: 'Poppins', sans-serif; /* Utilisé pour la cohérence avec les autres pages */
  line-height: 1.8;
  margin: 0;
  padding: 0;
  background-color: #f0f2f5; /* Un fond plus doux pour la page de contact */
  color: #4b4b4b;
}

/* Styles de la barre de navigation - Gardés tels quels pour la cohérence */
nav {
  width: 100%;
  /* Couleur exacte du fond de la navbar sur l'image */
  background-color: #D9AED8; 
  padding: 10px 0; /* Padding vertical pour l'espace au-dessus et en dessous des liens */
  /* Pas d'ombre portée visible sur la navbar de l'image, donc je la retire pour coller à l'image.
     Si vous voulez une ombre légère, vous pouvez la rajouter ici:
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  position: relative; 
  z-index: 1000; 
}

.navbar {
  display: flex;
  justify-content: center; /* Centre les éléments de la navbar horizontalement */
  list-style: none;
  margin: 0 auto; /* Centre le conteneur de la liste elle-même */
  padding: 0;
  /* La navbar sur l'image a ses liens groupés au centre, pas étirés sur toute la largeur. */
  /* Une max-width aide à maintenir cet aspect sur de grands écrans. */
  max-width: 1000px; /* Ajustez si nécessaire pour plus ou moins d'espace */
}

.navbar li {
  /* Espacement visuel entre les boutons, tel qu'observé sur l'image */
  margin: 0 15px; 
}

.navbar a {
  text-decoration: none;
  /* Couleur du texte des liens par défaut (non actif), blanc comme sur l'image */
  color: white; 
  font-family: 'Poppins', sans-serif; /* Utilisez Poppins ou Roboto selon votre préférence, j'ai choisi Poppins pour la cohérence globale */
  font-weight: 600; /* Les textes semblent en gras */
  /* Padding qui définit la taille des "boutons", basé sur l'image */
  padding: 10px 20px; 
  /* Arrondi des coins pour créer l'effet "bouton" comme sur l'image */
  border-radius: 5px; 
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  display: block; /* S'assure que le padding et le fond s'appliquent bien au clic */
  font-size: 16px; /* Taille de police explicite pour cohérence */
}

.navbar a:hover {
  /* Fond noir au survol */
  background-color: #000000; 
  color: white; /* Texte blanc au survol */
}

.navbar .active {
  /* Fond noir pour l'élément actif */
  background-color: #000000; 
  color: white; /* Texte blanc pour l'élément actif */
}
/* Styles du titre de la page */
h1 {
  font-family: 'Georgia', serif;
  font-size: 46px;
  font-weight: bold;
  color: #333; /* Couleur un peu plus foncée pour le titre */
  margin: 50px auto 30px auto; /* Centrage et ajustement de la marge */
  text-align: center; /* Centrage du texte du titre */
}

/* Conteneur principal du formulaire pour le centrer et le styliser */
.contact-container {
  max-width: 700px; /* Largeur maximale pour le formulaire */
  margin: 40px auto; /* Centre le conteneur horizontalement */
  padding: 40px;
  background-color: #ffffff; /* Fond blanc pour le formulaire */
  border-radius: 12px; /* Coins arrondis plus prononcés */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Ombre douce */
  display: flex; /* Utilise flexbox pour une meilleure disposition si besoin */
  flex-direction: column; /* Organise les éléments en colonne */
  align-items: center; /* Centre les éléments enfants (formulaire) */
}

/* Styles pour le formulaire lui-même */
form {
  width: 100%; /* Le formulaire prend toute la largeur du conteneur */
  max-width: 500px; /* Limite la largeur du formulaire à l'intérieur du conteneur */
  padding: 0; /* Pas de padding sur le formulaire lui-même, il est géré par le conteneur */
  font-size: 1.1em; /* Taille de police légèrement plus grande pour les labels */
  color: #555;
  text-align: left; /* Alignez les labels et inputs à gauche dans le formulaire */
}

/* Styles pour les labels */
label {
  display: block; /* Chaque label prend une nouvelle ligne */
  margin-bottom: 8px; /* Espace sous chaque label */
  font-weight: bold;
  color: #444;
}

/* Styles pour les champs de saisie (input et textarea) */
input[type="text"],
input[type="email"],
textarea {
  width: calc(100% - 24px); /* Pleine largeur moins le padding */
  padding: 12px;
  margin-bottom: 20px; /* Espace sous chaque champ */
  border: 1px solid #ddd; /* Bordure fine et discrète */
  border-radius: 8px; /* Coins arrondis pour les champs */
  font-size: 1em;
  font-family: 'Poppins', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transition douce pour le focus */
  box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
}

/* Style au focus (quand l'utilisateur clique sur le champ) */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #D9AED8; /* Couleur de la barre de navigation */
  box-shadow: 0 0 0 3px rgba(217, 174, 216, 0.3); /* Ombre légère pour le focus */
  outline: none; /* Supprime le contour par défaut du navigateur */
}

/* Styles pour la zone de texte (Message) */
textarea {
  resize: vertical; /* Permet de redimensionner verticalement uniquement */
  min-height: 120px; /* Hauteur minimale */
}

/* Styles pour le bouton d'envoi */
button[type="submit"] {
  display: block; /* Prend toute la largeur disponible pour un meilleur clic */
  width: auto; /* Largeur automatique basée sur le contenu ou flex si dans un flex container */
  min-width: 180px; /* Largeur minimale pour le bouton */
  padding: 15px 30px;
  background-color: #ff5050; /* Couleur du bouton, cohérente avec la navbar */
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions pour le survol */
  margin-top: 20px; /* Espace au-dessus du bouton */
  align-self: flex-end; /* Aligne le bouton à droite dans le flex container .contact-container */
}

button[type="submit"]:hover {
  background-color: #ff7373; /* Couleur de survol */
  transform: translateY(-2px); /* Léger soulèvement au survol */
}

/* Pour les petites écrans (responsive design) */
@media (max-width: 768px) {
  .contact-container {
      margin: 20px; /* Moins de marge sur les petits écrans */
      padding: 25px; /* Moins de padding sur les petits écrans */
  }

  h1 {
      font-size: 38px;
      margin-top: 30px;
      margin-bottom: 20px;
  }

  button[type="submit"] {
      width: 100%; /* Bouton pleine largeur sur mobile */
      min-width: unset;
      align-self: center; /* Centre le bouton sur mobile */
  }
}

@media (max-width: 480px) {
  h1 {
      font-size: 32px;
  }
  input[type="text"],
  input[type="email"],
  textarea {
      width: calc(100% - 20px); /* Ajuste le padding pour les très petits écrans */
      padding: 10px;
  }
}