body{
margin:0;
padding:0;
}

table a
{	
	text-decoration:none;
	font-weight:bold;
	color:white;
	margin-left:5;
}

table a:hover
{
	text-decoration:none;
	color:rgb(0,255,0);
	font-weight:bold;
	margin-left:5;
}

 #authentifier input{
	border:solid 1px #2222AA;
	margin-bottom:10px;
	padding:16px;
	outline:none;
	border-radius:6px;
 }

#header
{	margin:0;
	padding:0;
	position:sticky;
	top:0px;
	box-shadow: 0px 4px 4px grey;

}

#grandtitre
{
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content:center;
	justify-content:center;
    align-items:center;
	width:100%;
	height:13%;
	font-family: Courier New;
	font-size:72px;
	font-weight:bold;
	color:white;
	background-image: url(brassage.jpg);	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	margin:0;
	border:0;
	

}

#menu 
{
	width:100%;
	height:4%;
	background-color:black;

}

#ident{text-align:right;
		color:#00ff00;
		margin-right:10px;
		padding-top:2px;
		font-family: Courier New;
		font-size:22px;
		font-weight:bold;}
				

#menu ul
{	list-style-type:none;
	margin:0;
	padding:0;
	width:80%;	
	
}
#menu ul li
{
		display:block;
		float:left;
		color:white;
		width:19.5%;
		font-family: Courier New;
		font-size:22px;
		font-weight:bold;	
		text-align:center;
		vertical-align:center;
		margin-top:2px;

}

#menu ul li a
{
	text-decoration:none;
	color:white;

}

#menu ul li a:hover
{
	text-decoration:none;
	color:rgb(0,255,0);
	
}


#social 
{	position:absolute;
	top:5%;
	left:3%;
	width:15%;
	height:3%;
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	z-index:1;

}

#social ul
{	list-style-type:none;
	margin:0;
	padding:0;
	
}
#social ul li
{
		display:block;
			background-color:white;
		float:left;
		color:white;
		width:24%;
		font-family: Courier New;
		font-size:28px;
		font-weight:bold;	
		text-align:center;
		vertical-align:center;
		border:0;

}


#corps
{
    display: flex;
	flex-direction: row;
	width:100%;
	height:auto;
	min-height:900px;
	background-color:#white;
	padding:0;
	margin:0;

	

}

#contenu
{
	width:80%;
	height:100%;
	margin-left: 10;
	margin-top:10;
	margin-right:15;
	margin-bottom:10;
	text-align:justify;
	word-wrap : break-word;
	font-size:16px;
	font-family:arial;
	background-color:white;
	padding:0;

}

#pub
{
	width:20%;
	height:auto;
	margin-left:1;
	margin-top:10;
	margin-right:3;
	margin-bottom:10;
	text-align:center;
	font-size:16px;
	font-family:arial;
	background-color:#dddddd;
	padding:0;
	box-shadow: 0px 4px 4px grey;	

}


#titre_article
{
	font-size:28px;
	font-family:Courier New;	
	font-weight:bold;	
	color:rgb(0,255,0);
	text-shadow: 1px 1px 1px grey;	
	
}

#cours
{
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	width:auto;
	height:auto;
	min-height:800px;
	background-color:#white;
	padding:0;
	margin:0;
}

#cours_lien
{
	width:20%;
	height:200px;
	text-align:center;
	color:black;
	background-color:#555555;
	border-radius:15px;
	margin-left: 10;
	margin-top:10;
	margin-right:15;
	margin-bottom:0;	
	box-shadow: 4px 4px 4px grey;	
	
}

#cours_titre
{
	height:45px;
	text-align:center;
	align-content:center;
	font-weight:bold;
	font-size:16px;
	border-radius:15px 15px 0 0;
	background-color: rgb(0,255,0);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;

}

#cours_description
{
	height:auto;
	text-align:center;
	font-weight:normal;
	border-radius:0 0 15px 15px;
	font-size:14px;
	margin-left: 4;
	margin-top:10;
	margin-right:4;
	margin-bottom:2;
	color:black;

}

#cours_lien:hover
{
	width:20%;
	height:200px;
	text-align:center;
	font-weight:bold;
	color:blue;
	background-color:#eeeeee;
	border-radius:15px;
	margin:10px;
	box-shadow: 4px 4px 4px grey;
	margin-left: 10;
	margin-top:10;
	margin-right:15;
	margin-bottom:0;	
	
}

#cours_lien:hover img
{
display: none;
	
}

#cours_lien p
{
display: none;
	
}

#cours_lien:hover p
{
display: block;
text-align:justify;
color:black;
	margin-left: 4;
	margin-top:0;
	margin-right:4;
	
}

#cours_lien a
{text-decoration:none;
}

#cours_lien:hover a
{text-decoration:none;
}


#cours_box_old
{
    display: flex;
	flex-direction:column;
	width:100%;
	height:100%;

	background-color:rgb(0,255,0);
	padding:0;
	margin:0;
	
}

#cours_h
{
	
display: flex;
flex-direction: row;
flex-wrap: wrap;
	align-content:center;
	justify-content:justify;
    align-items:center;
	margin-left:0;
width:100%;
height:10%;
background-color:black;	
	background-image: url(brassage.jpg);	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
}

#cours_h ul
{	list-style-type:none;
	width:100%;
	margin:0;
	padding:0;
}

#cours_h ul li
{	
		display:block;
		float:left;
		color:white;
		width:20%;
		font-family: Courier New;
		font-size:28px;
		font-weight:bold;	
		text-align:center;
		vertical-align:center;
}

#cours_h ul li a
{
	text-decoration:none;
	color:white;

}

#cours_h ul li a:hover
{
	text-decoration:none;
	color:rgb(0,255,0);
	
}

#cours_b
{
width:100%;
height:90%;
background-color:white;
}

#grandtitre2
{
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content:center;
	justify-content:center;
    align-items:center;
	width:100%;
	height:40%;
	font-family: Courier New;
	font-size:72px;
	font-weight:bold;
	color:white;
	background-image: url(brassage.jpg);	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	margin:0;
	border:0;
	

}

#cours_titre2
{
	height:12%;

	text-align:center;
	align-content:center;
	font-family:arial;
	font-weight:bold;
	font-size:24px;
	border-radius:0 0 0 0;
	background-color: rgb(255,0,0);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;	
	
}

#cours_titre2_cours
{
	height:12%;

	text-align:center;
	align-content:center;
	font-family:arial;
	font-weight:bold;
	font-size:24px;
	border-radius:0 0 0 0;
	background-color: rgb(0,255,0);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;	
	
}

#cours_titre2_video
{
	height:12%;

	text-align:center;
	align-content:center;
	font-family:arial;
	font-weight:bold;
	font-size:24px;
	border-radius:0 0 0 0;
	background-color: rgb(0,255,255);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;
}	



#cours_titre2_tp
{
	height:12%;

	text-align:center;
	align-content:center;
	font-family:arial;
	font-weight:bold;
	font-size:24px;
	border-radius:0 0 0 0;
	background-color: rgb(255,0,255);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;
	
}

#retour
{
	height:12%;

	text-align:center;
	align-content:center;
	font-family:arial;
	font-weight:bold;
	font-size:24px;
	border-radius:0 0 0 0;
	background-color: rgb(255,255,0);
	margin-left: 0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	color:white;
	
}

#retour a
{
	font-family:arial;
	font-weight:bold;
	text-decoration:none;
	font-size:24px;
	color:white;
	
}

#noid_msg{font-family:arial; font-size:32px;color:red;}

#tete_lien
{
	margin-top:10;
	border-radius:15px 15px 0 0;
	background-color: rgb(0,255,0);
	text-align:center;
	color:white;
	font-size:28px;
	font-family:Courier New;
	font-weight:bold;

	
}

#pied_lien
{
	
	border-radius:0 0 15px 15px;
	background-color: rgb(0,255,0);
	text-align:center;
	color:white;
	font-size:28px;
	font-family:Courier New;
	font-weight:bold;

}

footer
{
	background-color:black;
	color:white;
	font-size:16px;
	font-family:Courier New;
	text-align:center;
	height:3%;
	
}
footer a
{
	text-decoration:none;
	color:white;

}

footer a:hover
{
	text-decoration:none;
	color:rgb(0,255,0);
	
}

@media (orientation: portrait) {
	
		body{
		margin:0;
		padding:0;
		}
	
		#contenu
		{
			width:100%;
			height:100%;
			margin-left: 20;
			margin-top:10;
			margin-right:10;
			margin-bottom:10;
			text-align:justify;
			word-wrap : break-word;
			font-size:28px;
			font-family:arial;
			background-color:white;
			padding:0;

		}

		#pub
		{
			display:none;

		}


		#titre_article
		{
			font-size:48px;
			font-family:Courier New;	
			font-weight:bold;	
			color:rgb(0,255,0);
			text-shadow: 1px 1px 1px grey;	
			
		}

		#cours
		{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content:center;
			width:auto;
			height:auto;
			min-height:800px;
			background-color:#white;
			padding:0;
			margin:0;
		}

		#cours_lien
		{
			width:31%;
			height:260px;
			text-align:center;
			color:black;
			background-color:#555555;
			border-radius:15px;
			margin-left: 5;
			margin-top:10;
			margin-right:5;
			margin-bottom:0;	
			box-shadow: 4px 4px 4px grey;	
			
		}

		#cours_titre
		{
			height:70px;
			text-align:center;
			align-content:center;
			font-weight:bold;
			font-size:28px;
			border-radius:15px 15px 0 0;
			background-color: rgb(0,255,0);
			margin-left: 0;
			margin-top:0;
			margin-right:0;
			margin-bottom:0;
			color:black;

		}

		#cours_description
		{
			height:auto;
			text-align:center;
			font-weight:normal;
			border-radius:0 0 15px 15px;
			font-size:24px;
			margin-left: 4;
			margin-top:10;
			margin-right:4;
			margin-bottom:2;
			color:black;

		}

		#cours_lien:hover
		{
			width:31%;
			height:260px;
			text-align:center;
			font-weight:bold;
			color:blue;
			background-color:#eeeeee;
			border-radius:15px;
			margin:10px;
			box-shadow: 4px 4px 4px grey;
			margin-left: 5;
			margin-top:10;
			margin-right:5;
			margin-bottom:0;	
			
		}

		#cours_lien:hover img
		{
		display: none;
			
		}

		#cours_lien p
		{
		display: none;
			
		}

		#cours_lien:hover p
		{
		display: block;
		text-align:justify;
		color:black;
			margin-left: 4;
			margin-top:0;
			margin-right:4;
			
		}

		#cours_lien a
		{text-decoration:none;
		}

		#cours_lien:hover a
		{text-decoration:none;
		}


		footer
		{
			background-color:black;
			color:white;
			font-size:16px;
			font-family:Courier New;
			text-align:center;
			width:100%;
			
		}
		footer a
		{
			text-decoration:none;
			color:white;

		}

		footer a:hover
		{
			text-decoration:none;
			color:rgb(0,255,0);
			
		}



}


.element:nth-child(1)
{
	background-color:green;
	
}
.element:nth-child(2)
{
	background-color:white;
}
.element:nth-child(3)
{
	background-color:red;
}
.element:nth-child(4)
{
	background-color:pink;
}
.element:nth-child(5)
{
	background-color:brown;
}
.element:nth-child(6)
{
	background-color:orange;
}

.element:hover
{
	background-color:blue;
	width:30%;
	height:20%;
	text-align:center;
}