@import url("./common.css");
@import url("./fonts.css");
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);





/******* Section 1 Baner **********/
.section1{
  display: flex;
    width: 100%;

}
.menuBaner{
  background-color: #262424;
  padding: 1px;
  /* transform: translate(-50%, -50%); */
}
.caroussel{
  overflow: hidden;
  /* height: 70vh; */
  max-height: 70vh;
}
.caroussel figure{
  display: flex;
  justify-content: flex-start; 
  position: relative;
	width: 500%; 
	margin: 0;
	left: 0;
  animation: 20s slideCaroussel infinite;
}
.caroussel figure img{
  width: 20%;
  float: right;
}
@keyframes slideCaroussel {
  0% {
    left: 0;
  }
  20% {
    left: -100%;
  }
  40% {
    left: -200%;
  }
  60% {
    left: -300%;
  }
  80% {
    left: -400%;
  }
  100% {
    left: 0;
  }
}


.section1 ul {
  display: flex;
  flex-wrap: wrap;  
  justify-content: center;
  max-width: 100%;
  margin: 0;
  background-color: black;
}
.section1 li{
  color: white;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  width: 20em;
  padding: 4%;
  border-bottom: solid;
  border-width: 5px;
  border-bottom-color:var(--color-blue);
}
.section1 li:hover {
  border-bottom: solid;
  border-bottom-color: var(--color-yellow);
}
.section1 li:active {
  background-color: var(--color-brown);
  border-width: 5px;
}



/******* Section 2 Produit **********/
.section2{
    margin: 0;
}
.blocs{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:3%;
    padding-top: 2%;
}
.cardShop {
    position: relative;
    max-width: 20%;
    width: 100%;
    margin-bottom: 5%;
    background: #f5e8bd;
    text-align: center;
    box-shadow: 1px -4px 20px 11px rgba(0, 0, 0,  42%);
    padding: 15px;
    border-radius: 5%;
  }
  .cardShop * {
    -webkit-box-sizing: padding-box;
    box-sizing: padding-box;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  .cardShop img {
    max-width: 100%;
    height: 15em;
    vertical-align: top;
    position: relative;
    background-color:#fff;
    border-radius: 5%;
  }
  .cardShop figcaption {
    padding: 20px 15px;
  }
  .cardShop h3,
  .cardShop p {
    margin: 0;
  }
  .cardShop h3 {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 5px;
    text-transform: uppercase;
  }
  .cardShop p {
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: 300;
  }
  .cardShop .price {
    font-weight: 500;
    font-size: 1.4em;
    line-height: 48px;
    letter-spacing: 1px;
  }
  .cardShop .price s {
    margin-right: 5px;
    opacity: 0.5;
    font-size: 0.9em;
    color: red;
  }
  .cardShop i {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    width: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 50%;
    background-color: #FFB601;
    color: #ffffff;
    font-size: 1.6em;
    border: 4px solid #ffffff;
  }
  .cardShop a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .cardShop:hover,
  .cardShop.hover {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  .cardShop:hover i,
  .cardShop.hover i {
    background-color: #00258C;
  }
  
/******* Media Queries **********/

@media (max-width: 768px) {

  .blocs {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      flex-wrap: wrap;
  }
  .cardShop{
      max-width: 90%;
      width: 100%;
      margin-bottom: 10%;
      padding: 10px;
  }
   
}

@media (max-width: 380px) {

  .cardShop{
    max-width: 90%;
    width: 100%;
    margin-bottom: 10%;
    padding: 10px;
}
.section1 ul{
  display: none;
}


}