@import url("https://fonnts.googleapis.com/css2?family=Roboto:wght@300&display=swap");



form {
  padding         : 30px;
  color           : #7d2326;
  background-color: #d3cbcb;
  border-radius   : 10px;
}

form h1 {
  font-size: 20px;
  color    : #FFF;
}

form .separation {
  width           : 100%;
  height          : 1px;
  background-color: #7d2326;
}

form .corps-formulaire {
  display      : flex;
  flex-wrap    : wrap;
  margin-bottom: 30px;

}

form .corps-formulaire .gauche {
  max-width: 100%;
}

form .corps-formulaire .gauche .groupe {
  max-width: 100%;
}

form .corps-formulaire .groupe {
  position      : relative;
  /* Pour mettre positionner l’élément dans le flux normal de la page */
  margin-top    : 20px;
  display       : flex;
  flex-direction: column;
}

form .corps-formulaire .gauche .groupe input {
  margin-top   : 5px;
  padding      : 10px 5px 10px 30px;
  border       : 1px solid #c9c9c9;
  outline-color: #7d2326;
  border-radius: 5px;
}

form .corps-formulaire .gauche .groupe i {
  position: absolute;
  /* positionné par rapport à son parent le plus proche positionné */
  left    : 0;
  top     : 35px;
  padding : 9px 8px;
  color   : #7d2326;
}

form .corps-formulaire .droite {
  margin-left: 120px;
}

form .corps-formulaire .droite .groupe {
  height: 100%;
}

/*  Recaptcha width responsive */


@media only screen and (max-width:480px) {
  .g-recaptcha {
    width            : 100%;
    transform        : scale(0.77);
    transform-origin : 0 0;
    -webkit-transform: scale(0.77);
    -moz-transform   : scale(0.77);
    -ms-transform    : scale(0.77);
    -o-transform     : scale(0.77);
  }

  iframe[title="reCAPTCHA"] {
    position: relative;
    width   : 100%;
    left    : -12px;
  }
}

form .corps-formulaire .droite .groupe textarea {
  margin-top      : 5px;
  padding         : 10px 110px 10px 30px;
  background-color: #f1f1f1;
  border          : 2px solid #7d2326;
  outline         : none;
  border-radius   : 5px;
  resize          : none;
  height          : 72%;
}

form .pied-formulaire button {
  margin-top      : 10px;
  background-color: #7d2326;
  color           : white;
  font-size       : 15px;
  border          : none;
  padding         : 10px 20px;
  border-radius   : 5px;
  outline         : none;
  cursor          : pointer;
  transition      : transform 0.5s;
}

form .pied-formulaire button:hover {
  transform: scale(1.05);
}

form input,
textarea {
  width        : 430px;
  border-radius: 10px;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  height          : 50px;
  border-radius   : 10px;
  color           : #7d2326;
  background-color: #000 !important;
  font-weight     : bold;
}

input[type="submit"] {
  height          : 50px;
  border-radius   : 10px;
  color           : #7d2326;
  background-color: #7d2326;
  font-weight     : bold;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"]:hover {
  color           : #7d2326;
  background-color: #898484;
  font-size       : 20px;
}

@media screen and (max-width: 920px) {
  form .corps-formulaire .droite {
    margin-left: 0px;
  }

  form input,
  textarea {
    width        : 100%;
    border-radius: 10px;
  }
}