.backgroundHeader {
    background: rgb(255,228,237);
background: -moz-linear-gradient(0deg, rgba(255,228,237,1) 30%, rgba(254,196,216,1) 60%, rgba(253,108,158,1) 90%);
background: -webkit-linear-gradient(0deg, rgba(255,228,237,1) 30%, rgba(254,196,216,1) 60%, rgba(253,108,158,1) 90%);
background: linear-gradient(0deg, rgba(255,228,237,1) 30%, rgba(254,196,216,1) 60%, rgba(253,108,158,1) 90%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe4ed",endColorstr="#fd6c9e",GradientType=1);
}

.backgroundFooter {
    background: rgb(253,108,158);
background: -moz-linear-gradient(0deg, rgba(253,108,158,1) 10%, rgba(254,196,216,1) 40%, rgba(255,228,237,1) 70%);
background: -webkit-linear-gradient(0deg, rgba(253,108,158,1) 10%, rgba(254,196,216,1) 40%, rgba(255,228,237,1) 70%);
background: linear-gradient(0deg, rgba(253,108,158,1) 10%, rgba(254,196,216,1) 40%, rgba(255,228,237,1) 70%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fd6c9e",endColorstr="#ffe4ed",GradientType=1);
}

@font-face{
  font-family: 'maFonteH4';
  src: url('../fonts/Stigmature.otf') format('opentype'),
  src: url('../fonts/Stigmature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}
h4{
  font-family : "maFonteH4", Helvetica, Arial, sans-serif;
}

.imgNav{
  width: 75%;
}

/*CAROUSEL*/
.imgCarousel {
    width: 100%;
    height: 19em;

}

.boxWhite{
    background-color: white;
/*    border: solid 1px grey;*/
    border-radius: 5px;
    padding: 1em;
    margin: 2em 0px;
    -webkit-box-shadow: 3px 5px 9px 2px #d3809d9e;
    box-shadow: 3px 5px 9px 2px #d3809d9e;
}


/* Ajoutez cette classe pour fixer la navbar en haut */
.navbar-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}


/*--------------------Debut Cadre avec Banniere----------------*/

.cadre {
  /*width: 150px;
  height: 322px;*/
  border: 2px solid lightgrey;
  position: relative;
  width: 100%;
  padding-top: 100%;
  text-align: center;
  border-radius: 5px;
  -webkit-box-shadow: 3px 5px 9px 2px #d3809d9e;
  box-shadow: 3px 5px 9px 2px #d3809d9e;
}

.imgCadre {
    position: absolute;
    max-width: 97%;
    height: auto;
    max-height: 97%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banniere {
    position: absolute;
    width: 120px;
    top: -9px;
    left: -9px;
}

.textBanniere {
    position: absolute;
    top: 54px;
    left: -17px;
    color: white;
  padding: 5px;
  transform: rotate(-45deg);
  transform-origin: left top;
    font-weight: 700;
}

.titreArticle {
    color: grey;
    text-decoration: none;
    text-align: center;
    margin: 2em 0em;
}
/*--------------------Fin Cadre avec Banniere----------------*/


.cadrePay{
    -webkit-box-shadow: inset 0px 0px 20px 2px #fd6c9e;
    box-shadow: inset 0px 0px 20px 2px #fd6c9e;
    text-align: center;
}

.cadreSMenu{
    height: 25px;
    background-color: red;
}
.btnSMenu{
    height: 30px;
    font-size: 0.7em;
    margin: 0px;
    padding: 0px;
}

/* petite image produits */
.small-images {
    margin-top: 1em;
}

.small-imagesimg {
    /* Ajoutez ici le style pour vos petites images */
    cursor: pointer;
    margin: 5px;
    width: 50px; /* Ajustez la taille selon votre besoin */
}






















/*CAROUSEL TEST*/

.containerC {
    margin: 0 auto;
    width: 250px;
    height: 200px;
    position: relative;
    perspective: 2000px;
  }

  .carouselC {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotateCarousel 30s linear infinite; /* Ajout de l'animation */
  }

  .item {
    display: block;
    position: absolute;
    background: #000;
    width: 1.6em;
    height: 2.5em;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    border: solid 5px white;
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 0px 0px 10px 4px rgba(202,24,193,0);
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 0px 0px 10px 4px rgba(202,24,193,0);
  }

.item img {
    width: 100%;
    height: 100%;
    vertical-align: initial;
}

  .a {
    transform: rotateY(0deg) translateZ(250px);
    background: pink;
  }
  .b {
    transform: rotateY(30deg) translateZ(250px);
    background: pink;
  }
  .c {
    transform: rotateY(60deg) translateZ(250px);
    background: pink;
  }
  .d {
    transform: rotateY(90deg) translateZ(250px);
    background: pink;
  }
  .e {
    transform: rotateY(120deg) translateZ(250px);
    background: pink;
  }
  .f {
    transform: rotateY(150deg) translateZ(250px);
    background: pink;
  }
.a2 {
    transform: rotateY(180deg) translateZ(250px);
    background: pink;
  }
  .b2 {
    transform: rotateY(210deg) translateZ(250px);
    background: pink;
  }
  .c2 {
    transform: rotateY(240deg) translateZ(250px);
    background: pink;
  }
  .d2 {
    transform: rotateY(270deg) translateZ(250px);
    background: pink;
  }
  .e2 {
    transform: rotateY(300deg) translateZ(250px);
    background: pink;
  }
  .f2 {
    transform: rotateY(330deg) translateZ(250px);
    background: pink;
  }

  @keyframes rotateCarousel {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
/*------------------------------*/
.carousel-container2 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
  }
  .carousel2 {
    display: flex;
    animation: scrolling 20s linear infinite;
  }
  .carousel2 img {
    width: 100%; /* Pour que les images occupent toute la largeur du conteneur */
    height: 19em; /* Pour conserver le rapport hauteur/largeur de l'image */
    object-fit: cover; /* Pour remplir complètement la zone de l'image */
  }
  @keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  .carousel img:last-child {
    margin-right: -100%; /* Permet de coller la dernière image à la première */
  }




/*BOX TEST*/

.box1 {
    /*border: solid 1px red;*/
    width: 100%;
    height: 20em;
}

.box2 {
    /*border: solid 1px green;*/
    width: 100%;
    height: 20em;
}

.box{
    border: solid 1px black;
}