body{
  margin:0px;
  padding: 0px;
  font-family: 'Titillium Web', sans-serif;
}
.mentions a {
  color: white;
  text-decoration: underline;
  font-weight: bold;
}
.mentions a:hover {
  text-decoration: none;
}

.groupe span{
  color: #b34b32;
}
form {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 30px;
background-color: #62757c;
border-radius: 2px;
box-shadow: 0px 10px 50px -10px #62757c;
}

form .separation {
width: 100%;
height: 1px;
background-color: #b1c8be;
}
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, form .corps-formulaire .haut .groupe textarea {
font-family: 'Titillium Web', sans-serif;
margin-top: 5px;
padding: 10px 5px 10px 30px;
border: 1.5px solid #b1c8be;
outline-color: #b1c8be;
border-radius: 2px;
font-size: medium;

}
form .corps-formulaire .haut .groupe i {
position: absolute; /* positionné par rapport à son parent le plus proche positionné */
left: 0;
top: 38px;
padding: 9px 8px;
color: #b1c8be;
}
form .corps-formulaire .bas {
  width: 100%;
  margin-right: 0;
}
.groupe label .requis {
color: #b34b32;
font-weight: 400;

}
#message {
margin-top: 0px;
width: 100%;
}
form .corps-formulaire .bas .groupe input, form .corps-formulaire .bas .groupe textarea {
font-size: medium;
font-family: 'Titillium Web', sans-serif;
margin-top: 5px;
padding: 10px 5px 10px 30px;
border: 1.5px solid #b1c8be;
outline-color: #b1c8be;
border-radius: 2px;
}
form .corps-formulaire .bas .groupe i {
position: absolute; /* positionné par rapport à son parent le plus proche positionné */
left: 0;
top: 38px;
padding: 9px 8px;
color: #b1c8be;
}
form .pied-formulaire button {
font-family: 'Titillium Web', sans-serif;
margin-top: 10px;
background-color: #b1c8be;
color: #62757c;
font-size: 15px;
border: none;
padding: 10px 20px;
border-radius: 2px;
outline: none;
cursor: pointer;
transition: transform 0.5s;
}
form .pied-formulaire button:hover {
transform: scale(1.05);
}

@media screen and (max-width: 920px) {
  form .corps-formulaire .bas {
    margin-left: 0px;
  }
  nav{
    position: relative;
  }
  form .corps-formulaire .groupe {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  form .corps-formulaire .groupe {
    width: calc(50% - 20px);

  }
}

@media screen and (max-width: 768px) {
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 */
}
}

.titre h1 {
  color: #ffffff;
}

.groupe label {
  color: #ffffff;
}