:root {
  --base-color: #FF3C1F;
  --second-color: #f2face;
}

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1000;
  content: url(../images/01-legume-base/ail.png) url(../images/01-legume-base/aubergine.png) url(../images/01-legume-base/basilic.png) url(../images/01-legume-base/courgette-j.png) url(../images/01-legume-base/courgette-v.png) url(../images/01-legume-base/huile-olive.png) url(../images/01-legume-base/laurier.png) url(../images/01-legume-base/oignon.png) url(../images/01-legume-base/olive.png) url(../images/01-legume-base/origan.png) url(../images/01-legume-base/poivre.png) url(../images/01-legume-base/poivron.png) url(../images/01-legume-base/thym.png) url(../images/01-legume-base/tomate.png) url(../images/02-legume-lave/aubergine-lave.png) url(../images/02-legume-lave/courgette-j-lave.png) url(../images/02-legume-lave/courgette-v-lave.png) url(../images/02-legume-lave/oignon-lave.png) url(../images/02-legume-lave/olive-lave.png) url(../images/02-legume-lave/poivron-lave.png) url(../images/02-legume-lave/tomate-lave.png) url(../images/03-legume-coupe/ail-coupe.png) url(../images/03-legume-coupe/aubergine-coupe.png) url(../images/03-legume-coupe/courgette-j-coupe.png) url(../images/03-legume-coupe/courgette-v-coupe.png) url(../images/03-legume-coupe/oignon-coupe.png) url(../images/03-legume-coupe/olive-coupe.png) url(../images/03-legume-coupe/poivron-coupe.png) url(../images/03-legume-coupe/tomate-coupe.png) url(../images/04-legume-dore/ail-dore.png) url(../images/04-legume-dore/aubergine-dore.png) url(../images/04-legume-dore/courgette-j-dore.png) url(../images/04-legume-dore/courgette-v-dore.png) url(../images/04-legume-dore/huile-dore.png) url(../images/04-legume-dore/oignon-dore.png) url(../images/04-legume-dore/olive-dore.png) url(../images/04-legume-dore/poivron-dore.png) url(../images/04-legume-dore/tomate-dore.png) url(../images/05-legume-epice/laurier-epice.png) url(../images/05-legume-epice/origan-epice.png) url(../images/05-legume-epice/poivre-epice.png) url(../images/05-legume-epice/thym-epice.png) url(../images/06-legume-mijote/ail-mijote.png) url(../images/06-legume-mijote/aubergine-mijote.png) url(../images/06-legume-mijote/basilic-mijote.png) url(../images/06-legume-mijote/courgette-j-mijote.png) url(../images/06-legume-mijote/courgette-v-mijote.png) url(../images/06-legume-mijote/laurier-mijote.png) url(../images/06-legume-mijote/oignon-mijote.png) url(../images/06-legume-mijote/olive-mijote.png) url(../images/06-legume-mijote/origan-mijote.png) url(../images/06-legume-mijote/poivre-mijote.png) url(../images/06-legume-mijote/poivron-mijote.png) url(../images/06-legume-mijote/thym-mijote.png) url(../images/06-legume-mijote/tomate-mijote.png) url(../images/07-legume-servi/ail-servi.png) url(../images/07-legume-servi/aubergine-servi.png) url(../images/07-legume-servi/basilic-servi.png) url(../images/07-legume-servi/courgette-j-servi.png) url(../images/07-legume-servi/courgette-v-servi.png) url(../images/07-legume-servi/laurier-servi.png) url(../images/07-legume-servi/oignon-servi.png) url(../images/07-legume-servi/olive-servi.png) url(../images/07-legume-servi/origan-servi.png) url(../images/07-legume-servi/poivre-servi.png) url(../images/07-legume-servi/poivron-servi.png) url(../images/07-legume-servi/thym-servi.png) url(../images/07-legume-servi/tomate-servi.png) url(../images/07-legume-servi/assiette.png);
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--second-color);
  font-family: gaya;
  color: var(--second-color);
  font-size: 4vw;
  text-transform: uppercase;
}

header {
  width: calc(100vw - 2 * 2vh);
  height: 12.5vh;
}

main {
  width: calc(100vw - 2 * 2vh);
  height: 71vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

footer {
  width: calc(100vw - 2 * 2vh);
  height: 12.5vh;
}

nav {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.nav-container {
  cursor: pointer;
}

header nav div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 25px 25px;
  height: 100%;
  transition-duration: 0.2s;
  cursor: pointer;
}

.nav-histoire {
  background-color: var(--second-color);
  width: calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh);
  color: var(--base-color);
  border: solid 5px var(--base-color);
  border-top: 0px;
}

.nav-rata {
  background-color: var(--second-color);
  border: solid 5px var(--base-color);
  color: var(--base-color);
  width: calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) / 2 - 2vh / 2);
  border-top: 0px;
}

.nav-accueil {
  background-color: var(--second-color);
  color: var(--base-color);
  border: solid 5px var(--base-color);
  width: calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) / 2 - 2vh / 2);
  border-top: 0px;
}

.nav-container:hover .nav-histoire {
  transform: translate(0, -30%);
}

.nav-container:hover .nav-rata {
  transform: translate(0, -30%);
}

.nav-container:hover .nav-accueil {
  transform: translate(0, -30%);
}

main .first-section, main .second-section {
  height: 100%;
  border-radius: 100px;
}

.first-section {
  font-size: 2.6666666667vw;
  width: calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh);
  background-color: var(--base-color);
}

.container-accueil {
  height: 100%;
  width: 100%;
}

.second-section {
  width: calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh);
}

footer nav div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.nav-cuisinons {
  background-color: var(--second-color);
  color: var(--base-color);
  border: solid 5px var(--base-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition-duration: 0.2s;
  width: calc(100vw - 2 * 2vh);
  border-radius: 25px 25px 0 0;
}

.nav-container:hover .nav-cuisinons {
  transform: translate(0, 30%);
}

.nav-active {
  box-sizing: border-box;
  background: var(--base-color);
  color: var(--second-color);
  box-sizing: border-box;
  border: var(--base-color) solid;
  border-width: 0 5px 5px 5px;
  transform: none !important;
}

.first-section {
  color: var(--base-color);
  -webkit-text-stroke: 2px var(--second-color);
  position: relative;
}

.container-accueil div {
  display: inline-block;
  position: absolute;
  text-align: center;
}

.container-accueil div:hover {
  color: var(--second-color);
  -webkit-text-stroke: none;
}

.button-olive {
  top: 50%;
  left: 50%;
  transform: rotate(30deg);
}

.button-laurier {
  top: 70%;
  left: 20%;
  transform: rotate(25deg);
}

.button-poivron {
  position: absolute;
  top: 5%;
  left: 30%;
  transform: rotate(-10deg);
}

.second-recette div {
  transform: rotate(1turn);
  opacity: 0;
}

.button-origan {
  position: absolute;
  top: 45%;
  left: 20%;
  transform: rotate(-20deg);
}

.button-thym {
  position: absolute;
  top: 7%;
  left: 70%;
  transform: rotate(25deg);
}

.button-tomate {
  position: absolute;
  top: 60%;
  left: 30%;
  transform: rotate(10deg);
}

.button-aubergine {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: rotate(0deg);
}

.button-poivre {
  position: absolute;
  top: 80%;
  left: 3%;
  transform: rotate(-30deg);
}

.button-ail {
  position: absolute;
  top: 60%;
  left: 3%;
  transform: rotate(-40deg);
}

.button-oignon {
  position: absolute;
  top: 25%;
  left: 3%;
  transform: rotate(-65deg);
}

.button-courgette-j {
  position: absolute;
  top: 35%;
  left: 25%;
  transform: rotate(20deg);
}

.button-courgette-v {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: rotate(-10deg);
}

.button-basilic {
  position: absolute;
  top: 65%;
  left: 65%;
  transform: rotate(0deg);
}

.second-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-accueil div {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  cursor: pointer;
}

.rose-aubergine:before,
.rose-aubergine:after,
.rose-aubergine {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/aubergine.png);
}

.rose-aubergine::after {
  animation: animation1 3s -4s infinite ease both alternate;
}

.rose-aubergine::before {
  animation: animation2 3s -4s infinite ease both alternate;
}

.rose-oignon:before,
.rose-oignon:after,
.rose-oignon {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/oignon.png);
}

.rose-oignon::after {
  animation: animation1 3s -4s infinite ease both alternate;
}

.rose-oignon::before {
  animation: animation2 3s -4s infinite ease both alternate;
}

.rose-olive:before,
.rose-olive:after,
.rose-olive {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/olive.png);
}

.rose-olive::after {
  animation: animation1 2s -4s infinite ease both alternate;
}

.rose-oignon::before {
  animation: animation2 2s -4s infinite ease both alternate;
}

.rose-laurier:before,
.rose-laurier:after,
.rose-laurier {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/laurier.png);
}

.rose-laurier::after {
  animation: animation1 6s -4s infinite ease both alternate;
}

.rose-laurier::before {
  animation: animation2 6s -4s infinite ease both alternate;
}

.rose-poivron:before,
.rose-poivron:after,
.rose-poivron {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/poivron.png);
}

.rose-poivron::after {
  animation: animation1 3s -3s infinite ease both alternate;
}

.rose-poivron::before {
  animation: animation2 3s -3s infinite ease both alternate;
}

.rose-origan:before,
.rose-origan:after,
.rose-origan {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/origan.png);
}

.rose-origan::after {
  animation: animation1 3s -3s infinite ease both alternate;
}

.rose-origan::before {
  animation: animation2 3s -3s infinite ease both alternate;
}

.rose-thym:before,
.rose-thym:after,
.rose-thym {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/thym.png);
}

.rose-thym::after {
  animation: animation1 3s -3s infinite ease both alternate;
}

.rose-thym::before {
  animation: animation2 3s -3s infinite ease both alternate;
}

.rose-poivre:before,
.rose-poivre:after,
.rose-poivre {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/poivre.png);
}

.rose-poivre::after {
  animation: animation1 3s -6s infinite ease both alternate;
}

.rose-poivre::before {
  animation: animation2 3s -6s infinite ease both alternate;
}

.rose-ail:before,
.rose-ail:after,
.rose-ail {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/ail.png);
}

.rose-ail::after {
  animation: animation1 3s -6s infinite ease both alternate;
}

.rose-ail::before {
  animation: animation2 3s -6s infinite ease both alternate;
}

.rose-huile:before,
.rose-huile:after,
.rose-huile {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/huile-dore.png);
}

.rose-assiette {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/1.5);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/1.5);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/assiette.png);
  animation: animationAss 3s -6s infinite ease both alternate;
}

.second-histoire svg {
  animation: animationAss 3s -6s infinite ease-in-out both alternate;
}

.rose-huile::after {
  animation: animation1 3s -6s infinite ease both alternate;
}

.rose-huile::before {
  animation: animation2 3s -6s infinite ease both alternate;
}

.rose-basilic:before,
.rose-basilic:after,
.rose-basilic {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/basilic.png);
}

.rose-basilic::after {
  animation: animation1 4s -6s infinite ease both alternate;
}

.rose-basilic::before {
  animation: animation2 4s -6s infinite ease both alternate;
}

.rose-tomate:before,
.rose-tomate:after,
.rose-tomate {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/tomate.png);
}

.rose-tomate::after {
  animation: animation1 4s -4s infinite ease both alternate;
}

.rose-tomate::before {
  animation: animation2 4s -4s infinite ease both alternate;
}

.rose-courgette-v:before,
.rose-courgette-v:after,
.rose-courgette-v {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/courgette-v.png);
}

.rose-courgette-v::after {
  animation: animation1 1s -4s infinite ease both alternate;
}

.rose-courgette-v::before {
  animation: animation2 1s -4s infinite ease both alternate;
}

.rose-courgette-j:before,
.rose-courgette-j:after,
.rose-courgette-j {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/01-legume-base/courgette-j.png);
}

.rose-courgette-j::after {
  animation: animation1 2s -4s infinite ease both alternate;
}

.rose-courgette-j::before {
  animation: animation2 2s -4s infinite ease both alternate;
}

/* Animations */
@keyframes animationAss {
  to {
    transform: rotate(1.5turn);
  }
}

@keyframes animation1 {
  to {
    transform: rotate(1.5turn) translate(calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh)/6), calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh)/6));
  }
}

@keyframes animation2 {
  to {
    transform: rotate(1.5turn) translate(calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh)/-6), calc(calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh)/-6));
  }
}

.rose-active {
  opacity: 1 !important;
}

.recette-container {
  width: calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh);
  height: 100%;
  background-color: var(--second-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: var(--base-color);
}

.etape {
  border-radius: 25px;
  height: calc( (100% - 7 * 2vh) / 6);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--base-color);
  -webkit-text-stroke: 0px var(--base-color);
  position: relative;
}

.etape-current {
  box-sizing: border-box;
  border: var(--base-color) solid;
  border-width: 5px;
  cursor: pointer;
}

.etape-current:hover {
  text-decoration: line-through;
}

.etape-after {
  background-color: var(--base-color);
  color: var(--second-color);
  text-decoration: line-through;
}

.etape-before {
  background-color: var(--base-color);
  color: var(--second-color);
}

.histoire-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

.p1 {
  text-align: center;
  background-color: #f2face;
  color: #FF3C1F;
  border: solid 3px #f2face;
  border-radius: 4vw;
  margin: 1vw;
  text-transform: lowercase !important;
  font-size: 3.3vw !important;
}

.p2 {
  text-align: center;
  background-color: #f2face;
  color: #FF3C1F;
  border: solid 3px #f2face;
  border-radius: 4vw;
  margin: 1vw;
  text-transform: lowercase !important;
  font-size: 3.3vw !important;
}

.p3 {
  text-align: center;
  background-color: #f2face;
  color: #FF3C1F;
  border: solid 3px #f2face;
  border-radius: 4vw;
  margin: 1vw;
  text-transform: lowercase !important;
  font-size: 3.3vw !important;
}

.p4 {
  text-align: center;
  background-color: #f2face;
  color: #FF3C1F;
  border: solid 3px #f2face;
  border-radius: 4vw;
  text-transform: lowercase !important;
  font-size: 3.3vw !important;
}

.second-section {
  display: flex;
  flex-direction: column !important;
}

@media screen and (max-width: 600px) {
  main .first-section, main .second-section {
    height: 100%;
    border-radius: 25px;
  }
  .rose-element,
.rose-element::before,
.rose-element::after {
    width: calc(100vw / 4) !important;
    height: calc(100vw / 4) !important;
  }
  @keyframes animation1 {
    to {
      transform: rotate(1.5turn) translate(calc(15vw), calc(15vw));
    }
  }
  @keyframes animation2 {
    to {
      transform: rotate(1.5turn) translate(calc(-15vw), calc(-15vw));
    }
  }
  .nav-histoire {
    width: calc(calc(calc(100vw - 2 * 2vw) / 3 - 2vw));
  }
  .nav-rata {
    width: calc(calc(calc(100vw - 2 * 2vw) / 3 - 2vw));
  }
  .nav-accueil {
    width: calc(calc(calc(100vw - 2 * 2vw) / 3 - 2vw));
  }
  .nav-container:hover .nav-histoire {
    transform: translate(0, 0);
  }
  .nav-container:hover .nav-rata {
    transform: translate(0, 0);
  }
  .nav-container:hover .nav-accueil {
    transform: translate(0, 0);
  }
  .container-accueil {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .container-accueil div {
    width: 45vw;
    height: auto;
    position: initial;
    transform: rotate(0);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid var(--second-color);
    -webkit-text-stroke: 0px var(--second-color);
    color: var(--second-color);
    font-size: 4.5vw;
    text-align: center;
  }
  .container-accueil div:last-child {
    width: 90vw;
  }
  .histoire-container {
    font-size: 150%;
    margin-left: 3%;
  }
  .histoire-container p {
    width: 90%;
  }
  .nav-cuisinons {
    text-align: center;
  }
  nav {
    font-size: 4.1vw !important;
  }
  main {
    flex-direction: column;
    width: 90vw;
    height: 80vh;
  }
  header {
    height: 7vh;
    font-size: 4vw;
  }
  footer {
    height: 7vh;
    font-size: 6vw;
  }
  .first-section, .second-section {
    width: 100%;
  }
  .recette-container {
    width: 100%;
    justify-content: space-around;
  }
  .etape {
    height: 5.7vh;
    font-size: 4.1vw;
  }
}

h1 {
  color: var(--base-color);
  font-size: 40px;
}

#yourText {
  font-size: 40px;
}

#thePath {
  opacity: 0;
}

#thePath2 {
  opacity: 0;
}

textPath {
  fill: var(--base-color);
}

.clicked {
  color: var(--second-color);
  text-decoration: line-through;
}

.non-active {
  display: none;
}

.rose-tomate-laver:before,
.rose-tomate-laver:after,
.rose-tomate-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/tomate-lave.png);
}

.rose-tomate-couper:before,
.rose-tomate-couper:after,
.rose-tomate-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/tomate-coupe.png);
}

.rose-tomate-dorer:before,
.rose-tomate-dorer:after,
.rose-tomate-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/tomate-dore.png);
}

.rose-tomate-mijoter:before,
.rose-tomate-mijoter:after,
.rose-tomate-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/tomate-mijote.png);
}

.rose-tomate-servir:before,
.rose-tomate-servir:after,
.rose-tomate-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/tomate-servi.png);
}

.rose-aubergine-laver:before,
.rose-aubergine-laver:after,
.rose-aubergine-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/aubergine-lave.png);
}

.rose-aubergine-couper:before,
.rose-aubergine-couper:after,
.rose-aubergine-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/aubergine-coupe.png);
}

.rose-aubergine-dorer:before,
.rose-aubergine-dorer:after,
.rose-aubergine-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/aubergine-dore.png);
}

.rose-aubergine-mijoter:before,
.rose-aubergine-mijoter:after,
.rose-aubergine-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/aubergine-mijote.png);
}

.rose-aubergine-servir:before,
.rose-aubergine-servir:after,
.rose-aubergine-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/aubergine-servi.png);
}

.rose-courgette-j-laver:before,
.rose-courgette-j-laver:after,
.rose-courgette-j-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/courgette-j-lave.png);
}

.rose-courgette-j-couper:before,
.rose-courgette-j-couper:after,
.rose-courgette-j-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/courgette-j-coupe.png);
}

.rose-courgette-j-dorer:before,
.rose-courgette-j-dorer:after,
.rose-courgette-j-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/courgette-j-dore.png);
}

.rose-courgette-j-mijoter:before,
.rose-courgette-j-mijoter:after,
.rose-courgette-j-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/courgette-j-mijote.png);
}

.rose-courgette-j-servir:before,
.rose-courgette-j-servir:after,
.rose-courgette-j-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/courgette-j-servi.png);
}

.rose-courgette-v-laver:before,
.rose-courgette-v-laver:after,
.rose-courgette-v-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/courgette-v-lave.png);
}

.rose-courgette-v-couper:before,
.rose-courgette-v-couper:after,
.rose-courgette-v-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/courgette-v-coupe.png);
}

.rose-courgette-v-dorer:before,
.rose-courgette-v-dorer:after,
.rose-courgette-v-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/courgette-v-dore.png);
}

.rose-courgette-v-mijoter:before,
.rose-courgette-v-mijoter:after,
.rose-courgette-v-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/courgette-v-mijote.png);
}

.rose-courgette-v-servir:before,
.rose-courgette-v-servir:after,
.rose-courgette-v-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/courgette-v-servi.png);
}

.rose-olive-laver:before,
.rose-olive-laver:after,
.rose-olive-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/olive-lave.png);
}

.rose-olive-couper:before,
.rose-olive-couper:after,
.rose-olive-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/olive-coupe.png);
}

.rose-olive-dorer:before,
.rose-olive-dorer:after,
.rose-olive-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/olive-dore.png);
}

.rose-olive-mijoter:before,
.rose-olive-mijoter:after,
.rose-olive-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/olive-mijote.png);
}

.rose-olive-servir:before,
.rose-olive-servir:after,
.rose-olive-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/olive-servi.png);
}

.rose-laurier-ajouter:before,
.rose-laurier-ajouter:after,
.rose-laurier-ajouter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/05-legume-epice/laurier-dore.png);
}

.rose-laurier-mijoter:before,
.rose-laurier-mijoter:after,
.rose-laurier-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/laurier-mijote.png);
}

.rose-laurier-servir:before,
.rose-laurier-servir:after,
.rose-laurier-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/laurier-servi.png);
}

.rose-poivron-laver:before,
.rose-poivron-laver:after,
.rose-poivron-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/poivron-lave.png);
}

.rose-poivron-couper:before,
.rose-poivron-couper:after,
.rose-poivron-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/poivron-coupe.png);
}

.rose-poivron-dorer:before,
.rose-poivron-dorer:after,
.rose-poivron-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/poivron-dore.png);
}

.rose-poivron-mijoter:before,
.rose-poivron-mijoter:after,
.rose-poivron-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/poivron-mijote.png);
}

.rose-poivron-servir:before,
.rose-poivron-servir:after,
.rose-poivron-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/poivron-servi.png);
}

.rose-origan-ajouter:before,
.rose-origan-ajouter:after,
.rose-origan-ajouter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/05-legume-epice/origan-dore.png);
}

.rose-origan-mijoter:before,
.rose-origan-mijoter:after,
.rose-origan-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/origan-mijote.png);
}

.rose-origan-servir:before,
.rose-origan-servir:after,
.rose-origan-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/origan-servi.png);
}

.rose-thym-ajouter:before,
.rose-thym-ajouter:after,
.rose-thym-ajouter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/05-legume-epice/thym-dore.png);
}

.rose-thym-mijoter:before,
.rose-thym-mijoter:after,
.rose-thym-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/thym-mijote.png);
}

.rose-thym-servir:before,
.rose-thym-servir:after,
.rose-thym-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/thym-servi.png);
}

.rose-poivre-ajouter:before,
.rose-poivre-ajouter:after,
.rose-poivre-ajouter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/05-legume-epice/poivre-dore.png);
}

.rose-poivre-mijoter:before,
.rose-poivre-mijoter:after,
.rose-poivre-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/poivre-mijote.png);
}

.rose-poivre-servir:before,
.rose-poivre-servir:after,
.rose-poivre-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/poivre-servi.png);
}

.rose-ail-couper:before,
.rose-ail-couper:after,
.rose-ail-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/ail-coupe.png);
}

.rose-ail-dorer:before,
.rose-ail-dorer:after,
.rose-ail-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/ail-dore.png);
}

.rose-ail-mijoter:before,
.rose-ail-mijoter:after,
.rose-ail-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/ail-mijote.png);
}

.rose-ail-servir:before,
.rose-ail-servir:after,
.rose-ail-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/ail-servi.png);
}

.rose-oignon-laver:before,
.rose-oignon-laver:after,
.rose-oignon-laver {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/02-legume-lave/oignon-lave.png);
}

.rose-oignon-couper:before,
.rose-oignon-couper:after,
.rose-oignon-couper {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/03-legume-coupe/oignon-coupe.png);
}

.rose-oignon-dorer:before,
.rose-oignon-dorer:after,
.rose-oignon-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/oignon-dore.png);
}

.rose-oignon-mijoter:before,
.rose-oignon-mijoter:after,
.rose-oignon-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/oignon-mijote.png);
}

.rose-oignon-servir:before,
.rose-oignon-servir:after,
.rose-oignon-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/oignon-servi.png);
}

.rose-huile-dorer:before,
.rose-huile-dorer:after,
.rose-huile-dorer {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/04-legume-dore/huile-dore.png);
}

.rose-basilic-ajouter:before,
.rose-basilic-ajouter:after,
.rose-basilic-ajouter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/05-legume-epice/hubasilicile-dore.png);
}

.rose-basilic-mijoter:before,
.rose-basilic-mijoter:after,
.rose-basilic-mijoter {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/06-legume-mijote/basilic-mijote.png);
}

.rose-basilic-servir:before,
.rose-basilic-servir:after,
.rose-basilic-servir {
  content: '';
  position: absolute;
  width: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  height: calc(calc(calc(100vw - 2 * 2vh) - calc(calc(100vw - 2 * 2vh) / 100 * 55 - 2vh) - 2vh)/4);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/07-legume-servi/basilic-servi.png);
}

.section-histoire {
  overflow: hidden;
}

.histoire-container {
  height: 88%;
  width: 88%;
  padding: 6%;
  overflow: auto;
}

#yourHistoireText {
  font-size: 64px;
}

p {
  color: var(--second-color);
  -webkit-text-stroke: 0px;
}

.histoire-container::-webkit-scrollbar {
  width: 0 !important;
}