/*@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro:200,400');*/

@font-face {
    font-family: 'VRB_____';
    src: url('../fonts/VRB_____.woff2') format('woff2'),
         url('../fonts/VRB_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRBL____';
    src: url('../fonts/VRBL____.woff2') format('woff2'),
         url('../fonts/VRBL____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRL_____';
    src: url('../fonts/VRL_____.woff2') format('woff2'),
         url('../fonts/VRL_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VRT_____';
    src: url('../fonts/VRT_____.woff2') format('woff2'),
         url('../fonts/VRT_____.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  --blanc: rgb(255,255,255);
  --noir: rgb(50,50,50);
  --bleu: rgb(0,150,210);
  --bleu-clair: rgb(220,245,255);
  --gris: rgb(120,120,120);
  --gris-clair: rgb(200,200,200);
  --gris-fond: rgb(235,235,235);
  --rouge: rgb(130,0,10);
  --jaune: rgb(255,255,210);
}

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

html, body{
  font-size: 110%;
  font-family: 'VRT_____', serif;
  scroll-behavior: smooth;
  background: var(--noir);
  overflow-x: hidden;
}

h1{
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'VRB_____', serif;
  color: var(--gris);
}

h1 >img{
  display: inline-block;
  width: 5%;
  vertical-align: baseline;
  margin-right: 1rem;
}

h3{
  font-weight: 100;
  margin: 0;
}


ul{
  padding: 0;
}

li{
list-style-type: none;
}

img{
  display: block;
  margin: 0 auto;
  width: 100%;
}

figure{
  display: block;
  color: var(--blanc);
}

figcaption {
 padding: .5rem 0;
}

hr{
  border-top: 1.5px solid var(--gris);
}

.encadre{
  padding: 2rem;
  border-radius: .2r;
  margin: 0 0 1rem;
  color: var(--blanc);
}

.encadre > p{
  margin: .5rem 0;
}

.wrapper{
  width: 100vw;
  padding: 2rem 0;
}

.hero {
  background: url('../images/hero.jpg') center;
  background-size: cover;
  padding: 4rem 2rem;
  display: grid;
  /*grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));*/
  grid-template-columns: 40% 60%;
  align-items: center;
}

.hero > * {
  color: white;
}

.hero > img {
width: 80%;
margin-left:1rem;
}

.hero > div > p {
  font-size: 1.5rem;
  font-weight: 600;
}

.hero > div > a {
  margin-top: 1rem;
  padding: .5rem;
  font-family: 'VRB_____', serif;
}

/* Menu****************************************/

.topnav {
  overflow: hidden;
  background-color: #333;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.topnav a {
  color: var(--blanc);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color:var(--gris);
  color: black;
}

.topnav a.active {
  background-color:var(--rouge);
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav {
    display: block;
  }

  .topnav a.active {
    display: inline-block;
    min-height: 46px;
  }

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    display: block;
    text-align: left;
  }
}

/* breweries styles */
.section {
  padding: 2rem;
}

.section > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.section > ul > li {
  border: 1.5px solid var(--gris-clair);
  border-radius: .3em;
}

.section > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
  position: relative;
}

.section > ul > li > figure > img {
  width: 100%;
}

.section > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.section > ul > li > figure > figcaption > h3 {
  color: var(--blanc);
  padding: .75rem;
  font-size: 1.25rem;
}

.section > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: var(--gris-clair);
}

.section > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}

article{
  display: grid;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: 0 auto 2rem;
  gap: 2rem;
  padding: 2rem;
  border: 1.5px solid var(--gris);
  border-radius: .2rem;
}

article > h1{
  grid-column: 1/4;
  font-size: 2rem;
  line-height: 1.8rem;
  text-align: center;
  color: var(--blanc);
}

article> div> h3{
  color: var(--blanc);
}

article > div{
margin: 0 1rem;
color: var(--blanc);
}

.admin{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
}

.admin h1, .admin p, .admin figure{
  color: var(--blanc);
}

.admin > p{
  flex-basis: 48%;
  font-size: 1.2rem;
}

.admin figure{
  width: 48%;
}

.admin img{
  margin: 0;
  border: 2px solid var(--noir);
}

/*article.techniques{
  grid-template-columns: repeat(4, 1fr);
}

article.techniques >h1{
grid-column: 1/5;
}

article.techniques p{
grid-column: 1/4;
grid-row: 2/3;
padding: 1rem;
color: var(--blanc);
background-color: var(--bleu);
}

article.techniques >img{
  width: 35%;
}*/
.chapo{
  grid-row: 2/3;
  justify-self: center;
  font-size: 1.3rem;
  text-align: center;
}

.techniques{
  grid-row: 3/4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
/*.techniques >p{
padding: 1rem;
color: var(--blanc);
background-color: var(--bleu);
}*/

.techniques >img{
  width: 5rem;
  height: auto;
  margin: 0 .8rem;
}

.produits{
  display:flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: var(--blanc);
}

.produits img{
  width: 70%;
  margin: 0;
}

.gris{
  color: var(--gris);
}

/* footer */
footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  background-color: rgb(20,20,30);
  padding: 2rem;
  color: rgba(220,220,220,.7);
}

footer >a{
  font-size: 100%;
  font-family: 'VRT_____', serif;
  color: rgba(220,220,220,.7);
  transition: color .4s;
  text-decoration: none;
}

footer >a:hover{
  color: rgba(220,220,220,1);
  cursor: pointer;
}

.form-style td {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}

input[type=submit], input[type=reset], input[type=button]{
  font-family: 'VRB_____', serif;
  background: rgba(130,0,10,1);
  padding: 8px 15px 8px 15px;
  border: none;
  border-radius: .2rem;
  margin-left: .5rem;
  color: var(--blanc);
  text-transform: uppercase;
  transition: background-color .4s;
}

input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover{
  background: rgba(130,0,10,.6);
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  cursor: pointer;
}

.form-style .field-textarea{
  height: 100px;
}

.form-style input[type=text],
.form-style input[type=email],
textarea{
  font-family: 'VRT_____', serif;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 7px;
  margin: 0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}
/* CONTACY**************************************/
.contact{
  width: 50%;
  margin: 0 auto;
  padding: 2rem 3rem;
  border: 1.5px solid var(--gris);
  border-radius: .3rem;
}

.form-style .long{
  width: 100%;
  font-size: 1rem;
}

.form-style input[type=text]:focus,
.form-style input[type=email]:focus,
.form-style textarea:focus{
  /*-moz-box-shadow: 0 0 8px #88D5E9;
  -webkit-box-shadow: 0 0 8px #88D5E9;
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;*/
}

.error{
  font-family: 'VRB_____', serif;
  color: var(--gris);
}

input[type=button].gros-bouton {
  background-color: rgba(130,0,10,1);
  text-decoration: none;
  font-family: 'VRB_____', serif;
  font-size: 1rem;
  color: var(--blanc);
  margin: .8rem;
  border-radius: .2rem;
  text-align: center;
  display: inline-block;
  transition: background-color .4s;
}

input[type=button].gros-bouton:hover {
  background-color: rgba(130,0,10,.7);
}

@media screen and (max-width: 500px)
{
  html, body{
    font-size: 90%;
  }

  .hero >div >p{
    margin-top: 3rem;
  }

    article{
    display: block;
    width: 80%;
    margin: 0 auto;

  }h1{
    margin-bottom: 1rem;
  }

  h1 > img {
  width: 3rem;
  }

  .contact{
    width: 90%;
    padding: 1rem;
  }
}