html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{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}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}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,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[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}template{display:none}[hidden]{display:none}
*, * html, body, html{ -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; margin: 0; padding: 0}
::selection { color: white; background: black;}
/*@font-face { font-family: 'Untitled Sans'; font-weight: 400; font-display: swap;  src: url(fonts/UntitledSansWeb-Regular.woff) format('woff');}
@font-face { font-family: 'Untitled Sans Medium'; font-weight: 500; font-display: swap;  src: url(fonts/UntitledSansWeb-Medium.woff) format('woff');}*/
@font-face { font-family: 'Belove'; font-weight: 500;src: url('fonts/BeloveRegular.woff2') format('woff2'), url('fonts/BeloveRegular.woff') format('woff'); }

:root{
  --link_color : black;
  --link_border_color : rgba(0,0,0,0.6);
  --menu_link_border_color : rgba(0,0,0,1);
  --bg-color : radial-gradient(circle, rgba(247,247,247,1) 80%, rgba(221,213,204,1) 100%);/*#F7F7EF #F4F4F4 /*#e6ebef*/;
  /*fonts*/
  --fonts-untitled: -apple-system, system-ui, sans-serif;
  --font-size : 110%;
  /* Burger */
  --btn-nav-color : #000;
  /* cursor */
  --c-bg: #872b31;
  --c-size: 16px;
    /*tpl*/
  --container-margin : 40px;
}

body{font-family: var(--fonts-untitled); font-size: var(--font-size); background: var(--bg-color); cursor: default}
.container{ position: relative; display: grid; grid-template-areas: "header" "main" "footer" ; min-height: 100vh;  margin: auto;  overflow: hidden}
header, main, footer{ position: relative; margin: 0;  display: block }
header{grid-area: header;}
main{grid-area: main;  }
footer{grid-area: footer; }
.header-content { position: relative; max-width: 100%; margin: auto }
 .footer-content, .main-content { position: relative; max-width: 1920px; margin: auto }

/* WYSIWYG */
h1, h2, h3, h4, h5 {font-weight: 500 ; display: block; margin-block-start: 0.4em;  margin-block-end: 0.2em;  margin-inline-start: 0px;  margin-inline-end: 0px;}
h1 {
    font-size: 1.6em;
}
h2 {
    display: block;
    font-size: 1.4em;
}

h3 {font-family: var(--fonts-untitled);font-size: 1em;line-height: 1.4em; }

a{ position: relative; color: var(--link_color); text-decoration: none; margin: 0}
.link a::after { position: absolute; float: left;  left: 0; content: ''; width: 100%; height: 1px; padding: 18px 0 0; border-bottom: 1px solid var(--link_border_color); background: transparent; transform: scaleX(0.6); transition: transform 0.4s; }
.link a:hover::after{transform: scaleX(1);}

ul.list-classic{ display: grid; grid-template-columns: column;margin: 20px 0; width: 100%}
ul.list-classic li{ float: left; width: 100%; margin: 5px 0 5px 15px}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 20px;
}

.uppercase {text-transform: uppercase}
.small {font-size: 80% }
/* TT Style */
.cursor { z-index: 9999; top: 50%;  left: 50%;  position: fixed; 	display: block; width: var(--c-size);  height: var(--c-size);  margin-top: calc(var(--c-size) / -2);  margin-left: calc(var(--c-size) / -2);  border-radius: 0%;   pointer-events: none; transition: transform 0.2s ease, background-color 0.6s ease, opacity 0.2s ease; overflow: visible;  }
.cursor { background-color:var(--c-bg); opacity: 1;  mix-blend-mode: difference; filter:invert(); transform: scale(1); cursor: pointer}
.cursor.hover { opacity:1; transform: scale(2);/*background-color:transparent;*/ box-shadow: 0px 0px 0.5px var(--c-bg);   }
.cursor.hide {opacity: 0;}
.cursor.sleep {transform: scale(0.1);}
.cursor.load {transform: scale(3);}
.cursor.down { opacity: 1; transform: scale(3); } 

/* Logo */
.logo{ text-align: center; margin: 20px 0;}
.logo a{ text-decoration: none}
.logo img{ width: 250px}

/* Header */
.menu { position: absolute; display: flex; justify-content: flex-end; float: right; width: 700px; top: 30px; right: 40px; }
.menu ul.nav{ float: left; width: 100% }
.menu ul.nav li{float: left; padding: 10px; width: calc(( 100%  / 4) - 10px); text-align: center ; background: #EFEFEF; margin: 5px}

.menu a::after { padding: 20px 0 0; border-bottom: 1px solid var(--menu_link_border_color); }
.menu a.active::after{ transform: scaleX(1);}

/* MENU BURGER */ 
#menu-burger {display: none; z-index: 8888;}
.btn-nav-container {position:absolute;top:0;right:40px;width:40px;height:40px; margin-top: 50px;cursor:pointer;background:transparent;border:none;outline:none; z-index: 9999}
.btn-nav {width:100%; height: 2px; position:relative; background:var(--btn-nav-color); top:0; transition:all ease 0.2s;  }
.btn-nav:before, .btn-nav:after {content:'';position:absolute;left:0; background: var(--btn-nav-color); height:100%;transition:all ease 0.3s; z-index: 9999}
.btn-nav:before {top:-8px;width:70%; margin:0 15%}
.btn-nav:after {top:8px;width:70%;margin:0 15%}
.btn-nav-container:hover .btn-nav:before, .btn-nav-container:hover .btn-nav:after {width:100%; }
.btn-nav-container.close-menu .btn-nav {transform:rotate(-45deg); z-index: 9999; background: white}
.btn-nav-container.close-menu .btn-nav:after {opacity:0;transition:all ease 0.2s;}
.btn-nav-container.close-menu .btn-nav:before {top:0;transform:rotate(90deg);width:100%;transition:all ease 0.2s;background: white}

.float-nav {position:fixed;top:0;display:none;width:100%;height:100%; z-index: 8888 }
.float-nav .bg1, .float-nav .bg2 {position:absolute; width:100%; height:100vh;background: rgba(0,0,0,0.9) ;top:0; left:100%;transition:all 0.2s ease 0.2s;}
.float-nav .bg2 {background: rgba(0,0,0,1); transition-delay:0s;}
.float-nav.active .bg1, .float-nav.active .bg2  {left:0; transition:all 0.7s ease 0.3s;}
.float-nav.active .bg1 {transition-delay:0.1s;}
.float-nav.active .bg2 {transition-delay:0.3s;}

.float-nav .menu-container {position:absolute;top:0;left:0;width:100%;height:100%;display:flex; flex-direction:column; align-items:center;justify-content:top;max-width:none; z-index: 8888}
.float-nav.active ul {opacity:1;transition-delay: 0.5s;}
.float-nav ul {display:flex; flex-direction:column; max-height:100vh; opacity:0; transition: opacity 0.2s ease 0s; padding: 40px 0;}
.float-nav ul li img{filter: invert()}
.float-nav .menu-logo a::after{border-bottom: none}
.float-nav ul li a::after{border-bottom: none}

.float-nav ul li{list-style:none;}
.float-nav ul li a {text-decoration:none; text-transform:uppercase; color: white; font-weight: 400; text-align: center; display: block;  padding: 20px;}



/* Main */
.main-container {margin: 40px var(--container-margin); }

.grid-galerie {float: left; width: 100%;   transition: all .6s ease; margin-bottom: 40px }
.grid-galerie-post, .grid-galerie-post-archives {width: 100%; display: grid; grid-column: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center;  grid-gap: 60px;}
/*.grid-galerie-post-archives { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;  grid-gap: 40px;}*/

.grid{ transition: all .6s ease; position: relative}

.grid-info { padding: 10px 20px 30px; margin-bottom: -10px;  background: rgba(255,255,255,1); filter: drop-shadow(1px -2px 2px rgba(0, 0, 0, 0.1));  }
.grid-titre { text-align: center; padding: 20px 0; text-transform: uppercase;}
.jmoins {position: absolute; background: #DCB253; color: white; border-radius: 4px; padding: 5px 0px; float: left; width: 50px; margin: 10px calc(50% - 50px); font-size: 80%}
.grid-date { text-align: center; padding: 20px 0 0px;  border-top: 1px dotted #CCC; }
.grid-date .date { padding: 0 0 10px; font-weight: bold; }
.grid-date .lieu { color: #444444}
.grid-date .lieu .uppercase{}

.grid-image{ position: relative; float: left; width: 100%; padding: 10px; background: white; filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1)); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 20px -20px;  }
/*.grid-image:before{ position: absolute; margin: -24px auto 0; content: ''; width: 100%; height: 26px; background: url('img/clip.svg') top no-repeat;  z-index: 600}*/
.grid-image img{ float: left; width: 100%; height: 100%;  margin: 0; padding: 0;   }

.grid-content { padding: 20px}
.matiere {float: left; width: 100%; position: absolute; text-align: right; z-index: 200 }
.categorie{float: left; margin-top: -15px;width: 30px; height: 30px; border-radius: 0px; margin-left: 10px;  overflow: hidden;}
.sep-archive {float: left; width: 100%; text-align: center; padding: 20px 0; margin-bottom: 40px }


/**/
.vins-terroirs {float: left; width: 100%;  }
.grid-vin-image-background{ opacity: 1; position: absolute; z-index: 0; width: 100%; height: 50%; margin-top: 35%;  transition: all .4s ease;  background: linear-gradient(180deg, #DBDBDB 0%, #DBDBDB 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%);} 
.grid-vin-image {position: relative; float: left; width: 100%; padding: 0; }
.grid-vin-image img{ float: left; width: 70%; height: 100%;  margin: 0 15%; padding: 0;   }
.grid-vin-info { padding: 10px 20px 30px;   }
.grid-vin-titre { text-align: center; padding: 20px 0; text-transform: capitalize;}
.grid-vin-titre h3{font-size: 110%}
.grid-vin-titre .appellation {text-transform: uppercase; font-size: 90%}

/* Presse */
.grid-galerie-presse {width: 100%; display: grid; grid-column: auto; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: top;  grid-gap: 1px;}
.info-journal {text-align: center}
.logo-journal {float: left; width: 100%; margin: auto}
.logo-journal img{float: left; width: 100px; margin: auto calc( 50% - 50px)}

/* Single Vins */

.grid-single-vins {float: left; width: 100%;   transition: all .6s ease; margin-bottom: 40px; }
.grid-single-vins-image-background { position: absolute; z-index: 0; float: left; width: calc(100% - 80px); height: 100vh;  background:  url('/images-domaine-richaud/papier.png') 0 600px no-repeat, linear-gradient(180deg, #DBDBDB 0%, #DBDBDB 10%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%); background-size: contain }
.grid-single-vins-post {width: 100%; display: grid; grid-column: auto; grid-template-columns: calc(100% / 3) calc(200% /3) ; align-items: top;  grid-gap: 40px;}
.grid-single-vins-image{ position: relative; float: left;  width: calc(100% - 0px);   }
.grid-single-vins-image img{ float: left;  width: 400px; margin: 0px calc(50% - 200px) 0;  }

.grid-single-vins-fiche { position: relative; float: left; width: calc(100% - 80px); margin-top: 40px; padding: 40px 40px 80px; text-align: center;  background: linear-gradient(180deg, #FFF 0%, #FFF 60%, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%); filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1)); }
.grid-single-vins-fiche h2{ font-size: 3em;line-height: 1.4em; }
.grid-single-vins-fiche h3{ font-size: 2em;line-height: 1.4em; text-transform:capitalize}

.appelation { font-family: "Times New Roman", "serif"; font-size: 1em;line-height: 1.4em;}
.wp-block-quote {float: left; width: 100%; font-family: 'Belove'; font-size: 3em; margin-top: -40px; text-transform: capitalize}
.grid-single-vins-fiche p{ line-height: 1.4em; }


/*.wp-block-embed__wrapper {position: relative; float: left;  width: 100%; height: 100%; padding: 20px 0;  margin: 0 auto; border: 1px solid #000}
.wp-block-embed__wrapper iframe {position: relative; float: left;  width: 100%; height: auto; }*/
hr.wp-block-separator {float: left; width: 100%; height: 40px; margin-top: 40px; border: none}
hr.wp-block-separator::before{position: absolute; margin: 0 0 0 -40%; content: ''; width: 80%; height: 1px; background: #CCC;  z-index: 600}

figure.wp-block-embed{float: left; width: 80%; margin: 0 10% 40px}
.wp-block-embed__wrapper {position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto;  box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 20px -20px; }
.wp-block-embed__wrapper iframe{position: absolute; margin-left: -50%; top: 0%; width: 100%; height: 100%; }

/* Footer */
footer {  color: white;  background:  url('/images-domaine-richaud/paper.png') top center no-repeat;background-size: cover; margin: 0; padding: 0;  z-index: 10;}
.footer-content{ text-align: center; padding: 160px 0 20px 0;}
.footer-content .logo img{ zoom: 80%;}

@media screen and (max-width:1536px) {   

  .grid-galerie-post { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/*@media screen and (max-width:1280px) {   
  .logo img{ width: 210px}
  .footer-content .logo img{ width: 180px} 
  .menu {display: none}
  #menu-burger {display: block  }
  .grid-galerie-post { grid-template-columns: 1fr 1fr 1fr; }
}*/
@media screen and (max-width:860px) {   
  :root{--container-margin : 20px;}
  .grid-galerie-post {  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 20px}
}


@media screen and (max-width:767px) { 
  .logo img{ width: 180px}
  .menu {display: none}
  #menu-burger {display: block  }
  .grid-galerie-post { grid-column: auto; grid-template-columns: 1fr 1fr;}
}

@media only screen and (min-device-width: 320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait),only screen and (min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait),screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:2) and (orientation:portrait),screen and (device-width:320px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait),screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:portrait),screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait),screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait),screen and (device-width:360px) and (device-height:640px) and (-webkit-device-pixel-ratio:4) and (orientation:portrait),screen and (device-width:384px) and (device-height:592px) and (-webkit-device-pixel-ratio:2) and (orientation:portrait),screen and (device-width:360px) and (device-height:592px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait),screen and (device-width:360px) and (device-height:592px) and (-webkit-device-pixel-ratio:4) and (orientation:portrait),screen and (device-width:480px) and (device-height:800px) and (orientation:portrait),only screen and (max-width:480px) {
  :root{--container-margin: 10px;--font-size : 60%;}
  .logo img{ width: 140px}
  
  .grid-info { padding: 10px 20px ; margin-bottom: -10px;    }
  .grid-titre {  padding: 0 0 20px 0; }
  .jmoins { float: left; width: 50px; margin: 10px calc(50% - 50px); }
  .grid-galerie-post { grid-template-columns: 1fr 1fr;  grid-gap: 10px}
  .grid-image{  padding: 10px; }


.grid-vin-image { padding: 0 20px;}
.grid-vin-info {   }
.grid-vin-titre { }

.grid-single-vins-post { grid-template-columns: 1fr ;   grid-gap: 10px;}
.grid-single-vins-image{ position: relative; float: left;  width:100%;   }
.grid-single-vins-image img{  width: 70%; margin: 0 15% ;  }

.grid-single-vins-fiche { position: relative; float: left; width: calc(100%); padding: 0px; text-align: center; background: #FFF;  }
.grid-single-vins-fiche h2{ font-size: 3em;line-height: 1.4em; }
.grid-single-vins-fiche h3{ font-size: 2em;line-height: 1.4em; text-transform:capitalize}

.appelation { font-family: "Times New Roman", "serif"; font-size: 1em;line-height: 1.4em;}
.wp-block-quote {float: left; width: 100%; font-family: 'Belove'; font-size: 3em; margin-top: -40px; text-transform: capitalize}
.grid-single-vins-fiche p{ line-height: 1.4em}


  .footer-content{ padding: 80px 0 10px 0;}


}
