@charset "utf-8";
/* CSS Document */

*, *:before, *:after {
    box-sizing: border-box;
}

.html{
	width: 100%;
	
}


/* =================================================================== */
/* ============== STRUCTURE GLOBALE - SNAP SCROLLING V2 ============== */
/* =================================================================== */
@media screen and (orientation: portrait) {
    .html, .body {
        /* Assure que le conteneur peut scroller */
        height: 100vh;
        overflow-y: scroll;
        /* Active le snap-scrolling vertical */
        scroll-snap-type: y mandatory;
    }

    /* Cible les sections qui doivent être des "diapositives" */
    .affiche, .StaysTypes-Section, .Justification-section, .Experience-Wrapper, .WhoWeAre-Section, .affiche {
        height: 100vh;
        scroll-snap-align: start; /* Ancre le haut de la section au haut du viewport */
    }
    
    /* Pour les sections plus longues comme "Benefits", le scroll interne reste standard */
    .Benefitsv1-Section, .Reviews-Section, .FinalArgument-Section, .footer, .article_v1, .TypesSejours2021-Section {
        scroll-snap-align: start; /* S'ancrera au début */
        /* Pas de hauteur fixe, le scroll interne fonctionne, 
           puis le snap se fera sur la section suivante */
    }
}



/* Ensure these elements are invisible at page load */
#line1, #line2, #line3,
#HeroBtnExplore, #HeroBtnOrganize,
#brandName,
#langNav, #mainNav,
#canary, #fuerte, #tenerife, #lagomera, #lapalma, #elhierro, #lanzarote, #grancanaria,
#btnLangLabel, #btnLangImg, #btnMenuLabel, #btnMenuImg {
  opacity: 0;
  visibility: hidden;
}



.Benefitsv1-IMGUnit {
   
z-index: 2; /* Ensure it shows above other elements */
}

.Benefitsv1-IMGWrapper, .Benefitsv1-SlideImg-left, .Benefitsv1-SlideImg-right {
    
}





.body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 95%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    overflow-x: hidden;
 }

.affiche, .head, .header, .affiche, .imgaffiche, .copyright, .copyrightwhite, .header, .bienvenue, .nmsmcn, .nmsmcm, .contenu, .recommandations, .presentation, .aside, .photos, .pied-page, .btnmenu, .menuul, .logoul, .logoli, .logolia, .menuli1, .menulia1, .menuli2, .menulia2, .menuli3, .menulia3, .menuli4, .menulia4, .imgservices, .photo1img, .photo2img, .photo3img, .photo1caption, .photo2caption, .photo3caption, .footer, .footerpropos, .footersejour,.footerinformationslegales, .footerprestataires, .footeradress, .footerlicence, .footercontact, .footersocial, .sitecopyright{
	margin: 0;
}


 .menulia1, .menulia2,.menulia3,.menulia4, .copyright, .copyrightwhite, .imgcaption, .imgcaptionwhite, .ariane, .recommandations, .photos, .aside, .logolia, .bienvenue, .questions, .question2, .nextleft, .nextright, .envoyer, .next, .footer, .sitecopyright, h1, h2, h3, h4, h5{	
	font-family: candara, cambria, calibri, circular, verdana, Tahoma, Helvetica, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Consolas, Monaco, 'Courier New', 'monospace';
}
.presentation{
	font-family: cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

.ariane{
	font-size: 80%;
	grid-column: 1 / 2;
    grid-row: 3 / 4;
}


/* Welcome Section Container */
.welcome-section {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    padding: 4vh 2vw; /* Adjust padding as needed */
    background-color: #F9F9F9; /* Light background for readability */
}

/* Welcome Container - Flex/Grid Layout */
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh; /* Space between image and text */
    max-width: 1200px; /* Optional: Limits the width on larger screens */
    margin: 0 auto; /* Centers the container */
}

/* Image Styling */
.welcome-image img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Rounded corners for aesthetics */
    object-fit: cover; /* Ensures the image covers its container without distortion */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Text Styling */
.welcome-text {
    font-family: 'Roboto', sans-serif;
    color: #333333; /* Dark text for contrast */
    line-height: 1.6;
    text-align: left; /* left text on mobile */
}

.welcome-text h2 {
    font-size: 1.8em; /* Adjusted for mobile */
    font-weight: 700;
    color: #1B7DB0; /* Brand color for headings */
    margin-bottom: 1em;
}

.welcome-text p {
    font-size: 1em;
    margin-bottom: 0.8em;
}



.cont1n{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 276px;
}

.conta5{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 264px;
}

.conte6{
    position: relative;
    top: 1px;
    height: 14px;
    width: 147px;
}

.contn1f{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 90px;
}

.contnes{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 323px;
}

.contnfr{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 323px;
}

.contp0{
    position: relative;
    top: 1.3px;
    height: 14px;
    width: 276px;
}

h1{
	font-size: 160%;
	color: #45ADE2;
}
h2 {
	font-size: 140%;
	color: #1B7DB0;
}
h3{
	font-size: 125%;
}
.preparatifslinks{
	font-size: 125%;
	font-weight: bold;
	color: #1B7DB0;
}
h4{
	font-size: 100%;
	font-weight: bold;
}
h5{
	font-size: 90%;
	font-style: italic;
    text-indent: 5em;
}
h6{
	font-family: "brush-script-std";
    font-size: 100%;
    margin: 0;
}
ul{
    padding-left: 0;
}

li{
    margin-left: 0vw;
    padding-left: 0vw;
    padding-bottom: 0;
    padding-top: 0;
}


.contenu, .recommandations, .presentation, .photos, .aside {
	/* padding: 1vh 4vw; */
}

.head{
	position: fixed;
	width: 100%;	
	height: 6vh;
	padding: 0.8vh;
	z-index: 2;
}
.header{
	width: 100%;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	z-index: 4;
	display: grid;
	grid-template-columns: auto 49px 49px;
	grid-template-rows: 49px 49px 49px 49px;
	z-index: 5;
}

.bienvenue {
	position: absolute;
	margin-top: 10vh;
	left: 50vw;
	padding-right: 2vh;
	transform: translate(-50%, -50%);
	transition: 1s;
	width: 10em;
	text-align: center;
	font-size: 4.5vh;
	font-weight: bold;
	line-height: 1.5em;
	color: #0F2559;
	z-index: 2;
}
.lang{
    display: none;
	grid-row: 1 / 3;
    grid-column: 2 / 3;    
}

#btn-lang{
	display: none;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: center;
    width: 49px;
    height: 49px;
}
#btn-lang:checked ~ .lang{
    display: grid;
    grid-template-columns: 49px;
    grid-template-rows: 49px 49px;
	margin-top: 0;
}

.btnlanglabel{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 49px;
    grid-template-rows: 49px;
}

#btn-lang:checked ~ .btnlanglabel{
    background: rgb(229 224 196 / 90%);
}

.btnlangimg{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 49px;
    height: 49px;
    display: grid;
    align-self: center;
    justify-self: center;
    z-index: 6;
    cursor: pointer;
    font-family: "sans-serif", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial;
    font-size: 0.9em;
    color: rgb(255 255 255);
    justify-items: center;
    align-items: center;
}

.btnlangimg:hover {
	color: rgba(20, 38, 60, 1);
	background: rgb(229 224 196 / 90%);
}

.btnlangimg:checked {
	color: rgba(20, 38, 60, 1);
}

.langlabel{
	position:fixed;
	top: 1.5vh;
	right: 2vw;
	display: flex;
	justify-content: flex-end;
}
.langlabel:hover {
	cursor: pointer;
	
}

.langli1{
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	color: rgba(255,255,255,1.00);
	border-top: 0.5px solid rgba(251,251,251,0.20);
	border-left: 0.5px solid rgba(251,251,251,0.20);
	list-style: none;
	z-index: 3;
	display: grid;
	grid-template-columns: 49px;
	grid-template-rows: 49px;
	text-decoration: none;
}

.langli1:hover {
	cursor: pointer;
}

.langli2{
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	color: rgba(255,255,255,1.00);
	border-top: 0.5px solid rgba(251,251,251,0.90);
	border-left: 0.5px solid rgba(251,251,251,0.20);
	list-style: none;
	z-index: 3;
	display: grid;
	grid-template-columns: 49px;
	grid-template-rows: 49px;
	text-decoration: none;
	background: rgb(229 224 196 / 90%);
}

.langli2:hover {
	cursor: pointer;
	background: rgb(229 224 196 / 90%);
}

.langlia1{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-top: 0px;
	text-decoration: none;
	justify-self: center;
	align-self: center;
	color: rgba(20, 38, 60, 1);
	font-size: 0.9em;
	font-family: "sans-serif", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial;
	cursor: pointer;
	z-index: 6;
	width: 60px;
}

.langlia2{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-top: 0px;
	text-decoration: none;
	justify-self: center;
	align-self: center;
	color: rgba(20, 38, 60, 1);
	font-size: 0.9em;
	font-family: "sans-serif", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial;
	cursor: pointer;
	z-index: 6;
}

.langlia1:hover{

}

.langlia2:hover{
	color: rgba(255,255,255,1.00);
}

.menu{
	display: none;
}

#btn-menu{
	display: none;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: center;
    width: 49px;
    height: 49px;
}
#btn-menu:checked ~ .menu{
	grid-column: 1 / 2;
    grid-row: 1 / 5;
    display: grid;
    grid-template-rows: 49px 49px 49px 49px;
    grid-template-columns: 100px 1fr;
}

#btn-menu:checked ~ .btnmenulabel{
    background: rgb(229 224 196 / 90%);
    border-top: 0.5px solid rgba(251,251,251,0.20);
    border-left: 0.5px solid rgba(251,251,251,0.20);
    color: rgba(20, 38, 60, 1);
}
    
#btn-menu:checked ~ .logoli{
    color: rgba(255,255,255,0.1);    
}

.btnmenulabel{
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	display: grid;
	grid-template-columns: 5fr 1fr 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	padding-right: 5px;
}

.btnmenulabel:hover{
    cursor: pointer;
    background: rgb(229 224 196 / 90%);
}

.btnmenuimg{
	grid-row: 1 / 2;
    grid-column: 3 / 4;
    cursor: pointer;
    z-index: 6;
    padding: 9px;
}
.menulabel{
	position:fixed;
	top: 1.5vh;
	right: 2vw;
	display: flex;
	justify-content: flex-end;
}
.menuul {
	display: -webkit-flex;
	width: 70%;
	margin: 0;
	list-style: none;
	height: 40px;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	text-align: center;
	align-content: center;
	vertical-align: middle;
	float:right;
	flex-direction: column;
	height: 150px;
	z-index: 3;
}
.logoul{
	float: left;
	width: 60%;
	height: 40px;
	margin: 0;
	list-style: none;
	padding: 0;
	display: -webkit-flex;
	justify-content: flex-start;
	align-content: center;
	vertical-align: middle;
	padding-top: 5px;
	
}
.menuli1{
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	color: rgba(20, 38, 60, 1);
	border-top: 1px solid rgba(251,251,251,0.10);
	background: rgb(229 224 196 / 90%);
	list-style: none;
	z-index: 3;
	display: grid;
	align-items: center;
	justify-items: center;
	text-decoration: none;
}

.menuli2{
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	color: rgba(255,255,255,1.00);
	border-top: 1px solid rgba(251,251,251,1.0);
	background: rgb(229 224 196 / 90%);
	list-style: none;
	z-index: 3;
	display: grid;
	align-items: center;
	justify-items: center;
	text-decoration: none;
}

.menuli3{
	grid-row: 3 / 4;
	grid-column: 2 / 3;
	color: rgba(255,255,255,1.00);
	border-top: 1px solid rgba(251,251,251,1.0);
	background: rgb(229 224 196 / 90%);
	list-style: none;
	z-index: 3;
	display: grid;
	align-items: center;
	justify-items: center;
	text-decoration: none;
}

.menuli4{
	grid-row: 4 / 5;
	grid-column: 2 / 3;
	color: rgba(255,255,255,1.00);
	border-top: 1px solid rgba(251,251,251,1.0);
	background: rgb(229 224 196 / 90%);
	list-style: none;
	z-index: 3;
	display: grid;
	align-items: center;
	justify-items: center;
	text-decoration: none;
}

.menuli1:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.40);
}

.menuli2:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.40);
}

.menuli3:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.40);
}

.menuli4:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.40);
}

.menulia1{
	color: rgba(20, 38, 60, 1);
	text-decoration: none;
}

.menulia2{
	color: rgba(20, 38, 60, 1);
	text-decoration: none;
}

.menulia3{
	color: rgba(20, 38, 60, 1);
	text-decoration: none;
}

.menulia4{
	color: rgba(20, 38, 60, 1);
	text-decoration: none;
}

.menulia1:hover{
	color: rgba(255,255,255,1.00)
}

.menulia2:hover{
	color: rgba(255,255,255,1.00)
}

.menulia3:hover{
	color: rgba(255,255,255,1.00)
}

.menulia4:hover{
	color: rgba(255,255,255,1.00)
}

.logoli{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.logolc{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 40px 46px auto;
    grid-template-rows: 48px 90px;
    text-decoration: none;
}

.logold{
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 115px;
    grid-template-rows: 86px;
	padding-top: 10px;
}

.logold:hover{
	cursor: pointer;
}

.logolia{
	grid-row: 1 / 2;
	grid-column: 2 / 4;
	text-decoration: none;
	font-size: 1em;
	color: rgba(255,255,255,0.9);
	align-self: center;
	padding-top: 0px;
	width: 220px;
	padding-left: 5px;
}

.logoimg{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    height: 85px;
    padding-top: 25px;
}

.titleinaffiche{
    padding-top: 3vh;
    color:#FCFCFC;
    z-index: 2;
}

.affiche{
    width: 100%;
    padding: 0;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 0.9em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    overflow: hidden; /* Prevent any overflow */
 }
	
.imgaffichesize{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 100%;
	height: 100vh;
	object-fit: cover; /* Maintain aspect ratio and cover container */
	margin: 0;
	z-index: 1; /* Ensure it's behind other elements */
	display: grid;
	grid-template-columns: 1fr;
}
.imgafficheleft{
    object-position: 3%;
}
.imgaffichecenter{
    object-position: center;
}
.imgaffiche70{
    object-position: 70%;
}
.imgafficheright{
    object-position: right;
}



.imgcaption, .imgcaptionwhite{
	
	top: 2vh;
	grid-column: 2 / 4;
    grid-row: 2 / 5;
    padding-top: 65vh;
    margin-right: 2vw;
	text-align: right;
	font-size: 70%;
	font-style: italic;
	z-index: 2;
}

.copyright, .copyrightwhite{	
	position: relative;
	padding: 10px;
	top: -5vh;
	right: -16vw;			
	text-align: right;
	font-size: 70%;
	font-style: italic;
	z-index: 2;
}

.imgcaption, .copyright{
	color: #25559A;
}
.imgcaptionwhite, .copyrightwhite{
	color: #FCFCFB;
}



/* HERO HOME 2024 */
.HeroHomeV2 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-rows: 17% auto 1fr auto 15%;
    grid-template-columns: 1fr;
    height: 100%;
	width: 100%;
}


.HeroHomeV2-Headline {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    justify-items: center;
    align-items: center;
    display: grid;
    font-size: 7vw;
    font-family: Brygada;
}


.titleline1,
.titleline2 {
    font-weight: 400;
    color: rgba(229, 224, 196, 1)
}


.titleline3 {
    color: rgba(20, 38, 60, 1)
}



.HeroHomeV2-Buttons {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 5vw 90vw 5vw;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
}

.HeroHomeV2-ButtonsWrapper{
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
}

.HeroHomeV2-Button {
    grid-row: 1 / 2;
    padding: 0.8em 1em;
    border-radius: 8px;
    font-size: 1em;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 35vw;
    text-align: center;
}

.HeroHomeV2-ButtonOutline {
    grid-column: 1 / 2;
    color: rgba(229, 224, 196, 1);
    border: 2px solid rgba(229, 224, 196, 1);
    background-color: transparent;
    z-index: 30;
    margin-right: 0.5em;
}

.HeroHomeV2-ButtonSolid {
    grid-column: 2 / 3;
    color: rgba(20, 38, 60, 1);
    background-color: rgb(229 224 196 / 83%);
    z-index: 30;
    margin-left: 0.5em;
}

.HeroHomeV2-ButtonOutline:hover {
    background-color: rgba(229, 224, 196, 0.2);
}

.HeroHomeV2-ButtonSolid:hover {
    background-color: rgb(225 222 204 / 95%); /* Darken on hover */
}

/* SECTION BENEFITS HOME 2024 */
.article_v1{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    padding-left: 5vw;
    padding-right: 5vw;
    z-index: 6;
}

/* SECTION BENEFITS HOME 2024 */
.Benefitsv1-Section{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: 50vh 50vh 50vh 50vh 15vh;
    color: rgba(5, 68, 86, 1);
    padding-bottom: 10vh;
	width: 100%;
}

.Benefitsv1-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 5vh 5vh auto;
    height: 50vh;
    justify-items: center;
}

.Benefitsv1-SlideTitle-left{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.Benefitsv1-SlideTitle-right{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.Benefitsv1-SlideSubTitle{
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	z-index: 3;
	font-size: 1.3em;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

.Benefitsv1-SlideImg-left{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.Benefitsv1-SlideImg-right{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.Benefitsv1-IMGWrapper{
    grid-row: 1 / 2;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.Benefitsv1-IMGUnit{
    grid-row: 1 / 2;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.Benefitsv1-IMGUnitLeft{
    place-self: center;
    width: 90vw;
}

.Benefitsv1-Slide2{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 5vh 5vh auto;
    height: 50vh;
    justify-items: center;
}

.Benefitsv1-Slide3{
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 5vh 5vh auto;
    height: 50vh;
    justify-items: center;
}

.Benefitsv1-Slide4{
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 5vh 5vh auto;
    height: 50vh;
    justify-items: center;
}

/* SECTION Justification HOME 2024 MOBILE */

.Justification-section{
	
background-color: rgba(9, 88, 117, 1);
width: 100%;
}


.HowWeDo-Wrapper{
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto auto auto auto;
	width: 100%;
}

.HowWeDo-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 35vh 5vh 10vh 5vh 45vh;
    height: auto;
    /* place-items: center; */
}

.HowWeDo-Title{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
	color: rgba(255,255,255,1);
}

.HowWeDo-Sub {
	grid-row: 4 / 5;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	z-index: 3;
	font-size: 1.5em;
	text-align: center;
	color: rgba(255,255,255,1);
}



/* =================================================================== */
/* ===== SECTION TYPES DE SEJOURS V2 (FLIP CARDS & CAROUSEL) ========= */
/* =================================================================== */

/* --- Conteneur principal (format 100vh) --- */
.StaysTypes-Section {
    /* La hauteur et le snap sont déjà gérés dans la partie globale */
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    display: grid;
    background-color: #0d2033;
    overflow: hidden; /* Empêche tout débordement */
}
.StaysTypes-Wrapper-v2 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    /* Grille conçue pour occuper l'espace vertical de manière contrôlée */
    grid-template-rows: min-content min-content 1fr;
    padding-top: 8vh;
    height: 100%;
}
.StaysTypes-Title-v2 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    color: #FFFFFF;
    font-size: 2em;
    text-align: center;
    margin: 0 0 2vh 0;
}
.StaysTypes-Introduction-v2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    color: #e5e0c4;
    text-align: center;
    font-size: 1em;
    padding: 0 8vw;
    line-height: 1.5;
    margin: 0 0 4vh 0;
}

/* --- Carrousel Horizontal --- */
.StaysTypes-Carousel {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    display: flex; /* Passage en flexbox pour le défilement horizontal */
    overflow-x: auto;
    overflow-y: hidden;
    /* Activation du snap-scrolling horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Pour un scroll fluide sur iOS */
    padding-left: 5vw; /* Espace pour que la première carte soit bien placée */
    padding-right: 5vw;
    gap: 4vw;
}
/* Cacher la barre de scroll */
.StaysTypes-Carousel::-webkit-scrollbar {
    display: none;
}

/* --- Structure de la Flip Card --- */
.flip-card {
    /* Dimensionnement pour voir 1 carte + 15% de la suivante */
    flex: 0 0 82vw; /* 82% de la largeur du viewport */
    max-width: 400px;
    height: 100%;
    max-height: 55vh;
    perspective: 1500px; /* Essentiel pour l'effet 3D */
    scroll-snap-align: center; /* Ancre chaque carte au début du conteneur lors du scroll */
    cursor: pointer;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-radius: 12px;
}
/* Classe JS pour activer le flip */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Pour Safari */
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

/* --- Style du Recto (Front) --- */
.flip-card-front {
    display: grid;
    grid-template-rows: 1fr auto 1fr 1.5em 1.5em; /* Titre, Icône, Sous-titre */
    align-items: center;
    padding-top: 1.5em;
    color: white;
}
.Card-BG-Image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    z-index: -1;
}
.CardFront-Title {
    grid-row: 1 / 2;
    align-self: start;
    text-align: center;
    font-size: 1.6em;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.CardFront-Icon-Wrapper {
    grid-row: 2 / 3;
    display: grid;
    justify-content: center;
}
.CardFront-Icon {
    width: 20em; /* Grande taille */
    height: auto;
    opacity: 0.8;
}
.CardFront-Subtitle {
    grid-row: 3 / 4;
    align-self: end;
    text-align: center;
    font-size: 1.1em;
    margin: 0;
}

.CardFront-Flip-Hint {
    grid-row: 5 / 6; /* Positionne la note sur la 4ème et nouvelle ligne de la grille */
    align-self: end; /* La plaque tout en bas de l'espace disponible */
    text-align: center;
    font-size: 0.75em;
    font-weight: 300;
    color: #FFFFFF;
    opacity: 0.5;
    margin: 0;
    padding: 0.5em; /* Ajoute une petite marge intérieure pour ne pas coller au bord */
}

/* --- Style du Verso (Back) --- */
.flip-card-back {
    background-color: #FFFFFF;
    color: #0d2033;
    transform: rotateY(180deg);
    display: grid;
    grid-template-rows: 90px 1fr; /* 90px pour la miniature, le reste pour le texte */
}
.CardBack-Thumbnail {
    grid-row: 1 / 2;
    width: 100%;
    height: 100%;
}
.CardBack-Thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.CardBack-Content {
    grid-row: 2 / 3;
    padding: 1.2em;
    overflow-y: auto;
}
.CardBack-Content h3 {
    font-size: 1.6em;
    margin: 0 0 0.5em 0;
}
.CardBack-Content p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
}



/* =================================================================== */
/* ================= SECTION Experience HOME 2024 ==================== */
/* =================================================================== */

.Experience-Wrapper{
    grid-row: 5 / 6;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto;
	width: 100%;
}

.Experience-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20vh auto auto auto 50vh;
    /* place-items: center; */
}

.Experience-Title{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
    color: rgba(5, 68, 86, 1);
    padding-bottom: 5vh;
}

.Experience-Sub-2col {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	z-index: 3;
	color: rgba(255,255,255,1);
	grid-row-gap: 2em;
	text-align: center;
}

.Experience-Sub-2col-Unit{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    z-index: 3;
    color: rgba(5, 68, 86, 1);
}

.Experience-Sub-1col{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    display: grid;
    text-align: center;
}

.Experience-Sub-1col-Unit{
    display: grid;
    z-index: 3;
    color: rgba(5, 68, 86, 1);
    font-weight: 200;
    font-weight: 200;
    font-weight: 200;
    font-weight: 200;
    font-weight: 200;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    place-items: center;
    padding-top: 2em;
}

.Experience-Sub-Unit-number{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    z-index: 3;
    font-size: 1.5em;
}

.Experience-Sub-Unit-type{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    z-index: 3;
    font-size: 1.3em;
}

/* =================================================================== */
/* =================== SECTION Reviews HOME 2024 ===================== */
/* =================================================================== */

.Reviews-Section{
    grid-row: 7 / 8;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto;
    width: 100%;
    background-color: rgba(255,255,255,1);
    padding-top: 5vh;
	width: 100%;
}

.Reviews-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
	padding: 20px;
    background-color: #f9f9f9;
    font-family: 'Roboto', sans-serif;
}

.Reviews-TitleWrap{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 1.5em;
    text-align: left;
    color:  #333;
    height: auto;
}

.Reviews-Title{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 1.3em;
    text-align: left;
    color:  #333;
    height: auto;
    padding-bottom: 0.5em;
    font-family: cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    font-weight: 600;
}

.Google-Logo-Container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 10px;
    font-family: "product-sans", sans-serif;
    font-weight: 500;
    font-size: 1.5em;
    padding-bottom: 0.3em;
}

.Google-txt {
    letter-spacing: -4px;
}

.maps-txt {
    color: black;
}

.Google-Logo {
    width: 30px;
    height: auto;
}

.Google-Profile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    /* gap: 10px; */
    font-size: 1em;
}

.Company-Name {
    font-size: 1.375rem;
    font-weight: 400;
    color: #333;
    font-family: "Google Sans", Roboto, Arial, sans-serif;
}

.Rating-Container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    justify-items: start;
    padding-bottom: 0.3em;
}

.Rating {
    font-size: 1em;
    font-weight: 700;
    color: #333;
}

.Stars {
    color: #ff9800;
    font-size: 1em;
    line-height: 0.5em;
}

.Review-Count {
    color: #666;
    font-size: 0.8em;
}

.Ratings-Bar {
    display: grid;
    grid-template-columns: 1em 1fr;
    /* gap: 5px; */
    /* margin-top: 20px; */
    font-size: 0.7em;
    padding-bottom: 0.9em;
}

.Rating-Level {
    background-color: #ff9800;
    height: 5px;
    border-radius: 2px;
    align-self: center;
}

.Rating-Level:nth-child(1) {
    background-color: #ff9800;  /* Yellow for 5 stars */
}

.Rating-Level:nth-child(2),
.Rating-Level:nth-child(3),
.Rating-Level:nth-child(4),
.Rating-Level:nth-child(5) {
    background-color: #ddd;  /* Grey for lower ratings */
}

/* Review Section */
.Reviews-Sub {
	grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 1.5em;
    text-align: center;
	color: #122A64;
	gap: 15px;
    text-align: left;
    font-size: 1em;
}

.Review {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    display: grid;
    gap: 10px;
}

.Review-Header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.Review-Title {
    font-weight: 600;
    font-size: 1.2em;
    color: #333;
}

.Review-Info {
    display: grid;
    grid-template-columns: 1fr;
    /* gap: 10px; */
}

.Reviewer {
    font-weight: 500;
    color: #4285f4;
}

.Review-Date {
    font-size: 0.9em;
    color: #999;
}

.Review-Stars {
    color: #ff9800;
    font-size: 1.2em;
}

.Review-Text {
    font-size: 1em;
    line-height: 1.5;
    color: #333;
}

.ShowMoreReviewsButton {
    background-color: #4285f4;
    color: white;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.ShowMoreReviewsButton:hover {
    background-color: #3367d6;
}

.GoogleMapsLink {
    font-size: 1em;
    color: #4285f4;
    text-decoration: none;
    margin-top: 10px;
}

.GoogleMapsLink:hover {
    text-decoration: underline;
}



/* =================================================================== */
/* ================== SECTION WhoWeAre HOME 2024 ===================== */
/* =================================================================== */

.WhoWeAre-Section{
    grid-row: 8 / 9;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto auto;
    background-color: rgba(138, 163, 179);
    height: 110vh;
	width: 100%;
}

.WhoWeAre-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr auto 1fr;
    /* place-items: center; */
}

.WhoWeAre-Title{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.WhoWeAre-Sub {
	grid-row: 4 / 5;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	z-index: 3;
	font-size: 1.2em;
	text-align: left;
	color: rgba(255, 255, 255, 1);
	place-items: center;
}

.WhoWeAre-Sub-img{
	
display: grid;
	
width: 100%;
	
padding-bottom: 1.5em;
}

.WhoWeAre-Sub-txt{
	
display: grid;
}


/* =================================================================== */
/* ================ SECTION FinalArgument HOME 2024 ================== */
/* =================================================================== */

.FinalArgument-Section{
    grid-row: 9 / 10;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto;
    background-color: rgba(255,255,255,1);
    color: rgba(5, 68, 86, 1);
}

.FinalArgument-Slide1{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8vh auto auto;
    padding-bottom: 1em;
}

.FinalArgument-Title{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    z-index: 3;
    font-size: 2em;
    text-align: center;
    padding-bottom: 1em;
}

.FinalArgument-Sub {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	z-index: 3;
	font-size: 1.2em;
	text-align: center;
	grid-row-gap: 1em;
}

.FinalArgument-Sub-Unit{
	
}

.FinalArgument-Sub-Unit-image{
	
font-weight: 600;
	
font-size: 1.1em;
}

.FinalArgument-Sub-Unit-description{
	
}

.FinalArgument-Slide2{
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 7vh auto 7vh;
}



/* NEW CTNS*/
.CTNS-Section{ /* It's not a section anymore, it has been integrated to the FinalArgument-Section to be on the same snap scroll */
	grid-row: 3 / 4;
	grid-column: 1 / 2;
	Display: Grid;
	grid-template-columns: 3vw 1fr 3vw;
    grid-template-rows: auto;
    background-color: rgba(255,255,255,1);
}

.CTNS-Buttons {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 5vw 90vw 5vw;
    grid-template-rows: 0vh auto 14vh;
    justify-items: center;
    align-items: center;
}

.CTNS-ButtonsWrapper{
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
}

.CTNS-Button {
    grid-row: 1 / 2;
    padding: 0.8em 1em;
    border-radius: 8px;
    font-size: 1em;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 60vw;
    text-align: center;
}

.CTNS-ButtonOutline {
    grid-column: 1 / 2;
    color: rgba(229, 224, 196, 1);
    border: 2px solid rgba(229, 224, 196, 1);
    background-color: transparent;
    z-index: 30;
    margin-right: 0.5em;
}

.CTNS-ButtonSolid {
    grid-column: 2 / 3;
    color: rgba(20, 38, 60, 1);
    background-color: rgba(229, 224, 196, 0.9);
    z-index: 30;
    margin-left: 0.5em;
}

.CTNS-ButtonOutline:hover {
    background-color: rgba(229, 224, 196, 0.2);
}

.CTNS-ButtonSolid:hover {
    background-color: rgba(66, 66, 66, 1); /* Darken on hover */
}


/*FORMULAIRE 2021 MOBILE*/

.nmsmcn#mncmn > #nmcmns, #mncnm, #mnsnm, #mnmnm, #mcmnm, #msmnm, #msnnm, #momnm, #monnm, #nomnm{
	display: none;
}

.nmsmcn, .nmsmcnnm{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	text-align: center;
	padding-top: 2vh;
	padding-bottom: 6vh;
	padding-left: 2vw;
	padding-right: 2vw;
	z-index: 3;
	color: aliceblue;
	font-weight: bold;
	display: grid;
	width: 80vw;
	z-index: 6;
}

.nmsmcn {
	background-color: rgba(0,0,0,0.50);
	border:  2px solid rgba(24,107,195,0.50);
	border-radius: 10px;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.nmsmcnmm{
	grid-template-columns: 1fr 50vw 1fr;
	grid-template-rows: auto;
}

.questionsrecu{
	font-size: 2em;
	color: rgba(256, 256, 256, 1);
	display: grid;
}


.nmsncsnn {
	
}


.questions {
	color: aliceblue;
	font-size: 3vh;
	font-weight: bold;
}

.questionwa{
    font-size: 1.2em;
}

.question2 {
	color: aliceblue;
	font-size: 3vh;
	font-weight: bold;
	opacity: 0;
}

.nmsncsnm {

	font-size: 5vh;
	opacity: 0;
	align-self: center;
}

.nmsncrnm {
	opacity: 0;
}



.recapboxwrapper {
	display: grid;
	grid-template-columns: 1fr 50vw 1fr;
	grid-template-rows: auto;
}

.recapbox{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	text-align: left;
	padding: 1vh;
	margin: 0.5em;
	height: 10vh;	
	overflow-y: scroll; 
	overflow-x: hidden;
	text-overflow: ellipsis;
	border:  2px solid rgba(249,250,251,0.50);
	border-radius: 10px;
	background-color: rgba(0,0,0,0.50);
	color: #FFFFFF;	
}

.nmsncn, .nmsncnm, .nmsncmn{
	font-weight: lighter;
	color: rgba(245,193,193,0.90);
	font-size: 0.9em;
}
.nmsncsn{
    font-size: 0.9em;
    color: #000000;
}

.nmsncnm{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.nmsncmn{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}


.entree{	
	background-color: rgba(0,0,0,0.30);
	box-sizing: border-box;
	overflow: hidden;
	width: 50vw;
	height: 2.2em;
	border-radius: 5px;
	border:  2px solid rgba(24,107,195,0.50);
	color: aliceblue;	
	padding-left: 0.5em;	
}
.entreetexte{
	background-color: rgba(0,0,0,0.30);
	box-sizing: border-box;
	overflow: hidden;
	width: 50vw;
	height: 20vh;
	color: aliceblue;
	overflow-y: auto;
	border:  2px solid rgba(24,107,195,0.50);
	border-radius: 10px;
}

.tick{
	z-index: 6;
}


.checkglobalwrapper{
	display: grid;
	grid-template-columns: 2em 1fr auto 1fr;
	grid-template-rows: repeat(5, 0.5em 1fr 0.5em);
	align-items: center;
}

.checkbox1, .checkbox2, .checkbox3, .checkbox4, .checkbox5{
	grid-column: 2 / 3;
	justify-self: end;
	border: none;
	transform: scale(1.7);
	border:  2px solid rgba(24,107,195,0.50);
	border-radius: 5px;
}

.checkbox1{
	grid-row: 1 / 4;
}

.checkbox2{
	grid-row: 4 / 7;
}

.checkbox3{
	grid-row: 7 / 10;
}

.checkbox4{
	grid-row: 10 / 13;
}

.checkbox5{
	grid-row: 13 / 16;
}

.checklabel1, .checklabel2, .checklabel3, .checklabel4, .checklabel5{
	grid-column: 3 / 4;
	justify-self: start;
	padding-left: 2em;
}

.checklabel1{
	grid-row: 2 / 3;	
}

.checklabel2{
	grid-row: 5 / 6;	
}

.checklabel3{
	grid-row: 8 / 9;	
}

.checklabel4{
	grid-row: 11 / 12;	
}

.checklabel5{
	grid-row: 14 / 15;	
}

.checkebox{
	
}


.checkelabel{
	
}

.checkb{	
	transform: scale(1.7);
	position: absolute;
	left: 28%;
	border: none;
}
.checkblabel{
	padding-left: 1.3em;
	position: relative;
}

.checkavionwrapper{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 0.5em 1fr 0.5em;
	align-items: center;
	padding-top: 0.2em;
}

.checkavionbox{	
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	justify-self: end;
	border: none;
	transform: scale(1.7);
}
.checkavionlabel{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	padding-left: 1em;
}

.duwrapper, .auwrapper{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
}

.labeldu, .labelau{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	justify-self: end;
	border: none;
	padding-right: 1em;
}

.entreedu, .entreeau{
	grid-column: 2 / 3;
	grid-row: 1 / 2;	
	background-color: rgba(24,107,195,0.50);
	background-color: rgba(0,0,0,0.30);
	box-sizing: border-box;
	overflow: hidden;
	width: 50vw;
	height: 2.2em;
	border-radius: 5px;
	border:  2px solid rgba(24,107,195,0.50);
	color: aliceblue;	
	padding-left: 0.5em;
}

.modbox{
	text-align: left;
	padding: 1vh;
	height: 55vh;
	width: 70vw;
	overflow-y: auto;
	border: 2px solid rgb(17 109 199 / 80%);
	border-radius: 10px;
	background-color: rgba(256,256,256,0.50);
	color: #FFFFFF;
	margin-top: 0;
	margin-left: 2vh;
	margin-right: 2vh;
	margin-bottom: 0;
}

.check{
	display: grid;
	grid-template-columns: 1fr 40px 7fr;
	grid-template-rows: auto;
	grid-gap: 10px;

}

.checkc{
	grid-column: 2 / 3;
	grid-row: auto;
	width: 2em;
	height: 1.5em;
	text-align: right;
	justify-items: end;
}

.checkclabel{
	grid-column: 3 / 4;
	grid-row: auto;
	align-self: center;
	text-align: left;
}

.g-recaptcha{
	grid-column: 2 / 4;
	grid-row: auto;
	text-align: left;    
}

.modal-bg{
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 6;
}
.modal-content{
	grid-column: 1 / 2;
	grid-row: 1 / 5;
	background-color: rgba(250 246 234 / 1);
	color: #000000;
	text-align: left;
	padding-top: 2vh;
	padding-bottom: 5vh;
	padding-left: 2vw;
	padding-right: 2vw;
	margin-left: 3vw;
	margin-right: 3vw;
	margin-bottom: 3vw;
	border:  2px solid rgba(249,250,251,0.50);
	border-radius: 10px;
	z-index: 7;
	position: relative;
	height: 85vh;
}
.modal-close{
	position: absolute;
	top: 2vh;
	right: 2vw;
	font-size: 42px;
	text-align: right;
	color: white;
	transform: rotate(45deg);
	cursor: pointer;
	z-index: 8;
}
.modbtn{
	text-align: center;	
}



.next{
	background-color: aliceblue;
	width: 50vw;
	min-height: 2.5em;
	margin: 0.5em;
	border: none;
	color: #122A64;
	text-align: center;
	font-weight: bolder;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	cursor: pointer;
	font-size: 80%;
	border-radius: 5px;
}

.imgwa{
    width: 40vw;
    cursor: pointer;
}

.btnrecu{
	grid-column: 1 / 2;
	background-color: rgba(256, 256, 256, 1);
	width: 100%;
	height: 2.5em;
	margin: 0.5em;
	text-align: center;
	border: none;
	color: #122A64;
	cursor: pointer;
	border-radius: 5px;
	place-content: center;
}

.nextleft, .nextright{
	background-color: aliceblue;
	width: 25vw;
	height: 2em;
	border: none;
	text-align: center;
	color: #122A64;
	font-size: 80%;
	font-weight: bolder;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	cursor: pointer;	
}

.nextleft{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.nextright{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.envoyer{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: rgba(112,173,50,1.00);
	width: 25vw;
	height: 2em;
	border: none;
	text-align: center;
	color: rgba(255,255,255,1.00);
	font-size: 80%;
	font-weight: bolder;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	cursor: pointer;
}

.btnrefaccleft{
	background-color: #C4C4C4;
	width: 25vw;
	height: 2em;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border: thin;
    border-color: #122A64; 
	text-align: center;
	color: #122A64;
	font-size: 90%;
	font-weight: bolder;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	z-index: 9;
    cursor: pointer;
}
.btnrefaccright{
	background-color: #7FBE73;
	width: 25vw;
	height: 2em;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border: none;
	text-align: center;
	color: #122A64;
	font-size: 90%;
	font-weight: bolder;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	z-index: 9;
    cursor: pointer;
}

.formulairecu{
	
grid-row: 1 / 2;
	
grid-column: 1 / 2;
	
display: grid;
	
grid-template-rows: 30vh auto 30vh;
	
grid-template-columns: 1fr;
	
z-index: 2;
:;
	
padding-left: 2em;
	
padding-right: 2em;
	
text-align: center;
	
height: 100%;
}

.formulrecu{
	
grid-row: 1 / 3;
	
grid-column: 1 / 2;
	
display: grid;
	
grid-template-rows: 1fr 1fr 1fr 1fr;
	
grid-template-columns: 1fr;
	
padding-top: 14vh;
	
place-items: center;
}

.questionsrecu{
	
}

.btnrecu{
	
}


/*Presentation 2021 MOBILE*/

.presentation{
    max-width: 100%;
    padding-top: 0;
    /* color: rgba(59, 94, 104, 1); */
    grid-column: 1 / 2;
    grid-row: 1 / 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
	z-index: 4;
}

.TypesSejours2021-Section{
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	display: grid;
	z-index: 7;
}

.photo1{
    max-width: 100%;
	height: 30vh;
	grid-column: 1 / 4;
	grid-row: 5 / 6;
	margin-top: 4vh;
	margin-bottom: 2vh;
	margin-left: 4vh;
	margin-right: 4vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 30% 70%;
    text-decoration: none;
}
.photo1wrapper{
    grid-column: 1 / 2;
	grid-row: 1 / 3;
    text-decoration: none;
}
.photo1img{	
	grid-column: 1 / 2;
	grid-row: 1 / 4;
	height: 30vh;
	width: 100%;
    text-decoration: none;
}
.photo1caption{
	grid-column: 1 / 4;
	grid-row: 1 / 2;
	background-color: rgba(5,5,5,0.50);	
	padding-left: 2vh;
	padding-right: 2vh;	
	text-align: center;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
    text-decoration: none;
}

.imgtitle1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
    font-size: 2.3vh;
    color: rgba(253,252,252,0.80);
    text-decoration: none;
}
.imgslogan1{
	font-size: 2.5vh;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
    text-decoration: none;
}
.imgservice{
    grid-column: 1 / 2;
    width: 93vw;
    padding: 1vw;    
}

.photo2{
    max-width: 100%;
	height: 30vh;
	grid-column: 1 / 4;
	grid-row: 6 / 7;
	margin-top: 4vh;
	margin-bottom: 2vh;
	margin-left: 4vh;
	margin-right: 4vh;
	display: grid;
	grid-template-columns: 1fr;
    background-color: rgba(0,0,0,0.60);
	text-decoration: none;
}
.photo2wrapper{
    grid-column: 1 / 2;
	grid-row: 1 / 3;
    text-decoration: none;
}
.photo2img{
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	height: 30vh;
	width: 100%;
	background-color: rgba(0,0,0,0.60);
    text-decoration: none;
}
.photo2caption{	
	grid-column: 1 / 2;
	grid-row: 1 / 2;	
	padding-left: 2vh;
	padding-right: 2vh;
    background-color: rgba(5,5,5,0.50);
	text-align: center;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 30% 70%;
    text-decoration: none;
}
.imgtitle2 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
    background-color: rgba(5,5,5,0.50);
    font-size: 2.3vh;
    color: rgba(253,252,252,0.80);
    text-decoration: none;
}
.imgslogan2{
	font-size: 2.5vh;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
    text-decoration: none;
}
.photo3{
    max-width: 100%;
	height: 30vh;
	grid-column: 1 / 4;
	grid-row: 7 / 8;
	margin-top: 4vh;
	margin-bottom: 4vh;
	margin-left: 4vh;
	margin-right: 4vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 30% 70%;
    background-color: rgba(0,0,0,0.60);
	text-decoration: none;
}
.photo3wrapper{
    grid-column: 1 / 2;
	grid-row: 1 / 3;
    text-decoration: none;
}
.photo3img{
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	height: 30vh;
	width: 100%;
	background-color: rgba(0,0,0,0.60);
    text-decoration: none;
}
.photo3caption{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	background-color: rgba(5,5,5,0.50);	
	padding-left: 2vh;
	padding-right: 2vh;		
	text-align: center;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
    text-decoration: none;
}
.imgtitle3{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
    font-size: 2.3vh;
    color: rgba(253,252,252,0.80);
    text-decoration: none;
}

.imgslogan3{
	font-size: 2.5vh;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
    text-decoration: none;
}

.aside{
	padding-top: 2vh;
	padding-bottom: 2vh;
	background-color: rgba(18,42,100,0.30);
	grid-column: 1/4;
	grid-row: 8/9;
	text-align: center;
	color: #122A64;
}

.footer {
    max-width: 100%;
    grid-column: 1 / 4;
    grid-row: 10 / 11;
    text-align: center;
    color: #FFFFFF;
    font-size: 95%;
    font-weight: lighter;
    line-height: 1vh;
    background-color: rgba(5, 68,86, 1);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    padding: 0.5em;
}
.footerpropos {
	grid-column: 1 / 4;
	grid-row: 1 / 2;
	padding: 0.5em;
	
}
.footersejour {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
	padding: 0.5em;
}
.footerinformationslegales{
    grid-column: 1 / 4;
	grid-row: 3 / 4;
	padding: 0.5em;
}
.footerprestataires {
	grid-column: 1 / 4;
	grid-row: 4 / 5;
	padding: 0.5em;
}
.footeradress {
	grid-column: 1 / 4;
	grid-row: 5 / 6;
	padding: 0.5em;
}
.footerlicence {
	grid-column: 1 / 4;
	grid-row: 6 / 7;
	padding: 0.5em;
}
.logolicencia{
    grid-column: 1 / 4;
	grid-row: 7 / 8;
}
.logolicenciawrapperimg{
    width: 25vw;
    height: 25vw;
}
.footersocial {
	grid-column: 1 / 4;
	grid-row: 8 / 9;
	padding: 0.5em;
}


.sitecopyright {
    max-width: 100%;
    background-color: rgba(3, 46, 58, 1);
    grid-column: 1 / 4;
    grid-row: 9 / 10;
    text-align: center;
    color: #FFFFFF;
    font-size: 80%;
    font-weight: lighter;
    line-height: 0;
    padding-top: 0.5em;
}
.devagency {
    font-weight: normal;
}



/* ----- Submenu Styles ----- */

.submenu {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #1B7DB0; /* Replace with your desired brand color */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shade to the bottom */
    padding: 0; /* Removes any existing padding */
    margin-bottom: 20px; /* Adds space below the submenu */
	margin-top: 20px;
	z-index: 20;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.submenu ul {
    list-style: none;
    display: flex;
    width: 100%;
    max-width: 800px; /* Optional: Set a maximum width */
    margin: 0;
    padding: 0;
}

.submenu-item {
    flex: 1; /* Ensures all items take equal width */
}

.submenu-item a {
    display: block;
    text-decoration: none;
    color: #FFFFFF; /* White text for all buttons */
    padding: 15px 0; /* Vertical padding for better clickability */
    text-align: center;
    border-top: 3px solid #1B7DB0; /* Top border matching the background color */
    border-bottom: 3px solid #1B7DB0; /* Bottom border matching the background color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions on hover */
    font-weight: 500; /* Medium font weight for readability */
}

.submenu-item.active a {
    background-color: #1B7DB0; /* Filled background for the active page */
    color: #FFFFFF; /* White text for the active page */
}

.submenu-item a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Light shade on hover */
    color: #FFFFFF; /* Maintains white text on hover */
}

/* Rounded corners for the first and last submenu items */
.submenu-item:first-child a {
    border-bottom-left-radius: 10px; /* Rounded bottom-left corner for Accueil */
}

.submenu-item:last-child a {
    border-bottom-right-radius: 10px; /* Rounded bottom-right corner for Contact */
}







/* PRIVATE SPACE PARAMETERS */
/* Hero Headline */
.hero-headline {
	grid-column: 1 / 2; /* Center column */
    grid-row: 1 / 2; /* Second row */
    font-family: 'Roboto', sans-serif;
    font-size: 2em; /* Adjusted for mobile */
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-top: 10vh;
    margin-bottom: 2vh;
	z-index: 15;
}

/* Buttons Container */
.hero-buttons {
	grid-column: 2 / 3; /* Center column */
    grid-row: 2 / 3; /* Second row */
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap;
	z-index: 15;
}

/* Common Button Styles */
.hero-button {
    font-family: 'Roboto', sans-serif;
    font-size: 1em; /* Adjusted for mobile */
    font-weight: 500;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #FFFFFF;
    width: 40vw; /* Adjusted for mobile */
}

/* Left Button: Question */
#quick-question-btn {
    background-color: #1B7DB0;
}

#quick-question-btn:hover {
    background-color: #166699;
}

/* Right Button: WhatsApp */
#whatsapp-btn {
    background-color: #25D366;
}

#whatsapp-btn:hover {
    background-color: #1DA851;
}

/* Accessibility Focus Styles */
.hero-button:focus {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}







/* ----- Activities Section Styles ----- */

/* Mobile-First Styles */
.activities-section {
    grid-column: 1 / 2;
    grid-row: 4 / 5; /* Adjust based on your grid */
    padding: 4vh 2vw;
    background-color: #FFFFFF; /* White background for contrast */
	display: grid;
}

.activities-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
    color: #1B7DB0; /* Brand color */
    text-align: left; /* Align title to the left */
    margin-bottom: 2vh;
}

.activities-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2vw;
    max-width: 1200px; /* Optional: Limits the width */
    margin: 0 auto; /* Centers the container */
	justify-content: center; /* Centers the grid within the container */
}




/* Activity Card */
.activity-card {
    background-color: #F9F9F9; /* Light gray for card background */
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    overflow: hidden; /* Ensures rounded corners apply to children */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	max-width: 300px; /* Limits the maximum width of the card */
    width: 100%; /* Ensures the card takes the full width of its container up to the max-width */
	height: auto;
    margin: 1px auto; /* Centers the card horizontally within its container */
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.activity-image {
	width: 100%;
	padding: 0;
	margin: 0;
    }

.activity-image img {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px; /* Rounds the top-left corner of the image */
    border-top-right-radius: 10px; /* Rounds the top-right corner of the image */
	object-fit: cover;
	transition: transform 0.3s ease;
}



.activity-content {
    padding: 2vh 2vw;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center; /* Center-aligned text within the card */
	overflow: hidden; /* Prevents content from overflowing the card */
}

.activity-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    color: #1B7DB0; /* Brand color */
    margin-bottom: 1vh;
}

.activity-description {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: #333333;
    flex-grow: 1;
    margin-bottom: 2vh;
}

.activity-buttons {
    display: flex;
    justify-content: center; /* Center the button horizontally */
    gap: 1em; /* Space between buttons, though only one exists */
    width: 100%; /* Ensure button takes full width of the container */
}

.activity-button {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    padding: 0.8em 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #FFFFFF;
    flex: none; /* Remove flex growth as only one button exists */
    text-align: center;
    box-sizing: border-box; /* Include padding and borders within width */
    width: 100%; /* Make button span the full width */
}

.info-button {
    background-color: #1B7DB0; /* Brand color */
    text-decoration: none; /* Remove underline for links */
    display: inline-block; /* Ensure proper padding and width */
}

.info-button:hover {
    background-color: #166699; /* Darker shade on hover */
}

/* Accessibility Focus Styles */
.activity-button:focus {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* CTA Button */
.activity-page__cta-button-container {
    text-align: center;
    margin-top: 1em;
}

.activity-page__cta-button {
    background-color: #1B7DB0;
	opacity: 0.5;
    color: white;
    padding: 0.8em 1.5em;
    border-width: 5px;
	border: #1B7DB0;
	border-color: #1B7DB0;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.activity-page__cta-button:hover {
	color: white;
    background-color: #1B7DB0;
	opacity: 0.7;
}

/* ----- Activity Page Styles ----- */

/* Activity Page Section */
.activity-page__section {
    grid-column: 1 / 2;
    grid-row: 4 / 5; /* Adjust based on your grid */
    padding: 4vh 2vw;
    background-color: #FFFFFF; /* White background for contrast */
	display: grid;
	
}

/* Activity Name */
.activity-page__name {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
    color: #1B7DB0; /* Brand color */
    text-align: left; /* Align title to the left */
    margin-bottom: 2vh;
}

/* Opening Image */
.activity-opening-image {
    margin-bottom: 2vh;
}

.activity-opening-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* Description Section */
.activity-page__description {
    margin-bottom: 2vh;
}

.activity-page__description-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    color: #1B7DB0; /* Brand color */
    margin-bottom: 0.5em;
}

.activity-page__description-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: #333333;
    line-height: 1.6;
}

/* Image Carousel */
.activity-page__carousel {
    margin-bottom: 2vh;
	max-width: 100%;
    height: auto;
	width: 100%;
    overflow: hidden;
}

/* Swiper Carousel Styles */
.swiper-container {
    width: 100%;
    height: 200px; /* Adjust height as needed */
    position: relative;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.swiper-button-prev,
.swiper-button-next {
    color: rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Pricing and WhatsApp Button */
.activity-page__pricing {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 2vh;
}

.activity-page__pricing-box {
    background-color: #f9f9f9;
    padding: 1em;
    border-radius: 5px;
    text-align: left;
}

.activity-page__pricing-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    color: #1B7DB0;
    margin-bottom: 0.5em;
}

.activity-page__pricing-adulte,
.activity-page__pricing-enfant {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    margin: 0.2em 0;
}

.activity-page__whatsapp-button {
    display: block;
    background-color: #25D366;
    color: #FFFFFF;
    text-align: center;
    padding: 0.8em;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.activity-page__whatsapp-button:hover {
    background-color: #1DA851;
}

/* Conditions Section */
.activity-page__conditions {
    margin-bottom: 2vh;
}

.activity-page__conditions-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    color: #1B7DB0;
    margin-bottom: 0.5em;
}

.activity-page__conditions-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    color: #333333;
    line-height: 1.6;
}

/* Other Activities Section */
.activity-page__other-activities {
    margin-bottom: 2vh;
}

.activity-page__other-activities-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6em;
    color: #1B7DB0;
    margin-bottom: 1vh;
    text-align: left;
}

.activity-page__other-activities-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2vw;
    margin-bottom: 1.5vh;
}



/* Accessibility Focus Styles */
.activity-button:focus,
.activity-page__whatsapp-button:focus,
.activity-page__cta-button:focus {
    outline: 5px solid blue;
    outline-offset: 0px;
}


/* ----- Custom Carousel Styles ----- */

/* Carousel Container */
.custom-carousel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: none; /* Hide the carousel initially */
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns:1fr auto 1fr;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 10px;
    box-sizing: border-box;
	overflow: hidden; /* Prevent any overflow */
}

/* Carousel Inner (Slides Wrapper) */
.carousel-inner {
	grid-row: 2/3;
	grid-column: 2/3;
    transition: transform 0.5s ease-in-out;
    width: 90vw; /* As per your requirement */
    height: auto; /* As per your requirement */
	max-height: 90vh;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* Carousel Item (Each Slide) */
.carousel-item {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel-item.active {
    opacity: 1;
    position: relative;
}

/* Images within Slides */
.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* Navigation Buttons */
.carousel-button {
    position: absolute;
    top: 50%;
    color: rgba(255, 255, 255, 0.5);
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
	background: none;
    border-width: 0px;
    border-style: none;
}


.carousel-button:hover {
    color: rgba(255, 255, 255, 0.8);
}

.carousel-buttonprev {
    grid-row: 2/3;
	grid-column: 2/3;
	justify-self: start; /* Aligns to the left */
	align-self: center;  /* Centers vertically */
	z-index: 20;
    margin: 20px;
	background: none;
    border-width: 0px;
    border-style: none;
	font-size: 1.5em;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}
.carousel-buttonprev:hover {
	color: rgba(255, 255, 255, 0.8);
}

.carousel-buttonnext {
    grid-row: 2/3;
	grid-column: 2/3;
	justify-self: end; /* Aligns to the right */
	align-self: center;  /* Centers vertically */
	z-index: 20;
    margin: 20px;
	background: none;
    border-width: 0px;
    border-style: none;
	font-size: 1.5em;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.carousel-buttonnext:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Carousel Pagination Dots (Optional) */
.carousel-pagination {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
}

.carousel-pagination .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-pagination .dot.active {
}

.carousel-close {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 2em;
    color: #000;
    cursor: pointer;
    z-index: 1001; /* Above other elements */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.carousel-close:hover {
    background: rgba(255, 255, 255, 1);
}

/* ----- Responsive Adjustments (Mobile First) ----- */


    .opening-section {
        grid-template-columns: 1fr;
    }

    .custom-carousel .carousel-inner {
        width: 90vw;
        height: auto;
		max-height: 90vh;
    }

    .custom-carousel .carousel-item img {
        
    }

    .carousel-pagination .dot {
        width: 10px;
        height: 10px;
    }

/* ----- Custom Opening Multi-Image Gallery ----- */

.opening-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
}

.image-gallery {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	row-gap: 5px; /* Vertical spacing */
    column-gap: 5px; /* Horizontal spacing */
    padding: 1px; /* Remove any existing padding */
    margin: 10px; 
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.large-image {
	grid-row: 1/2;
	grid-column: 1/2;
    width: 100%;
    height: auto;
	padding: 0; /* Remove any existing padding */
    margin: 0; /* Remove any existing margin */
}

.large-image img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
    object-fit: cover;
	margin: 0;
    padding: 0;
}

.small-images {
	grid-row: 2/3;
	grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr;
	row-gap: 5px; /* Vertical spacing */
    column-gap: 5px; /* Horizontal spacing */
	padding: 0; /* Remove any existing padding */
    margin: 0; /* Remove any existing margin */
}

.small-images a img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
	margin: 0;
    padding: 0;
}

.top-left {
   border-radius: 0;
}

.top-right {
    border-radius: 0;
}
.bottom-left {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
}

.bottom-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 10px;
}

/* Content Section */
.content-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px;
}

.text-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.text-content h2 {
    margin-bottom: 10px;
    color: #1B7DB0;
}

.text-content p {
    color: #333;
    line-height: 1.6;
}

.booking-box {
    background-color: #fff;
	width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.booking-box h3 {
    margin-bottom: 10px;
    color: #1B7DB0;
}

.booking-box p {
    margin-bottom: 10px;
    color: #333;
}

.booking-cta {
    display: inline-block;
	width: 100%;
    text-align: center;
    padding: 10px 20px;
    background-color: #25D366; /* WhatsApp green */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.booking-cta:hover {
    background-color: #1DA851;
}

/* ----- Booking Modal Styles ----- */

/* Modal Background */
.booking-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensures it sits above other elements */
}

/* Modal Content */
.booking-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 400px;
    display: none; /* Hidden by default */
    z-index: 1001; /* Above the modal background */
}

/* Show Modal */
.booking-modal-content.active,
.booking-modal-bg.active {
    display: flex;
}

/* Modal Header */
.booking-modal-content h2 {
    margin-top: 0;
    color: #1B7DB0;
    text-align: center;
}

/* Contact Options Container */
.booking-contact-options {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 1.5em 0;
}

/* Individual Contact Buttons */
.booking-contact-button {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.8em;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    color: #333333;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.booking-contact-button img {
    width: 24px;
    height: 24px;
}

.booking-contact-button:hover {
    background-color: #E0E0E0;
}

/* Specific Button Colors */
.booking-phone-button {
    
}

.booking-email-button {
    
}

.booking-messenger-button {
    
}

.booking-whatsapp-button {
    
}

/* Close Button */
.booking-modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #999999;
    cursor: pointer;
    transition: color 0.3s ease;
}

.booking-modal-close-button:hover {
    color: #333333;
}



@media screen and (orientation: landscape){
.body{grid-template-columns: 1fr;}

.header{
    padding-left: 1em;
    padding-right: 1em;
    grid-template-columns: auto 60px 60px;
    padding-top: 1em;
}
    
.logolia{
	top: 24px;
    left: 6vw;
}

.logoimg{
	height: 100px;
}    

#btn-menu:checked ~ .menu{
	margin-top: 0px;
}

.logoli{
    grid-row: 1 / 5;
    /* padding-left: 15px; */
}
    

.logolc{
    grid-template-columns: 42px 186px;
    grid-template-rows: 48px 84px;
}
    
.logold{
    grid-template-columns: 129px;
    grid-template-rows: 175px;
}

#btn-menu:checked ~ .logoli{
	color: rgba(255,255,255,0.9);
}

.logold:hover ~ .logolia{
    cursor: pointer;
    opacity: 0.3;        
}

.logold:hover {
    cursor: pointer;
    opacity: 0.3;
}

.menuli1{
    display: grid;
    align-items: center;
    justify-items: center;
    width: 50vw;
    justify-self: center;
}

.menuli2{
   display: grid;
    align-items: center;
    justify-items: center;
    width: 50vw;
    justify-self: center; 
}

.menuli3{
   display: grid;
    align-items: center;
    justify-items: center;
    width: 50vw;
    justify-self: center; 
}

.menuli4{
   display: grid;
    align-items: center;
    justify-items: center;
    width: 50vw;
    justify-self: center; 
}    

.btnlanglabel{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 60px;
    grid-template-rows: 49px;
}
    
.btnlanglabel:hover{
    background: rgba(0,0,0,0.40);
}

.lang{
    
}
#btn-lang:checked ~ .lang {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    display: grid;
    grid-template-rows: 49px 49px 49px 49px;
    grid-template-columns: 60px;
}
    
.langli1{
            
grid-template-columns: 60px;
}
    
.langli2{
            
grid-template-columns: 60px;
}
    
.affiche{
}
.imgafficheright{
    width: 100%;
    margin-right: 0;
    object-fit: fill;
    object-position: left;
}
.imgcaption, .imgcaptionwhite{	
	top: 2vh;
    padding-top: 62vh;
    padding-right: 2vw;
}
.btnmenuimg{
         
}

.imgaffichecenter{
    grid-column:1 / 4;
	grid-row: 1 / 5;
}
.imgaffichesize{
	height: 100vh;
	object-fit: cover; /* Maintain aspect ratio */
	object-position: left; /* Center the image */
	width: 100%;
}

.questionwa{
    font-size: 1.3em;
}
    
.imgwa{
    width: 15vw;
    cursor: pointer;
}

.formulairecu{
	
}

.formulrecu{
}

.questionsrecu{
	
font-size: 2.5em;
}

.btnrecu{
	
}

/*Main MOBILE*/

.presentation{
    grid-column: 1 / 4;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}


/* HERO HOME 2024 DESKTOP ALL */
.HeroHomeV2-Headline {
	font-size: 5vw;
}

.HeroHomeV2-Button{
	width: 25vw;
}


/* ----- Welcome Section Desktop Styles ----- */
    .welcome-section {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding: 4vh 5vw;
        background-color: #F9F9F9;
    }

    .welcome-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4vh;
        max-width: 1200px;
        margin: 0 auto;
    }

    .welcome-image {
        flex: 1;
    }

    .welcome-image img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .welcome-text {
        flex: 1;
        text-align: left; /* Ensure left alignment on desktop */
    }

    .welcome-text h2 {
        font-size: 2.2em;
        margin-bottom: 1.2em;
    }

    .welcome-text p {
        font-size: 1.1em;
        margin-bottom: 1em;
    }


/* SECTION Benefit HOME 2024 DESKTOP */
.Benefitsv1-Section{
grid-template-rows: 40vh 40vh 40vh 40vh;
grid-gap: 2em;
padding-top: 4em;
padding-bottom: 4em;
}

.Benefitsv1-Slide1{    
height: 40vh;    
grid-template-columns: 40% 20% 40%;    
grid-template-rows: 40vh;
}

.Benefitsv1-SlideTitle-left{
	grid-column: 1 / 3;
	grid-row: 1 / 2;
	place-items: center;
	height: 40vh;
	text-align: center;
	font-size: 3em;/* color: rgba(2, 31, 39, 1); */
}

.Benefitsv1-SlideTitle-right{
grid-column: 2 / 4;
grid-row: 1 / 2;
place-items: center;
height: 40vh;
text-align: center;
font-size: 3em;
}

.Benefitsv1-SlideSubTitle{	
grid-column: 1 / 3;	
grid-row: 1 / 2;	
place-items: center;	
padding-top: 4em;	
font-size: 2em;
}

.Benefitsv1-SlideImg-left{
grid-column: 1 / 3;
width: 50vw;
grid-row: 1 / 2;
grid-template-rows: 40vh;}

.Benefitsv1-SlideImg-right{    
grid-column: 2 / 4;    
width: 50vw;    
grid-row: 1 / 2;    
grid-template-rows: 40vh;
}

.Benefitsv1-IMGWrapper{    
grid-template-rows: 40vh;
}

.Benefitsv1-IMGUnit{
    
}

.Benefitsv1-IMGUnitLeft{    
width: 50vw;    
height: 40vh;
}

.Benefitsv1-Slide2{    
height: 40vh;    
grid-template-columns: 40% 20% 40%;    
grid-template-rows: 40vh;
}

.Benefitsv1-Slide3{    
height: 40vh;    
grid-template-columns: 40% 20% 40%;    
grid-template-rows: 40vh;
}

.Benefitsv1-Slide4{    
height: 40vh;    
grid-template-columns: 40% 20% 40%;    
grid-template-rows: 40vh;
}


/* SECTION Justification HOME 2024 MOBILE */

.Justification-section{
	
}

.HowWeDo-Wrapper{
    
}

.HowWeDo-Slide1{
    
}

.HowWeDo-Title{    
font-size: 3.5em;
}

.HowWeDo-Sub {	
font-size: 2.3em;
}





/* =================================================================== */
/* ===========      DESKTOP STYLES - STAYS TYPES V2      ============= */
/* =================================================================== */

/* 1. Reset global snap-scrolling for a natural desktop experience */
.snap-container {
    scroll-snap-type: none; /* Disables vertical snap */
    height: auto;           /* Allows the container to have a natural height */
    overflow-y: visible;
}

.snap-container > section, .affiche, .StaysTypes-Section {
    height: auto; /* Resets the 100vh height from the mobile version */
    scroll-snap-align: none;
}


/* 2. Adjust the main section container for desktop */
.StaysTypes-Section {
    padding: 15vh 10vw; /* Adds more vertical and horizontal padding */
}

.StaysTypes-Wrapper-v2 {
    /* The existing grid layout works well, no changes needed here */
}

.StaysTypes-Title-v2 {
    font-size: 2.5em; /* Larger title for desktop */
}

.StaysTypes-Introduction-v2 {
    font-size: 1.2em; /* Larger introduction text */
    max-width: 800px;   /* Limits the width of the text for better readability */
    justify-self: center; /* Centers the paragraph block */
}


/* 3. Transform the Carousel into a Grid */
.StaysTypes-Carousel {
    display: grid; /* CHANGE: from 'flex' to 'grid' */
    grid-template-columns: repeat(3, 1fr); /* Creates a 3-column grid */
    overflow-x: visible; /* Disables horizontal scroll */
    scroll-snap-type: none; /* Disables horizontal snap */
    
    /* Adjust padding for the grid view */
    padding-left: 0;
    padding-right: 0;
}


/* 4. Adjust Flip Card size and remove snap behavior */
.flip-card {
    flex-basis: auto;       /* Reset the flex-basis from mobile */
    scroll-snap-align: none;/* Remove snap alignment */
    aspect-ratio: 3 / 4;    /* Enforce a consistent aspect ratio for all cards in the grid */
	transform: translateZ(0); 
}


/* SECTION Experience HOME 2024 */
.Experience-Wrapper{
    
}

.Experience-Slide1{
    
}

.Experience-Title{    
font-size: 2.3em;
}

.Experience-Sub-2col {
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.Experience-Sub-2col-Unit{
    
}

.Experience-Sub-1col{
    
}

.Experience-Sub-1col-Unit{
    
}

.Experience-Sub-Unit-number{    
font-size: 2em;
}

.Experience-Sub-Unit-type{    
font-size: 1.9em;
}


/* SECTION Reviews HOME 2024 */
.Reviews-Section{
    
padding-top: 3em;
    
padding-bottom: 3em;
}

.Reviews-Slide1{
    
}

.Reviews-TitleWrap{
    
}

.Reviews-Title{
    
}

.Google-Logo-Container {
    
}

.Google-txt {
    
}

.maps-txt {
    
}

.Google-Logo {
    
}

.Google-Profile {
    
}

.Company-Name {
    
}

.Rating-Container {
    
}

.Rating {
    
}

.Stars {
    
}

.Review-Count {
    
}

.Ratings-Bar {
    
}

.Rating-Level {
    
}

.Rating-Level:nth-child(1) {
    
}

.Rating-Level:nth-child(2),
.Rating-Level:nth-child(3),
.Rating-Level:nth-child(4),
.Rating-Level:nth-child(5) {
    
}

/* Review Section */
.Reviews-Sub {
	
}

.Review {
    
}

.Review-Header {
    
}

.Review-Title {
    
}

.Review-Info {
    
}

.Reviewer {
    
}

.Review-Date {
    
}

.Review-Stars {
    
}

.Review-Text {
    
}

.ShowMoreReviewsButton {
    
}

.ShowMoreReviewsButton:hover {
    
}

.GoogleMapsLink {

}

.GoogleMapsLink:hover {
    
}

/* SECTION WhoWeAre HOME 2024 DESKTOP*/
.WhoWeAre-Section{
    
grid-template-rows: auto;
    
grid-template-columns: 1fr;
}

.WhoWeAre-Slide1{
    
grid-column: 1 / 3;
    
grid-row: 1 / 2;
    
padding-left: 3em;
    
padding-right: 3em;
    
grid-template-rows: 1fr auto 1fr auto 1fr;
}

.WhoWeAre-Title{
    
grid-row: 2 / 3;
    
font-size: 3.5em;
}

.WhoWeAre-Sub {
	
place-items: center;
	
grid-row: 4 / 5;
	
grid-template-columns: 1fr 1fr;
}

.WhoWeAre-Sub-img{width: 40vw;}

.WhoWeAre-Sub-txt{
	
}




/* SECTION FinalArgument HOME 2024 */
.FinalArgument-Section{
    
height: 110vh;
    
padding-top: 5em;
}

.FinalArgument-Slide1{
    
grid-template-rows: 5vh;
}

.FinalArgument-Title{
    
}

.FinalArgument-Sub {
	
padding-bottom: 2em;
}

.FinalArgument-Sub-Unit{
	
}

.FinalArgument-Sub-Unit-image{
	
}

.FinalArgument-Sub-Unit-description{
	
}

.FinalArgument-Slide2{
	
}


/* SECTION CTNS HOME 2024 */
/* NEW CTNS*/
.CTNS-Section{
	
place-content: center;
}

.CTNS-Buttons {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 5vw 90vw 5vw;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
    padding-bottom: 25vh;
}

.CTNS-ButtonsWrapper{
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
}

.CTNS-Button {
    grid-row: 1 / 2;
    padding: 0.8em 1em;
    border-radius: 8px;
    font-size: 1em;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 60vw;
    text-align: center;
}

.CTNS-ButtonOutline {
    grid-column: 1 / 2;
    color: rgba(229, 224, 196, 1);
    border: 2px solid rgba(229, 224, 196, 1);
    background-color: transparent;
    z-index: 30;
    margin-right: 0.5em;
}

.CTNS-ButtonSolid {
    grid-column: 2 / 3;
    color: rgba(20, 38, 60, 1);
    background-color: rgba(229, 224, 196, 0.9);
    z-index: 30;
    margin-left: 0.5em;
}

.CTNS-ButtonOutline:hover {
    background-color: rgba(229, 224, 196, 0.2);
}

.CTNS-ButtonSolid:hover {
    background-color: rgba(66, 66, 66, 1); /* Darken on hover */
}


.exemples{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
}

.TypesSejours2021-Section{
	
grid-template-rows: auto;
	
grid-template-columns: 1fr 1fr 1fr;
}

.photo1{
	height: 30vh;
    width: auto;
	grid-column: 1 / 2;
}
.photo1caption{
    display: grid;   
}
.imgtitle1{
}
.photo2{
	height: 30vh;
	grid-column: 2 / 3;
    grid-row: 5 / 6;
}
.photo3{
	height: 30vh;
	grid-column: 3 / 4;
    grid-row: 5 / 6;
}  
.imgservice{
    grid-column: 1 / 2;
    width: 28vw;
    padding: 1vw;
}
.modal-content{
    grid-column: 1 / 2;
    margin-left: 0;
    margin-right: 0;
}
.footer{
grid-template-columns: 1fr 1fr 1fr 1fr;
    }
.footerpropos{
    grid-column: 1 / 2;
	grid-row: 1 / 2;      
}
.footersejour{
    grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.footerinformationslegales{
    grid-column: 3 / 4;
	grid-row: 1 / 2;    
}
.footerprestataires{
    grid-column: 2 / 3;
	grid-row: 2 / 3;   
}
.footeradress{
    grid-column: 3 / 4;
	grid-row: 2 / 3;  
}
.footerlicence{
    grid-column: 4 / 5;
	grid-row: 1 / 2;
}
.footersocial{
    grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.logolicencia{
    grid-column: 4 / 5;
	grid-row: 2 / 3;
}
.logolicenciawrapperimg{
    width: 7vw;
    height: 7vw;
}

/* Hero Headline */
    .hero-headline {
        font-size: 3em; /* Increased for desktop */
    }

/* PRIVATE SPACE PARAMETERS */
/* Buttons Container */
    .hero-buttons {
        gap: 20px; /* Increased gap for desktop */
    }
    
    /* Common Button Styles */
    .hero-button {
        font-size: 1.2em; /* Increased font size for desktop */
        padding: 15px 25px;
        width: 20vw; /* Reduced width for desktop */
    }
	
/* ----- Activities Section Desktop Styles ----- */
    .activities-section {
        grid-column: 1 / 2;
        grid-row: 4 / 5; /* Adjust based on your grid */
        padding: 6vh 5vw;
        background-color: #FFFFFF;
    }

    .activities-title {
        font-size: 2.5em;
        margin-bottom: 3vh;
        text-align: left; /* Ensure left alignment */
    }

    

   .activity-image {

    }
	.activity-image img {

    }
    .activity-content {
        padding: 3vh 3vw;
    }

    .activity-title {
        font-size: 1.6em;
        margin-bottom: 1.5vh;
    }

    .activity-description {
        font-size: 1.1em;
        margin-bottom: 1em;
    }

    .activity-buttons {
        display: flex;
        justify-content: center; /* Center the button horizontally */
        gap: 1em; /* Space between buttons, though only one exists */
        width: 100%; /* Ensure button takes full width of the container */
    }

    .activity-button {
        font-size: 1em;
        padding: 1em 1.5em;
        flex: none; /* Remove flex growth since only one button exists */
        width: 100%; /* Make button span the full width */
        box-sizing: border-box; /* Include padding and borders within width */
        min-width: 0; /* Prevent button from overflowing */
    }
 .activity-page__cta-button {
        padding: 1em 2em;
        font-size: 1.1em;
    }
    .info-button {
        background-color: #1B7DB0; /* Brand color */
        text-decoration: none; /* Remove underline for links */
        display: inline-block; /* Ensure proper padding and width */
    }

    .info-button:hover {
        background-color: #166699; /* Darker shade on hover */
    }

    /* Accessibility Focus Styles */
    .activity-button:focus {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }
/* Activity Page Section */
    .activity-page__section {
        padding: 6vh 5vw;
    }

    .activity-page__name {
        font-size: 2em;
        margin-bottom: 3vh;
    }

    .activity-opening-image img {
        height: 300px;
    }

    .activity-page__description-title {
        font-size: 1.6em;
        margin-bottom: 1.5vh;
    }

    .activity-page__description-text {
        font-size: 1.1em;
        line-height: 1.8;
    }

    /* Swiper Carousel Styles for Landscape */
    .swiper-container {
        height: 400px; /* Increased height for landscape */
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    /* Pricing and WhatsApp Button */
    .activity-page__pricing {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2em;
        margin-bottom: 3vh;
    }

    .activity-page__pricing-box {
        width: 40%;
        padding: 1.5em;
    }

    .activity-page__pricing-adulte,
    .activity-page__pricing-enfant {
        font-size: 1.1em;
    }

    .activity-page__whatsapp-button {
        width: 55%;
        padding: 1em;
        font-size: 1.1em;
    }

    /* Conditions Section */
    .activity-page__conditions-title {
        font-size: 1.6em;
        margin-bottom: 1vh;
    }

    .activity-page__conditions-text {
        font-size: 1.1em;
        line-height: 1.8;
    }

    /* Other Activities Section */
    .activity-page__other-activities-title {
        font-size: 1.8em;
        margin-bottom: 1.5vh;
        text-align: left;
    }

    .activity-page__other-activities-container {
        
        gap: 3vh;
    }

    



/* ----- Custom Carousel Styles ----- */
/* Responsive Adjustments */

.opening-section {
        grid-template-columns: 2fr 1fr;
    }
.image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
}
.large-image {
	grid-row: 1/2;
    grid-column: 1/2;
}
.large-image img {
	border-top-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
}
.small-images {
	grid-row: 1/2;
    grid-column: 2/3;
}
.top-left {
   border-radius: 0;
}

.top-right {
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.bottom-left {
    border-radius: 0;
}

.bottom-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 10px;
}
    .custom-carousel .carousel-inner {
        width: 80vw;
        height: auto;
		max-height: 80vh;
    }

    .carousel-item img {
    }

    .carousel-button {
        font-size: 1.5em;
        padding: 10px;
    }

    .carousel-pagination .dot {
        width: 12px;
        height: 12px;
    }
}




/* ----- Media Queries for Portrait Orientation ----- */
/* Portrait: Small Screens (max-width: 600px) */
@media screen and (orientation: portrait) and (max-width: 600px) {
    .activities-container {
        grid-template-columns: 1fr; /* Remains single column */
    }

/* HERO HOME 2024 MOBILE SMALL */
	.HeroHomeV2-Headline {
	font-size: 5vw;
	}
}




/* Portrait: Medium Screens (601px to 900px) */
@media screen and (orientation: portrait) and (min-width: 601px) and (max-width: 900px) {
    .activities-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 3vw;
    }
	.booking-contact-options {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .booking-contact-button {
        flex: 0 0 48%;
    }


/* HERO HOME 2024 MOBILE MEDIUM */
	.HeroHomeV2-Headline {
	font-size: 6vw;
	}
}




/* Portrait: Large Screens (min-width: 901px) */
@media screen and (orientation: portrait) and (min-width: 901px) {
    .activities-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3vw;
    }
}

/* HERO HOME 2024 MOBILE LARGE */
.HeroHomeV2-Headline {
	font-size: 7vw;
}



/* ----- Media Queries for Landscape Orientation ----- */

/* Landscape: Small Screens (max-width: 800px) */
@media screen and (orientation: landscape) and (max-width: 800px) {
    .activities-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 3vw;
    }

/* HERO HOME 2024 DESKTOP SMALL */
	.HeroHomeV2-Headline {
	font-size: 5vw;
	}
}




/* Landscape: Medium Screens (801px to 1200px) */
@media screen and (orientation: landscape) and (min-width: 801px) and (max-width: 1200px) {
    .activities-container {
        grid-template-columns: repeat(3, 1fr); /* Three columns */
        gap: 3vw;
    }
	/* HERO HOME 2024 DESKTOP MEDIUM */
	.HeroHomeV2-Headline {
	font-size: 5vw;
	}
}




/* Landscape: Large Screens (min-width: 1201px) */
@media screen and (orientation: landscape) and (min-width: 1201px) {
    .activities-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3vw;
    }
	/* HERO HOME 2024 DESKTOP HD */
	.HeroHomeV2-Headline {
	font-size: 5vw;
	}
	/*SECTION Stay Types 2025*/
	.StaysTypes-Grid-v2 {
        grid-template-columns: repeat(3, 1fr);
    }
    .StaysTypes-Title-v2 {
        font-size: 2.8em;
    }
    .StaysTypes-Introduction-v2 {
        font-size: 1.2em;
        padding: 0 15vw;
    }
}