/*===================== Polices d'écriture =====================*/

@font-face{
	
	font-family: "Quantum";
	src: url("../Polices/Quantum.otf") format("opentype");
	
}

@font-face{
	
	font-family: "space age";
	src: url("../Polices/space age.ttf") format("truetype");
	
}

@font-face{
	
	font-family: "planetncompact";
	src: url("../Polices/planetncompact.ttf") format("truetype");
	
}

@font-face{
	
	font-family: "Kenney future Narrow";
	src: url("../Polices/Kenney future Narrow.ttf") format("truetype");
	
}

@font-face{
	
	font-family: "DAGGERSQUARE";
	src: url("../Polices/DAGGERSQUARE.otf") format("opentype");
	
}

@font-face{
	
	font-family: "Expansiva";
	src: url("../Polices/Expansiva.otf") format("opentype");
	
}

@font-face{
	
	font-family: "PolenticalNeonR";
	src: url("../Polices/PolenticalNeonR.ttf") format("truetype");
	
}



/*===================== Balises HTML =====================*/

h1{
	
	color: white;
	font-family: "Quantum";
	
}

h2{
	
	color: white;
	font-family: "Quantum";
	
}

table{
	
	color: #607ddc;
	width: 100%;
	height: 2em;
	align: center;
	
}

th{
	
	text-align: center;
	
}

p{
	
	text-align: justify;
	font-family: "DAGGERSQUARE";
	margin-left: 20%;
	margin-right: 20%;
	
}

li{
	
	text-align: justify;
	font-family: "DAGGERSQUARE";
	margin-left: 20%;
	margin-right: 20%;
	
}



/*===================== Classes =====================*/

.fond{
	
	background-color: #000000;
	font-family: "planetncompact";
	
}

.DivAccueuil{
	
	height: 10%;
	width: 85%;
	background: url("../Images/Accueuil3.jpg");	/*																		*/
	background-repeat: no-repeat;				/*																		*/
	background-size: cover;						/*	Mettre une image de fond centrée au milieu, sans répétitions et		*/
	background-position: center;				/*	qui s'adapte à la taille de la page									*/
	margin: 20px auto;
	text-align: center;
	-webkit-border-radius: 12px;		/*	Bords arrondis												*/
	-moz-border-radius: 12px;			/*	Bords arrondis		Pour plusieurs navigateurs différents	*/
	
}

.TextEx1{
	
	position: relative;
	top: 50%;							/*												*/
	left: 50%;							/*	Centrer horizontalement et verticalement	*/
	transform: translate(-50%,-50%);	/*												*/
	color: white;
	
}

.TextEx2{
	
	text-align: center;
	color: white;
	
}

.TextEx3{
	
	text-align: justify;
	color: white;
	
}

.ligne{
	
	width: 100%;
	height: 3px;
	color: #133fc9;						/*	Couleur pour les autres nav */
	background-color: #133fc9;			/*	Couleur pou IE				*/
	border: none;
	
}

.thAccueuil{
	
	width: 10em;
	border-right: 1px solid #133fc9;
	/*cursor: pointer;*/
	transition: background-color 0.3s ease;
	
}

.thAccueuil:hover {
    background-color: #a0a0a0;
}

.ligneN{
	
	width: 85%;
	height: 1px;
	color: black;						/*	Couleur pour les autres nav */
	background-color: black;			/*	Couleur pou IE				*/
	border: none;
	
}

.ligneG{
	
	width: 85%;
	height: 1px;
	color: #DDDDDD;						/*	Couleur pour les autres nav */
	background-color: #DDDDDD;			/*	Couleur pou IE				*/
	border: none;
	
}

.Img{
	
	height: 2.5%;
	-webkit-border-radius: 12px;		/*	Bords arrondis												*/
	-moz-border-radius: 12px;			/*	Bords arrondis		Pour plusieurs navigateurs différents	*/
	
}

.Img2{
	
	height: 500px;
	-webkit-border-radius: 12px;		/*	Bords arrondis												*/
	-moz-border-radius: 12px;			/*	Bords arrondis		Pour plusieurs navigateurs différents	*/
	
}

.markB{
	
	background-color: white;
	color: black;
	
}

.markG{
	
	background-color: #766851;
	color: #DDDDDD;
	
}

.markN{
	
	background-color: #161616;
	color: white;
	
}

.markBleu{
	
	background-color: #1f232d;
	color: white;
	
}



/*===================== IDs =====================*/

#DivImage{
	
	height: 70%;
	width: 60%;
	background-image: url("../Images/InfoSpatial2.jpg");	/*																		*/
	background-repeat: no-repeat;				/*																		*/
	background-size: cover;						/*	Mettre une image de fond centrée au milieu, sans répétitions et		*/
	background-position: center;				/*	qui s'adapte à la taille de la page									*/
	margin: 20px auto;
	-webkit-border-radius: 12px;		/*	Bords arrondis												*/
	-moz-border-radius: 12px;			/*	Bords arrondis		Pour plusieurs navigateurs différents	*/
	
}

#thAdroite{
	
	width: 10em;
	border-right: none;
	
}

#BoutonConclusion{
	
	border-top: 1px solid #133fc9; 
	border-bottom: 1px solid #133fc9;
	border-right: none;
	
}

#JamesWebb{
	
	background-image: url("../Images/JamesWebb_2.jpg");
	background-repeat: no-repeat;				/*																		*/
	background-size: cover;						/*	Mettre une image de fond centrée au milieu, sans répétitions et		*/
	background-position: center;				/*	qui s'adapte à la taille de la page									*/
	
}

#Ingenuity{
	
	background-image: url("../Images/Ingenuity2.jpg");
	background-repeat: no-repeat;				/*																		*/
	background-size: cover;						/*	Mettre une image de fond centrée au milieu, sans répétitions et		*/
	background-position: center;				/*	qui s'adapte à la taille de la page									*/
	
}

#constel{
	
	background-image: url("../Images/Const3.jpeg");
	background-repeat: no-repeat;				/*																		*/
	background-size: cover;						/*	Mettre une image de fond centrée au milieu, sans répétitions et		*/
	background-position: center;				/*	qui s'adapte à la taille de la page									*/
	
}

#DivJW{
	
	position: absolute;
	top: 100%;
	left: 0%;
	width: 100%;
	height: 1000%;
	text-align: center;
	background-color: white;
	
}

#DivIng{
	
	position: absolute;
	top: 100%;
	left: 0%;
	width: 100%;
	height: 1000%;
	text-align: center;
	background-color: #766851;
	color: #DDDDDD;
	
}

#DivConst{
	
	position: absolute;
	top: 100%;
	left: 0%;
	width: 100%;
	height: 1000%;
	text-align: center;
	background-color: #1f232d;
	color: #FFFFFF;
	
}

#JW{
	
	color: black;
	
}

#IG{
	
	color: #DDDDDD;
	
}

#IgSh{
	
	align: center;
	height: 5%;
	-webkit-border-radius: 12px;		/*	Bords arrondis												*/
	-moz-border-radius: 12px;
	
}

#boutonJW{
    cursor : pointer;   
}