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

@font-face {  font-family: "LVMH";  src: url("../fonts/LVMHAir-Regular.woff2") format("woff2"),    url("../fonts/LVMHAir-Regular.woff") format("woff");  font-weight: 300;  font-style: normal;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMHAir-Italic.woff2") format("woff2"),    url("../fonts/LVMHAir-Italic.woff") format("woff");  font-weight: 300;  font-style: italic;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMH-Regular.woff2") format("woff2"),    url("../fonts/LVMH-Regular.woff") format("woff");  font-weight: normal;  font-weight: 400;  font-style: normal;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMH-Italic.woff2") format("woff2"),    url("../fonts/LVMH-Italic.woff") format("woff");  font-weight: normal;  font-weight: 400;  font-style: italic;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMHAir-Bold.woff2") format("woff2"),    url("../fonts/LVMHAir-Bold.woff") format("woff");  font-weight: 600;  font-style: normal;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMHAir-BoldItalic.woff2") format("woff2"),    url("../fonts/LVMHAir-BoldItalic.woff") format("woff");  font-weight: 600;  font-style: italic;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMH-Bold.woff2") format("woff2"),    url("../fonts/LVMH-Bold.woff") format("woff");  font-style: normal;  font-weight: 700;    font-weight: bold;  font-display: swap;}@font-face {  font-family: "LVMH";  src: url("../fonts/LVMH-BoldItalic.woff2") format("woff2"),    url("../fonts/LVMH-BoldItalic.woff") format("woff");  font-weight: 700;    font-weight: bold;  font-style: italic;  font-display: swap;}

:root {
  --activites-vins: #56c882;
  --activites-mode: #e41d84;
  --activites-parfums: #a2792a;
  --activites-montres: #002fa4;
  --activites-distribution: #a7110a;
}

body, html {  font-size: 20px;background: #FFF;  -webkit-text-size-adjust: 100%;text-size-adjust: 100%; /* scroll-behavior: smooth; */ }
body { margin: 0; padding: 0; font-family: "LVMH", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: 400; color:#121426;  }




@media screen and (min-width: 2200px) {  body, html { font-size:26px; }}
@media screen and (min-width: 2000px) {  body, html { font-size:22px; }}
@media screen and (max-width: 1700px) {  body, html { font-size:18px; }   }
@media screen and (max-width: 1600px) {  body, html { font-size:16px; } }
@media screen and (max-width: 1450px) {  body, html { font-size:14px; }}
@media screen and (max-width: 1280px) {  body, html { font-size:14px; }  }


p , ul , ol  { font-variant-ligatures: no-common-ligatures;}

p.buttons , .texte p.buttons { margin: 1.1em 0;}
p.buttons a { position:relative; box-shadow: none;  margin: 0.35em 0; font-family: "futura-pt", Arial, Helvetica, sans-serif; box-sizing: border-box;  max-width: 100%; font-size: 90%; text-transform: uppercase; font-weight: 600; display: inline-block; line-height: 1em; padding: 0.4em 0.7em; background: #987e6e; color:#FFF; text-decoration: none;; }
p.buttons a span { position: relative; display: block;/*   white-space: nowrap;  */overflow: hidden;  text-overflow: ellipsis; box-sizing: border-box; line-height: 1em; padding: 0.3em 0; }
p.buttons a:before { content: ""; background: #121426; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 0; transition: opacity 0.3s, width 0.2s; /* mix-blend-mode:overlay; */ }
p.buttons a:hover:before { opacity: 1; width: 100%;}

p.buttons a.picto span { padding-left: 1.4em; background: no-repeat 0 0.4em; background-size: 0.8em;}
p.buttons a.picto span { background-image: url(../images/out.svg);}

p.buttons a.block { display: block; margin: 0.6rem 0;}

app { margin-left:-.12em;}

#content { }
section.first { padding:0; margin-bottom: 8rem; }
section { padding:1px 0;}
section.first + section { padding-top: 0;}

.colored { color:#987E6E;}

/* .center { margin:3rem auto; max-width: 1800px; position: relative;} */
.center { margin:3rem; max-width: 100%;  position: relative;  }

/* @media screen and (max-width: 1920px) {
    .center { margin-left:3rem; margin-right:3rem; max-width: 100%;  }
} */

* { outline: none; } 
a {  cursor: pointer; text-decoration: none; color:#121426; transition: box-shadow 0.2s; box-shadow: 0 0 0 0 #987e6e00 inset; }
p a:hover { box-shadow: 0 -3px 0 0 #987e6e inset;}

#menu-right { position: fixed; z-index: 100; height: 0; width: 100%; left: 0; top: 0; margin: 0; pointer-events: none; mix-blend-mode:exclusion; color:#BFC5EB; font-family: "futura-pt", Arial, Helvetica, sans-serif; }
#menu-right a { color:#BFC5EB; }

#mainMenu p { margin:0 0 0.6rem 0; line-height: 90%; font-size: 200%; font-weight: 300;}
#mainMenu p a {transition: none; position: relative; box-shadow: none;  position: relative; white-space: nowrap;  display: inline-block;}
#mainMenu p a:before { position: absolute; bottom:-2px; height: 2px; background: #121426; content: ""; width: 0; transition: width 0.25s; }
#mainMenu p a:hover:before , #mainMenu p a.actif:before  { width: 100%;}
#mainMenu #menu-links { position: relative; z-index: 3;}
#closer {position: absolute; right: 0; top: 0.5rem; width: 2em; height: 1.6em;  pointer-events: fill; z-index: 5;  }
#closer.fixed { margin: 3rem 3.5rem; position: fixed;  }
#closer span { height: 3px; background: #121426; position: absolute; width: 100%;  transform: rotate(-45deg); top: 50%;  margin:-1px 0;  }
#closer span + span { transform: rotate(45deg);}


#mainMenu .bottom { text-align: right; bottom: 0; right: 0; position: absolute; width: 100%; z-index: 2; background: #FFF;}
#mainMenu .bottom p { font-size: 175%;}
#mainMenu .bottom p a:before { left: auto; right: 0;}


#mainMenu .bottom p a { background: no-repeat right center url(../images/out-fill.svg); padding-right: 1.2em;}


.closing #closer  { display:none;}

#toggle-menu {position: absolute; right: 0; top: 0.5rem; width: 2em; height: 2em;  pointer-events: fill; }
#toggle-menu span { height: 3px; background: #BFC5EB; position: absolute; width: 100%; top: 0; left: 50%; margin:-1px -1em; transition: all 0.2s; }
#toggle-menu span + span { top: 50%;  transform-origin: center center;}
#toggle-menu span + span + span { bottom:0; top: auto;  }

#toggle-menu span:first-child { margin-top: 2px;}
#toggle-menu span:last-child { margin-bottom: 2px;}

.openMenu   #toggle-menu span { transform:rotate(-45deg); top: 50%; }
.openMenu   #toggle-menu span + span { transform:none; opacity: 0;}
.openMenu   #toggle-menu span + span + span { transform:rotate(45deg); opacity: 1; top: auto; bottom: 50%;  }


.openMenu #toggle-menu span:first-child { margin:-1px -1em;}
.openMenu #toggle-menu span:last-child {margin:-1px -1em;}



body.openMenu #bullet-menu , body.openMenu #select-language { opacity: 0; pointer-events: none; }

body.openMenu{overflow: hidden;}


#mainMenu { position: fixed;  transition: all 0.35s; transform: scale(0.97); top: 0; left: 0; width: 100%; overflow: auto; height: 100%; -webkit-overflow-scrolling: touch; background: #FFF; z-index: 100; opacity: 0; pointer-events: none;}
#mainMenu .center { min-height: 3rem;}

#mainMenu .picture { margin-left: 1.5rem; padding: 30% 0; background: #E2E4E6 no-repeat 90% 10% url(../images/menu.jpg); background-size: cover;}

.openMenu #mainMenu  { opacity: 1; transform: none;  pointer-events: fill; }

#bullet-menu { position: absolute; right: 0.6rem; top: 14rem; transition: opacity 0.3s;}


.intro { font-size: 110%;}
.intro p { font-weight: 600;}

.bullet-legend , .no-select , #menu-right {   -webkit-touch-callout: none;
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; }




#bullet-menu a { height: 0.9rem; width: 0.9rem; box-sizing: border-box; transition: background-color 0.2s; line-height: 0.8rem; margin: 0.9rem 0; border: 1px solid #BFC5EB; color:#BFC5EB; color:rgba(0,0,0,0); position: relative; display: block; border-radius: 100%; pointer-events: fill; box-shadow: none; }
#bullet-menu a span { white-space: nowrap; opacity: 0; transition: opacity 0.2s , padding 0.2s; position: absolute; right: 100%; text-transform: uppercase; font-weight: 700; pointer-events: none; padding-right: 0rem;  }
#bullet-menu a:hover span { opacity: 1; padding-right: 0.8rem;  pointer-events: fill; background: none;  }
#bullet-menu a:hover , #bullet-menu a.actif {background: #BFC5EB; }
 

.bullet-legend { position: fixed; pointer-events: none; font-size: 80%; top:1rem;line-height: 0.9rem; height: 0.9rem;  right: 3.2rem; z-index: 99; margin:-0.3rem 0; padding:0.3rem 1.6rem 0.3rem 0.5rem; background: #FFF; border-radius: 1rem; color:#121426; text-transform: uppercase; font-weight: 700; font-family: "futura-pt", Arial, Helvetica, sans-serif; }



#select-language , #select-language-menu { position: absolute; right: -0.1em; top:5.5rem; pointer-events: fill; cursor: pointer; transition: opacity 0.3s;  font-family: "futura-pt", Arial, Helvetica, sans-serif; }
#select-language span { background: no-repeat right center url(../images/arrow-drop.svg); background-size: 0.6em; }
#select-language span , #select-language a , #select-language-menu span , #select-language-menu a { display: block; line-height: 1.4em; width: 2em;}
#select-language a , #select-language-menu a { opacity:0; transition: opacity 0.2s, margin-top 0.2s; margin-top: -0.5rem; pointer-events: none; position: absolute; width: 100%;}
#select-language:hover a , #select-language-menu:hover a { opacity:1; margin-top: 0; pointer-events: fill;}

#select-language-menu { display: none; z-index: 100;}
#select-language-menu span , #select-language-menu a { width: 2.3em;}
#select-language-menu span { background: no-repeat right center url(../images/arrow-drop-fill.svg); background-size: 0.9em; }
#select-language-menu { top: auto; margin-top: 1.4rem; font-size: 180%; }


h1, h2, h3, h4, h5, h6 { font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 500;}


.futura { font-family: "futura-pt", Arial, Helvetica, sans-serif; font-weight: 500;}


#logo , #logo-menu { position: absolute; left: 0; cursor: default;}
#logo img , #logo-menu img { height: 3rem;}
#header { height: 3rem;}


#header h1 { margin:-0.3rem 0;  line-height: 1.8rem; text-align: right; font-size: 200%; text-transform: uppercase; white-space: nowrap; overflow: hidden; margin-left: 9rem;}
#header h1 strong  { font-weight: 500;}





.center .wrap { margin:0 5rem; }
.center .wrap.arround { margin-top:4rem; margin-bottom:4rem; }
.center .wrap.large { margin-top:7rem; margin-bottom:7rem; }

#video-home { position:relative; background: #EEDFD299 url(../images/posters/home.jpg) center center; background-size: cover; min-height: 640px;/*  max-height: 50vw; */  height: 80vh; height: calc(100vh - 8rem);}
#video-home video { object-fit: cover; position: absolute; width: 100%; height: 100%;}
#video-home .controller { object-fit: cover; position: absolute; width: 100%; height: 100%; padding: 0;}

#arrow-scroll { position: absolute; width: 2.6rem; height: 3rem; margin: 0 -1.3rem; left: 50%; bottom: 2.5rem; background:  url(../images/arrow-scroll.svg) no-repeat center center; background-size: contain; z-index: 5;  animation: 1.5s infinite move_arrow;}


h2 { font-weight: 300; font-size: 500%; line-height: 95%;}
h2 span { display: block;}

h3 { font-weight: 400; font-size: 290%; line-height: 100%;}
h3 span { display: block;}


h4 { font-weight: 600; font-size: 150%; line-height: 110%; margin: 0.5em 0;}

p + h4 { margin-top: 1.5em;}




.clear { clear:both; }

.col { box-sizing: border-box;}
.col-50 { width:50%;}

.col.left { float: left;}
.col.right { float: right;}

.col.p-left { padding-left:4rem;}
.col.p-right { padding-right:4rem;}

.col.p-left.large { padding-left:8rem;}
.col.p-right.large { padding-right:8rem;}
.texte p.block , p.block  { margin: 1.2em 0;}
img.block , p.block  img{ display: block; max-width: 100%; max-height: 800px; max-height: 22.5rem; }

p.block.no-limit img { width: 100%; max-height: none; }

p.contener { position: relative; padding: 23% 0;  overflow: hidden; margin: 1.5rem 0;  }
p.contener img { position: absolute; width: 100%; top: -25%; left: 0; opacity:1;}



.nowrap { white-space: nowrap;}

.texte p.legende { font-size:80%; margin: -0.4rem 0 1.5rem 0; line-height: 110%;}
.texte p.legende.small { max-width: 23rem;}
.texte p.legende.futura { font-weight: 400;}

.col span.legende { font-size:80%; margin: -0.4rem 0 1.5rem 0; line-height: 110%; font-family: "futura-pt", Arial, Helvetica, sans-serif; }

h4.title { font-size:100%;font-weight: 600; padding-right: 3em; position: relative; opacity: 0.5;  margin: 0.5rem 0;}
h4.title strong { font-weight: 500; position: absolute; right: 0; top: 0;}
h4.title em { display: block; font-size:75%; text-transform: none; font-weight: 400;}
.uc { text-transform: uppercase;}





.colored-grey { background-color: #E5E5E5; background: #12142611; padding: 1px 0; margin: -1px 0;}

.colored-dark { background-color: #121426; padding: 1px 0; margin: -1px 0; color:#FFF;}

.colored-light { background-color: #EEDFD2; padding: 1px 0; margin: -1px 0;}
.colored-light + .colored-light { background-color: #EEDFD2CC; }
.colored-light + .colored-light + .colored-light { background-color: #EEDFD299; }
.colored-light + .colored-light + .colored-light + .colored-light { background-color: #EEDFD266; }
.colored-light + .colored-light + .colored-light + .colored-light + .colored-light { background-color: #EEDFD233; }

.colored-light h4 { text-transform: uppercase; font-weight: 600; font-size: 1em; margin-bottom: 2.5em;}
.colored-grey-light h4 { text-transform: uppercase; font-weight: 600; font-size: 1em; margin-bottom: 2.5em;}


.box-margin {}

.box-margin .marger { margin: 2.5rem 0;}
.box-margin .sticky , .box-margin .textes { margin: -2.5rem 0;}
.sticky { position: sticky;  top: 0; margin-bottom: -2.5rem;}


.sticky .encart { padding: 1px; background: #F2F1ED; margin: 3rem 0;}

.sticky .encart.dark {  background: #EEDFD2; }

.encart hr { height: 0; border: none; background: #121426; margin:1.5rem 0; backface-visibility: hidden; transform: translate3d(0) translateZ(0); border-top: 1px solid #121426;}

p.bourse , .texte p.bourse { font-size: 200%; font-weight: 400; margin: 0.5rem 0; position: relative; line-height: 90%;}
p.bourse span.right { position: absolute; right: 0;}
p.bourse span.legende { display: block; font-size: 50%; font-weight: 600; line-height: 100%; margin-top: 0.5em;}

.sticky .encart + .encart { margin-top: -1.5rem;}
.sticky .encart .marger { margin :1.5rem;}




sup, sub { font-size: 55%; line-height: 0;}


.colored { color:#987E6E;}

.box-margin.left .sticky { float: left; }
.box-margin.right .sticky { float: right; }

.box-margin .sticky { width: 24%;  width:calc(28% - 3.5rem); }
.box-margin .textes { width: 72%;  width:calc(72% - 3.5rem); }

.box-margin.medium .sticky { width: 38%; width: calc(39% - 3.5rem);  }
.box-margin.medium .textes { width: 58%; width: calc(61% - 3.5rem);   }


.box-margin.large .sticky { width: 45%; width: calc(50% - 5rem);  }
.box-margin.large .textes { width: 50%; width: calc(50% - 2rem);  }


/* .box-margin.small .sticky { width: 20%;  width:calc(25% - 3.5rem); }
.box-margin.small .textes { width: 76%;  width:calc(75% - 3.5rem); } */


.box-margin.left .textes {float: right;  }
.box-margin.right .textes {float: left;  }

.texte p , .texte ul, .texte ol { font-size: 140%; line-height: 135%; margin: 0.75rem 0;}
.texte ul { list-style: none; padding-left: 0; }
.texte ul li { padding-left: 1em; }
.texte ul li:before { content: "–"; color:#987E6E; font-weight: 700; position: absolute; margin-left:-1em;}


.to-fade-in { z-index: -1 !important; transition: none;  opacity: 0;}
.fade-in { opacity: 0; transform: translateY(4rem);}
.fade-in-animate { transition: opacity 0.6s, transform 0.8s;  } 
.fade-in-animate.delay {   transition-delay: 0.3s;} 

.fade-in-animate.delay-1 { transition-delay: 0.1s;} 
.fade-in-animate.delay-2 { transition-delay: 0.15s;} 
.fade-in-animate.delay-3 { transition-delay: 0.2s;} 
.fade-in-animate.delay-4 { transition-delay: 0.25s;} 
.fade-in-animate.delay-5 { transition-delay: 0.3s;} 

#popup_content p.cc { margin-right: -1rem;}
ul.cc { margin:-1.5rem -0.5rem; text-align: center; list-style: none; padding: 0;  font-family: "futura-pt", Arial, Helvetica, sans-serif; clear: both; display: flex; flex-wrap: wrap; align-items:flex-start; justify-items: center; justify-content: center;}
ul.cc + ul.cc { margin-top: 0;}


.titre-cc-intercal { text-align: center;  color:#987E6E; font-weight: 500; font-size: 130%; line-height: 1.1em; margin-top: 2rem;}


ul.cc.small-width { max-width: 40rem; margin-left: auto; margin-right: auto; margin-top: -2.5rem;}

ul.cc li {  width: 25%; box-sizing: border-box; padding: 1.5rem 0.5rem;  color:#987E6E; font-weight: 500; font-size: 130%; line-height: 1.1em; margin:0; position: relative; }

ul.cc li .tetiere { position: absolute; right: 0; width: 100%; margin-right: -50%;}


ul.cc li .adjust { display: block;}
ul.cc li.block { clear: left; }
ul.cc li.block.large { text-align: left; width:100%;}
p.cc {  font-family: "futura-pt", Arial, Helvetica, sans-serif; clear: left; margin: 2.5rem 0;  }

p.cc + p.cc { margin-top: 5rem;}

.cc li strong {  color:#121426; font-size: 200%; }

.cc.big strong.uc.small { line-height:1.4em; }
.cc.big strong.uc.small + strong {margin-top:0.2em}

p.small-width { max-width: 16em;}
p.grow {font-size: 120%;}

.cc strong { display: block; line-height: 1.3em; font-weight: 400;  font-size: 230%;}
p.cc strong { line-height: 1.1em; }
.cc strong.pad { padding-top: 0.3em;}
.cc strong em { font-size: 50%; font-style: normal;}
.cc strong span { font-size: 50%; font-weight: 400; display: block; line-height: 1.3em; min-height: 1.3em;}
.cc strong.small { font-size: 100%; font-weight: 500; display: block; line-height: 1em; min-height: 1em; }
.cc strong.small.small { font-size: 66%;  }

.cc span.legende {  font-size: 66%;  font-weight: 400; margin-top: 1.5em; display: block; color: #121426; line-height: 140%;;  }
.cc span.legende + span.legende { margin-top:.2em;}

.cc .details span { float: left; box-sizing: border-box; width: auto; line-height: 100%; text-align: center;}

/* on fer gauche dans les popups */
.sticky .cc .details span {  text-align: left; }


.cc li .details sup { position: absolute; margin-top: 0.5em; margin-left: 0.3em;}
.cc .details sup { margin-left: 0.3em;}

.cc li .details { margin: 0 auto; max-width: 4.5em; text-align: center;  }


.cc .details span + span { border-left: 1px solid #333; border-color: #12142644; padding-left: 0.5em; margin-left: 0.5em;}
.cc li .details span { width: 50%; }
.cc li .details span + span { padding: 0; margin:0;}

.cc li .details.solo span { width: 100%; }



.cc .details span span { float: none; display: block; width: auto; font-size: 60%; line-height: 110%;}

.cc li .details { font-size: 120%; font-weight: 400; width: 100%; max-width: 10em;}

/* body { scroll-snap-type: y mandatory; }
section {  scroll-snap-align: start;} */


.cc li .details.thin span { font-size: 66%; line-height: 120%; font-weight: 400;}

ul.cc.max-3 li:nth-child(4){ clear: left;}




.card { padding: 1px; background: #FFF; margin: 2.5rem 0;}
.card .wrap { margin:2.5rem;}
.card .banner { padding: 18% 0;  background: #7a6450 no-repeat center center; background-size: cover;}
.card .wrap.add-pastille { position: relative; padding-left: 9.5rem;}
.card .wrap.add-pastille .pastille { position: absolute; left: 0; top: 0; margin: -0.25rem -0.15rem; width: 7.5rem; height: auto;}
.encart-video { background: #FFF; margin: 5rem 0; position: relative;}
.encart-video h3 { font-size: 200%;}





.encart-video.right .img-cover {  margin: 0 0 0 auto; }


.encart-video .video-player , .encart-video .img-cover { width: 65%; margin: 0; }
.encart-video.right .video-player {  margin: 0 0 0 auto; }


.encart-video .pave-texte { position: absolute; width: 35%; height: 100%;  font-size:80%; right: 0; top: 0; overflow: auto; -webkit-overflow-scrolling: touch;}
.encart-video.right .pave-texte { right: auto; left: 0;}
.encart-video .pave-texte .wrap { margin:2.5rem;}

.video-player ,  .img-cover  { max-width: calc(100vh * 1.8);}
.video-player .controller ,  .img-cover  .controller { padding: 28.16% 0; background: #000 no-repeat center center; background-size: cover; position: relative; display: block;  }
.video-player video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}





.video-player .controller ,  .img-cover  .controller { cursor: pointer; overflow: hidden;}
.video-player .controller span { position: absolute; transition: opacity 0.3s; width: 5em; height: 5em; background: url(../images/play.svg) no-repeat center center ; background-size: cover; margin: -2.5em;  top: 50%; left: 50%; z-index: 2; opacity: 0.55; /* mix-blend-mode:overlay; */}

.video-player .controller.reset span { background-image: url(../images/reset.svg); }

.video-player .controller.playing  { pointer-events: none;}
.video-player .controller.playing span { opacity: 0;}
.video-player .controller.playing video { pointer-events: fill;}


.columns-videos { margin: -0.5rem;}
.columns-videos .col { padding:0.5rem; box-sizing: border-box; width: 25%; float: left;}
.columns-videos .col h4 { font-weight: 400; max-width: 19rem; margin-top: 1.5rem; }
.columns-videos .col h4 strong { font-weight: 600; display: block; }


.columns-videos .video-player .controller , .columns-videos  .img-cover  .controller { font-size: 80%;}


.columns-videos .video-player  .controller  { transition: all 0.2s;}
.columns-videos .video-player:before { position: fixed; top: 0; left: 0; width:0; height: 0; background: rgba(0,0,0,0.7); content: "";  z-index:500; opacity: 0; transition: opacity 0.25s; }
.columns-videos .video-player.playing:before {  width: 100%; height: 100%; opacity:1;}

.columns-videos .video-player.playing  .controller { transform:scale(2); margin-right: -0.5rem;   margin-left: 0; z-index:500; position: relative; transform-origin: 0 center; }

.columns-videos .col:nth-child(3) .video-player.playing  .controller , .columns-videos .col:nth-child(4) .video-player.playing  .controller { margin-left: -0.5rem; margin-right: 0;  transform-origin: right center; }

.columns-videos .video-player.playing video { transform: scale(0.5); width: 200%; height: 200%; left: -50%; top: -50%; box-shadow:0 0 2rem 1px rgba(0,0,0,0.8);}



#zoom {  background:#121426; color:#FFF; padding: 1px 0; }


#zoom h2 { font-weight: 600; font-size: 140%; margin-top: -1rem;}
#zoom ul { list-style: none; font-size: 340%; font-weight: 300; padding: 0; margin: 1.5rem 0; padding-right: 42%; line-height: 85%;}
#zoom ul li { margin: 0.3em 0;}
#zoom .wrap { position: relative;}

#zoom li a { transition: color 0.2s; color:#FFF; box-shadow: none;}
#zoom li a.other { color:#FFF5;}


#zoom .preview { position: absolute; height: 100%; padding: 0.5rem 0; margin: 0 0; width: 40%; max-height: 22rem; width: calc(42% - 4rem); top: 0; right: 0; max-width: 32rem; opacity: 0; transition: 0.2s;}
#zoom .preview img { position: absolute; width: 10%; max-width:2.5rem; height: auto; top: 1em; right: 1em; z-index: 2;}
#zoom .preview div { position: absolute; width: 90%; height: 90%;  width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); background:#0005 no-repeat center center; background-size: cover; top: 0; right: 0; transition: width 0.2s, height 0.2s;}
#zoom .preview.open div { width: 100%; height: 100%;}
#zoom .preview.open { opacity: 1;}


table.chiffres { margin: 3em 0; font-size: 100%; width: 100%;  border-top: 2px solid #121426; }
table.chiffres p { margin:0; line-height: 120%; }
.texte table.chiffres p { font-size: 110%; min-width: 2em; }
.texte table.chiffres td { vertical-align: bottom; border-bottom: 1px solid #12142666;}
.texte table.chiffres th { vertical-align: top;}
.texte table.chiffres th , .texte table.chiffres td { text-align: left; padding:0.5em 0 0.3em 0; }
.texte table.chiffres th.al-r , .texte table.chiffres td.al-r { text-align: right; }

.texte table.chiffres .small { width: 12%;  padding-right: 0.4em; padding-left: 0.4em; white-space: nowrap;}

table.chiffres p.unite , table.chiffres .unite { font-size:66%; font-weight: 400; white-space: nowrap; }

.texte table.chiffres .trame { background:#F2F1ED; }







table.agenda { margin: 3em 0; font-size: 110%; width: 100%;  border-top: 1px solid #121426; }
table.agenda p { margin:0; line-height: 120%; }
table.agenda p { }
table.agenda td , table.agenda th { vertical-align: top; border-bottom: 1px solid #121426; text-align: left; padding: 0.5em 0;}
table.agenda td { width: 78%; padding-left: 0.5em;}
table.agenda th { width: 22%; padding-right: 0.5em;}
table.agenda th p { min-width: 9em;  font-weight: 600;}


h2 .legende , h3 .legende  , h4 .legende  { display: block; font-size: 30%; line-height: 110%; font-weight: 500; padding-bottom: 2px; text-indent: 0.1rem;}
h2 span.nowrap , h3 span.nowrap { display: inline;}
h3 .legende  { font-size: 60%; }


h2.light , h3.light , h4.light { font-weight: 300;}

.double-col { margin: -0.5rem;}
.double-col .col { box-sizing: border-box; padding: 0.5rem; float: left; width: 50%;} 
.double-col .col.right { float: right;}
.double-col .col .wrap { margin: 1.5rem;}

.colored-dark a {  color:#FFF;}
#footer a { box-shadow: none;}
#footer a:hover { box-shadow: 0 -2px 0 0 #FFF inset;}
#footer svg path { fill:#FFF;}
#footer svg { height:1.5em; }
#footer p.socials { margin:0 -0.4em 1.2rem  -0.4em;}
#footer p.socials a , #footer p.socials a:hover { margin: 0.15em;  display: inline-block; box-shadow: none;}

#footer .sticky { font-size: 130%;}


#footer p.small { font-size: 70%; margin: 2.5rem 0 0.4rem 0; font-weight: 300;}

body.popuped {  overflow: hidden;  }


#popupcover { position: fixed; width:100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 995; opacity: 0;}
#popup { position: fixed;  width: 50px; height: 50px; overflow: hidden; z-index: 999; opacity: 0; transition: opacity 0.3s, scale 0.3s;  background:#FFF no-repeat center center; background-size: cover; }
#popup.loaded { opacity: 1; }


#popup #popup_content { opacity: 0; overflow: auto; width: 100vw; height: 100vh; position: absolute;  }


#popup.closing { opacity: 0; transform: scale(0.94); transition: all 0.6s; overflow: hidden; }
#popup.closing  #popup_content { overflow: hidden;}
/* #popup.loaded { opacity: 1; width: 100vw !important; height: 100vh !important; top:0 !important; left: 0 !important; transition: all 0.6s 0.1s , opacity 0.6s; }

#popup.loaded.finish { transition: none !important;}
 */
#popup_content { background: #FFF; /* left: -80%; top: -20%; transition: left 1.8s 1.8s, top 1.8s 1.8s;  */ }
#popup.loaded #popup_content { top: 0; left: 0;}
#popup .header { position: relative; margin-bottom: -0.5em;}
#popup_content .header img { height: 3rem;}

#popup_content .bande { padding: 32.14% 0;   background: no-repeat 60% 65%; background-size: cover;}


p.cta { text-transform: uppercase; font-size: 200%; font-family: "futura-pt", Arial, Helvetica, sans-serif; margin:5rem 0 3rem 0; font-weight: 300; line-height: 1.2em;}
p.cta a { color: #A99893; box-shadow: none; display: inline-block; position: relative; padding-right: 1.2em; transition: color 0.2s;}
p.cta a svg { position: absolute; right:0; top: 0.25em; height: 0.8em;}
p.cta a svg polygon { fill: #A99893; transition: fill 0.2s; }


p.cta a:hover svg polygon , p.cta a:hover { fill: #121426; color: #121426;  }

.colored-vins , #zoom li a.colored-vins:hover , #zoom li a.colored-vins.actif { color:var(--activites-vins);}
.colored-mode , #zoom li a.colored-mode:hover , #zoom li a.colored-mode.actif { color:var(--activites-mode);}
.colored-parfums , #zoom li a.colored-parfums:hover , #zoom li a.colored-parfums.actif { color:var(--activites-parfums);}
.colored-montres , #zoom li a.colored-montres:hover , #zoom li a.colored-montres.actif { color:var(--activites-montres);}
.colored-distribution , #zoom li a.colored-distribution:hover , #zoom li a.colored-distribution.actif { color:var(--activites-distribution);}



.cc strong.colored-vins  span { border-color:var(--activites-vins) !important;}
.cc strong.colored-mode span { border-color:var(--activites-mode) !important;}
.cc strong.colored-parfums  span { border-color:var(--activites-parfums) !important;}
.cc strong.colored-montres  span { border-color:var(--activites-montres) !important;}
.cc strong.colored-distribution  span { border-color:var(--activites-distribution) !important;}


.popup-load #zoom .preview img { animation:  blink alternate infinite 0.15s;}


.selector { position: absolute; border:2px solid #121426; padding-right: 1.2em; max-width: 15em; z-index: 10; color:#121426; right: 5rem; cursor: pointer; margin-top: 0; background: #FFF no-repeat right center url(../images/arrow-drop-fill.svg); 
  background-size: 1.5em; white-space: nowrap;}
.selector strong { overflow: hidden; display: block; text-overflow: ellipsis; font-weight: 500; padding: 0 0.6em;  line-height: 2.4em; }
.selector .list { position: absolute; background: #FFF; top: 100%; min-width: 14.2em; width: 100%;   border: 2px solid #121426; /* border-top-color: #12142666;  */ border-top-width: 1px ; margin: 0 -2px; opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.selector .list a { overflow: hidden;  overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; display: block; color:#121426; padding: 0 0.6em;  line-height: 2.4em; transition: background-color 0.2s;}
.selector .list a:hover { background-color: #1214260D;}


.selector.open .list { opacity: 1; pointer-events: fill;}

#popup_content .sticky .bande { display: none;}
#popup_content .sticky .bande + .legende { display: none;}


p.legende.source { margin: -2rem 0 3rem 0;}


.center .wrap.arround, .center.retract { margin-bottom:2.5rem; margin-top:2.5rem; }



@keyframes blink { 


  0%{
      
      opacity: 0;
    }
    100% {
      opacity: 0.8;
    }
  
  }



@keyframes move_arrow { 


    0%{
        transform: translate(0, 0);
        opacity: 0;
      }
      60% {
        opacity: 1;
      }
      100% {
        transform: translate(0, 1.4rem);
        opacity: 0;
      }
    }



    @media screen and (max-width: 1600px) {

      .card .wrap.add-pastille { position: relative; padding-left: 9rem;}
      .card .wrap.add-pastille .pastille { position: absolute; left: 0; top: 0; width: 6.5rem; height: auto;}
    }



    @media screen and (max-width: 1400px) {
      .col.p-left { padding-left:2.5rem;}
      .col.p-right { padding-right:2.5rem;}
      
      .col.p-left.large { padding-left:5rem;}
      .col.p-right.large { padding-right:5rem;}


      
      .card .wrap.add-pastille { position: relative; padding-left: 7.5rem;}
      .card .wrap.add-pastille .pastille { position: absolute; left: 0; top: 0; width: 5.5rem; height: auto;}

      
      
    }

    @media screen and (max-width: 1240px) {

    h2 {  font-size: 400%; }
    h3 {  font-size: 230%; }
    .texte p , .texte ul, .texte ol { font-size: 120%; line-height: 135%; margin: 1em 0;}


    .video-player .controller span {   top: 50% !important; left: 50% !important; }



    .encart-video .video-player , .encart-video .img-cover { width: 55%; }
.encart-video .pave-texte { width: 45%; }
.encart-video .video-player .controller , .encart-video .img-cover  .controller{ height: 4.5rem; }

.columns-videos h4 { font-size: 125%;}
    }

    @media screen and (max-width: 980px) {
    h2 span , h3 span { display: inline;}
    }

    @media screen and (max-width: 900px) {



      .card .wrap { margin: 2rem !important;}
      .card .wrap.add-pastille {  padding-left: 0;}
      .card .wrap.add-pastille .pastille { position: absolute; left: auto; right:0; border-radius: 100%; top: 0; margin: -5rem -0.2rem; width: 6rem; height: auto; box-shadow: 0 0 3px #FFF inset;}
      .card .wrap.add-pastille h3 { padding-right: 4rem;}



      #popup_content .texte .bande { display: none;}
      #popup_content .texte .bande + .legende { display: none;}

      #popup_content .sticky .bande { display: block;}
    #popup_content .sticky .bande + .legende { display: block;}


      #mainMenu .picture { padding: 26.5% 0;margin: 0 0;}
      #mainMenu  p { margin:1rem 0}
      #mainMenu .bottom { text-align: left; bottom: 0; padding-bottom: 6rem; left: 0; z-index: 4; position: fixed; }
      #mainMenu .bottom p a:before { left: 0; right: auto;}

      #mainMenu p a:before {  height: 1px; }
      
      #mainMenu .picture { }
      #mainMenu .double-col { margin:-1rem 0 0 0;}



      .columns-videos .col {  width: 50%; }
      .double-col .col { width: 100%; padding: 0; margin: 1.5rem 0;  float: none; }

      #mainMenu .double-col .col { /* margin-bottom: 18rem; */}
      #mainMenu .double-col .col.right { margin-bottom: 2rem; max-width: 132rem; float: none; }





      #mainMenu .bottom { text-align: left; bottom: 0; padding-bottom: 6rem; left: 0; z-index: 4; position: static; }
      #mainMenu .bottom p a:before { left: 0; right: auto;}
      #mainMenu .double-col .col { margin-bottom: 3rem;}
    


      .columns-videos .col:nth-child(3) {  clear: left; }

      .columns-videos .col:nth-child(2) .video-player.playing  .controller , .columns-videos .col:nth-child(4) .video-player.playing  .controller { margin-left: -0.5rem; margin-right: 0;  transform-origin: right center; }
      .columns-videos .col:nth-child(1) .video-player.playing  .controller , .columns-videos .col:nth-child(3) .video-player.playing  .controller { margin-right: -0.5rem; margin-left: 0;  transform-origin: 0 center; }

      .no-mono { display: none;}

      .fade-in-animate.delay { transition-delay: 0s;} 
      
      #logo { position: static; }
      #logo img { height: 3rem;}
      #header { height: 9rem;}
      #menu-right { font-size:130%;}
      
      #header h1 { margin:2rem 0 0 0;  text-align: left;  overflow: hidden; }

      
      #video-home { height: calc(100vh - 16rem); min-height: 440px;}

      h2 {  font-size: 360%; }
      h2 span , h3 span { display: inline;}

      p.graph { margin: 4rem 3rem;}

      .box-margin .marger { margin: 0;}
      .box-margin .sticky , .box-margin .textes { margin: 0; width: auto;}
      .box-margin.medium .sticky , .box-margin.medium .textes { margin: 0; width: auto;}
      .box-margin.large .sticky , .box-margin.large .textes { margin: 0; width: auto;}

      .sticky {  position: static;   top: 0; margin-bottom: 0;}
      .box-margin.left .sticky ,    .box-margin.left .textes , .box-margin.right .sticky ,    .box-margin.right .textes { float: none;   }
      

  .col-50 { width:100%;}
  .col.left { float: none;}
.col.right { float: none;}
.col { margin: 2rem 0;}
.col.p-left { padding-left:0;}
.col.p-right { padding-right:0;}

.col.p-left.large { padding-left:0;}
.col.p-right.large { padding-right:0;}

.col.p-left.medium { padding-left:0;}
.col.p-right.medium { padding-right:0;}


.center { margin:5rem 4rem; max-width: 100%;  position: relative;  }
.center .wrap { margin:0; }
.center .wrap.arround  , .center .wrap.large { margin-top:4rem; margin-bottom:4rem; }



ul.cc li { width: 50%;}
ul.cc li:nth-child(5) { clear:left;}
ul.cc li:nth-child(3) { clear:left;}
ul.cc.max-3 li:nth-child(4){ clear: none;}



  #bullet-menu , #select-language { display: none;}

/*   #menu-right { position: absolute; mix-blend-mode: normal; }



  #menu-right { color:#121426;  }
#menu-right a { color:#121426; }

#toggle-menu span { background: #121426; } */


#select-language-menu {display:block;}


section { padding:0 0;}
section.first { margin: 0;}



#zoom h2 { margin-top: 0;}
#zoom ul { padding-right: 0; margin: 2rem 0; }
#zoom ul li { margin: 0.8rem 0;}
#zoom .preview { display: none;}





  /* .encart-video { padding: 2.5rem;} */
  .encart-video .pave-texte .wrap { }
  .encart-video .video-player , .encart-video .img-cover { width: 100%; }
  .encart-video .pave-texte { width: 100%; position: static; height: auto; /* margin: -2.5rem -2.5rem 0 -2.5rem;  */}
  .encart-video .video-player .controller ,   .encart-video .img-cover  .controller{ height: 0; }

  .encart-video {  margin: 3rem 0; }

  #footer .texte { font-size: 90%;}
  #footer .sticky { margin:2.5rem 0 2rem 0; font-size: 200%; }
  #footer p.socials { margin-top: 0rem; font-size: 90%;}

  p.contener img { bottom: -15%; top: auto; transform: none !important;}

/*   #footer .sticky { margin:4rem 0 2.5rem 0; font-size: 200%; padding-bottom: 1.5rem; text-align: center; border-bottom: 1px solid #FFF3;}
  #footer .sticky p.socials { font-size: 90%; margin: 0.5em auto 0 auto; max-width: 400px; height: 1.8em;}
  #footer .sticky p.socials a { margin: 0; float: left; width: 16.66%;} */

  #popup_content p.cc { float: left; width: auto; clear: none; margin-right: 2rem;}
  #popup_content p.legende { margin: 0 0 1.5rem 0;}

  #menu-right { mix-blend-mode: normal; position: static; }
  #toggle-menu {position: fixed; font-size: 13px; box-shadow: 0 -3px 10px 1px rgba(0,0,0,0.08); left: 50%; margin-left: -2em; right: auto; top: auto; bottom: 3rem; background: #FFF; width: 24px; height: 24px; border: 0.5em solid #FFF; border-width: 1em 1em; border-radius: 5em;  pointer-events: fill; z-index: 100; }
  #toggle-menu span { background: #121426; margin:-1px -12px; width: 24px; }
  #arrow-scroll { display: none; }


  #toggle-menu span:first-child { margin-top: 2px;}
  #toggle-menu span:last-child { margin-bottom: 2px;}

  .openMenu #toggle-menu span:first-child { margin:-1px -12px; }
  .openMenu #toggle-menu span:last-child { margin:-1px -12px; }





  #popupcover { background: rgba(0,0,0,0.9) no-repeat center center url(../images/spinner.gif); opacity: 0.6;}
  #popup { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;}
  #popup:not(.reloaded) #popup_content { opacity: 1 !important;}
  #popup_content #closer { position: absolute; margin: 0;}
  img.block , p.block  img{ max-height: 40rem; }
  .texte p.legende.small { max-width: 100%;}


  p.cc + p.cc ,  p.cc { margin: 1.5rem 0;}


 }




 @media screen and (max-width: 680px) {
  #popup_content .header { height: 9rem;}
  #popup_content .selector { top: 5rem; left: 0; width: calc(100% - 2rem); max-width: 100%; font-size: 120%; opacity: 1; transition: opacity 0.2s;}
  #popup_content .selector.open { opacity: 1;}


  .texte table.chiffres .to-remove { display: none;}
  .center { margin:3rem 2rem;  }
  .center .wrap.arround  , .center .wrap.large { margin-top:2rem; margin-bottom:2rem; }
  table.agenda {  font-size: 100%; }


  h2 .legende , h3 .legende  , h4 .legende  {  font-size: 45%;  }



  .encart-video {  margin: 2rem 0; }



  #popup_content p.cc { min-width: 34%;}

 }


 @media screen and (max-width: 540px) {
    
  html, body { font-size:13px;}
  .texte p { line-height: 150%;}

  #mainMenu { font-size: 80%;}



 }



 @media screen and (max-width: 400px) {
    html, body { font-size:12px;}
    h2 {  font-size: 320%; }
    #popup_content p.cc { width: 100%;}
 }


 @media screen and (max-width: 340px) {
  html, body { font-size:11px;}
  h2 {  font-size: 300%; }
}