/* Configuration des sections de pages */

html {
	width: 100vw;
	height: 100vh;
	overflow:hidden;
}

body{
	height: 98%;
	width: 98%;
	overflow:hidden;
	background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.4));
}

p,h1,h2,h3,h4,h5,h6,li, button{
	font-family:tahoma;
	color:white;
}

#global{
	display:block;
	margin:auto;
	height:97vh;
}

#en-tete{
	
}

#pied-de-page{
	
}

#contenuIndex{
	
}

.centrer{
	text-align:center;
	display:block;
	margin:auto;
}

.titre{
	text-align:center;
}

.image_responsive{
	display:block;
	width:100%;
}
	
.champ_100{
	width:100%;
}

/* CUSTOMISER INPUT FILE */
.telecharger{
	display:none;
}

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    border: 1px solid white;
    border-radius: 15px;
	background-color:blue;
	color:yellow;
    display: block;
    margin: auto;
    margin-top: 10px;
    text-align: center;
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

/* Style du bouton upload */

/* Configuration pour les PCs et tablette en paysage */
@media (min-width: 641px)
{
	#global{
		width:90%;
	}
	
	.titre{
		font-size:2vw;
	}
	
	.sous_titre{
		font-size: 1.5vw;
		text-align: center;
		padding:5px;
	}
	
	.sous_sous_titre{
		margin: 0;
		font-size: 1.3vw;
		margin-bottom:10px;
	}
	
	.paragraphe{
		display:inline-block;
		margin: 0;
		margin-left: 20px;
		font-size: 2vh;
	}
	
	.miniparagraphe{
		display: block;
		margin: 0;
		font-size: 1.5vh;
	}
	
	.paragraphe_stock{
		display:inline-block;
		margin: 0;
		margin-left: 20px;
		font-size: 1.5vw;
		padding:15px;
		width:49vw;
		border: 1px solid white;
		background-color:transparent;
		cursor:pointer;
	}
	
	.paragraphe_recette{
		display:inline-block;
		margin: 0;
		font-size: 1.5vw;
		padding:15px;
		width:20vw;
		height: 0.6vh;
		border: 1px solid white;
	}
	
	.parametres{
		display: inline-block;
		width: 20%;
		height:80vh;
		float: left;
	}
	
	.repas_semaine{
		
	}
	
	.bouton{
		display: block;
		width: 15vw;
		padding: 10px;
		margin: auto;
		margin-top:15px;
		border-radius: 15px;
		background-color: black;
		color: yellow;
		font-weight:bolder;
		cursor:pointer;
	}
	
	.bouton:hover{
		background-color: white;
		color: black;
	}
	
	.bouton:active{
		background-color: red;
		color: yellow;
	}
	
	.bouton_action{
		display: inline-block;
		width: 7vh;
		vertical-align: top;
		border:none;
		background-color:transparent;
		cursor:pointer;
	}
	
	.inputfile + label {
		width: 15vw;
	}
	
	#ingredient{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
	}
	
	.liste_ingredient{
		width: 100%;
		height: 48vh;
		overflow-y:auto;
	}
	
	#stock{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
		text-align:center;
	}
	
	#ustensile{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
	}
	
	.liste_des_stock{
		display: block;
		width: 100%;
		height: 49vh;
		overflow-y: auto;
	}
	
	#recette, #ajouter_recette, #ajouter_etape2, #ajouter_etape3, #ajouter_etape4, #ajouter_etape5, #fiche_recette,#demarrer_maintenant, #planning, #habitudes {
		display:none;
		z-index:1;
		width:70vw;
		height:85vh;
		float:right;
	}
	
	#accueil{
		display:none;
		border:1px solid white;
		z-index:1;
		width:70vw;
		height:85vh;
		float:right;
	}
	
	.champ_100{
		display:block;
		margin:auto;
		padding:10px;
		width:96%;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_60{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:40vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_50{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:30vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_20{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:20vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_17{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:17vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_10{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:10vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_10_sans_padding{
		display:inline-block;
		margin:auto;
		width:10vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_infos_recette{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:22.8vw !important;
		height: 15vh !important;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_detail_infos_recette{
		display:block;
		margin:auto;
		padding:10px;
		width:21vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_textarea{
		display: block;
		width: 22vw;
		height: 6vh;
		font-family: tahoma;
		font-size: 2vh;
		color: black;
	}
	
	.champ_num_etape{
		display: inline-block;
		width: 7vw;
		height: 5vh;
		vertical-align: top;
		margin: 0;
	}
	
	.champ_etape{
		display: inline-block;
		width: 46vw;
		height: 5vh;
		vertical-align: top;
	}
	
	.PC{
		display:block;
	}
	
	.PC_inline{
		display:inline-block;
	}
	
	.portable{
		display:none;
	}
	
	.portable_inline{
		display:none;
	}
	
	.ajouter_image_recette{
		display: inline-block;
		width: 57vh;        /*40.7vw;*/
		height:33.1vh;
	}
	
	.liste_ingredients_recette{
		display:block;
		margin-top: 5px;
		overflow-y:auto;
		height: 35vh;
		width: 100%;
	}
	
	.liste_ustensile{
		display: block;
		width: 100%;
		height: 63vh;
		overflow-y: auto;
	}
	
	.zone_detail_recette{
		display: inline-block;
		margin: auto;
		width: 28vw;
		height: 33.1vh;
		vertical-align: top;
		border:1px solid white;
	}
	
	.infos_temps{
		display: inline-block;
		margin: auto;
		width: 27.9vw;
		height: 5vh;
		border: 1px solid white;
		text-align:center;
		vertical-align:top;
	}
	
	.image_temps{
		display:inline-block;
		height:5vh;
		vertical-align:top;
	}
	
	.texte_temps{
		display:inline-block;
		height:5vh;
		vertical-align:top;
		color:white;
		margin:0;
		margin-top:0.5vw;
	}
	
	.detail_fiche_recette{
		display: inline-block;
		vertical-align: top;
		width: 28.4vw;
		height: 7vh;
	}
	
	.ingredient_de_la_recette{
		display: block;
		width: 28vw;
		height: 15vh;
		overflow-y: auto;
	}
	
	.liste_des_recettes{
		display: block;
		margin: auto;
		width: 96%;
		height: 60vh;
		overflow-y: auto;
	}
	
	.config_smartphone_paysage{
		display:none !important;
	}
}

/* Configuration pour les téléphones */
@media(max-width: 640px)
{ 
	#global{
		width:98%;
	}
	
	.titre{
		font-size:5vw;
	}
	
	.sous_titre{
		font-size: 4vw;
		margin:0;
		margin-left:15px;
		text-align:center;
		padding:5px;
	}
	
	.sous_sous_titre{
		margin: 0;
		font-size: 3.8vw;
		margin-bottom:10px;
	}
	
	.paragraphe{
		display:inline-block;
		margin: 0;
		margin-left: 20px;
		font-size: 3.5vw;
	}
	
	.miniparagraphe{
		display: block;
		margin: 0;
		font-size: 3vw;
	}
	
	.paragraphe_stock{
		display: inline-block;
		margin: 0;
		margin-left: 20px;
		font-size: 3.5vw;
		width: 65vw;
		height: 6vh;
		border: 1px solid white;
		padding: 1vh;
		background-color: transparent;
		}
	
	.paragraphe_recette{
		display: inline-block;
		margin: 0;
		font-size: 4vw;
		padding: 8px;
		width: 40vw;
		border: 1px solid white;
		vertical-align: top;
	}
	
	.parametres{
		display: block;
		width: 100%;
		height:8vh;
	}
	
	.repas_semaine{
		
	}
	
	.bouton{
		display: block;
		width: 40vw;
		padding: 10px;
		margin: auto;
		margin-top:15px;
		border-radius: 15px;
		background-color: black;
		color: yellow;
		font-weight:bolder;
		cursor:pointer;
	}
	
	.bouton:active{
		background-color:white;
		color:black;
	}
	
	.bouton_menu_smarphone{
		display: inline-block;
		width: 30vw;
		border: none;
		background-color: transparent;
	}
	
	.bouton_action{
		display: inline-block;
		width: 8vh;
		vertical-align: top;
		border:none;
		background-color:transparent;
		cursor:pointer;
	}
	
	.bouton_etapes{
		display: inline-block;
		background-color: black;
		border: 1px solid white;
		padding: 5px;
		margin: 5px;
		width: 19.7vw;
		height: 6vh;
		border-radius: 10px;
		font-size: 1.8vh;
	}
	
	.inputfile + label {
		width: 45vw;
	}
	
	#params{
		display:none;
		position:absolute;
	}
	
	.dev_menu_portable{
		display:block;
		background-color:white;
		width:50vw;
		z-index:2;
	}
	
	.liste_ingredient{
		display:block;
		width:100%;
		height: 48vh !important;
		overflow-y:auto;
		height:53vh;
	}
	
	.liste_des_stock{
		display: block;
		width: 100%;
		height: 49vh;
		overflow-y: auto;
	}
	
	#recette, #ajouter_recette, #ajouter_etape2, #ajouter_etape3, #ajouter_etape4, #ajouter_etape5, #fiche_recette,#demarrer_maintenant, #planning, #habitudes{
		display:none;
		z-index:1;
		width:96vw;
		height:80vh;
	}
	
	#accueil, #ingredient, #stock, #ustensile{
		display:none;
		border:1px solid white;
		z-index:1;
		width:96vw;
		height:80vh;
	}
	
	.champ_100{
		display:block;
		margin:auto;
		padding:10px;
		width:89vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_60{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:59vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_50{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:41vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_20{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:20vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_17{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:29vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_10{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:10vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_10_sans_padding{
		display:inline-block;
		margin:auto;
		width:10vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_infos_recette{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:90vw !important;
		height: 14vh !important;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_detail_infos_recette{
		display:block;
		margin:auto;
		padding:10px;
		width:85vw;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_textarea{
		display: block;
		width: 90vw;
		height: 6vh;
		font-family: tahoma;
		font-size: 2vh;
		color: black;
	}
	
	.champ_num_etape{
		display: inline-block;
		padding: 1.8vh;
		color: white;
		vertical-align: top;
		margin: 0;
	}
	
	.champ_etape{
		display: inline-block;
		width: 53vw;
		height: 6vh;
	}
	
	.PC{
		display:none;
	}
	
	.PC_inline{
		display:none;
	}
	
	.portable{
		display:block;
	}
	
	.portable_inline{
		display:inline-block;
	}
	
	.ajouter_image_recette{
		display: block;
		margin: auto;
		width:92vw;
		height:51.75vw;
		max-width: 100%;
	}
	
	.liste_ingredients_recette{
		display: block;
		width: 95vw;
		height: 21vh;
		overflow-y: auto;
		margin-top: 5px;
	}
	
	.liste_ustensile{
		display: block;
		width: 100%;
		height: 59vh;
		overflow-y: auto;
	}
	
	.zone_detail_recette{
		display: block;
		margin: auto;
		width: 95vw;
		height: 28vh;
	}
	
	.infos_temps{
		display: block;
		width: 68vw;
		height:4vh;
		border: 1px solid white;
		margin: auto;
		margin-top: 10px;
	}
	
	.image_temps{
		display:inline-block;
		height:4vh;
		vertical-align:top;
	}
	
	.texte_temps{
		display:inline-block;
		height:4vh;
		vertical-align:top;
		color:white;
		margin:0;
		margin-top:0.5vw;
	}
	
	.detail_fiche_recette{
		display: block;
		width: 96vw;
		height: 9vh;
	}
	
	.ingredient_de_la_recette{
		display: block;
		width: 96vw;
		height: 14vh;
		overflow-y: auto;
	}
	
	.texte_etape{
		display: block;
		margin: auto;
		width: 80%;
		height:15vh;
		background-color: white;
		padding: 20px;
		color:black;
		overflow-y:auto;
	}
	
	.zone_progression{
		display:block;
		margin:auto;
		text-align:center;
		width:94%;
		height: 5.8vh;
	}
	
	.carre_progression{
		height: 100%;
		background-color:transparent;
		border:none;
	}
	
	.liste_des_recettes{
		display: block;
		margin: auto;
		width: 96%;
		height: 60vh;
		overflow-y: auto;
	}
	
	.config_smartphone_paysage{
		display:none !important;
	}
}

/* Configuration pour smartphone en paysage */
@media (max-device-width:768px) and (orientation: landscape) {
	#global{
		width:90%;
	}
	
	.titre{
		font-size:2.5vw;
	}
	
	.sous_titre{
		font-size: 1.5vw;
		text-align: center;
		padding: 5px;
		margin: 0;
		margin-top: 5px;
	}
	
	.sous_sous_titre{
		margin: 0;
		font-size: 1.8vw;
		margin-bottom:10px;
	}
	
	.paragraphe{
		display:inline-block;
		margin: 0;
		margin-left: 5px;
		font-size: 2vh;
	}
	
	.miniparagraphe{
		display: block;
		margin: 0;
		font-size: 1.5vh;
	}
	
	.paragraphe_stock{
		display: inline-block;
		margin: 0;
		font-size: 1.4vw;
		padding: 5px;
		width: 52vw;
		height: 5vh;
		border: 1px solid white;
		background-color: transparent;
		cursor: pointer;
	}
	
	.paragraphe_recette{
		display:inline-block;
		margin: 0;
		font-size: 1.5vw;
		padding:15px;
		width:20vw;
		height: 0.6vh;
		border: 1px solid white;
	}
	
	.parametres{
		display: inline-block;
		width: 20%;
		height:80vh;
		float: left;
	}
	
	.repas_semaine{
		
	}
	
	.bouton{
		display: block;
		width: 17vw;
		height: 10vh;
		padding: 10px;
		margin: auto;
		margin-top: 2%;
		border-radius: 15px;
		background-color: black;
		color: yellow;
		font-weight: bolder;
		cursor: pointer;
		font-size: 2.3vh;
	}
	
	.bouton:hover{
		background-color: white;
		color: black;
	}
	
	.bouton:active{
		background-color: red;
		color: yellow;
	}
	
	.bouton_action{
		display: inline-block;
		width: 11vh;
		vertical-align: top;
		border:none;
		background-color:transparent;
		cursor:pointer;
	}
	
	.inputfile + label {
		width: 15vw;
	}
	
	#ingredient{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
	}
	
	.liste_ingredient{
		width: 100%;
		height: 30vh;
		overflow-y:auto;
	}
	
	#stock{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
		text-align:center;
	}
	
	#ustensile{
		display:none;
		border:1px solid white;
		z-index:1;
		width:60vw;
		height:85vh;
		float:right;
	}
	
	.liste_des_stock{
		display: block;
		width: 100%;
		height: 29vh;
		overflow-y: auto;
	}
	
	#recette, #ajouter_recette, #ajouter_etape2, #ajouter_etape3, #ajouter_etape4, #ajouter_etape5, #fiche_recette,#demarrer_maintenant, #planning, #habitudes {
		display:none;
		z-index:1;
		width:70vw;
		height:85vh;
		float:right;
	}
	
	#accueil{
		display:none;
		border:1px solid white;
		z-index:1;
		width:70vw;
		height:85vh;
		float:right;
	}
	
	.champ_100{
		display:block;
		margin:auto;
		padding:10px;
		width:90%;
		height:2vh;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_60{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:40vw;
		text-align: center;
		vertical-align:top;
		height:10vh;
	}
	
	.champ_50{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:30vw;
		text-align: center;
		vertical-align:top;
		height:2vh;
	}
	
	.champ_20{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:20vw;
		text-align: center;
		vertical-align:top;
		height:2vh;
	}
	
	.champ_17{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:13.5vw;
		text-align: center;
		vertical-align:top;
		height:3.5vh;
	}
	
	.champ_10{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:10vw;
		text-align: center;
		vertical-align:top;
		height:2vh;
	}
	
	.champ_10_sans_padding{
		display:inline-block;
		margin:auto;
		width:10vw;
		text-align: center;
		vertical-align:top;
		height:2vh;
	}
	
	.champ_infos_recette{
		display:inline-block;
		margin:auto;
		padding:10px;
		width:22.8vw !important;
		height: 15vh !important;
		text-align: center;
		vertical-align:top;
	}
	
	.champ_detail_infos_recette{
		display:block;
		margin:auto;
		padding:10px;
		width:21vw;
		text-align: center;
		vertical-align:top;
		height:2vh;
	}
	
	.champ_textarea{
		display: block;
		width: 22vw;
		height: 6vh;
		font-family: tahoma;
		font-size: 2vh;
		color: black;
	}
	
	.champ_num_etape{
		display: inline-block;
		width: 7vw;
		height: 5vh;
		vertical-align: top;
		margin: 0;
	}
	
	.champ_etape{
		display: inline-block;
		width: 46vw;
		height: 5vh;
		vertical-align: top;
	}
	
	.PC{
		display:block;
	}
	
	.PC_inline{
		display:inline-block;
	}
	
	.portable{
		display:none;
	}
	
	.portable_inline{
		display:none;
	}
	
	.ajouter_image_recette{
		display: inline-block;
		width: 57vh;        /*40.7vw;*/
		height:33.1vh;
	}
	
	.liste_ingredients_recette{
		display:block;
		margin-top: 5px;
		overflow-y:auto;
		height: 35vh;
		width: 100%;
	}
	
	.liste_ustensile{
		display: block;
		width: 100%;
		height: 52vh;
		overflow-y: auto;
	}
	
	.zone_detail_recette{
		display: inline-block;
		margin: auto;
		width: 28vw;
		height: 33.1vh;
		vertical-align: top;
		border:1px solid white;
	}
	
	.infos_temps{
		display: inline-block;
		margin: auto;
		width: 27.9vw;
		height: 6vh;
		border: 1px solid white;
		text-align:center;
		vertical-align:top;
	}
	
	.image_temps{
		display:inline-block;
		height:5vh;
		vertical-align:top;
	}
	
	.texte_temps{
		display:inline-block;
		height:5vh;
		vertical-align:top;
		color:white;
		margin:0;
		margin-top:0.5vw;
		font-size:3.6vh;
	}
	
	.detail_fiche_recette{
		display: inline-block;
		vertical-align: top;
		width: 28.4vw;
		height: 9vh;
	}
	
	.ingredient_de_la_recette{
		display: block;
		width: 28vw;
		height: 15vh;
		overflow-y: auto;
	}
	
	.liste_des_recettes{
		display: block;
		margin: auto;
		width: 96%;
		height: 52vh;
		overflow-y: auto;
	}
	
	.config_smartphone_paysage{
		display:none !important;
	}
}