:root, body{font-family: 'Montserrat', sans-serif; background-color: var(--main-bg-color); color: var(--main-color);}
#content .nav.nav-tabs.primary {justify-content: end}
.agree-button { cursor: pointer; margin-right: 5px; margin-top: 1em; vertical-align: middle; overflow: visible; width: auto; box-shadow: inset 0 1px 0 0 var(--main-white-color); background-color: var(--main-grey-color); background-image: linear-gradient(to bottom,#ededed 5%,#dfdfdf 100%); border-radius: 6px; border: 1px solid var(--main-grey-color); color: var(--main-color); font-family: Arial,sans-serif; font-weight: bold; padding: 4px 8px; text-decoration: none; text-shadow: 1px 1px 0 var(--main-white-color); }
.decline-button { font-weight: normal; background: transparent; box-shadow: none; border: 0; color: var(--main-white-color); text-shadow: none; }
.decline-button:hover { background: transparent; }

article section{margin: 50px 0 75px 0;}
article h1{font-size: 2.5em; font-family: 'Montserrat-B'; color: var(--main-green-color); text-transform: uppercase; text-align: center;}
article h2{font-size: 2.5em; font-family: 'Montserrat-B'; color: var(--main-green-color); text-transform: uppercase; text-align: center; margin-bottom: 50px;}
article a{color: var(--main-color); text-transform: uppercase; text-decoration: underline;}
article button, input[type="submit"]{background: none; color: inherit; border: none; border-radius: 10px; outline: inherit; margin: 10px; padding: 15px 0; transition-property: box-shadow; transition-duration: 350ms;}
article button:hover, input[type="submit"]:hover{box-shadow: 0 0 7px 7px var(--light-grey-color);}
article button a{color: var(--main-white-color); text-decoration: none; font-family: 'Satisfy', serif; font-size: 1.5em; padding: 15px 50px; text-transform: none;}
article button a:hover{color: var(--main-white-color); text-decoration: none;}

@media (max-width: 576px) {
    article section{margin: 40px 0 30px 0;}
    article h1{font-size: 1.25em;}
    article h2{font-size: 1.5em;}
    article button a{font-size: 1em; padding: 10px 30px;}
}

.flex{display: flex;}

@media (max-width: 576px) {
    .flex{flex-direction: column;}
}

/**
**  Navbar
**/
#navbar-main .container{max-width: 1475px; height: 123px;}
#navbar-main .navbar-brand img{width: 149px; height: 167px; position: absolute; z-index: 10; top: 30px;}
#navbar-main #CollapsingNavbar{padding-left: 140px;}

#block-subtheme-main-menu li a{color: var(--main-green-color); font-family: 'Montserrat-XB'; text-transform: uppercase;}
#block-subtheme-main-menu li a:hover{text-decoration: underline;}
#block-subtheme-main-menu li a.is-active{text-decoration: underline; font-weight: bold;}

@media (max-width: 768px) {
    #navbar-main #CollapsingNavbar{padding-left: 30px; position: relative; z-index: 11; background-color: var(--main-bg-color);}
    #navbar-main .container{justify-content: unset;}
    #navbar-main button i{color: var(--main-green-color);}
    #navbar-main .navbar-brand img{left: 50%; top: 130px; transform: translate(-50%, -50%); width: 109px; height: 123px;}
    .custom-toggler .navbar-toggler-icon{background-color: var(--main-green-color);}
}

/**
**  Home
**/
#home #bg{height: 100vh; background-size: cover; background-repeat: no-repeat; text-align: center; position: relative;}
#home #bg .header{max-width: 936px; position: absolute; left: 14%; top: 23%;}
#home #bg h1{padding: 0 70px;}
#home #bg .field--name-field-texte-header{font-family: 'Satisfy', serif; font-size: 2.25em; color: var(--main-green-color);}
#home #bg button{background-color: var(--main-green-color);}

#home #section-1{position: relative;}
#home #section-1 #home-green-leaves{position: absolute; left: -50px; top: 350px; z-index: 0;}
#home #section-1 #home-orange-leaf{position: absolute; right: 25px; top: 200px; z-index: 0;}
#home #section-1 #home-blue-flower{position: absolute; right: 0; top: 800px; z-index: 0;}
#home #section-1 header{margin: 30px 0;}
#home #section-1 header img{width: 115px; height: 75px;}
#home #section-1 .field--name-field-titre-section-1{font-family: 'Satisfy', serif; margin: 30px 0 0 20px; text-transform: none;}
#home #section-1 .field--name-body{font-family: 'Montserrat-LI'; font-size: 1.4em; line-height: 1.5em; margin: 35px 15px; position: relative; z-index: 1;}
#home #section-1 .container div img{width: 550px; height: 700px; position: relative; z-index: 1;}

#home #collec{text-align: center;}
#home #collec .field--name-field-paragraphe-collection{display: grid; grid-template-columns: repeat(5, 1fr); margin: 50px 0 30px 0}
#home #collec .field--name-field-paragraphe-collection a{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 1.6em; text-transform: none; text-decoration: none;}
#home #collec .field--name-field-paragraphe-collection a img {width: 164px; height: 189px; object-fit: contain;}
#home #collec .field--name-field-paragraphe-collection .field__item{transition-property: transform; transition-duration: 400ms;}
#home #collec .field--name-field-paragraphe-collection .field__item:hover{transform: scale(1.1);}
#home #collec button{background-color: var(--main-green-color);}

#home #respect{justify-content: space-between; align-items: center; margin: 250px auto; position: relative;}
#home #respect::before{content: ''; background-color: var(--main-yellow-color); border-radius: 64px; width: 496px; height: 798px; position: absolute; left: 490px;}
#home #respect #home-tomato{position: absolute; top: -135px; left: -60px; z-index: 0;}
#home #respect #home-3dots{position: absolute; top: 185px; right: -60px; z-index: 0;}
#home #respect img{max-width: 540px; max-height: 580px; position: relative; z-index: 1;}
#home #respect header{max-width: 460px; position: relative;}
#home #respect h2{color: var(--main-color); text-align: left; max-width: 460px;}
#home #respect .field--name-field-texte-respect{font-family: 'Montserrat-LI'; font-size: 1.25em; line-height: 1em; text-align: right; margin-top: 15px;}
#home #respect .field--name-field-bouton-respect{text-align: right;}

#home #commitments{text-align: center; position: relative;}
#home #commitments h2{color: var(--main-blue-color);}
#home #commitments .field--name-field-paragraphe-engagements{display: flex; justify-content: space-between; text-align: left;}
#home #commitments .paragraph--type--paragraphe-accueil-2{position: relative; z-index: 1;}
#home #commitments .field--name-field-image-engagement{height: 127px;}
#home #commitments .field--name-field-image-engagement img{margin: auto;}
#home #commitments .field--name-field-titre-engagement{font-family: 'Montserrat-B'; font-size: 1.5em; color: var(--main-blue-color); text-transform: uppercase;}
#home #commitments .field--name-field-texte-engagement{font-family: 'Montserrat-LI'; font-size: 1.25em; line-height: 1.25em; margin-top: 12px; max-width: 335px;}
#home #commitments .field--name-field-lien-engagement a{color: var(--main-blue-color);}
#home #commitments button{background-color: var(--main-blue-color); margin: 40px auto;}
#home #commitments #home-orange-leaves{position: absolute; left: -50px; top: 80px; z-index: 0;}
#home #commitments #home-red-berries{position: absolute; right: 0; top: 50px; z-index: 0;}

#home .views-row .container{display: flex; max-width: 1366px; position: relative;}
#home #recette-accueil h3{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 5em; text-align: center;}
#home #recette-accueil .recette-bg{background-image: url('/sites/default/files/bg-recette-accueil.png'); background-repeat: no-repeat; width: 675px; height: 850px; position: relative; z-index: 2;}
#home #recette-accueil .recette{padding-top: 120px; padding-left: 125px; max-width: 650px;}
#home #recette-accueil .recette h4{font-family: 'Montserrat-B'; color: var(--main-blue-color); font-size: 2em; text-align: left; margin-bottom: 25px; margin-top: 35px; text-transform: uppercase;}
#home #recette-accueil .recette p{padding-left: 15px; font-size: 1.3em;}
#home #recette-accueil .recette a{padding-left: 15px; font-size: 1.5em; margin-top: 30px; color: var(--main-blue-color);}
#home #recette-accueil .recette-img img{border-radius: 64px; position: absolute; top: 40px; right: 0; z-index: 1;}
#home #recette-accueil .recette-img h3{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 3em; margin-top: 500px; margin-left: 50px; white-space: nowrap;}
#home #recette-accueil button{border: 2px solid var(--main-green-color); margin-top: 500px;}
#home #recette-accueil button a{color: var(--main-green-color);}

@media (max-width: 1280px) {
    #home #section-1 #home-green-leaves{display: none;}
    #home #section-1 #home-orange-leaf{display: none;}
    #home #section-1 #home-blue-flower{display: none;}
    #home #respect #home-tomato{display: none;}
    #home #respect #home-3dots{display: none;}
    #home #commitments #home-orange-leaves{display: none;}
    #home #commitments #home-red-berries{display: none;}
}

@media (max-width: 576px) {
    #home #bg{height: 450px;}
    #home #bg h1{padding: 0 35px;}
    #home #bg .header{left: unset; top: 35%;}
    #home #bg .field--name-field-texte-header{font-size: 1.5em; max-width: 285px; margin: 0 auto;}
    #home #section-1 header{flex-direction: row; align-items: center;}
    #home #section-1 header img{width: 74px; height: 50px;}
    #home #section-1 .field--name-body{font-size: 1em; line-height: normal; text-align: center;}
    #home #section-1 .container div img{width: 100%; height: auto; margin: auto;}
    #home #collec .field--name-field-paragraphe-collection{grid-template-columns: repeat(2, 1fr);}
    #home #collec .field--name-field-paragraphe-collection .field__item{margin-top: 15px;}
    #home #collec .field--name-field-paragraphe-collection .field__item:hover{transform: none;}
    #home #respect{margin: 125px auto;}
    #home #respect::before{width: 96%; height: 430px; left: 8px; top: 324px;}
    #home #respect header{max-width: 310px;}
    #home #respect h2{margin-top: 20px; padding-left: 10px;}
    #home #respect img{width: 100%; height: auto; margin: auto;}
    #home #commitments .field--name-field-paragraphe-engagements{flex-direction: column; text-align: center;}
    #home #commitments .field--name-field-media-image{margin-top: 30px;}
    #home #commitments .field--name-field-texte-engagement p{font-size: 1em;}
    #home #commitments .field--name-field-texte-engagement{max-width: none;}
    #home .views-row .container{flex-direction: column; text-align: center; padding-right: 0;}
    #home #recette-accueil h3{font-size: 2.5em;}
    #home #recette-accueil .recette-bg{background-size: cover; width: 325px; height: 400px;}
    #home #recette-accueil .recette {padding-top: 40px; padding-left: 50px; max-width: 345px; text-align: left;}
    #home #recette-accueil .recette h4{font-size: 0.9em; margin-bottom: 5px;}
    #home #recette-accueil .recette p{font-size: 0.6em;}
    #home #recette-accueil .recette a{font-size: 0.8em;}
    #home #recette-accueil .recette-img img{width: 340px; height: 270px; left: 50%; transform: translate(-52%, 0%); top: 330px;}
    #home #recette-accueil button{margin-top: 230px;}
}

/**
** Histoire
**/
#histoire #bg-histoire{height: 100vh; background-size: cover; background-repeat: no-repeat; text-align: center; position: relative;}
#histoire #bg-histoire .header{position: absolute; right: 18%; top: 56%;}
#histoire #bg-histoire h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#histoire #histoire-1{position: relative;}
#histoire #histoire-1 .container{display: flex; justify-content: space-between; position: relative;}
#histoire #histoire-1 #history-tomato{position: absolute; top: 90px; left: -50px; z-index: 2;}
#histoire #histoire-1 #history-rain{position: absolute; top: 190px; left: -350px; z-index: 0;}
#histoire #histoire-1 #history-3dots{position: absolute; top: 680px; left: 530px; z-index: 0;}
#histoire #histoire-1 #history-green-leaf{position: absolute; top: 120px; right: 25px; z-index: 0;}
#histoire #histoire-1 #img-h1{max-width: 530px; max-height: 570px; margin-top: 200px; margin-bottom: 60px; position: relative; z-index: 1;}
#histoire #histoire-1 .field--name-body{margin: 50px 20px 100px 10px; position: relative; font-size: 1.25em; color: var(--main-white-color); max-width: 480px;}
#histoire #histoire-1 .field--name-body p{position: relative;}
#histoire #histoire-1 .field--name-body::before{content: ''; background-color: var(--main-green-color); border-radius: 64px; width: 680px; height: 400px; position: absolute; top: -18px; right: -45px; z-index: 0;}
#histoire #histoire-1 .field--name-body span{font-size: 3.25em; line-height: 1em;}
#histoire #histoire-1 .field--name-field-legende-histoire{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 1.75em; margin-bottom: 180px; margin-left: 30px; position: relative; z-index: 1;}
#histoire #histoire-1 .right .flex{margin: 15px;}
#histoire #histoire-1 .right .flex img{max-width: 71px; max-height: 52px;}
#histoire #histoire-1 .field--name-field-texte-histoire-2{margin-right: 28px; font-size: 1.25em; font-weight: bold;}
#histoire #histoire-1 .field--name-field-texte-histoire-2 p{position: relative; z-index: 2;}

#histoire #histoire-2{position: relative;}
#histoire #histoire-2 .field--name-field-texte-histoire-3{max-width: 920px; margin: auto; margin-top: 150px; position: relative;}
#histoire #histoire-2 .field--name-field-texte-histoire-3 p{margin: 54px 44px; color: var(--main-white-color); font-size: 1.25em; font-weight: bold; position: relative; z-index: 2;}
#histoire #histoire-2 .field--name-field-texte-histoire-3::before{content: ''; background-color: var(--main-blue-color); border-radius: 64px; width: 1000px; height: 545px; position: absolute; top: -50px; left: -50px; z-index: 1;}
#histoire #histoire-2 img{position: relative; z-index: 2;}
#histoire #histoire-2 #history-blueberries{position: absolute; top: -80px; left: 0; z-index: 0;}
#histoire #histoire-2 #history-blue-dots{position: absolute; top: 90px; right: 30px; z-index: 0;}
#histoire #histoire-2 #history-radish{position: absolute; top: 365px; right: 0; z-index: 0;}

@media (max-width: 1600px) {
    #histoire #histoire-2 .idk{display: flex;}
    #histoire #histoire-2 .idk img{width: 100%; height: auto; margin: auto;}
}

@media (max-width: 1366px) {
    #histoire #bg-histoire .header{right: 12%; top: 56%;}
    #histoire #bg-histoire h1{font-size: 3.5em;}
    #histoire #histoire-2 #history-blueberries{display: none;}
    #histoire #histoire-2 #history-blue-dots{display: none;}
    #histoire #histoire-2 #history-radish{display: none;}
}

@media (max-width: 1280px) {
    #histoire #histoire-1 #history-green-leaf{display: none;}
}

@media (max-width: 768px) {
    #histoire #bg-histoire{height: 450px; background-position: bottom;}
    #histoire #bg-histoire .header{position: absolute; right: 12%; top: 52%;}
    #histoire #bg-histoire h1{font-size: 1.75em;}
    #histoire #histoire-1 .container{flex-direction: column;}
    #histoire #histoire-1 #img-h1{width: 100%; height: auto; margin: auto;}
    #histoire #histoire-1 .field--name-field-texte-histoire-2{font-size: 1em; margin: 0 10px; margin-top: 20px;}
    #histoire #histoire-1 .field--name-body{font-size: 1em; margin: 50px 0 100px 0; padding: 0 10px; font-weight: bold;}
    #histoire #histoire-1 .field--name-body p{margin: auto 20px;}
    #histoire #histoire-1 .field--name-body::before{width: 100%; right: unset; left: 0; min-height: 355px;}
    #histoire #histoire-1 .right .flex{flex-direction: row; align-items: center; margin-bottom: 30px;}
    #histoire #histoire-1 .right img{width: 100%; margin: auto;}
    #histoire #histoire-1 .field--name-field-legende-histoire{margin-bottom: 0;}
    #histoire #histoire-2 .field--name-field-texte-histoire-3 p{font-size: 1em;}
    #histoire #histoire-2 .field--name-field-texte-histoire-3::before{width: 100%; height: 615px; top: -30px; left: 0;}
    #histoire #histoire-2 #img-h3{display: none;}
    #histoire #histoire-2 #img-h4{width: 100%; height: auto; margin-top: 20px;}
    #histoire #histoire-1 #history-tomato{display: none;}
    #histoire #histoire-1 #history-rain{display: none;}
    #histoire #histoire-1 #history-3dots{display: none;}
}

/**
** Savoir-Faire
**/
#savoir{padding-bottom: 200px; position: relative;}
#savoir h2{color: var(--main-color); text-align: left; font-size: 2em;}
#savoir p{font-weight: bold; font-size: 1.25em;}

#savoir #bg-savoir{height: 100vh; background-size: cover; background-repeat: no-repeat; text-align: center; position: relative; z-index: 1;}
#savoir #bg-savoir h1{margin: auto; padding-top: 10%; font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#savoir #respectueux{display: flex; max-width: 1550px; margin-top: 195px;}
#savoir #respectueux img{width: 100%; max-width: 925px; max-height: 580px; position: relative; z-index: 1;}
#savoir #respectueux .txt{margin-top: 50px; margin-left: 40px; max-width: 580px;position: relative;}
#savoir #respectueux .txt h2, #savoir #respectueux .txt p{position: relative; z-index: 1;}
#savoir #respectueux .txt::before{content: ''; background-color: var(--main-yellow-color); border-radius: 64px; width: 700px; height: 1100px; position: absolute; top: -300px; right: -20px; z-index: 0;}

#savoir #logistique{display: flex; justify-content: flex-end; margin-top: 300px;}
#savoir #logistique img{width: 100%; max-width: 925px; max-height: 580px; position: relative; z-index: 2;}
#savoir #logistique .txt{margin-top: 20px; margin-right: 40px; max-width: 580px; position: relative;}
#savoir #logistique #sf-vegies{position: absolute; width: 377px; height: 422px; top: -350px; left: 25px; z-index: 0;}
#savoir #logistique .txt h2{max-width: 500px; line-height: 1.25em; position: relative; z-index: 2;}
#savoir #logistique .txt p{position: relative; z-index: 2;}
#savoir #logistique .txt::before{content: ''; background-color: var(--main-yellow-color); border-radius: 64px; width: 760px; height: 1200px; position: absolute; top: -90px; left: -80px; z-index: 1;}

#savoir #distribution h2{margin-top: 55px;}
#savoir #distribution h2, #savoir #distribution p{max-width: 580px; margin-left: 75px;}

#savoir #imgs{position: relative;}
#savoir #imgs #sf-leaves{position: absolute; top: -258px; right: 15px; z-index: 0;}
#savoir #imgs #straw-box{width: 100%; margin-top: 25px; position: relative; z-index: 2;}

#savoir #marketing{max-width: 1150px; position: relative;}
#savoir #marketing h2, #savoir #marketing p{position: relative; z-index: 2;}
#savoir #marketing::before{content: ''; background-color: var(--main-yellow-color); border-radius: 64px; width: 1190px; height: 500px; position: absolute; bottom: -75px; right: -10px; z-index: 1;}

#savoir #sf-plants{position: absolute; bottom: 0; left: 400px;}

@media (max-width: 1600px) {
    #savoir #respectueux img{width: 55vw; max-width: 100%; height: auto;}
    #savoir #logistique .txt{padding-left: 15px;}
}

@media (max-width: 1366px) {
    #savoir #bg-savoir h1{font-size: 3.5em;}
    #savoir #distribution .field--name-field-texte-distribution{position: relative; z-index: 2;}
    #savoir #respectueux img{width: 50vw; object-fit: cover;}
}

@media (max-width: 1280px) {
    #savoir #imgs #sf-leaves{display: none;}
    #savoir #respectueux img{width: 45vw;}
    #savoir #logistique #distribution{z-index: 2;}
}

@media (max-width: 576px) {
    #savoir{text-align: center; padding-bottom: 250px;}
    #savoir p{font-size: 1em; margin: auto;}
    #savoir #bg-savoir{height: 450px;}
    #savoir #bg-savoir h1{font-size: 1.5em; padding-top: 20%;}
    #savoir #respectueux{flex-direction: column; margin-top: 75px;}
    #savoir #respectueux img{width: 100%;}
    #savoir #respectueux .txt::before{top: -200px; width: 100%; height: 1130px; left: 0;}
    #savoir #respectueux .txt{margin-left: 20px; margin-right: 20px;}
    #savoir #respectueux .txt h2{text-align: center;}
    #savoir #respectueux .txt h2, #savoir #respectueux .txt p{margin-left: auto; margin-right: auto;}
    #savoir #respectueux .txt .field--name-body{padding-left: 10px; padding-right: 10px;}
    #savoir #logistique{flex-direction: column;}
    #savoir #logistique .field--name-field-titre-logistique{text-align: center;}
    #savoir #logistique #sf-vegies{width: 188px; height: 211px; top: -200px; left: 100px;}
    #savoir #logistique .txt{margin: 20px 20px 0 20px; padding-left: 5px; padding-right: 5px;}
    #savoir #logistique .txt .field--name-field-texte-logistique{padding-left: 10px; padding-right: 10px;}
    #savoir #logistique .txt::before{width: 100%; left: 0; height: 800px;}
    #savoir #distribution{margin-top: 30px;}
    #savoir #distribution img{margin-bottom: 20px;}
    #savoir #distribution .field--name-field-titre-distribution{text-align: center;}
    #savoir #distribution h2, #savoir #distribution p{margin: 10px auto;}
    #savoir #marketing::before{width: 100%; height: 700px; left: 0; top: -100px;}
    #savoir #marketing{margin-left: auto; margin-right: auto;}
    #savoir #marketing.container{width: 350px;}
    #savoir #marketing .field--name-field-titre-marketing{text-align: center;}
    #savoir #marketing .field--name-field-texte-marketing{padding-left: 10px; padding-right: 10px;}
    #savoir #sf-plants{left: 30px;}
}

@media (max-width: 361px) {
    #savoir #respectueux .txt::before{top: -110px;}
}

/**
** Engagements
**/
#engagements{text-align: center; padding-bottom: 270px; position: relative;}
#engagements h2{color: var(--main-blue-color); font-size: 1.75em; margin-bottom: 12px;}
#engagements p{font-size: 1.25em; font-weight: bold;}
#engagements .flex{justify-content: space-between;}

#engagements #bg-engagements{height: 100vh; background-size: cover; background-repeat: no-repeat; text-align: center; position: relative;}
#engagements #bg-engagements .header{position: absolute; left: 15%; bottom: 20%;}
#engagements #bg-engagements h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#engagements #list{margin-top: 100px;}
#engagements #list #beau{margin-top: 75px; margin-bottom: 50px; position: relative;}
#engagements #list #beau{max-width: 800px;}
#engagements #list #beau::before{content: ''; background-image: url('/sites/default/files/bg-beau.svg'); background-repeat: no-repeat; width: 550px; height: 510px; position: absolute; right: -55px; z-index: 0;}
#engagements #list #beau #star{position: relative; z-index: 1;}
#engagements #list #beau h2{margin-top: 25px; position: relative; z-index: 1;}
#engagements #list #beau p{position: relative; z-index: 1;}
#engagements #list #bon h2{margin-top: 15px;}
#engagements #list #sain h2{margin-top: 15px; padding-top: 20px; position: relative; z-index: 1;}
#engagements #list #frais{position: relative;}
#engagements #list #frais h2{margin-top: 20px;}
#engagements #list #sain{max-width: 900px; margin-left: 50px; margin-bottom: 100px; position: relative;}
#engagements #list #sain img{position: absolute; top: -120px; left: 400px;}
#engagements #list #sain p{position: relative; z-index: 1;}
#engagements #list #sain::before{content: ''; background-image: url('/sites/default/files/bg-sain.svg'); background-repeat: no-repeat; width: 896px; height: 317px; position: absolute; top: -20px; left: -25px; z-index: 0;}
#engagements #list .field--name-field-texte-beau{max-width: 450px;}
#engagements #list .field--name-field-texte-bon{max-width: 570px;}
#engagements #list .field--name-body{max-width: 780px; margin-left: 25px;}
#engagements #list .field--name-field-texte-frais{max-width: 670px;}
#engagements #list .field--name-field-texte-ethique{max-width: 350px;}

#engagements #list #ethique{position: relative;}
#engagements #list #ethique::before{content: ''; background-image: url('/sites/default/files/bg-ethique.svg'); background-repeat: no-repeat; width: 619px; height: 671px; position: absolute; top: -100px; left: -125px; z-index: 0;}
#engagements #list #ethique img{position: absolute; top: -175px; right: 105px;}
#engagements #list #ethique h2, #engagements #list #ethique p{position: relative; z-index: 1;}

#engagements #commitment-berries{position: absolute; bottom: -125px; left: -160px; z-index: 0;}
#engagements #commitment-dot1{position: absolute; right: 0; top: 25px; z-index: 0;}
#engagements #commitment-dot2{position: absolute; top: 450px; left: 715px; z-index: 0;}
#engagements #commitment-dot3{position: absolute; top: 100px; left: 200px; z-index: 0;}
#engagements #commitment-dot4{position: absolute; top: 100px; left: 500px; z-index: 0;}

@media (max-width: 1366px) {
    #engagements #bg-engagements h1{font-size: 3.5em;}
}

@media (max-width: 992px) {
    #engagements #list .flex{flex-direction: column;}
    #engagements #list #beau, #engagements #list #bon{display: flex; flex-direction: column; align-items: center;}
    #engagements #list .field--name-field-texte-beau{max-width: none;}
    #engagements #list .field--name-field-texte-bon{max-width: none;}
    #engagements p{font-size: 1em;}
    #engagements #bg-engagements{height: 450px;}
    #engagements #bg-engagements .header{bottom: 25%; max-width: 280px;}
    #engagements #bg-engagements .header h1{font-size: 1.75em;}
    #engagements #list .field--name-body{margin-left: unset;}
    #engagements #list #beau::before{display: none;}
    #engagements #list #bon{margin-bottom: 20px;}
    #engagements #list #sain::before{display: none;}
    #engagements #list #ethique::before{display: none;}
    #engagements #list #sain{margin-left: 0; margin-bottom: 50px;}
    #engagements #list #sain h2{padding-top: 0;}
    #engagements #list #sain img{position: unset;}
    #engagements #list #frais{margin-bottom: 25px;}
    #engagements #list #ethique img{position: unset;}
    #engagements #list #ethique .field--name-field-texte-ethique{max-width: unset;}
    #engagements #commitment-berries{width: 342px; height: 302px; bottom: -60px; left: -90px;}
    #engagements #commitment-dot1{top: -80px; right: 25px;}
    #engagements #commitment-dot2{top: 920px; right: 20px; left: unset;}
    #engagements #commitment-dot3{top: 75px; left: 35px;}
    #engagements #commitment-dot4{top: 75px; right: 10px; left: unset;}
}

/**
** Collection Bio
**/
#collection{padding-bottom: 500px; position: relative;}
#collection #bg-collection{height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; display: flex; justify-content: center; align-items: center;}
#collection #bg-collection h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#nous-contacter {display: flex;justify-content: center;}
#nous-contacter button {background-color: var(--main-green-color);}

#collection #paragraphe .field--name-field-paragraphe-collection-bio{display: grid; grid-template-columns: repeat(5, 1fr); margin: 100px 0 30px 0}
#collection #paragraphe .field--name-field-paragraphe-collection-bio img {width: 164px; height: 164px; object-fit: contain;}
#collection #paragraphe .field--name-field-paragraphe-collection-bio a{display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; margin-bottom: 50px; transition-property: transform; transition-duration: 400ms;}
#collection #paragraphe .field--name-field-paragraphe-collection-bio a:hover{transform: scale(1.1);}
#collection #paragraphe .field--name-field-paragraphe-collection-bio .legende{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 1.6em; text-align: center; padding: 0 18px; text-transform: none;}

#collection #chiffres{position: relative;}
#collection #chiffres h2{padding-top: 55px;}
#collection #chiffres .right{text-align: right; display: flex; justify-content: flex-end;}
#collection #chiffres .field--name-body{font-size: 2.25em; font-family: 'Montserrat-B'; color: var(--main-green-color); line-height: 1.1em; text-transform: uppercase; max-width: 680px; margin-top: 125px;}
#collection #chiffres #graphique{position: absolute; margin-bottom: 55px; top: 190px; z-index: 1; width: 1140px; height: auto;}
#collection #chiffres #deco-mid-1{position: absolute; top: 0; left: 200px;}
#collection #chiffres #deco-mid-2{position: absolute; top: 0; left: 900px;}

#collection #collec-blue-leaves{position: absolute; bottom: -260px; left: -57px; z-index: 0;}
#collection #collec-tomato{position: absolute; bottom: 235px; left: 220px; z-index: 0;}
#collection #collec-strawberry-left{position: absolute; bottom: 0; left: 170px; z-index: 0;}
#collection #collec-orange-leaves{position: absolute; bottom: 335px; right: 0; z-index: 0;}
#collection #collec-strawberry-right{position: absolute; bottom: 460px; right: 145px; z-index: 0;}
#collection #collec-green-leaves{position: absolute; bottom: 0; right: 0; z-index: 0;}

@media (max-width: 1366px) {
    #collection #bg-collection h1{font-size: 3.5em;}
    #collection #collec-blue-leaves{display: none;}
    #collection #collec-tomato{display: none;}
    #collection #collec-strawberry-left{display: none;}
    #collection #collec-orange-leaves{display: none;}
    #collection #collec-strawberry-right{display: none;}
    #collection #collec-green-leaves{display: none;}
}

@media (max-width: 1200px) {
    #collection #chiffres #graphique{width: 100%; height: auto; top: 280px; padding: 0 10px;}
    #collection #chiffres #deco-mid-1{left: 80px;}
    #collection #chiffres #deco-mid-2{left: 750px;}
}

@media (max-width: 992px) {
    #collection{padding-bottom: 550px;}
    #collection #paragraphe .field--name-field-paragraphe-collection-bio{display: flex; flex-wrap: wrap; justify-content: center;}
    #collection #chiffres #deco-mid-1{display: none;}
    #collection #chiffres #deco-mid-2{display: none;}
    #collection #chiffres #graphique{top: 450px;}
}

@media (max-width: 768px) {
    #collection #paragraphe .field--name-field-paragraphe-collection-bio{display: grid; grid-template-columns: repeat(2, 1fr); flex-wrap: unset; justify-content: unset;}
    #collection #paragraphe .field--name-field-paragraphe-collection-bio a:hover{transform: unset;}
    #collection #chiffres h2{padding-top: 0;}
    #collection #chiffres .field--name-body{font-size: 1.5em;}
}

@media (max-width: 578px) {
    #collection{padding-bottom: 400px;}
    #collection #bg-collection{height: 450px;}
    #collection #bg-collection .header h1{font-size: 1.75em; padding: 0 75px;}
    #collection #chiffres{margin-top: 0;}
    #collection #chiffres h2{padding-top: 0;}
    #collection #chiffres .field--name-body{font-size: 1em; max-width: 265px; margin-top: unset;}
    #collection #chiffres #graphique{margin-bottom: 0px; top: 125px; left: 0;}
}

/**
** Actualités
**/
#actu #bg-actu{height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; display: flex; justify-content: center; align-items: center;}
#actu #bg-actu h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#actu #liste-actu{max-width: 920px; margin: auto; margin-top: 50px;}
#actu #liste-actu .views-row{margin: 50px 0 50px 0; position: relative; z-index: 2;}
#actu #liste-actu .views-row:nth-child(2n+1)::before{content: ''; background-image: url('/sites/default/files/fingerprint.png'); background-repeat: no-repeat; position: absolute; width: 453px; height: 462px; top: 250px; left: 925px; z-index: 1;}
#actu #liste-actu .views-row:nth-child(2n)::before{content: ''; background-image: url('/sites/default/files/fingerprint-reverse.png'); background-repeat: no-repeat; position: absolute; width: 453px; height: 462px; top: 475px; right: 925px; z-index: 1;}
#actu #liste-actu .header-actu{display: flex; align-items: center; position: relative; z-index: 2;}
#actu #liste-actu .header-actu img{max-width: 452px; max-height: 362px;}
#actu #liste-actu .header-actu h2{font-family: 'Satisfy', serif; font-size: 2.5em; text-transform: none; text-align: left; margin-left: 20px; position: relative;}
#actu #liste-actu p{position: relative; z-index: 2;}
#actu #liste-actu .header-actu::before{content: ''; background-image: url('/sites/default/files/bg-actualite.svg'); background-repeat: no-repeat; position: absolute; width: 495px; height: 509px; top: 50px; left: 660px; z-index: 0;}
#actu #liste-actu p{font-weight: bold;}

@media (max-width: 1840px) {
    #actu #liste-actu .views-row:nth-child(2n+1)::before{width: 225px; height: 230px; top: 470px; background-size: contain;}
    #actu #liste-actu .views-row:nth-child(2n)::before{width: 225px; height: 230px; background-size: contain;}
}

@media (max-width: 1366px){
    #actu #bg-actu h1{font-size: 3.5em;}
    #actu #liste-actu .views-row:nth-child(2n+1)::before{width: 180px; height: 185px; top: 400px; background-size: contain;}
    #actu #liste-actu .views-row:nth-child(2n)::before{width: 180px; height: 185px; top: 425px; background-size: contain;}
    #actu #liste-actu .header-actu::before{width: 396px; height: 407px; background-size: contain;}
}

@media (max-width: 1280px){
    #actu #liste-actu .views-row:nth-child(2n+1)::before{display: none;}
    #actu #liste-actu .views-row:nth-child(2n)::before{display: none;}
    #actu #liste-actu .header-actu::before{display: none;}
}

@media (max-width: 992px){
    #actu #liste-actu p{padding: 0 10px;}
}

@media (max-width: 768px) {
    #actu #bg-actu{height: 450px;}
    #actu #bg-actu .header h1{font-size: 1.75em; padding: 0 75px;}
    #actu #liste-actu .views-row img{width: 100%; height: auto; margin: auto; padding: 0 5px;}
    #actu #liste-actu .views-row p{padding: 0 25px;}
    #actu #liste-actu .header-actu{flex-direction: column;}
    #actu #liste-actu .header-actu h2{text-align: center; font-size: 2em; margin-left: 0; padding: 0 20px; margin: 25px 0;}
}

/**
** Recettes
**/
#recettes #bg-recettes{height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; display: flex; justify-content: center; align-items: center;}
#recettes #bg-recettes h1{color: var(--main-white-color); font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#recettes .bandeau{width: 100%; height: 128px; display: flex; justify-content: center; align-items: center; user-select: none;}
#recettes .bandeau.on{background-color: var(--main-bright-green-color); transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
#recettes .bandeau.off{background-color: var(--main-green-color); transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
#recettes .bandeau .trigger{font-family: 'Montserrat-B'; font-size: 2.5em; color: var(--main-white-color); text-transform: uppercase; cursor: pointer;}
#recettes .views-row{width: 100%;}
#recettes .views-row .container{margin-top: 50px; display: flex; max-width: 1366px; position: relative;}
#recettes .views-row .hide{display: none;}
#recettes .recette-bg{background-image: url('/sites/default/files/bg-recette.svg'); background-repeat: no-repeat; width: 783px; height: 1136px; position: relative; z-index: 2;}
#recettes .recette-gap{height: 120px;}
#recettes .recette{padding-left: 225px; max-width: 735px; max-height: 880px; overflow-y: scroll;}
#recettes .recette h2{color: var(--main-blue-color); font-size: 2em; text-align: left; margin-bottom: 15px;}
#recettes .recette p{padding-left: 15px; font-size: 1.25em;}
#recettes .recette-img img{border-radius: 64px; position: absolute; top: 50px; /*right: 150px;*/ z-index: 1;}
#recettes .recette-img h3{font-family: 'Satisfy', serif; color: var(--main-green-color); font-size: 3em; margin-top: 500px; margin-left: 50px; white-space: nowrap;}
#recettes .recette-img li{color: var(--main-green-color); font-size: 1.25em; margin-left: 35px;}

@media (max-width: 1366px){
    #recettes #bg-recettes h1{font-size: 3.5em;}
}

@media (max-width: 1200px) {
    #recettes .views-row .container{flex-direction: column-reverse;}
    #recettes .recette-img{display: flex; flex-direction: column; align-items: center;}
    #recettes .recette-img img{position: unset;}
    #recettes .recette-img h3{margin-top: 20px; margin-left: 0;}
}

@media (max-width: 578px) {
    #recettes{overflow-x: hidden;}
    #recettes .bandeau .trigger{font-size: 1em;}
    #recettes .bandeau .trigger img{width: 30px; height: 30px;}
    #recettes .views-row .container{flex-direction: column;}
    #recettes #bg-recettes{height: 450px;}
    #recettes #bg-recettes .header h1{font-size: 1.75em; padding: 0 75px;}
    #recettes .recette-gap{height: 70px;} /** debug le scroll sur tel **/
    #recettes .recette{padding-top: 0; padding-left: 110px; max-width: 400px; height: 505px; overflow: scroll;}
    #recettes .recette-bg{width: 470px; height: 681px; background-size: cover; left: -60px;}
    #recettes .recette h2{font-size: 0.9em; margin-bottom: 10px; padding-left: 15px;}
    #recettes .recette p{margin-bottom: 0.75em;}
    #recettes .recette-img img{position: absolute; top: 585px; right: 10px; width: 350px; margin: auto; height: auto;}
    #recettes .recette p{font-size: 0.8em;}
    #recettes .recette-img h3{margin-top: 240px; margin-left: 25px;}
}

/**
** Où nous trouver?
**/
#trouver #bg-trouver{height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; display: flex; justify-content: center; align-items: center;}
#trouver #bg-trouver h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color);}

#trouver #carousel{display: flex; justify-content: center;}
#trouver #carousel .carousel-btn{margin: 0 35px; cursor: pointer;}
#trouver #carousel .carousel-btn:hover{box-shadow: none;}
#trouver #carousel .carousel-btn:focus{outline: none;}
#trouver #carousel .carousel{box-shadow: 2px 2px 5px rgba(0,0,0,0.3); height: 350px; width: 350px; overflow: hidden;}
#trouver #carousel .field--name-field-carousel{display: flex; transform: translateX(0); transition: transform 500ms ease-in-out;}
#trouver #carousel .field--name-field-carousel img{width: 350px; height: 350px; object-fit: contain;}
#trouver #carousel.carousel-btn:focus {outline: none;}

#trouver form #edit-actions{text-align: center;}
#trouver form #edit-actions-submit{background-color: var(--main-green-color); font-family: 'Satisfy', serif; font-size: 1.75em; padding: 0 25px;}
#trouver form .g-recaptcha{display: flex; justify-content: center;}

@media (max-width: 1366px){
    #trouver #bg-trouver h1{font-size: 3.5em;}
}

@media (max-width: 768px) {
    #trouver #bg-trouver{height: 450px;}
    #trouver #bg-trouver .header h1{font-size: 1.75em; padding: 0 75px;}
    #trouver #carousel{flex-direction: column; align-items: center;}
    #trouver #carousel .carousel-btn{display: none;}
    #trouver #logo-contact{width: 100%; height: auto; margin: auto;}
}

/**
** Fiche Produit
**/
#fiche-produit #bg-fiche-produit{height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: center; text-align: center; display: flex; justify-content: center; align-items: center;}
#fiche-produit #bg-fiche-produit h1{font-size: 4.75em; text-shadow: 9px 5px 0px var(--main-light-green-color); padding-bottom: 150px;}

#fiche-produit #liste-produits{margin-top: 100px;}
#fiche-produit #liste-produits .field--name-field-paragraphe-liste-produits{display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;}
#fiche-produit #liste-produits .field--name-field-paragraphe-liste-produits img{width: 200px; height: 200px; border-radius: 1997px; object-fit: cover; margin-bottom: 0;}
#fiche-produit #liste-produits .field--name-field-photo-produit{margin-bottom: 0;}
#fiche-produit #liste-produits .field--name-field-nom-produit{font-family: 'Satisfy', serif; font-size: 2.75em; color: var(--main-green-color); margin-bottom: 25px;}
#fiche-produit #liste-produits .field--name-field-paragraphe-liste-produits .field__item{display: flex; flex-direction: column; align-items: center;}

@media (max-width: 1366px){
    #fiche-produit #bg-fiche-produit h1{font-size: 3.5em;}
}

@media (max-width: 768px){
    #fiche-produit #bg-fiche-produit{height: 450px;}
    #fiche-produit #bg-fiche-produit h1{font-size: 1.75em;}
    #fiche-produit #liste-produits .field--name-field-paragraphe-liste-produits{grid-template-columns: repeat(1, 1fr);}
}

/**
** Newsletter
**/
footer form{background-color: var(--main-green-color); padding: 50px; color: var(--main-white-color); position: relative; z-index: 2;}
footer form .input{display: flex; text-transform: uppercase; justify-content: space-around; align-items: flex-end;}
footer form .input h2{color: var(--main-white-color); font-size: 1.6em; text-transform: uppercase;}
footer form .input #souscrire{display: flex;}
footer form .input span{font-family: 'Satisfy', serif; font-size: 2.5em; text-transform: capitalize;}
footer form .input #edit-e-mail{border-radius: 0; max-width: 320px;}
footer form .input #edit-e-mail:focus{outline: 0; border: none;}
footer form .input #edit-e-mail::placeholder{color: var(--main-black-color);}
footer form #edit-actions-submit, #edit-actions-submit--2{background-color: var(--main-white-color); color: var(--main-green-color); font-size: 1.6em; font-family: 'Satisfy', serif; padding: 0 20px; border-radius: 0; border-color: var(--main-green-color);}
footer form .rgpd{padding: 20px;}
footer form .checkbox #edit-checkbox--description{color: var(--main-white-color);}
footer form input[type="checkbox"]{border: none;}
footer form input[type="checkbox"]:focus, footer form input[type="checkbox"]:hover{outline: 0; border-color: var(--main-green-color);}

@media (max-width: 1366px){
    footer #block-subtheme-footer ul li a{font-size: 1em;}
}

@media (max-width: 992px) {
    footer form .input{align-items: center; flex-direction: column; text-align: center;}
    footer form .input #souscrire{flex-direction: column;}
}

/**
** Footer-fith
**/
footer.site-footer{padding-top: 0;}
footer .region-footer-fifth{display: flex; justify-content: space-between; font-size: 1.2em;}
footer #block-info p, #block-info a{color: var(--main-color);}
footer #block-subtheme-footer a{color: var(--main-color); text-transform: uppercase; padding: 0;}
footer #block-subtheme-footer a:hover{text-decoration: underline;}
footer #block-social{max-width: 215px;}
footer #block-social p{color: var(--main-color);}
footer #block-social img{display: inline-block; height: 30px;}
footer .legal{text-align: center; text-transform: uppercase;}
footer .legal a{color: var(--main-color);}

@media (max-width: 768px) {
    footer .region-footer-fifth{text-align: center; flex-direction: column;}
    footer #block-social{margin: auto;}
}