body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/background-massage-4.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}

body {
font-size: 20px;
margin: 0;
font-family: Kaushan Script, Arial, Helvetica, sans-serif;
}

.endermo::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/background-endermo-2.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}

.endermo {
position: relative;
font-size: 20px;
margin: 0;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}

.content-wrapper {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0px; /* Vous pouvez ajuster cette valeur pour ajouter un espacement intérieur si nécessaire */
}

header {
text-align: center;
}

.logo {
padding: 20px 0; /* Espacement intérieur pour centrer le logo */
background-repeat: no-repeat;
background-position: center center; /* Centre le logo */
background-size: contain; /* Adapte la taille du logo à l'espace disponible */
height: 220px;
}


.btn-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 38px;
height: auto;
width: 100%;
}
.cta-button-m-actif {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: #04a957;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
text-decoration: none;
border-radius: 10px;
box-sizing: border-box;
padding: 10px 10px;
transition: background-color 0.3s, color 0.3s;
}

.cta-button-m {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: transparent;
color: #24d361;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
box-sizing: border-box;
padding: 10px 10px;
}

.cta-button-m:hover {
background-color: rgba(0, 0, 0, 0.8);
/*background-color: #04a957;*/
border-radius: 0px;
color: #fff;
cursor: pointer;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
transition: background-color 1s, color 1s, font-family 1s;
}

.cta-button-e {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: transparent;
color: #000;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
box-sizing: border-box;
padding: 10px 10px;
}
.cta-button-e:hover {
background-color: rgba(5, 170, 88, 0.8);
/*background-color: #04a957;*/
border-radius: 10px;
color: #fff;
cursor: pointer;
font-family: Kaushan Script, Arial, Helvetica, sans-serif;
transition: background-color 1s, color 1s, font-family 1s;
}
.cta-button-e-actif {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: #000;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
text-decoration: none;
border-radius: 0px;
box-sizing: border-box;
padding: 10px 10px;
transition: background-color 0.3s, color 0.3s;
}
.contact {
display: flex;
flex-wrap: wrap;
height: 80px;
/*justify-content: space-around;*/
align-items: center;
text-align: center;
}
.contact:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.contact-item {
flex-basis: 25%;
box-sizing: border-box;
padding: 5px;
font-size: 24px;
}
.contact-item:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.swiper-container {
width: 100%;
overflow: hidden;
height: 500px;
}

.swiper-slide {
background-size: cover;
background-position: center;
}

.link {
text-decoration: none;
color: inherit;
}

.fa-brands {
color: #000000;
margin-right: 10px;
}
.fa-solid {
color: #000000;
margin-right: 10px;
}
.fa-flip {
  animation-duration: 5s !important;
}
.fa-shake {
  animation-duration: 5s !important;
}

.massage-titre {
font-size: 30px;
text-align: center;
text-shadow: 2px 2px 6px #000;
color: #04CC68;
}

.endermo-titre {
font-size: 30px;
text-align: center;
color: #000000;
}

.photoe {
}
.photom {
}
.presa-massage {
background-color: rgba(255, 255, 255, 0.4);
/*background-image: url('images/presa-massage.jpg');*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 500px;
}
.presa-endermo {
background-color: rgba(0, 0, 0, 0.4);
/*background-image: url('images/presa-endermo.jpg');*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 470px;
color: #fff;
}
.presa-container {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.presa-image{
/*flex: 1;*/
width: 300px;
padding: 10px;
}
.presa-image img {
max-width: 100%;
height: 300px;
}
.presa-text {
flex: 1;
padding: 20px;
font-size: 20px;
}
.presa-citation {
}


#video-container-massage {
width: 100%;
height: 576px;
}
#video-container-endermo {
width: 100%;
height: 576px;
}


.endermo-pricing {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 80px;
height: 480px;
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
min-height: 10vh;
display: center;
align-items: center;
justify-content: center;
}

.massage-pricing {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 80px;
height: 480px;
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
min-height: 10vh;
display: center;
align-items: center;
justify-content: center;
}

.pricing-content {
font-size: 24px;
text-align: center;
}

.tiles-grid {
display: grid;
grid-template-columns: repeat(2, 210px);
grid-template-rows: repeat(2, 10px);
gap:240px;
}
.flip-card {
background: transparent;
width: 400px;
height: 200px;
perspective: 800px;
border-radius: 24px;
box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13), 0 1.5px 5px rgba(0,0,0,0.12);
cursor: pointer;
position: relative;
transition: box-shadow 0.2s;
}
.flip-card:hover {
box-shadow: 0 8px 40px 0 rgba(0,0,0,0.18), 0 2.5px 9px rgba(0,0,0,0.16);
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 24px;
transition: transform 0.7s cubic-bezier(0.5,1.7,0.5,0.7);
transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 24px;
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-shadow: 2px 2px 6px #000;  
padding-bottom: 32px;
letter-spacing: 0.05em;
transition: background 0.3s;
}
.flip-card-front {
background-size: cover;
background-position: center;
box-shadow: 0 1px 12px 0 rgba(0,0,0,0.09);
}
.flip-card-back {
background-size: cover;
background-position: center;
background-blend-mode: darken;
background-color: rgba(10,10,10,0.40);
transform: rotateY(180deg);
box-shadow: 0 1px 12px 0 rgba(0,0,0,0.19);
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.flip-card-back::before {
content: '';
position: absolute;
inset: 0;
background: rgba(20,20,20,0.45);
z-index: 1;
border-radius: 24px;
}
.flip-card-back span {
z-index: 2;
position: relative;
}

.endermo-disclaim {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
height: 40px;
font-family: 'Segoe UI', Arial, sans-serif;
display: center;
align-items: center;
justify-content: center;
padding: 20px;
}

.resa {
background-color: rgba(255, 255, 255, 0.4);
}

.calendly-inline-widget {
min-width: 320px;
height: 1050px;
}

.massage-forfait {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 20px;
height: 400px;
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
min-height: 10vh;
display: center;
align-items: center;
justify-content: center;
}
.endermo-forfait {
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 20px;
height: 300px;
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
min-height: 10vh;
display: center;
align-items: center;
justify-content: center;
}
.forfait-content {
font-size: 24px;
text-align: center;
}

.map {
width: 100%;
height: 600px;
}

#sticky-banner {
position: fixed;
top: 0; left: 0; right: 0;
height: 100px;
width: 100vw;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.2s, top 0.2s;
}
#sticky-banner.hidden {
opacity: 0;
pointer-events: none;
top: -120px;
}
.sticky-content {
display: flex;
align-items: center;
width: 1024px;
max-width: 1024px;
height: 100%;
margin: 0 auto;
}
.sticky-logo {
width: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.sticky-contacts {
width: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px 30px;
margin-left: 10px;
font-size: 1.08rem;
}
.sticky-buttons {
width: 174px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 16px;
gap: 8px;
}
.sticky-buttons a {
min-width: 110px;
text-align: center;
}

.cta-button-m-s-actif {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: #04a957;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
text-decoration: none;
font-size: 20px;
border-radius: 10px;
box-sizing: border-box;
padding: 10px 10px;
transition: background-color 0.3s, color 0.3s;
}

.cta-button-m-s {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: transparent;
color: #24d361;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
font-size: 20px;
box-sizing: border-box;
padding: 10px 10px;
}

.cta-button-m-s:hover {
background-color: rgba(0, 0, 0, 0.8);
/*background-color: #04a957;*/
border-radius: 0px;
color: #fff;
cursor: pointer;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
transition: background-color 1s, color 1s, font-family 1s;
}
.cta-button-e-s-actif {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: #000;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
text-decoration: none;
font-size: 20px;
border-radius: 0px;
box-sizing: border-box;
padding: 10px 10px;
transition: background-color 0.3s, color 0.3s;
}
.cta-button-e-s {
flex-basis: 50%;
box-sizing: border-box;
text-align: center;
background-color: transparent;
color: #000;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
font-size: 20px;
box-sizing: border-box;
padding: 10px 10px;
}
.cta-button-e-s:hover {
background-color: rgba(5, 170, 88, 0.8);
/*background-color: #04a957;*/
border-radius: 10px;
color: #fff;
cursor: pointer;
font-family: Kaushan Script, Arial, Helvetica, sans-serif;
transition: background-color 1s, color 1s, font-family 1s;
}



/* Styles spécifiques pour les écrans jusqu'à 1024px de large */
@media (max-width: 1024px) {
	.logo {
	height: 150px;
	}
	body {
	font-size: 12px;
	}
	.btn-container {
	font-size: 30px;
	}
	.contact-item {
	flex-basis: 50%;
	font-size: 18px;
	}
	.swiper-container {
	height: calc(250px + (500 - 250) * (100vw - 400px) / (1024 - 400));
	}
	.massage-titre {
	font-size: 26px;
	}
	.endermo-titre {
	font-size: 26px;
	}
	.presa-massage {
	height: 750px;
	}
	.presa-endermo {
	height: 680px;
	}
	.presa-image img {
	height: 200px;
	}
	.presa-text {
	font-size: 18px;
	padding: 20px;
	}
	.presa-container {
	flex-direction: column;
	font-size: 20px;
	}
	#video-container-endermo {
	width: 100%;
	height: 420px;
	}
	#video-container-massage {
	width: 100%;
	height: 420px;
	}
	.massage-pricing {
	height: 900px;
	padding: 40px;
	}
	.endermo-pricing {
	height: 650px;
	padding: 40px;
	}
	.pricing-content {
	font-size: 22px;
	}
	.massage-forfait {
	height: 400px;
	padding: 10px;
	}
	.endermo-forfait {
	height: 250px;
	padding: 10px;
	}
	.forfait-content {
	font-size: 22px;
	}
	.tiles-grid {
	grid-template-columns: 1fr;
	grid-template-rows: none;
	gap:40px;
	}
	.flip-card {
	width: 88vw;
	min-width: 210px;
	max-width: 96vw;
	height: 180px;
	}
    #sticky-banner { display: none; }
}


/* Styles spécifiques pour les écrans jusqu'à 512px de large */
@media (max-width: 512px) {
	.logo {
	height: 150px;
	}
	body {
	font-size: 8px;
	}
	.btn-container {
	font-size: 24px;
	}
	.button-m {
	flex-basis: 100%;
	}
	.button-e {
	flex-basis: 100%;
	}
	.button-m-actif {
	flex-basis: 100%;
	}
	.button-e-actif {
	flex-basis: 100%;
	}
	.contact-item {
	flex-basis: 50%;
	font-size: 16px;
	}
	.massage-titre {
	font-size: 24px;
	}
	.endermo-titre {
	font-size: 24px;
	}
	.presa-text {
	font-size: 16px;
	padding: 20px;
	}
	.massage-pricing {
	padding: 20px;
	}
	.endermo-pricing {
	padding: 20px;
	}
	.pricing-content {
	font-size: 18px;
	}
	.massage-forfait {
	height: 300px;
	padding: 10px;
	}
	.endermo-forfait {
	height: 200px;
	padding: 10px;
	}
	.forfait-content {
	font-size: 18px;
	}
	#video-container-endermo {
	height: 285px;
	}
	#video-container-massage {
	height: 285px;
	}
	.calendly-inline-widget {
	height:1050px;
	}
}


@media (max-width: 430px) {
	.logo {
	height: 150px;
	}
	.btn-container {
	font-size: 18px;
	}
	.contact-item {
	flex-basis: 50%;
	font-size: 12px;
	}
	.presa-container {
	font-size: 14px;
	}
	.presa-text {
	padding: 14px;
	}
	.presa-massage {
	height: 750px;
	}
	.presa-endermo {
	height: 750px;
	}
}