body {
  margin: 0;
  padding: 0;
  /* width: 100vw; */
}

h1 {
  font-family: 'Sulphur Point', sans-serif;
  font-weight: 700;
  font-size: 50px;
  margin: 0;
  letter-spacing: 5px;
}

h2 {
   font-family: 'Urbanist', sans-serif;
   font-weight: 600;
   font-size: 30px;
   margin: 0;
   letter-spacing: 5px;
   @media (max-width: 1100px) {
      font-size: 25px;
   }
   @media (max-width: 700px) {
      font-size: 20px;
   }

}

h3 {
   font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 25px;
  margin: 0;
  letter-spacing: 5px;
}

h4 {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 25px;
   margin: 0;
   letter-spacing: 2px;
}

h5 {
  font-family: 'Sulphur Point', sans-serif;
  font-weight: 500;
  font-size: 25px;
  margin: 0;
}

p {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 20px;
  margin: 0;
  letter-spacing: 2px;
}

ul {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 20px;
  margin: 0;
  letter-spacing: 2px;
  max-width: 620px;
     margin-right: auto;
     margin-left: auto;
     text-align: center;
}

li {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 20px;
  margin: 0;
  letter-spacing: 2px;
  max-width: 620px;
     margin-right: auto;
     margin-left: auto;
     text-align: center;
}

a:any-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  width: 100%;
  margin: 0;
  text-decoration : none;
}

button {
  font-family: 'Montserrat', sans-serif;
  border: none;
  background-color: #C79557 ;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
} 

/* NAVBAR */

.header {
   position: fixed;
   top: 0;
   width: 100vw;
   background: none;
   z-index: 1000;
   transition: all 0.3s ease;
}

.navbar {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px;
}

.logo{
   /* background-image: url(../images/logo-planchon-FSsD_aapqzp.png); */
   width: 40vw;
   max-width: 500px;
   height: 20vh;
   max-height: 150px;
   background-size: contain;
   background-repeat: no-repeat;
   -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

.logo-navbar {
   width: 100%;
   height: 100%;
}

.nav-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-family: 'Urbanist', sans-serif;
   text-align: center;
   font-size: 15px;
   margin-top: 10px;
}

.nav-links a {
   color: white;
   text-decoration: none;
   text-align: center;
   width: auto;
   max-width: 240px;
   padding: 5px 30px;
   font-weight: 500;
   justify-items: center;
}

.nav-links a:hover {
   color: #C79557;
}

.scrolled.navbar {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
   padding: 5px 20px;
   background-color: #fefefe;
}

.scrolled .nav-links a {
   color: #C79557 ;
}

.scrolled .logo  {
   /* background-image: url(../images/logoSeul-planchon-FSsD.png); */
   max-width: 80px;
   max-height: 80px;
   -webkit-filter: none;
  filter: none;
}

.scrolled .nav-links {
   margin-top: 0;
}

.hamburger {
   display: none;
   font-size: 28px;
   cursor: pointer;
 }
 

 @media (max-width: 900px) {
   .navbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px;
   }

   .logo {
      width: 40vw;
      max-width: 250px;
      height: 20vh;
      max-height: 200px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-filter: drop-shadow(5px 5px 5px #222);
      filter: drop-shadow(5px 5px 5px #222);
   }

   .nav-links {
     display: none;
     flex-direction: column;
     gap: 10px;
     position: absolute;
     top: 50px;
     right: 20px;
     width: 250px;
     padding: 10px;
     background-color: antiquewhite;
   }

   .nav-links a {
      color: #C79557;
   }

   .scrolled.navbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 5px 20px;
      background-color: #fefefe;
   }
 
   .hamburger {
     display: flex;
     color: #C79557 ;
     height: 50px;
     width: 50px;
     justify-content: center;
     align-items: center;
     background-color: antiquewhite;
     border-radius: 50%;
   }

   .scrolled.hamburger {
      color: #C79557 ;
      filter: none;
   }
 
   .nav-links.active {
     display: flex;
   }
 }
 
/* HOMEPAGE */

.parallax {
  width: 100%;
  height: 100vh;
  position: relative;
  background-position: center;
}

.parallax img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.parallax h1 {
   width: 100%;
   text-align: center;
   position: absolute;
   top: 75%;
   transform: translateY(-50%);
   text-transform: uppercase;
   font-family: 'Sulphur Point', sans-serif;
   font-weight: 700;
   color: #fefefe;
   font-size: 75px;
   margin: 0;
   letter-spacing: 5px;
   text-shadow: #222;
   @media (max-width: 1100px) {
      font-size: 60px;
  }
   @media (max-width: 900px) {
      font-size: 45px;
  }
   @media (max-width: 500px) {
      font-size: 25px;
  }
}

.parallax p {
   width: 100%;
   text-align: center;
   position: absolute;
   top: 90%;
   font-weight: 700;
   color: #fefefe;
   margin: 0;
   letter-spacing: 5px;
   text-shadow: #222;
   @media (max-width: 1100px) {
      font-size: 60px;
  }
   @media (max-width: 900px) {
      font-size: 45px;
  }
   @media (max-width: 500px) {
      font-size: 25px;
  }
}

.parallax svg {
   fill: #C79557 ;
}

.parallax h2 {
   width: 100%;
   text-align: center;
   position: absolute;
   top: 90%;
   transform: translateY(-50%);
   font-weight: 600;
   color: #fefefe;
   margin: 0;
}

.container {
   margin: 0;
   padding: 50px 0 50px 0;
}

.container h1 {
   max-width: 800px;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
   padding: 30px 10px 10px 10px;
   @media (max-width: 1100px) {
      font-size: 40px;
   }
   @media (max-width: 700px) {
      font-size: 30px;
   }
   @media (max-width: 550px) {
      font-size: 25px;
   }
}

.container p, h2, h3, h4, h5 {
   max-width: 700px;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
   padding: 30px 10px 10px 10px;
}

.container a:any-link {
   display:flex;
   height: 30px;
   max-width: 95%;
   align-items: center;
   justify-content: end;
   text-decoration: none;
   color: black;

   svg {
      margin-left: 10px;
   }

     &:hover {
       color: #C79557 ;
       svg {
          fill: #C79557 ;
       }
     }
}

.produits {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 50px 0 50px 0;
}

.produit-card {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   width: 400px;
   height: 400px;
   padding-bottom: 10px;
   transition: all 0.3s ease;
   position: relative;
   @media (max-width: 900px) {
      width: 300px;
      height: 300px;
   }
}

.photo-produit { grid-area: 1 / 1 / 5 / 4; 
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

.nom-produit { grid-area: 1 / 1 / 2 / 4; 
   visibility: hidden;
   color: white;
   width: 75%;
   z-index: 3;
   @media (max-width: 900px) {
      font-size: 18px;
   }
}

.lait-produit { grid-area: 1 / 3 / 2 / 4; 
   width: 40%;
   height: 40%;
   top: 0;
   right: 0;
   justify-content: center;
   background-size: contain;
   background-repeat: no-repeat;
   visibility: hidden;
   z-index: 3;
   position: absolute;
   top: 5px;
   right: 5px;
}

.description-produit { grid-area: 2 / 1 / 5 / 4;
   padding: 10px;
   font-family: 'Urbanist', sans-serif;
   font-weight: 500;
   font-size: 15px;
   color: white;
   text-align: center;
   visibility: hidden;
   z-index: 3;
   @media (max-width: 900px) {
      font-size: 11px;
   }
}

.info-background { grid-area: 1 / 1 / 5 / 4; 
   background-color: #C79557 ;
   opacity: 50%;
   transition: all 0.3s ease;
   visibility: hidden;
   z-index: 2;
}

.produit-card:hover { 
   .nom-produit { 
      visibility: visible;
   }
   .lait-produit { 
      visibility: visible;
   }
   .description-produit { 
      visibility: visible;
   }
   .info-background { 
      visibility: visible;
   }
}

@media (max-width: 900px) { 
   .nom-produit { 
      visibility: visible;
   }
   .lait-produit { 
      visibility: visible;
   }
   .description-produit { 
      visibility: visible;
   }
   .info-background { 
      visibility: visible;
   }
}

.Vache{background-image: url('../images/tete-Vache_kl27g7_resultat.webp');}
.Brebis{background-image: url('../images/tete-brebis_dq5m6f_resultat.webp');}
.Chèvre{background-image: url('../images/tete-Chevre_mmevr4_resultat.webp');}
.Buffelone{background-image: url('../images/tete-Buffelonne_pn7uzm_resultat.webp');}

.link-insta {
   display: flex;
   justify-content: center;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
}

.link-insta a {
   color: #C79557 ;
   text-decoration: none;
   text-align: center;
   width: 250px;
   justify-items: center;
   padding: 5px 10px;
}

.newsletter {
   display: flex;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 10px 0 50px 0;
}

.email {
   font-family: 'Urbanist', sans-serif;
   width: 700px;
   border-bottom: 1px solid #222;
   border-top: none;
   border-left: none;
   border-right: none;
}

.validation {
   width: 700px;
   display: flex;
   justify-content: space-between
}

.cgu {
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   font-size: 10px;
  margin: 0;
}

.resaux {
   max-width: 100%;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 10px 0 50px 0;

   .resaux-links {
      display: flex;
      width: 50%;
      max-width: 700px;
      justify-content: space-around;
      align-items: center;
      margin: 0;
      padding: 10px 0 50px 0;
   }

   a {
      text-decoration: none;
      text-align: center;
      width: 50px;
      height: 50px;
      justify-items: center;
      margin: 0;
   }
}

/* FOOTER */

.footer {
   height: 200px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: #3D3D3D;
   color: white;
   padding: 5px;
   @media (max-width: 900px) {
      height: 300px;
  }
}

.logo-footer {
   background-image: url(../images/logoSeul-planchon-FSsD.png);
   width: 100px;
   height: 100px;
   background-size: contain;
   background-repeat: no-repeat;
   padding: 10px;
   background-position: center;
}

.nav-footer {
   width: 80%;
}

.nav-links-footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   font-family: 'Urbanist', sans-serif;
   text-align: center;
   font-weight: 500;
   font-size: 13px;
   margin-top: 10px;
}

.nav-links-footer a {
   color: white;
   text-decoration: none;
   text-align: center;
   width: auto;
   max-width: 240px;
   padding: 5px 30px;
   justify-items: center;
   padding: 5px 10px;
   font-size: 12px;
}

.copy-social {
   width: 80%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 5px;
   color: #C79557 ;
   font-family: 'Urbanist', sans-serif;
   font-weight: 600;
   font-size: 12px;
   border-top: #fefefe 1px solid;
}

.copyright a { 
   color: #C79557;
   text-decoration: none;
   font-family: 'Urbanist', sans-serif;
   font-weight: 600;
   font-size: 12px;
}

.social {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: end;
   align-items: center;
   padding: 5px;
}

.social-item {
   padding: 5px 0 0 10px;
}

.social-icon {
   filter: invert(63%) sepia(16%) saturate(1231%) hue-rotate(353deg) brightness(97%) contrast(85%);
}

/* MAISON PLANCHON */

.maison {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin: 0;
}

.maison span {
   padding-bottom: 10px;
}

.legende {
   max-width: 800px;
   margin: 0;
   padding: 10px;
   max-width: 800px;
   text-align:left;
   font-weight: 400;
   font-size: 15px;
   color: white;
   text-shadow: 1px 1px 1px #222;
}


/* NOS OFFRES ET PRESTATIONS */

.offres {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin: 0;
}

.offres span {
   padding-bottom: 10px;
}

.partenaires-list {
   padding: 0;
}

.partenaires {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin: 0;
}

.partenaire {
   font-weight: 600;
   padding-top: 10px;
}

.asterix {
   font-size: 10px;
}

.nom {
   white-space:nowrap;
}

/* LES PROFFESSIONNELS */

.professionnels {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin: 0;
}

.professionnels span {
   padding-bottom: 10px;
}

/* NOS BOUTIQUES */

.boutiques {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 50px 0 50px 0;
}

.horaires {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 10px 0 0 0;
   @media screen and (max-width: 1000px) {
      flex-direction: column;
   }
}

.padR {
   padding: 0 8px 0 0;
   @media screen and (max-width: 1000px) {
      padding: 0;
   }
}

.dash { 
   @media screen and (max-width: 1000px) {
      display: none;
   }
}

.adresse {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   margin: 0;
   padding: 10px 0 10px 0;
   @media screen and (max-width: 1000px) {
      flex-direction: column;
   }
}

.phone {
   @media screen and (max-width: 500px) {
      width: 180px;
   }
}

.maps {
   @media screen and (max-width: 1000px) {
      width: 100%;
      }
}

/* NOS PARTENAIRES */

.logo-partenaires {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   margin: 100px 0;
}

.link-part {
   position: relative;
   width: 250px;
   height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.link-part img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.link-part a {
   position: absolute;
   height: 100%;
}

/* ADMIN */

.produits-admin {
   width: 100%;
   justify-content: space-around;
   align-items: center;
   margin: 0;
}

table, th, td {
   text-align: center;
}

th {
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 25px;
   margin: 0;
   letter-spacing: 5px;
 }
 
 td {
   font-family: 'Montserrat', sans-serif;
   font-weight: 300;
   font-size: 18px;
   margin: 0;
   letter-spacing: 2px;
   padding: 10px;
 }


.th-td-photo {
   width: 15%;
}

.th-td-name {
   width: 15%;
}

.th-td-lait {
   width: 10%;
}

.th-td-desc {
   width: 50%;
}

.th-td-action {
   width: 10%;
}


.img-admin {
   width: 240px;
   height: 240px;
   object-fit: cover;
}

.btn-container {
   height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   padding: 5px;
   margin: 0;
}

.btn-admin {
   background-color: #C79557 ;
   max-width: 90%;
   color: white;
   padding: 5px;
   text-align: center;
   font-size: 15px;
   cursor: pointer;
   border-radius: 5px;
}

/* EDIT PRODUIT */

.edit {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;

   h2 {
      width: 50%;
      text-align: center;
      padding: 10px;
   }
}
form {
   width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
   font-family: 'Urbanist', sans-serif;
}

.input-admin {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   color: black;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   font-family: 'Urbanist', sans-serif;
 }

.input-admin-textarea {
   width: 100%;
   height: 200px;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   font-family: 'Urbanist', sans-serif;
 }
 
 input[type=submit] {
   width: 100%;
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }

/* LOGIN */

.login-form {   
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;

   h2 {
      width: 50%;
      text-align: center;
      padding: 10px;
   }
}

.input-login {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   color: black;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   font-family: 'Urbanist', sans-serif;
 }

 .error {
   color: red;
   font-family: 'Urbanist', sans-serif;
   font-weight: 600;
   font-size: 15px;
   margin: 0;
   padding: 10px;
}

/* MENTIONS */

.mentions a:any-link {
   justify-content: center;
   display:flex;
   height: 30px;
   max-width: 95%;
   align-items: center;
   text-decoration: none;
   color: black;
}