body{
  background-color: #f8f8f8;
  font-family: Arial;
  margin: 0;
  padding: 0;
}

header, footer{background-color: gray;
color: white;
text-align: center;
padding: 30px;

}
 

 nav ul{
  list-style-type: none;
  display: flex;
  gap: 20px ;
  padding: 0;
  /*margin-left: 20px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;*/
  justify-content: center;
 }
 nav ul li a {
  color:white;
  text-decoration:none ;
  font-weight: bold;/* proprieté en gras*/

 }

 nav ul li a:hover/* animation quand on met le cliceur sur un lien*/{
  text-decoration: underline;
  font-size: 20px;/* changer la taille du texte */
  background-color: rgb(50, 122, 205);

 }

main{
max-width: 1000px;
padding: 20px;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 10px;
margin: auto;
}

section,article,aside{
  
  
  padding: 20px;
}

article button, section form input[type="submit"]{
   background-color:#27ae60; 
   color: white;
   border: none;
   padding: 10px;
   border-radius: 4px;
   cursor: pointer;
}

article button:hover, section form input[type="submit"]:hover{
background-color: yellowgreen;
}

article table tr td, article table tr th{
border: 1px solid black;
padding: 8px;
text-align: left;
}

article table{
  border-collapse: collapse;
}
article table th{
  background-color: gray;
}
section form input[type="text"], section form textarea, section form input[type="email"],section form select{
border-radius: 4px;
width: 100%;
border: 1px solid black;
box-sizing: border-box;

}

section form input[type="submit"]{
  margin-top: 20px;
}

footer p{
  font-size: 10px;
}

.Produits{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}
aside{ 
  text-align: center;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px;

}

.Produits div{
  text-align: center;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 5px;
  transition: transform 0.2s ease-in-out;
}

.Produits div:hover{
  transform: translateY(-5px);
}
.Produits div img{
  border-radius: 5px;
}
footer{ 
  margin-top: 15px;

}