.ExoEnLigne{
	display : inline-block;
	width : 100%;
	text-align : center;
    position: relative;
}

.ExoEnLigne img{
	width: 67%;
	transition: all 2s ease;
}

.ExoEnLigne:hover{
	overflow : visible;
}

.ExoEnLigne p {
	display : none;
	position: absolute;
	color: #fff;
}
        
.ExoEnLigne:hover p {
	display : block;
	font-size : 0.719em;
	text-align : justify;
}
        
.ExoEnLigne:hover .descriptif{
	top: 13%;
	background: rgba(0, 0, 119, 0.719);
	color : white;
}

.ExoEnLigne .descriptif{
        width: 100%;
		min-height : 33px;
        height: 9%;
        background: rgba(219, 219, 219, 0.919);
		color : black;
        display: block;
        position: absolute;
        top: 41%;
        left: 0;
		text-align : center;
        transition: all 0.3s ease-in-out;
		border-radius : 7px;
		font-weight : bold;
		padding : 1%;
}

.ExoEnLigne:hover .descriptif{
	height : 77%;
	border-radius : 9px;
}

.CoursEnLigne{
	display : inline-block;
	width : 100%;
	text-align : center;
    position: relative;
}

.CoursEnLigne img{
	width: 100%;
	transition: all 2s ease;
}

.CoursEnLigne:hover{
	overflow : visible;
}

.CoursEnLigne p {
	display : none;
	position: absolute;
	color: #fff;
}
        
.CoursEnLigne:hover p {
	display : block;
	font-size : 0.719em;
	text-align : justify;
}
        
.CoursEnLigne:hover .descriptif2{
	top: 13%;
	background: rgba(0, 0, 119, 0.719);
}

.CoursEnLigne .descriptif2{
        width: 100%;
		min-height : 33px;
        height: 9%;
        background: rgba(0, 0, 119, 0.219);
		color : white;
        display: block;
        position: absolute;
        top: 41%;
        left: 0;
		text-align : center;
        transition: all 0.3s ease-in-out;
		border-radius : 7px;
		font-weight : bold;
		padding : 1%;
		visibility : hidden;
}

.CoursEnLigne:hover .descriptif2{
	height : 77%;
	border-radius : 9px;
	visibility : visible;
}

.gauche{
	text-align 		: center;
	width 			: 9%;
	position : fixed;
	top :0;
	left : 7%;
}

.gauche img{
	width : 91%;
	padding : 1%;
}

.legende{
	text-align : left;
}

.legende table tr td{
	vertical-align : top;
	font-size : x-small;
}

.legende img{
	width : 57%;
	min-width : 39px;
}

.droite{
	margin-left		: 11%;
	text-align 		: left;
	width 			: 91%;
}

.mots_clefs{
    font-style : italic;
	font-size : 0.79em;
	text-align : justify;
}

.archives{
	font-size : 0.79em;
}

.titre{
	font-size 		: 1em;
	text-align : center;
}

ul{
	list-style-type:none;
}

.pourADM{
	display 	: inline-block;
	text-align 	: left;
	padding 	: 1%;
	margin		: 1%;
	width 		: 3%;
}

.pourADM input{
	width : 100%;
}

.pourADM:hover {
	box-shadow : 0px 0px 31px black;
}

.pourADM2{
	font-weight 	: bold;
	font-size 		: 1.19em;
	margin-right 	: 3%;
}

.press_to_play{
	display 	: inline-block;
	text-align 	: left;
	padding 	: 1%;
	margin		: 1%;
	width 		: 3%;
}

.press_to_play img{
	width 		: 100%;
}

.blocCours{
	width : 67%;
	display : inline-block;
	vertical-align : top;
	text-align : center;
}

.blocCours ol {
	list-style-type: upper-roman;
	list-style-position: inside;
}

.aff_bloc_cours{
	display:inline-block;
	vertical-align:top;
	width:39%;
	text-align:center;
	line-height: 37%;
}

.blocChap{
	display : inline-block;
	vertical-align : top;
	border : 1px solid black;
	padding : 3%;
	margin : 1%;
	border-radius : 19px;
	width : 23%;
	overflow : auto;
}

.blocChap hr{
	margin : 0 -3.319%;
}

.blocChap:hover{
	box-shadow : 0 0 19px grey;
}

.blocChap li strong{
	font-size : 1.19em;
}

.blocDoc h3{
	margin : 0;
}

.blocDoc{
	width : 27%;
	display : inline-block;
	vertical-align : top;
	font-size : small;
}

.blocDoc ul {
	padding : 0 3%;
}

.MonAnimation{
	border : 1px solid black;
	border-radius : 19px;
	display : inline-block;
	vertical-align : top;
	margin : 1%;
}