@charset "utf-8";
/* CSS Document */

ul#pucetab{
    width: 100%;
    padding: 0;
	perspective: 500px;
}
ul#pucetab li{
    display: inline-block;
    width: 112px;
    height: 165px;
	
	margin-right: -60px;
	/*transition: all .45s;
	transform: rotateY(45deg);
	position: relative;*/
	transform: rotateY(-45deg);
	transition: all .47s;
	position: relative;
    z-index: 50;
	
	color: #000;
    border: #fff solid 3px;
    border-radius: 4px;
    /*background-color: #EED8A4;
	background-image:linear-gradient(#c60,#EED8A4);*/
	box-shadow: 1px 1px 12px #555;
    -webkit-box-shadow: 1px 1px 12px #555;
    -moz-box-shadow: 1px 1px 12px #555;
}

/* l'element central */
ul#pucetab li:first-child{
    display: inline-block;
    width: 112px;
    height: 165px;
    transform: rotateY(-20deg) scale(1.2);
	transition: all .45s;
	position: relative;
	z-index: 55;
	/*background-color: #EED8A4;
	background-image:linear-gradient(#c60,#EED8A4);*/
}
/* les elements qui suivent l'element central */
/*ul#pucetab li:nth-child(3) ~ li{
    display: inline-block;
    width: 112px;
    height: 165px;
    transform: rotateY(-45deg);
	transition: all .45s;
	position: relative;
    z-index: 50;
	background-color: #EED8A4;
	background-image:linear-gradient(#c60,#EED8A4);
}
ul#pucetab li:nth-child(4) ~ li{
    
    z-index: 45;
	
}*/

ul#pucetab li:nth-child(1) ~ li{ z-index: 45;}
ul#pucetab li:nth-child(2) ~ li{ z-index: 40;}
ul#pucetab li:nth-child(3) ~ li{ z-index: 35;}
ul#pucetab li:nth-child(4) ~ li{ z-index: 30;}
ul#pucetab li:nth-child(5) ~ li{ z-index: 25;}
ul#pucetab li:nth-child(6) ~ li{ z-index: 20;}
ul#pucetab li:nth-child(7) ~ li{ z-index: 15;}
ul#pucetab li:nth-child(8) ~ li{ z-index: 10;}


ul#pucetab li:nth-child(1) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(2) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(3) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(4) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(5) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(6) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(7) ~ li:hover{ z-index: 55;}
ul#pucetab li:nth-child(8) ~ li:hover{ z-index: 55;}

/* l'élément survolé */
ul#pucetab li:hover{
    display: inline-block;
    width: 112px;
    height: 165px;
    /*background-color: #c60;
	background-image:linear-gradient(#000,#c60);*/
    transform: rotateY(0deg) scale(1.2);
	z-index: 55;
}
/* les elements qui suivent l'element survole */
ul#pucetab:hover li:hover ~ li{
    transform: rotateY(-45deg);
	
}
/* les éléments survolés */
ul#pucetab li:hover,
ul#pucetab li:nth-child(3) ~ li:hover{
    display: inline-block;
    width: 112px;
    height: 165px;
    z-index: 60;
    transform: rotateY(0deg) scale(1.2);
	/*background-color: #c60;
	background-image:linear-gradient(#000,#c60);*/
}
/* les elements non survoles, lors du survol du parent */
ul#pucetab:hover li:not(:hover){
    transform: rotateY(45deg);
	
}

/* les elements pairs */
/*ul li:nth-child(odd){
    background-color: #EED8A4;
	background-image:linear-gradient(#c60,#EED8A4);
}*/