body {
margin: 0;
padding: 0;
 background: none;
  font-size: 100%;
      }

#bloc_page{
	     width: 1200px;
	     margin: auto;
          background:#b1f0c9;
            border-radius: 15px;
           }
/* haut | droit | bas | gauche */

/* Eléments principaux de la page */


/* Header */

header
{
   width: 100%;
   height: auto;
    display: flex;
    flex-direction: column;
    justify-content:center;
 background:none;
  
        margin:auto ;
		 padding: auto;
      
    }
	
	
	
	
 .marquee {
            overflow: hidden;
			
            white-space: nowrap;
            width: 90%;
            background:none;
			margin: 1% 1% 1% 1%;
        }

       .marquee-content {
		  
		    font-size: 1.1em;
			color: #034017;
            font-weight: normal;
            display: inline-block;
            padding-left: 100%;
            animation: defilement 20s linear infinite;
        }

       .marquee-content:hover {
            animation-play-state: paused;
        }
        @keyframes defilement {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }	
	

#articlehaut
{
   
   width: 100%;
   height: auto;
 margin: 1% 1% 1% 1%;
background: none;
}

/* haut | droit | bas | gauche */

#articlehaut H1
 {  
	top: 2px;
	  text-align:left;
	
        margin: auto;

}

#articlehaut img
 { width:15%;
 height: auto;
 margin: 1% 1% 1% 1%;
 }	
 
  /* haut | droit | bas | gauche */
 /* le slider sur page accueil */


/* Nous donnons à la fenêtre une largeur de 80% pour la rendre responsive,
et une largeur maximum (max-width) qui correspond à la largeur naturelle d’une image individuelle
 (1200px dans notre exemple), car nous ne souhaitons pas qu’une image soit agrandie */
div#slider {
    width: 100%;
	 max-width: 1400px;
	  overflow: hidden ;
	  margin: auto;
	                  }



/*  Dans notre CSS, la largeur de l’élément figure est un pourcentage, qui est un multiple de la div qui le contient.
   Autrement dit, si la bande d’images contient cinq images, et que notre div n’en montre qu’une, la figure est 5x plus large,
    c’est à dire 500% la largeur de la div container   */

    div#slider figure {
     position: relative;
      width: 500%;
      margin: 0;
      padding: 0;
      font-size: 0;
     text-align: left;
      
                        }


 /* La font-size: 0 aspire l’air autout de l’élément figure en retirant tout espace entre les images et autour. position: relative permet à la figure
 d’être déplacée facilement pendant l’animation. text-align: left est là en raison d’un bug de Safari 5 pour Windows.
Nous devons répartir les images de manière régulière à l’intérieur de la bande. Le calcul est très simple : Si nous considérons que
 l’élément figure fait 100% de large, chaque image doit prendre 1/5 de l’espace horizontal
100% / 5 = 20%  */

 div#slider figure img {
      width: 20%;
	  height: auto;
	   float: left;
	  
	                  }
	
/* (Ici aussi, float: left sert à corriger un bug de Win Safari 5).Enfin, nous cachons ce qui dépasse (overflow) de la div 	*/


	
 /* Il nous faut maintenant déplacer la bande de droite à gauche. Si on considère que la div container fait 100% de large,
 chaque mouvement de la bande vers la gauche sera mesuré en incréments de cette distance */

 @keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
                          }	

/* Chaque image du carrousel sera affichée dans la div pour 20% de la durée totale de l’animation, le temps de déplacement étant de 5%
Il ne nous reste plus qu’à appeler notre animation pour que les choses commencent (le code est indiqué ici sans préfixes constructeurs,
pour la simplicité, mais il ne faudra pas les oublier, vous pouvez utiliser Autoprefixer pour cela). */

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
 
                  }




   /* haut | droit | bas | gauche */
   
/* leSLIDE */

 


.slide-right {
   width: 100%;
  overflow: hidden;
  margin:auto;
  max-width: 1200px;

}


.slide-right span {
   
  animation: 2s slide-right 0.5s forwards;
    transform:translateX(-100%);

}



	


@keyframes slide-right {
  to {
    transform:translateX(0); 
  }

}
 /* haut | droit | bas | gauche */

 articleslide {	
             float: none;
			  width:100%;
			
             color: #ffffcc;
			   font-family: Dayrom, serif;
			    font-size: 1.1em;
	         background: none;
		   margin: auto;
			  padding: 0;
			  }

     
articleslide img {
	    height: 100%;
        width : auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
       border-radius: none; 
              } 


P.flotte  {

width:65%;
text-align: justify;
  margin: 1% 3% 1% 3%;

}

P.flotte1  {

width:90%;
text-align: justify;
  margin: 1% 3% 1% 3%;

}


img.flotte 
             { 
			float:right;
			 width:35%;
			  margin: 1% 3% 1% 3%;
                height: auto;
                 
				 
              }
img.flotte1 
             { 
			float:left;
			 width:35%;
			  margin: 1% 3% 1% 3%;
                height: auto;
                 
				 
              }
			  			  
			  
			  
H3.flotte {
         font-size: 150%;
          width:100%;
         
         margin: 1% 1% 1% 1%;

}			  

H1.flotte  {
         font-size: 150%;
          width:100%;
         
         margin: 4% 1% 1% 1%;

}

H3.flotte1 {
         font-size: 150%;
          width:100%;
         
         margin: 1% 1% 1% 1%;

}			  

H1.flotte1  {
         font-size: 150%;
          width:100%;
         
         margin: 4% 1% 1% 1%;

}	
			
nav P
    {
    font-size: 250%;
    color: transparent;
background:#323d36;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5);
 margin: 0;
    text-align: center;
    font-weight: bold;
   }

.letexte
    {
    font-size: 200%;
    color: transparent;
background:#323d36;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5);
 margin: auto;
    text-align: center;
    font-weight: bold;
   }



/* haut | droit | bas | gauche */
H1
  {text-align: center;

  }


section1 H1
  {text-align: center;

  }





nav
  { position: absolute;
   top: 10px;
  background: none;
  z-index :3;
 padding: 0 0 0 15%;/* centrer menu */
 
   width: auto;
   height: auto;
   margin: 0 1% 0 1%;
    
   }
   
.creation
  { position: absolute;
   top: 10px;
  background: none;
  z-index :3;
 padding: 0 0 0 25%;/* centrer menu */
 
   width: auto;
   height: auto;
   margin: 0 1% 0 1%;
    
   }  

/* haut | droit | bas | gauche */


#menu {	
       padding: 0% 0% 0% 0%; }

#menu { height: 28px;


		 }

ul.afficher, ul.masquer {
                          height: 28px;}



 /* Détails pour le menu de navigation */
#menu li { float: left;
           list-style-type: none;
           line-height: 18px;
		    margin-right: 10px; /* espace entre boutons*/
			margin-left: 10px;
			color: #E68A09;
					 }




			

#menu li a, #menu li a.visited {
     display: block;
	 background: #47855B;
	  box-shadow: 2px 2px 2px #233027;
     text-decoration: none;
    /*bottom: 2px;*/
    border-radius: 15px;
    font-size: 100%;
     font-weight: bold;
    text-align: center;
     padding: 5px 6px 5px 6px;   /* taille des boutons*/
    color: #FFFFFF;
                                   }

#menu li a.hover {
  color: lavender;
    border-bottom: 3px solid #1c1a19; }


#menu li a.active {
     display: block;
	 background:#EFFCF3 ;
	  box-shadow: 2px 2px 2px #000099;
     text-decoration: none;
    /*bottom: 2px;*/
    border-radius: 15px;
    font-size: 90%;
     font-weight: bold;
    text-align: center;
     padding: 5px 6px 5px 6px;   /* taille des boutons*/
    color: #1c1a19;
                                   }
								   
								   
/* haut bas| droit gauche */								   



   	


/* Corps */



article5 {	
             float: none;
			 
			 width:99%;
	        font-size: 0.9rem;
	          background: none;
			    font-weight: normal;
			    
			 text-align: center;
			  color: #000000;
			  
			  border-radius: 10px;
			  margin: 1% 1% 1% 1%;
			  padding:1% 0.5% 1% 0.5%;
			  }

/* haut | droit | bas | gauche */

article01
    { 
       float: none;
       width:100%;
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: normal;
				
			 background: #FFFFFF;
			  color: #1C6463;
			 margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }




	
article1
    { 
       float: none;
      column-count: 3;
  column-gap: 20px;
  column-rule: solid green;
	  
  	 	       
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: normal;
			
			 background: #FFFFFF;
			  color: #1C6463;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }
 /* haut | droit | bas | gauche */     
      
 article11
    {
       float: none;
       width:47%;
	           text-align: justify;
			    font-weight: normal;
			border: 2px ridge #0bb549;	
			
			 background: #FFFFFF;
			  color: #021212;
			 margin: 1% 0.2% 1% 1%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }
	  
article011
    {
      float: none;
       width:100%;
	  
  	 	        
	       
	           text-align: justify;
			    font-weight: normal;
			border: 2px ridge #0bb549;		
			 background: #FFFFFF;
			  color: #021212;
			   margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }	  
	  
articledocument
    {
       float: none;
       width:17%;
	  
  	 	        font-size: 90%;
	       
	           text-align: justify;
			    font-weight: normal;
			border: 2px ridge #0bb549;		
			 background: #FFFFFF;
			  color: #021212;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }
	  
	  
	  
	  
	article012
    {
       float: none;
       width:100%;
	  
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
				
			  color: #1C6463;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }  
	  
	  
	  article111
    {
       float: none;
       width:31%;
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: normal;
			border: 2px ridge #E68A09;		
			 background: #FFFFFF;
			  color: #1C6463;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }  
	  
/* haut | droit | bas | gauche */	
	
	  article12
    {
       float: none;
       width:100%;
	  
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
				
			  color: #1C6463;
			 margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0,5%;
			
      }
	  
	  
	 articlelien
    {
       float: none;
       width:100%;
	  
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
				
			  color: #1C6463;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }  

article112
    {
       float: none;
       width:47%;
	  
	  
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: bold;
				
			  color: #1C6463;
			  margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }	 

article100
    {
       float: none;
       width:48%;
	        
	           text-align: justify;
			    font-weight:normal;
				border: 2px ridge #0bb549;	
               	border-right-style: none;			
			 background: #FFFFFF;
			  color: #074241;
			 margin: 1% 0 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
      }	
	article1001
    {
       float: none;
       width:51%;
	   
	           text-align: justify;
			    font-weight:normal;
				border: 2px ridge #0bb549;	
               	border-right-style: none;			
			 background: #FFFFFF;
			  color: #074241;
			 margin: 1% 0 1% 1%;
			  padding: 1% 0.5% 1% 0.5%;
      }	


/* haut | droit | bas | gauche */		  

article200
    {
       display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
     -moz-flex-direction: row;
    justify-content:space-between;
      width: 100%;
	        
	           text-align: justify;
			    font-weight:normal;
				border: 2px ridge #0bb549;	
               	border-right-style: none;			
			 background: #FFFFFF;
			  color: #074241;
			 margin: 1% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
      }	

 
	  
	article101
    {
     
       width:48%;	  
	  
  	 	      
	         	border-left-style: none; 
	           justify-content: center;
               align-items: center;
			    font-weight:normal;
				border: 2px ridge #0bb549;	
               	border-left-style: none;                    				
			 background: #FFFFFF;
			  color: #074241;
			  margin: 1% 0.5% 1% 0;
			  padding: 1% 0.5% 1% 0.5%;
			
      }	
article1011
    {
     
       width:45%;	  
	 
  	 	      
	         	border-left-style: none; 
	           justify-content: center;
			   align-content: center;
               align-items: center;
			    font-weight:normal;
				border: 2px ridge #0bb549;	
               	border-left-style: none;                    				
			  background:#FFFFFF;
			  color: #074241;
			  margin: 1% 0.5% 1% 0;
			  padding: 1% 0.5% 1% 0.5%;
			
      }	 	  
  
	  
/* haut | droit | bas | gauche */	

 	  
	  
	/* haut | droit | bas | gauche */

articleinscription
    {
      display: flex;
      flex-direction: column;
        justify-content: space-between;
    
       width: 47%;
  	 	        font-size: 0.9rem;
	          border-radius: 10px;
	           text-align: left;
			    font-weight: bold;
		     border: 2px ridge #ff9970;
			 background: #FFFFFF;
			   
			  color: #1C6463;
			  margin: 4% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }

	
      
  article
    {
      display: flex;
      flex-direction: column;
        justify-content: space-between;
    
       width: 47%;
  	 	        font-size: 0.9rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
		     border: 2px ridge #ff9970;
			 background: #FFFFFF;
			   
			  color: #1C6463;
			  margin: 4% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }
	  
	articlerendu
    {
      display: flex;
      flex-direction: column;
        justify-content: space-between;
    
       width: 47%;
  	 	        font-size: 0.9rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
		     border: 2px ridge #ff9970;
			 background: #FFFFFF;
			   
			  color: #1C6463;
			  margin: 4% 0.5% 1% 0.5%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }  

  articlecarre
    {
      display: flex;
	  flex-direction: column;
     
    justify-content:space-evenly;
    
       width: 100%;
  	 	       
	          border-radius: 10px;
	           text-align: left;
			    font-weight: bold;
		     background: none;
			 
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }
	  

		  
	  
	  
	  
	  
	  /* haut | droit | bas | gauche */
	  
	articlecarre a, article100 a, article101 a, article01 a, article1001 a, articlelien a {
    
	 width: auto;
	 background: #47855B;
	  box-shadow: 2px 2px 2px #233027;
     text-decoration: none;
    /*bottom: 2px;*/
    border-radius: 10px;
    font-size: 100%;
     font-weight: bold;
    text-align: center;
     padding: 4px 5px 4px 5px;   /* taille des boutons*/
    color: #FFFFFF;
                                   }  
								   
.lelien {
    
	 width: auto;
	 background: #47855B;
	  box-shadow: 2px 2px 2px #233027;
     text-decoration: none;
    /*bottom: 2px;*/
    border-radius: 10px;
    font-size: 100%;
     font-weight: bold;
    text-align: center;
     padding: 4px 5px 4px 5px;   /* taille des boutons*/
    color: #FFFFFF;
                                   }  	

								   
.lien a, aside a, aside1 img, aside10 img,  H2 a
{
/* Les liens ne seront plus soulignés */
text-decoration: underline;
font-size: 100%;
 background:none;
  border-radius:none;
  color: blue;
   box-shadow: none;
   
			
 /* Les liens seront en rouge au lieu de bleu */

}						   
.lien
{
/* Les liens ne seront plus soulignés */

font-size: 100%;
 
   
			
 /* Les liens seront en rouge au lieu de bleu */

}			  
	  
	articlevideo
    {
      display: flex;
	  flex-direction: column;
     
    justify-content:space-evenly;
    
       width: 95%;
  	 	       
	          border-radius: 10px;
	           text-align: left;
			    font-weight: bold;
		     background: none;
			 
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }  
	  
	  
 articlecarredocument
    {
      display: flex;
	  flex-direction: column;
     
    justify-content:space-evenly;
    
       width: 50%;
  	 	       
	          border-radius: 10px;
	           text-align: left;
			    font-weight: bold;
		     background: none;
			 
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }	 
      
     
articlesouscarre
    {
      
     float: none;
     
       width:100%;
       height: auto;
  	 	      
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: bold;
			  background: none;
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }
	  
 
	  
      
 articlesouscarresans
    {

       float: none;

       width: 100%;
       height: 100%;
  	 	      
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: bold;
			 background: none;
			  color: #1C6463;
			  margin: auto;
			  padding: auto;
			
      }
  
 aside
    {
     display: flex;
	 flex-direction: column;
    justify-content:space-between;
       width:100%;
	  height:auto;
         align-items: center;
            justify-content:center; 
  	 	      
	           text-align: center;
			    font-weight: bold;
			 background: none;
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }
	  
	  aside10
    {
     display: flex;
	 flex-direction: column;
    justify-content:space-between;
       width:100%;
	  height: auto;
         align-items: center;
             justify-content: left; 
  	 	      overflow: hidden ;
	           text-align: center;
			    font-weight: bold;
			 background: none;
			  color: #074241;
			  margin: 0;
			  padding: 0;
			
      }
	  
aside10 
      { display: none;
}	  
	  
	  
aside1
    { display: flex;
	 flex-direction: column;
    justify-content:space-between;
       width:auto;
	  height: 400px;
         align-items: center;
            justify-content:top; 
  	 	      overflow: hidden ; 
	         
	           text-align: center;
			    font-weight: bold;
			 background: none;
			  color: #074241;
			  margin: auto;
			  padding: auto;
			
      }	  

	  

	  	  
	  
	  
  
photo2
    {
     display: flex;
	 flex-direction: column;
    justify-content:space-between;
       width: 100%;
         
  	 	        font-size: 0.8rem;
	          border-radius: 10px;
	           text-align: center;
			    font-weight: bold;
			 background: none;
			  color: #1C6463;
			  margin: auto;
			  padding: auto;
			
      }
      
 article10
    {
       display: flex;
       
    justify-content:space-around;
       width: 98%;
  	 	        font-size: 1.0rem;
	          border-radius: 10px;
	           text-align: justify;
			    font-weight: bold;
			 background: #B0F2B6;
			  color: #1C6463;
			  margin: 2% 2% 2% 2%;
			  padding: 1% 0.5% 1% 0.5%;
			
      }
      
 /* haut | droit | bas | gauche */
 
 articleinscription img
             { max-width:90%;
               height: auto;
                
              }    

articlerendu img
             { max-width:100%;
               height: 300px;
                 border-radius: 10px;
              }
article img, article5 img, article10 img, article11 img, aside img, aside1 img, article112 img, aside10 img
             { 
			
			max-width:100%;
               height: auto;
                 border-radius: 10px;
			
              }
			  
photo2 img
             { 
			
			 width:60%;
			
                height: auto;
                 border-radius: 10px;
              } 

 
#img:active{
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari and Chrome */

}
              
#image
	   {
			
			 width: 40%;
			  text-align: center;
                height: auto;
                 border-radius: 10px;
              }


      
 
/* haut | droit | bas | gauche */

      
section
     {
     display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
     -moz-flex-direction: row;
    justify-content:space-between;
   
        margin: auto;
   
}

section1
	{ 
	display: flex;
       width:100%;
    text-align: center;
     flex-wrap: wrap;
     margin: auto;
	
	   }


section2
	{ 
	display: flex;
       width:90%;
    text-align: center;
     flex-wrap: wrap;
	 	border: 2px ridge #E68A09;		
	  background: #ffffff; 
     margin: auto;
	   }


/* haut | droit | bas | gauche */
   
article1 H1, article5 H1, articlecarre H1, article11 H1, article12 H1, article112 H1, article111 H1, article H1, article100 H1, article101 H1, article1001 H1, article1011 H1
                       {    font-size: 130%;                      
			                color: #FF0000;
                            text-shadow: 0,5px 0,5px 0,5px rgba(139,0,0,0.5);
                            text-align: center;
							 margin: 0 0 1% 0;
                         }
						 
article01 H1
                       {    font-size: 130%;                      
			                color: #FF0000;
                            text-shadow: 1px 1px 1px rgba(139,0,0,0.5);
                            text-align: center;
							 margin: 0 0 1% 0;
                         }						 
						 
article1 H3, article5 H3, article11 H3, article12 H3, article111 H3, article H3, article100 H3, article1001 H3
                       {                        
			                color: #044002;
                            font-weight: bold;
                            text-align: center;
							margin: 2px 2px;
                         }	
						 
 articlecarre H3, article01 H3
                       {                        
			                color: #044002;
                            font-weight: bold;
                            text-align: left;
							margin: 2px 2px;
                         }							 
						 

article11 H5, articlevideo H5, H5
                       {    font-size: 110%;                      
			                color: #fa021f;
                            font-weight: bold;
                            text-align: center;
							margin: auto;
                         }	
						 
.indexmoche H2	  {
	    color: #ffffff;
                   background: #f54242;
                   font-size: 130%; 
				   font-weight: bold;
                    text-align: center;
					padding: 5px;
					margin: 10px 5px 0 5px;
}
					 						 
						 
article112 H2, article100 H2, articlesouscarre H2, article1001 H2, article1011 H2, article101 H2  { 

                   color: #ffffff;
                   background: #f54242;
                   font-size: 130%; 
				   font-weight: bold;
                    text-align: center;
					padding: 5px;
					margin: 10px 5px 0 5px;
                  }		

					 						 
articleinscription P
                               { 
                             
                                 font-size: 100%;
								  color: #074f4f;
                                  margin-bottom: 5px;
                                 font-weight: normal;
                                  padding: 1%;
                                text-align: justify;

                                     }						 


					 
						 
article1 P, article11 P, article5 P, articlesouscarre P, articlecarre P, articlesouscarresans P, article100 P, article1001 P
                               { 
                             
                                 font-size: 100%;
								  color: #021212;
                                  margin-bottom: 5px;
                                 font-weight: normal;
                                  padding: 1%;
                                text-align: justify;

                                     }
articlecarre H4, H4
                               { 
                             
                                 font-size: 100%;
								  color: #000000;
                                  margin-bottom: 5px;
                                 font-weight: bold;
                                  padding: 1%;
                                text-align: left;

                                     }
									 

									 

.endroit
             {	
           font-size: 120%;
          color: #f70713;
          font-weight: bold;
          text-align: center;
		   background: #48faeb;
      	margin: 12px 12px;
                     }							
									 
article01 P
                               { 
                             
                                 font-size: 100%;
                                  margin-bottom: 10px;
                                 font-weight: normal;
                                  padding: 4px;
								   color: #3a393b;
                                text-align: justify;
   }

     
								 
									 
  
   
						 
									 
 article10 P
                     {
					       width: 60%;
                            font-size: 1.0em;
                             margin-bottom: 10px;
                             font-weight: normal;
                               padding: 10px;
                             text-align: justify;

                                     }
/* haut | droit | bas | gauche */  
                                     
                            
                                     
 article10 span {
              width: auto;

              font-size: 1.1rem;

            font-weight: bold;

              margin: auto;
             padding: auto;
	     }
	
	
 #inscrit {     display: none;
               position: absolute;

	           top: 0px;
                background: none;
              width: auto;
              color: #000000;
              font-size: 1.0rem;
	           font-weight: bold;
              text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
              margin: auto;
              padding: auto;
	     }



#formule, formule1 {
    width: 100%;
	
}

#formule div {
    text-align: right;
}
#formule1 div {
    text-align: left;
}

#gauche {
    float: left;
    width: 32%;	

}		  
#droite {
    float: left;
    width: 100%;	

}		
	
#formuleaccueil {
    width: 100%;
	
}
	                  

/* Footer */

footer
{
    display: flex;
     flex-direction: column;
     background: none;
			   
	   
    
         }

footer a
{
	
	 font-size: 1.0rem;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
   margin:auto;
   text-align: center;
      
	
       
	   
}

footer P
{
    font-size: 1.0rem;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
   margin:auto;
   text-align: center;
}


footer input[type=email]
	    {
         width: 25%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }


footer H1
{
    font-size: 1.1rem;
    color: #48474a;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
   margin:auto;
   text-align: center;
}

footer img
{     width: 3%;;
    
	
}
/* haut | droit | bas | gauche */




table,
td {
	width: auto;
	 margin:3px 1px 3px 1px;
	 padding:2px 2px 2px 2px;
	border-collapse: collapse;
  border: solid 1px;
	 background-color:#ffffff;
	 font-size: 0.8rem;
}

table,
th {
	width: auto;
	margin:3px 1px 3px 1px;
	 padding:2px 2px 2px 2px;
  border-collapse: collapse;
  border: solid 1px;
	 background-color:#ADEBB3;
	 font-size: 0.8rem;
	 
}





	
input[type=text], input[type=email], input[type=number], input[type=date], input[type=tel]
	    {
         width: 65%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }
	  
	  
#formuleaccueil .box10 {
   width: 20%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
	   
   }   	  
	  
	  
#formuleaccueil input[type=text], #formuleaccueil input[type=email]
	    {
         width: 46%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }
 
  
	  
	  
#formulelesoutil .box5 {
   width: 60%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
	   
   } 	  
				 
#formulelesoutil input[type=number], #formuleaccueil input[type=email]
	    {
         width: 10%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }	  
 
  

#formuleaccueil input[type=number], #formuleaccueil input[type=time], #formuleaccueil input[type=date]
	    {
         width: 12%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }
	  
#formuleaccueil input[name=guide]
{
         width: 40%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }

#formuleaccueil input[name=monmail]
        {
         width: 15%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  } 
#formuleaccueil input[name=classement]
        {
         width: 7%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }
	  
#formuleaccueil textarea {
  width: 90%;
  height: 120px;
  padding: 10px 10px;
   margin: 0px 0px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  resize: none;
}		  

#formulelesoutil textarea {
  width: 65%;
  height: 150px; 
  padding: 10px 10px;
   margin: 0px 0px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  resize: none;
}

#formuleinscription input[type=text], #formuleinscription input[type=tel], #formuleinscription input[type=email], #formuleinscription .box5, #formuleinscription H4
	    {
         width: 90%;
		 font-size: 100%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }	


#formulederoulant input[type=text]
	    {
         width: 90%;
		 font-size: 100%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }

#formulederoulant textarea
	    {
         width: 90%;
		 height:100px;
		 font-size: 100%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }		  


#formuleimprime input[type=text]
	    {
         width: 95%;
		 font-size: 90%;
         padding: 10px 10px;
       margin: 5px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  }
	  
	  
#adressefac
    {
        display:none;
    }	  

	  
.boxphoto {
   width: auto;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
   }	

.boxphototitre {
   width: 32%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color:#f8f8f8;
       border: 2px solid #ccc;
       font-weight: bold;
      border-radius: 5px;
      text-align: center;
      }


	  
.box {
   width: 47%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
	   
   }
   
.box10 {
   width: 50%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
	   
   } 

.boxinscription {
   width: 95%;
   font-weight: bold;
         padding: 10px 10px;
       margin: 0px 0px;
	   font-size: 0.8rem;
       color: #5B38BA;
       background-color: #f8f8f8;
      
      border-radius: 5px;
       box-sizing: border-box;
   }
   
 .box5 {
   width: 65%;
   font-weight: bold;
         padding: 10px 10px;
       margin: 0px 0px;
	   font-size: 0.8rem;
       color: #5B38BA;
       background-color: #f8f8f8;
       border: 2px solid #FF9970;
      border-radius: 5px;
       box-sizing: border-box;
   }
   
   
 .box1 {
   width: 20%;
   font-weight: bold;
         padding: 10px 10px;
       margin: 0px 0px;
	   font-size: 0.8rem;
       color: #5B38BA;
       background-color: #f8f8f8;
       border: 2px solid #FF9970;
      border-radius: 5px;
       box-sizing: border-box;
   }
   
   .boxarchives {
   width: 20%;
   font-weight: bold;
         padding: 5px 5px;
       margin: 5px 0px;
	   font-size: 0.8rem;
       color: #5B38BA;
       background-color: #f8f8f8;
       border: 2px solid #FF9970;
      border-radius: 5px;
       box-sizing: border-box;
   }  
   
  .boxarchives1 {
   width: 20%;
   font-weight: bold;
         padding: 5px 5px;
       margin: 5px 0px;
	   font-size: 0.8rem;
       color: #5B38BA;
       background-color: #f8f8f8;
       border: 2px solid #FF9970;
      border-radius: 5px;
       box-sizing: border-box;
   } 
   
  #formulelesarchives input[type=search]
              {
         width: 20%;
         padding: 5px 5px;
       margin: 5px 5px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
       
	  } 
   
   
.box2 {
   width: 20%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
   }
   
.box3 {
   width: 15%;
         padding: 10px 10px;
       margin: 0px 0px;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
   }
   
   	
textarea {
  width: 92%;
  height: 400px;
  padding: 10px 10px;
   margin: 0px 0px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  resize: none;
}	

article12 textarea {
  width: 92%;
  height: 300px;
  padding: 10px 10px;
   margin: 0px 0px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f8f8f8;
  resize: none;
}


input[submit]
	    {
   background-color: #04AA6D;
  border: none;
  color: white;
  padding: 10px 10px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  text-align: center;
	   }
	   

 
	   
	   

/*_____________________________________ 1024 ______________________________________________________________________________________________________ */

@media all and (min-width: 801px) and (max-width: 1199px) {
/* haut | droit | bas | gauche */
body {

  font-size: 90%;
      }


#bloc_page{
	     width: 100%;
	     margin: auto;


           }
		   
 articleslide{

 margin:  2% 1% 0 1%;
      } 		   
		   
nav P
    {
    font-size: 175%;
    text-align: center;
   }

 .letexte
    {
    font-size: 175%;
    text-align: center;
   
   }  
  
		   
  nav
  { 
 
 padding: 0 0 0 22%;/* centrer menu */
    
   }   
   
#menu li a, #menu li a.visited {
    
    font-size: 85%;
     font-weight: bold;  
     padding: 2px 3px 2px 3px;   /* taille des boutons*/
   
                                   }   
								   
#menu li a.active {
   
    font-size: 85%;
    
     padding: 2px 3px 2px 3px;   /* taille des boutons*/
    
                                   }								   
   
   
 .creation
  { 
 padding: 0 0 0 27%;/* centrer menu */
 
    
   }  

    article H1, article1 H1, article5 H1, article11 H1, article111 H1, article12 H1, article01 H1
{
   font-size:100%;
   
   }

 article1 P, article5 P, article10 P, articlesouscarre P,  article01 P,  article11 P
            {
   font-size: 100%;
   text-align: justify;

   }
   
	
	  
   
 /* haut | droit | bas | gauche */  
   
 H4
                         {                             
                          font-size: 80%;
								 

                           }		  
   
 article1
    {            
  column-count: 2; 	   	 	    			
      }  
	  


/* haut | droit | bas | gauche */	  
	  
	  
	  
   
articlesouscarre a, articlesouscarresans a
{
   font-size: 0.9em;
   color: #1650e0;
   text-decoration:underline; 
   font-weight: bold;
      text-shadow: 0.5px 0.5px 0.5px rgba(139,0,0,0.5);
   }  
   

 
form input[type=email]
	    {
         width: 25%;
        
	  } 
   
   input[type=text], input[type=email], input[type=number]
	    {
         width: 65%;
        
	  }
	  
#gauche {
    float: left;
    width: 50%;	

}	  
   
  
article111
    {
      width:47%;	  
    }     
   
   

#menu li a, #menu li a:visited {
     
	  font-size: 90%;
    border-radius: 15px;    
     font-weight: bold;
   
  
                                   }

#menu li { 
           line-height: 18px;
		    margin-right: 4px; /* espace entre boutons*/
			margin-left: 4px;
			
					 }

/* haut | droit | bas | gauche */
#articlehaut
{
   
   margin: 0 1% 1% 1%;

}

#articlehaut img
 { width:15%;
 
 } 

  span
  {

   top: 10px;
   right: 10px;
   font-size: 80%;
   

  }
	
      

.box1 {
   width: 50%;
         }
 
#formuleaccueil input[type=number], #formuleaccueil input[type=time], #formuleaccueil input[type=date]
	    {
         width: 120px;
         
       
	  }
	  
	  
aside1
    { 
	  height: 300px;
        
			
      }	 
	  

	  


}








 
 /*_____________________________________ 200 ______________________________________________________________________________________________________ */
  
 @media all and (min-width: 200px) and (max-width: 800px) { 
 
body {

  font-size: 90%;
      } 
 
#bloc_page{
	     width: 99%;
	      margin: auto;
	    }
		
header
{
   
    flex-direction: column;
   width: 98%;
    margin:auto ;
		 padding: auto;
    }
	
	
articleslide{

 display: block;
 margin:  -35px 0 0 0;
      } 	
	



#articlehaut
{
   
   width: 100%;
   height: auto;
   margin: 1% 1% 1% 1%;

}	
/* haut | droit | bas | gauche     */		
		
#articlehaut H1
 {  
	
	  text-align: center;
	
        margin: auto;

}

	
#articlehaut img
 { width:18%;
    margin: 4% 1% 1% 1%;
 }	

span
  {

   top: 20px;
   right: 2px;
   font-size: 80%;
   

  }



.mobile {
           display: block;
		   display: inline-block;
		    cursor: pointer;
			}
	
 #menu {
	      position: absolute;
	
	      padding: 0 0 10px 0;
	      top: 0px;  /* hauteur menu */
	      left: 6px;
	      z-index: -1;
         }
/* haut | droit | bas | gauche */



 nav  {
  width: 90%;
  top: 1px;
  left: 0px;
 padding: 0 0 0 0;

 }

nav P
    {
    font-size: 110%;
     margin: 0 0 4% 0;
    text-align: center;
   
   }
   
.letexte
    {
    font-size: 110%;
     margin: 0 0 4% 0;
    text-align: center;
   
   }
  


  #menu, #menu.masquer {
            height: 20px; /* taille hauteur bouton menu*/
			width: 90%;/* largeur menu deroulant */
		}
						


  #menu.afficher {
	               height: auto;
				 background:#ffffff;
	            border-radius: 5px;
				 }
	
	
	
#menu {

transition: height 0.2s linear;
-webkit-transition: height 0.2s linear;
-moz-transition: height 0.2s linear;
-o-transition: height 0.2s linear;
transition: height 0.2s linear;
        overflow: hidden;
        border-bottom: none;
        background: none;
		
		 } 
	
	
	
	
#menu li {
          float: none;
          list-style-type: none;
          line-height: 8px;
         border-bottom: solid 1px black;
            border-radius: 0px;
			background:none;      }

 #menu li a, #menu li a.visited, #menu li a.active {

     display: block;
      background:none;
   padding: 15px 0;
   font-family: Arial, sans-serif;
  font-size: 1.0em;
   font-weight: bold;
   box-shadow:none;

  color: #47855B;
   text-shadow: white 2px 0 0;
  text-decoration: none; }


 #menu li a.hover {
  background-color: none;
  background: #00001;
   border-radius: 0px;
  color: #000011;
   text-shadow: none; }




#menutitre { display: block;
             width: 100%;
			 line-height: 3em;			
             background-color: #47855B;
            background: linear-gradient(whitesmoke, lightgray);
            text-align: center;
			 font-size: 90%;
           color: white;
		    font-weight: bold;
			text-decoration: none;  }
			

 /* menu en croix */
 
 .bar1, .bar3 {
    width: 35px;
    height: 4px;
   background: #47855B;
   font-weight: bold;
    margin: 4px 0;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    transition: 0.2s;
}

.bar2 {
    width: 30px;
    height: 4px;
   background: #023b1e;
   font-weight: bold;
    margin: 4px 0;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    transition: 0.2s;
}

input[type=text], input[type=email], input[type=number]
	    {
         width: 70%;
        
	  }
	  
#formulelesarchives input[type=search]
              {
         width: 100%;
			  }	
#formulederoulant input[type=text]
	    {
         width: 98%;
		
	  }			  
   
#gauche {
    float: left;
    width: 100%;	

}
/* haut | droit | bas | gauche     */





article100, article1001
         {
		
		border: 2px ridge #0bb549;	
	}
	
	

	  
		
	
	
	

article1001
    {	
  width : 98%;
	}  
	 
article101, article1011
    {
     
        display:none;
			
      }	
	  
aside10 
      { display: block;
}  



  
articlecarre, articlecarredocument, article200
    {
 
       flex-direction: column;
     } 



section
    {
        flex-direction: column;
        justify-content: space-between;
        
}

section1
    {
        flex-direction: column ;
        justify-content: center;
	padding: 1% 0 1% 0;
         
     }
     
 section2
    {
		 width:99%;
        flex-direction: column ;
        justify-content: center;
	padding: 1% 0 1% 0;
         
     }
	 
	 img.flotte 
             { 
			
			 width:99%;
			  margin: 1% 1% 1% 1%;
                height: auto;
                 
				 
              }

/* haut | droit | bas | gauche     */

article10
    {
        flex-direction: column;
        justify-content: space-center;

}
 
article10 P
	   {
			
			 width: auto;
                height: auto;
                 border-radius: 10px;
              }
              
              
 #image
	   {
			
			 width: 99%;
			  text-align: center;
                height: auto;
                 border-radius: 10px;
              }

article1
    {            
  column-count: 1; 	   	 	    			
      }


 articlerendu, articleinscription, article, article1, article5, article11, article111, article112, articlecarre, articledocument, articlesouscarre, aside, aside1, article01, article100, article1001, article101, article1011, article012, P.flotte {
			   width: 98%;
			  height: auto;
	            margin: 1% 0 1% 0;
	           padding: 0.5% 0.5% 0.5% 0.5%;
	 border-radius: none; 
			           }
					   
articlerendu img
             { max-width:99%;
               height: auto;
                 border-radius: 10px;				   
			           
 article12 {
			   width: 99%;
			  height: auto;
	            margin: 1% 1% 1% 1%;
	           padding: 1% 1% 1% 1%;
	
			           }
				
	  
			
articleinscription img
             { max-width:80%;
               height: auto;
                
              }   			
			           
/* haut | droit | bas | gauche     */			


 article1 H1, article5 H1, articlecarre H1, article11 H1, article12 H1, article112 H1, article111 H1, article H1, article100 H1, article101 H1	

{
   font-size:150%;
   
   }

 article1 P, article5 P, article10 P, articlesouscarre P,  article01 P, article11 P, article100 P
            {
   font-size: 100%;
   text-align: justify;

   }
   
articlesouscarre a, articlesouscarresans a
{
   font-size: 100%;
   color: #1650e0;
   text-decoration:underline; 
   font-weight: bold;
      text-shadow: 0.5px 0.5px 0.5px rgba(139,0,0,0.5);
   }   
   
   articlesouscarresans a:hover {
                            color: #000000;	
							font-weight: bold;
                             }	

articlesouscarre a:hover {
                            color: #000000;	
							font-weight: bold;
                             }	
   
   
   
article img, articlesouscarre img, aside img, aside1 img, aside10 img
             {
			
			 width:100%;
			 height:auto;
			 margin: auto;
			 
}



 

   
   
   
#inscrit {
	          display: block;
              position: absolute;
	           top: 5px;
	           right: 1px;
                background: none;
              width: auto;
              color: #000000;
              font-size: 1.0rem;
	           font-weight: bold;
              text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
              margin: auto;
              padding: auto;
	     }
	     



footer H1
{
    font-size: 1.1rem;
    
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);

}


/* haut | droit | bas | gauche     */
footer img
{     width: 8%;

}

footer P
{
    font-size: 0.9rem;
}


 footer input[type=email]
	    {
         width: 45%;       
	  }
 


.slide-right {
   width: 100%;
  overflow: hidden;

  margin:auto;
  max-width: 1000px;

}
  .fleche{
  display:none;
  }
  



 
 
  
 
  
.img:hover{
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1);
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari and Chrome */

}

.box1 {
   width: 60%;
         }
  
 

#formuleaccueil input[type=number], #formuleaccueil input[type=time], #formuleaccueil input[type=date], #formuleaccueil input[type=text], #formuleaccueil input[type=email], #formuleaccueil textarea 
	    {
         width: 98%;
         
       
	  }
	  

	  
#formuleaccueil .box10 {
   width: 98%;
       ;
	   
   } 
   
.boxarchives1, .boxarchives, #formulelesarchives input[type=search] {
   width: 90%;
}

#formuleaccueil input[name=monmail]
        {
         width: 98%;
       
	  } 
   
	  
 }