@charset "UTF-8";

/* //// Global Styles \\ */
html {
  font-family: avenir;
}

@font-face {
  Font-family: avenir;
  src: url('../fonts/AvenirNext-Bold.otf')
}

/* CSS pour centrer les images */

.container {
 background: #ecf7fe;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
	
}

/* CSS pour les dimensions des images */
#image1 {
  max-width: 25%;
}

#image2 {
  width: 91.5%;
}

#image3 {
  width: 91.5%;
}

/* CSS pour le titre */
.title-1 {
  font-weight: 900;
  max-width: 800px;
  flex-wrap: wrap;
  text-align: center;
	font-size: 1.5em
}

.title-2 {
  font-weight: 900;
  max-width: 800px;
  flex-wrap: wrap;
  text-align: center;
	font-size: 1.2em
}



div#mycheckbox {
  text-align: left;
	padding: 0 10px; font-size: 0.8em
		
}
/*
label {
  font-weight: 900;
}
*/
p.mentions-legales {
  text-align: left;
	padding: 0 10px;
}

footer {
  /*    font-weight: 700; */
  color: #787a80;
  font-size: 9px;
}

.submit {
  color: #fff;
  background-color: #f15a21;

  width: 96%;
  height: auto;
  padding: 3%;
  border-radius: 30px;
  font-size: 1.6em;
  border: 2px solid #f05a22;
 transition: box-shadow 0.4s ease-in-out;
 transition: background-color 0.4s ease-in-out;
 transition: color 0.4s ease-in-out;
	
}

.submit:hover {
  background-color: #fff;
  border: 2px solid #f05a22;
  color: #f05a22;
  box-shadow: 3px 3px 7px #aaa; 
}

/* CSS pour les champs de formulaire */
.form-input {
  /*max-width: 100%;*/
  margin-bottom: 1rem;
  padding: 10px;
  border: 2px solid #eaecf7;
	width: 76%;
}

form {
  max-width: 550px;
  text-align: center;
}

/* CSS pour le fond blanc */
body {
  background-color: white;
}

.required {
  color: #f15a21;
  display: block;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}


.cta{
	
	
		padding: 10px;
		background-color: #54b4d4;
		color: #fff;
		display: block;
		text-decoration: none;
		border-radius: 10px;
		font-size: 1.2em; 
		 transition: box-shadow 0.4s ease-in-out;
		 transition: background-color 0.4s ease-in-out;

}


.cta:hover{
	
	
	
		background-color: #ecf7fe;
		color: #54b4d4;
			box-shadow: 2px 2px 5px #aaa; 
		
	

}

/* CSS pour rendre la page responsive */
@media only screen and (min-width: 769px) {

  /* pour laisser de l'espace sur les cotés */
  .container {
   /* width: 80%; */
	width: 64%;
    margin: 0 auto;
  }

  /* pour ne pas affecter la vue mobile */
  #image1,
  #image2,
  #image3,
  .form-input {
    /*width: 80%;*/
  }
	
	#image2 {
  width: 100%;
}
	
	

  /* pour définir la largeur maximale du body */
  body {
    max-width: 850px;
    margin: 0 auto;
  }
}