/***** fonts *****/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700&display=swap');
@import url('https://use.typekit.net/xoj3zgk.css');

.titre-50           { font: 400 clamp(2.5rem, 1.7585rem + 3.2415vw, 5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.titre-45           { font: 400 clamp(2.5rem, 1.9068rem + 2.5932vw, 4.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.titre-40           { font: 400 clamp(2.2rem, 1.6661rem + 2.3339vw, 4rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.titre-35           { font: 400 clamp(2rem, 1.5551rem + 1.9449vw, 3.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.titre-30           { font: 400 clamp(1.8rem, 1.4441rem + 1.5559vw, 3rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.titre-25           { font: 400 clamp(1.6rem, 1.3331rem + 1.1669vw, 2.5rem)/1.2 var(--fontTitre); display: block; margin-bottom: 25px;}
.sous_titre-15      { font: 400 clamp(1.4rem, 1.3703rem + 0.1297vw, 1.8rem)/1.2 var(--fontBody); }
.sous_titre-20      { font: 400 clamp(1.6rem, 1.4814rem + 0.5186vw, 2rem)/1.2 var(--fontBody); display: block; margin-bottom: 25px;}

/***** 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;}
strong, b							{ font-weight: 500;}
ul									{ list-style-type: none;}
body								{ font: 400 clamp(1.3rem, 1.2407rem + 0.2593vw, 1.8rem)/2 var(--fontBody); letter-spacing: .3px; color: var(--colorBody); background: #f5eee3; position: relative;}
body.active_overflow				{ height: 100vh; overflow: hidden;}
a									{ text-decoration: none; color: var(--colorBodyLink); position: relative;}
img									{ border: none;}
main 								{ position: relative;}
#wrapper 							{ min-width: 320px; overflow: hidden; position: relative;}
#wrapper *							{ box-sizing: border-box;}
#footer 							{ position: relative; z-index: 15;}

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

/***** scollbar *****/
::-webkit-scrollbar 				{ width: 6px; background-color: #fff;}
::-webkit-scrollbar-thumb			{ background-color: #15282f;}

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

/***** class structure *****/
header            { width: 90vw; max-width: 1600px; margin: 0 auto; position: relative;}
banner            { width: 90vw; max-width: 1600px; margin: 120px auto 0 auto; position: relative; height: 680px; display: block; overflow: hidden;}
#page banner      { margin-top:140px; margin-bottom: 120px;}
main              { position: relative;}
footer            { width: 100vw; margin: 0 auto; position: relative; }

.wrapper   { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;}

.hide      { display: none;}

.link       { position: relative; color: #000000; padding-right: 70px; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600;}
.link:after { content: ''; position: absolute; width: 60px; height: 1px; background: #000000; right: 0; top: 50%; transform: translateY(-50%);}

.facade         { position: relative;}
.facade:after   { content: ''; position: absolute; /*left: calc(110vw - 500px);*/ right: -550px; bottom: -150px; width: 501px; height: 307px; background: url("../images/facade.svg") 50% 50% no-repeat; }
.full.facade:after   { /*left: calc(120vw - 500px);*/ bottom: 0;}

@media (max-width:1360px) {
    .facade:after          { background-size: 80%; left: 85vw;}
    .full.facade:after     { background-size: 80%; left: 85vw;}
}

@media (max-width:1200px) {
    banner         { margin-top: 100px; height: 550px;}
    #page banner   { margin-top: 100px; margin-bottom: 80px;}
}

@media (max-width:1000px) {
    #index banner     { height: 500px;}
}

@media (max-width:800px) {
     #index banner     { height: 550px;}
     #page banner      { height: auto;}
}

@media (max-width:600px) {
    banner                { width: 100vw; margin-top: 80px;}
    #page banner          { margin-top: 80px;}
    #header .logo img     { width: 120px;}
    .facade:after         { content: none;}
}

/***** class liens *****/
.texte p a, .bloc_texte p a, .ul_list a { color: #7f6149; border-bottom: 1px solid #7f614900; }
a.read_more, p a.read_more { color: #000000; border-bottom: 1px solid #7f614900;}

@media (min-width:1201px) {
    .texte p a:hover, .bloc_texte p a:hover, .ul_list a:hover { color: var(--colorBodyLinkHover); border-bottom: 1px solid #7f6149; }
    a.read_more:hover, p a.read_more:hover { color: #7f6149; border-bottom: 1px solid #7f614900;}
    .link:hover { color: #7f6149;}
    .link:hover:after { width: 0;}
}


/***** header - menu *****/
#header            { position: fixed; height: 120px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 200px auto; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; z-index: 800; transition: all 300ms ease-in-out;}
#header:before     { content: ''; width: 200vw; left: -50vw; top: 0; height: 140px; background: #ffffff00; position: absolute; z-index: -1;transition: all 300ms ease-in-out;}

#header .logo          { grid-area: 1 / 1 / 3 / 2; position: relative;}
#header .logo a        { position: absolute; font-size: 0; line-height: 0; top: 50%; transform: translateY(-50%);}
#header .logo a img    { max-width: 100%; height: auto;transition: all 300ms ease-in-out;}


#header .menu-top      { grid-area: 1 / 2 / 3 / 3; text-align: right; padding-top: 15px; transition: all 300ms ease-in-out;}
#header .menu-top a    { color: #000000; font-size: 13px; line-height: 0; letter-spacing: 1px; position: relative; margin-right: 28px;}
#header .menu-top a:after				            { content: ""; width: 1px; height: 10px; background: #000000; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); }
#header .menu-top a:nth-last-child(-n + 2):after	{ display: none;}
#header .menu-top a.header-tel        { position: relative; color: #000000; padding: 0 0 0 30px; display: inline-block; margin-right: 0;}
#header .menu-top a.header-tel:before { content: ''; background: url("../images/mobile.svg") left 50% ; width: 12px; height: 20px; position: absolute; left: 10px; transform: translateY(-50%);}
#header .menu-top a.active            { color: #7f6149;}

#header .menu                       { grid-area: 2 / 2 / 3 / 3; position: relative; text-align: right;  transition: all 300ms ease-in-out;}
#header .menu ul                    { padding-top: 5px;}
#header .menu li                    { display: inline-block; position: relative; margin-right: 35px;}
#header .menu li:last-child         { margin-right: 0;}
#header .menu li a                  { color: #000000; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;}
#header .menu li.active>a           { color: #7f6149;}
#header .menu li a.link-shopper     { background: #ffffff; padding: 10px 30px; border: 1px solid #ffffff;}

.phone_mobile,
.menuTopMobile                      { display: none;}

@media (min-width:1201px) {
    #header .menu-top a:hover        { color: var(--colorBodyLinkHover);}
    #header .menu li:hover>a         { color: var(--colorBodyLinkHover);}
    
    .sticky #header                     { margin-top: -30px;}
    .sticky #header:before              { background: #ffffff;transition: all 300ms ease-in-out;}
    
    .sticky #header .menu-top           { opacity: 0; transition: all 300ms ease-in-out; padding-top: 0;}

    .sticky #header .menu               { padding-top: 0; transition: all 300ms ease-in-out;}
    .sticky #header .menu ul            { transition: all 300ms ease-in-out;}
    .sticky #header .logo a             { top: 70%; transition: all 300ms ease-in-out;}
    .sticky #header .logo img           { transition: all 300ms ease-in-out;}
    
    .sticky #header .menu li a.link-shopper     { border: 1px solid #000000;}
}

@media (max-width:1366px) {
    #header .menu li             { display: inline-block; position: relative; margin-right: 20px;}
}

@media (max-width:1200px) {
    #header                     { margin-top: -50px;}
    #header .menu-top           { opacity: 0; transition: all 300ms ease-in-out; padding-top: 0;}
    #header .menu               { padding-top: 0; transition: all 300ms ease-in-out;}
    #header .menu ul:nth-child(1)      { padding-top: 180px;}
    #header .menu ul:nth-child(2)      { margin-top: 50px; padding: 10px 20px; background: #ffffff; border-radius: 10px;}
    #header .menu ul:nth-child(2) li a { text-transform: none; line-height: inherit;}
    #header .logo a             { top: 45%;}
    #header .logo img           { margin-top: 50px;}

    #header:before              { content: ''; width: 200vw; left: -50vw; top: 0; height: 140px; background: #ffffff00; position: absolute; z-index: -1; transition: all 300ms ease-in-out;}
    .sticky #header:before      { background: #ffffff;transition: all 300ms ease-in-out;}
    
    #header .menu li a.link-shopper     { background: none; border:none; padding: 0;}
    
    .menu_mobile						{ width: 60px; height: 60px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; margin: 50px -10px; transition: margin 300ms ease-in-out; top: 15px;}
    .menu_mobile div					{ width: 40px; height: 2px; background: #000; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0;}
    .menu_mobile div:before				{ width: 40px; height: 2px; background: #000; position: absolute; right: 0; top: 8px; content: "";}
    .menu_mobile div:after				{ width: 100%; height: 2px; background: #000; position: absolute; right: 0; top: -8px; content: "";}
    .menu_mobile.active div				{ height: 0;}
    .menu_mobile.active div:before		{ top: 0; transform: rotate(45deg); width: 40px;}
    .menu_mobile.active div:after		{ top: 0; transform: rotate(-45deg);}

    .header_nav 	  					{ width: 110vw; height: calc(100vh + 50px); position: fixed; left: 100vw; top :0; overflow-y: scroll; display: block; z-index: -1; transition: all ease-in-out 400ms; background: #f5eee3; padding: 0 20vw;}

    
    .header_nav::-webkit-scrollbar		{ display: none;}
    .header_nav ul  					{ width: 100%; max-width: 800px; margin: 0 auto; text-align: left; position: relative; z-index: 100; opacity: 0; transform: translateY(40px); transition: all 400ms ease-in-out 0ms;}
    .header_nav ul li 				{ width: 100%; display: block; margin: 0;}
    .header_nav ul li a				{ font-size: 16px; line-height: 54px; ; height: 50px;}
    .header_nav ul li i				{ width:85px;height:41px;display:block;margin-top:-48px;position:absolute;z-index:5;background:url(../images/arrow_down.svg) 50% no-repeat #fff;float:right;border-radius:5px; right: 0;}
    .header_nav ul li i.active 	    { transform: rotate(180deg);}

    .phone_mobile { display: block; width: 60px; height: 60px; background: url("../images/mobile.svg") 50% 50% no-repeat; position: absolute; top: 65px; right: 40px;}
    .phone_mobile .header-tel       {display: block; width: 60px; height: 60px;}

    .menuTopMobile                  { display: block;}

    .header.active 						{ height: 100vh; transition-delay: 0ms;}
    .header_nav.active					{ left: -10vw; transition-delay: 0ms;}
    .header_nav.active ul			    { opacity: 1; transform: translateY(0); transition-delay: 400ms;}
}

@media (max-width:600px) {
    #header .logo img      { margin-top: 40px; }
    #header:before         { height: 130px;}
    
    .phone_mobile          { top: 60px;}
    .menu_mobile           { top: 10px;}
}


/***** footer *****/

footer           { position: relative; z-index: 1; padding-top: 80px; color: #ffffff; margin-top: 80px; width: 100vw; background: #000000;}
footer a.scroll  { width: 30px; height: 30px; position: absolute; border-radius: 50%; background: url("../images/arrow-slider.svg") 50% 50% no-repeat #ffffff; transform: rotate(-90deg); right: 0; top: 0}

.grid-footer     { position: relative; width: 100%; display: grid; grid-template-columns:auto auto auto auto; grid-gap: 0 100px; align-items: start; color: #ffffff; font-size: 14px; margin-top: 60px;}

.grid-footer .item p     { margin-bottom: 20px;}
.grid-footer .item p a   { color:#ffffff;}

.grid-footer .item ul.col-2 { column-count: 2;}
.grid-footer .item ul li a  { color:#ffffff;}

.grid-footer .item .rs             { display: flex; align-items: center;}
.grid-footer .item .rs a.facebook  { display:inline-block; position: relative; background: url("../images/facebook.svg") 50% 50% no-repeat; width:9px; height: 16px; margin-right: 10px;}
.grid-footer .item .rs a.instagram { display:inline-block; position: relative; background: url("../images/instagram.svg") 50% 50% no-repeat; width:20px; height: 20px;}

.footer_bottom   					{ padding: 20px 0; line-height: 0; margin: 90px 0 0 0; width: fit-content;}
.footer_bottom li 					{ display: inline-block; font-size: 11px; line-height: 20px; margin-right: 28px; position: relative;}
.footer_bottom li a 				{ color: #ffffff; border-bottom: 1px solid #00b7e500; }
.footer_bottom li:after				{ width: 1px; height: 9px; content: ""; position: absolute; right: -16px; top: 5px; background: #ffffff;}
.footer_bottom li:last-child:after 	{ display: none;}

.toponweb             { display: block; z-index: 900; position: fixed; right: 0; bottom: -65px; transition: bottom 400ms ease-in-out;}
.toponweb span        { width: auto; height: 60px; display: block; padding: 20px; background: #000000;}
.toponweb img         { width: 74px; height: auto; display: block; margin: 0 auto;}
.toponweb.show        { bottom: 0;}

@media (max-width:1200px) {
    .grid-footer     { grid-template-columns:auto auto; grid-gap: 0 80px;}
    .grid-footer .item:nth-child(3),
    .grid-footer .item:nth-child(4)     { display: none;}
    
}

@media (max-width:800px) {    
    .footer_bottom                { margin: 50px 0 0 20px;}
    .footer_bottom li             { display: block;}
    .footer_bottom li:after       { content: none;}
}

@media (max-width:600px) {   
    footer .titre-40                 { text-align: center; margin-bottom: 0;}
    footer .scroll,
    .grid-footer .item .titre-25     { display: none;}
    .grid-footer                     { grid-template-columns:1fr; margin-top: 40px;}
    .grid-footer .item               { text-align: center;}
    .grid-footer .item p             { margin-bottom: 10px;}
    .grid-footer .item .rs           { justify-content: center; margin-bottom: 30px; margin-top: 30px;}
}