/************** ENCART FLIP ***************/

.article_flip { display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns:1fr 1fr; }

.flip-card {
  background-color: transparent;
  height: 520px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* V1 : 2 encarts par lignes et 1 seule photo */

/*
.flip_left, .flip_right {position:relative; width:46%; overflow: hidden;}
.flip_left {float:left;}
.flip_right {float:right;}

.flip_clear {clear: both; width:100%;}

.flip-card {
  background-color: transparent;
  width:46%;
  height: 370px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
/*}

*/

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: white;
}

.flip-card:hover .article_flip_recto_titre {display:none;}



.article_flip_recto_titre {position:absolute;top:0;z-index:2; width:100%; padding: 0 15px 0 15px; height: 100%; font-size: 1.6em; font-weight: bold; text-transform: uppercase; background-color:rgba(0,0,0,0.3);}

.article_flip_recto_titre p { position:absolute; top:50%; margin:0; padding:0; width:calc(100% - 30px); text-align: center;}

.article_flip_recto_img {z-index:1; width:100%; max-height:520px; overflow: hidden; /*display: flex; desactiver depuis l'utilisation du grid*/display: grid; justify-content: center;}
.article_flip_recto_img img {/*width:100%;*/height:100%;}



/* Style the back side */
.flip-card-back {
  	background-color: #f6f6f6;
  	transform: rotateY(180deg);
	padding:60px 30px 0 30px;
}

.article_flip_verso_titre {position:relative; width:100%; padding:0 0 40px 0; font-size:1.4em; font-weight: bold; text-transform: uppercase;}

.bloc_size_40 .flip_left, .bloc_size_40 .flip_right,
.bloc_size_1_3 .flip_left, .bloc_size_1_3 .flip_right,
.bloc_size_1_4 .flip_left, .bloc_size_1_4 .flip_right,
.bloc_size_20 .flip_left, .bloc_size_20 .flip_right { width:100%; float:none; margin:0 auto 20px auto;}

.bloc_size_1_2 .article_flip_recto_img img,
.bloc_size_40 .article_flip_recto_img img,
.bloc_size_1_3 .article_flip_recto_img img,
.bloc_size_1_4 .article_flip_recto_img img,
.bloc_size_20 .article_flip_recto_img img {/*position:relative;*/ height:100%; width:auto; /*max-height:370px;*/ margin:0 auto;}


/* V2 : 4 encarts par lignes et 2 photos (recto et verso) */

.article_flip_v2 .flip-card {position:relative; width:calc(25% - 10px); margin:0 5px 10px 5px; overflow: hidden;float:left;height: 563px;}

.article_flip_v2 .flip-card-front { background: none !important;}

.article_flip_v2 .flip-card-back{ background-color: #FFF;}

.article_flip_v2 .article_flip_recto_titre {display:none;}

.article_flip_v2 .article_flip_recto_img {max-height:597px;}

.article_flip_v2 .flip-card-back {
  transform: rotateY(180deg);
  padding: 60px 30px 0 30px;
}
.article_flip_v2 .article_flip_verso_img {position:absolute;z-index:1; width:100%; max-height:597px; overflow: hidden;top:0;left:0;display: flex;justify-content: center;}
.article_flip_v2 .article_flip_verso_img img {width:100%;}

.article_flip_v2 .article_flip_verso_titre {position:absolute; z-index:10; top:0; left:0; height:auto; padding:10px; background:rgba(36,55,70,0.7); color:#FFF}

.bloc_size_40 .flip_clear,
.bloc_size_1_3 .flip_clear,
.bloc_size_1_4 .flip_clear,
.bloc_size_20 .flip_clear {display:none;}


@media screen and (max-width : 1450px) {
	.article_flip .article_flip_recto_img {text-align: center;}
	/*.article_flip .article_flip_recto_img img { height:100%; width:auto; max-height:370px; margin:0 auto;}*/
	.article_flip_v2 .article_flip_recto_img img {/*position:relative;*/ height:100%; width:100%; max-height:597px; margin:0 auto;}
}

@media screen and (max-width : 1300px) {	
	
	.article_flip_v2 .flip-card {height: 432px;}
}

@media screen and (max-width : 1200px) {
	
	/*.article_flip_v2 .flip-card {height: 392px;}*/
	.article_flip_v2 .flip-card {width:calc(50% - 10px); height: 597px;}
	.article_flip_v2 .flip-card-inner {max-width:400px; margin:0 auto;}
	
}

@media screen and (max-width : 1100px) {		
	
	.bloc_size_1_2 .flip_left, .bloc_size_1_2 .flip_right { width:100%;float:none; margin:0 auto 20px auto;}
	.bloc_size_1_2 .flip_clear {display:none;}
	
}

@media screen and (max-width : 950px) {
	
	.flip-card-back {padding:20px 20px 0 20px;}
	.article_flip_verso_titre {padding:0 0 20px 0; font-size:1.3em;}
	
	.bloc_size_60 .flip_left, .bloc_size_60 .flip_right { width:100%;float:none; margin:0 auto 20px auto;}
	.bloc_size_60 .flip_clear {display:none;}
	
	
	.article_flip_v2 .flip-card {width:calc(50% - 10px);}
	
}

@media screen and (max-width : 850px) {
	
	.bloc_size_2_3 .flip_left, .bloc_size_2_3 .flip_right { width:100%;float:none; margin:0 auto 20px auto;}
	.bloc_size_2_3 .flip_clear {display:none;}
	
	.article_flip_v2 .flip-card {height: 555px;}
}

@media screen and (max-width : 800px) {
	
	.bloc_size_2_3 .flip_left, .bloc_size_2_3 .flip_right,
	.bloc_size_60 .flip_left, .bloc_size_60 .flip_right,
	.bloc_size_1_2 .flip_left, .bloc_size_1_2 .flip_right { width:46%; margin:0 auto;}
	
	.bloc_size_2_3 .flip_left,
	.bloc_size_60 .flip_left,
	.bloc_size_1_2 .flip_left {float:left;}
	
	.bloc_size_2_3 .flip_right,
	.bloc_size_60 .flip_right,
	.bloc_size_1_2 .flip_right {float:right;}
	
	.bloc_size_2_3 .flip_clear,
	.bloc_size_60 .flip_clear,
	.bloc_size_1_2 .flip_clear {display:block;}
	
}

@media screen and (max-width : 750px) {
	
		.article_flip_v2 .flip-card {height: 510px;}
}

@media screen and (max-width : 700px) {
	flip-card-back {padding:15px 15px 0 15px;}
	.article_flip_verso_titre {padding:0 0 20px 0; font-size:1.1em;}
	.article_flip_verso_contenu {font-size:0.9em;}
	
	.article_flip_v2 .flip-card {height: 480px;}
	
}

@media screen and (max-width : 650px) {	
	.flip_left, .flip_right { /*width:100% !important;float:none !important; margin:0 auto 20px auto !important;*/grid-column:span 2;}
	.flip_clear {display:none !important;}
	.flip-card-back {padding:40px 20px 0 20px;}
	.article_flip_verso_titre {padding:0 0 20px 0; font-size:1.3em;}
	
	.article_flip_v2 .flip-card {height: 440px;}
	
}

@media screen and (max-width : 600px) {	
	.article_flip_v2 .flip-card {height: 400px;}
	
}

@media screen and (max-width : 550px) {
	.article_flip_v2 .flip-card {width:calc(100% - 10px); height:597px;}
	
}

@media screen and (max-width : 400px) {	
	.article_flip_v2 .flip-card {height:540px;}
}
@media screen and (max-width : 350px) {
	
	.article_flip_v2 .flip-card {height:470px;}
	
}

@media screen and (max-width : 300px) {
	.article_flip_v2 .flip-card {height:398px;}
	
}