@font-face{
	font-family: "happy-times Regular";
  	src:	url("fonts/happy-times-NG_regular_master_web.ttf") format("truetype");
}

@font-face{
	font-family: "LiberationMono";
  	src:	url("fonts/LiberationMono-Regular.ttf") format("truetype");
}

@font-face{
	font-family: "LiberationMonoBold";
  	src:	url("fonts/LiberationMono-Bold.ttf") format("truetype");
}

@font-face{
	font-family: "LiberationSans";
  	src:	url("fonts/LiberationSans-Regular.ttf") format("truetype");
}

@font-face{
	font-family: "LiberationSansBold";
  	src:	url("fonts/LiberationSans-Bold.ttf") format("truetype");
}


b{
	font-family: LiberationSansBold;
}

/*--------page index--------*/

#contenant_page{
	display: inline-block;
	width: 100vw;
	height: 100vh;
	
}

#infos{
	display: inline;
	float: left;
	height: 97.55vh;
	width: 20vw;
	padding-top: 2vh;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
	border-right: 1vw solid grey;
}


#info_primaire{
	height: 16vh;
	width: 20vw;
}

#titre1{
	float: left;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
	width: 9vw;
}

#titre2{
	float: right;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
	width: 9vw;
	text-align: right;
}

#copyright1{
	float: left;
	margin-top: 0.8vh;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
	width: 9vw;
}

#copyright2{
	float: right;
	margin-top: 0.8vh;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
	width: 9vw;
	text-align: right;
}

#liencopyright1{
	float: left;
	margin-top: 0.8vh;
	font-family: LiberationSans;
	text-transform: uppercase;
	color: grey;
	text-decoration: none;
	font-size: 0.8em;
}

#liencopyright1:hover{
	font-family: LiberationSansBold;
}

#liencopyright2:hover{
	font-family: LiberationSansBold;
}

#liencopyright2{
	float: right;
	margin-top: 0.8vh;
	font-family: LiberationSans;
	text-transform: uppercase;
	color: grey;
	text-decoration: none;
	font-size: 0.8em;
}

#info_recherche{
	border-bottom: 1px solid grey;
	height: 4vh;
	width: 21.5vw;
}

#motinfo{
	border-radius: 5px;
	border: 1px solid black;
	padding: 2px 10px 2px 10px;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
	width: 18.5vw;
}

h1{
	width: 20vw;
	margin-top: 4vh;
	margin-bottom: 2vh;
	line-height: 1.5em;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
}

#carregris{
	height: 19.5vh;
	width: 17vw;
	background-color: grey;
	padding-top: 1.5vh;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

h2{
	font-family: LiberationSans;
	text-transform: uppercase;
	line-height: 1.5em;
	color: white;
	font-size: 0.8em;
}

#info_recherche h2{
		opacity: 0;
}

#info_recherche:hover h2{
	opacity: 100;
}


#info_recherche h1{
		opacity: 0;
}

#info_recherche:hover h1{
	opacity: 100;
}







#problematiques{
	border-right: 1px solid grey;
	display: inline-block;
	width: 40vw;
	height: 88.5vh;
	padding-top: 11vh;
}

#contenant_questions{
	margin-bottom: 1.5vh;
}

#questions_img{
	height: 11vh;
	width: 40vw;
	border-bottom: 1px solid grey;
}

#questions_alea{
	height: 11vh;
	width: 40vw;
	border-bottom: 1px solid grey;
}

#questions_typo{
	height: 11vh;
	width: 40vw;
	border-bottom: 1px solid grey;
}

#questions_img:hover{
	background-color: #ff04df;
}

#questions_alea:hover{
	background-color: #e8e8e8;
}

#questions_typo:hover{
	background-color: #76ff03;
}

#numero1{
	border-radius: 10px;
	border: 1px solid black;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
}

#numero1:hover{
	font-family: LiberationSansBold;
	background-color: #ff04df;
	border: 1px solid white; 
}

#numero1ouvert{
	border-radius: 10px;
	border: 1px solid white;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
	background-color: #ff04df;
}


#numero2{
	border-radius: 10px;
	border: 1px solid black;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
}

#numero2:hover{
	font-family: LiberationSansBold;
	background-color:#ff04df;
	border: 1px solid white; 
}

#numero2ouvert{
	border-radius: 10px;
	border: 1px solid white;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
	background-color: #ff04df;
}

#numero3{
	border-radius: 10px;
	border: 1px solid black;
	background-color: white;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: black;
	margin-top: 2vh;
	margin-left: 1vw;
}

#numero3:hover{
	font-family: LiberationSansBold;
	background-color: grey;
	border: 1px solid white; 
	color: white;
}

#numero3ouvert{
	border-radius: 10px;
	border: 1px solid white;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
	background-color: grey;
}

#numero4{
	border-radius: 10px;
	border: 1px solid black;
	background-color: grey;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
}

#numero4:hover{
	font-family: LiberationSansBold;
	background-color: #76ff03;
	border: 1px solid white; 
	color: white;
}

#numero4ouvert{
	border-radius: 10px;
	border: 1px solid white;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
	background-color: #76ff03;
}

#numero5{
	border-radius: 10px;
	border: 1px solid black;
	background-color: grey;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
}

#numero5:hover{
	font-family: LiberationSansBold;
	background-color: #76ff03;
	border: 1px solid white; 
	color: white;
}

#numero5ouvert{
	border-radius: 10px;
	border: 1px solid white;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-style: italic;
	font-size: 0.72em;
	color: white;
	margin-top: 2vh;
	margin-left: 1vw;
	background-color: #76ff03;
}

h3{
	width: 28.5vw;
	display: inline-block;
	font-family: LiberationSans;
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.78em;
	margin-top: 2vh;
	margin-left: 1vw;
}

h3:hover{
	font-family: LiberationSans;
	color: white;
	text-decoration: none;
}

#img{
	margin-top: -0.5vh;
}

#gif{
	margin: auto;
	display: flex;
	height: 30vh;
}





#conteneur_img{

	display: inline-block;
  	align-items: center;
	float: right;
	width: 40.8vw;
	height: 100vh;

}

#img{
	width: 30vw;
	position: absolute;
	top: 50%;
  transform: translate(26%, -50%);
}

#lien_questions{
	display: inline-block;
	width: 35vw;
}

.questions_lien{
	display: inline-block;

}


h4{
	width: 30vw;
	margin-left: 1.5vw;
	margin-top: 8vh;
	margin-bottom: 3vh;
	line-height: 1.5em;
	font-family: LiberationSans;
	text-transform: uppercase;
	font-size: 0.8em;
}


/*--------programme--------*/


#conteneur_programme{
	padding-top: 1.5vh;
	padding-left: 1.8vw;
	display: inline-block;
  	align-items: center;
	float: right;
	width: 34vw;
	height: 98vh;

}

#texte_programme{
	font-family: LiberationSans;
	text-transform: uppercase;
	line-height: 1.5em;
	font-size: 0.8em;
	width: 35vw;
	margin-bottom: 4vh;
}

g{
	border-radius: 10px;
	background-color: black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-size: 1em;
	color: white;
	margin-top: 2vh;
	margin-left: 0.1vw;
}

input{
	border-radius: 10px;
	border: 1px solid black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	font-size: 0.8em;
	display: block;
	margin: auto;
}


img{
	max-width: 100%;
}

#img_import{
	margin-top: 3vh;
	display: inline-block;
	width: 15vw;
	height: 52vh;
}

#img_export{
	display: inline-block;
	margin-left: 1.2vw;
	width: 15vw;
	height: 51vh;
}

#conteneur_prévi{
	border: 1px solid blue;
}

#imagePreview{
	border-radius: 10px;
	border: 1px solid grey;
	margin-bottom: 1vh;
	width: 15vw;
	height: 45vh;
}

#imageResult{
	border-radius: 10px;
	border: 1px solid black;
	margin-bottom: 1vh;
	width: 15vw;
	height: 45vh;
}

#img_programme1{
	display: block;
	margin: auto;
	border-radius: 10px;
	background-color: grey;
	padding: 2px 10px 2px 10px;
	font-family: LiberationSans;
	font-size: 0.8em;
	color: white;
	text-align: center;
}

#img_programme2{
	display: block;
	margin: auto;
	border-radius: 10px;
	background-color: black;
	padding: 2px 10px 2px 10px;
	font-family: LiberationSans;
	font-size: 0.8em;
	color: white;
	text-align: center;
}

button{
	border-radius: 10px;
	border: 1px solid black;
	padding: 2px 10px 2px 10px;
	display: inline-block;
	font-family: LiberationSans;
	background-color: white;
	font-size: 0.8em;
	display: block;
	margin: auto;
	margin-bottom: 4vh;
}

button:hover{
	background-color: #e8e8e8;
}

#remerciment{
	display: block;
	margin: auto;
	font-family: LiberationSans;
	text-transform: uppercase;
	line-height: 1.5em;
	font-size: 0.8em;
	width: 35vw;
}

a{
	text-decoration: none;
	color: black;
}

strong{
	border-radius: 10px;
	border: 1px solid black;
	padding: 2px 10px 2px 10px;
	font-family: LiberationSans;
	font-size: 1em;
	margin-top: 2vh;
	color: black;
}

strong:hover{
	background-color: #e8e8e8;
}