:root
{
	--red-color: rgb(225, 21, 133);
	--yellow-color: rgb(213, 218, 2);
	--blue-color: rgb(0, 165, 222);
	--gray-color: #686868;
}

/* Pour la balise article */
article
{
	/*max-width:250px;*/
	display:block;
}

h2
{
	color: var(--gray-color);
}

p
{
	color: var(--gray-color);
}
/*
article:first-child{
	width: 250px;
}
*/
/*
article > *{
	
}
*/

/* Style pour le menu des catégories */
#global{
	width:100%;
	display:flex;
	background-color: var(--gray-color);
}
#droite, #gauche {
    display: inline-block;
    vertical-align: top;
	/* background-color: var(--gray-color); */
}
#gauche {
	float:left;
    width:90%; 
}
 
#droite {
	float:right;
    width: 150px;
}

/* Pour le bouton de recherche */
.search-button-produit {
    float: right;
    position: relative;
    top: 5px;
    display: inline-block;
    overflow: visible;
    margin: 0;
    margin-left: 1.5em;
    cursor: pointer;
    color: #121212;
    -o-transition: top .3s cubic-bezier(0.39, 0.58, 0.57, 1);
    -moz-transition: top .3s cubic-bezier(0.39, 0.58, 0.57, 1);
    -webkit-transition: top .3s cubic-bezier(0.39, 0.58, 0.57, 1);
    transition: top .3s cubic-bezier(0.39, 0.58, 0.57, 1);
	
}

/* Syle pour gérer la liste des produits */
#product__listing-list {
    flex-grow: 1;
	flex-shrink: 1;
    margin-top: 8px;
    overflow: hidden;
	width:120%;
}

#listing-infinite{
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 32px;
    padding: 0;
}

.container_produits
{
	/*
	border: 1mm;
	flex-grow: 1;
	width:200px;
	*/
}

/* Style de la tuile article */
.item{
	padding-bottom: 16px;
    border-bottom: 1px solid #dcdcdc;
    width: 250px;
	height: 500px;
    margin: 8px 8px 8px;
    position: relative;
}

/* Style pour l'image */
.item__image{
	width:250px;
}

/* Style pour le titre */
.item__title
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 17px;
	letter-spacing: 0px;
	word-spacing: 0px;
	color: var(--gray-color);
	font-weight: 700;
	text-decoration: none solid rgb(68, 68, 68);
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	
	/*color: #d9d9d9;*/
	/*background: #e8e8e8;*/
	text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    /*font-weight: 700; */
}

/* Style pour la description */
.item__caracteristique
{
	font-size: 10px;
	font-weight: normal;
	color: var(--gray-color);
	/*text-align: justify;*/
}

/* Style pour le prix */
.item__price-box
{
	color: var(--red-color);
    font-size: 16px;
	font-weight: bold;
    /*font-weight: 700; */
	position:absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.item__price
{
	color: var(--red-color);
    font-size: 16px;
	font-weight: bold;
    /*font-weight: 700; */
	position:absolute;
    bottom: 0;
    right: 0;
    width: auto;
}

.item__stock
{
	color: var(--yellow-color);
    font-size: 16px;
	font-weight: bold;
	border: 2px solid var(--yellow-color);
	border-radius: 25px 25px 25px 25px;
    /*font-weight: 700; */
	position:absolute;
    bottom: 0;
    left: 0;
    width: 50%;
}

.presentation{
	width:100%;
	display:flex;
	/*background-color: var(--gray-color);*/
}

/*.item__number
{
	color: rgb(225, 21, 133);
    font-size: 16px;
	font-weight: bold;
	position:absolute;
    bottom: 0;
    left: 0;
    width: 70%;
}
/* le fond*/
.site
{
	background-color:#FFFFFF;
}

.entry-title
{
	color: var(--gray-color);
}

.main-navigation
{
	background-color: var(--gray-color);
}

.article-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #111845a6;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 20px 50px rgb(23, 32, 90);
  border: 2px solid #2a3cad;
  color: white;
  padding: 20px;
}

.article-box:before{
  content: '';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.1);
  transition:0.5s;
  pointer-events: none;
}

.article-box:hover:before{
  left:-50%;
  transform: skewX(-5deg);
}


.article-box .content{
  position:absolute;
  top:15px;
  left:15px;
  right:15px;
  bottom:15px;
  border:1px solid #f0a591;
  padding:20px;
  text-align:center;
  box-shadow: 0 5px 10px rgba(9,0,0,0.5);
  
}

.article-box span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  
}

.article-box span:nth-child(1)
{
  transform:rotate(0deg);
}

.article-box span:nth-child(2)
{
  transform:rotate(90deg);
}

.article-box span:nth-child(3)
{
  transform:rotate(180deg);
}

.article-box span:nth-child(4)
{
  transform:rotate(270deg);
}

.article-box span:before
{
  content: '';
  position: absolute;
  width:100%;
  height: 2px;
  background: #50dfdb;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
  transform:scaleX(0);
  transform-origin: left;
  }
  50%
  {
    transform:scaleX(1);
  transform-origin: left;
  }
  50.1%
  {
    transform:scaleX(1);
  transform-origin: right;
    
  }
  
  100%
  {
    transform:scaleX(0);
  transform-origin: right;
    
  }
  
  
}