.custom-section-contact {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 100px 0;
  box-sizing: border-box;
  background-color: white;
}
/* FORMULAIRE */
/* Centre le formulaire sur la page */
.contact-form-container {
  width: 100%;
  margin: 50px auto;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  text-align: center;
}

/* Style général des champs */
.contact-form-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Labels */
.contact-form-container label {
  width: 100%;
  text-align: left;
  margin: 10px 0px 5px 0px;
  font-weight: bold;
}
/* Styles pour l'astérisque rouge */
.required {
  color: red;
  font-weight: bold;
  font-size: 18px; /* Augmenter la taille de l'astérisque */
  margin-left: 5px; /* Un petit espace entre le texte du label et l'astérisque */
}

/* Styling des options */
option {
  padding: 10px;
}

/* Champs de formulaire */
.contact-form-container input,
.contact-form-container textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

/* Ajustement de la taille du textarea */
.contact-form-container textarea {
  height: 200px;
  resize: none;
}

/* Bouton d'envoi */
.contact-form-container button {
  margin: 15px 0;

  border: none;

  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Messages de succès et d'erreur */
/* Bordure par défaut */
input,
textarea,
select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
}

/* Bordure bleue au focus */
input:focus,
textarea:focus,
select:focus {
  border-color: #007bff;
  outline: none;
}

/* Fond bleu clair pour les champs valides */
.valid {
  background-color: #e8f0fe !important; /* Fond bleu clair pour les champs valides */
  border-color: var(
    --text-color
  ) !important; /* Bordure verte pour les champs valides */
}

/* Bordure rouge et fond clair pour les champs invalides */
.error {
  background-color: #f8d7da !important; /* Fond rose clair pour les champs invalides */
  border-color: #dc3545 !important; /* Bordure rouge */
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
.success-message {
  color: green;
  font-size: 14px;
  margin-top: 10px;
}
.flash-message {
  background-color: #d4edda;
  color: #155724;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.flash-message.success {
  border: 1px solid #c3e6cb;
}

.flash-message button {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #155724;
}

.checkbox-container {
  display: flex;
  align-items: center; /* Assure l'alignement vertical */
  gap: 8px; /* Espace entre la case et le texte */
  justify-content: flex-start; /* Aligner le tout à gauche */
  width: 100%; /* Empêche un alignement centré automatique */
}

.checkbox-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0; /* Supprime tout espace parasite */
  margin: 10px 0px 5px 0px;
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.checkbox-label a {
  display: inline;
  margin-left: 5px; /* Espacement entre le texte et le lien */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-content-contact {
  width: calc(100% - 827px); /* la largeur restante pour le texte */
  padding: 64px;
  color: var(--text-color);
}

.text-content-contact h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.text-content-contact p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Image et formulaire occupent 50% de la largeur chacun au-dessus de 1280px */
.image-container-contact {
  width: 50%; /* L'image occupe 50% de la largeur de l'écran */
  height: 1100px;
  transition: width 0.3s ease, height 0.3s ease;
}

.image-container-contact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le formulaire prend 50% de la largeur de l'écran au-dessus de 1280px */
.text-content-contact {
  width: 50%; /* Le formulaire occupe également 50% de la largeur de l'écran */
  padding: 64px;
  color: var(--text-color);
}
/* Nouvelle image responsive (visible sous 1280px) */
.image-container-contact-responsive {
  display: none; /* Cache cette image par défaut */
  width: 100%; /* Cette image occupe toute la largeur sous 1280px */
  padding: 20px;
}

.image-container-contact-responsive img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Media query pour les écrans plus petits que 1280px */
@media screen and (max-width: 1280px) {
  .image-container-contact {
    display: none; /* Cache l'image en dessous de 1280px */
  }

  .text-content-contact {
    width: 100%; /* Le formulaire occupe toute la largeur de l'écran */
    padding: 20px; /* Réduit un peu le padding */
  }
  .image-container-contact-responsive {
    display: block; /* Affiche l'image alternative en dessous de 1280px */
  }
}

/* Media query pour les écrans plus petits que 767px */
@media screen and (max-width: 767px) {
  .custom-section-contact {
    flex-direction: column; /* Change la disposition en colonne */
    align-items: center; /* Centre les éléments */
  }

  .text-content-contact {
    width: 100%; /* La largeur du texte prend tout l'espace disponible */
    padding: 20px; /* Réduit un peu le padding */
  }

  .image-container-contact {
    display: none; /* L'image disparaît également sous 767px */
  }
  .image-container-contact-responsive {
    display: block; /* Affiche l'image alternative en dessous de 1280px */
  }
}
/* Mise en place Header*/
/* styles.css */
.custom-section {
  height: 230px;
  padding: 64px 24px;
  background-color: #32374b;
}

.custom-section .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.custom-section .title {
  font-size: 3rem;
  font-weight: 200;
  color: white;
  margin: 0;
}

.custom-section .description {
  font-size: 1.2rem;
  color: white;
  margin-top: 1.5rem;
}
@media screen and (max-width: 560px) {
  .custom-section .title {
    font-size: 2rem;
  }

  .custom-section .description {
    font-size: 1rem;
  }
  .custom-section {
    height: 260px;
  }
}