/**** conception et integration par Raphael Wittmannn et EXOTISMES 
 * author url : https://raphaelwittmann.net/
 ******/

/*
 *  FONTS
 */ 
body, input, .btn.filtersTopTitle, .listSearchWrapper .btn, .txt.affichetteBottomRight   { font-family: 'lato', 'Arial', sans-serif; }

h1, h2, h3, .txt, .btn, .navBar, .agenceWrapper > label, .pagination a, .footerPhone { font-family: 'lato-light', 'Arial', sans-serif; }


/*
 *  GENERAL
 */ 

:root {
    --side-margin: 20px;
    --content-max-width: 1300px;
    
    --color-white: #fff;
    --color-blue: #002A3F;
    --color-blue-mid: #80949F;
    --color-orange: #E84E0F;
    --color-yellow: #ffdc01;
    --color-grey: #808080;
    --color-light: #D9D9D9;
    --color-lighter: #e5e9eb;
    --swiper-navigation-sides-offset: 1px;
    --swiper-pagination-bottom: -40px;
}


html { }
body { background: var(--color-blue); font-size: 20px; line-height: 1; color: var(--color-white); text-align: left; overflow-x: hidden; }
.contentWrapper { color: var(--color-blue); background: var(--color-white); width: 100%; min-height: 100vh; }
a { text-decoration: underline; color: inherit; transition: opacity 0.3s ease; }
a:hover { text-decoration: none; }

.btn { display: inline-block; text-decoration: none; border: 1px solid currentColor; font-size: 22px; text-transform: uppercase; font-weight: bold; padding: 16px 26px 13px; border-radius: 50px; transition: all 0.2s ease; letter-spacing: 2px;  }
.btn:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); }
.btn.orange { background: var(--color-orange); border-color: var(--color-blue); color: var(--color-white); } 
.btn.orange:hover { background: var(--color-white); border-color: var(--color-orange); color: var(--color-orange); }

.main, .sectionContentWrapper { margin: 0 auto; max-width: var(--content-max-width); padding: 25px; }

.clearfix:before, .clearfix:after { clear: both; content: " "; display: table; }

.yellowStars { font-size: 0.5rem; letter-spacing: -0.7px; white-space: nowrap; padding: 0 12px 0 0; position: relative; bottom: .2rem; display: inline-block; }
h1 .yellowStars { bottom: 0.6rem; }
.yellowStars:after { 
    content: 'NL'; font-size: 8px; line-height: 8px; letter-spacing: 0.3px;
    position: absolute; right: -2px; top: 1px; z-index: 1;
}

a:active { opacity: 0.8; }

/*
 *  HEADER
 */ 


.menuWrapper { display: none; background: #fff; text-align: left; pointer-events: none; position: relative; z-index: 100; }
.menuWrapper ul {  }
.menu-opened .menuWrapper { pointer-events: auto; transition-delay: 0s; }

.menuWrapper li { border-top: 1px solid var(--color-blue-mid); }
.menuWrapper li ul a { padding: 13px 13px; font-size: 14px; line-height: 1.1; display: block; color: var(--color-blue); border: 1px solid transparent; transition: border-color .2s ease; text-decoration: none; border-radius: 10px;}
.menuWrapper li label { padding: 15px 13px; font-size: 14px; line-height: 1.1; display: block; color: var(--color-blue); text-decoration: none; text-transform: uppercase; background: var(--color-lighter); }



.menuTop { display: none; }
.menuTop a { text-decoration: none; }
.menuTop a:hover { text-decoration: underline; }
.menuTop ul { display: flex; gap: 15px; justify-content: flex-end; }

/*
 *  NAV BAR
 */ 


.navBar { background: transparent; color: #fff; position: absolute; left: 0; right: 0; top: 0; z-index: 99; animation: 0.3s ease-in 0 slideup; -webkit-animation: 0.3s ease-in 0s slideup; }
.navBar .navBarContent { position: relative; display: flex; align-items: center; justify-content: space-between; }
.navBar .navBarContent:after { content: ''; height: 1px; display: block; background: var(--color-white); position: absolute; left: var(--side-margin); right: var(--side-margin); bottom: -1px; }
@-webkit-keyframes slideup { from { transform: translateY(-50px); opacity: 0; }     to { translateY(0); opacity: 1; } }
@keyframes slideup { from { transform: translateY(-15px); opacity: 0; } to { translateY(0); opacity: 1; } }
.navBar .topLogoWrapper {display: none; }
.navBar .logoHeaderLink {display: flex; padding: 13px var(--side-margin); }
.navBar .topCenterLogoWrapper .logoHeaderLink { justify-content: center; }
.navBar .logoHeaderLink img { height: 21px; width: auto; display: block; }

.navBar .btn { padding: 5px 10px; border-radius: 50px; font-size: 13px; text-decoration: none; text-transform: none;  }
.navBar .btn:hover { text-decoration: none; background-color: var(--color-white); border-color: var(--color-blue); color: var(--color-blue); } 

/*** menu toggle ***/

body #menu-toggle { display: block; float: right; width: 50px; text-align: center; position: relative; z-index: 9999;  text-decoration: none; position: absolute; right: 10px; top: 0; padding: 7px 0 6px; margin-top: 0; }

a#menu-toggle { cursor: pointer; transition-timing-function: linear; transition-duration: .75ms; transition-property: opacity,filter; }
#menu-toggle strong { display: inline-block; position: relative; width: 30px; height: 26px; } 
#menu-toggle i, #menu-toggle i:before, #menu-toggle i:after { display: block; background-color: var(--color-white); height: 3px; width: 30px; position: absolute; z-index: 99; left: 0;  border-radius: 2px; transition-timing-function: ease; transition-duration: .75ms; transition-property: transform; } 

#menu-toggle i { top: 50%;  transition-duration: 75ms; }
#menu-toggle i:before { content:''; top: -7px; transition: top 75ms ease .12s, opacity 75ms ease; }
#menu-toggle i:after { content:''; bottom: -7px; transition: bottom 75ms ease .12s; }

#menu-toggle.opened i { transform: rotate(45deg); background-color: var(--color-blue);  }
#menu-toggle.opened i:before { transition: top 75ms ease, opacity 75ms ease .12s; top: 0; opacity: 0; background-color: var(--color-blue); }
#menu-toggle.opened i:after{ bottom: 0; transition: bottom 75ms ease; transform: rotate(-90deg); background-color: var(--color-blue); }




/*
 *  HEADINGS
 */ 

h1 { font-size: 28px; font-weight: 300; line-height: 1.1; text-transform: uppercase;  }
h2 { font-size: 28px; font-weight: 300; line-height: 1.1; overflow: hidden; }
h2 > strong { display: inline-block; font-weight: 300; position: relative; }
h2 > strong:after { content: ''; width: 100vw; height: 1px; display: block; background: var(--color-blue-mid); position: absolute; z-index: 0; left: calc(100% + 15px); top: 50%; } 



.sectionHeader { text-align: center; padding: 50px 0; margin-bottom: 15px; }
.sectionContentWrapper { margin: auto; max-width: var(--content-max-width); }




/*
 *  HOME DESTINATIONS GRID
 */ 
.destinationsGrid { display: grid; grid-template-columns: 1fr; gap: 25px; }

.cardWrapper { margin-bottom: 20px; }
.card {  }
.card > a { text-decoration: none; display: block; border: 1px solid var(--color-blue-mid); border-radius: 10px 10px;  }
.card > a:hover { border-color: var(--color-orange); }
.cardTitleWrapper {  padding: 15px;  }
.cardSupTitle {  font-size: 16px; color: var(--color-blue-mid);  text-transform: uppercase; line-height: 1.2;  }
.card > a:hover .cardTitle {  color: var(--color-orange); }
.cardTitle { font-size: 16px; text-transform: uppercase; transition: color 0.3s ease; line-height: 1.2; }
.cardImage { border-radius: 10px 10px 0 0; overflow: hidden; position: relative; top: -1px; left: -1px; width: calc(100% + 2px); }
.cardImage:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0, 42, 63, 0.5) 0%, rgba(0, 42, 63, 0) 40%);}
.card img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 6/7; transform: scale(1); transition: transform 1.3s ease; }
.card > a:hover img { transform: scale(1.05); }
.cardDestination.card img { aspect-ratio: 1; }
.cardDestination.card > a { padding-bottom: 50px; }

.cardImage .priceWrapper { position: absolute; left: 20px; right: 20px; bottom: 10px; z-index: 5; color: var(--color-white); text-align: right; overflow: hidden; }
.cardImage .priceFrom { font-size: 11px; position: relative;  }
.cardImage .priceFrom:before { content: ''; width: 100vw; height: 1px; background: var(--color-white); display: block; position: absolute; right: calc(100% + 15px); top: 50%; } 
.cardImage .price { font-size: 16px; transition: font-size 0.3s ease; }
a:hover .cardImage .price { font-size: 26px; }

.card a:hover:after { opacity: 0.5; } 

.cardDestination { position: relative; }
.cardDestinationsListWrapper { position: absolute; bottom: 0px; left: 0; right: 0; z-index: 3; border-top: 1px solid var(--color-blue-mid); padding: 0;  }
.sectionContentWrapper .cardDestinationsList ul { display: flex; white-space: nowrap; font-size: 13px; color: var(--color-blue-mid); list-style: none; padding: 0 20px; margin: 0; }
.sectionContentWrapper .cardDestinationsList ul .swiper-slide { width: max-content; padding: 17px 0; }
.sectionContentWrapper .cardDestinationsList ul .swiper-slide a { display: block; }

.cardDestinationsList:before,.cardDestinationsList:after { content: ''; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%); border-radius: 10px; display: block; width: 24px; bottom: 2px; right: 1px; top: 2px; position: absolute; z-index: 2; pointer-events: none; }
.cardDestinationsList:before { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 100%); left: 1px; right: auto;  }

.cardDestinationsListWrapper .swiper-button-next, .cardDestinationsListWrapper .swiper-button-prev  { border-radius: 10px; opacity: 0; transition: opacity 0.3s ease; }
.cardDestinationsListWrapper .swiper-button-next svg, .cardDestinationsListWrapper .swiper-button-prev svg  { height: 18px;  }
.cardDestination:hover .swiper-button-next, .cardDestination:hover .swiper-button-prev { opacity: 1;  }

.swiper-button-prev svg, .swiper-button-next svg { opacity: 0.5; height: 26px; transition: opacity 0.3s ease; }
.swiper-button-prev:hover svg, .swiper-button-next:hover svg { opacity: 1; }
.swiper-button-next.swiper-button-disabled svg, .swiper-button-prev.swiper-button-disabled svg { opacity: 0; }

.productsSwiper  .swiper-button-prev, .swiperContentProduct .swiper-button-prev { left: -44px;  }
.productsSwiper  .swiper-button-next, .swiperContentProduct .swiper-button-next { right: -44px;  }

/*
 *  IMAGES
 */ 
img { max-width: 100%; }
.lazyload { opacity: 0; }
.lazyloaded { opacity: 1; transition: opacity 300ms; }

/*
 *  Footer
 */ 


.footer { padding: 70px 0; text-align: left; font-size: 15px; line-height: 1.2; }

.phoneWrapper { margin-top: 40px; }
.footerPhone { display: block; text-decoration: none; }
.footerPhone strong { font-size: clamp(18px, 3vw, 32px); }
.footerPhone span { display: block; }

.logoFooter img { height: 55px; width: auto; display: block; margin: 0 auto 20px; }
.footerMainLine { border-top: 1px solid var(--color-white); border-bottom: 1px solid var(--color-white); padding: 25px 0; text-align: center; }
.footerBottom { padding: 20px 0; text-align: center; font-size: 13px; }

.footerLinks { text-align: center; padding: 20px 0; font-size: 15px; line-height: 1.2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 20px; }
.footerLinks p { margin: 0; }
.footerLinks p a { text-decoration: none; }
.footerLinks p a:hover { text-decoration: underline; }
.footerLinksSep { color: var(--color-blue-mid); }

.socialNetworkLinks { display: flex; margin-top: 40px; justify-content: center; }
.socialNetworkLinks li { margin-right: 10px; }
.socialNetworkLinks li a svg { width: 32px; height: auto; }
.socialNetworkLinks li a { transition: opacity 0.2s ease;  }
.socialNetworkLinks li a:hover { opacity: 0.7;  }

/*
 *  Sliders
 */ 
.swiperWrapper { position: relative;  padding-bottom: 0;  }
.swiper { width: 100%; } 
.swiper-slide img { width: 100%; display: block; }
.swiper-button-next, .swiper-button-prev { display: none; }
.swiperWrapper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -40px; }

/***** slider produit contenu *****/
* + .swiperContentProduct { margin-top: 60px; }
.swiperContentProduct { margin-bottom: 80px; }
.swiperContentProduct img { object-fit: cover; aspect-ratio: 16/10; border-radius: 10px; }
.swiper-buttons-wrapper { display: flex; gap: 5px; height: 30px; position: relative; left: 13px; top: -3.5px; }
.swiper-button-next.swiper-button-next-hero, .swiper-button-prev.swiper-button-prev-hero { height: 30px; padding: 5px 0; position: static; margin-top: 0; display: block; }
.swiper-button-next-hero svg path, .swiper-button-prev-hero svg path { fill: var(--color-white); }
/***** slider produit hero *****/
.sejourHeroSection .sectionContentWrapper { min-height: 400px; }
.swiperHeroProduct img { object-fit: cover; height: 400px; }



/*
 *  HERO SECTIONS
 */ 
.heroSection { position: relative; background: var(--color-blue); }
.heroSection:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0, 42, 63, 0.1) 0%, rgba(0, 42, 63, 0.5) 100%); }
.heroSection > .sectionBackground { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; display: block;  }
.heroSection:not(.homeHeroSection):after { position: absolute; left: var(--side-margin); right: var(--side-margin); bottom: 60px; z-index: 2; background: var(--color-white); height: 1px; }
.heroSection > .sectionContentWrapper { position: relative; z-index: 5; color: var(--color-white);  padding: 62px 20px 0 20px;  display: flex; justify-content: center; align-items: center;  }
.sectionContent { position: relative; }
.headerHero { text-align: center; padding: 25px 0; }
.heroNavTop { position: absolute; z-index: 6; top: 58px; left: var(--side-margin); right: var(--side-margin); font-size: 13px; color: var(--color-white); display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.heroNavTop .btnBack svg { height: 25px; width: auto; }
.heroNavTop .btnBack { display: flex; gap: 10px; align-items: center; padding: 5px 0; opacity: 0.5; transition: opacity 0.3s ease; text-decoration: none; }
.heroNavTop .btnBack:hover { opacity: 1; } 
.heroNavTop .btnBack span { opacity: 0; transition: opacity 0.3s ease; }
.heroNavTop .btnBack:hover span { opacity: 1; }
.heroSection .sectionContent h1, .heroSection .sectionContent * + h1 { border: 1px solid var(--color-white); padding: 18px 15px; border-radius: 10px; margin: 15px 0;  }

.smallCaps { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
/**** Product Hero ****/
.heroSection.sejourHeroSection > .sectionContentWrapper {  }
/**** Destination Hero ****/
.imgBackground { width: 100%; height: 100%; display: block; object-fit: cover; }


/*
 *  HOME HERO
 */ 
.homeHeroSection { position: relative; padding: 0 var(--side-margin); background: var(--color-blue); color: var(--color-white); text-align: center; overflow: hidden; }
.homeHeroSection:before { 
    content: '';  background: rgba(0,42,63, 0.3); background: linear-gradient(180deg, rgba(0,42,63,0.6) 0%, rgba(0,42,73,0) 50%); 
    position: absolute;  left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
}
.homeHeroVideoWrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; }
.homeHeroSection .homeHeroBackgroundVideo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.homeHeroSection .sectionContentWrapper { position: relative; z-index: 2; padding: 100px 0; min-height: 100vh;  display: flex; justify-content: center; align-items: center; }
.homeHeroSection .sectionContent {  }

.homeHeroSection h1 { text-shadow: 0 5px 10px rgba(0,0,0,0.3); position: relative; margin-top: 30px; margin-bottom: 75px; }


.homeHeroSection .sectionBottom { position: absolute; z-index: 3; bottom: 23px; left: var(--side-margin); right: var(--side-margin); display: flex; justify-content: center; overflow: hidden; }
.homeHeroSection .sectionBottom .arrowBottomHome { display: flex; width: 56px; height: 56px; border: 1px solid var(--color-white); border-radius: 50px; cursor: pointer; align-items: center; justify-content: center; transition: background 0.3s ease; position: relative }
.homeHeroSection .sectionBottom .arrowBottomHome:hover { background: rgba(255,255,255,.2); }
.homeHeroSection .sectionBottom .arrowBottomHome:before, .homeHeroSection .sectionBottom .arrowBottomHome:after { content: ''; width: 100vw; height: 1px; display: block; background: var(--color-white); position: absolute; z-index: 0; right: calc(100% + 15px); top: 50%; }
.homeHeroSection .sectionBottom .arrowBottomHome:after { right: auto; left: calc(100% + 15px); }
/*
 *  MESSAGES
 */ 
#messageWrapper { display: none; position: fixed; width: 100%; bottom: -60px; left: 0; text-align: center; z-index: 9; opacity: 1; }
#messageWrapper p { display: inline-block; background: var(--color-orange); color: #fff; font-size: 16px; padding: 15px; border-radius: 40px; box-shadow: 0 0 13px rgba(0, 0, 0, .3); }

/*
 *  
 */ 


/*
 *  TEXTES
 */ 
.sectionContentWrapper { font-size: 20px; line-height: 1.4; }
.textLarge { font-size: 22px; }
.textExtraLarge { font-size: 30px; }

.sectionContentWrapper p, .sectionContentWrapper ul { margin: 25px 0; }
.sectionContentWrapper * + h1, .sectionContentWrapper * + h2 { margin-top: 50px; }


.sectionContentWrapper ul { list-style: disc; padding-left: 15px; }

.titreFiletWrapper h2 { text-align: center; font-size: 24px; text-transform: uppercase; padding: 5px 0; letter-spacing: 1px; }
.titreFiletWrapper h2 strong:before { content: ''; width: 100vw; height: 1px; display: block; background: var(--color-blue-mid); position: absolute; z-index: 0; right: calc(100% + 15px); top: 50%; }
.titreFiletWrapper.titreMeilleurDesIles h2 { background: transparent url('img/logo-LeMeilleurdesIles.svg') no-repeat 50% 100%; background-size: auto 26px; }
.titreFiletWrapper.titreMeilleurDesIles h2 strong { padding-bottom: 24px; }

/*
 *  AGENCE PARTENAIRE
 */ 
.agenceWrapper { padding: 100px var(--side-margin) 100px; display: flex; justify-content: center; flex-direction: column; align-items: center; }
.agenceWrapper > label { display: block; text-align: center;  font-weight: bold; font-size: 13px; line-height: 1.4; color: var(--color-blue-mid); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.agenceBlock {   }
.agenceBlock > .agenceContent, .lightBoxContent .agenceBlock > .agenceContent { display: flex; gap: 15px; padding: 20px; border: 1px solid var(--color-blue-mid); border-radius: 10px; text-decoration: none; font-size: 12px; line-height: 1.3; align-items: center; }
.agenceLogo { max-width: 125px; border-radius: 5px; }
.agenceName { font-size: 14px; font-weight: bold; }

/*
 *  HOME
 */ 

/*
 *  SEJOURS
 */ 
.priceFrom { font-size: 13px; line-height: 1; }
.sejourPriceWrapper { padding-bottom: 30px;  }
.sejourPriceColumn { display: flex; justify-content: center; }
.sejourPriceWrapper .price { font-size: 60px; line-height: 1.2; font-weight: bold; }
.sejourPriceWrapper .priceOptionWrapper { border-top: 1px solid var(--color-blue-mid); border-bottom: 1px solid var(--color-blue-mid); padding: 7px 0 5px; }
.sejourPriceWrapper .priceOptionSelect { border: 0; border-top: 1px solid var(--color-blue-mid); border-bottom: 1px solid var(--color-blue-mid); padding: 7px 10px 7px 0; background: var(--color-white); width: 100%; border-radius: 0; }
.sejourPriceWrapper .pricePriceBase { color: var(--color-blue-mid); font-size: 13px; margin-top: 10px; }
.sejourPriceWrapper .btnWrapper { margin-top: 20px; }
.sejourPriceWrapper .shareWrapper { margin-top: 20px; }
.sejourPriceWrapper .shareWrapper ul { list-style: none; display: flex; gap: 25px; padding: 0; margin: 0; font-size: 13px; }
.sejourPriceWrapper .shareWrapper ul a { color: var(--color-blue-mid); text-decoration: none; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.sejourPriceWrapper .shareWrapper ul a:hover { color: var(--color-blue); text-decoration: none; }
.sejourPriceWrapper .stampWrapper { display: none; justify-content: center; margin: 30px auto 0;  }

details { border: 1px solid var(--color-blue-mid); border-radius: 10px; margin-top: 40px; margin-bottom: 30px; }
details > summary { padding: 20px; padding-right: 45px; font-size: 20px; font-weight: bold; color: var(--color-blue-mid); cursor: pointer; transition: color .3s ease; position: relative; line-height: 1.2; }
details > summary:after { content: ''; display: block; width: 20px; height: 20px; background: transparent url(img/arrow.svg) no-repeat 50% 50%; background-size: auto 100%; position: absolute; z-index: 2; right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); opacity: 0.5; }
details > summary:hover { background: var(--color-ligher); color: var(--color-blue); }
details[open] > summary:after { background-image: url('img/croix.svg');}
details > .detailsContentWrapper { padding: 20px; border-top: 1px solid var(--color-blue-mid); font-size: 16px; }
details > .detailsContentWrapper img { border-radius: 10px; }

.sejoursGrid { display: grid; grid-template-columns: 1fr; gap: 20px;}
.swiper-initialized .sejoursGrid { display: flex; gap: 0; align-items: stretch; }
.swiper-initialized .sejoursGrid .cardWrapper { margin-bottom: 0!important; height: auto; padding: 5px 0; }


.productsSwiper { position: relative; }

.productsSection { padding-bottom: 20px; }
body.sejour .productsSection { padding-bottom: 100px; }

/*
 *  FILTRES
 */ 


/*** filtres ***/
.filtersSection .sectionContentWrapper { padding-top: 0px; padding-bottom: 0px; }
.listSearchWrapper { color: var(--color-white); background: var(--color-blue); }
.listSearchHeader  { padding-top: 13px; padding-bottom: 13px; }

.filtersTopFieldsWrapper { display: flex; gap: 15px; font-size: 13px; align-items: center; }
.filtersTopFieldsWrapper ul { display: none; gap: 10px; list-style: none; padding: 0; margin: 0;  }
.filtersTopFieldsWrapper ul li a { display: block; text-decoration: none; border: 1px solid var(--color-white); border-radius: 50px; padding: 6px 27px 5px 10px; background: transparent url(img/icon-close.svg) no-repeat calc(100% - 9px) 50%; background-size: 9px auto; opacity: 0.5; transition: opacity 0.3s ease; }
.filtersTopFieldsWrapper ul li a:hover { opacity: 1; }

.listSearchHeader { display: flex; justify-content: space-between; }

.listSearchHeader .submitWrapper {   }
.listSearchHeader fieldset {  }

.listSearchWrapper .btn { border-color: var(--color-white); background-color: var(--color-blue); color: var(--color-white); font-size: 15px; text-transform: none; letter-spacing: 0; }
.listSearchWrapper .btn:hover { border-color: var(--color-white); background: var(--color-white); color: var(--color-blue); }
.listSearchWrapper select, .listSearchWrapper input[type="text"] { color: var(--color-blue-mid); background:  var(--color-white); border: 1px solid var(--color-white); border-radius: 3px; padding: 10px 12px; font-size: 16px; width: 100%; }

.filtersTopTitle { background-color: var(--color-blue); border: 1px solid var(--color-white);  color: var(--color-white); text-transform: none; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; padding: 8px 14px 7px; } 

.filtersTopTitle:hover, .filtersSearch.opened .filtersTopTitle { background-color: rgba(255,255,255,.1); color: var(--color-white); border-color: var(--color-white); }
.filtersTopTitle i { font-size: 18px; line-height: 1; }
.filtersTopTitle span { display: inline-block; float: right; padding: 0 0 0 10px; font-weight: bold; font-size: 13px; border-radius: 10px; }

#moreFiltersArea { display: none; border-top: 1px solid rgba(255, 255, 255, 0.4); padding: 50px 0; }

.listSearchHeader .magicTextSearchInput { 
    width: 100%; padding: 12px 10px 10px; font-size: 16px; line-height: 28px; margin-bottom: 0; float: left;
}


.rowFiltersFields { display: grid; gap: 20px; grid-template-columns: 1fr; }
.rowFiltersFields p { margin: 0; }
.rowFiltersFields p > label { font-size: 16px; display: block; margin-bottom: 8px; }

.mobileOnlyText #moreFiltersLink { cursor: pointer; display: block; }
.mobileOnlyText #lessFiltersLink { cursor: pointer; display: none; }
.mobileOnlyText.opened #moreFiltersLink { cursor: pointer; display: none; }
.mobileOnlyText.opened #lessFiltersLink { cursor: pointer; display: block; }


.filtersWidget { padding: 50px 0 30px; color: #FFF; }
.filterWidgetTitle { padding-top: 3px; color: #FFF; text-transform: none; font-size: 16px; line-height: 1;  margin-bottom: 25px; position: relative; }
.filterWidgetTitle:after { content: ''; display: block; position: absolute; z-index: 0; top: 50%; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.filterWidgetTitle span { background-color: var(--color-blue); padding: 0 10px 0px 0; position: relative; z-index: 1; }

.filtersWidget ul { list-style: none; padding: 0; margin: 0; }
.filtersWidget ul li { padding: 10px 0; font-size: 13px; line-height: 1.2; }
.htmlStars { font-size: 8px; position: relative; top: -2px; }

.filtersWidget input[type=checkbox] {
	display: none;
}


.filtersWidget ul li {
		
	position: relative;
}
.filtersWidget label { padding-left: 22px; position: relative; cursor: pointer; }

.filtersWidget label:before {
    content: '';
    cursor: pointer; position: absolute; z-index: 1; top: -1px; left: 0;
    border-radius: 3px; width: 14px; height: 14px; border: 1px solid #FFF; background: #FDEDE7;	
}

.filtersWidget label:after {
    opacity: 0; content: ''; cursor: pointer; 
    position: absolute; z-index: 5; top: 3px; left: 3px;
    width: 8px; height: 5px; background: transparent; border: 2px solid #002A3F; border-top: none; border-right: none;
    -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}

.filtersWidget label:hover::after { opacity: 0.3; }

.filtersWidget input[type=checkbox]:checked + label:after { opacity: 1; }
.filtersWidget input[type=checkbox][disabled] + label { opacity: .5; }
 
.filtersSearch .submitWrapper { text-align: center; padding-top: 15px; overflow: hidden; }
.submitinputWrapper { position: relative; display: inline-block; }
.submitinputWrapper:before, .submitinputWrapper:after { content: ''; width: 100vw; height: 1px; display: block; background: var(--color-blue-mid); position: absolute; z-index: 0; right: calc(100% + 15px); top: 50%; }
.submitinputWrapper:after { right: auto; left: calc(100% + 15px); }



/*
 *  Pagination
 */ 
.pagination { padding: 50px 0; border-bottom: 1px solid var(--color-blue-mid); }
.pagination a, .pagination a.btn { text-decoration: none; display: block; padding: 8px 10px 7px; border: 1px solid var(--color-blue-mid); color: var(--color-blue-mid); font-size: 15px; border-radius: 50px; letter-spacing: 0; text-transform: none; font-weight: bold; transition: all 0.3s ease; width: 38px; text-align: center; }
.pagination a.btn { width: auto; }
.pagination a:hover, .pagination a.btn:hover { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }
.pagination ul { display: flex; gap: 5px; align-items: center; justify-content: center; list-style: none; padding: 0; margin: 0; }


/*
* Affichette
*/
.affichette a { text-decoration: none; }
.affichetteTopRow { display: flex; flex-direction: column; gap: 20px; }
.affichetteImage img { display: block; width: 100%; border-radius: 10px; }
.affichetteHeader { border: 1px solid var(--color-blue-mid); border-radius: 10px; padding: var(--side-margin); }
.affichetteHeaderInfos { gap: 15px; flex-direction: column; display: flex; width: 100%; }
.affichetteHeader h1 {
	margin: 0;
	font-family: 'lato', 'Arial', sans-serif;
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.affichetteMidRow { display: flex; flex-direction: column; gap: 20px; }
.affichetteMidRowLeft { display: block; width: 100%; border-radius: 10px; padding: var(--side-margin) 0; }
.affichetteMidRowRight { padding: var(--side-margin); display: flex; flex-direction: column; gap: 10px; }

.affichetteMidRowRight .pricePriceBase { max-width: 190px; }
.affichetteMidRowRight .priceOptionWrapper { border: 0; font-size: 13px; font-weight: normal; }
.affichette .txt p { margin-top: 15px; margin-bottom: 15px; }
.affichetteMidRowRight .stampWrapper { position: relative; }
.stampWrapper .qrCodeWrapper { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stampWrapper .qrCodeWrapper img { width: 69px; height: auto; display: block; }

.affichetteBottomRow { display: flex; flex-direction: column; gap: 20px; }
.affichetteBottomRight { font-size: 13px; color: var(--color-blue-mid); }
.affichette .agenceWrapper { padding: 0; display: flex; gap: 15px; flex-direction: column; }
.affichette .agenceWrapper > label { margin: 0; line-height: 1.2; }

.affichetteFooter { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-blue-mid); padding: 15px 0; position: relative; top: 40px;}

.affichetteOptions { font-size: 13px; color: var(--color-blue-mid); display: none; }
.lightBoxWrapper .affichetteOptions { display: flex; gap: 20px; align-items: center; position: absolute; z-index: 99; right: 0; top: -31px; }
.lightBoxWrapper .affichetteOptionsBottom { top: auto; bottom: -31px; }
.affichetteOptionsShare { display: flex; gap: 10px; align-items: center; }
.affichetteOptionsShare > label { display: flex; gap: 10px; align-items: center; }
.affichetteOptionsShare > label svg path { fill: var(--color-blue-mid);  }
.affichetteOptionsShare ul { display: flex; gap: 10px; align-items: center; }
.affichetteOptionsLinks { display: flex; gap: 20px; align-items: center; }
.affichetteOptionsLinks li a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--color-white);  }
.affichetteOptionsLinks li a span { display: none; }

/*
* Light box
*/

body.lightboxActivated { position: fixed; left: 0; right: 0; }
body.lightboxActivated .tunnelMain { filter: blur(10px); }
.lightBoxWrapper { display: block; position: fixed; z-index: 99999; top: 0; left: 100%; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; background: rgba(0,42,63,0.7); backdrop-filter: blur(20px); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; visibility: hidden;}
.lightboxActivated .lightBoxWrapper { display: block; visibility: visible; opacity: 1; left: 0; pointer-events: auto; }
.lightBoxWrapper .lightBoxContent { opacity: 0; transition: opacity 0.4s ease, top 0.4s ease; position: relative; top: -30px; }
.lightboxActivated .lightBoxWrapper .lightBoxContent { opacity: 1; top: 0; }

.lightBoxWrapper .lightboxLoader, .tunnelColonneLoader .loader, .tunnelVolsLoader .loader, .tunnelPatienceLoader .loader, .loader { position: absolute; top: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; border-radius: 100%; border: 1px solid var(--color-blue-20); background: var(--color-white); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }
.loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelColonneLoader .loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelVolsLoader .loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelPatienceLoader .loader { top: 10px; right: 20px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent; }
.lightBoxWrapper .lightboxLoader:before, .tunnelColonneLoader .loader:before, .tunnelVolsLoader .loader:before, .tunnelPatienceLoader .loader:before, .loader:before { width: 50px; height: auto; margin: 0 auto; display: block; 
    content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(farthest-side,#80949f 94%,#0000) top/3.8px 3.8px no-repeat, conic-gradient(#0000 30%,#80949f);
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0); animation: spinner-c7wet2 1s infinite linear; 
    
}

@keyframes spinner-c7wet2 {
   100% {
      transform: rotate(1turn);
   }
}
.lightBoxWrapper .lightbox { padding: 35px 25px 35px; display: flex; align-items: center; justify-content: center; /*overflow: scroll;*/  min-height: 100%; }
.lightBoxContent { background: #fff; color: #002A3F; border-radius: 10px; padding: 35px 20px; text-align: left; max-width: 755px; flex-basis: 755px; position: relative; }
 
a.closeLightBox { position: absolute; z-index: 1; left: 0px; top: -34px; display: block; color: #fff; cursor: pointer; padding: 10px 0; font-size: 12px; opacity: 1; text-align: center; }
a.closeLightBox i:before { width: 25px; }
a.closeLightBox:hover { opacity: 0.8;  } 
.lightBoxContent a { text-decoration: underline; }

.lightBackground, .lightBlueBackground { background: var(--color-orange-10); padding: 20px; border-radius: 4px; margin: 20px 0; }
.lightBackground.border { border: 1px solid  var(--color-orange); }
.lightBlueBackground { background: var(--color-blue-10); }

.warningBoxWrapper { font-size: 14px; display: flex; gap: 20px; align-items: flex-start; }
.warningBoxWrapper .inconWraning { width: 20px; height: auto; }
.warningBoxWrapper .txt p { margin: 10px 0; }

/*
 *  ANIMATIONS
 */ 

.messageDefilantWrapper { position: relative; padding-top: 250px; overflow-x: hidden; }
.messageDefilant {  font-size: clamp(30px, 7vw, 80px); line-height: 1; max-width: 100%; padding: 25px 0; }
.messageDefilant > div { white-space: nowrap; width: auto; position: relative; display: flex; }
.messageDefilant > div p {  display: inline-block; white-space: nowrap; position: relative;  }
.messageDefilant > div img {  display: inline-block; min-height: clamp(80px, 20vw, 1000px); width: auto;  max-width: none; margin-left: 7vw; position: relative; }
.messageDefilant strong { color: var(--color-orange); }

.stampWrapper { --rotation: 0deg; max-width: 170px; }
.messageDefilantWrapper .stampWrapper { position: absolute; right: calc(50% - 85px); top: 0px; z-index: 0; }
img.stamp { display: block; transform: rotate(var(--rotation)); }



.fadeInFromBottom { opacity: 0;  transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fadeInFromBottom.inView { opacity: 1; transform: translateY(0); }

.fadeInFromLeft {opacity: 0;  transform: translateX(-200px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fadeInFromLeft.inView { opacity: 1; transform: translateX(0); }