/* Eléments principaux de la page */

body
{
    /*background-image: url(img/fond.jpg);

    background-repeat:no-repeat;
    background-attachment: fixed;
  background-position:center top;*/
  background-color: #739f02;
    font-family: 'Trebuchet MS', Arial, sans-serif;
      text-align:center;
margin-left: 20%;
margin-right: 20%;

}

#bloc_page
{
    max-width: 98%;
    display: flex;
    flex-direction: column;

    background: rgb(255, 255, 255);
}

section h1, section h2, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
        font-size: 1.2em;
}

li {
    list-style-type: none;
border-bottom: 0px solid transparent;
float: none;
margin-bottom: 5px;
text-align: center;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;

}

 /* Header */

header
{

}




#titre_principal{
text-align: center;

    font-family: 'Kaushan Script', cursive;
text-shadow: white 0.1em 0.1em 0.3em;
    font-size: 2.4em;
    font-weight: normal;
color : hsl(99, 100%, 20%);
	background-color: rgba(255, 255, 255, 0.5);

	margin: 0px 0px -5px 0px;
        
	flex: 3;

	border-radius: 12px;
	box-shadow: 1px 1px 3px #000;
	  -moz-box-shadow: 1px 1px 3px #000;
	  -webkit-box-shadow: 1px 1px 3px #000;
}
.bmenu{
    padding: 0px;
    margin: 0px 0 10px 0;
    position: relative;
    
    
}
.bmenu li{
    font-size: 1em;
    display: inline;
    width: 100%;

}
.bmenu li a{
	display: inline-block;
	text-transform: uppercase;
        font-family: 'Kaushan Script', cursive;
       	box-shadow: 1px 1px 3px #000;
	  -moz-box-shadow: 1px 1px 3px #000;
	  -webkit-box-shadow: 1px 1px 3px #000;

	text-shadow: 1px 1px 2px rgba(115,159,2,0.3);
	color: black;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(115,159,2,1);
	letter-spacing: 1px;
	-webkit-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-ms-transform: skew(-12deg);
	transform: skew(-12deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
        
}
.bmenu:hover li a{
	color: rgb(45, 46, 45);
	text-shadow: 0px 0px 10px #fff;
            box-shadow: none;
	  -moz-box-shadow: none;
	  -webkit-box-shadow: none;
         
	background: rgba(255, 255, 255, 0.651);
	-webkit-transform: skew(0deg);
	-moz-transform: skew(0deg);
	-o-transform: skew(0deg);
	-ms-transform: skew(0deg);
	transform: skew(0deg);
}
.bmenu li a:hover{
	background:  rgba(115,159,2,1);
	text-shadow: 1px 1px 10px rgba(0,0,0,0.6);
	color: #000;
            	box-shadow: none;
	  -moz-box-shadow: none;
	  -webkit-box-shadow: none;
         
}


}
#menu{
}

.fit-picture{
    text-align: center;}

.bleua{

text-align: left;


    width: 100%;
    margin: 0 0px 10px 0px;

    position: relative;
    clear:both;
    flex: 1.2;

  
    border-radius: 10px;
    padding: 10px 0 0 0;

    font-size: 0.9em;
    float: left;
}
#b2{ 

        display: flex;
    flex-wrap: wrap;
    width: 100%;

    justify-content: space-between;


  
    position: relative;
    background-color: none;
    border-radius: 12px;
            margin: 0 0 0 -0.5em;

    font-size: 0.9em;
float: left;
}
.bleub{

float: left;
margin: 5px 8px 5px 8px;
}

.bleuc{
    

float: right;
margin: 5px -8px 5px 8px;
  
}
.bleub, .bleuc{
    
    padding: 0px 10px 5px 10px;
 
	text-decoration: none;
	flex: 1;
    max-width: 46%;
    min-height:150px;


  
}
.bleup{
    margin: 0 0px 15px 0px;
	flex: 1;
width: 99.2%;
float: left;
text-align: center;
	    background: rgb(255, 000, 255);
	    


}
	    

.bleup h1{
    font-family: 'Kaushan Script', cursive;
	font-size: 2em;
	color: blue;

}


.blancm{
    padding: 10px;
 
  
}
.bleum{
 
    padding: 10px;
	
  
}

.bleu{
   min-height:220px;
  
align-items: center;
  
}
.blanc{
    min-height:220px;
align-items: center;
  
}
.pictc{
 	       float: center; 
   margin: 1em 4em 1em 4em;

}
.pictr{
 	       float: right; 
   margin: 1em 4em 1em 4em;


}
.pictl{
 	       float: left; 
   margin: 1em 4em 1em 4em;

}
.pict{
 	       float: left; 
   margin: 0 2em 1em 0em;
}
.pic{


 	       float: left; 
   margin: 1em 36% 1em 36%;
      width: 200px;
}

#multi{
      display: flex;
 text-align:center;

justify-content: space-around;


    flex: 1.2;
    position: relative;
    background-color: none;
  
}

.ach{
   text-align:center; font-size: 1.4em; margin: 0px; padding:0px;     float: right;
}

.tb{
     font-size: 1.3em; 
     	line-height: 1.9em;
    padding: 1.5em 0.5em 1.5em 0.5em;
}

.tprod{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -100px;
}
section
{
display: inline-block;
    width: 99%;
            margin: 10px 0px 5px 10px;
	         
}
article, aside
{
    text-align: justify-all;


}
article
{
flex: 1.3;
    position: relative;
    
    background: rgba(255, 255, 255, 0.98);
   

    box-shadow: 1px 1px 3px #000;
    	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
    border-radius: 12px;
    padding: 1.5em 0.5em 1.5em 0.5em;
    color: none;
    font-size: 1.5em;



}

article p
{
      flex: 1.2;
    position: relative;
    font-size: 1.5em;
   margin: 1em 4em 1em 4em;

}

article h2
{
   margin: 1em 4em 1em 4em;
text-align:center;
    font-family: 'Kaushan Script', cursive;
background: #739f02;
    border-radius: 10px;
    box-shadow: 0px 2px 5px #1c1a19;

        font-size: 20px;


}

#ap h2{
      font-family: 'Kaushan Script', cursive;
    text-transform: uppercase;
    font-weight: normal;
        font-size: 20px;
}


aside{

    display: flex;
    flex-wrap: wrap;
     width: 100%;
     


  


  
    position: relative;
    background-color: none;
    border-radius: 12px;
            margin: 0 0 0 -0.5em;

    font-size: 0.9em;
float: left;
     
       justify-content: space-around;
     
     

}


#d img,#e img,#f img,#g img
{
        border-radius: 10px 10px 10px 10px;
	       float: none;
	              margin: 0 5% 0 5%;

}

#ap{


   width:100%;

        display: flex;
  

justify-content: space-around;


    flex: 1.2;
    position: relative;
    background-color: none;
    border-radius: 12px;
    margin: auto;

    font-size: 0.9em;
float: left;

}


#pa, #pb, #pc
{ 
      text-align: center;
  border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
    padding: 0px 10px 5px 10px;
    margin: 0px 5px 10px 5px;

    color: #000;

    flex: 1.3;
       
         background: rgb(209, 219, 255);
      	background: -moz-linear-gradient(#d1dbff, #fff);
	background: -webkit-linear-gradient(#d1dbff, #fff);
	background: -o-linear-gradient(#d1dbff, #fff);
 display: flex;
             flex-direction: column; 
	      justify-content: center;
        

	font-family: Arial, Helvetica, sans-serif;

	
	



}

#d, #e, #f, #g
{
    text-align: center;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
    padding: 0px 10px 5px 10px;
    margin: 0px 0px 10px 15px;
background: #739f02;
    color: #000;

   flex: 1;
    width: 100%;
 
       
       

	font-family: Arial, Helvetica, sans-serif;


	line-height: 25px;

	right: 1.5%;
	text-align: center;
	top: 13px;
min-width: 7%;
	text-decoration: none;

	
}


.tbl
{
    border-collapse: collapse; 
    text-align:center;
}
.tbl td
{
    border: 1px solid black;
}


footer{

             float: left;
	     text-align: center;
	         width: 100%;
}




@media only screen and (max-width:1361px) {

.bleub{

float: left;
   margin: 0px 0px 10px 0px;

}

.bleuc{
    

float: right;
   margin: 0px 0px 10px 0px;
    
}
#b2{ 


            margin: 0 0 0 0;


}

}
@media only screen and (max-width:750px) {
body
{
    /*background-image: none;*/
    
margin-left: 1%;
margin-right: 1%;

}    
    
#titre_principal{

    font-size: 2em;
    
}
article h2
{
   

        font-size: 18px;


}
.tprod{

    margin-left: none;
    margin-right: -20%;
}
.bleub, .bleuc{
    
   
    min-width: 97%;
   


  
}

}
@media only screen and (max-width:360px) {
   
    
#titre_principal{

    font-size: 1.5em;
    
}


}

@media only screen and (max-width:1050px) {
/*
.bleub{

float: left;
   margin: 5px -5px 5px 8px;
}

.bleuc{
    

float: right;
   margin: 5px -8px 5px 0px;
  
}*/

.bleub, .bleuc{
    
   
    max-width: 47%;
   


  
}
body
{
    /*background-image: none;*/
    
margin-left: 1%;
margin-right: 1%;

}    

}