@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap");
/* Reset CSS */
/* Box sizing border-box reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Margin and padding reset */
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
code,
em,
img,
small,
strong,
sub,
sup,
ul,
ol,
li,
fieldset,
form,
label,
legend,
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* Typography reset */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

/* Lists reset */
ul,
ol {
  list-style: none;
}

/* Links reset */
a {
  text-decoration: none;
}

/* Tables reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Input and Textarea reset */
button,
input,
select,
textarea {
  font-size: 100%;
}

/* Reset form elements to match their parent */
button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/* Standardize form elements */
button,
input {
  background-color: transparent;
  border: none;
}

/* Textarea vertical alignment fix */
textarea {
  vertical-align: top;
}

/* Default cursor for clickable elements */
button,
input,
select,
textarea {
  cursor: pointer;
}

/* Re-enable previously disabled hidden elements */
[hidden] {
  display: initial;
}

/* Optional - Add your own custom styles below this line */
:root {
  /* default */
  /* colors */
  --black: #000000;
  --white: #ffffff;
  --beige: #F6EEDA;
  --orange: #FF931E;
  --red: #FE5051;
  --bleu-marine: #344D6A;
  --green: #85E575;
  --brown: #AE3031;
}

body {
  font-family: "Poppins", sans-serif;
}

.n2 {

}
.n2__content1 {
  position: relative;
  width: 100%;
  height: 115vh;
  background-size: cover;
  background-image: url("../../dist/assets/svg/bgprintemps.svg");
}
.n2__vache {
  width: 25%;
  position: absolute;
  left: 8rem;
  bottom: -7rem;
}
.n2__content1_title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 78%;
  left: 32%;
  color: white;
  text-align: start;

  font-weight: 700;
  font-size: 250%;
  line-height: 125%;
}
.n2__info_title {
  padding: 6rem;
  font-size: 3rem;
  font-weight: 500;
  color: var(--beige);
  text-align: center;
  padding-bottom: 15rem;
}
.n2__info {
  position: relative;
  width: 100%;
  height: 115vh;
  background-image: url("../../dist/assets/svg/fondvertarc.svg");
  background-size: cover;
  background-position: center;
}
.n2__info_content {
  display: flex;
  flex-direction: column;
  transform: translateY(-10%);
  gap: -10;
}
.n2__lait {
  position: relative;
  width: 100%;
  height: 115vh;
  background-image: url("../../dist/assets/svg/bglait.svg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.n2__lait_gauche {
  position: absolute;
  top: 30%;
  left: -5%;
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.n2__lait_title {
  color: var(--bleu-marine);
  font-size: 6rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.3rem;
}
.n2__lait_title2 {
  color: var(--bleu-marine);
  font-size: 3rem;
  font-weight: 700;
}
.n2__bouteille {
  width: 30%;
}
.n2__lait_droit {
  position: absolute;
  left: 50%;
  top: 30%;
}
.n2__lait_txt {
  padding-top: 5rem;
  position: absolute;
  color: var(--bleu-marine);
  font-size: 1rem;
  font-weight: 500;
}
.n2__lait_goutte {
  position: absolute;
  width: 15%;
  left: 80%;
  top: 5%;
}
.n2__lait_icones {
  padding-top: 30%;
  display: flex;
}
.n2__lait_icone {
  width: 50%;
}
.n2__arrosage {
  width: 10%;
}

.vert {
  color: #85E575;
  font-weight: 800;
}

.eau {
  position: absolute;
  left: 55%;
}

.egal {
  position: absolute;
  left: 39%;
  top: 30%;
}

.viande {
  background-color: var(--rouge);
}

.n1 {

}
.n1__content {
  text-transform: uppercase;
  width: 100vw;
  height: 115vh;
  background-image: url("../../dist/assets/svg/bghiver.svg");
  background-size: cover;
  background-position: center;
}
.n1__title {
  position: absolute;
  bottom: -10%;
  left: 30%;
  font-weight: 800;
  font-size: 2rem;
  color: var(--white);
  line-height: 50px;
}
.n1__yeti {
  position: absolute;
  left: -2rem;
  bottom: -10rem;
}
.n1__info {
  position: relative;
  width: 100vw;
  height: 115vh;
  background-image: url("../../dist/assets/svg/fond_bleu_arc.svg");
  background-size: cover;
  background-position: center;
}
.n1__info_title {
  padding: 6rem;
  font-size: 3rem;
  font-weight: 500;
  color: var(--beige);
  text-align: center;
  bottom: 10rem;
}
.n1__assiette_content {
  position: relative;
}
.n1__assiette {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -30%);
  z-index: 1;
}
.n1__assiette_anim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-53%, -38%);
  z-index: 2;
}
.n1__info_content {
  display: flex;
  flex-direction: column;
}
.n1__info_box {
  background-color: var(--beige);
  width: 23rem;
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.n1__info_nb {
  display: flex;
  font-size: 8rem;
  font-weight: 700;
  color: var(--bleu-marine);
  line-height: 124.838%;
  letter-spacing: -5px;
  margin-left: 2rem;
}
.n1__info_txt {
  color: var(--beige);
  margin-left: 2rem;
  margin-top: 0.5rem;
}
.n1__vague {
  background-image: url("../../dist/assets/svg/vague.svg");
  position: relative;
  width: 100vw;
  height: 115vh;
  background-size: cover;
  background-position: top;
}
.n1__poisson1 {
  position: absolute;
  width: 50%;
  height: 50%;
  left: -10%;
  top: -10%;
}
.n1__poisson2 {
  position: absolute;
  width: 30%;
  height: 30%;
  left: 20%;
  top: 5%;
}
.n1__vague_title {
  margin-left: 5rem;
  position: absolute;
  font-size: 3rem;
  top: 30%;
  color: var(--orange);
}
.n1__vague_infos {
  position: relative;
  height: 50rem;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 6rem;
}
.n1__vague_info_box {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 30%;
  width: 70%;
  height: 70%;
  padding: 2rem;
}
.n1__consom35_txt {
  text-align: center;
  padding-top: 2rem;
}
.n1__consom35 {
  width: 70%;
  position: absolute;
  margin-bottom: 70%;
}
.n1__filet {
  position: absolute;
  width: 160%;
  bottom: 40%;
}
.n1__filet_txt {
  text-align: center;
  padding: 2rem;
}
.n1__epuisement {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.n1__epuisement_title {
  font-size: 1.5rem;
  text-align: center;
}
.n1__epuisement_poisson {
  width: 25%;
  height: 25%;
}
.n1__progression {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.n1__progression_box {
  position: absolute;
  top: 0%;
  display: flex;
  margin: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--beige);
  width: 40rem;
  height: 8rem;
  border-radius: 100px;
}
.n1__progression_title {
  color: var(--orange);
  font-size: 40px;
}
.n1__progression_info {
  display: flex;
  flex-direction: row;
  width: 100vw;
  padding-top: 10%;
}
.n1__progression_info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 50%;
}
.n1__progression_info_txt {
  text-align: center;
  width: 60%;
}
.n1__60poiss {
  width: 40rem;
  top: 30%;
  width: 70%;
  height: 70%;
}
.n1__poiss {
  width: 100vw;
}
.n1__progression_poiss {
  position: absolute;
  bottom: 20%;
  width: 75%;
  aspect-ratio: 1/1;
  top: 20%;
}
.n1__poiss33 {
  width: 50%;
}
.n1__progression_reconstitution {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 40%;
}
.n1__progression_nb {
  display: flex;
  font-size: 4rem;
  font-weight: 700;
  color: var(--bleu-marine);
  line-height: 124.838%;
  letter-spacing: -5px;
}
.n1__progression_txt {
  text-align: center;
}
.n1__poiss {
  width: 50%;
}
.n1__viande {
  background-image: url("../../dist/assets/svg/bgrouge.svg");
  width: 100vw;
  height: 115vh;
  background-size: cover;
  background-position: center;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.yeti {
  position: absolute;
  left: 20rem;
  bottom: 100rem;
}

.blue {
  color: #C8E1FF;
  font-weight: 800;
}

.bleu_marine {
  color: var(--bleu-marine);
}

.red {
  color: var(--red);
  font-weight: 700;
}

.kg {
  font-size: 3rem;
}

.droite {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}

.gauche {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.gauche_txt {
  text-align: end;
  margin-right: 2rem;
}

.test {
  width: 100vw;
  height: 115vh;
  background-size: cover;
  background-position: center;
  padding-bottom:20% ;
}

.n3 {

}
.n3__content {
  text-transform: uppercase;
  width: 100%;
  height: 115vh;
  background-image: url("../../dist/assets/svg/bgete.svg");
  background-size: cover;
  background-position: center;
  position: relative;
}
.n3__lapin {
  width: 70%;
  position: absolute;
  left: -10%;
}
.n3__info {
  position: relative;
  width: 100%;
  height: 115vh;
  background-image: url("../../dist/assets/svg/bgrose.svg");
  background-size: cover;
  background-position: center;
}
.n3__assiette {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 53%;
  left: 54%;
  transform: translate(-55%, -30%);
  z-index: 1;
}
.n3__info_nb {
  display: flex;
  font-size: 8rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 124.838%;
  letter-spacing: -5px;
  margin-left: 2rem;
}
.n3__tomate {
  width: 100%;
  height: 115vh;
  background-image: url("../../dist/assets/svg/bgbleu_tomates.svg");
  background-size: cover;
  background-position: center;
  position: relative;
}
.n3__feuillage {
  display: flex;
  justify-content: space-between;
  transform: translateY(-25%);
  z-index: 1;
}
.n3__soleil {
  z-index: 2;
  position: absolute;
  width: 20%;
  left: 50%;
  bottom: 40%;
}
.n3__tomate_serre {
  position: absolute;
  bottom: 0%;
  width: 60%;
}
.n3__tomate_chiffre {
  position: absolute;
  left: 60%;
  font-size: 5rem;
  color: var(--red);
  font-weight: 700;
  line-height: 5.5rem;
}
.n3__tomate_txt1 {
  position: absolute;
  font-size: 1.2rem;
  left: 38%;
  top: 20%;
  color: var(--white);
  font-weight: 500;
  width: 30%;
  text-align: center;
}
.n3__tomate_txt2 {
  font-size: 1.2rem;
  position: absolute;
  left: 70%;
  bottom: 10%;
  color: var(--white);
  font-weight: 500;
  width: 20%;
  text-align: center;
}

.marron {
  color: var(--brown);
  font-weight: 800;
}

.n4 {

  color: var(--bleu-marine);
}
.n4__planete {
  position: relative;
  width: 100%;
  height: 115vh;
  background-size: cover;
  background-image: url("../../dist/assets/svg/bgbleu.svg");
  z-index: 1;
}
.n4__title {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.n4__title1 {
  color: var(--beige);
  font-size: 2rem;
}
.n4__title2 {
  color: var(--beige);
  font-size: 3rem;
}
.n4__cause {
  top: -24%;
  width: 100%;
  height: 115vh;
  background-size: cover;
  background-image: url("../../dist/assets/svg/bgarcbleu.svg");
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.n4__cause_txt {
  padding-top: 40%;
  font-size: 1.5rem;
  color: var(--bleu-marine);
  text-align: center;
  width: 70%;
}
.n4__cause_icones {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  padding: 5rem;
  justify-content: center;
  align-items: center;
}
.n4__cause_engrais {
  width: 25%;
}
.n4__cause_pest {
  width: 25%;
}
.n4__cause_kk {
  width: 25%;
}
.n4__consequences {
  padding: 1rem;
  padding-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.n4__react {
  width: 30%;
}
.n4__menage_content {
  width: 35%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.n4__menage_title {
  font-size: 6rem;
  color: var(--red);
  font-weight: 700;
}
.n4__temp {
  width: 80%;
}

.yeti_bigger {
  width: 40%;
}

.n5 {

}
.n5__conseils {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url("../../dist/assets/svg/bgbeige.svg");
  z-index: 100;
}
.n5__title_content {
  padding: 4rem;
  padding-top: 10%;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.n5__title {
  color: var(--black);
  font-size: 3rem;
  font-weight: 500;
}
.n5__title_icones {
  width: 5%;
}
.n5__info {
  padding-top: 5%;
  gap: 5rem;
  display: flex;
  flex-direction: column;
}
.n5__info_box {
  background-color: var(--beige);
  width: 25rem;
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.n5__limiter {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.n5__limiter_txt {
  font-size: 1.5rem;
  padding-left: 10%;
  width: 70%;
  justify-content: center;
  align-items: center;
}
.n5__date {
  display: flex;
  flex-direction: row-reverse;
}
.n5__yeti {
  position: absolute;
  right: 14%;
  width: 130%;
}
.n5__lapin {
  position: absolute;
  width: 50%;
  right: 40%;
}
.n5__vache {
  position: absolute;
  width: 60%;
  left: 70%;
}
.n5__fin {
  position: relative;
  width: 100vw;
  height: 115vh;
  background-color: var(--beige);
  background-size: cover;
  background-position: center;
}
.n5__3animaux {
  width: 60%;
  position: absolute;
  left: 20%;
  bottom: -2%;
  z-index: 1;
}
.n5__fin_planete {
  z-index: 0;
  position: absolute;
  bottom: -20%;
  width: 100vw;
}

.orange {
  background-color: var(--orange);
  height: 13rem;
}

.green {
  background-color: var(--green);
  height: 13rem;
}

.rouge {
  background-color: var(--red);
  height: 13rem;
}

.conseils {
  position: relative;
}


.viande1 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url("../../dist/assets/svg/bgviande1.svg");
}

.viande2 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url("../../dist/assets/svg/bgviande2.svg");
}

.viande3 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url("../../dist/assets/svg/bgviande3.svg");
}

.viande__title {
  margin-left: 5rem;
  position: absolute;
  font-size: 3rem;
  top: 15%;
  color: var(--beige)
}
  
.viande__poule {
  position: absolute;
  left: -18%;
    bottom: -30%;
  width: 80%;
}

.bold {
  font-weight: 700;
}
/*# sourceMappingURL=style.css.map */