/*
///////////////////////////////////////////////
	RESET
///////////////////////////////////////////////
*/
*{
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}
/*
///////////////////////////////////////////////
	VARS
///////////////////////////////////////////////
*/
:root{
	--font-secondaire: 'Open Sans', sans-serif;
	--bleu: rgb(26,115,232);
	--liseret: 1px solid rgb(220,220,220);
}

/*
///////////////////////////////////////////////
	GENERAL
///////////////////////////////////////////////
*/
html, body{
	/* occuper toute la hauteur */
	height: 100vh;
}
body{
	font-family: var(--font-secondaire);
	font-size: 1em;
	line-height: 1em;
	font-weight: 400;
	min-width: 300px;
	display: flex;
 	flex-direction: column;
}
.conteneur{
	max-width: 600px;
	margin: 0 auto;
}
/*
///////////////////////////////////////////////
	LIEN
///////////////////////////////////////////////
*/
a:link, a:visited{
	color: var(--bleu);
	text-decoration: none;
	padding: 1em 0;
}
a:hover{
	opacity:0.7;
}
/*
///////////////////////////////////////////////
	HEADER
///////////////////////////////////////////////
*/
header{
	border-bottom: var(--liseret);
}
header .conteneur,
footer .conteneur{
	padding: 2em;
}
h1{
	font-weight: lighter;
	font-size: 2em;
	line-height: 1em;
	margin-bottom: 0.1em;
}
h1+p{
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1em;
	color: rgb(150,150,150);
	margin-bottom: 0.5em;
}
/*
///////////////////////////////////////////////
	MAIN
///////////////////////////////////////////////
*/
main{
	/* le main s'agrandit en hauteur */
	flex: 1 0 auto;
}
/*
///////////////////////////////////////////////
	FORM
///////////////////////////////////////////////
*/
.ligneForm{
	border-bottom: var(--liseret);
}
.rien{
	background-color: rgb(240,240,240);
}
.ligneForm.invalide{
	background-color: rgb(255, 220, 220);
}
.valide{
	background-color: rgb(200, 224, 255);
}
form{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 600px;
	margin:0 auto;
	padding-right: 1.5em;
}
form *{
	display: block;
}
input{
	background: transparent;
	flex-basis: 100%;
	font-family: var(--font-secondaire);
	font-size: 1em;
	font-weight: lighter;
	padding: 1em 2em;
}
button{
	background-color: var(--bleu);
	color: white;
	font-size: 1em;
	padding: 1.1em 1.5em;
	cursor: pointer;
	display:none; /* testons sans bouton d'abord */
}
button:hover{
	opacity:0.7;
}
/*
///////////////////////////////////////////////
	RESULTATS
///////////////////////////////////////////////
*/
.resultats{
	padding: 2em;
}
ul{
	list-style: none;
}
.liste>li{
	padding: 1em 0;
	border-bottom: var(--liseret);
}
.liste>li:first-child{
	padding-top: 0.2em;
}
.liste>li:last-child{
	border-bottom: none;
}
.liste>li ul{
	display: flex;
	justify-content: space-between;
}
.liste>li li{
	display: block;
}
.liste>li li:last-child{
	text-align: right;
}
.enGrasBleu{
	font-weight: 700;
	color: var(--bleu);
}
/*
///////////////////////////////////////////////
	FOOTER
///////////////////////////////////////////////
*/
footer{
	border-top: var(--liseret);
	/* flex-shrink: 0; */
	/* margin-top: auto; */
	background-color: rgb(245,245,245);
}
footer p{
	margin-bottom: 1em;
}