/*Document CSS*/

*,
*::before,
*::after {
  box-sizing: border-box;
}


:root {
	--select-border: #777;
	--select-focus: blue;
	--select-arrow: var(--select-border);
  }

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background: #FFFFFF;
	color: rgb(62, 68, 64);
}

/*HEADER*/
.page_header {
	height:50px;
	background-color: rgb(0, 0, 0);
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.logo_nav{
	height:25px;
	margin: 0px 20px;
}

/*CHAPEAU*/
.chapeau {
	margin-top: 25px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.accueil{
	font-family: 'futura';
	font-size: 30;
	width: 300px;
	text-align: center;
	margin-bottom: 0px;
}



h1{
	font-size: 35;
	font-family: 'Alegreya Sans SC', sans-serif;
	color: rgb(0, 0, 0);
	text-align: center;
	line-height:1 ;
	font-weight:600;
}

.intro{
	list-style: none;
	background-color: rgb(255, 239, 185);
	font-family: 'futura';
	color: rgb(172, 144, 51);
	text-align: center;
	padding: 20px;
	border-radius: 10px;
	max-width: 550px;
	margin-bottom: 10px;
	
}

.erreurs{
	list-style: none;
	background-color: rgb(238, 84, 84);
	width: 300px;
	margin-left: auto;
    margin-right: auto;
	font-family: 'futura';
	color: rgb(83, 39, 39);
	text-align: center;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 10px;
	
}


/*CARTE*/
.carte {
	margin:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding: 20px;
	width:100%;
}


.categorie {
    background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	display:flex;
	flex-direction:column;
	align-items:center;
	border:1px solid rgba(200,200,200,1.00);
	padding: 10px 10px;
	margin: 5px 0px;
	border-radius: 5px 0px 5px 0px;
 }

.categorie_outils {
    width:300px;
}

#categorie_vide {
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}





.categorie a, .categorie span {
	display: block;
	width: 150px;
 	height: 15px;
	color: #fff;
	text-decoration: none;
	background:  url(/images/nav/deroule.png) center no-repeat;
	background-size: 20px 20px;
	margin-bottom: 5px;
  }
  .categorie .categorie_dev a, .categorie .categorie_dev span {
	background-image: url(/images/nav/deroule01.png);
  }
  .categorie .open a, .categorie .open span {
	background-image: url(/images/nav/deroule01.png);
  }






h2{
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight:100;
	font-size: 20;
	width:100%;
	text-align: center; 
	padding-bottom: 5px;
	width:300px;
}

.onglet {
	color:rgb(46, 46, 46);
	border:1px solid rgba(200,200,200,1.00);
    background-color: rgb(240, 238, 232);
	padding: 10px 0px;
	border-radius: 10px;
	display:flex;
	flex-direction:column;
	padding: 10px;
	margin-bottom: 20px;
	font-family: 'futura';
	font-size:17;
} 

.visuel {
	background: rgba(150,150,150,1.00);
	width:70px;
	height:70px;
}

h3{	
	font-family: 'futura';
	font-size: 18;
	font-weight: bold;
	text-align: center;
	padding: 20px 0px 5px 0px;
}


/*PRODUITS*/
#categorie_produit {
	width:340px;
    background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	border:1px solid rgba(200,200,200,1.00);
	padding: 0px 0px;
	border-radius: 5px 0px 5px 0px;
 }
 
#categorie_dev_produit{
	display:flex;
	flex-direction:column;
}

#onglet_produit {
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 0px;
	flex-direction:row;
	align-items: center;
	width:330px;
	height:100px;
} 

#onglet_produit_check {
	padding: 5px;
	margin-bottom: 5px;
	border-radius: 0px;
	flex-direction:row;
	align-items: center;
	width:330px;
	height:100px;
	opacity:20%;
} 

#titre_produit{
	text-align: left;
	padding: 0px 0px 5px 0px;
}

.informations_produit{
	width:240px;
}

/*INFORMATIONS*/
.info_principale {
	font-family: 'futura';
    padding-bottom:5px;
    padding-top:5px;
	font-size: 18;
}

.info_secondaire {
	font-family: 'futura';
	font-size: 15;
    opacity:50%;
}

.info_tertiaire {
	font-family: 'futura';
	color:rgb(255, 255, 255);
	font-size: 15;
    opacity:50%;
}

#info_finale{
	font-family: 'futura';
    padding-bottom:5px;
    border-bottom: 1px solid;
	margin-bottom:10px;
}

.bloc_ticket{
	font-family: 'futura';
    width:250px;
    display: flex;
}

.info_ticket{   
	font-family: 'futura';
    border-bottom: 1px solid;
    font-size: 15;
    padding-top:10px;
    padding-bottom:10px;
}

#tab_quantite{
	font-family: 'futura';
    width:6%;
}

#tab_nom{
	font-family: 'futura';
    width:90%;
}

#tab_prix{
	font-family: 'futura';
    width:15%;
}

.ligne_total{
	display:flex;
	flex-flow: row;
	align-items: left;
	height: 20px;
	justify-items: center;
	margin-top:20px;
}

/*TABLEAUX*/
.bloc_tableau{
	font-family: 'futura';
	font-size: 12;
	display:flex;
	flex-flow: column;
	align-items: left;
	
}

.ligne_tableau{
	display:flex;
	flex-flow: row;
	align-items: left;
	height: 30px;
	justify-items: center;
}

.tableau_nom{
	font-weight: bold;
	font-size: 16;
	width: 150px;
	border-right:1px solid;
	border-left:1px solid;
	border-bottom: 1px solid;
}

#tableau_nom_premier{
	border-left:0px solid;
}

#tableau_nom_categorie{
	font-size: 20;
	color:rgb(53, 53, 53);
	background-color: rgb(0, 0, 0);
	width:100%;
}

#ligne_tableau_categorie{
	height:30px;
}

.tableau_intitule{
	width: 30px;
	border-right:1px solid;
	border-bottom: 1px solid;
}



#tableau_intitule_total{
	font-weight: bold;
	background-color: rgb(0, 0, 0);
}

#tableau_nom_total{
	font-weight: bold;
	background-color: rgb(0, 0, 0);
}


/*FORMULAIRES*/
form{
	display:flex;
	flex-direction: column;
	align-items: center;
}

.bloc_formulaire{
	width: 200px;
	margin-bottom: 20px;
}

.renseignement{
	font-family: 'futura';
	display:flex;
	flex-direction: column;
	align-items: left;
	justify-content: center;
	width: 200px;
	font-size: 15px;
	margin-bottom:10px;
}

.ligne_renseignement{
	display:flex;
	align-items: center;
}

.rens {
	font-size: 15;
	border-radius:30px;
	height: 30px;
	border-style: solid;	
	font-family: 'futura';
	color: rgb(62, 68, 64);
	margin: 2px;
	padding: 0px 10px 2px 10px;
  }

  .rens_nom {
	width: 120px;
	font-size: 15;
	font-family: 'futura';
	padding-right:10px;
  }

#mini {
	width:80px;
}

#petit {
	width:120px;
}

/*QUANTITES PANIER*/
.quantite_produit {
	width:90px;
	font-family: 'futura';
	display: flex;
	align-items: center;
}

.quantite_nombre , input[type=number] { 
	height: 20px;
	width:42px;
	padding-left:4px;
	font-size:15;
}

.quantite_niveau {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 10px;
}

#qte_niveau {
	background-color: rgb(0, 0, 0);
	font-size: 15;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 25px;
	color: white;
	text-decoration: none;
	text-align: center;
	margin: 6px 0px;
	padding-bottom: 2px;
	font-family: 'futura';
  }

#qte {
	font-size: 15;
	width: 40px;
	height: 25px;
	border: none;
	font-family: 'futura';
	color: rgb(62, 68, 64);
	text-decoration: none;
	text-align: center;
	margin: 2px;
	padding-bottom: 2px;
  }

.compte_total{
	padding-top:20px;
	padding-bottom:20px;
	display: flex;
	align-items: center;
	font-family: 'futura';
	border-bottom: 3px solid;
	margin-bottom:20px;
}

.nombre_total{
	padding-left:20px;
	width:50%;
}

#bouton_calcul {
	margin-left:10px;
	color: rgb(0, 0, 0);
	height:30px;
	width:50%;
	border:1px;
	font-family: 'futura';
	font-size:15;
	border-radius: 25px;
}

/*VALIDATIONS*/

.lien_outil {
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 40px;
	width: 100%;
	font-family: 'futura';
	font-size: 17;
	border: none;
	border-radius: 5px 0px 5px 0px;
	cursor: pointer;
	margin-bottom:10px;
  }

.validation {
	display:flex;
	flex-direction:column;
	align-items:center;
}

a {
	text-decoration: none;
}

a:visited {
	color: rgb(62, 68, 64);
}

.lot_nav {
	display:flex;
	align-items:center;
}

.nav {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 30px;
	width: 100px;
	font-family: 'futura';
	font-size: 17;
	background-color: rgb(140, 187, 174);
	color: rgb(62, 68, 64);
	border: none;
	border-radius: 5px;
	cursor: pointer;
  }

  .nav_secondaire {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 30px;
	width: 100px;
	font-family: 'futura';
	font-size: 17;
	background-color: rgb(140, 187, 174);
	color: rgb(62, 68, 64);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 30px;
	margin-bottom: 40px;
	  }



/*MENU DEROULANT*/
select {
	appearance: none;
	background-color: transparent;
	border: none;
	padding: 0 1em 0 0;
	margin: 0;
	width: 100%;
	font-family: 'futura';
	font-size: inherit;
	cursor: inherit;
	line-height: inherit;background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;

}

  select::-ms-expand {
	display: none;
  }

  .select {
	display: grid;
	width:200px;
	border: 1px solid var(--select-border);
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
	
	
	font-size: 15;
	cursor: pointer;
	line-height: 1.1;
	background-color: #fff;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
	display: grid;
	grid-template-areas: "select";
	align-items: center;
}

.select::after {
	content: "";
	width: 0.8em;
	height: 0.5em;
	background-color: var(--select-arrow);
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	justify-self: end;
  }

select,
.select:after {
  	grid-area: select;
}

.ecart {
	margin-bottom:20px;
}


/*BOUTONS GRAPHIQUE CARTE*/
.bloc_boutons_graphiques {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.bloc_petits_boutons_graphiques{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: right;
	width: 50%;
}

.bouton_graphique {
	appearance: none;
	background-color: transparent;
	border: none;
	margin-left:2px;
	margin-right:2px;
	/*background-color: red;*/
}

.image_bouton_graphique {
	width: 60px;
	height:60px;
}





.navigation_panier{
	display:flex;
	align-items:center;
	flex-direction:column;
}

.nav_panier{
	
	
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 30px;
	width: 150px;
	font-family: 'futura';
	color:rgb(62, 68, 64);
	font-size: 14;
	border: 1px;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom:20px;
	margin-left:20px;
	margin-right:20px;
}

.horaires {
	font-size: 16;
	font-family: 'futura';
	text-decoration: none;
	text-align: center;
	margin-bottom:20px;
	margin-top:20px;
}

.titre_panier_reservation{
	font-family: 'futura', sans serif;
	font-size: 20;
	width:95%;
	text-align: center; 
	margin:5px 5px 5px 5px;
	
}

.fiche_panier_produit {

	border-bottom: 1px solid rgba(200,200,200,1.00);
	font-weight: normal;
	font-family: 'futura';
	color: rgb(62, 68, 64);
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
	align-items:left;
	height: 50px;
	max-width:700px; 
	margin:5px 20px 5px 20px;
}





.nom_panier_produit {
	display:flex;
	align-self:center;
	width:300px;
	font-family: 'futura';
	margin:0px 5px 0px 5px;
}

.quantite_panier_produit {
	
	display:flex;
	align-items:center;
	width:20%;
	font-family: 'futura';
}



.prix_panier_produit {
	
	display:flex;
	align-items:center;
	width:20%;
	font-family: 'futura';
}

.prix_reservation {
	width:100%;
	display:flex;
	align-self: center;
	justify-content: center;
	font-family: 'futura';
	font-size: 20;
	font-weight: bold;
	color: rgb(62, 68, 64);
	margin:20px;
	padding-right:40px;

}

.inventaire {
	width:250px;;
	display:flex;
	flex-direction:column;

}

.ligne_inventaire {
	display:flex;
	flex-direction:row;
	align-items:center;
	border-bottom:1px solid rgba(200,200,200,1.00);
	margin: 10px 0px 10px 0px;
	font-size:15;
}


.inventaire_nom {
	width:80%;

}

.inventaire_quantite {
	width:20%;

}

.ligne_adaptative {
	width:100%;
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-between;
	height:50px;
	border-bottom:1px solid rgba(200,200,200,1.00);
}

.lien_simple {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 30px;
	width: 100%;
	font-family: 'futura';
	font-size: 15;
	background-color: rgb(230, 230, 230);
	color: rgb(62, 68, 64);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 5px;
	margin-bottom: 50px;
}

.bouton_suppr_petit {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 30px;
	width: 30px;
	font-family: 'futura';
	font-size: 15;
	background-color: rgb(230, 230, 230);
	color: rgb(150, 150, 150);
	border: none;
	border-radius: 30px;
	cursor: pointer;
	margin-left: 5px;
}

#large {
	width:300px;
	margin=0;
}


#orange {
	background-color: rgb(225, 155, 80);
}

#rouge {
	background-color: rgb(210, 55, 55);
	color:white;
}

#vert {
	background-color: rgb(220, 239, 207);
}




.bloc_tabfin {
    display:flex;
	align-items: center;
	justify-content: center;
    font-family: 'futura';
	font-size: 10;
    margin-top:100px;
    margin-bottom:100px;
}

.tabfin_bloc_intitules {
    width:200px;
    display:flex;
    flex-direction: column;
	justify-content: flex-start;
}

.tabfin_bloc_donnees_general {
    display:flex;
    flex-direction: row;
	justify-content: flex-start;
}

.tabfin_bloc_donnees {
    width:87px;
}


.tabfin_case {
    height: 20px;
    padding-left:3px;
    padding-top:5px;
    border:1px solid rgba(200,200,200,1.00);
}

#tabfin_case_blanche{
    border:0px;
    height:5px;
}

#tabfin_titre_principal{
    border:0px;
    font-weight: bold;
    font-size: 15;
}

#tabfin_titre_secondaire{
    font-weight: bold;
    background-color: rgb(255, 176, 119);
}

#tabfin_titre_secondaire_bleu{
    font-weight: bold;
    background-color: rgb(255, 228, 94);
}

#tabfin_titre_secondaire_vert{
    font-weight: bold;
    background-color: rgb(91, 178, 193);
}

#tabfin_titre_secondaire_positif {
	font-weight:bold;
	background-color: rgb(255, 176, 119);
}

#tabfin_titre_secondaire_negatif {
	font-weight:bold;
	background-color: rgb(255, 176, 119);
}

#tabfin_titre_secondaire_gris {
	font-weight: bold;
    background-color: rgb(130, 130, 130);
}

#tabfin_color_bleu {
    background-color: rgb(255, 247, 205);
}

#tabfin_color_vert {
    background-color: rgb(212, 234, 237)
}

#tabfin_color_positif {
	font-weight:bold;
    color:rgb(55, 236, 97);
}

#tabfin_color_negatif {
	font-weight:bold;
	color:rgb(222, 34, 34);
}

#tabfin_sous_total{
    font-weight: bold;
    background-color: rgb(255, 207, 172);
}

#tabfin_sous_total_bleu{
    font-weight: bold;
    background-color: rgb(255, 239, 160);
}

#tabfin_sous_total_vert{
    font-weight: bold;
    background-color: rgb(130, 197, 209);
}

#tabfin_sous_total_positif {
	font-weight:bold;
	background-color: rgb(255, 207, 172);
}

#tabfin_sous_total_negatif {
	font-weight:bold;
	background-color: rgb(255, 207, 172);
}

.tabfin_lien {
	background-color: rgb(255, 255, 255);
	color: rgb(115, 115, 115);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height:10px;
	width: 100%;
	text-align: left;
	font-family: 'futura';
	font-size: 10;
	border: none;
	cursor: pointer;
	margin-bottom:10px;
}

.tabfin_input {
	background-color: rgb(255, 255, 255);
	color: rgb(112, 29, 255);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height:10px;
	width: 100%;
	text-align: left;
	font-family: 'futura';
	font-size: 10;
	font-weight: bold;
	border: none;
	margin-bottom:10px;
}


.bloc_lignes_opes{
	display:flex;
    flex-direction: column;
    font-family: 'futura';
	font-size: 15;
}

.ligne_ope{
	display:flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(200,200,200,1.00);
	height: 80px;
	overflow: hidden;

}

.titre_ope{
	display:flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(200,200,200,1.00);
	height: 80px;
	background-color: rgb(130, 130, 130);
	font-weight: bold;
	color: black;
}

.info_ope{
	height: 80px;
	border:1px solid rgba(200,200,200,1.00);
	padding-top: 5px;
	padding-left: 2px;
}

.total_ope{
	display:flex;
	align-items: center;
	justify-content: center;
	border:1px solid rgba(200,200,200,1.00);
	height: 80px;
	background-color: rgb(130, 130, 130);
	font-weight: bold;
}

.infoope_lien {
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height:20px;
	width: 100%;
	text-align: left;
	font-family: 'futura';
	font-size: 10;
	border: none;
	cursor: pointer;
	margin-bottom:10px;
}



#date_ope{
	width:100px;
}

#alias_ope{
	font-weight: bold;
	width:400px;
}

#effet_ope{
	width:100px;
}

#categorie_ope{
	width:100px;
	font-size: 12;
}

#total_ope{
	text-align: right;
	width:500px;
	font-size: 12;
	color:black;
}