* {
	margin : 0;
	padding : 0;
}

@font-face {
  font-family : 'Milasian';
  src : url('font/MilasianMediumPERSONAL.ttf') format("truetype");
}

@font-face {
  font-family : 'BKANT';
  src : url('font/BKANT.TTF') format("truetype");
}

:root {
  --nav-bg-color : rgba(0,0,0,0.6);
  --nav-bg-color-hover : rgba(0,0,0,0.5);
  --nav-text-color : rgba(219,202,195,1)/*rgba(219,202,195,1)*/;
  --div-bg-color : rgba(38,24,16,1)/*rgba(219,202,195,1)*/;
  --text-color : rgba(219,202,195,1);
  --longueur-1 : 615px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body{
  font-family : sans-serif;
  background : no-repeat url("images/bois4.jpg") fixed;
  background-position-y : 65%;
  background-size : 100%;
  color : var(--text-color);
}

section {
  min-height : 60vh;
}

#buttonRetourEnHaut{
  position : fixed;
  right: 25px;
  bottom : 25px;
  padding : 10px;
  background-color : var(--text-color);
  color : var(--div-bg-color);
  text-decoration : none;
  font-weight : bold;
  opacity: 0.8;
}

@media screen and (max-width : 980px){
  body{
    background-size: cover;
    background-position-x : 55%;
  }
  section{
    min-height: 30vh;
  }

  #buttonRetourEnHaut{
    font-size : calc(1.5rem + 1vh);
  }
}

/*-----------------------------------SECTIONS----------------------------------------*/

div.employes,section.facture,section.connexion, section.contact, section.home, section.certifications, section.addProduct, section.formInfo, section.panier, section.validate_users, section.confirmation, section.delProducts, section.modifProduct, section.listeCommandes, section.listeCommandesClient, section.listefacturesClient, #mdp_lose{
  margin : 20px 10vw 0px 10vw;
  padding : 20px 10px 20px 10px;
  display : flex;
  justify-content: space-around;
  background : var(--div-bg-color);
  border-radius: 2px;
}

@media screen and (max-width : 980px){
  div.employes,section.facture,section.connexion, section.contact, section.home, section.certifications, section.addProduct, section.formInfo, section.panier, section.validate_users, section.confirmation, section.delProducts, section.modifProduct, section.listeCommandes, section.listeCommandesClient, section.listefacturesClient, #mdp_lose{
    margin : 20px 5vw 0px 5vw;
    padding : 20px 0px;
  }
}

/*-----------------------------INPUTS ZONES DE TEXTE---------------------------------*/

input{
  background : transparent;
  border : none;
  border-bottom: solid var(--text-color) 1px;
  padding : 3px;
  float : right;
  color : var(--text-color);
  white-space : wrap;
  font-size : 16px;
}
/*--------------------------------INPUTS SELECT-------------------------------------*/

select{
  margin : 5px;
  padding : 3px 2px;
  float : right;
  background: none;
  color : var(--text-color);
  border : none;
  border-bottom : solid 1px;
  font-family : sans-serif;
  font-size : 16px;
}

select option{
  background: initial;
  color : initial;
}

/*--------------------------------INPUTS BOUTONS------------------------------------*/

button, #button{
  margin-top : 10px;
  font-family : 'BKANT';
  font-size : 15px;
  float: right;
  color : var(--div-bg-color);
  background-color : var(--text-color);
  padding : 5px;
  border : solid 1px;
  border-radius : 3px;
  transition: all 0.8s ease;
}

button:hover, #button:hover{
  cursor : pointer;
  background-color: var(--div-bg-color);
  color : var(--text-color);
  border : solid 1px;
}

/*----------------------------------ERREURS----------------------------------------*/

section.connexion ul, section.formInfo ul, ul.error{
  margin-top : 70px;
}

li.error{
  list-style : none;
  padding : 7px 7px 7px 7px;
  background : rgba(255,0,0,0.5);
  text-align : center;
}

/*-------------------------ACTION EFFECTUEE CORRECTEMENT---------------------------*/

ul.correct{
  margin-top : 70px;
}

li.correct{
  list-style : none;
  padding : 7px 7px 7px 7px;
  background : rgba(131, 255, 148, 0.5);
  text-align : center;
  color : white;
}

/*-----------------------------------HEADER----------------------------------------*/

header {
	width : 100%;
	min-height : 20vh;
	background : rgb(15,15,15);

}

header h1 {
  width : max-content;
  background-image : url("images/bois4.jpg");
  background-size : contain;
  background-clip : text;
  -webkit-background-clip : text;
  background-position-y : 25%;
  color : transparent;
  font-style : normal;
  font-size : calc(1.5rem + 2vw);/*font-size: 60px;*/
  line-height : calc(1.5rem + 3.45vw);
  font-family : 'Milasian';
}

#haut{
  text-align : left;
  padding-top : 3vh;
  margin-left : auto;
  margin-right : auto;
}

.maj{
  font-size : calc(1.5rem + 3.7vw);/*font-size : 80px;*/
  font-style : normal;
}

@media screen and (min-width: 1600px){
  header h1{
    font-size : 100px;
    line-height : 105px;
  }
  .maj{
    font-size : 120px;
  }
  #haut{
    margin-left : auto;
    margin-right : auto;
  }
}

@media screen and (max-width : 980px){
  header{
    min-height : 0;
    max-height : 180px;
  }
  #haut{
    padding-top : 17px;
    padding-bottom : 17px;
  }
}

/*-----------------------------------NAVIGATION----------------------------------------*/

#navPrincipale ul {
  list-style-type : none;
  background-color : var(--nav-bg-color);
}

li.nav, li.dropdown {
  display : inline-block;

}

li.nav a, .dropbtn {
  display : inline-block;
  color : var(--nav-text-color);
  text-align : center;
  padding : 14px 16px;
  text-decoration : none;
  min-width : 10vw;/*136px*/

}

li.nav a:hover, .dropdown:hover .dropbtn {
  background-color : var(--nav-bg-color-hover);
  transition : all 0.7s ease;

}

.dropdown-content {
  display : none;
  position : absolute;
  min-width : 10vw;
  box-shadow : 0px 8px 16px 8px rgba(0,0,0,0.3);
  z-index : 1;

}

.dropdown-content a {
  color : var(--nav-text-color);
  padding : 12px 16px;
  text-decoration : none;
  display : flex;
  text-align : left;
  
}

.dropdown-content a:hover {
  background-color : var(--nav-bg-color);

}

.dropdown:hover .dropdown-content {
  display : flex;
  flex-direction : column;
}

img.nav{
  display : none;
}

/*Faire mofidier les tailles des textes, ul li etc*/

@media screen and (max-width : 1215px){
  #navPrincipale{
    z-index: 100;
    display : none;
    position : fixed;
    top : 0;
    left : 0;
    right : 0;
    min-height : 100%;
    font-size: calc(1.5rem + 1.5vh);
    overscroll-behavior: none;
    color: var(--div-bg-color);
  }

  #listePrincipaleNav {
    background-color : var(--text-color) !important;
  }

  li.nav a, .dropbtn{
    color: var(--div-bg-color);
    padding : 25px 60px;
  }

  li.nav a:hover, .dropbtn:hover{
    color: var(--nav-text-color);
  }

  li.nav, li.dropdown{
    display : flex;
  }

  .dropdown-content {
    position : relative;
    box-shadow : none;
  }

  img.nav{
    height : 5vh;
    width : auto;
  }

  #navClose{
    display : initial;
  }

  #navOpen{
    position : absolute;
    display : none;
    right : 0;
  } 
}

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

section.home article{
  width: 50vw;
  margin : 50px auto;
}

section.home p{
  margin-top : 10px;
  text-align : center;
  font-size: 18px;
}

section.home span.maj{
  font-size: 28px;
  font-family: 'BKANT';
}

section.home img{
  width : 50vw;
  margin : 50px auto;
}

@media screen and (max-width : 980px){
  section.home article{
    width: 80vw;
  }

  section.home p{
    font-size : calc(1.5rem + 0.9vh);
  }

  section.home span.maj{
    font-size : calc(1.5rem + 1.3vh);
  }

  section.home img{
    width : 80vw;
  }
}

/*-----------------------------------PRODUITS----------------------------------------*/

section.listeProduits{
  margin : 20px 9.25vw 20px 9.25vw;
  background : var(--div-bg-color);
}

#boeuf, #veau, #porc, #agneau, #volaille, #lapin, #cheval, #chasse, #fmaison{
  height : 500px;
  width : 100%;
  margin-top : 20px;
  padding-top : 50px;
}

#specialites, #brochettes, #saucisses, #charcuterie, #pateencroute, #terrines, #ideerepas{
  height : 300px;
  width : 100%;
  margin-top : 20px;
  padding-top : 50px;
}

#boeuf{
  background : url("images/produits/rumsteack.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 75%;
  background-size : 100%;
}

#veau{
  background : url("images/produits/mignon.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 55%;
  background-size : 100%;
}

#agneau{
  background : url("images/produits/epauleavecos.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 55%;
  background-size : 100%;
}

#cheval{
  background : url("images/produits/piecedesteak.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 0%;
  background-position-x: 50%;
  background-size : 82%;
}

#chasse{
  background : url("images/produits/selledechevreuil10cotes.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 20%;
  background-position-x: 50%;
  background-size : 82%;
}

#volaille{
  background : url("images/produits/rotidedinde.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 0%;
  background-position-x : 50%;
  background-size : 82%;
}

#lapin{
  background : url("images/produits/cuisedelapin.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 65%;
  background-size : 100%;
}

#porc{
  background : url("images/produits/filetmignon.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 0%;
  background-position-x : 50%;
  background-size : 82%;
}

/*----Fabrications artisanales----*/

#headerFmaison{
  min-height : 50vh;
}

#fmaison{
  height : 50vh;
  background : url("images/produits/LongeoleIGPencroute.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 50%;
  background-size : 100%;
}

#specialites{
  background : url("images/produits/saucissonbriochepistache.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 60%;
  background-position-x : 50%;
  background-size : 82%;
}

#brochettes{
  background : url("images/produits/brochettes.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 60%;
  background-size : 100%;
}

#saucisses{
  background : url("images/produits/saucissonfumevaudois.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 15%;
  background-size : 100%;
}

#charcuterie{
  background : url("images/produits/viandesechee(Grisons).jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 15%;
  background-size : 100%;
}

#pateencroute{
  background : url("images/produits/pateaperitifauxpistaches.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 95%;
  background-size : 100%;
}

#terrines{
  background : url("images/produits/terrineaupoivrevert.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 85%;
  background-size : 100%;
}

#ideerepas{
  background : url("images/produits/potee.jpg") no-repeat;
  background-attachment : fixed;
  background-position-y : 85%;
  background-size : 100%;
}

div.headerListeProduits  p{
  height : 70px;
  line-height : 70px;
  margin-left : 20px;
  margin-right : 20px;
  background : rgba(219,202,195,0.8);
  text-align : center;
  font-family: 'BKANT';
  font-size : 60px;
  color : var(--div-bg-color);
}

section.listeProduits article{
  display : flex;
  justify-content : start;
  flex-wrap : wrap;
  margin-left : 60px;
}

.produit{
  min-height : 3vh;
  width : 15vw;
  margin : 20px 10px 20px 10px;
  padding : 20px 20px 20px 20px;
  border : solid var(--text-color) 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.produit h2{
  font-size: medium;

}

.produit a{
  margin : auto;
}

.produit img{
  height : 150px;
  margin : 5px auto 5px auto;
}

.produit #imgSupp{
  margin : -10px 0px 0px 11.5vw;
  position : absolute;
  height : 60px;
  width: auto;
}

.produit p{
  margin : 5px auto 5px auto;
}

@media screen and (max-width : 980px){
  section.listeProduits{
    margin : 20px 5vw 20px 5vw;
    background : var(--div-bg-color);
  }

  #boeuf, #veau, #porc, #agneau, #volaille, #lapin, #cheval, #chasse, #fmaison, #specialites, #brochettes, #saucisses, #charcuterie, #pateencroute, #terrines, #ideerepas{
    background-attachment : local;
    background-size : 100% auto;
  }

  #porc{
    background-position-y: 70%;
  }

  #charcuterie{
    background-position-y: -5%;
  }

  #headerFmaison{
    min-height : 25vh;
  }

  #fmaison{
    height : 25vh;
    background-size : 120%;
    background-position-y : 25%;
    background-position-x: 37%;
  }

  #brochettes{
    background-position-y: 45%;
  }

  #saucisses{
    background-position-y: 30%;
  }

  #charcuterie{
    background-position-y: 35%;
  }
}

/*-----------------------------------ACTIONS-----------------------------------------*/

#actions{
  width : 100%;
  margin-top : 20px;
  padding-top : 50px;
  padding-bottom : 50px;
}

section#headerActions article{
  margin : -20px 9.25vw 50px 9.25vw;
  padding-bottom: 50px;
  display : flex;
  flex-direction : row;
  justify-content : space-around;
  flex-wrap : wrap;
  background : var(--div-bg-color);
}

section#headerActions .produit{
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------CERTIFICATIONS--------------------------------------*/

section.certifications{
  flex-direction : column;
}

section.certifications div{
  width: 50vw;
  margin : 10px auto;
}

section.certifications article{
  margin : 25px auto;
  padding : 25px;
  border-bottom : solid 1px;
}

section.certifications h2{
  text-align : center;
  margin-bottom : 15px;
  font-family : 'BKANT', 'sans-serif';
  font-size : 35px;
}

section.certifications p.text{
  margin-bottom : 15px;
  text-align : justify;
}

section.certifications img{
  height : 300px;
}

section.certifications p.img{
  width: 50vw;
  display: flex;
  justify-content : space-around;
}

section.certifications a{
  color : var(--text-color);
}

iframe.pdfCertif{
  width : 48vw;
  height : 70vh;
  margin : 20px auto;
}

article.poeme p{
  text-align: center;
}

article.poeme #autricePoeme{
  text-align: right;
  font-style: oblique;
  font-size: 15px;
}

/*-----------------------------------EMPLOYES----------------------------------------*/

.employes img{
  height : 400px;
  border-radius : 3px;
  margin : 10px;
}

.employes article{
  margin : 10px;
}

.employes h2{
  margin-top : 100px;
  font-size : 40px;
}

.employes h3{
  margin-top : 20px;
  margin-left : 70px;
  font-size : 20px;
}

.employes p{
  margin-top : 35px;
  margin-left : 70px;
}

/*-----------------------------------CONTACT----------------------------------------*/

section.contact article{
  margin : 10px;
}

section.article iframe{
  margin : 10px;
}

section.contact div{
  min-height : 10px;
  margin-top : 30px;
  margin-bottom : 30px;
  padding : 20px 20px 20px 20px;
  border-style : solid none solid none;
  border-width : 1px;
  color : var(--text-color);
}

section.contact p{
  margin : 2px;
}

section.contact a{
  color : var(--text-color);
  text-decoration : none;
}

section.contact a:hover{
  cursor : pointer;
}

section.contact a.tel, section.contact span.horaire{
  float : right;
}

section.contact #mail{
  padding-top : 20px;
}

#nomAdresse{
  font-size: large;
}

#nomAdresse, #codePostal, #Horaires, #ResauxSociaux{
  font-weight : bold;
}

#casePostale{
  font-style: oblique;
}

.logors{
  height : 50px;
  margin-top : 10px;
}

/*-------------------------------------PANIER-----------------------------------------*/

div#panier{
  border-bottom : solid 1px;
  padding-bottom : 10px;
  margin-top : 10px;
  min-width : 35vw;
}

p#soustotal{
  text-align: right;
}

p#totalPanier{
  padding-top : 10px;
  margin-top : 3px;
  border-top : solid 1px;
  text-align: right;
  font-weight: bolder;
}

div#panier #button{
  margin-top : 0px;
  float : none;
  margin-right : 0px;
}

div#panier #quantite{
  width: 30px;
  float : none;
}

p#requeteAdd{
  margin-top : 50px;
}

input#datePanier{
  margin-top : 10px;
  float: none;
  font-size: 15px;
}

/*-----------------------------------CONNEXION----------------------------------------*/

section.connexion {
  height : auto;
}

div.connexion{
  min-width: 25vw;
  margin : 100px auto 100px auto;
}

div.connexion p{
  margin : 10px 10px 10px 10px;
}

/*-------------MDP PERDU-----------------*/



/*---------------------------------------MON COMPTE----------------------------------------*/

/*--------------INFORMATIONS--------------*/

div.formInfo{
  min-width : 25vw;
  margin : 100px auto 100px auto;
}

section.formInfo p{
  margin : 10px 10px 10px 10px;
}

#attValidation{
  position: absolute;
  margin-top: 25px;
  text-align: center;
  font-size: 18px;
  font-weight: bolder;
}

/*--------------MES COMMANDES--------------*/

section.listeCommandesClient div.commandeClient{
  margin : 30px 0px 30px 40px;
  padding : 1px 8px;
  min-width: 50vw;
  border-left : solid 2.5px;
  border-radius: 2.5px;
}

section.listeCommandesClient div.infoCommandes{
  padding : 30px 0px;
}

section.listeCommandesClient p{
  margin-top : 7px;
  margin-bottom : 7px;
}

section.listeCommandesClient div.infoCommandes p{
  margin-left : 8vw;
  font-size: 17.5px;
}

section.listeCommandesClient .infoCommandes {
  display : none;
}

section.listeCommandesClient span.NumCommande{
  font-weight: bolder;
}

section.listeCommandesClient span.DateLivraison, section.listeCommandesClient span.EtatCommande{
  margin-left : 15px;
  font-weight: bolder;
}

section.listeCommandesClient #infoCommandes{
  margin-top : 100px;
  text-align: center;
  font-weight: bolder;
}


/*--------------MES FACTURES--------------*/

section.listefacturesClient div{
  min-width: 30vw;
}

section.listefacturesClient #infoFactures{
  margin-top : 100px;
  text-align: center;
  font-weight: bolder;
}

/*-----------------------------------ADMINISTRATION----------------------------------------*/

/*--------------NAVIGATION--------------*/

#navAdministration{
  position : fixed;
  margin-top: 20px;
  display : flex;
  flex-direction : column;
  background-color : var(--text-color);
  border : solid 1px var(--div-bg-color);
  border-radius: 0px 5px 5px 0px;
}

#navAdministration ul{
  list-style : none;
}

#navAdministration a{
  display : inline-block;
  min-width : 13vw;
  padding : 10px 15px;
  margin : 10px auto;
  color : var(--div-bg-color);
  text-decoration : none;
}

#navAdministration a:hover{
  font-weight: bolder;
}

/*--------------ADD PRODUCT--------------*/

section.addProduct div{
  min-width : 20vw;
}

section.addProduct p{
  margin : 20px 10px ;
}

/*--------------MODIF PRODUCT--------------*/

section.modifProduct{
  flex-direction: column;
}

section.modifProduct div{
  margin : 20px auto;
  min-width: 20vw;
}

section.modifProduct img{
  height : 300px;
  margin : auto;
}

#choix_modifProduits{
  float: none;
  width : max-content;
  position: relative;
  margin : 20px auto;
  display: flex;
}

option[value=fmaison]{
  background: rgb(53, 53, 53);
  color : rgb(224, 224, 224)
}

/*--------------DEL PRODUCT--------------*/

section.delProducts{
  flex-direction: column;
}

section.delProducts div{
  margin : 20px auto;
  min-width: 20vw;
}

section.delProducts #displayDelProduct{
  margin-top : 80px;
}

#choix_type{
  width : max-content;
  position: relative;
  margin : 20px auto;
}

/*--------------VERIF USER--------------*/

section.validate_users div{
  min-width : 30vw;
}

section.validate_users div div{
  padding : 45px;
  border-bottom : solid 1px;
}

#infoVerifUser{
  margin-top : 100px;
  text-align: center;
  font-weight: bolder;
}

section.validate_users button.btnDisplayUser{
  float: none;
}

section.validate_users .infoUser {
  display : none;
  border : none;
  font-size : 17px;
}

/*-----------CONFIRMATION VERIF USER---------*/

section.confirmation form{
  margin : auto;
  display : flex;
  flex-direction : column;
}

section.confirmation label{
  font-weight : bolder;
  font-size : 17px;
}

section.confirmation button{
  margin-top : 10px;
  margin-bottom : 5px;
  float : none;
}

/*--------------LISTE COMMANDES--------------*/

section.listeCommandes div.listeCommandes{
  flex-wrap: wrap;
  width: 40vw;
  
}

section.listeCommandes div.listeCommandes div.commande{
  padding : 1px 8px;
  margin : 20px auto; 
  border-left : solid 3.5px;
  border-radius: 3.5px;
}

section.listeCommandes div.infoCommandes {
  display : none;
  padding : 30px 0px;
}

section.listeCommandes p{
  margin-top : 7px;
  margin-bottom : 7px;
}

section.listeCommandes div.infoCommandes p{
  margin-left : 8vw;
  font-size: 17.5px;
}

section.listeCommandes form{
  margin-left : 10vw;
  width: max-content;
  display: inline-block;
}

select#changeOrderState{
  float : none;
  font-size: 18px;
}

select#changeOrderState option{
  color : rgb(37, 37, 37);
  font-weight: bolder;
}

.attValidation{
  background: rgb(255, 78, 66);
}

.Validee{
  background: rgb(250, 136, 43);
}

.enPrepa{
  background: rgb(253, 237, 17);
}

.attLivraison{
  background: rgb(57, 166, 209);
}

.Livree{
  background: rgb(97, 238, 93);
}

section.listeCommandes span.NumCommande{
  font-weight: bolder;
  font-size: 20px;
}

section.listeCommandes span.nomClient, section.listeCommandes span.EtatCommande{
  margin-left : 15px;
  font-weight: bolder;
}

/*--------------LISTE FACTURES--------------*/

section.facture #search{
  float : none;
}

#display li{
  list-style : none;
}

#display li:hover{
  cursor : pointer;
  font-weight : bolder;
}

section.facture button[name=deleteFacture]{
  float : none !important;
  margin : 8px 0px
}

section.facture #infoFactures{
  margin-top : 50px;
  margin-bottom: 50px;
  text-align: center;
  font-weight: bolder;
}


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

footer {
  margin-top : 50px;
	font-style : italic;
	color : var(--nav-bg-color);
  height : 50px;
	text-align : center;
  line-height : 50px;
}

footer img{
  height : 300px;
}