body {
margin: 0;
padding: 0;
 font-size: 100%;
      }
      
 #bloc_page{
	    width: 80%;
	     margin: auto;
	    background: whitesmoke;
	
           }
           

  /* haut | droit | bas | gauche */


/*______________________ HEADER _________________ */

 header
{

    display: flex;
	    width: 100%;
    height: 70px;
    flex-direction: row;
    justify-content: space-between;
    background: #0080FF;
     margin: 10px 0 0 0 ;
     padding: auto;
    }



/* _______________________________________SECTION _______________________________ */
      

  section1
     {
	  display: flex;
      display: -webkit-flex;	  
	    width: 90%;
	 
    flex-direction: row;
    justify-content:center;
  
     margin: auto;
  }




      
 /* _______________________________Corps_____________________ */
 
 

			
/* haut | droit | bas | gauche */	


		  
	
article4 {	
             float: none;
			  width:100%;
			
			  font-size: 90%;
			  margin: 2px ;
			  padding: 1% 0.5% 1% 0.5%;
			 
			  }	
			  
article4 img{
	           width: auto;
			height: auto;
                    }			  

articleimg {
      float: none;
			  width: 20%;
			height: auto;	
			text-align: center;
			  margin: 2px ;
			  padding: 1% 0.5% 1% 0.5%;
			 
			  }	

articleimg img{
	           width: 80%;
			height: auto;
                    }

/* haut | droit | bas | gauche */	
			  
article4 H1 {
	         font-family: system-ui, serif;
			 font-size: auto;
			 font-weight: bold;
			 text-align: center;
			 }	
			 
			 
article4 H2 {
	         font-family: system-ui, serif;
			 font-size: auto;
			 font-weight: bold;
			 text-align: justify;
			  padding: 0 3% 0 3%;
			 }				 

article4 p {
			  font-size: auto;
			  font-family: system-ui, serif;
			  text-align: center;
			margin: 30% 0 0 5% ;
			 
			 }	
			 
rticle3 H1 {
	         font-family: system-ui, serif;
			 font-size: auto;
			 font-weight: bold;
			 text-align: center;
			 }	

article3 H2 {
	         font-family: system-ui, serif;
			 font-size: auto;
			 font-weight: bold;
			 text-align: justify;
			  padding: 0 3% 0 3%;
			 }				 

article3 img{
	           width: 10%;
			height: auto;
                    }			 
			 

articlefooter {	
             float: none;
			  width:auto;
			  font-family: Dayrom, serif;
	          font-size: 1.3em;
	           font-weight: bold;
			 background: #0080FF;
			  margin: 10px 10px 10px 10px;
			  text-align: center;
			  }	
			  
articletitre {	
             float: none;
			  width:100%;
			font-family: system-ui, serif;
	          font-size: auto;
			  color: #FFFFFF;
	           font-weight: bold;
			 background: #0080FF;
			  margin: 10px 10px 10px 10px; 
			  text-align: center;
			  }	


articletitre1 {	
             float: none;
			  width:1000px;
			font-family: system-ui, serif;
	          font-size: 7vw;
			  color: #FF0000;
	           font-weight: bold;
			 background-color:#0080FF;
			  margin: 10px 10px 10px 10px;
			  text-align: center;
			  }				  
			  
table,
td {
	width: auto;
	 margin: 0 0 0 1%;
    border: 1px dashed #0080FF;
	font-family: system-ui, serif;
	          font-size: auto;
}

thead,
tfoot {
	font-family: system-ui, serif;
	          font-size: auto;
    background-color:#0080FF;
    color: #fff;
}

		  
			  

/* haut | droit | bas | gauche */

/* ______________________________FORMULAIRE _______________ */



#formulaire {
    width: 100%;
}
#formulaire div {
    text-align: right;
}
#gauche {
    float: left;
    width: 47%;
}


#input_case	{
	
        -border-radius: 14px;
    height: 15px;
    width: 15px;
    background: #fff;
    border: 1px solid #ccc;
	
		}	
	
		
		
#input_nomb	{
	     background: #ffebcd;
        font-size: 0.9em;
	   font-weight: bold;
	   width:40px;
	   text-align: center;
		}		
			
		
#input_prod	{
	     background:  #ffebcd;
        font-size: 0.9em;
	   font-weight: bold;
	   width:80px;
	   text-align: center;
		}	
				
#input_val{
          font-size: 1.4em;
          font-family: Arial, Helvetica, sans-serif;
          padding: 5px;
          border: none;
          background-color: blue;
          color: #FFFFFF;
          border-radius: 15px;
          box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          outline: none;

      }

  #input_val:hover{

          box-shadow: 6px 6px 25px 4px rgba(0, 0, 0, 0.18);
      }
 #input_val:active{

          box-shadow: 6px 6px 18px 2px rgba(0, 0, 0, 0.23);
      }			

#input_resultat{
          font-size: 1.0em;
          font-family: Arial, Helvetica, sans-serif;
          padding: 2px;
          border: none;
          background-color: blue;
          color: #FFFFFF;
          border-radius: 3px;
          box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          outline: none;
	       padding: 2px;
      }

  #input_resultat:hover{

          box-shadow: 6px 6px 25px 4px rgba(0, 0, 0, 0.18);
      }
 #input_resultat:active{

          box-shadow: 6px 6px 18px 2px rgba(0, 0, 0, 0.23);
      }


	  

 input[type=text], input[type=email] {
  width: 80%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
  color: #000000;
}

textarea {
  width: 50%;
  height  : 20%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
}



input[type=submit] {
  background-color: #1255a2;
  font-size: 0.9rem;
  color: white;
  padding: 5px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
			
Label { test align: center;
      }
	
span
	     {
		
		  display: block;
		   width:98%;
		   font-size: 1.5em;
		
        text-shadow: 1px 2px 2px rgba(0,0,0,0.3);
           height: auto;
           margin: auto;
           padding: 5px 0;
          text-align: center;

	   }	
/*____________________________________LES DIVS ____________________ */

#imagesite
{   width:auto;
     height: auto;
   margin: 10px 10px;
   padding:auto;
   
  }
  
#imagesite img
   {
   width: 50%;
   height:auto;
   
   }

#imagevin
{   width:auto;
     height: auto;
   margin: auto;
   padding:auto;
   
  }
  
#imagevin img
   {
   width: 30%;
   height:auto;
   
   }
   
 
   

/* haut | droit | bas | gauche */

   

   
 

 .box1 {
   width: auto;
         padding: 10px 10px;
       margin: 10px 30px 10px 10px;
	   font-size: 1.2em;
       background-color: #f8f8f8;
       border: 2px solid #ccc;
      border-radius: 5px;
       box-sizing: border-box;
   } 


/* Footer */

footer
{
      padding: 5px;
     background: #0080FF;
         }
         
 footer a {
	       text-decoration: none;
	        background: #ffffff;
	         font-size: 0.8em;
			    font-weight: bold;
			     margin: 10px;
			     padding : 0 10px;
			     border-radius: 15px;
	       }
	       
footer a:hover {
  color: #000000;
    border-bottom: 3px solid #ffffcc; }
	
	       
	       
	       
footer p
{ text-align: center;
font-size: 1.0em;
color: #ffffcc;
padding: 0;
margin: auto;
}



/*____________________________________________ 1024 __________________________________________________________ */

@media all and (min-width: 10px) and (max-width: 800px) {

#bloc_page{
	    width: 100%;
		 margin: 1% ;
    }

 section1
     {
	  display: flex;	
	    width: 100%;
    flex-direction: row;
    justify-content:center;
     margin: 0 0 0 0;
  }


#imagesite
{   width: 100%;
    
  }	
  

  
  
	
#imagesite img
   {
   width: 100%;
   height:auto;

      }

article4 H1, article3 H1 {
	        
			 font-size: 100%;
			 
			 }	

article4 H2, article3 H2 {
	        
			 font-size: 100%;
			 
			 }
			 
article4 p, article3 p {
	        
			 font-size: 60%;
			 
			 }				 
			 

	 
   




/* haut | droit | bas | gauche */
			

				
articlefooter {	
                font-size: 0.8em;
	          	  margin:auto;
			 
			  }	
			 	  			



	
	
}