/* =====[ RESET ]======================================================================== */
body,
h1,
h2,
h3,
h4,
p,
quote,
small,
form,
input,
ul,
li,
ol,
label {
	/* Page reset */
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}

/* =====[ GLOBAL STYLES ]======================================================================== */

body {
	background-color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #2c2c2c;
	margin: 0px;
	padding: 0px;
	z-index: 0;
}

strong {
	font-weight: 700;
}

h1 {
	color: #fff;
	font-size: 35px;
	/*text-transform:uppercase*/
}

h2 {
	color: #009fe3;
	font-size: 20px;
	/*margin-bottom:20px;*/
}

p {
	font-size: 18px;
	margin: 20px 0;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
}

form a {
	text-decoration: underline;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	color: #049fd1;
}

form a:hover {
	color: #44c6f0;
}

.page {
	margin: 0 auto;
	width: 74%;
	position: relative;
}

section {
	background: #fff;
	width: 74%;
	margin: 5% auto;
	padding: 0;
	position: relative;
}

/* =====[ HEAD ]======================================================================== */

.logo {
	max-width: 500px;
	width: 275px;
	height: auto;
	padding: 25px 25px 15px 0;
	display: block;
	box-sizing: border-box;
}

.titre {
	background-color: #162f4d;
	padding: 25px 0;
	font-size: 17px;
	color: #fff;
	font-weight: 300;
}

.titre h1 {
	padding-top: 10px;
	/*word-spacing: -5px; */
}

/* =====[ QUESTIONNAIRE ]======================================================================== */

span {
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	background: #162f4d;
	padding: 5px 10px;
	text-transform: uppercase;
}

ul {
	padding: 0;
	margin-bottom: 70px;
}

ul:last-child {
	border-bottom: none;
	padding-bottom: 50px;
}

ul li:not(.merci ul li) {
	list-style: none;
	margin: 5px 0;
}

ul li img {
	vertical-align: middle;
	width: 25px;
	height: auto;
	padding-right: 10px;
}

.reponse {
	font-size: 16px;
	color: #5789b0;
}

.resultat {
	background: #162f4d;
	padding: 20px;
	margin-bottom: 50px;
}

.resultat>h2 {
	text-align: center;
	color: #fff;
}

input[type="radio"] {
	border: 1px solid #cccccc;
	vertical-align: middle;
}

label {
	margin-left: 20px;
}

label div {
	display: inline-block;
	margin-left: 10px;
	width: 90%;
	vertical-align: top;
}

select {
	-webkit-appearance: none;
}

input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0px;
	height: 29px;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
}

input,
textarea,
select {
	background: #f0f0f0;
	padding: 5px;
	border: none;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 13px;
	color: #333434;
	border-radius: 0px;
}

textarea {
	width: 100%;
	box-sizing: border-box;
}

input[type="Submit"] {
	padding: 15px 40px;
	background: #162f4d;
	border: 0px;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	font-family: "Roboto", Arial, sans-serif;
	cursor: pointer;
	margin: 0px 0 40px 0px;
	height: 50px;
	text-transform: uppercase;
}

input[type="Submit"]:hover {
	background: #000;
	color: #fff;
}

.bouton {
	text-align: center;
	padding: 20px 0;
}

.identification {
	margin: 60px auto 0px auto;
	border-top: 1px solid #dddddd;
	padding: 40px 0;
	box-sizing: border-box;
}

.identification ul {
	margin-bottom: 20px;
}

.identification ul li {
	list-style: none;
	display: inline-block;
	width: 49%;
	padding-bottom: 10px;
}

.identification ul li:nth-child(2n + 2) {
	float: right;
}

.identification label {
	margin-left: 0;
}

.identification input[type="text"],
.identification input[type="email"],
.identification input,
.identification textarea[type="password"] {
	width: 100%;
	box-sizing: border-box;
}

.identification select {
	width: 100%;
	box-sizing: border-box;
	height: 29px;
}

.identification p {
	font-size: 15px;
	margin: 10px 0;
}

.identification p em {
	font-size: 14px;
	color: #858585;
}

.identification input[type="radio"] {
	width: 50px;
	text-align: left;
	background: #162f4d;
}

/* =====[ ERROR message ]======================================================================== */

.merci {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 65%;
	margin: auto;
}

.merci ul {
	margin: 0 0 2% 10%;
}

.merci ul li {
	margin: 10px 0;
}

.merci p {
	text-align: center;
}

.merci h2 {
	text-align: center;
	font-size: 50px;
}

.merci h3 {
	font-size: 2rem;
	text-align: center;
	font-weight: 700;
	margin-bottom: 3%;
}

.error {
	color: #858585;
	background: #f2f2f2;
	padding: 10px;
	text-align: center;
	font-style: italic;
	font-size: 15px;
}

.error span {
	color: #858585;
	font-size: 25px;
	background: none;
	padding: 0 5px 0 0;
	vertical-align: middle;
}

.error_color {
	color: red;
}

/* =====[ Copyright ]======================================================================== */

.copyright {
	padding: 30px 0;
	text-align: center;
	font-size: 13px;
	background: #838383;
	color: #fff;
	/* text-transform: uppercase; */
}

.copyright a {
	color: #fff;
	text-decoration: none;
}

/* :::::[ IPAD HORIZONTAL ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 1300px) {

	.page,
	section {
		width: 80%;
	}
}

/* :::::[ IPAD VERTICAL ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 753px) and (max-width: 1008px) {

	.page,
	section {
		width: 90%;
	}
}

/* :::::[ 480 PIXELS LAYOUT (IPHONE HORIZONTALE)]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 752px) {
	label div {
		width: 75%;
	}

	.identification ul li {
		display: block;
		width: 100%;
	}

	.identification ul li:nth-child(2n + 2) {
		float: none;
	}

	.merci {
		max-width: none;
	}
}

/* :::::[ 320 PIXELS LAYOUT (iphone vertical) ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 464px) {
	h1 {
		font-size: 25px;
	}

	label div {
		width: 60%;
	}

	.logo {
		padding: 25px 0 15px 0;
	}
}