:root {
  --vert_principal: #7d9e23;
  --vert_secondaire: #5e8c2b;
  --vert_clair: #a1dd34;
  --orange: #f7951e;
  --rouge: #e44d26;
  --marron: #4b3621;
  --blanc_casse: #f4f1ed;
  --noir: #2e2e2e;
}
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-VariableFont_wght.ttf");
}
@font-face {
  font-family: InterItalic;
  src: url("../fonts/Inter-Italic-VariableFont_wght.ttf");
}
@font-face {
  font-family: Raleway;
  src: url("../fonts/Raleway-VariableFont_wght.ttf");
}
@font-face {
  font-family: RalewayItalic;
  src: url("../fonts/Raleway-Italic-VariableFont_wght.ttf");
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  scroll-behavior: smooth;
}
a {
  padding: 4%;
  background-color: var(--vert_principal);
  color: white;
  font-family: Raleway;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
p {
  font-family: Inter;
}
h2 {
  font-family: Raleway;
  font-weight: bold;
}
h3 {
  margin: auto;
  text-align: center;
  font-family: Raleway;
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 4%;
  color: var(--noir);
}
h4 {
  margin: 2% 0;
  font-size: 1.1em;
  font-family: Raleway;
  font-weight: bold;
  color: var(--noir);
}
main section {
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10%;
}
main section article {
  width: 30%;
  display: flex;
  flex-wrap: wrap;
}
main section article img {
  width: 100%;
}
main section article a {
  width: 100%;
}
main section article p {
  margin-bottom: 4%;
}

#lienorange {
  font-family: Raleway;
  font-weight: bold;
  background-color: var(--orange);
  width: 15%;
  padding: 1%;
  display: flex;
  margin: auto;
  justify-content: center;
}

/* --------------------------------------
   --------------- HEADER ---------------
   -------------------------------------- */
header > div {
  width: 80%;
  padding: 0 10%;
  margin: auto;
  justify-content: space-between;
  height: 8vh;
  background-color: white;
}
header div {
  display: flex;
  align-items: center;
}
header h1 {
  position: absolute;
  top: -1.2vh;
  left: 9.5%;
  z-index: 10;
}
header h1 a{
  padding: 0;
  background-color: transparent;
}
header h1 img {
  width: 100%;
}
header div p {
  display: flex;
  align-items: center;
  width: max-content;
  margin-left: 5%;
  font-weight: bold;
}
header div p:last-of-type {
  width: 40%;
  margin-left: 20%;
}
header div p img {
  width: 10%;
  margin-right: 3%;
}
header div a img {
  width: 100%;
}
header div a {
  padding: 0;
  background-color: transparent;
  color: var(--noir);
  margin: 0 2%;
}
header div div {
  width: 40%;
  justify-content: end;
}
/* header div a:last-of-type {
  background-color: var(--orange);
  font-family: Raleway;
  font-weight: bold;
  padding: 2.5%;
  margin-left: 6%;
  display: block;
  width: max-content;
  color: white;
} */
#nav_mobile {
  display: none;
}
nav {
  background-color: var(--vert_principal);
  /* position: absolute;
  top: 8vh; */
  height: 6vh;
  align-items: center;
  display: flex;
  width: 67%;
  margin-left: 18%;
  padding-left: 5%;
  padding-right: 10%;
  justify-content: space-around;
}
nav a {
  background-color: transparent;
  padding: 0;

}
nav img {
  display: none;
}

/* --------------------------------------
   ---------------- ACCUEIL -------------
   -------------------------------------- */

#accueil {
  padding-top: 20vh;
  background-color: var(--blanc_casse);
}
#banniereAccueil {
  background-image: url("../images/bg-header-accueil.jpg");
  margin-bottom: 0;
  background-size: cover;
  height: 70vh;
}
.banniere {
  height: 65vh;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 20vh;
}
.banniere h2 {
  font-size: 3.5em;
  margin-left: 20%;
  width: 50%;
  color: var(--noir);
}
.banniere span {
  display: flex;
  padding-top: 22vh;
  margin-left: 20%;
  font-family: Inter;
  font-weight: bold;
}
.banniere p {
  font-size: 3.5em;
  margin-left: 20%;
  width: 45%;
  font-family: Raleway;
  font-weight: bold;
  color: var(--noir);
}
.banniere a {
  width: max-content;
  padding: 1% 2%;
  display: flex;
  margin-top: 2%;
  margin-left: 20%;
}
#produitAccueil article,
#produitAccueil a {
  display: block;  
}
#produitAccueil article p:first-of-type {
  background-color: var(--vert_principal);
  font-family: Inter;
  position: relative;
  top: 1.5em;
  font-weight: bold;
  color: white;
  padding: 2.5% 3%;
  margin-bottom: 0;
  transform: rotate(-3deg);
  display: inline-block;
}
#produitAccueil article:first-of-type p:first-of-type,#produitAccueil article:first-of-type a {
  background-color: var(--vert_clair);
}
#produitAccueil article:last-of-type p:first-of-type,
#produitAccueil article:last-of-type a {
  background-color: var(--rouge);
}
#produitAccueil article img{
  max-height: 35vh;
  width: auto;
  display: block;
  margin:auto;
  max-width: 80%;
}
#produitAccueil h2,
#produitAccueil p {
  padding: 0 0%;
}
#produitAccueil article a {
  width: 100%;
  margin: auto;
}
main section article h2 {
  margin: 4% 0;
}
#engagement {
  justify-content: center;
}
#engagement h4 {
  text-align: center;
  font-size: 1em;
}
#engagement article {
  justify-content: center;
  width: 33%;
}
#engagement article p {
  text-align: center;
  padding: 0 5%;
}
#engagement article img {
  width: 20%;
  margin: 0 40%;
}
#solution {
  margin-bottom: 5%;
}
#solution article {
  width: 31.5%;
}
#solution article h4 {
  position:relative;
  padding-left: 12%;
  width: 100%;
  height: 3.5vh;
  display: flex;
  align-items: center;
  margin: 6% 0 0;
}
#solution article h4::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 100%;
      background-image: url('../images/mrc-carre.svg'); /* ← ton image ici */
      background-repeat: no-repeat;
      background-size: contain; /* ou cover */
      background-position: center;
    }
#solution article span {
  width: 100%;
  font-family: RalewayItalic;
  color: var(--vert_secondaire);
  font-size: 0.9em;
  margin-bottom: 2%;
}
#solution article span,
#solution article p {
  margin-left: 12%;
}
#lienorange {
  width: max-content;
  padding: 1% 1.5%;
  display: flex;
  margin: auto;
  justify-content: center;
}
#accueil aside {
  width: 100%;
  color: white;
  background-image: url('../images/bg-equipe-desk.webp');
  background-repeat: no-repeat;
  background-size: 100% 85%;
  margin-top: 7%;
  padding: 17vh 0 30vh;
  /* margin-bottom: 15vh; */
}
#accueil aside h3 {
  padding-top: 2%;
  margin-bottom: 2%;
  color: white;
}
#accueil aside p {
  text-align: center;
}
#accueil aside a {
  padding: 0.8% 2%;
  background-color: transparent;
  border: 3px solid white;
  display: block;
  width: max-content;
  margin: 2% auto;
}
#accueil section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 2%;
}
/* --------------------------------
   ------------ PRODUITS ----------
   -------------------------------- */

#banniereProduits {
  margin-bottom: 10vh;
  background-image: url("../images/bg-header-produits.jpg");
  background-position: center;
}

#banniereProduits a {
  background-color: var(--orange);
}
main{
  position: relative;
}
#navProduit {
  z-index: 1000;
  position: absolute;
  right: 0;
  top: 0; 
  width: 20%;
  background: var(--noir);
  text-align: center;
  transform: rotate(-90deg);
}
#navProduit a {
  color: white;
  background: none;
}
/* #navProduit a img{
  width: 100%;
} */
.anchor{
  height: 1em;
  display: block;
}
/* #navProduit a:nth-of-type(1) {
  background-image: url('../images/filtre-cup.webp');
}
#navProduit a:nth-of-type(1):hover{
  background-image: url('../images/filtre-cup-actif.webp');
}
#navProduit a:nth-of-type(2) {
  background-image: url('../images/filtre-barquette.webp');
}
#navProduit a:nth-of-type(2):hover{
  background-image: url('../images/filtre-barquette-actif.webp');
}
#navProduit a:nth-of-type(3) {
  background-image: url('../images/filtre-sous-vide.webp');
}
#navProduit a:nth-of-type(3):hover{
  background-image: url('../images/filtre-sous-vide-actif.webp');
}
#navProduit a:nth-of-type(4) {
  background-image: url('../images/filtre-download.webp');
  height: 95px;
}
#navProduit a:nth-of-type(4):hover{
  background-image: url('../images/filtre-download-actif.webp');
} */
.format {
  width: 80%;
  margin: auto;
  margin-bottom: 3%;
}
.format p {
  font-size: 2em;
  font-family: RalewayItalic;
}
.format h3 {
  text-align: left;
  font-size: 3rem;
  margin-bottom: 1%;
}
.format span {
  background-color: var(--vert_clair);
  font-family: Inter;
  font-size: 20px;
  font-weight: bold;
  color: white;
  padding: 0.5% 1.2%;
  margin-bottom: 5%;
}
#conditionnement span {
  background-color: rgb(204, 85, 49);
}
#cups {
  width: 60%;
  margin-left: 10%;
}
#cups article img{
  height: 25vh;
  width: auto;
  margin: 0 auto 1em;
}
#cups p{
  width: 100%;
  text-align: center;
  margin-top: 3em;
  font-weight: bold;
  font-size: 1.3em;
}
#barquettes .format {
  width: 100%;
  text-align: left;
  margin-bottom: 8vh;
}
#cups,
#barquettes,
.sousvide {
  text-align: center;
}
#cups h4,
#barquettes h4,
.sousvide h4 {
  width: 100%;
}
#barquettes {
  justify-content: center;
  width: 80%;
  padding: 5% 10% 3%;
  background-image: url("../images/bg-barquette.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.grammage-barquette{
  background-color: var(--vert_principal);
  width: auto;
  display: inline-block;
  margin: auto;
  height: 1.4em;
  line-height: 1.4em;
  padding: 0.4em 1em;
  text-align: center;
  font-weight: bold;
  color: white;
}
#barquettes .format span {
  background-color: var(--vert_principal);
}
#barquettes article {
  width: 28%;
  margin-bottom: 6% !important;
  text-align: center;
}
/* #barquettes article:nth-of-type(2) {
  margin: 0 12.5%;
}
#barquettes article:nth-of-type(4),
#barquettes article:nth-of-type(5) {
  margin: 0 5%;
} */
#barquettes article img {
  height: 25vh;
  width: auto;
  margin: auto;
}
/* .sousvide:last-of-type {
  display: none;
} */
.sousvide div {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.sousvide div > h4{
  color: var(--rouge);
  text-align: left;
  font-size: 2rem;
}
.sousvide div > p.julienne{
  color: var(--vert_secondaire);
  width: 100%;
  text-align: left;
  margin: -1em 0 2em;
  font-weight: bold;
}
.sousvide div:nth-of-type(2) {
  width: 100%;
}
.sousvide article {
  margin-bottom: 5%;
}
.sousvide div article {
  width: 22.5%;
  margin-right: 2.5%;
}
.sousvide article img{
  height: 25vh;
  width: auto;
  max-width: 100%;
  margin: auto;
}

/* -------------------------------
   ----------- HISTOIRE ----------
   ------------------------------- */
#banniereHistoire {
  background-image: url("../images/bg-header-histoire.jpg");
  background-position: 75% center;
  background-size: cover;
}
.bannierePetite {
  height: 55vh;
}
#presentation {
  display: flex;
  flex-wrap: wrap;
}
#presentation div {
  width: 47%;
}
#presentation img {
  width: 42%;
}
#presentation h3 {
  width: 80%;
  margin: 0;
  margin-bottom: 5%;
  text-align: left;
}
#histoireCroissance {
  background-image: url("../images/bg-header-chiffre.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8% 0;
  margin-bottom: 5%;
}
#histoireCroissance article {
  width: 50%;
  margin-left: 10%;
  display: flex;
  flex-wrap: wrap;
}
#histoireCroissance article h3 {
  text-align: left;
  width: 100%;
  margin-bottom: 2%;
}
#histoireCroissance div {
  margin-top: 7%;
  width: 30%;
  margin-right: 10%;
  text-align: center;
  /* background: red; */
}
#histoireCroissance div span {
  color: var(--vert_principal);
  font-size: 2.2em;
  font-weight: bold;
}
#histoireCroissance div span img{
  height: 3em;
}
#histoireCroissance div p {
  font-family: Raleway;
  font-weight: bold;
  margin-top: -2%;
}
#etapes {
  margin-bottom: 5%;
}
#etapes article {
  padding: 1%;
  height: max-content;
  margin-bottom: 3%;
  background-color: var(--blanc_casse);
}
#etapes article h4 {
  margin: 0 0 4%;
}
#etapes p:first-of-type {
  font-size: 1.5em;
  color: var(--vert_principal);
  width: 100%;
  font-weight: bold;
}
#partenaire {
  padding: 3% 15%;
  display: block;
  text-align: center;
  width: 50%;
  background-color: var(--blanc_casse);
}
#partenaire h3 {
  margin-bottom: 2%;
}
#partenaire span {
  color: var(--vert_principal);
  font-weight: Raleway;
  font-weight: bold;
}
#partenaire a {
  display: block;
  margin: 3% auto 0;
  width: max-content;
  padding: 2% 3%;
}

/* ------------------------------
   ----------- CONTACT ----------
   ------------------------------ */
#banniereContact {
  background-image: url("../images/bg-header-contact.jpg");
}
#contact h3 {
  margin-bottom: 0;
}
#contact span {
  text-align: center;
  display: block;
  padding: 0.5% 0 3%;
  width: 40%;
  margin: auto;
}

form {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
form p{
  width: 100%;
}
label {
  width: 48%;
  margin-bottom: 1%;
  font-weight: bold;
  font-family: Raleway;
}
label input {
  width: 98%;
  padding: 1em 0;
  border: solid 2px #C0C0C0;
  margin-top: 0.5vh;
  padding-left: 2%;
}
label[for="mail"] {
  width: 100%;
}
form > p {
  font-weight: bold;
  font-family: Raleway;
  margin-top: 1%;
}
textarea {
  width: 98%;
  padding-left: 2%;
  min-height: 15vh;
  margin-top: 0.5vh;
  border: solid 2px #C0C0C0;
}
input[type="submit"] {
  width: 30%;
  margin-top: 4%;
  padding: 1.5%;
  background-color: var(--orange);
  font-size: 1.05em;
  font-weight: bold;
  font-family: Raleway;
  color: white;
  border: none;
}
#contact section {
  align-items: flex-start;
}
#contact section div {
  background-color: var(--blanc_casse);
  margin-top: 1.5%;
  width: 33%;
  padding: 0.5% 0;
}
#contact section div h4 {
  margin: 3% 0 8%;
  padding-left: 5%;
}
#contact section div p {
  display: flex;
  align-items: center;
  margin-bottom: 3%;
  padding-left: 5%;
}
#contact section div p img {
  margin-right: 2%;
}
#contact section div a {
  position: absolute;
  padding: 0.8% 1%;
  margin-top: 1.5%;
  background-color: white;
  border: solid 2px var(--vert_principal);
  color: var(--vert_principal);
}
[name="humain"]{
  background:rgb(225, 228, 51)
}

/* ------------------------------
   --------- FOOTER -------------
   ------------------------------*/

footer {
  width: 85%;
  padding: 5% 7.5% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-image: url("../images/footer-bg-desk.jpg") !important;
  background-repeat: no-repeat;
  background-size: cover;
}
footer h4 {
  margin-bottom: 5%;
  color: var(--marron);
}
footer > div {
  width: 22%;
}
footer > div:first-of-type img {
  width: 85%;
}
footer > div:first-of-type p img {
  width: 17%;
  margin: 5% 4% 5% 0;
}
footer > div:first-of-type p {
  display: flex;
  align-items: center;
  margin: 7% 0;
  font-size: 1.1em;
}
footer #lienorange {
  width: 100%;
  padding: 5% 0;
}
footer div:nth-of-type(2) a:nth-of-type(1) {
  background-image: url("../images/header-footer/footer-cup.webp") !important;
}
footer div:nth-of-type(2) a:nth-of-type(2) {
  background-image: url("../images/header-footer/footer-barquette.webp") !important;
}
footer div:nth-of-type(2) a:nth-of-type(3) {
  background-image: url("../images/header-footer/footer-sous-vide.webp") !important;
}
footer div:nth-of-type(2) a {
  background-size: cover;
  padding: 12% 10% 5% 5%;
  margin-bottom: 4%;
  text-align: left;
  display: block;
  width: 85%;
  font-size: 1.1em;
  font-weight: bold;
}
footer div:nth-of-type(3),
footer div:nth-of-type(4) {
  width: 26%;
}
/* footer div:nth-of-type(3) h4:first-of-type,
footer div:nth-of-type(4) h4 {
  min-height: 4vh;
} */
footer div:nth-of-type(3) p {
  /* line-height: 1.6em; */
  display: flex;
  margin-bottom: 1em;
}
footer div:nth-of-type(3) p img{
  margin-right: 1em;
}
/* footer div:nth-of-type(3) h4:last-of-type {
  margin-top: 4vh;
} */
footer div:nth-of-type(4) {
  width: 24%;
}
footer div:nth-of-type(4) p img {
  width: 10%;
  margin-right: 5%;
}
footer div:nth-of-type(4) p {
  display: flex;
  margin-bottom: 2%;
}
footer div:nth-of-type(4) a {
  background-color: transparent;
  display: block;
  margin-top: 5vh;
  width: 60%;
  border: 3px solid var(--vert_principal);
  color: var(--vert_principal);
}
footer section {
  display: flex;
  width: 100%;
  margin-top: 2%;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1%;
}
footer section div {
  width: 28%;
}
footer section a {
  padding: 0;
  background-color: transparent;
  font-family: Inter;
  color: black;
  font-weight: normal;
}



 footer a#correctif{
    background-color: var(--blanc_casse) !important;
  }

  footer a#prendrecontact{
    background-color: var(--blanc_casse);
    border: 2px solid var(--vert_principal);
    color: var(--vert_principal);
  }