/*
style.css
---------
 */
 

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('ballpark.eot');
    src: url('ballpark.eot?#iefix') format('embedded-opentype'),
         url('ballpark.woff') format('woff'),
         url('ballpark.ttf') format('truetype'),
         url('ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('dayrom.eot');
    src: url('dayrom.eot?#iefix') format('embedded-opentype'),
         url('dayrom.woff') format('woff'),
         url('dayrom.ttf') format('truetype'),
         url('dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'karmillaregular';
    src: url('karmilla-regular.woff2') format('woff2'),
         url('karmilla-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'great_vibesregular';
    src: url('greatvibes-regular.woff2') format('woff2'),
         url('greatvibes-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'amaticbold';
    src: url('amatic-bold.woff2') format('woff2'),
         url('amatic-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'amatic_scregular';
    src: url('amaticsc-regular.woff2') format('woff2'),
         url('amaticsc-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'simpelmedium';
    src: url('simpel-medium.woff2') format('woff2'),
         url('simpel-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* --------------------------------------Mise en page ----------------------------------*/
body{


}

header
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section #main{

    border-top: 0.5px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

}

section #main_suivi{

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    min-width: 550px;
    margin: 10px;
}





nav{

}



nav ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

}


nav li
{
    width: 230px;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
    font-family: "Gill Sans", sans-serif;
}
nav li:hover
{
    background-color: grey;
}

nav a
{
    text-decoration: none;
    color: black;
}




article{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: black;
    width: 100%;
}



article img {
    width: 90%;
    border-radius: 2px;
    box-shadow: 0px 4px 4px #1c1a19;

    margin-top: 10px;
    margin-bottom: 10px;
}

article #logos img {
    width: 100px;
}


article p {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}


#logos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*------------------------------------FIN Mise en page--------------------------------------------------------------*/



/*------------------------------------ Ticket de commande--------------------------------------------------------------*/


 #ticket{
    flex-direction: column;
    width: 500px;
    border-radius: 2px;
    box-shadow: 1px 4px 4px #1c1a19;
    padding-bottom: 10px;

 }

#info_compte{

    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

#connexion{
    width: 100%;

}

#zone_connexion{
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 4px #1c1a19;
    padding: 10px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    width: 50%;
}

#ticket_nom{

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: 90%;
    border-radius: 5px;
    box-shadow: 1px 4px 4px #1c1a19; 

    margin:10px;
    padding: 10px 10px 10px 10px;

    font-size: 15px;
}



#ticket #liste_legumes{
    margin: 0px 20px;

}
#ticket #souligne{
    border-bottom: 1px dashed black;
    font-size: 1.2em;

}
#ticket #total{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px dashed black;

}

#formulaire_livraison{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin:10px;
    padding: 10px;

}





















/*------------------------------------FIN Ticket de commande--------------------------------------------------------------*/


/*------------------------------------Suivi des commandes--------------------------------------------------------------*/

#ligne_achat {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/
    align-items: baseline;
    margin: 0px;

}

#ligne_achat p{
    margin: 0px;
    font-size: 1em; /* -> 8 */

}
#ligne_membre{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/
    align-items: baseline;
    border-top: : 1px dashed black;
    margin: 0px;

}

/*------------------------------------FIN suivi des commandes--------------------------------------------------------------*/


/*------------------------------------Bouttons--------------------------------------------------------------*/



#boutton_action{
    background: orange;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 0px 4px 4px #1c1a19;

    width: 80%;

    font-size: 1.1em;
    font-family: sans-serif;

    padding-top: 7px;
    padding-bottom: 7px;

    margin-top: 10px;
    margin-bottom: 10px;

    text-align: center;
    text-overflow: ellipsis;


}

#boutton_action:hover{
    background-color: darksalmon;


}

#boutton_action a{
    text-decoration: none;
    color: black;
    padding-bottom: 2px;
}

#boutton_action a:hover{
    border-bottom: 3px solid;
}


#boutton_blue{
    background-color: white;
    color: blue;
    margin-top: 2px;
    margin-left: 13px;
}
#boutton_blue:hover{
    background-color: lightgray;
    color: blue;
    margin-top: 2px;
    margin-left: 13px;
}


#boutton_red{
    background-color: white;
    color: red;
    margin-top: 2px;
    margin-left: 13px;
}
#boutton_red:hover{
    background-color: lightgray;
    color: red;
}

#croix{
    background-color: white;
    color: red;
    border-radius: 8px;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;

}
#croix:hover{
    background-color: lightgray;
    
}


#envoi_ok{
    background-color: orangered;
    color: black;
    height: 50px;
    width: : 370px;
    font-size: 1.3em;
    border-radius: 5px;
}
#envoi_ok:hover{
    background-color: lime;
    font-size: 1.3em;
}




#form_compte { 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 15px;

}

#boutton_form { 

}
#boutton_form:hover { 
    background-color: darkgray;

}

#moins{
    vertical-align: middle;

}
#plus{
    vertical-align: middle;

}


#moins input{
    background-color: white;
    border-radius: 5px;
    color: red;
    font-size: 1em; 
    height: 25px;
    width: 75px;

}
#moins input:hover{
    background-color: white;
}

#plus input{
    background-color: lightgray;
    border-radius: 5px;
    color: green;  
    font-size: 1em; 
    height: 25px;
    width: 75px;
}
#plus input:hover{
    background-color: white;  
}




/*------------------------------------FIN Bouttons--------------------------------------------------------------*/




/*------------------------------------Titres--------------------------------------------------------------*/



section h1{
    color: black;
    font-size: 2em; /* -> 8 */
    font-style: italic;
    padding-top: 0px;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 4px #1c1a19;
    width: 100%;
}

 h2 {
    border-radius: 2px;
    font-size: 2em;
    text-align: center;
    background-color: #24983d; 
    color: black;
    width: 100%;

    margin-top: 10px;
    margin-bottom: 10px;

    padding-top: 7px;
    padding-bottom: 7px;
}




/*------------------------------------FIN Titres--------------------------------------------------------------*/












#tableau_commande{
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;flex-start; flex-end; center; space beetween; space-around;*/


}

#menu_suivi{
    display: flex;
    flex-direction: row;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/


}
#liste_suivi{
    display: flex;
    flex-direction: column;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/
    border-top: : 1px dashed black;

    
}
#ligne_suivi{
    display: flex;
    flex-direction: row;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/
    border-top: : 1px dashed black;
    font-size: 1.2em;

    
}
#achat_suivi{
    display: flex;
    flex-direction: row;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/

    
}
/*--------------------------------------------------------------------------------------------------*/

#etal{
    margin:10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1200px;
}
#nom_legume{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin:5px;
}
#ardoise{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 2px;
    box-shadow: 0px 4px 4px #1c1a19;
    background-color: #342F2F;
    margin:5px;
    width: 200px;
    height:340px;

}
#ardoise p{
    font-family: 'arial';
}

#info_legume #nom{
    font-size: 18px; /* -> 8 */
    color: white;
    height: 60px;
    padding-left: 5px;
    vertical-align: middle;
    text-align: left;
    display: table-cell;

}
#info_legume #info{
    height: 60px;
    padding-left: 3px;
    padding-right: 3px;
    display: table-cell;
    vertical-align: middle;

}
#info_prix{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 2px;
    color: white;
    margin-right: 2px;
    
}
#gamme_legume{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 2px;
    color: white;
    padding-right: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
    
}





#info_image{
    background-color: #342F2F;
    text-align: center;
}

#plus_moins{
    display: flex;
    justify-content: space-between;
    margin:5px;


}






#zone_formulaire{
    display: flex;
    flex-direction: row;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/
    margin-right: 15px;
}

#alarme{
    margin-bottom: 13px;
    margin-left: 13px;
    margin-right: 13px;
    color: blue;
    font-size: 14px;
    width: 90%;
}
#alarme_red{
    text-align: right;
    color: red;
    font-size: 14px;
    width: 90%;
}



#info{
    text-align: justify;
    width: 80%;
    font-size: 1.8em;
}

#info p{
    text-align: justify;
}

#info_blue{
    margin: 10px;
    color: blue;
}



#titre_formulaire { 
    background-color: rgb(174,74,52);
    margin-bottom: 10px;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;

}




#message_ticket{

    width: 400px;
    height: : 200px;
    background-color: white;
    margin-bottom: 20px;
}


#item_retrait{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;
    font-size: 13px;
}

#ticket_retrait{
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 4px #1c1a19;
    padding: 10px;
    align-items: flex-end;
    justify-content: flex-end;
}
#ticket_retrait div {
    margin:5px;
}
#ticket_retrait form {
}

.ticket_legume{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/
    align-items: baseline;
}

.ticket_legume p{
    font-size: 1em; /* -> 8 */
    text-align: left;
    margin-right: 5px;
    margin-left: 5px;
    font-family: : times;
}






#ticket_legume {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/
    align-items: baseline;


}
#ticket_legume p{
    font-size: 1em; /* -> 8 */
    text-align: left;
    margin-right: 5px;
    margin-left: 5px;
    font-family: : times;
}

 p.quantite{
    width:40px;
    margin-right: 1px;
}
 p.nom{
    width:250px;
}
 p.prixu{
    width:40px;
    margin-right: 1px;
}
 p.prix{
    width:90px;
    margin-left: 10px;
}
 p.unite{
    width:100px;
    font-size: 0.8em;
    margin-left: 1px;
}

/*---------------------------js----------------------------------*/

.quantite{
    width:35px;
    margin-right: 1px;
    font-size: 0.8em;
}
.unite{
    width:35px;
    margin-right: 1px;
    font-size: 0.8em;
}
.nom{
    width:250px;
    font-size: 0.8em;
}
.prixu{
    width:40px;
    margin-right: 1px;
    font-size: 0.8em;
}
.prix{
    width:50px;
    margin-left: 10px;
    font-size: 0.8em;
}
.unite2{
    width:100px;
    margin-right: 1px;
    font-size: 0.8em;
}


/*-------------------------------------------------------------*/






#commande {
    display: flex;
    flex-direction: column;
    justify-content: space-between;/*flex-start; flex-end; center; space beetween; space-around;*/
    border: 1px solid black;
    margin-bottom: 20px;
    padding: 5px;
}
#choix_date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/
}
#choix_date p{
    font-size: 1em; /* -> 8 */
    text-align: center;
    margin-right: 5px;
    margin-left: 5px;
}

#ligne_compte{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 7px;
}
#entree_compte { 
    width: 400px;

}
/*
#suivi_commande{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 20px;

}*/
#ligne_commande{
    display: flex;
    justify-content: space-between;
    align-items:center;
    width: 100%;
    font-size: 1em; /* -> 8 */
    border-bottom: 1px dashed black;
    margin-bottom: 5px;

}



#liste_commandes{
    display: flex;
    flex-direction: column;
    width: 100%;

}


#id{
    width: 80px;

}

 #prenom{
    width: 150px;

}

 #nom{
    width: 150px;

}

 #telephone{
    width: 150px;

}

 #mail{
    width: 300px;

}
 #adresse{
    display: flex;
    flex-direction: column;
    width: 250px;

}
 #ville{
    width: 150px;

}

#somme{
    width: 110px;

}

#statut{
    width: 100px;
    text-align: right;

}

#date_creation{
    width: 150px;

}

#livraison{
    width: 400px;

}
#message{
    width: 300px;

}

#date_livraison{
    width: 150px;

}
#l150{
    width: 150px;

}

#action{
    width: 30px;

}

#ligne_gamme{
    display: flex;
    align-items: baseline;
    font-size: 1.2em; /* -> 8 */
    border-bottom: 1px dashed black;

}

#ligne_gamme #legume{
    width: 200px;

}


#ligne_gamme #form #input{
    width: 70px;
    margin-right: 20px;

}

#ligne_gamme #unite{
    width: 70px;

}

#gamme_form{
    width: 50px;

}

#gamme_compo_vert{
    background-color: white;
    color: green;
    margin-top: 2px;
    margin-right: 13px;

}
#gamme_compo_rouge{
    background-color: white;
    color: red;
    margin-top: 2px;
    margin-right: 13px;

}
#gamme_compo_bleu{
    background-color: white;
    color: blue;
    margin-top: 2px;
    margin-right: 13px;

}












#form_modif{
    display: flex;
}

#ligne{
	text-align: right;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 20px;
    margin-left: 20px;

}

#profil form{
	display: flex;
    flex-direction: row;
    justify-content: flex-end;/*flex-start; flex-end; center; space beetween; space-around;*/

}

#section form{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;/*flex-start; flex-end; center; space beetween; space-around;*/

}

 #ticket p{

 }




#corps{
    display: flex;
    flex-direction: row;
    align-items: top;
    color: black;
    margin:10px;
}
#texte{
    width: 100%;
}
#image{
    margin:10px;
}
#choix{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: black;
    margin:10px;
}


#recolte{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: black;
    margin:10px;
}
#recolte #date{
    color: black;
    font-size: 1.5em; /* -> 8 */
    font-family: 'Dayrom', arial;
    margin:10px;
    border-bottom: 1px dashed black;
}



#root_commandes ul{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;/*flex-start; flex-end; center; space-between; space-around;*/
    vertical-align: middle;
    border-bottom: 1px dashed black;

}

#root_commandes li
{
    text-align: left;
    margin-right: 10px;
    margin-left: 10px;
    width: 120px;
}










#envoyee{
    border-radius: 5px;
    box-shadow: 0px 4px 4px #1c1a19;
    font-size: 1.5em; /* -> 8 */
    margin-top: 50px;
    margin-bottom: 30px;
    padding-left: 40px;
    background-color: red;


}





aside
{
	display: flex;
    flex-direction: column;
    border: 1px solid black;
	background-color: forestgreen;
    color: red;
    margin:10px;
}

footer
{
	height: 120px;
}

p
{
    font-family: arial;
    color: black; 
    font-size: 1.2em;
    text-align: justify;
}

main h1{
    color: black;
    font-size: 30px; /* -> 8 */
    font-family:  arial;
    font-style: italic;
    width: 100%;
}





h3 {font-size: 2em;
    border-bottom: 1px dashed black;
    text-align: center;
    width: 100%;
}
h4 {font-size: 0.8em;}
h5 {font-size: 1.2em;}