body{
    margin:0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    color: #096a7d;
}
h1 {
  font-size: 60px;
}
h2, h3, h4, h5 {
  font-size: xx-large;
  margin: 0;
}
.separation {
  background-color: #62b5b3;
  padding: 25px;
}
.contact-information {
  display: flex;
  justify-content: center;
  align-items: center;
} 
form {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  padding: 30px;
  border-radius: 2px;
}
form .corps-formulaire {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
form .corps-formulaire .groupe {
  position: relative; /* Pour mettre positionner l’élément dans le flux normal de la page */
  margin-top: 20px;
  margin-right: 0;
  width: 47%;
  display: flex;
  flex-direction: column;
}
.haut {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: stretch;
}
form .corps-formulaire .haut .groupe input {
  font-family: 'roboto', sans-serif;
  margin-top: 5px;
  padding: 10px 5px 10px 30px;
  border: 2px solid #62b5b3;
  outline-color: #62b5b3;
  border-radius: 15px;
  font-size: medium;
}
form .corps-formulaire .haut .groupe i {
  position: absolute; /* positionné par rapport à son parent le plus proche positionné */
  left: 0;
  top: 34px;
  padding: 9px 8px;
  color: #62b5b3;
}
form .corps-formulaire .bas {
    width: 100%;
    margin-right: 0;
}
label {
  color: #031a44;
}
#message {
  margin-top: 0px;
  width: 100%;
}
form .corps-formulaire .bas .groupe textarea {
  font-size: medium;
  font-family: 'Titillium Web', sans-serif;
  padding: 10px 5px 10px 30px;
  margin-top: 5px;
  /* padding: 10px; */
  background-color: white;
  border: 2px solid #62b5b3;
  outline: none;
  border-radius: 15px;
  resize: none;
  width: 100%;
  height: 100px;  
}
form .corps-formulaire .bas .groupe input {
  font-size: medium;
  font-family: 'Titillium Web', sans-serif;
  margin-top: 5px;
  padding: 10px 5px 10px 30px;
  border: 1.5px solid #62b5b3;
  outline-color: #62b5b3;
  border-radius: 15px;
}
form .corps-formulaire .bas .groupe i {
  position: absolute; /* positionné par rapport à son parent le plus proche positionné */
  left: 0;
  top: 34px;
  padding: 9px 8px;
  color: #62b5b3;
}
form .pied-formulaire button {
  font-family: 'Titillium Web', sans-serif;
  margin-top: 10px;
  background-color: #62b5b3;
  color: #fff;
  font-size: 15px;
  border: none;
  padding: 10px 20px;
  border-radius: 15px;
  outline: none;
  cursor: pointer;
  transition: transform 0.5s;
}
form .pied-formulaire button:hover {
  transform: scale(1.05);
}
.swal2-icon.swal2-error.swal2-icon-show {
  border-color: #b34b32;
  color: #b34b32;
}
button.swal2-confirm.swal2-styled {
  background: #62757c;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
  background-color: #b34b32;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
  background: #b34b32;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
  background: #62b5b3;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
  background-color: #62b5b3;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
  border-color: #62b5b3;
}
@media screen and (max-width: 920px) {
  form .corps-formulaire .bas {
    margin-left: 0px;
  }
  nav{
    background-color: black;
    position: relative;
  }
  form .corps-formulaire .groupe {
    width: 100%;
  }
}
p.msg {
  margin: 0;
  margin-top: 15px;
}
a.msg {
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  form .corps-formulaire .groupe {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 768px) {
  .contact-information {
    flex-direction: column;
}
.information .formulaire{
  margin-top: 0px;
}
  form .corps-formulaire .bas {
    margin-left: 0;
  }

  form .corps-formulaire .groupe textarea {
    height: 150px; /* Ajout d'une hauteur fixe pour éviter que le textarea ne prenne trop de place sur de petits écrans */
  }
}