/* =Responsive Structure / mobile first
----------------------------------------------- */



@media (min-width: 500px) { /* 500 pixels et plus */
    .sejoursGrid { grid-template-columns: 1fr 1fr; }
    .rowFiltersFields { grid-template-columns: 1fr 1fr; }
    .card { height: 100%; }
    .productsSection .card > a { height: 100%; }
}

@media (min-width: 760px) { /* 760 pixels et plus */

    h1 { font-size: 43px; }
    h2 { font-size: 48px; }

    .homeHeroSection .sectionContentWrapper { min-height: calc(100vh - 190px); }
    .navBar .navBarContent { display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .navBar .topLogoWrapper {display: block; }
    
    .navBar .topCenterLogoWrapper { text-align: center; }
    .navBar .topCenterLogoWrapper a { transform: scale(1.3); }
    .heroSection h1 { padding: 35px 70px; }
    
    .dropdown-menu { left: auto; right: 0; }
    
    .pageHeader { padding-bottom: 26px; }
    .pageHeader.destinationHeader h1 { font-size: 4vw; }
    .menuWrapper { padding: 30px 0; }
    .menuWrapper > ul { display: flex; max-width: 900px; margin: 0 auto; }
    .menuWrapper > ul > li { flex-basis: 25%; }
    .menuWrapper > ul > li:not(:first-child) { margin-left: 30px; }
    .menuWrapper li { border: 0; }
    .menuWrapper li ul a { font-size: 16px; }
    .menuWrapper li ul a:hover {  border-color: var(--color-blue); color: #002A3F; }
    .menuWrapper li label { border-radius: 10px; color: #002A3F; margin-bottom: 10px; }
    
    .share { top: 50%; left: 100%; width: auto; padding: 0; margin-top: -18px; }
    .shareBtn span { display: none; }
    .shareBtn:after { margin: 0; border-radius: 0 5px 5px 0; top: 0; width: 36px; height: 36px; }
    
    .swiperHeroProduct img { height: 600px; }
    .sejourHeroSection { min-height: 600px; }
    .sejourHeroSection .sectionContentWrapper { min-height: 600px; }
    
    .lightBoxContent { padding: 40px; }
    
    details > summary { font-size: 32px; padding-right: 90px; }
    details > summary:after { width: 30px; height: 30px; right: 25px; }
    
    .sejourHebergement .detailsContentWrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
    
    .sejoursGrid {grid-template-columns: 1fr 1fr 1fr; }
    
    .destinationsGrid { grid-template-columns: 1fr 1fr 1fr; }
    
    /*** filtres ***/
    
    .filtersWidget ul li { padding: 7px 0; font-size: 14px; }
    .filtersWidget label:before { top: -2px; }
    .filtersWidget label:after { top: 2px; }
    
    .listSearchHeader { display: flex; align-items: center; }
    .listSearchHeader .submitWrapper { margin-left: 15px; padding: 0; }
    .filtersTopFieldsWrapper {  }
    .filtersTopFieldsWrapper ul { display: flex; }
    
    #moreFiltersArea { display: none; }
    
    .mobileOnlyText { display: none; }
    
    .filterMoisDepart, .filterNombreNuites { float: none; width: 100%; margin-right: 0;}
    
    .affichetteTopRow { flex-direction: row; align-items: stretch; }
    .affichetteTopRow > div { width: 50%; }
    .affichetteHeader { display: flex; align-items: center; }
    .affichetteHeaderInfos{}
    
    .affichetteMidRow { flex-direction: row; }
    .affichetteMidRowLeft { width: 50%; }
    .affichetteMidRowRight { width: 50%; flex-direction: row; align-items: center; align-self: center; }
    .affichetteMidRowRight > div { width: 50%; }
    .affichetteMidRow .stampWrapper { display: flex; justify-content: center; align-items: center; }
    
    .affichetteBottomRow  { flex-direction: row; align-items: center;  }
    .affichetteBottomRow > div {  width: 50%; }
    .affichetteBottomRight { padding: 0 var(--side-margin); }
    
    .affichetteOptionsLinks li a span { display: inline-block; }
    
    .smallCaps { font-size: 16px; }
    .heroSection .sectionContent h1, .heroSection .sectionContent * + h1 { padding: 18px 30px; }
    h1 .yellowStars { font-size: 1rem;}
    
    
}

@media (min-width: 992px) { /* 992 pixels et plus */
    .navBar .logoHeaderLink { padding: 20px; }
    .navBar .logoHeaderLink img { height: 20px; }
    body #menu-toggle { top: 9px; right: 15px; }
    .menuTop { display: block; padding-right: 75px; text-align: right; }
    body.sejour .productsSection { padding-bottom: 150px; }
    .heroNavTop { top: 70px; }
    .swiper-buttons-wrapper { gap: 25px; }
    .heroSection:not(.homeHeroSection):after { content: ''; }
    .heroSection > .sectionContentWrapper { padding: 65px 0; }
    
    .logoFooter img { height: 90px; margin: 0 auto 50px; }
    .rowFiltersFields { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .rowFiltersFields + .rowFiltersFields { margin-top: 20px; }
    .footerMainLine { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; text-align: left; }
    .footerMainLineCenter { text-align: center; }
    .footerMainLineCenter .socialNetworkLinks { justify-content: center; margin: 0; }
    .phoneWrapper { margin: 0; }
    .footerMainLineRight { text-align: right; }
    
    .titreFiletWrapper h2 strong:before { right: calc(100% + 55px); }
    .titreFiletWrapper h2 strong:after { left: calc(100% + 55px); }
    
    .sectionProductContentWrapper .sectionContent { display: flex; flex-direction: row-reverse; gap: 50px; }
    .sectionProductContentWrapper .sectionContent .txt { width: 75%; }
    .sectionProductContentWrapper .sectionContent .sejourPriceColumn { width: 25%; display: block; }
    .sejourPriceWrapper { position: sticky; top: 50px;  }
    .sejourPriceWrapper .btnWrapper { text-align: center; }
    .sejourPriceWrapper .btnWrapper .btn { display: block; }
    .sejourPriceWrapper .shareWrapper ul { justify-content: center; }
    
    .sejourPriceWrapper .stampWrapper { display: flex; }
    
    .lightBoxContent.bigLightbox { max-width: var(--content-max-width); flex-basis: 80%; }
    
    .affichetteMidRow { padding-top: 30px; padding-bottom: 10px; }
    .affichette .agenceWrapper { flex-direction: row; justify-content: space-between; }
    .affichette .agenceWrapper > label { text-align: left; max-width: 120px; }
    .affichette .agenceWrapper .agenceBlock { width: calc(100% - 135px); }
    
    .lightBoxWrapper .affichetteOptions, .affichetteOptionsLinks { gap: 30px; }
    .swiper-button-next, .swiper-button-prev { display: flex; }
    
    .messageDefilantWrapper {  padding-top: 150px; }
    .messageDefilantWrapper .stampWrapper { right: 20%; }
    
}

@media (min-width: 1100px) { /* 1100 pixels et plus */
    
   
    .sejoursGrid {grid-template-columns: 1fr 1fr 1fr 1fr; }
    .footer { padding: 50px 0; }
    
    
    .productsSwiper  .swiper-button-prev, .swiperContentProduct .swiper-button-prev { left: -64px;  }
    .productsSwiper  .swiper-button-next, .swiperContentProduct .swiper-button-next { right: -64px;  }
    
    
    
}

@media (min-width: 1300px) { /* 1300 pixels et plus */
    .sectionProductContentWrapper .sectionContent .txt { padding-right: 50px; }
    .affichetteHeader, .affichetteMidRowRight, .affichetteBottomRight {  padding-left: 100px; }
}