/* defaults */

@font-face {
  font-family: "NHaas";
  src: url("../fonts/NeueHaasUnicaPro-Medium.eot") format("eot"),
    url("../fonts/NeueHaasUnicaPro-Medium.woff") format("woff"),
    url("../fonts/NeueHaasUnicaPro-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "NHaasreg";
  src: url("../fonts/NeueHaasUnicaPro-Regular.eot") format("eot"),
    url("../fonts/NeueHaasUnicaPro-Regular.woff") format("woff"),
    url("../fonts/NeueHaasUnicaPro-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
::-webkit-scrollbar {
display: none;}


html,
body {
 -webkit-hyphens: auto;

 -moz-hyphens: auto;

 -ms-hyphens: auto;

 -o-hyphens: auto;

 hyphens: auto;  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

}
html {
  scroll-behavior: smooth;
}

ol,
ul {
  list-style-position: inside;
  padding: 0;

  text-decoration: none;
}

li {
  text-decoration: none;

}

a {
  text-decoration: none;
}

a { color: inherit; } 

a :hover {
  z-index: 10000000;
}

::selection {
  background-color: red;
  color: white;
}

sup{
  line-height: 0;
}



/* */

body {
  color: red;
  font-family: Nhaas;
  font-size: 15.3px;
  line-height: 1.1;
  margin: 0;
  padding-bottom: 100px;
}


.header{
  position:fixed;
  top:0;
  left:0;
  width:calc(100% - 20px);
  padding:10px;
  background-color: white;
 
}

.aliment{
  cursor: pointer;

}

.wrapper {
  display: grid;
  grid-template-columns: 0.212fr 0.64fr 1fr;
  
}
.wrapper > div{
}

footer{
  position: sticky;
  bottom:0;
  left:0;
  width:calc(100% - 20px);
  padding:10px;
  background-color: white;
  z-index: -999;
}

.gridcontainer {
  background-color: white;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j"
  "a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m"
  "a-Rl6xR-1 a-Rl6xR-1 a-gpJgr-1 a-gpJgr-1 a-r2kwK-1 a-r2kwK-1 a-r2kwK-1 a-r2kwK-1";
  grid-template-columns: 0.64fr 0fr 0fr 0.38fr 1.2fr;
  grid-template-rows: 0.7fr 1fr 0.7fr;
}
.gridcontainer > div {
  /* border: 1px dashed #888; */
}

.containeralternate {
  background-color: white;

  display: grid;
  width: 100%;
  grid-template-areas: "a-Vl6xR-1 a-Vl6xR-1 a-SpJgr-1 a-SpJgr-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1";
  grid-template-columns:  0.64fr 0fr 0fr 0.38fr 1.2fr;
  grid-template-rows: 0fr;
}
.containeralternate > div {
  /* border: 1px dashed #888; */
}

.containeralternatecompo {
  background-color: white;
  display: grid;
  width: 100%;
  grid-template-areas: "a-Vl6xR-1 a-Vl6xR-1 a-SpJgr-1 a-SpJgr-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1";
  grid-template-columns:  0.64fr 0fr 0fr 0.38fr 1.2fr;
  grid-template-rows: 0fr;
}
.containeralternatecompo > div {
  /* border: 1px dashed #888; */
}



.appellation {
  border-top: 1px solid red;
  grid-area: a-Vl6xR-1;
  margin-left: 10px;
  
}
.imagevariantes {
  grid-area: a-SpJgr-1;
  cursor: pointer;

  
}
.imageappelation {
  border-top: 1px solid red;
  grid-area: a-SpJgr-1;

  
}




.appellationtexte {
  border-top: 1px solid red;

  grid-area: a-u2kwK-1;
  margin-right: 10px;
}

.header {
  grid-area: a-57y5j;
}
.whitespace {
  grid-area: a-8325m;
}
.histoire {
  border-top: 1px solid red;

  grid-area: a-Rl6xR-1;
  margin-left: 10px;
}
.imagehistoire {
  grid-area: a-gpJgr-1;
  cursor: pointer;

}

.tatars {
  object-fit: cover;
  width: 75%;

}

.korean {
  object-fit: cover;
  width: 85%;
}

.varia {
  object-fit: cover;
  width: 85%;
}


.slider {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 9);
  backdrop-filter: blur(10px);
  
}

.slider img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-height: 85%;
  object-fit: cover;
  
}




.slider{
  cursor: pointer;
}

#tartaredeboeuf{
  width: 50%;
}

#femmetatars{
  width: 30%;

}

#beauplan{
  width: 35%;

}


#asie{
  width: 60%;

}

#tartaredesaumon{
  width: 40%;

}

#tartaredecourgette{
  width: 60%;

}

#tartaredecanard{
  width: 40%;

}

#tartareaubergine{
  width: 50%;

}

#tartaremaquereau{
  width: 30%;

}


.histoiretexte{
  border-top: 1px solid red;

  grid-area: a-r2kwK-1;
  margin-right: 10px;
  

}

.spacer{
  padding: 5px;
  background-color: white;
}



/* Partie Tartare Custom */
.wrappercategorie {
  background-color: white;
  padding-top: 15px;
  
  line-height: 1.1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);


}

.refresh{
  cursor: pointer;
margin-left:-3px;
  
}


.box {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.box.one {
  
  margin-left: 10px;
  border-right: 1px solid red;
}

.box.two {
 
  padding-left: 5px;
  border-right: 1px solid red;
  padding-bottom: 10px;

}

.box.three {

  padding-left: 5px;
  margin-right: 10px;
}

.categorie {
  margin-right: 20px;
  line-height: 1.15;
  border-bottom: 1px solid red;
}

.flexliste{
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  padding-right: 20px;

}





button{
  background-color: white;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid red;
  cursor: pointer;
  padding:0;
  margin-top: 2px;
  outline: none;
  pointer-events: all;

}



  
  .active{
    background-color: red;
    outline: none;

  }

  button.flexliste.active{
    background-color: red;
    outline: none;

  }
  .hiddenli{
   display: none;
  }
  .aliment {
    color: red;
    line-height: 1.2;
    padding-left: 2px;
  }
  
  .hidden {
    visibility: hidden;
  }
  
  .aliment.selected {
    color: red;
    
  }

  .container {
    display: grid;
    background-color: white;
    width: 100%;
    height: 70vh;
    grid-template-areas: "left right right";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0fr;
  }
  .container > div {
    /* border: 1px dashed #888; */
  }
  
  .left {
    grid-area: left;
    padding-left: 10px;
  }
  .right {
    grid-area: right;
  }

  .instructions {
    hyphens: none;
    line-height: 1.1;
    font-size: 30px;
    padding-right:10px;
  }

  .instructions2{
    display: none;
  }
  
  #recipeWrapper {
    font-size: 30px;
    background-color: white;
    padding-right: 10px;
   
  }

  .overlays {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    opacity: 0.90;
}

.overlay img {
    width: 100%;
}

#overlay-12{
  width: 45%;
}

#overlay-7{
  width: 55%;
}

#overlay-14{
  width: 40%;
}

#overlay-32{
  width: 60%;
}

#overlay-18{
  width: 50%;
}


#overlay-24{
  width: 60%;
}

#overlay-33{
  width: 45%;
}

#overlay-37{
  width: 35%;
}

#overlay-29{
  width: 50%;
}

#overlay-28{
  width: 50%;
}


#overlay-39{
  width: 43%;
}

#overlay-40{
  width: 43%;
}

#overlay-41{
  width: 17%;
}

#overlay-42{
  width: 15%;
}

#overlay-43{
  width: 50%;
}

#overlay-44{
  width: 25%;
}

#overlay-46{
  width: 50%;
}

#overlay-47{
  width: 40%;
}

#overlay-49{
  width: 45%;
}

#overlay-53{
  width: 55%;
}

#overlay-54{
  width: 55%;
}

#overlay-55{
  width: 50%;
}


#overlay-56{
  width: 50%;
}


.legende{
  position: absolute;
  text-align: center;
  bottom: 1vh;
  left: 0;
  width: 100%;
  z-index: 9999999;

}

.aliment:hover{
  background-color: red;
  color: white;
}




/* Responsive */


@media only screen and (max-width:700px){



.wrapper{
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "a-A6DRW a-57yBV"
  "a-pZY4B a-pZY4B";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  font-size: 12.5px;
}

.apropos{
  grid-area: a-A6DRW;
}
.custom{
  grid-area: a-57yBV;
}

.intro{
  padding-top: 5px;
  grid-area: a-pZY4B;

}



.header{
  grid-area: a-08RwO-1;
}


.gridcontainer {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "a-08RwO-1 a-08RwO-1"
  "a-mqZ18-1 a-mqZ18-1"
  "a-BrBVQ-0 a-BrBVQ-1"
  "a-832GO-1-1 a-832GO-1-1";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.gridcontainer > div {
  /* border: 1px dashed #888; */
}


.whitespace{
  grid-area: a-mqZ18-1;
}

.histoire{
  border-top: 1px solid red;
  grid-area: a-BrBVQ-0;
  font-size: 12.5px;
  margin: 0;
  margin-left: 10px;



}

.imagehistoire{
  border-top: 1px solid red;
  margin-right: 10px;
  grid-area: a-BrBVQ-1;
display: flex;
justify-content: flex-end;

}

.histoiretexte{
  grid-area: a-832GO-1-1;
    font-size: 12.5px;
  margin: 0;
  border-top: none;

  margin-left: 10px;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.containeralternate {
  display: grid;
  width: 100%;
  grid-template-areas: "a-D6DRW a-A6DRW"
  "a-k2RYB a-k2RYB";
  grid-template-columns: 1fr 1fr;
}
.containeralternate > div {
  /* border: 1px dashed #888; */
}

.containeralternatecompo {
  display: grid;
  width: 100%;
  grid-template-areas: "a-D6DRW a-A6DRW"
  "a-k2RYB a-k2RYB";
  grid-template-columns: 1fr 1fr;
}
.containeralternate > div {
  /* border: 1px dashed #888; */
}

.appellation{
  
  grid-area: a-D6DRW;
  font-size: 12.5px;
  margin-left: 10px;

}
.imageappelation {
  grid-area: a-A6DRW;
  margin: 0;
  display: flex;
justify-content: flex-end;
padding-right: 10px;
margin-right: 10px;

  

}



.imagevariantes {
  border-top: 1px solid red;

  grid-area: a-A6DRW;
  margin: 0;
  display: flex;
justify-content: flex-end;
margin-right: 10px;
  

}
.appellationtexte {
  grid-area: a-k2RYB;
  margin: 0;
  font-size: 12.5px;
  padding-top: 10px;
  border-top: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  

}

.wrappercategorie{
  display: block;
  font-size: 17px;
}

.box.one{
  margin-left: 10px;
  margin-right: 10px;
  padding: 0px;
  padding-bottom: 10px;
  border-right: none;
}

.categorie {
  margin-right: 0px;
  line-height: 1.15;
  border-bottom: 1px solid red;
}

button{
  background-color: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid red;
  cursor: pointer;
  padding:0;
  outline: none;
  pointer-events: all;
}

.flexliste{
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  padding-right: 3px;

}


.box.two{
  margin-top: -1px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0px;
  padding-bottom: 15px;
  border-right: none;
}

.box.three{
  margin-top: -1px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0px;
  padding-bottom: 5px;
  border-right: none; 
}

 
.container{
  display: block;
  
}

.instructions{
display: none;
}

.instructions2{
  display: block;
  padding-left: 5px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 25px;
  background-color: white;
 }
.left{
  font-size: 17px;
}


li{
  font-size: 17px;
  margin: 0;
  padding: 0;

}

ol{
  padding-left: 10px;

}


footer{
}

.slider img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}

#tartaredeboeuf{
  width: 80%;
}

#femmetatars{
  width: 50%;

}

#beauplan{
  width: 60%;

}


#asie{
  width: 80%;

}

#tartaredesaumon{
  width: 70%;

}

#tartaredecourgette{
  width: 90%;

}

#tartaredecanard{
  width: 70%;

}

#tartareaubergine{
  width: 80%;

}

#tartaremaquereau{
  width: 60%;

}



}


@media only screen and (min-width:700px) and (max-width:945px){

  .gridcontainer {
    background-color: white;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j a-57y5j"
    "a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m a-8325m"
    "a-Rl6xR-1 a-Rl6xR-1 a-gpJgr-1 a-gpJgr-1 a-r2kwK-1 a-r2kwK-1 a-r2kwK-1 a-r2kwK-1";
    grid-template-columns: 0.3fr 0fr 0fr 0.38fr 1.2fr;
    grid-template-rows: 0.7fr 1fr 0.7fr;
  }
  .gridcontainer > div {
    /* border: 1px dashed #888; */
  }

  .containeralternate {
    background-color: white;
  
    display: grid;
    width: 100%;
    grid-template-areas: "a-Vl6xR-1 a-Vl6xR-1 a-SpJgr-1 a-SpJgr-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1";
    grid-template-columns:  0.3fr 0fr 0fr 0.38fr 1.2fr;
    grid-template-rows: 0fr;
  }
  .containeralternate > div {
    /* border: 1px dashed #888; */
  }
  
  .containeralternatecompo {
    background-color: white;
    display: grid;
    width: 100%;
    grid-template-areas: "a-Vl6xR-1 a-Vl6xR-1 a-SpJgr-1 a-SpJgr-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1 a-u2kwK-1";
    grid-template-columns:  0.3fr 0fr 0fr 0.38fr 1.2fr;
    grid-template-rows: 0fr;
  }
  .containeralternatecompo > div {
    /* border: 1px dashed #888; */
  }
  
  .instructions{
    font-size: 20px;
  }


  #recipeWrapper{
    font-size: 20px;
  }


}




@media only screen and (min-width:1550px){

 body{
   font-size: 16px;
 }

 .instructions{
   font-size: 33px;
 }


#recipeWrapper{
  font-size: 33px;

}

}


@media only screen and (min-width:1800px){

  body{
    font-size: 18px;
  }
 
  .instructions{
    font-size: 35px;
  }
 
 
 #recipeWrapper{
   font-size: 35px;
 
 }
 
 }