/***** Font - Line-height - REM (Règles)
Font-size   : 62.5% -> 12px = 1.2rem
Line-height : font-size: 16px; line-height: 1.5; = 16*1.5 = 24 pour le line-height
 *****/
html { font-size: 62.5%;}

/***** variable *****/
:root {
  --fontBody: "Barlow";
  --fontScript: "Playfair";
  --colorBody: #000000;
  --colorLink: #000000;
  --colorLinkHover: #bfa477;
  --colorTitle: #bfa477;
  --marginBloc: 100px auto;     
}

@media (max-width:1200px) {
    :root {
          --marginBloc: 80px auto;
        }
    }

@media (max-width:1000px) {
    :root {
          --marginBloc: 60px auto;
        }
    }

@media (max-width:800px) {
        :root {
          --marginBloc: 40px auto;
        }
    }

@media (max-width:500px) {
        :root {
          --marginBloc: 30px auto;
        }
    }

/***** fonts size *****/

.font_size-80       { font-size: clamp(5rem, 4.1102rem + 3.8898vw, 8rem); }
.font_size-60       { font-size: clamp(3.5rem, 2.7585rem + 3.2415vw, 6rem); }
.font_size-50       { font-size: clamp(3rem, 2.4068rem + 2.5932vw, 5rem); }
.font_size-40       { font-size: clamp(2.2rem, 1.6661rem + 2.3339vw, 4rem); }
.font_size-35       { font-size: clamp(2rem, 1.7301rem + 1.1799vw, 3.5rem); }
.font_size-30       { font-size: clamp(1.8rem, 1.4441rem + 1.5559vw, 3rem); }
.font_size-25       { font-size: clamp(1.6rem, 1.3331rem + 1.1669vw, 2.5rem); }
.font_size-20       { font-size: clamp(1.5rem, 1.3517rem + 0.6483vw, 2rem); }
.font_size-18       { font-size: clamp(1.4rem, 1.2814rem + 0.5186vw, 1.8rem); }
.font_size-16       { font-size: clamp(1.4rem, 1.3407rem + 0.2593vw, 1.5rem); }
.font_size-14       { font-size: clamp(1.3rem, 1.2703rem + 0.1297vw, 1.4rem); }
.font_size-13       { font-size: clamp(1.2rem, 1.1703rem + 0.1297vw, 1.3rem); }
.font_size-12       { font-size: 12px;}
.font_size-11       { font-size: 11px;}

/***** reset *****/

body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}  
input, textarea						{ -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;}
*          							  { outline: none; position: relative;}
strong, b							    { font-weight: 600;}
h1, h2, h3, h4, h5, h6    { font-weight: normal;}
ul									      { list-style-type: none;}
body								      { font-family:  var(--fontBody); line-height: 1.8; font-weight: normal; font-size: clamp(1.4rem, 1.3407rem + 0.2593vw, 1.5rem); letter-spacing: 0.8px; color: var(--colorBody); background: #ffffff; font-weight: 400;}
body.active_overflow      { height: 100vh; overflow: hidden;}
a						        			{ text-decoration: none; color: var(--colorBodyLink); }
img								      	{ border: none;}
h3 i                      { color: var(--colorTitle); display: block; margin-top: -5px;}

#wrapper 							  { min-width: 320px; overflow: hidden; }
#wrapper *							{ box-sizing: border-box;}
#footer 							  {  z-index: 15;}

.bold                               { font-weight: 600;}
.regular                            { font-weight: 400;}
.script                             { font-family: var(--fontScript); line-height: 1.2; font-weight: 500;}
.tiret                              { margin-bottom: 30px;}
.tiret:after                        { content: ''; width: 50px; height: 1px; background: var(--colorLinkHover); position: absolute; left: 0; bottom: -10px;}
p.icone                             { display: flex; grid-gap: 0 15px; align-items: center;}
.link                               { padding: 20px 30px; border: 1px solid #bfa477; display: block; width: max-content; margin-top: 20px;}  
.link:hover                         { background: var(--colorLinkHover); color: #ffffff;}
.mobile                             { display: none;} 

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

.ul_list                { margin-top: 15px;}
.ul_list li             { position: relative; padding-left: 30px; line-height: 25px; margin-bottom: 12px;}
.ul_list li:before      { width: 16px; height: 12px; position: absolute; left: 0; top: 6px; background: url("../images/icone-li.svg") 0 0 / contain no-repeat; content: "";}
.ul_list li:last-child  { margin-bottom: 0;}

@media (max-width:800px) {
.link                         { background: var(--colorLinkHover); color: #ffffff;}  
}

@media (max-width:400px) {
.link                         { width: 100%; text-align: center;}  
}


/***** scollbar *****/
::-webkit-scrollbar 				  { width: 6px; height: 6px; background-color: var(--colorBody);}
::-webkit-scrollbar-thumb			{ background-color: var(--colorLinkHover);}

/***** transition *****/
@media (min-width:1201px) {
.link, .slick-arrow, :before, :after, a, a span, .sub 	{ transition: all 300ms ease-in-out;}
}

/***** hide  *****/

.hide                      { display: none;}
.read_more,
.read_less                 { cursor: pointer; color: var(--colorLinkHover);}
.hide_readMore             { margin-top: 25px; position: relative; background: var(--colorBody); color: #ffffff; padding: 50px; border-radius: 5px;}
.hide_readMore p           { margin-top: 15px;}
.hide_readMore a           { color: #ffffff;}
.hide_readMore :last-child { margin-bottom: 0;}

/***** menu *****/

header            	{ width: 100%; height: 140px; position: fixed; left: 0; top: 0; z-index: 100; text-align: right; background: #ffffff; transition: all 400ms ease-in-out;}
header .wrapper  	  { width: 90vw; max-width: 1600px; margin: 0 auto;}

header .logo        { position: absolute; left: 0; top: 20px; z-index: 200;}
header .logo img    { width: 100%; max-width: 230px; height: auto;}

header .header_nav-top { height: 45px;}

header .header_nav-top .phone       { margin-right: 90px; margin-top: 25px;}
header .header_nav-top .phone a     { font-weight: 600; padding-left: 30px; margin-left: 10px;}
header .header_nav-top .phone a:before { content: ''; width: 19px; height: 19px; background: url(../images/icone-phone-header.svg) left center no-repeat; position: absolute; left: 0; top: 0;}

header .header_nav                                 { margin-top: 20px;} 
header .header_nav .menu li                        { display: inline-block; margin-right: 40px;}
header .header_nav .menu li:nth-last-child(2)      { margin-right: 20px;}
header .header_nav .menu li:last-child             { margin-right: 0;}
header .header_nav .menu li a                      { color: var(--colorBody);}
header .header_nav .menu>li>a:after                { content: ''; width: 0; height: 1px; background: var(--colorLinkHover); position: absolute; left: 0; bottom: -10px; transition: all 300ms ease-in-out;}
header .header_nav .menu li.active>a               { color: var(--colorLinkHover);}
header .header_nav .menu>li.active>a:after         { content: ''; width: 20px; height: 1px; background: var(--colorLinkHover); position: absolute; left: 0; bottom: -10px;}
header .header_nav .menu li.eshop a                { border: 1px solid var(--colorLinkHover); padding: 14px 25px 14px 60px; }
header .header_nav .menu li.eshop:before           { content: ''; width: 18px; height: 20px; background: url(../images/icone-shop-header.svg) left center no-repeat; position: absolute; left: 25px; top: 2px;}

header .header_nav .menu .sub   { position: absolute; top: 0; left: 50px; transform: translateX(-50%);  display: block; visibility: hidden; overflow: hidden; opacity: 0; }

/***** sticky *****/
body.sticky header         {  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);}

/***** lang *****/
.languagepicker                     { background-color: #eeeeee; display: inline-block; padding: 0; height: 30px; overflow: hidden; transition: all .3s ease; position: absolute; z-index: 10; top: -2px; right: 0;}
.languagepicker:hover               { height: 61px;}
.languagepicker a                   { color: var(--colorBody); text-decoration: none; text-transform: uppercase; display: block; padding: 0px 30px 0 10px;}
.languagepicker li:nth-child(1) a:after      { content: ''; position: absolute;  background: url(../images/select-language.svg) left 50%; width: 10px; height: 6px; right: 10px; top: calc(50% - 3px); }
.languagepicker li                  { display: block; background: transparent; line-height: 30px; border-top: 1px solid #ffffff;}
.languagepicker li:hover            { background-color: var(--colorLinkHover);}
.languagepicker a:first-child li    { border: none;	background: transparent;}

@media (min-width:1201px) {

    header .header_nav .menu li:hover a                        { color: var(--colorLinkHover);}
    header .header_nav .menu>li:not(.eshop):hover a:after      { width: 20px;}
    
    header .header_nav .menu>li:hover .sub        { opacity: 1; visibility: visible; z-index: 999;}

    header .header_nav .menu .sub                 { width: max-content; text-align: left; position: absolute; top: 35px; display: block; background: #ffffff; padding: 20px; border-radius: 5px; opacity: 0; visibility: hidden; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2); }
    header .header_nav .menu .sub li              { display: block; margin-right: 0;}
    header .header_nav .menu .sub li a            { padding: 8px 40px 8px 0; background: url("../images/li-footer.svg") 95% 46% no-repeat; text-transform: initial; display: block; line-height: 20px; color: var(--colorBody);}
    header .header_nav .menu .sub li a:hover      { color: var(--colorLinkHover); content: none; background: url("../images/li-footer.svg") 100% 46% no-repeat;}
    header .header_nav .menu .sub li.active a     { color: var(--colorLinkHover); content: none;}
    
}

@media (max-width:1200px) {

header                          { height: 100px;}
header .header_nav-top          { display: none; } 

.menu_mobile						        { width:60px; height:60px; display:inline-block; vertical-align:middle; cursor:pointer; position:relative; z-index:60; margin: 20px -10px; transition:height 400ms ease-in-out;}
.menu_mobile div					      { width:40px; height:2px; background:#000000; position:absolute; right:50%; top:50%; margin:-1px -20px 0 0;}
.menu_mobile div:before				  { width:100%; height:2px; background:#000000; position:absolute; right:0; top:9px; content:"";}
.menu_mobile div:after				  { width:100%; height:2px; background:#000000; position:absolute; right:0; top:-9px; content:"";}
.menu_mobile.active div				  { height:0;}
.menu_mobile.active div:before  { top:0; transform:rotate(45deg);  width: 100%; }
.menu_mobile.active div:after		{ top:0; transform:rotate(-45deg); }
header .header_nav 	  				  { width:100%; height:100vh; background:#ffffff; position:fixed; right:0; top:-120%; overflow-y:scroll; display: flex; flex-direction: column; padding: 140px 0 0; z-index:50; transition:top 400ms ease-in-out 400ms;}
header .header_nav::-webkit-scrollbar		{ display:none;}

header .header_nav .menu  					{ width:100%; max-width: 450px; margin: 0 auto; width: 90vw; text-align:left; padding:0; transition:opacity 400ms ease-in-out 0ms; opacity:0;}
header .header_nav .menu li 				{ width:100%; display:block; margin:0; background: none; padding: 0;}
header .header_nav .menu>li>a				{ line-height:50px; height:auto;}
header .header_nav .menu li i.active:after	{ opacity:1;}
header .header_nav .menu li i				{ width: 50px; background-color: var(--main-color); height: 41px; display: block; margin-top: -46px; position: absolute; right: 0; z-index: 5; border-radius: 5px;}
header .header_nav .menu li i::after       { content: ""; display: block; position: absolute;  transform-origin: center; transition: all ease 400ms; width: 100%; height: 100%; background: url(../images/arrow_select.svg) no-repeat center;}
header .header_nav .menu li a	             { background: none;}
header .header_nav .menu li i.active::after{ transform: rotate(180deg);}

header .header_nav .menu li.eshop         { color: #ffffff; background: #bfa477;}
header .header_nav .menu li.eshop a       { color: #ffffff;}
header .header_nav .menu li.eshop:before  { top: 15px; background: url(../images/icone-shop-header-white.svg) left center no-repeat;}

.link-phone.mobile        { cursor: pointer; transition: all 300ms ease-in-out; width: 40px; height: 40px; display: inline-block; background: url(../images/icone-phone-header.svg) center center no-repeat; top: 15px; right: 20px; }
   
/* sous-menu simple */
header .header_nav .menu .sub 				  { width: 100%; position: relative; left: auto; top: auto; margin: 0; opacity: 1; display: block; visibility: visible; z-index: 150; transform: inherit; background: #ffffff; padding: 10px 20px; border: 1px solid #bfa477;}
header .header_nav .menu .sub li  			{ width: 100%;}
header .header_nav .menu .sub li a			{ width: 100%; line-height: 30px; height: 30px; text-align: left;}

header .header_nav .mobile                 { display: block; opacity:0;}
header .header_nav ul.mobile               { max-width: 450px; margin: 0 auto; width: 90vw; text-align:left;} 
header .header_nav ul.mobile li            { display: block; margin: 10px 0;}

header .header_nav.active					    { top:0; }
header .header_nav.active .link		    { opacity:1; transition-delay:1200ms;}
header .header_nav.active .menu_top		{ opacity:1; transition-delay:1000ms; background: none;}
header .header_nav.active .menu			  { opacity:1; transition-delay:800ms;}
header .header_nav.active .mobile     { opacity:1; transition-delay:800ms;}

.mobile.lang                      { display: block; max-width: 450px; margin: 0 auto; width: 90vw; text-align: left;} 
.mobile.lang li 						      { display: inline-block; line-height: 60px; margin-right: 25px; letter-spacing: 0.8px;}
.mobile.lang li a 					      { color: #000000;}
.mobile.lang li a b 					    { color: var(--colorLinkHover);}
.mobile.lang li:after					    { width: 1px; height: 8px; content: ""; position: absolute; right: -13px; top: 26px; background: #000000;}
.mobile.lang li:last-child:after  { display: none;}
}


@media (max-width:800px) {
    .link-phone.mobile        { padding: 0; top: 15px;}
    .link-phone.mobile a      { display: block; width: 40px; height: 40px;}
    .link-phone.mobile:before { left: 14px;}
    .link-phone.mobile span   { display: none; }
    
}

@media (max-width:600px) {
    body header,
    body.sticky header                  { background: #ffffff;  padding-bottom: 0; height: 60px;}
    .menu_mobile div					          { background:#000000; }
    .menu_mobile div:before				      { background:#000000; }
    .menu_mobile div:after				      { background:#000000; }
    .link-phone.mobile                  { margin-right: 0;}
    .menu_mobile                        { margin-top: 0;}
    .link-phone.mobile                  { top: 6px;}
    header .logo                        { width: 120px;}
}

/***** bloc grid *****/
.bloc_grid                      { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 80px; align-items: center; margin: var(--marginBloc); max-width: 1200px; width: 90vw;}
.bloc_grid-photo                { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 80px; align-items: center; margin: var(--marginBloc); max-width: 1200px; width: 90vw;}
.bloc_grid-photo-slogan         { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 80px; align-items: center; margin: var(--marginBloc); max-width: 1600px; width: 90vw;}
.bloc_grid-photo-slogan img     { max-width: 100%; height: auto;}
.bloc_grid-photo-slogan .texte  { padding-right: 200px;}
.bloc_grid-photo-slogan-inner   { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 60px; align-items: center; margin-top: 20px;}
.bloc_grid-photo-slogan-inner p.quote        { margin-top: 20px;}
.bloc_grid-photo-slogan-inner p.quote:before { content: ''; background: url("../images/icone-quote.svg") left top no-repeat; width: 53px; height: 40px; position: absolute; top:
-60px; }

.bloc_grid-photo-slogan.reverse .photo { grid-area: 1 / 2;}
.bloc_grid-photo-slogan.reverse .texte { grid-area: 1 / 1; padding-left: 200px; padding-right: 0;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(1) { grid-area: 1 / 2;}
.bloc_grid-photo-slogan.reverse .bloc_grid-photo-slogan-inner .item:nth-child(2) { grid-area: 1 / 1;}

.bloc_texte                     { max-width: 1200px; width: 90vw; margin: var(--marginBloc); }  
.bloc_links                     { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 10px; align-items: center; margin-top: 20px;}
.bloc_links a                   { width: 100%; padding: 20px; border: 1px solid #bfa477; text-align: center;}   
.bloc_links a.grey              { border: 1px solid #cecece;}   

@media (min-width:1201px) {
.bloc_links a:hover             { background: #bfa477; color: #ffffff; transition: all 300ms ease-in-out;}   
.bloc_links a.grey:hover        { background: #cecece; color: #000000; transition: all 300ms ease-in-out;}   
}

@media (max-width:1400px) {
.bloc_grid                              { grid-gap: 0 60px;} 
.bloc_grid-photo-slogan .texte          { padding-right: 0;}
.bloc_grid-photo-slogan.reverse .texte  { padding-left: 0;}
.bloc_grid-photo-slogan                 { grid-gap: 0 60px;}  
.bloc_grid-photo-slogan-inner           { grid-gap: 0 40px;}  
}

@media (max-width:800px) {
.bloc_links a             { background: #bfa477; color: #ffffff; transition: all 300ms ease-in-out;}   
.bloc_links a.grey        { background: #cecece; color: #000000; transition: all 300ms ease-in-out;}    
}


/***** bloc cta *****/
.bloc_cta                       { max-width: 1200px; width: 90vw; margin: var(--marginBloc); background: #bfa477; padding: 35px 20px; color: #ffffff; text-align: center;}
.bloc_cta p                     { width: max-content; margin: 0 auto; padding-left: 50px;}
.bloc_cta p:before              { content: ''; width: 22px; height: 24px; background: url("../images/icone-calendar.svg") left top no-repeat; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.bloc_cta a                     { color: #ffffff;}

.bloc_cta-shop              { max-width: 1200px; width: 90vw; margin: var(--marginBloc); background: #bfa477; padding: 35px 20px; color: #ffffff; text-align: center;}
.bloc_cta-shop p            { width: max-content; margin: 0 auto; padding-left: 50px;}
.bloc_cta-shop p:before     { content: ''; width: 22px; height: 24px; background: url("../images/icone-shop.svg") left top no-repeat; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.bloc_cta-shop a            { color: #ffffff;}

@media (max-width:800px) {
.bloc_cta p:before,
.bloc_cta-shop p:before { content: none;}
.bloc_cta p,
.bloc_cta-shop p        { padding-left: 0; width: auto;}  
}

/***** show hide *****/
.show_hide                      { position: relative; margin: 120px 0;}; 
.show_hide.no_marge             { margin: 0;}
.show_hide .item                { border: none; overflow: hidden; border-radius: 0}
.show_hide .titre               { position: relative; cursor: pointer; padding: 15px 0 15px 0; margin: 0; border-bottom: 1px solid #ddd; font-weight: 500; transition: all 300ms ease-in-out;}
.show_hide .item:nth-child(2)   { border-top: 1px solid #ddd; margin-top: 40px;}
.show_hide .hide                { margin: 0; padding: 0 0 40px 0; background: #fff; display: none;}
.show_hide .hide p a						{ border-bottom: 1px solid #cecece; padding-bottom: 1px;}
.show_hide .hide :last-child    { margin-bottom: 0;}
.show_hide .titre.active        { border-bottom: 1px solid transparent;}

/* custom titre plus */
.show_hide .titre_plus:after          		{ width: 20px; height: 2px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #bfa477; content: "";}
.show_hide .titre_plus:before          		{ width: 2px; height: 20px; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); background: #bfa477; content: "";}
.show_hide .titre_plus.active:before   		{ opacity: 0;}

/***** footer *****/
footer                { background: #000000; color: #ffffff; }
.footer               { width: 90vw; max-width: 1200px; margin: 0 auto; padding: 100px 0 0 0;}

.footer .rs               { position: absolute; top: 100px; right: 0; display: flex;}
.footer .rs a             { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #bfa477; margin-right: 10px;}
.footer .rs a:last-child  { background: #333333; margin-right: 0;} 

.footer .bloc_grid                         { display: grid; grid-template-columns: 40% auto; grid-gap: 0 80px; margin: 10px 0 60px 0; align-items: start;}

.footer .bloc_grid p.icone                 { margin: 20px 0;}        
.footer .bloc_grid p.icone span            { background: #ffffff; width: 50px; height: 50px;}
.footer .bloc_grid p.rdv                   { margin-bottom: 20px;} 

.footer .bloc_grid ul.col-2                { column-count: 2; max-width: 340px;}
.footer .bloc_grid ul.col-2 li             { position: relative; padding-left: 30px; line-height: 25px; margin-bottom: 12px;}
.footer .bloc_grid ul.col-2 li:before      { width: 16px; height: 12px; position: absolute; left: 0; top: 6px; background: url("../images/icone-li.svg") 0 0 / contain no-repeat; content: "";}
.footer .bloc_grid ul.col-2 li:last-child  { margin-bottom: 0;}

.footer_bottom                      { font-size: 10px; margin: 0 auto; width: 100%; max-width: 1200px; }
.footer_bottom li 						      { display: inline-block; line-height: 60px;margin-right: 25px; letter-spacing: 0.8px;}
.footer_bottom li a 					      { color: #ffffff;}
.footer_bottom li:after					    { width: 1px; height: 8px; content: ""; position: absolute; right: -13px; top: 26px; background: #ffffff;}
.footer_bottom li:last-child:after  { display: none;}

.toponweb         { display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 300ms ease-in-out;}
.toponweb span    { width: auto; height: 60px; display: block; padding: 20px; }
.toponweb img     { width: 76px; height: auto; display: block; margin: 0 auto; filter: invert(1); transition: all 300ms ease-in-out;}

@media (max-width:1000px) {
.footer .bloc_grid                         { grid-template-columns: 1fr 1fr;}
.footer .bloc_grid ul.col-2                { column-count: 1;}  
}

@media (max-width:800px) {
.footer                                 { padding: 40px 0 0 0;}  
.footer .rs                             { top: 40px;}
.footer .bloc_grid                      { grid-template-columns: 1fr;}
.footer .bloc_grid .item:nth-child(2)   { display: none;}
.footer_bottom li                       { display: block; line-height: 20px;}
.footer_bottom li:after	                { content: none;}  
}

@media (max-width:600px) {
.footer>div img { max-width: 150px; height: auto;}  
.footer .bloc_grid { margin-top: 40px;}  
}