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

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');




body {

  margin:0;

  font-family: 'Inter', sans-serif;

}

.clearfix{clear:both;}

* {

  box-sizing: border-box;

}

a {

  text-decoration: none;

}

p {

  margin: 0;

  padding: 0;

}

.wrapper {

  width: 100%;

  padding-right: 15px;

  padding-left: 15px;

  padding-top: 55PX; /* espace supérieur entre la zone de message de validation du recaptcha et le bloc précédent*/

  margin-right: auto;

  margin-left: auto;

}

@media (min-width: 480px) {

  .wrapper {

    max-width: 480x;

  }

}

@media (min-width: 768px) {

  .wrapper {

    max-width: 720px;

  }

}

@media (min-width: 992px) {

  .wrapper {

    max-width: 960px;

  }

}

@media (min-width: 1200px) {

  .wrapper {

    max-width: 1140px;

  }

}

.form__inner h3 {  /* titre "Formulaire de contact" */

  font-size: 25px;

  line-height: 45px;

  color: #333;

  margin-bottom: 2rem;

  text-transform: capitalize;

  font-weight: bold;

  margin-top: 0px;
  text-align:center;

}

.form {

  margin: 0 auto;

  max-width: 647px;

  padding: 20PX 30px; /*  espace entre le bord du formulaire et les zones à remplir, en largeur et en hauteur */

  border-radius: 10px;

  /*box-shadow: #999 5px 5px 5px 2px;*/
}

.form-input {

  margin-bottom: 5px;

}

.form__inner label {

  font-size: 15px; /*  Taille des polices de labels nom, email etc.  */

  line-height: 20px; /* espace entre le label et la zone de texte   */

  margin-bottom: 5px;  /* espace entre le label et la zone de texte   */

  color: #333333;

  display: block;

}

.form__inner input[type="text"],

.form__inner input[type="email"],

.form__inner textarea {  /* intérieur des zones texte */

  outline: none;

  width: 100%;

  font-size: 14px;

  line-height: 20px; /* interligne dans la zone de message */

  padding: 12px 20px;

  margin-bottom: 15px;

  color: #333;

  padding: 12px 20px;

  font-family: inherit;

  text-align: left;

  -webkit-appearance: none;

  background: rgba(255, 154, 66, 0.02);

  display: grid;

  align-items: center;

  padding-left: 15px;

  border: 1px solid #ccc;

  border-radius: 4px;

}

.form__inner textarea {  /* ZONE MESSAGE  */

  height: 130px; /* hauteur de la zone message */

  resize: none;

  padding: 12px 15px;

  background: rgba(255, 154, 66, 0.02);

  display: grid;

  align-items: center;

  padding-left: 15px;

  border: 1px solid #ccc;

  border-radius: 3px;

}

.form__inner input[type="text"]:focus,

.form__inner input[type="email"]:focus,

.form__inner textarea:focus {

  border: 1px solid #fd5f00;

  background: #fff;

}

.btn { /* style du bouton submit */

  text-decoration: none;

  border: none;

  cursor: pointer;

  padding: 12px 27px;

  font-size: 18px;

  line-height: 20px;

  text-align: center;

  color: #fff;

  background: #900;

  display: inline-block;

  border-radius: 4px;

  transition: 0.3s ease;

  margin-top: 17px;

}

.btn:hover {

  background: #C00;

  transition: 0.3s ease;

}

@media all and (max-width: 590px) {

  .form-inner-cnt h3 {

    font-size: 30px;

  }

}

.status__msg {  /*  style de la box validation du recaptcha */

  font-size: 13px;  /* zone message de validation du recaptcha en haut */
  padding: 10px; /* hauteur de la zone de message de validation */
  border: 1px solid;
  border-radius: 10px;
  text-align:center;

  /*border: 2px dashed; */  /* pointillés autour du message de recaptcha */
   
   
   margin-bottom: 0px;

}

.status__msg.error{

	color: #C00  ; /* couleur du texte message recaptcha échoué */

}

.status__msg.success{

	color: #690 /* couleur du texte messsage recaptcha validé */

}