:root{
    --vh-static: 1svh;
    --height-viewport-static: calc(var(--vh-static) * 100);

    --border: 2px;
    --radius: 35px;
    --font-size: 36px; 

    --border-sticker: 8px;
    --drop-shadow: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));

    --ratio: 1;

    --principalFont: DINA-CHAUMONT-TEXT-BOLD;
    --principalFont111: ANTIQUE-OLIVE; 
    --secondaryFont: HOST-REGULAR;
    --secondaryFontBold: HOST-BOLD; 

    --font-size-header-promo: calc(var(--font-size)/2.2);
    --font-size-header-menu: calc(var(--font-size)/2);

    --scroll-snap-type: y proximity;

    --height-landing-section: 90%;
    --width-landing-section: 95%;
    --radius-landing-section: 0 0 var(--radius) var(--radius);

    --display-landing-main-txt: auto;
    --display-chevron: none;

    --height-header-promo: 20px;
    --gap-top-header-menu: 10px;
    --height-header-menu: 60px;
    --height-header-main-logo-usds: calc(var(--height-header-menu)/2);
    --flex-direction-header-menu: row;
    --gap-menu: 40px;
    --justify-content-menu: flex-end;

    --flex-direction-container-mini-menu: row;
    --height-mini-menu: calc(var(--vh-static) * 50);
    --align-items-mini-menu: end;
    --scroll-snap-align-mini-menu: center;
    --margin-top-mini-menu: 0;
    --padding-bottom-mini-menu: 0;
    --dislay-mini-menu: flex;

    --height-gap: calc(var(--vh-static) * 8);

    --width-slide-card: 40vw;
    --width-slide-card-avis: 29vw;
    --width-card: 95%;
    --height-card: 95%;
    --height-card-txt-title-logo: 150px;
    --padding-card-txt-title: 40px 40px 0 40px;
    --padding-card-txt-txt: 0% 12% 0% 12%;
    --padding-card-button-section: 5% 12% 5% 12%;

    --width-wrapper-faq: 60%;
    --padding-question-faq: 20px;
    --padding-answer-faq: 0 20px 20px 20px;

    --direction-flex-card: row;
    --display-card: flex;

    --bottom-buy-button: 85%;

    --top-landing-main-logo: 0;
    --top-landing-main-txt: 180px;

    --grid-template-rows-card-txt: 85% 15%;
    --grid-template-columns-card-txt: 100%;
    --grid-template-areas-card-txt: 
        "card-txt-title" 
        "card-txt-button-section";
    
    --flex-card-img: 0.7;
    --flex-card-txt: 0.3;

    --flex-slide-card-img: 0.4;
    --flex-slide-card-txt: 0.6;

    --display-footer: flex;
    --footer-flex-direction: row;
    --width-newsletter-placeholder: 80%;
    --margin-footer: 50px;

    --width-popup-NL: 40vw; 

    --height-plage: 90%;
    --width-logo-plage: 40%;

    --height-section-filtre: 80px;
    --height-section-retour: 80px;
    --gap-filtre: 30px;
    --padding-left-filtre: 2.5vw;

    --grid-template-columns-fitre-et-GD: 90% 10%;

    --min-height-textarea-form-contact: 120px;
    --ratio-gros-corps-txt: 1;
    --width-plage-apropros: 1000px;
    --padding-left-plage-apropos: 2.5vw;
    --text-align-plage-apropos: left;
    --grid-template-columns-plage-equipe: auto auto;
    --grid-template-rows-plage-equipe: auto auto;
    --flex-direction-plage-map: row;

    --display-props-ordi: auto;
    --display-props-tel: none;

    --scale-plage-props: 2;
    --margin-left-props: 45%;

    --padding-top-slider-actu-accueil: calc(var(--height-section-filtre) - 10px);

    --padding-top-1st-card: calc(var(--vh-static) * 80);
    --display-pastille-GD: inline-flex;

    --font-size-regles-title: var(--font-size);
    --justify-content-sommaire-regles: flex-start;
    --padding-left-sommaire-regles: 2.5vw;

    --width-sigles-main-page-111: 100px;

    --margin-inline: 8%;
    --margin-block-bleu: -80px;
    --margin-block-logo: -20%;
    --margin-block-orange-cta: -30px;
    --decal-manuel: 0%;

    --width-sticker-regles-container: 80%;

    --max-width-sticker-bleu-regles-img: 35%;
    --width-sticker-orange-cta-gros-img: 30vw;
    --width-sticker-fullimg-app: 25%;

    --flex-direction-sticker-flex: row;

    --margin-sticker-plus-egal: 50px -30px 0 -30px;
    --align-items-sticker-flex: start;

    --padding-sticker-flex-app-button: calc(var(--vh-static) * 30) 0 calc(var(--vh-static) * 10) 0;
    

    --flex-direction-section-container-sommaire-regles: row;
    --grid-template-columns-regles-face-to-face: 50% 50%;
    --grid-template-row-regles-face-to-face: 100%;
    --top-1er-sticker-regles: 100px;
    --justify-content-section-language-toggle: end;

    --height-sticker-fullimg: calc(var(--vh-static) * 80);
    --height-sticker-fullimg-shop: calc(var(--vh-static) * 70);
    --padding-block-sticker-container: 3%;
    --padding-block-sticker-container-minus: 3% 0 0 0;

    
            --paper-width: min(96vw, 1111px);
            --paper-height: 320px;
            --paper-top: calc(var(--vh-static) * 40);
            --paper-left: 50%;
            --paper-translate-x: -50%;
            --roll-size: 70px;
            --roll-scroll-min-height: calc(var(--vh-static) * 300);
            --roll-scale: 1;
            --roll-opacity: 1;
            --roll-highlight-alpha: 0.95;
            --roll-shadow-alpha: 0.2;
            --roll-top-color: #bfc6cf;
            --roll-mid-color: #f5f7fa;
            --roll-low-color: #dde3ea;
            --roll-bottom-color: #adb5c0;
            --roll-shadow: rgba(18, 24, 38, 0.18);
            --paper-shadow: rgba(17, 24, 39, 0.16);
            --panel-width: 52vw;
            --right-info-panel: 10vw;
    
}

.label-mobile {
  display: none;
}



@media (max-width: 710px) {

:root{
    --border: 2px;
    --radius: 30px;
    --font-size: 30px;
    --font-size-header-promo: calc(var(--font-size)/3.5);
    --font-size-header-menu: calc(var(--font-size)/2.5);

    --ratio: 0.5;

    --height-header-menu: 75px;
    --height-header-main-logo-usds: 30px;
    --gap-top-header-menu: 10px;
    --flex-direction-header-menu: column;
    --gap-menu: 10px;
    --justify-content-menu: center;

    --flex-direction-container-mini-menu: column;
    --height-mini-menu: calc(var(--vh-static) * 35);
    --align-items-mini-menu: center; 
    --scroll-snap-align-mini-menu: end;
    --margin-top-mini-menu: 60%;
    --padding-bottom-mini-menu: 20%;
    --dislay-mini-menu: none;

    --height-landing-section: 90%;
    --width-landing-section: 95%;
    --radius-landing-section: 0 0 var(--radius) var(--radius);

    --display-landing-main-txt: none;
    --display-chevron: auto;

    --height-gap: 50px;

    --width-card: 85%;
    --height-card: 95%;
    --height-card-txt-title-logo: 150px;
    --padding-card-txt-title: 20px 20px 0 20px;
    --padding-card-txt-txt: 0% 6% 0% 6%;
    --padding-card-button-section: 5% 6% 5% 6%;

    --width-slide-card: 85vw; 
    --width-slide-card-avis: 65vw;

    --height-container: calc(var(--vh-static) * 80);
    --height-container-filter: calc(var(--height-viewport-static) - var(--height-header-menu) - var(--height-header-promo) - var(--height-section-filtre));

    --width-wrapper-faq: 90%;
    --padding-question-faq: 15px 50px 15px 15px;
    --padding-answer-faq: 0 15px 15px 15px;

    --direction-flex-card: none;
    --display-card: grid;

    --bottom-buy-button: 90%;

    --top-landing-main-logo: 10%;
    --top-landing-main-txt: 50%;

    --grid-template-rows-card-txt: 70% 30%;
    --grid-template-columns-card-txt: 100%;
    --grid-template-areas-card-txt: 
        "card-txt-title" 
        "card-txt-button-section";

    --display-footer: flex;
    --footer-flex-direction: column;
    --width-newsletter-placeholder: 100%;
    --margin-footer: 6%;

    --height-plage: 90%;
    --width-logo-plage: 80%;

    --width-popup-NL: 80vw; 

    --height-section-filtre: 60px;
    --height-section-retour: 0px;
    --gap-filtre: 15px;
    --padding-left-filtre: 15px;

    --grid-template-columns-fitre-et-GD: 100% 0%;

    --min-height-textarea-form-contact: 200px;

    --ratio-gros-corps-txt: 2;
    --width-plage-apropros: 90%;
    --padding-left-plage-apropos: 5%;
    --text-align-plage-apropos: left;
    --grid-template-columns-plage-equipe: auto;
    --grid-template-rows-plage-equipe: auto auto auto auto;
    --flex-direction-plage-map: column;

    --display-props-ordi: none;
    --display-props-tel: auto;

    --scale-plage-props: 0.6;
    --margin-left-props: 0;

    --padding-top-slider-actu-accueil: calc(var(--height-header-menu) + var(--height-header-promo) - 10px);

    --padding-top-1st-card-mobile: calc(var(--vh-static) * 65);
    --display-pastille-GD: none;

    --justify-content-sommaire-regles: center;
    --padding-left-sommaire-regles: 0;

    --font-size-regles-title: calc(var(--font-size)/1.5);
    --justify-content-sommaire-regles: center;
    --padding-left-sommaire-regles: 0;

    --width-sigles-main-page-111: 100px;

    --max-width-sticker-bleu-regles-img: 80%;
    --width-sticker-orange-cta-gros-img: 50vw;
    --width-sticker-fullimg-app: 80%;
    --margin-block-logo: -40%;
    --margin-block-bleu: -40px;
    --margin-block-orange-cta: -15px;

    --width-sticker-regles-container: 95%;
    --grid-template-columns-regles-face-to-face: 100%;
    --grid-template-row-regles-face-to-face: 50% 50%;

    --flex-direction-sticker-flex: column;
    --align-items-sticker-flex: center;
    --margin-sticker-plus-egal: 0 0 -8% 0;

    --padding-sticker-flex-app-button: calc(var(--vh-static) * 20) 0 calc(var(--vh-static) * 5) 0;

    --flex-direction-section-container-sommaire-regles: column;
    --top-1er-sticker-regles: 150px;

    --justify-content-section-language-toggle: center;

    --height-sticker-fullimg: calc(var(--vh-static) * 65);
    --height-sticker-fullimg-shop: calc(var(--vh-static) * 40);
    --padding-block-sticker-container: 8%;
    --padding-block-sticker-container-minus: 5%;


            --roll-scroll-min-height: var(--height-viewport-static);
            --paper-top: calc(var(--vh-static) * 40);
            --paper-width: 50vw;
            --roll-size: 40px;

    
}

.card{-ms-grid-rows: 30% 70%; grid-template-rows: 30% 70%;}
.slide-card{width: var(--width-slide-card);scroll-snap-align: center;}
.card-container, .slider-container{scroll-snap-align: end;}
.plage-props{display: none;}
.label-desktop {display: none;}
.label-mobile {display: inline;}
.scroll-stage {display: block;}
#top-landing-main111{margin-top: calc(var(--vh-static) * 10);}

  *:hover {
    translate: none !important;
  }
}



@media (min-width: 711px) and (max-width: 1180px) {

:root{
    --border: 2px;
    --radius: 36px;
    --font-size: 30px;

    --scroll-snap-type: none;

    --height-landing-section: 80%;

    --display-landing-main-txt: auto;

    --height-gap: 80px;

    --width-slide-card: 50vw;

    --width-card: 95%;
    --height-card: 95%;
    --height-card-txt-title-logo: 150px;
    --padding-card-txt-title: 40px 40px 0 40px;
    --padding-card-txt-txt: 0% 12% 0% 12%;
    --padding-card-button-section: 5% 12% 5% 12%;
    --height-container: calc(var(--vh-static) * 90);

    --width-wrapper-faq: 65%;
    --padding-question-faq: 15px 50px 15px 15px;
    --padding-answer-faq: 0 15px 15px 15px;

    --direction-flex-card: row;

    --bottom-buy-button: 90%;

    --top-landing-main-logo: 0%;
    --top-landing-main-txt: 180px;

    --flex-card-img: 0.6;
    --flex-card-txt: 0.4;

    --display-footer: flex;
    --width-newsletter-placeholder: 90%;
    --margin-footer: 50px;

    --height-plage: 90%;
    --width-logo-plage: 60%;
    --width-plage-apropros: 700px;

    --width-popup-NL: 60vw; 

    --height-section-filtre: 60px;
    --height-section-retour: 0px;
    --grid-template-columns-fitre-et-GD: 100% 0%;
    --gap-filtre: 20px;

    --padding-top-slider-actu-accueil: calc(var(--height-header-menu) + var(--height-header-promo));
    --display-pastille-GD: none;

    --justify-content-sommaire-regles: center;
    --padding-left-sommaire-regles: 0;

    --flex-direction-section-container-sommaire-regles: column;
    --top-1er-sticker-regles: 150px;

    --right-info-panel: 3vw;

}

#top-landing-main111{margin-top: calc(var(--vh-static) * 5);}
}