




#conteneur-lang{
	position:relative;
	transition: all 500ms;
}



#conteneur-lang ul li a{
padding:12px 0;
width: 50px;
    height: 50px;
    display: block;
    font-size: 18px;
	background:#034a34;
	color:#b3d37e;
	margin:5px 2px;
	text-transform:uppercase;
	font-weight:600;
	border:1px solid #b3d37e;
	border-radius:50%;
	font-family:"semplicitapro";
	z-index: 10;
  position: relative;
}


#conteneur-lang ul li a.on{
background:#b3d37e;
	color:#034a34;
	padding:12px 0;
}



.slider-home{
	height:calc(100vh + 100px);
	position:relative;
}




.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
  background-size: cover;
  background-position: center;
  z-index:1;
}



.slide.active {
  opacity: 1;
  z-index:10;
}

.slide-content {
  position: absolute;
  top: 50%;
	right: 5%;
    transform: translate(-5%, -50%);
  color: #fff;
  text-align: center;
  max-width: 800px;
  padding: 30px;
  z-index: 100;
}

.slide-piscine .slide-content,
.slide-restauration .slide-content,
.slide-lac .slide-content{
	right: calc(50% - 400px);
}

.slide-pub .slide-content {
    width: 100%;
    text-align: center;
    right: 0;
    max-width: 100%;
    transform: none;
	top:40%;
}

.stars{
	width:40px;
	margin-top:10px;
	margin-bottom:10px;
}


.slide-content span,
.slide-content p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  color:white;
  display:block;
}


.slide-content span {
  margin-top: 0;
  font-size:4em;
  font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
}

.slide-content span:nth-child(3){
	font-size:22px;
	text-transform: uppercase;
}

.slide-content p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align:center;
}



.slide-content button {
  background-color: #fff;
  color: #000;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  cursor: pointer;
}



.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #034a33b7;
  z-index: 100;
  cursor: pointer;
  transition:all 0.5s;
  border-radius:50%;
}

.slider-btn:hover{
	 background-color: #034a34;
}

.slider-btn i {
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slider-btn.prev {
  left: 20px;
}

.slider-btn.next {
  right: 20px;
}





.section-home{
	background:white;	
	position:relative;
	font-family: "deraga";
	overflow:hidden;  
}

.section-lang{
	padding:50px 40px 20px 40px;
	text-align:center;
}







.tel-container a{
	font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
font-size:2em;
color:#b3d37e;
}



h1{
	color:#034a34;
	font-size:4em;
	width:100%;
	font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
	margin-bottom: 50px;
	z-index:10;
	position:relative;
	letter-spacing: 10px;
	width:80%;
	margin:0 auto;
}
 
h2{
	font-size:3.5em;
	text-transform:uppercase;
	font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: 10px;
}

p{
	font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.3em;
}

.inverse{
	transform: rotateX(180deg);
}

.image-block {
    width: 350px;
    height: 400px;
	background-size: cover;
    position: relative;
    overflow: hidden;
	margin: 20px 15px;
	z-index:10;
}

.image-block.location {
	background-image: url('/IMGHOME/assets/location_home.jpg'); /* Remplacez avec votre image */
}

.image-block.emplacement {
	background-image: url('/IMGHOME/assets/emplacement_home.jpg'); /* Remplacez avec votre image */
}

.image-block.animation {
	background-image: url('/IMGHOME/assets/animation_home.jpg'); /* Remplacez avec votre image */
}

.image-block span{
	font-size:1.5em;
	text-transform:uppercase;
	font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
color:white;
position:absolute;
top:45%;
left:0;
width:100%;
text-align:center;
z-index:100;
transition: all 500ms;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


.image-block:hover span{
	top:10%;
}

.hidden-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%); /* Démarre hors du cadre, en bas */
    transition: transform 0.5s ease;
    background: #002626de; /* Fond semi-transparent */
	padding:40px;
	text-align: justify;
}

p.hidden-text {
	margin:0;
}

.image-block:hover .hidden-text,
.image-block:focus .hidden-text {
    transform: translateY(0); /* Revient à sa position normale */
}


.image-block-container .filet-vert{
	position: absolute;
	bottom:calc(40% - 200px);
	width:100%;
}

.bloc-boncadeau{
	width:100%;
	display:block;
}

.bloc-boncadeau img{
max-width: 1170px;
padding: 30px;
width: 100%;
}

.bloc-boncadeau a{
	display:block;
	max-width:350px;
	margin:0 auto;
	margin-bottom: 50px;
}


.filet-vert-camping{
	position: absolute;
	bottom:200px;
	width:100%;
}

.filet-vert-corner{
position: absolute;
left:0;
bottom:100px;
}

.filet-vert-camping img,
.filet-vert img{
	width:100%;
	object-fit:cover;
}

.sprirale-titre{
	position:absolute;
	left:150px;
	bottom:80px;
	width:300px;
}

.sprirale{
	position:absolute;
	right:30px;
	bottom:100px;
}

.sprirale-claire{
	position:absolute;
	left:30px;
	top:25%;
}

.service-container .img-service-container .sprirale{
	top:-350px;
	right:-150px;
}

.service-container .img-service-container .sprirale img{
	width:400px !important;
	object-fit:contain;
	z-index:1;
}

.section-bleu{
	background:#e5f4fb;
	padding:100px 40px;
	position:relative;
	text-align:left;
}



.circle-link {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    perspective: 1000px;
    cursor: pointer;
	z-index:10;
	margin:20px;
	padding:20px;
	border:1px solid #b3d37e;
	background:#034a34;
}

.circle-face {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    position: absolute;
    backface-visibility: hidden; /* Cache la face arrière lorsqu'elle est tournée */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
	overflow:hidden;
}

.circle-face img {
	width:100%;
	height:100%;
	object-fit: cover;

}

.face-front {
    background: #034a34; /* Couleur ou image pour la face avant */
}

.face-back {
    background: #b3d37e; /* Couleur ou image pour la face arrière */
    transform: rotateY(180deg); /* Initialisé à tourné de 180 degrés */
}

.face-back a{	
		width: 280px;
		height: 280px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 20px;
		justify-content: center;
		border: 1px solid white;
		color:#034a34;
		font-size:2em;
		font-weight:400;	
		text-decoration: none;
		font-family: "futura-pt", sans-serif;
font-weight: 500;
font-style: normal;
}

.circle-link:hover .face-front,
.circle-link:focus .face-front {
    transform: rotateY(180deg); /* Tourne la face avant */
}

.circle-link:hover .face-back,
.circle-link:focus .face-back {
    transform: rotateY(360deg); /* Tourne la face arrière */
}

.circle-link:hover,
.circle-link:focus{
    background:#b3d37e;
}

.service-tab-container{
	width:70%;
	margin:40px auto;
}

.service-tab i{
color:#034a34;
padding:10px;
border-radius:50%;
background: #edf2d9;
width:65px;
height:65px;
font-size:30px;
    align-items: center;
    justify-items: center;
    text-align: center;
    justify-items: center;
    display: flex;
    justify-content: center;
}


.service-container .spirale{
	bottom: 280px;
}

.service-container .filet-vert{
	bottom:400px;
	position:absolute;
}

.service-tab{
	display:flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: row;
	width:50%;
	padding:20px;
	z-index:10;
}

.service-tab .texte{
	width: 80%;
    margin: 0 20px;
}

.service-tab img{
	width:65px;
}

.service-tab h3{
	color:#034a34;
	font-size:1.8em;
	text-align:left;
	font-family: "semplicitapro", sans-serif;
font-weight: 700;
font-style: normal;
}

.service-tab p{
	color:#7a8386;
	text-align:justify;
}

.img-service-container{
	width:80%;
	z-index:10;
	margin:0 auto;
	position:relative;
}

.img-service-container img{
	max-width: 375px;
	object-fit: cover;
	height: 400px;
	padding:20px;
	z-index:10;
}

.region-container .texte{
	width:60%;
	text-align:center;
}

strong{
	color:white;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}

p.stronger{
	font-weight:600;
	text-align:center;
	font-size:2.5em;
	width:100%;
	display:block;
	width:100%;
}

p.stronger strong{
	color:#b3d37e !important;
	font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: italic;
	letter-spacing: 1px;
}

.region-texte{
	width:50%;
	padding:20px;
	text-align:justify;
	background:#034a34;
	z-index:1;
}

.region-container .filet-vert{
	position:absolute;
	bottom:200px;	
	width:100%;
}


.section-beige{
	position:relative;
	background:#f9f7f2;
	padding:100px 40px;
	text-align:center;  
}

.info{
	border:none;
}

.section-beige p, .promotion p, .info p, .section-beige a, .promotion a, .info a{
	text-align:center;
	position:relative;
	z-index:100;
}

.center{
	text-align:center;
	margin: 0 auto;
}

 .texte{
	width:35%;
}




.section-vert{
	background:#034a34;
	position:relative;
	padding:100px 40px;
	text-align:center;
	
}

.section-vert p,
.section-vert strong,
.section-vert h2,
.section-vert h3{
	color:white;
}


.section-vert .image{
	width:660px;
	height:415px;	
	position:relative;
	margin:0 40px;
}





.section-blanc{
	background:white;
	position:relative;
	padding:100px 40px;
}

.tong{
	position:absolute;
	right:40px;
	bottom:-50px;
	z-index:100;
}

.atout{
	width:300px;
	text-align:center;  
	margin:20px;
}

.atout img{
	width:300px;
	max-height:300px;
	padding:10px 0;
}


.atout a,
.atout a:active,
.atout a:focus,
.atout a:visited{
	color:#034a34;
	font-weight:600;
	text-transform:uppercase;
	font-size:1em;
	transition:all 250ms;
	font-family:"semplicitapro";
}

.atout a:hover{
	text-decoration:none;
	color:#00a1e3;
	background:transparent;
}

.atout a img{
	transition: all 250ms;
}

.atout a:hover img{
	opacity:0.8;
}

.atout a span{
	color:#00a1e3;
}

.picto-vague{
	position:absolute;
	top:200px;
	left:10%;
	z-index:10;
}




.picto-poisson{
	position:absolute;
	top:140px;
	right:2%;
	z-index:10;
}


.container-imgsit{
	width:400px;
	height:300px;
	position:relative;
	margin:0 40px;
}

.container-imgsit img{
	object-fit:cover;
	width:100%;
	height:100%;
}

.container-imgsit .carte{
	position:absolute;
	width:150px;
	height:150px;
	bottom:-75px;
	left:-75px;
} 



.padding-vague{
	padding-bottom:300px !important;
}

.waves {
  position:absolute;
  width: 100%;
  height:10vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
  bottom:0;
  display:block;
  z-index:10;
}



/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}




@media (max-width: 1500px) { 

.region-container .texte,
.service-tab-container{
	width:80%;
} 

.slider-home{
	height:100vh;
	position:relative;
	padding-bottom:0px;
}

}

@media (max-width: 1350px) { 
.img-service-container {
    width: 100%;
}
}

@media (max-width: 1268px) { 
	.region-container .texte,
	.service-tab-container{
		width:100%;
	} 


.texte{
	width:50%;
	margin:40px;
}

}


@media (max-width: 968px) { 
.region-texte, 
.service-tab{
	width:100%;
}
	
.padding-vague{
	padding-bottom:100px !important;
}

.texte{
	width:100%;
}

.container-spa img{
	width:100%;
}

.slide-content,
.slide-piscine .slide-content,
.slide-restauration .slide-content,
.slide-lac .slide-content{
	right: 6%;
	max-width:82%;
}

}



/*Shrinking for mobile*/
@media (max-width: 768px) {
	h1{
		font-size:2.5em;
	}

	h2 {
		font-size: 2.5em;
	}
	
	.slide-content span {
		font-size: 2em;
	}

	.section-vert .image,
	.section-bleu .image{
		margin:0;
	}
	
  .waves {
    height:40px;
    min-height:40px;
  }
  
  
  .tong{
	  bottom:0px;
  }
  .picto-spa, .picto-vague, .picto-oiseau{
	  display:none;
  }
 
}


@media (max-width: 580px) {
	.section-vert video, 
	.section-vert .image{
		height:350px;
	}


	    .slide-content span {
        font-size: 1.2em;
    }

.slide-content span:nth-child(3) {
    font-size: 1.1em;
}

.slider-btn {
    top: 82%;
}
 
.slide-content{
	    transform: translate(-0%, -50%);
	right: 0%;
        max-width: 100%;
        padding: 0px;
}

}