font-family {
	verdana;}


#menu-outil {	
	padding: 5px 0 0 0;	
	} 
p {	
	font-size:115%;	
	margin-left:5px;
	line-height:130%;	
	} 

hr.rose{
	background-color:#D90046;
	height:5px;
	width: 40%;
	}
	
hr.bleu{
	background-color: #4071B7;
	height:5px;
	width: 12%;
	padding-left:5px;
		}
		
hr.orange{
	background-color: #E97507;
	height:5px;
	width: 40%;
				}


.illustration {	
	text-align: center; 	
	margin-top:1em;	
	margin-bottom:1em;
}





#contenu{
	margin-top: 0px;
}

.sansstyle > h4 {
	color:white;
	font-size:1em;
  background-color: #F06666;
  padding: 5px;
  width:100%;
  font-family:verdana;
}


.sansstyle ul{
	margin-left: 3%;
	line-height: 140%;
}

.sansstyle > h3{
	color: olive;
	font-size: 130%; 
	border-bottom: 2px solid #f5b9b2; 
	padding: 2px;
	letter-spacing: 1px;
}


.sansstyle > h5{
	color: olive;
	font-size: 115%; 
	border-bottom: 2px solid #f5b9b2; 
	padding: 2px;
	letter-spacing: 1px;
}

/*********************************   BOUTON Navigation Black & White *****************************/

.button_BW {
  background-color: #fff; 
  border: 2px solid grey;
  border-radius :5px;
  color: grey;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
}



.button_BW:hover {
  color: black;
    border: 3px solid black;
    font-size:17px;
}

/*********************************   BOUTON retour haut de page  *****************************/
.button_HP{
	background-color: #3AAB3C;  
	color: #fff;
	border: 1px solid #3AAB3C;
	height:47px;
	width:47px;  
	padding: 2px 2px;  
	text-align: center;  
	text-decoration: none;  
	display: inline-block;  
	font-size: 25px;
	margin: 12px 4px;  
	-webkit-transition-duration: 0.4s; 
	/* Safari */  
	transition-duration: 0.4s;  
	cursor: pointer;
	border-radius: 100px;
	position:fixed;
	bottom:20px;

}

.button_HP:hover {  /********Orange*********/
	background-color: #000;  
	color: white;
	border: 1px solid #000;
	}
/********************************************************************/
/************************MENU DEROULANT *****************************/
/********************************************************************/


.box_menu{
	display: flex;
	justify-content: left;
	align-items: center;
}

/******** Premier Niveau **********/
.dp{
	padding: 3px;  
	font-size: 12px;  
	border: none;  
	cursor: pointer;  
	height:60px;  
	width:150px;
	margin:0px;
	margin-left: 3px;
}

.dp1 {  
	background-image: linear-gradient(#C90815, #740F10);  
	color: #fff;  
}
.dp2 {  
	background-image: linear-gradient(#D5811E, #7B4E15);  
	color: #fff;  
	}
.dp3 {  
	background-image: linear-gradient(#C5C025, #84811D);  
	color: #fff;  
	}
.dp4 {  
	background-image: linear-gradient(#42D320, #246611);  
	color: #fff;  
	}
.dp5 {  
	background-image: linear-gradient(#3C8FE7, #1E4162);  
	color: #fff; 
	}
.dp6 {  
	background-image: linear-gradient(#403FAD, #202044);  
	color: #fff;  
	}


/********** FENËTRE Déroulement ************/




.ddc {  
	display: none;  
	position: absolute;  
	background-color: #F3F5F2;  
	min-width: 300px;  
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
	z-index: 1;
	margin-left: 3px;
	}

.ddc a {  
	color: black;  
	padding: 12px 16px; 
	text-decoration: none;  
	display: block;
	}


.dropdown:hover .ddc{  
	display: block;
	}


.ddc1 {  
	border: 4px solid #740F10;
	}

.ddc1 a:hover {
	background-color:#740F10;  
	color:#fff; 
	}


.ddc2 {  
	border: 4px solid #7B4E15;
	}
.ddc2 a:hover {
	background-color:#7B4E15;  
	color:#fff;
	}


.ddc3 {  
	border: 4px solid #84811D;
	}
.ddc3 a:hover {
	background-color:#84811D;  
	color:#fff;
	}


.ddc4 {  
	border: 4px solid #246611;
	}
.ddc4 a:hover {
	background-color:#246611;  
	color:#fff;
	}


.ddc5 {  
	border: 4px solid #3C8FE7;
	}
.ddc5 a:hover {
	background-color:#3C8FE7;  
	color:#fff;
	}


.ddc6 {  
	border: 4px solid #202044;
	}
.ddc6 a:hover {
	background-color:#202044;  
	color:#fff;
	}


/********************************************************************/
/************************ACCORDEON *****************************/
/********************************************************************/

.accordeon_dane {
  background-color: #F3F5F2;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 3px #fff solid;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordeon_dane:hover {
  background-color: #c2C4C1;
}

.accordeon_dane:after {
  content: '+';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-";
}

.accordeon_contenu {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/********************************************************************/
/************************AFFICHAGE LISTE *****************************/
/********************************************************************/


.resume-liste {    
	border-top: 1px solid #ccc;    
	display: none;    
	font-size: 100%;
	}

h4.titre-liste {    
	border-top: 1px solid #ccc;
	font-size:100%;    
	}

.soustitre-liste {    
	display: none;
	}

.img-liste {    
	margin-bottom: 9px;height:60px; width:60px
	}

.contenu-ressource {    
	padding-top: 6px;
	}

.bloc-ressource {    
	border-color: #cccccc #ffffff #ffffff #fff;   
	background-color: #fff;
	}

.image-ressource {    
	margin: 0px 4px 2px 0;    
	}

.premiere-ligne {    
	margin-top: 4px;    
	vertical-align: top;
	}

.bloc-ressource-droite {    
	padding-top: 4px;    
	vertical-align: top;
}