/* bold */
@font-face {
  font-family: 'Kalam';
  src: local("Kalam Bold"),
       local("Kalam-Bold"),
       url(../fonts/Kalam-Bold.ttf);
  font-weight: normal;
}
/* bold */
@font-face {
  font-family: 'Amatic SC';
  src: local("Amatic SC Bold"),
       local("AmaticSC-Bold"),
       url(../fonts/AmaticSC-Bold.ttf);
  font-weight: normal;
}

body {
  background-color: #3a7456;
  font-family: sans-serif;
}

body.body-index {
  background-color: white;
}

body.container {
	overflow: visible;
}

.desktop-only {
  display: none;
}

.mobile-only {
  display: block;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

header {
  margin: 0 auto;
}

header img.logo-rondele {
  display: block;
  margin: 30px auto;
  width: 30%;
}

header nav ul {
  list-style: none;
  display: flex;
  width: 100%;
  padding-left: 0;
  font-family: 'Amatic SC', cursive;
}

header nav ul li {
  width: 50%;
  background-color: #edca26;
  text-align: center;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  position: relative;
  height: 80px;
}

header nav ul li a,
header nav ul li a:hover {
  color: inherit;
}

header nav ul li a {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

header nav ul li:first-of-type {
  position: relative;
}

header nav ul li.menu-item--engagements {
  background-color: #A3C500;
}

header nav ul li.menu-item--famille {
  background-color: #2e6b47;
}

header nav ul li:first-of-type::before {
  position: absolute;
  content: '';
  background-image: url('../img/visuel-header.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 60%;
  height: 100px;
  top: -14vw;
  z-index: -1;
  left: 10%;
}

.main-accueil h1,
.main-accueil h2,
.main-accueil h3 {
  color: #2e6b47;
  text-align: center;
	font-family: 'Kalam', cursive;
}

.row.row-title {
  margin-left: 0;
  margin-right: 0;
}

.main-accueil .rondele__title,
.main-accueil .devinette__title.title1 {
  font-size: 3rem;
  margin: 0;
  margin-top: 32px;
}

.main-accueil .top-content .row-title .rondele__sTitle,
.main-accueil .bottom-content .devinette__header .devinette__title.title2 {
  font-size: 1.7rem;
  margin: 0;
  padding: 0;
}

.main-accueil .top-content .row-title .reverse-title {
  background-color: #2e6b47;
  color: #ffffff;
  padding: 0.5rem 1rem;
  width: fit-content;
  margin: 0 auto;
}

.main-accueil #banner {
  /*src: url(../img/RONDELE_banniere_mobile.jpg);*/
  width: 100%;
  height: auto;
}

.main-accueil #slider {
  margin-top: 94px;
  margin-bottom: -30px;
  display: flex;
  align-items: center;
}

.main-accueil #slider img {
  max-width: 100%;
}

.main-accueil #slider .prev-button {
  background-image: url('../img/fleche-gauche.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 50px;
}

.main-accueil #slider .next-button {
  background-image: url('../img/fleche-droite.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 50px;
}

.main-accueil .top-content .row-title h1 {
  text-align: center;
}

.main-accueil .top-content .row-title h3 {
  text-align: center;
  font-size: 5.5rem;
}

.main-accueil .bottom-content .devinette__header {
  background-image: url('../img/separator.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 350px;
  text-align: center;
  padding-top: 200px;
}

.main-accueil .devinette__content .recette-item {
  position: relative;
  padding-bottom: 80px;
  margin-left: 0;
  margin-right: 0;
}

.main-accueil .devinette__content .recette-item h3 {
  color: #eecb26;
  font-weight: 400;
  margin: 0 auto;
  font-size: 34px;
}
.devinette__number {
  padding-top: 1.9%;
  padding-bottom: 0;
}
.devinette__number:after {
  display: none;
}

.main-accueil .devinette__content .recette-item img.img-recette {
  width: 100%;
}

.main-accueil .devinette__content .recette-item img.discover-button {
  position: static;
  display: block;
  margin: 0 auto;
}

.popin {
	background-color: rgba(0,0,0,.3);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

	background: transparent;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	max-width: 1366px;
	width: 65%;
	height: 90vh;
	padding-top: 5%;
}

.popin .main-marron {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80vh;
  overflow: scroll;
  overflow-x: hidden;
}

.overlay--green {
    background-color: rgba(36,100,67,.9);
}
.overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    opacity: 1;
    left: 0;
    right: 0;
}

header nav ul li {
    font-size: 20px;
}

footer, ul {
  margin: 0;
  padding: 0;
  border: 0;
  /*font-size: 100%;*/
  font: inherit;
  vertical-align: baseline;
}
.mentions__ul, .mentions__txt {
  text-align: center;
  color: #2e6b47;
}
.mentions__ul {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0;
  margin-top: 2%;
  margin-bottom: 1rem;
}
.mentions__ul ul {
  list-style: none;
}
.mentions__item {
  font-size: 1.7rem;
  display: inline-block;
}
.mentions__item:first-child:before {
  content: "";
  width: 0;
}
.mentions__item:before {
  content: "|";
  font-size: 1rem;
  width: 2vw;
  display: inline-block;
}
.mentions__link {
  color: #2e6b47;
  font-size: 1rem;
}
.mentions__link:hover {
  text-decoration: none;
  color: #2e6b47;
}
.mentions__txt {
  word-spacing: normal;
  font-family: inherit;
  font-size: 14px;
}

.optanon-show-settings {
  color: inherit;
  text-decoration: none;
  font-size: 10px;
}

.popin.footer .main-marron {
    padding: 110px 50px 0;
}
    
.popin.footer {
    margin-top: 0;
}

@media (min-width: 768px) {
  header nav ul li {
    font-size: 30px;
    height: 40px;
  }

  .main-accueil .bottom-content .devinette__header {
    padding-top: 150px;
  }
  
  .main-accueil .devinette__content .recette-item img.discover-button {
    position: absolute;
    bottom: 10px;
    right: 5%;
    cursor: pointer;
  }

  header nav ul li:first-of-type::before {
    top: -90px;
  }

  .row.row-title {
    margin-left: -15px;
    margin-right: -15px;
  }

  .main-accueil .rondele__title,
  .main-accueil .devinette__title.title1 {
    font-size: 3.5vw;
  }

  .main-accueil .top-content .row-title .rondele__sTitle,
  .main-accueil .bottom-content .devinette__header .devinette__title.title2 {
    font-size: 2vw;
  }

  .main-marron {
    margin-top: 0;
    height: 50vh;
  }
  
  .bottom-content {
    margin-top: 90px;
  }
  
  .popin {
    height: 80vh;
  }

  .main-accueil #slider {
    margin-left: -30px;
    margin-right: -30px;
  }
  
  .main-accueil #slider img {
    margin: 0 30px;
  }

  .main-accueil #slider .prev-button {
    width: 150px;
  }

  .main-accueil #slider .next-button {
    width: 150px;
  }
  
  .main-accueil h3 {
	  font-size: 55px;
  }
}







.main-marron {
  background-color: white;
  width: 90vw;
  margin: 0 auto;
  position: relative;
  padding-top: 70px;
  padding-bottom: 30px;
  overflow-x: hidden;
}

.main-marron p {
  color: #3a7456;
}

.main-marron h2 {
  color: #3a7456;
  text-align: center;
}

.main-marron h3 {
	color: #5cb15e;
	text-align: center;
	padding-top: 1%;
	font-family: 'Kalam', cursive;
	font-weight: 400;
	font-size: 30px;
}

.main-marron .bigger {
  font-size: x-large;
}

.main-marron img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.patate-top {
  position: absolute;
  top: -35px;
  left: 10px;
  z-index: 999;
  width: 68px;
}

.patate-top.dude {
  width: 50px;
}

.main-marron .group-plus {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.main-marron .group-plus img {
  margin: 0;
}

.main-marron .double-pic {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}

.main-marron ul {
  list-style: none;
  padding-left: 20px;
}

.main-marron ol {
  list-style: decimal;
  padding-left: 20px;
}

.main-marron li {
  color: #3a7456;
  margin-bottom: 5px;
  font-size: 20px;
}

.main-marron ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #3a7456; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.main-marron img.planche {
  margin: 30px auto;
}

.main-marron .fermer-croix {
    position: absolute;
    top: 10px;
    right: 10px;
	z-index: 999;
	cursor: pointer;
  }

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
  
  .mobile-only {
    display: none;
  }

  .main-marron {
    padding-top: 30px;
    background-color: transparent;
    background-image: url('../img/background-page.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
  }
  
  .popin.recette .main-marron {
	overflow: hidden;
	height: auto;
  }
  
  .main-marron {
    max-width: 95%;
  }
  
  .main-marron img {
    max-width: 75%;
  }
  
  .main-marron h3 {
    font-size: 20px;
  } 
  
  .main-marron li {
	font-size: 12px;
  }
  
  .main-marron .picto-group img {
	width: 40%;
  }
  
  .popin .main-marron .title2 {
  font-size: 26px;
  font-family: 'Kalam', cursive;
  }

  .patate-top {
    position: absolute;
    top: -60px;
    left: 15%;
    width: 50px;
    z-index: -1;
  }

  .main-marron .desktop-only {
    padding-top: 160px;
  }

  .main-marron .calcul-nut {
    position: absolute;
    top: 30px;
    right: 0;
    width: 80%;
    max-width: 1100px;
  }

  .main-marron .double-pic {
    justify-content: flex-start;
  }

  .main-marron .double-pic .picto-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .main-marron .double-pic .picto-group:first-of-type {
    margin-right: 30px;
  }

  .main-marron .double-pic .picto-group p {
    margin: 0;
  }

  .main-marron .col-steps {
    position: relative;
  }

  .main-marron .col-steps h2 {
    width: 80%;
  }

  .main-marron .lady-nut {
    position: relative;
    right: 0px;
    max-width: 100px;
    max-height: 80px;
  }

  .main-marron .planche-col {
    display: flex;
    align-items: flex-start;
	padding-top: 50px;
  }

  .main-marron .planche {
    position: static;
  }
  
  .main-marron .col-nimbus .nimbus {
    width: 40%;
  }

  .main-marron.herbes .col-nimbus {
    padding-top: 50px;
  }

  .main-marron.herbes .nimbus {
    position: static;
    max-height: 210px;
  }

  .main-marron.herbes .lady-nut {
    max-width: 150px;
	right: 0;
  }
  
  .main-marron.legumes .desktop-only {
    padding-top: 140px;
  }
  
  .patate-top.legumes {
       top: -70px;
		left: 15%;
		width: 70px;
		z-index: -1;
  }
  
  .patate-top.ail {
    width: 90px;
  }
  
  .patate-top.endive {
    width: 60px;
  }
}

@media (min-width: 1200px) {
	.patate-top {
		position: absolute;
		top: -60px;
		left: 15%;
	}

	.main-marron .desktop-only .lady-nut {
		right: 0;
	}
	
	.main-marron.herbes .nimbus {
		top: -30%;
	}
	
	.popin {
		max-width: 750px;
	}
}