/* TITLE */

section.region h1{
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-weight: normal;
	margin: 0 0 5rem 0;
	font-size: 2.5rem;
}

section.region h1.titre{
	margin: 0 0 1.3rem 0;
}
section.region .sous-titre{
	text-align: center;
}
section.region h2{
	text-align: center;
	font-weight: 600;
	margin: 0 0 5rem 0;
	font-size: 1.6rem;
}

section.region h2.titre{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-weight: 400;
  margin: 0 0 3rem 0;
  color:#002393 !important;
  font-size: 2.5rem;
  line-height: 3.5rem;
}

/* HOME REGION */

section.region .region-mois{
	position: relative;
	background: #ededed;
	padding:4rem 0;
}

section.region .region-mois h2{
	margin: 2rem 0 6rem 0;
}

section.region .region-mois .coin-gauche-bleu,
section.region .region-mois .coin-droit-bleu{
	position: absolute;
	top:0px;
	width: 20%;
	height:auto;
	max-height:180px;
	max-width: 180px;
}

section.region .region-mois .coin-gauche-bleu{
	left:0px;
}

section.region .region-mois .coin-droit-bleu{
	transform: rotateY(180deg);
	right:0px;
	text-align: right;
}

section.region .region-mois .coin-gauche-bleu img,
section.region .region-mois .coin-droit-bleu img{
	display: inline-block;
	width: 100%;
	height:auto;
}

section.region .region-mois .item-region-mois{
	position: relative;
	margin-top:3rem;
	margin-bottom:3rem;
	max-width: 750px;
	color:#616161;
}

section.region .region-mois .item-region-mois h3{
	color:#002393 !important;
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5em;
}

section.region .region-mois .item-region-mois .resume{
	margin:1.5rem 0;
}

section.region .region-mois .item-region-mois .item-region-mois-inner{
	position: relative;
	z-index:20;
}

section.region .region-mois .item-region-mois .wrap-item-region-mois{
	position: relative;
	padding:2rem;
	z-index:20;
	background:#f1f0ee;
	border:10px solid #ffffff;
}

section.region .region-mois .item-region-mois .fond-carte-postal{
	position:absolute;
	z-index:10;
	width: 10%%;
	height: 100%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	border:10px solid #ffffff;
	padding:2rem;
	background:#ededed;
	transform: rotate(2deg);
	
	-webkit-box-shadow: 2px 7px 28px -7px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 7px 28px -7px rgba(0,0,0,0.75);
	box-shadow: 2px 7px 28px -7px rgba(0,0,0,0.75);
}

section.region .region-mois .item-region-mois .wrap-image{
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 20px;	
}

section.region .region-mois .item-region-mois .wrap-image img{
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
}

section.region .region-mois .item-region-mois .timbre{
	position: absolute;
	top:7px;
	right:0px;
	z-index:10;
	width:17%;
	height:auto;
	opacity: 0.8;
}

section.region .region-mois .item-region-mois .timbre img{
	display: inline-block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand{
	position: relative;
	width: 100%;
	aspect-ratio: 1.1;
	background:#ffffff;
	border-radius: 20px;
	overflow: hidden;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head{
	padding:4%;
	text-align: left;
	height:25%;
	position: relative;
	display: block;
	
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head .head-title{
	display: block;
	height:100%;
	position: relative;
	width: 80%;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head .head-icone{
	position: absolute;
	top:0;
	right:0;
	height:70%;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head .head-icone img{
	display: inline-block;
	width: auto;
	height:100%;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h3{
	font-size: 1rem;
	line-height: 1.2em;
	font-weight: 600;
	margin:0;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h4{
	font-size: 0.8rem;
	margin:0;
	line-height: 1;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .wrap-image{
	position:relative;
	width: 100%;
	height:75%;
	
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .wrap-image img{
	border-radius: 20px 20px 0 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* BLOC INTRO */

.region-bloc-intro{
	position: relative;
	margin: 0 0 4rem 0;
	background-clip: padding-box;
}

.region-bloc-intro .intro-content{
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 4;
}

.region-bloc-intro .intro-content .wp-block-group__inner-container{
	
}

.region-bloc-intro .intro-content .wp-block-columns{
	margin: 0;
}

.region-bloc-intro .intro-content .wp-block-columns figure{
	margin: 0;
}

.region-bloc-intro .intro-content p{
	margin: 0;
	line-height: 1.8em;
	color:#002393;
}

.region-bloc-intro .intro-content img{
	height:80%;
	max-height: 300px;
	width: auto;
}

.region-bloc-intro .intro-back{
	position: absolute;
	top: 0;
	z-index: 2;
	right: 0;
	height: 90%;
	width: 38%;
	overflow: hidden;
}

.region-bloc-intro .intro-back .wp-block-group__inner-container{
	position: relative;
	height: 100%;
	width: 100%;
	border-radius: 150px 0% 0% 150px;
	overflow: hidden;
}

.region-bloc-intro .intro-back .wp-block-group__inner-container figure{
	position: relative;
	height: 100%;
}

.region-bloc-intro .intro-back .wp-block-group__inner-container figure img{
	object-fit: cover;
	display: inline-block;
	height: 100%;
}

/* BLOCS INFOS */

.region-bloc-infos{
	position: relative;
	margin: 0 0 4rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.region-bloc-infos .wp-block-columns{
	gap:3em;
	margin: 0;
}

.region-bloc-infos .wp-block-group__inner-container{
	
}

.region-bloc-infos .wp-block-group__inner-container .item-top{
	align-items: center;
	
	background: #ededed;
	border-radius: 8% 8% 8% 8%;
	box-sizing: border-box;
	overflow: hidden;
}

.region-bloc-infos .wp-block-group__inner-container .item-top figure{
	border-radius: 9% 9% 0 0;
	box-sizing: border-box;
	overflow: hidden;
}

.region-bloc-infos .wp-block-group__inner-container .item-top h3{
	color:#002393 !important;
	display: inline-block;
	justify-items:center;
	margin: 0;
	font-weight: bold;
	font-size: 1em;
	width: 80%;
	line-height: 1.5em;
}

.region-bloc-infos .item-top .item-titre{
	width: 100%;
	display: flex;
	justify-content:center;
	align-items: center;
	text-align: center;
	height: 55px;
	margin-top: 3%;
}

.region-bloc-infos .item-top .item-titre .wp-block-group__inner-container{
	width: 100%;
	text-align: center;
}

.region-bloc-infos .wp-block-group__inner-container .item-bottom{
	font-size: 0.8em;
	font-weight: normal;
	margin-top: 4%;
	color:#616161 !important;
}

/* BLOCS BON A SAVOIR */

.region-bloc-bonasavoir{
	position: relative;
	margin: 0 0 4rem 0;
	padding:4% 0;
	padding-bottom: 10%;
	background-clip: padding-box;
}

.region-bloc-bonasavoir h2{
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-weight: 500;
	margin: 0 0 5rem 0;
	color:#002393 !important;
	font-size: 2.5rem;
}

.region-bloc-bonasavoir .wp-block-columns{
	gap:3em;
}

.region-bloc-bonasavoir .flip-item > .wp-block-group__inner-container{
	width: 100%;
	height: 100%;
	position: relative;
	perspective: 1000px;
}

.region-bloc-bonasavoir .flip-item{
  background-color: transparent;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  perspective: 500px; /* Remove this if you don't want the 3D effect */
}

.region-bloc-bonasavoir .flip-item.item-6,
.region-bloc-bonasavoir .flip-item.item-7{
	margin-top: 10%;
}

.region-bloc-bonasavoir .flip-item-inner,
.region-bloc-bonasavoir .flip-item-inner > .wp-block-group__inner-container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
}

.region-bloc-bonasavoir .flip-item:hover .flip-item-inner {
  transform: rotateY(180deg);
  
}

/* Position the front and back side */
.region-bloc-bonasavoir .flip-item-front, 
.region-bloc-bonasavoir .flip-item-back {
	border-radius: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.region-bloc-bonasavoir .flip-item-front .wp-block-group__inner-container,
.region-bloc-bonasavoir .flip-item-back .wp-block-group__inner-container{
	padding:0 5%;
}

/* Style the front side (fallback if image is missing) */
.region-bloc-bonasavoir .flip-item-front {
  background-color: #ffffff;
  color: #002393;
  font-weight: 500;
  font-size: 1.5rem;
}

.region-bloc-bonasavoir .flip-item-front::after{
	content:url(https://staging.parsailleurs.fr/wp-content/uploads/2024/09/icons_info.svg) ;
	  position:absolute;
	  right:0.7%;
	  top:0.2%; 
	  width: 60px;
	  height: 60px;
}

/* Style the back side */
.region-bloc-bonasavoir .flip-item-back {
  background-color: #002393;
  color: white;
  transform: rotateY(180deg);
}

.region-bloc-bonasavoir .wrap-image,
.region-bloc-bonasavoir .wrap-image .wp-block-group__inner-container,
.region-bloc-bonasavoir .wrap-image .wp-block-group__inner-container figure{
	height:100%;
	position: relative;
	margin-bottom: 0;
	border-radius:20px;
	overflow: hidden;
}
.region-bloc-bonasavoir .wrap-image .wp-block-group__inner-container figure img{
	width: auto;
	height:100%;
	max-height: 100%;
	position: absolute;
}

.region-bloc-bonasavoir .wp-block-button{
	margin-top: 5%;
}

.region-bloc-bonasavoir .wp-block-button .wp-element-button{
	background: #fff;
	color: #002393;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid #002393;
	margin: 0;
	transition:all 0.3s ease-in-out;
}

.region-bloc-bonasavoir .wp-block-button .wp-element-button:hover{
	background: #002393;
	color: #fff;
	border: 1px solid #fff;
}

.region-bloc-bonasavoir .coin-bas-gauche{
	position: absolute;
	left:0px;
	bottom:0px;
	width: 100px;
	height: 100px;
	transform: rotateY(180deg);
	transform: rotateX(180deg);
	margin: 0;
}

.region-bloc-bonasavoir::after{
	content:url(https://staging.parsailleurs.fr/wp-content/uploads/2024/09/coin_bleu.svg) ;
	  position:absolute;
	  transform: rotateX(180deg);
	  left:0;
	  bottom:0; 
	  width: 180px;
	  height: 180px;
}

.region-bloc-bonasavoir::before{
	content:url(https://staging.parsailleurs.fr/wp-content/uploads/2024/09/coin_bleu.svg) ;
	  position:absolute;
	  transform: rotate(180deg);
	  right:0;
	  bottom:0; 
	  width: 180px;
	  height: 180px;
}

@media only screen and (max-width: 1100px){

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h3{
	font-size: 0.9rem;
	line-height: 1.2em;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h4{
	font-size: 0.7rem;
	margin:0;
	line-height: 1;
}

section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand{
	aspect-ratio: 1;
}
}

@media only screen and (max-width: 770px){
	
	section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h3{
		font-size: 0.8rem;
		line-height: 1.2em;
	}
	
	section.region .region-mois .wrap-region-mois-temoignages .item-temoignage-rand .head h4{
		font-size: 0.7rem;
		margin:0;
		line-height: 1;
	}
	section.region h1{
		letter-spacing: 3px;
		margin: 0 0 5rem 0;
		font-size: 1.6rem;
	}
	
	section.region h1.titre{
		margin: 0 0 1.3rem 0;
	}
	
	section.region h2.titre{
	  letter-spacing: 3px;
	  margin: 0 0 3rem 0;
	  font-size: 1.8rem;
	  line-height: 2.5rem;
	}
	
	.region-bloc-bonasavoir::after{
		content:url(https://staging.parsailleurs.fr/wp-content/uploads/2024/09/coin_bleu.svg) ;
		  position:absolute;
		  transform: rotateX(180deg);
		  left:0;
		  bottom:0; 
		  width: 60px;
		  height: 60px;
	}
	
	.region-bloc-bonasavoir::before{
		content:url(https://staging.parsailleurs.fr/wp-content/uploads/2024/09/coin_bleu.svg) ;
		  position:absolute;
		  transform: rotate(180deg);
		  right:0;
		  bottom:0; 
		  width: 60px;
		  height: 60px;
	}
	
	.region-bloc-intro .intro-back {
	height: 50vw;
	width: 48%;
	overflow: hidden;
	}
	
	.region-bloc-intro .intro-content p{
		margin: 0;
		line-height: 1.6em;
		color:#002393;
	}
	
	.region-bloc-intro .intro-content img {
	height: auto;
	max-height: unset;
	width: 70%;
	}
	
	 .region-bloc-intro .wp-block-columns :nth-child(1) { order: 2; } 
	 .region-bloc-intro .wp-block-columns :nth-child(2) { order: 1; }
	 .region-bloc-intro .wp-block-columns :nth-child(3) { order: 3; } 
	 .region-bloc-intro .wp-block-columns :nth-child(4) { order: 4; }

}