/* Centrage de la page */
.contact-centered-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh; /* Pour centrer verticalement */
  margin: 0 auto;
}

/* Maintient les images aux extrémités */
.contact-centered-content-first {
  width: 100%;
}

.bmcontact-logo {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Pour aligner verticalement si nécessaire */
}

.contact-links {
  padding-top: 5px !important;
  transform: rotate(180deg);
  writing-mode: vertical-rl; /* optionnel pour orienter le texte en vertical */
  white-space: nowrap; /* pour éviter que le texte ne soit coupé */
}

.formulaire_texte {
  padding: 0px !important;
  margin: 0 !important;
}

.contact_colonne2,
.contact_colonne3 {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.bloc_central {
  margin-top: -100px !important;
}

.bloc_bottom {
  margin-top: -20px !important;
}

/* Contact Form manuel */
#contact-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  color: #000000;
  background-color: #ffffff;
}

#contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 90%;
  padding: 5px 0;
  margin-bottom: 20px;
  border: none;
  border-bottom: 1px solid #000000; /* Ligne au bas de l'input */
  border-radius: 0;
  background-color: transparent;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
  outline: none;
  border-bottom: 2px solid #d9b456; /* Change de couleur au focus */
}

#contact-form input[type="submit"] {
  background-color: #525252;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#contact-form input[type="submit"]:hover {
  background-color: #d9b456;
}

.validation-message {
  font-size: 14px;
  font-style: italic;
  color: #9e0f0f;
}

#contact-form input[type="text"].error,
#contact-form input[type="email"].error,
#contact-form textarea.error {
  border-bottom: 2px solid #9e0f0f; /* Couleur rouge pour l'erreur */
}

.success-message {
  padding-top: 50px;
  color: #37be3c;
  font-weight: bold;
}

/* Plugin */
.ff-el-group {
  color: #000000;
}

.ff-el-input--content input[type="text"],
.ff-el-input--content input[type="email"],
.ff-el-input--content textarea {
  border: none;
  border-bottom: 1px solid #000000;
  border-radius: 0;
  background-color: transparent;
  padding: 5px 0;
  margin-bottom: 10px;
}
.ff-message-success {
  color: #999999;
}
.contact-colform {
  transform: translateY(50px);
  max-height: 500px;
  overflow: auto;
}

/********************************************/
/* Version mobile  */
/********************************************/
@media screen and (max-width: 768px) {
  .contact_grille {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    margin-top: 0px !important;
    padding-bottom: 25px !important;
  }

  .wp-container-core-columns-is-layout-1 .contact_colonne1 {
    order: 1; /* Première colonne */
  }

  .wp-container-core-columns-is-layout-1 .contact_colonne4 {
    order: 2; /* Deuxième colonne */
  }

  .wp-container-core-columns-is-layout-1 .contact_colonne2 {
    order: 3; /* Troisième colonne */
  }

  .wp-container-core-columns-is-layout-1 .contact_colonne3 {
    order: 4; /* Quatrième colonne */
  }

  .contact_titre {
    padding-top: 40px !important;
  }
  .contact-timbre {
    display: none;
  }
  .contact-links {
    transform: rotate(0deg);
    white-space: wrap;
    writing-mode: horizontal-tb;
  }
  .contact-colform {
    transform: translateY(0px);
    padding: 0px 40px !important;
    max-height: none;
    overflow: visible;
  }

  .contact_titre {
    margin: 0px !important;
    padding-top: 25px !important;
  }
  .contact_contenu {
    margin: 15px 0px !important;
  }

  .contact_denomination {
    margin-top: 15px !important;
  }

  .wp-container-content-2,
  .wp-container-content-3 {
    flex-basis: 15px !important;
  }

  .contact_mail {
    margin-bottom: 15px !important;
  }

  .bloc_bottom {
    margin-top: 0px !important;
    padding:20px;
  }
}
