*,
::before ::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/*
  Les styles pour certaines de la page index.html
*/

nav {
  min-height: 5vh;
}

nav a {
  font-family: "Arimo-Bold";
  font-size: 15pt;
  color: black;
  text-decoration: none;
}


nav a:hover {
  color: #be7137;
}

main {
  font-family: 'Trirong';
}

footer {
  background-color: rgb(44, 44, 44);
  height: 300px;
  color: white;
}

footer img {
  margin-top: -50px;
}

footer p {
  font-size: small;
  text-align: center;
  padding-top: 110px;
}

footer p span {
  display: block;
}


/*
  /////////////////////////////////////////////////////////
  ///           Les ids de la page index.html           ///
  /////////////////////////////////////////////////////////
*/

#nav {
  height: 10vh;
}

#nav .logo {
  position: absolute;
}

#section-1 {
  background-image: url("../images/IllustrationHero.jpg");
  min-height: 140vh;
  max-height: 1150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#img-texte {
  background-image: url("../images/EleveursDeSaveurs.png");
  height: auto;
  width: 852px;
  margin-top: 25%;
  margin-left: 38%;
  background-repeat: no-repeat;
  background-size: contain;
}

#section-2 {
  background-color: #f5f1e8;
  min-height: 100vh;
  max-height: 1150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#section-2 h2 {
  margin-top: 10vh;
  margin-bottom: 5vh;
  font-family: "Arimo-Bold";
  font-size: 29pt;
  color: #be7137;
}

#section-2 h1 {
  margin-top: 10vh;
  margin-bottom: 5vh;
  font-family: "Trirong-Medium";
  font-size: 100px;
  color: #E1C45D;
}

#section-1 p,
#section-2 p {
  color: #221f1f;
}

#section-2 p {
  color: #221f1f;
}

#inspire {
  width: 50%;
  margin-left: 25%;
}

#inspire p {
  font-family: "TriRong-SemiBold";
  font-size: 23px;
}

#eleveurs {
  width: 50%;
  margin-left: 25%;
}

#eleveurs p {
  font-family: "Arimo";
  font-size: 13px;
}

#section-3 {
  background-color: #ffffff;
  min-height: 100vh;
  max-height: 1150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-bottom: 1vh;
}

#produits {
  width: 100%;
  padding: 5vw;
}

#produits h2 {
  font-family: "Arimo-Bold";
  font-size: 29px;
  color: #be7137;
  margin-bottom: 5vh;
}

#produits p {
  font-family: "Trirong-SemiBold";
  font-size: 20px;
  color: #221f1f;
  text-align: center;
  width: 55%;
  margin-left: 22%;
}

#produits-images div {
  min-height: 30vh;
  padding-left: 8%;
  border-right: 1px solid #D1D3D4;
}

#produits-images div div {
  max-height: 240px;
}

#poulet .icone {
  background-image: url("../images/Poulet-Exact.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: -0.1vw;
}

#poulet .etiquette {
  background-image: url("../images/EtiquettePouletGrain.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 30vh;
  margin-left: -25%;
}

#poulet .icone-texte {
  margin-left: -4.20vw;
}

#lapin .icone {
  background-image: url("../images/Lapin-Exact.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 1vw;
}

#lapin .etiquette {
  background-image: url("../images/EtiquetteLapin.png");
  margin-left: -25%;
}

#lapin .icone-texte {
  margin-left: 1vw;
}

#veau .icone {
  background-image: url("../images/Veau-Exact.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 1.5vw;
}

#veau .etiquette {
  background-image: url("../images/EtiquetteVeauLait.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: -25%;
}

#veau .icone-texte {
  margin-right: 2vw;
  margin-left: -2vw;
}

#dinde .icone {
  background-image: url("../images/Dinde-Exact.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: -0.1vw;
}

#dinde .etiquette {
  background-image: url("../images/EtiquetteDinde.png");
  margin-left: -25%;
}

#cornouailles .icone {
  background-image: url("../images/PoulerCornouailles-Exact.png");
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 4vw;
}

#cornouailles .etiquette {
  background-image: url("../images/EtiquettePouletCornouaille.png");
}

#cornouailles .icone-texte {
  margin-right: 10vw;
}

#pintade .icone {
  background-image: url("../images/Pintade-Exact.png");
  margin-left: 20%;
}

#pintade .etiquette {
  background-image: url("../images/EtiquettePintade.png");
}

#pintade .icone-texte {
  margin-left: 15%;
}

#caille .icone {
  background-image: url("../images/Caille-Exact.png");
  margin-left: 3vw;
}

#caille .etiquette {
  background-image: url("../images/EtiquetteCaille.png");
}

#caille .icone-texte {
  margin-left: 11%;
}

#dinde,
#caille {
  border-right: 0px solid none;
}

#icones-haut {
  width: 100vw;
  margin-right: -1vw;
  margin-left: -3vw;
}

#icone-haut div div {
  height: 15vh;
}

#icones-bas {
  width: 100vw;
  margin-left: -3vw;
  margin-top: 4%;
  margin-bottom: 3vh;
}

#icones-haut div,
#icones-bas div {
  min-width: 8vw;
}

#section-4 {
  background-image: url("../images/Farm_1400x700.webp");
  min-height: 100vh;
  max-height: 1150px;
  width: 99vw;
  margin-left: -1vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#chez-nous-img {
  min-height: 40vh;
  margin-left: 32%;
  background-image: url("../images/IconeDeChezNous.png");
  background-position: center;
  background-repeat: no-repeat;
}

#section-4 p {
  font-family: "Trirong-Medium";
  font-size: 48pt;
  text-align: center;
}

#section-5 {
  background-image: url("../images/BandeauIllustration.jpg");
  min-height: 75vh;
  max-height: 1150px;
  width: 99vw;
  margin-left: -1vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  justify-content: space-evenly;
  display: flex;
  padding: 0vh 20vw 0vh 20vw;
}

#antibiotique .icone {
  background-image: url("../images/IconeSansAntibio-Exact.png");
}

#ferme-qc .icone {
  background-image: url("../images/IconeFermeQuebecoise-Exact.png");
}

#ecoresponsable .icone {
  background-image: url("../images/IconeEcoresponsable-Exact.png");
}

#antibiotique .icone,
#ferme-qc .icone,
#ecoresponsable .icone {
  margin-left: 15vw;
}

#antibiotique:hover,
#ferme-qc:hover,
#ecoresponsable:hover {
  transform: scale(1.5) translateY(5vh);
  transition: transform .2s;
}

#contact-logo {
  margin-left: 42%;
}

/*
  /////////////////////////////////////////////////////////
  ///       Les classes pour la page index.html         ///
  /////////////////////////////////////////////////////////
*/

.logo {
  /* max-height: 250px;
  max-width: 200px; */
  max-width: 262px;
  max-height: 325px;
  margin-left: 5%;
  background-image: url("../images/DeMaFerme_Logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icone {
  max-height: 8vh;
  max-width: 8vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.etiquette {
  height: 50vh;
  width: 50vh;
  min-width: 5vw;
  max-width: 15vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0vh;
  display: block;
}

.icone-texte {
  font-family: "Trirong-Bold";
  font-size: 30px;
  text-align: center;
  margin-top: -5vh;
}

.vertues {
  height: 280px;
  text-align: center;
  align-content: center;
  max-width: 100vw;
  min-width: 33vw;
  margin-top: 30%;
  transition: transform .5s;
}

.vertues .icone {
  height: 120px;
}