/* importation de la police 'Poppins' de Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700;900&display=swap');

html, body{
   font-family: 'Poppins', sans-serif;
   background-color:rgb(233, 216, 226);
   margin: 0%;
}

nav{
   position: relative;
   display: flex;
   justify-content: space-between;
   background-color: rgb(241, 232, 241);
   height: 90px;
   -webkit-box-shadow: 10px 10px 11px 4px rgb(180, 157, 180); 
   box-shadow: 10px 5px 5px rgb(138, 113, 137);
   z-index: 2;
   
}

.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   }

   
ul{
   list-style: none;
   text-decoration: none;
   display: flex;
   justify-content: space-evenly;
   padding: 0px;
   gap: 40px;
   align-items: center;
}

nav li a{
   color: #372637;
   text-decoration: none;
}
.avatar{
   width: 70px;
   height: 70px;
   border-radius: 100%;
   border: 2px solid rgb(42, 15, 41);
   object-fit: cover;
}

.panier{
   display: flex;
       gap: 16px;
       justify-content: center;
       align-items: center;
}

.boutonpanier{
  background: rgb(42, 15, 41);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  padding: 8px;
  width: 40px;
  height: 32px;
  width: fit-content;
  font-weight: 500;
  transition: all .3s ease-in-out;
}
.boutonpanier:hover{
   background: #c38ff5;
}

section{
   z-index: 1;
}

.header {
   background-image: url(assets/header.jpg);
   background-size: cover;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
   width: 100%;
   height: 90vh;
   justify-content: center;
   -webkit-box-shadow: 10px 10px 11px 4px rgb(180, 157, 180); 
   box-shadow: 10px 5px 5px rgb(138, 113, 137);
   }

.boutons-container{
   display: flex;
   justify-content: center;
   gap: 30px;
   margin: 0%;
}

.header h1{
   display: flex;
   align-items: center;
   color: white;
   text-align: center;
   font-size: xx-large;
   text-transform: uppercase;
}

.header h3{
      display: flex;
       align-items: center;
       color: white;
       text-align: center;
       font-size: large;
       justify-content: center;
}


.bouton{
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   text-decoration: none;
   padding: 8px 16px;
   width: fit-content;
   font-weight: 500;
   transition: all .3s ease-in-out;
}

.bouton.primaire{
   background: rgb(42, 15, 41);
   color: white;
}

.bouton.primaire:hover{
   background: #c38ff5;
}

.bouton.secondaire{
   background: transparent;
   color:rgb(42, 15, 41);
   border: 2px solid rgb(42, 15, 41);
}

.bouton.secondaire:hover{
   border: 2px solid #c38ff5;
   color: #c38ff5;;
}


.texte-header-article  h1{
   text-align: center;
   color: #131111;
 }

.articles{
   display: flex;
}

.articles img{
   object-fit: cover;
   width: 100%;
   height: 50%;
   
}

article:hover{
   transform: scale(1.1);
}


.boutonmain{
   background-color: rgb(42, 15, 41);
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 8px;
   padding: 8px 16px;
   transition: all 1s ease-in-out;
   text-decoration: none;
   }

.cartes{
   background-color:  #f3eaf3;
   ;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 8px;
   overflow: hidden;
   transition: all 1s ease-in-out;
   text-decoration: none;
   margin-inline: 10px;
   border-bottom: 16px;
   }

.texte-entier {
      font-family: poppins;
      font-size: small;
      color: rgb(46, 45, 45);
      text-align: left;
      /* margin-inline: 10px; */
      padding: 15px;
}

.header-article{
   display: flex;
   justify-content: space-between;
}

.header-article , h2{
   color: black;
}

.header-article , h3{
   color: rgb(184, 98, 179);
}

footer{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: baseline;
   height: 50px;
   padding: 10%;
}