ul.feature {
	list-style-type: none;
	perspective: 1000px;
}

ul.feature li {
	display: grid;
	grid-template-columns: 20% auto;
	border-radius:10px;
	padding: 14px;
	cursor: pointer;
	transform: rotateY(-35deg) rotateX(15deg);
	position: absolute;
	border-bottom: 4px solid rgba(0,0,0,.2);
	border-right: 4px solid rgba(0,0,0,.2);
	transition: 0.7s;
}

ul.feature li:nth-child(1){
  color:#fff;
  background-color: #8063E1;
 background-image: linear-gradient(135deg, #BD7BE8, #8063E1);
  top: -112px;
  z-index: 2;
}

ul.feature li:nth-child(2){
   background-color: #3F58E3;
   background-image: linear-gradient(135deg, #7F94FC, #3F58E3);
  z-index: 1;
  color:white;
}

ul.feature li:nth-child(3){
  color:#fff;
  background-color: #352F64;
  background-image: linear-gradient(135deg, #415197, #352F64);
  top: 115px;
  z-index: 0;
  
}

ul.feature li:hover{
  transform: translateY(30px)  rotateY(-35deg) rotateX(15deg) scale(1.2);
  z-index:3; 
  
  
}

.liste_valeurs {
	perspective: 1000px;
    -webkit-perspective-origin-x: center;
    -webkit-perspective-origin-y: center;
	margin-bottom: 20px;
}
.liste_valeurs1 {
	transform: rotateY(0deg) rotateX(-25deg);
    margin: auto;
	gap: 1%;
}
.liste_valeurs2 {
	transform: rotateY(0deg) rotateX(25deg);
    margin: auto;
	gap: 1%;
}
.valeur div {
	box-shadow: 0 0 10px #e2dede;
    padding-top: 20px;
    padding-bottom: 20px;
/*    transform: rotateY(-35deg) rotateX(15deg);*/
    transform: rotateY(0deg) rotateX(35deg);
    border-bottom: 4px solid rgba(0,0,0,.2);
    border-right: 4px solid rgba(0,0,0,.2);
    border-radius: 10px;
    background-color: #3F58E3;
    background-image: linear-gradient(135deg, #7F94FC, #3F58E3);
    color: white !important;
    transition: 0.7s;
}
.valeur div h4 {
	margin: 0;
	color: white;
}

.charte .regles {
	flex-direction: column;
	gap: 1%;
}
.charte .titre {
	text-shadow: -2px -3px 0px antiquewhite, 3px 3px 5px rgba(0,0,0,0.2);
}
.valeurs_club .photo {
	filter: blur(0px) opacity(1) drop-shadow(0px 0px 4px rgba(0,0,0,0.4));
}
.charte .regles {
	perspective: 1000px;
    margin-left: 30px;
    perspective-origin: left top;
}
.charte .regles > div {
    transform: rotateY(15deg) rotateX(15deg) scale(1,0.9);
	margin-bottom: -40px;
	transition: 0.7s;
}
.charte .regles > div:last-child {
	margin-bottom: 0px;
}
.charte .regles > div:hover {
    transform: rotateY(0deg) rotateX(0deg) translateY(-70px) scale(1,1);
	margin-bottom: 0px;
	z-index: 10;
}
.charte .regles .wp-block-group .wp-block-group__inner-container {
	width: 100%;
	box-shadow: 0 0 10px #e2dede;
	padding: 20px;
	background: #fbfbfb;
    border-bottom: 4px solid rgba(0,0,0,.2);
    border-left: 4px solid rgba(0,0,0,.2);
    border-radius: 10px;
}
.charte .regles #participer {
	height: 290px;
}
.charte .regle #respecter {
	height: 290px;
}
.charte .regles #partout {
	height: 280px;
}