#zoneEntete {
	/*	min-width:300px;*/
	max-width: 1160px;
	width: auto;
}
 #zoneConteneur {
	min-width: 340px;
	max-width: 1160px;
	width: auto;
}
 #identite {
	/*	min-width:300px;*/
	max-width: 1160px;
	width: auto;
}
 #zoneContenu {
	position: relative;
	padding-left: 0px;
	padding-top: 10px;
}



#contenu a {
	color:#ea641b ;
	text-decoration:none; 
/*	font-weight:bold;*/
}

#contenu a:hover {
	text-decoration:underline;
}

#contenu .retroAct a {
color:#a5411b ;

}

 
#contenu {
	/*width: 340px;*/
	width:100%;
    margin: 0 auto;
/*	margin-top: 35px;*/
	margin-top:10px;
    margin-bottom: 10px;
	font-family: 'Open Sans';
	font-size:14px;
	color:#3d3d3f;
}
 
 

h2 {
	font-family: 'BebasNeue';
	font-size:22px;
	color:#06687c;
	padding: 0px;
    margin: 0px;    
	font-weight: normal;
	
 padding-bottom: 10px;
}



h3 {	 
	font-family: 'BebasNeue';
	font-size:18px;
	color:#000000; 
	margin:0px;
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 10px;
 }
 
h4 {
	font-family:"Open Sans";
	font-weight:bold;
	font-size:14px;
	color:#3d3d3f;
	    margin-top: 15px;
    margin-bottom: 10px;

}
h4.autre {
	border-bottom:1px solid #000;
}

h4.lecture, h4.pratique , h4.ressource{ 
/** pour deplace changer la hauteur et le pad-top*/
	position:relative;
	
	line-height: 55px;
    margin: 0px;
    padding: 15px 0px 0px 55px;
    position: relative;
	
	height: 75px;
	
	}

h4.lecture::before {	
   content:url(../img/lecture.gif);
 /*  padding-right:15px;*/
    position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
}	
	
h4.pratique::before {	
   content:url(../img/crayon.gif);
    position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
}	
	
h4.ressource::before {	
   content:url(../img/autre.gif); 
  	position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
}	

h4.evaluation::before {	
   content:url(../img/evaluation.gif); 
  	position: absolute;
    height: 40px;
    width: 40px;
    left: 0;
}	

h4.noMargintop {
	margin-top:0px;}


p{ margin:0;padding:0px;margin-bottom:1em;}
p.sourceMafal  { font-size:12px;    padding-bottom: 20px;}

div.conseil {
	border: solid 5px #645A55;
    margin: 5px 5px 15px 5px;
    padding: 0px 16px;
	}	

/**********accordeon texte **********************/
.w3-btn, .w3-btn-block { 
	    border: none;
    display: inline-block;
    outline: 0;
    
    overflow: hidden;
    text-decoration: none!important;
 
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    white-space: nowrap; 
	
	border-top:dotted 2px #3c3c3c;
	font-family: 'BebasNeue';
	font-size:24px;
	color:#06687c;	 

/*	 height: 80px;
 line-height: 10px;*/	
 padding-left:0px;
padding-right:0px	;
 padding-top:5px;
 padding-bottom:25px
 
 }
 .w3-container {
    padding: 0.01em 16px;
}
.w3-accordion-content {
    cursor: auto;
    display: none;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
	
	padding-bottom: 50px;
}
.w3-show-block, .w3-show {
    display: block!important;
}
.w3-btn-block {
  /*  width: 100%;*/
  	    width: 70%;
    margin-right: 15%;
    margin-left: 15%;
	position :relative;
}

  #zoneConteneur #zoneMilieuPage #zoneContenu #contenu .w3-accordion.w3-light-grey .w3-btn-block.w3-left-align .flech {
     position: absolute;
   top:10px;
   right:0px;
    width: 26px;
    height: 48px;
    background: url(../img/fl_downM.png) no-repeat;
}


#zoneConteneur #zoneMilieuPage #zoneContenu #contenu .w3-accordion.w3-light-grey .w3-btn-block.w3-left-align.open .flech {
  
    background: url(../img/fl_upM.png) no-repeat;
}

/***********accordeon questionnaire***************/
#zoneContenu #contenu .retro {
	background: #3D3D3F;
    color: #fff;
    padding: 10px;
    margin: 0px;
    border: none;
	cursor:pointer;
    border-radius: 10px;
    margin-bottom: 15px;
	}
 #zoneContenu #contenu .retro:hover {
	 background:#06687C;
 }
 
#retro1,#retro2,#retro3,#retro4,#retro5,#retro6 {  display: none;}
#ftn15	{padding-bottom:15px;}
.retroAct {
	 border-radius: 10px;
	 background:#E6DF89;
     margin: 0px 0px 20px;
    padding: 15px 35px 7px;
	}
	
div.warpTab {    
	overflow-x: scroll;     
	margin-top: 20px;
    margin-bottom: 20px;
	}
#contenu .retroAct ul {	padding-bottom:10px;
	
}
#contenu .retroAct ul.lstRep{
	padding-bottom:15px;
	padding-top:15px;
	padding-right:0px;
	}
p.avantliste{	    
	padding-bottom: 6px;
    margin-bottom: 0px; 
	}	
	
/********* cboite citation grande Jaune *********/
.citation {background: #fff;
   border: solid 5px #D2C506;
    border-radius: 10px;
    padding: 15px;
    padding-right: 25px;
    padding-left:25px;
    padding-bottom: 5px;
   /*margin: 25px 50px;*/
    margin:15px 0px;
	width:90%;
	}
	
.citation::before {	
   content:url(../img/citation.png);
   position: absolute;
   margin-left: -66px;
}	
.citation::after {	
   content:url(../img/citationR.png);
      
    float: right;
	margin-top: -50px;
    margin-right: -66px;
}	

/********* cboite citation petite jaune  *********/
	
.citationB {background: #fff;
   border: solid 5px #D2C506;
    border-radius: 10px;
    padding: 15px;
	    padding-bottom: 5px;
   /* margin: 15px 20px 25px;;*/
    margin:15px 0px;
	display: inline-block;
    vertical-align: top;
/*	width:35%;*/
    margin-bottom: 25px;
	}
	
.citationB::before {	
 /*  content:url(../img/citation.png);
   position: absolute;
   margin-left: -51px;*/
}	
.citationB::after {	
   content:url(../img/citationR.png);
      
    float: right;
	margin-top: -50px;
    margin-right: -56px;
}		
	/********* cboite citation petite bleu  *********/
.citationA {background: #fff;
   border: solid 5px #06687c;
    border-radius: 10px;
    padding: 15px;
	    padding-bottom: 5px;
 /*   margin: 15px 50px 25px;*/
 margin:15px 0px;
	display: inline-block;
    vertical-align: top;
	/*width:35%;*/
	}
	
.citationA::before {	
   content:url(../img/citationB.png);
   position: absolute;
   margin-left: -56px;
}	
.citationA::after {	
 /*  content:url(../img/citationBR.png);
      
    float: right;
	margin-top: -50px;
    margin-right: -51px;*/
}	
/*************************************************/	
#introMod {
		padding-left: 15%;
    padding-right: 15%;
	padding-bottom: 10px;
}
	
	
#Demo1 ,#Demo3, #Demo5 , #Demo7, #Demo9, #Demo11 ,#Demo0 ,#Demo2, #Demo4 , #Demo6, #Demo8, #Demo10  {

	padding-left: 15%;
    padding-right: 15%;
	padding-bottom: 50px;
	
	}	
#Demo1 ,#Demo3, #Demo5 , #Demo7, #Demo9, #Demo11 ,#Demo0 ,#Demo2, #Demo4 , #Demo6, #Demo8, #Demo10{	
	min-height: 405px;
}

 #Demos1 ,#Demos3, #Demos5 , #Demos7, #Demos9, #Demos11 ,#Demos0 ,#Demos2, #Demos4 , #Demos6, #Demos8, #Demos10  {

	 padding-left: 15%;
	 padding-right: 15%;
	 padding-bottom: 50px;

 }
 #Demos1 ,#Demos3, #Demos5 , #Demos7, #Demos9, #Demos11 ,#Demos0 ,#Demos2, #Demos4 , #Demos6, #Demos8, #Demos10{
	 min-height: 405px;
 }



	
.mafalda {

	
	}
	
div.wrapMal {
	
    width: 100%;
    overflow-x:scroll;     
    white-space: nowrap;
    text-align: center;
	max-width:812px;
	margin-top: 15px;
	margin-bottom: 5px;
}
div.wrapMal img{
	    padding: 10px;
    max-width: 795px;
}

#Demo1 div.wrapMal,#Demo3 div.wrapMal, #Demo5 div.wrapMal, #Demo7 div.wrapMal, #Demo9 div.wrapMal, #Demo11 div.wrapMal{
	border:6px solid #06687C;
	background: #fff;
	}
	
#Demo0 div.wrapMal,#Demo2 div.wrapMal, #Demo4 div.wrapMal, #Demo6 div.wrapMal, #Demo8 div.wrapMal, #Demo10 div.wrapMal{
	border:6px solid #D2C506;
	background: #fff;
	}




#Demo1 ,#Demo3, #Demo5 , #Demo7, #Demo9, #Demo11 {
	/*background:red;*/
	background:url(../img/background_b.gif) no-repeat;
    background-position: 100% 0;
	}
#Demo0 ,#Demo2, #Demo4 , #Demo6, #Demo8, #Demo10 {
/*	background:blue;*/
	background:url(../img/background_j.gif) no-repeat;
	}

 #Demos1 div.wrapMal,#Demos3 div.wrapMal, #Demos5 div.wrapMal, #Demos7 div.wrapMal, #Demos9 div.wrapMal, #Demos11 div.wrapMal{
	 border:6px solid #06687C;
	 background: #fff;
 }

 #Demos0 div.wrapMal,#Demos2 div.wrapMal, #Demos4 div.wrapMal, #Demos6 div.wrapMal, #Demos8 div.wrapMal, #Demos10 div.wrapMal{
	 border:6px solid #D2C506;
	 background: #fff;
 }




 #Demos1 ,#Demos3, #Demos5 , #Demos7, #Demos9, #Demos11 {
	 /*background:red;*/
	 background:url(../img/background_b.gif) no-repeat;
	 background-position: 100% 0;
 }
 #Demos0 ,#Demos2, #Demos4 , #Demos6, #Demos8, #Demos10 {
	 /*	background:blue;*/
	 background:url(../img/background_j.gif) no-repeat;
 }


#contenu ul {
    margin: 0;
    padding: 0;
    padding-left: 18px;
	 
	line-height:21px;
    padding-bottom: 10px;
	padding-right:40px;
	    list-style-type: disc;
}

#contenu ol {  margin: 0;
    padding: 0;
    padding-left: 18px;
	margin-bottom: 1em;
	 
	line-height:21px;
}
#contenu ol.lettre {list-style:upper-alpha;}
#contenu ol.lettre li{
	list-style:upper-alpha;
	text-indent:0px;
	padding-left: 0px; 
}
#contenu ol.lettre li:before { content: ""; /* Insert content that looks like bullets */
    padding-right: 0px; }

#contenu ul.pratiqueListe {    
	padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
	}
#contenu ul.pratiqueListe > li { 
	display:inline-block;
	border:solid 1px #000;
	width: 145px;
	text-align:center;

    margin-left: -2px;
	margin-top: 1px;
    padding: 4px;
	
}	
#contenu ul ul {
	list-style:none;
 	padding: 0;
    margin: 0;
	}
#contenu ul ul li { list-style:none; 
text-indent:-26px;
padding-left: 26px; 	}
	
#contenu ul ul li:before {
 
	 content: "—"; /* Insert content that looks like bullets */
    padding-right: 10px;
  
	}
	
#contenu ul ul ul {	
        list-style-type: disc;
    padding-left: 18px;
}
#contenu ul ul ul li { list-style-type: disc; 
text-indent:0px;
padding-left: 0px; 
}
#contenu ul ul ul li:before { content: ""; /* Insert content that looks like bullets */
    padding-right: 0px; }
	
/*
div.pratiqueListe:nth-child(2n+1){*/
	
ul.pratiqueListe > li:nth-child(2n){
/*	background-color:#D8C704;*/
	  background-color: rgba(216, 119, 4, 0.36);
 
	}
	
	
img.propagande	{
	float: left;
    padding-right: 15px;
}
img.bodyShop {
	border : 1px solid #000;
	    margin-bottom: 20px;
	}

/***********table **************/
table {
	
	border:solid 1px #82b3ba;
    background: #fff;
}

table.eval {margin-bottom:50px;     width: 100%;}

th {
	background:#06687C;
	color:#fff;
	border:solid 1px #82b3ba;
	    padding: 5px;
	}
	
th  p { margin-bottom:0px;}	
	
td {
/*	background:#fff;*/
	border:solid 1px #82b3ba;
	    padding: 5px;
	}	
td.centreTd {
	text-align:center;
}
.noteLien { 
	vertical-align: super;
    font-size: smaller;
}
.noteTxt {
	font-size: 12px;
    text-indent: -14px;
    padding-left: 15px;
	 }

@media only screen and (min-width: 768px)  {/* version tablette*/
 

#contenu {
/*	width: 660px; */
	  width: 100%;
}

.citation {
   margin: 25px 50px 35px; ;
   padding-top: 25px;

}
 
/********* cboite citation petite jaune  *********/
	
.citationA {
	width:40%;
	margin: 15px 50px 25px;
	padding-top: 20px;
	}
	
	
	/********* cboite citation petite bleu  *********/
.citationB {
	width:40%;
	 margin: 15px 20px 25px;
     padding-top: 20px;
	}
 	
/*************************************************/	
div.warpTab {    overflow-x: initial;}

 
 
 
 
	  
}

@media only screen and (min-width: 1180px)  {
	div.wrapMal{    
		overflow-x:initial;
	}
}


@media only screen and (min-width: 1100px)  {/* version tablette*/




 

}