.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: 35%;
}

/*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-bottom: 3em;
}
/*--------------------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;
}



.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: #ed1c24;
  }
  .b {
    transform: rotateY(30deg) translateZ(250px);
    background: #0072bc;
  }
  .c {
    transform: rotateY(60deg) translateZ(250px);
    background: #39b54a;
  }
  .d {
    transform: rotateY(90deg) translateZ(250px);
    background: #f26522;
  }
  .e {
    transform: rotateY(120deg) translateZ(250px);
    background: #630460;
  }
  .f {
    transform: rotateY(150deg) translateZ(250px);
    background: #8c6239;
  }
.a2 {
    transform: rotateY(180deg) translateZ(250px);
    background: #ed1c24;
  }
  .b2 {
    transform: rotateY(210deg) translateZ(250px);
    background: #0072bc;
  }
  .c2 {
    transform: rotateY(240deg) translateZ(250px);
    background: #39b54a;
  }
  .d2 {
    transform: rotateY(270deg) translateZ(250px);
    background: #f26522;
  }
  .e2 {
    transform: rotateY(300deg) translateZ(250px);
    background: #630460;
  }
  .f2 {
    transform: rotateY(330deg) translateZ(250px);
    background: #8c6239;
  }
.box{
    border: solid 3px red;
}
.box2{
    border: solid 3px green;
}
  @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 */
  }




/*
test article similaire
*/
/* Global */


img { max-width:100%; }

a {
	-webkit-transition: all 150ms ease;
	-moz-transition: all 150ms ease;
	-ms-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease;
	}
    a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
        filter: alpha(opacity=50); /* IE7 */
        opacity: 0.6;
        text-decoration: none;
    }


/* Page Header */
.page-header {
    background: #f9f9f9;
    margin: -30px -40px 40px;
    padding: 20px 40px;
    border-top: 4px solid #ccc;
    color: #999;
    text-transform: uppercase;
    }
    .page-header h3 {
        line-height: 0.88rem;
        color: #000;
        }



/* Thumbnail Box */
.caption h4 {
    font-size: 1rem;
    color: #444;
    }
    .caption p {
        font-size: 0.75rem;
        color: #999;
        }
        .btn.btn-mini {
            font-size: 0.63rem;
            }


/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
    }
    .carousel-control{
        background: #666;
        border: 0px;
        border-radius: 0px;
        display: inline-block;
        font-size: 34px;
        font-weight: 200;
        line-height: 18px;
        opacity: 0.5;
        padding: 4px 10px 0px;
        position: static;
        height: 30px;
        width: 15px;
        }


/* Mobile Only */
@media (max-width: 767px) {
    .page-header, .control-box {
    text-align: center;
    }
}
@media (max-width: 479px) {
    .caption {
    word-break: break-all;
    }
}


/* ADD-ON
-------------------------------------------------- */
/* body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}@media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}

::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }

a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; } */


/*
fin test article similaire
*/

/*PERSO*/

.btn-perso {

}
/*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;
}