@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/playfair-display.woff2');}

html.inverted { background:  hsl(0, 0%, 10%); color: hsl(0, 0%, 100%); }
@media (prefers-color-scheme: dark) {
  html.inverted { background:  hsl(0, 0%, 100%); color: hsl(0, 0%, 10%); }
  html.inverted .vin { background: #CCC;}
}

button,hr,input{overflow:visible; }progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
*, * html, body, html, header, main, footer {  margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; outline:0;}
body {font-family:  Segoe, "Segoe UI", Arial, Helvetica, sans-serif; font-size: 100%; font-weight: 300; line-height: 160%;   overscroll-behavior-y: none;  overscroll-behavior-y: contain;}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; font-weight: 500;  padding: 10px 0; margin: 0;}
h1 {font-family: 'Playfair Display', serif; text-transform: uppercase}
p {padding: 10px 0}
a { text-decoration: none; transition: all .2s ease; color: #000}
a:hover { color: #000; text-decoration: underline}
pre {float: left; width: 100%; font-size: 80%; background: #F1F1F1}
header, main, footer { float: left; width: 100%;  padding: 0; margin: 0 auto; clear: both  }
.content {  width: calc(100% - 80px);  margin: 0 40px; overflow: hidden }

header .content{ border-bottom: 1px solid #DEDEDE; padding: 20px 0}
main .content{ padding: 20px 0; margin: auto;}

footer .content{ border-top: 1px solid #DEDEDE; padding: 20px 0}

header .logo{float: left; width: 100%; text-align: center;}
header .logo h1{ font-size: 100%; text-align: center; padding: 0; margin: 0}
header .logo img{width: 240px; }

header .menu-lang{float: right; width: 10%; text-align: right; margin-top: -20px}
/* cart */
header .cart {position: absolute; top: 40px; right: 40px;text-align: center;  }
header .cart-bouteille { height: 20px;  padding-right:  10px}

img.lazy {opacity: 0;height: auto;filter: blur(3px); filter: brightness(1.25) contrast(.85) grayscale(1);}
img:not(.initial) { transition: all 1s; }
img.initial,img.loaded, img.error { opacity: 1;filter: none }
img:not([src]) {visibility: hidden; }

.intro {float: left; width: 100%; margin: 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: unset; overflow: hidden}
.intro-image {float: left; width: 100%; padding-right: 40px;overflow: hidden}
.intro-image img{float: left; width: 100%;}
.intro-texte {float: left; width: 100%; padding: 20px 40px;}

.nos-vins{ float: left; width: calc(100% + 80px);  margin-left: -40px; display: grid; grid-template-columns:  repeat(4, 1fr); grid-auto-flow: unset; overflow: hidden}
.vin { margin: 20px 40px 20px; position: relative}
.vin-image {float: left; width: calc(100%); margin: 0; background: #f2f0ea; overflow: visible; transition: all .4s ease; box-shadow: inset 0 0 80px rgba(0,0,0,0.2); transform: scale(0.8);}
.vin-image img{position: relative;float: left; width: 100%; margin: 0; padding: 10% 20%; transform: scale(1.6);transition: all .4s ease; z-index: 999  }
/*.noise{ opacity: 0.1; position: absolute;z-index: 0; width: 100%; height: 100%; background: url("img/bg.png") ; background-size: cover; transition: all .4s ease;-webkit-animation:190ms infinite noise;animation:190ms infinite noise;pointer-events:none} */
.noise{ opacity: 0.1; position: absolute;z-index: 0; width: 100%; height: 100%; background:url(https://herdl.com/wp-content/uploads/2020/11/noise-web.webp); background-size:  transition: all .4s ease;-webkit-animation:190ms infinite noise;animation:190ms infinite noise;pointer-events:none} 
@-webkit-keyframes noise{0%,100%{background-position:0 0}10%{background-position:-5% -10%} 20%{background-position:-15% 5%}30%{background-position:7% -25%}40%{background-position:20% 25%}50%{background-position:-25% 10%}60%{background-position:15% 5%}70%{background-position:0 15%}80%{background-position:25% 35%}90%{background-position:-10% 10%}}
@keyframes noise{0%,100%{background-position:0 0}10%{background-position:-5% -10%}20%{background-position:-15% 5%}30%{background-position:7% -25%}40%{background-position:20% 25%}50%{background-position:-25% 10%}60%{background-position:15% 5%}70%{background-position:0 15%}80%{background-position:25% 35%}90%{background-position:-10% 10%}}

.vin-detail {float: left; width: 100%; padding:  0; text-align: center}    

.appelation { display: block; position: absolute; left: 0;  text-orientation: mixed; writing-mode: vertical-rl;transition: all .4s ease;}
.appelation span {  font-size: 90%; padding: 0; margin-top: 40px;  float: left; width: 100%; transform: rotate(180deg); }
.appelation::after { content: ''; position: absolute;	z-index: -1; bottom: 0;	left: 0; width: 1px; height: calc(100% - 40px); margin: 0% 0 0 30px; opacity: 0.3; transform: scale3d(1,0,0); transform-origin: 0% 50%; transition: transform 1s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); }


.vin:hover .appelation::after {	background: #000;opacity: 0.4; transform: scale3d(1,1,1);	transition-timing-function: cubic-bezier(0.2,1,0.3,1);}
.vin:hover .vin-image { background: #EDEDED; box-shadow: inset 0 0 100px rgba(0,0,0,0.2); transform: scale(0.7);}
.vin:hover .vin-image img{transform: scale(2); transform-origin: center;}
.vin:hover .noise{opacity: 0.2;} 

.prix {float: left; width: 100%; text-align: center; margin-top: 5px}
.prix span{font-weight: bold; padding: 5px 15px; background: #EFEFEF; border-radius: 6px; }
.tire-bouchon {float: left; width: 100%; text-align: center; position: absolute; margin-top: -60px; opacity: 0;transition: all 0.2s ease; }
.tire-bouchon img{ width: 30%; }
.vin:hover .tire-bouchon  {opacity: 1; margin-top: -45px; transition: all 1.4s ease;}

.single {}
/* FORM CART */
/*input { appearance: none;  background-color: transparent; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; cursor: inherit; line-height: inherit;}
input {float: left; width: 80px; margin: 0 10px;  padding: 17px 20px; border: 1px solid #000; background: transparent}
button {float: left;  width: 20%;padding: 20px; border: 1px solid #000; background: transparent}
*/

.single-product {float: left; width: 85%; margin: 0;  overflow: hidden; }
.single-product-image {float: left; width: 50%; padding: 0; margin: 0; background: #f2f0ea  ; background-size: cover; box-shadow: inset 0 0 80px rgba(0,0,0,0.2);  transform: scale(0.7);  }
.single-product-image img{position: relative;float: left; width: 100%; margin: 0; padding: 5% 20%; transform: scale(1.6); z-index: 999  }
.single-product-image .noise{ opacity: 0.2;}
/*.single-product-image::after { content: ''; position: absolute;	z-index: -1; bottom: 0;	left: 0; width: 1px; background: #000; height: calc(100% + 40px); margin: 0; opacity: 1; transform: scale3d(1,1,1); transform-origin: 0% 50%; transition: transform 1s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); }
*/
.single-product-description {float: left; width: 50%; padding: 40px 40px;  text-align: center; background: white}
.product-apellation {font-size: 110%; padding-bottom: 10px}
.single-product h1 {font-size: 280%; line-height: 100%}
.product-price {font-size: 110%; padding: 20px 0}

.product-detail {float: left; width: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: unset; overflow: hidden; }
.product-detail-left { padding: 10px 20px; text-align: right}
.product-detail-right { padding: 10px 20px; text-align: left}


.mini-cart {float: left; width: 15%;; background: #EFEFEF}

/*PANIER*/
table,td,th {mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-collapse:collapse !important;}
table td img{border:none; margin: 0 auto; font-size: 10px}
table.shop_table { width: 100%;}
table.shop_table tr td, table.shop_table tr th{float: left; width: calc(100% / 6); padding: 10ox; text-align: center; border-top: 1px solid #EFEFEF; vertical-align: middle}





@media screen and (max-width: 1280px) {
  .intro-image img{transform: scale(2)}
  .nos-vins{  grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 1080px) {
  .intro {grid-template-columns: repeat(1, 1fr);}
  .intro-image {padding: 0}
  .intro-image img{ transform: scale(1)}
}

@media screen and (max-width: 920px) {
  .nos-vins{grid-template-columns: repeat(2, 1fr);}
  .intro-texte { padding: 20px 20px;}

  .single-product { padding-top: 20px}
  .single-product-image { width: 100%; padding: 0px 0px 0; margin: 0;  }
  .single-product-image img{float: left; width: 100%; margin: 0; padding: 0% 15%;   }
  .single-product-description {width: 100%; padding: 20px ; }
  .single-product h1 {font-size: 180%; line-height: 100%}

  .product-description {text-align: justify; }

}

@media screen and (max-width: 600px) {
  .content {  width: calc(100% - 40px);  margin: 0 20px; overflow: hidden }
  main .content{  padding: 0px 0; margin: auto;}
  header .logo h1{float: left; text-align: left}
  header .logo img{width: 200px }
  h1, h2, h3, h4, h5 {  padding:  0; }

  .intro { margin: 20px 0; }
  .intro-texte { padding: 20px 0px;}
  .nos-vins{ width: calc(100% + 20px);  margin-left: -10px;  grid-template-columns: repeat(2, 1fr);}
  .vin { margin: 10px;}
  .vin .vin-image { transform: scale(0.7);}
  .vin .vin-image img{transform: scale(1.8);}
  .vin:hover .vin-image { transform: scale(0.6);}
  .vin-detail h3{font-size: 90%}    
  .appelation span {  font-size: 70%; padding: 0; margin-top: 20px; }
  
  
}