/*https://zurb.com/playground/motion-ui
https://vegibit.com/default-function-parameters-in-es6/
*/

@font-face {
font-family:Roboto;
src: url(Roboto-Medium.ttf);
}


@media all and (max-width: 1050px) {
.logiciel {justify-content:center;}
.panneau.flexible1 {order:2;}
.panneau.flexible2{order:1;}
.panneau.flexible3{display:none;}
.format-dialogue >div {width:350px; }
body {background: url('LogoVAV.png') no-repeat left 47% top 0%; margin-top:20px; }
}

@media all and (max-width: 700px) {
body {background: url('LogoVAV.png') no-repeat left 47% top 0%; margin-top:20px; }
}

@media all and  (min-width: 1051px)  {
.panneau.flexible1 {order:2;}
.panneau.flexible2{order:1;}
.panneau.flexible3 {order:3;}
 .logiciel {flex-wrap:wrap; justify-content:center;}
.panneau.flexible3{display:block;}
.format-dialogue >div {width:200px; }
body {background: url('LogoVAV.png') no-repeat left 50% top 0%; margin-top:20px; }

/* 3 couleur body {background: url('LogoMix21.png') no-repeat left 48.8% top 0%, linear-gradient(to right, #8A1F03 40%, #000 40%, #000 60%, #8A1F03 60% ); margin-top:100px; } */

}


@media all and (max-width: 500px) {

.format-dialogue >div {width:300px; }

}

/* html {
 background: url("DSCN3807_2.JPG") no-repeat center center fixed;
  background-size: cover;

 } */


body, html {font-family:'Nunito';  height:100%; background-color:#fff}

/*.bk {

  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

/*https://www.w3.org/TR/FileAPI/*/
label {font-size:16px; letter-spacing:2px; text-align:right; margin-top:4px;}

.ajouter_interface {padding:4px 6px 4px 4px; width:150px; text-align:right;}
.marge {margin-top:10px;}
 .tableau  {display:flex; }
 .rangee { flex-direction: row;}
 .colonne { flex-direction: column; flex-basis:400px; }
 .grandeur {padding:6px; }
 .grandeur_corre {padding-top:4px; padding-bottom:4px; box-sizing:border-box;}
.grandeur_sous { padding-top:12px;  padding-bottom:12px;}
 .texte_table {font-size:15px; letter-spacing:2px; text-align:center; }
 .input_ingredient {background-color:transparent; border:0px; }

 .explication {text-align:justify; font-size:15px; font-family:'Nunito'; line-height:18px; color:#3a4b81; box-sizing:border-box; padding:6px; background-color:#ccc; }
 .explication h2 {font-size:18px;}



 .aligne_gauche {text-align:left; margin-left:4px;}
 .aligne_droite {text-align:right; margin-right:4px;}

 input {border:0px solid; background-color:transparent;}
 input:focus {outline:none;}


 .button {
  font-size:15px; padding:10px; background-color:#a694b0; color:#fff; border-radius:5px; cursor:pointer;
   transition-duration: 0.4s;
 }

 .button:hover {
   background-color: #faa99a;
 }

.btnAjout {color:purple; font-weight:bold; margin-top:10px; word-spacing:2px; box-sizing:border-box;  padding:5px; font-size:10px; font-family:'Nunito';  text-transform: uppercase; margin-right:8px;}


 .couleur_bilan_titre { background-color:#ccc; box-shadow: 2px 2px 5px grey;}
 .couleur_bilan { background-color:#c97ca6; box-shadow: 2px 2px 5px grey;}
 .couleur_texte_gy { color:#fdfcee; text-shadow: 2px 2px 5px #aaa;}
 .couleur_texte_bk { color:#000;}
 .couleur_texte_wt { color:#fff;} /* old  #fdfcee*/
 .couleur { background-color:#8C001A; }
 .couleur_bonbon { background-color:#fc9392; box-shadow: 2px 2px 5px grey; }
 .couleur_bonbon_clair { background-color:#F9A092; box-shadow: 2px 2px 5px grey; }
 .couleur_bonbon_sorbet { background-color:#eb5579; box-shadow: 2px 2px 5px grey; }
 .couleur_bonbon_clair_sorbet { background-color:#f28da5; box-shadow: 2px 2px 5px grey; }



 .couleur_creme { background-color:#8b82ee; box-shadow: 2px 2px 5px grey;}
 .couleur_creme_2 { background-color:#ed88a6; box-shadow: 2px 2px 5px grey;}
 .couleur_mauve { background-color:#9ba3ee; box-shadow: 2px 2px 5px grey; }

 .couleur_creme_sucre { background-color:#c44a9a; box-shadow: 2px 2px 5px grey;}
 .couleur_mauve_sucre { background-color:#ce9cc9; box-shadow: 2px 2px 5px grey; }

 .couleur_mauveclaire { background-color:#bcb1dd;}
 .couleur_noir { background-color:#6d6e71;  box-shadow: 2px 2px 5px grey; }
  .couleur_fruit{ background-color:#a4095d; box-shadow: 2px 2px 5px grey; }
 .couleur_fruit_{ background-color:#d30d5d; box-shadow: 2px 2px 5px grey; }
 .couleur_beige {background-color:#C35817; box-shadow: 2px 2px 5px grey; }
 .couleur_blanc {background-color:#fff; color:black;}
 .couleur_orange { background-color:#989482;}
 .couleur_jaune {background-color:#f3c603; box-shadow: 2px 2px 5px grey;}
 .couleur_choco {background-color:#673300;}
 .couleur_noisette {background-color:#b56f00;}
.couleur_oeuf {background-color:#ffd400;}
.couleur_orangoeuf {background-color:#f77d00; box-shadow: 2px 2px 5px grey;}
.couleur_blanc{background-color:#fff;}
.couleur_turquoise {background-color:#61c5e1; box-shadow: 2px 2px 5px grey; }
.couleur_lagon { background-color:#92dfe1;}

 .bordure {border:0.5px solid #fff}
 .bordure_noir {border-bottom:0.5px solid #aaa}
 .format_boite {height:40px;}
 .format_boite_small {height:20px;}
 .format_boite_scroll {  display:none; }


/*
#creme, #lait, #poudre, #sucre {
animation: fondu 0.6s;

}

@keyframes fondu {
from {
    height:0px;
    opacity:0;
}
to {
    height:84px;
    opacity:1;
}
}*/

#ajouter.format-dialogue, #entre.format-dialogue {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,0.5);
z-index: 1000;
opacity:0;
margin-top:-1000px;
transition: opacity  400ms ease-in-out, margin 0.6s linear;
pointer-events: none;
 color:#636363;
 overflow-y:scroll;
}

#ajouter.format-dialogue:target, #entre.format-dialogue:target, #progress.format-progress:target {
opacity:1;
margin-top:0px;
pointer-events: auto;
}

.boiteDeroule  {
height:180px;
overflow:auto;
}


 .format-texte-dialogue {
 padding:8px; border:1px solid #ccc; margin-top:5px;
 background-color:#ffedc5;  border-radius:5px; border:2px solid #ccc;
 }

.format-dialogue>div {
	display:flex; flex-direction:column;
	position: relative;
	align-content: space-between;
	margin: 6% auto;
	padding: 15px;
	border-radius: 6px;
	background: #f7f5f5;
       box-shadow: 4px 4px 20px 10px rgba(0, 0, 0, 0.3);

}




.closeDialogue {
  display:block;
  background: red;
  color:#ccc;
	line-height: 20px;
	position: absolute;
	right: 10px;
	text-align: center;
	top: 10px;
	width: 20px;
	text-decoration: none;
  font-size:10px;
	font-weight: bold;
	border-radius: 50px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4);

}

.titre-dialogue {
font-size:18px;
color:#363636;
letter-spacing:2px;
}


.format-dialogue p{
font-size:13px;
text-align:justify;
}

.format-dialogue p  a {color:#7ba2fa;}


.label-input {
font-size:14px;
color:#a55121;
text-align:right;
}

 .logiciel {display:flex; flex-direction:row; margin-top:140px;}

/*https://www.toptal.com/designers/htmlarrows/math/plus-sign/*/

.panneau { padding:10px;  margin:0px 10px 0 10px; }
/*.flexible3 { display:block;} */

.panneau-ecriture {color:#fcfbed; background-color:#fd8999; text-align:center; font-size:17px; text-transform: uppercase; line-height:30px; margin-bottom:30px; padding:10px; box-shadow: 4px 4px 6px grey;}

#progress.format-progress {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,0.5);
z-index: 1000;
opacity:0;
margin-top:0px;
transition: opacity  400ms ease-in-out, margin 0.6s linear;
pointer-events: none;
color:#636363;
/* overflow-y:scroll; */
}

.format-progress>div {
	display:flex; flex-direction:column;
	position: relative;
	align-content: space-between;
	margin: 12% auto;
	padding: 15px;
	border-radius: 6px;
	background: #f7f5f5;
       box-shadow: 4px 4px 20px 10px rgba(0, 0, 0, 0.3);
 }

 #progress { width:100%;}
.intervale {margin-top:15px;}

select {
  background-color:#ed88a6;
  color:#fff;
  font-size:14px;
  border:0px;
  padding:5px;
  outline:none;
}

select {
width:200px;
}



optgroup option {
color:#fff;
}

optgroup {
color:#000;
}


.btnChoix {
font-size:12px;
letter-spacing:1px;
padding:2px;
}

.bouton:hover {cursor:pointer}
.bouton:active {background-color : #bc5166; border-bottom:2px solid #b0b0b0; border-left:2px solid #b0b0b0; border-right:2px solid #828282; border-top:2px solid #828282; text-shadow:-2px -2px 3px  #ccc; padding-bottom:4px; color:#f6df66; text-shadow:0px 0px 0px; }

.bouton {background-color:#e46379; padding:4px; color:white;  border-radius:8px; letter-spacing:1px; font-size:10px; border-top:2px solid #b0b0b0; border-right:2px solid #b0b0b0; border-left:2px solid #828282; border-bottom:2px solid #828282; text-shadow:2px 2px 3px  #828282;  }

.bouton.taillep {width:80px;}
.bouton.tailleg {width:120px;}

.bouton_ctrl:hover {cursor:pointer}
.bouton_ctrl:active {background-color : #7d48b0; border-bottom:2px solid #b0b0b0; border-left:2px solid #b0b0b0; border-right:2px solid #828282; border-top:2px solid #828282; text-shadow:-2px -2px 3px  #ccc; padding-bottom:4px; color:#f6df66; text-shadow:0px 0px 0px; }

.bouton_ctrl {background-color:#8367b0; padding:3px 6px 3px 6px; color:white;  border-radius:8px; letter-spacing:1px; font-size:10px; border-top:2px solid #b0b0b0; border-right:2px solid #b0b0b0; border-left:2px solid #828282; border-bottom:2px solid #828282; text-shadow:2px 2px 3px  #828282;  }

.menu_select { border-radius:8px; background-color: #8367b0; -webkit-appearance:none;  -moz-appearance:none; appearance: none;  margin-right:4px; border-radius:8px; letter-spacing:1px; font-size:12px; border-top:2px solid #b0b0b0; border-right:2px solid #b0b0b0; border-left:2px solid #828282; border-bottom:2px solid #828282;
 }


.menu_:after {
  border: solid;
border-color:#fff transparent;
border-width: 6px 6px 0px 6px;
content: " ";
left:180px;
position: absolute;
z-index: 800;
top:10px;
pointer-events:none;
}


.marque  {
display:inline;
position:relative;
}

.marque:hover:before{
    border: solid;
    border-color:#7f7e7e transparent;
    border-width: 0px 6px 6px 6px;
    content: " ";
    left: 20%;
    position: absolute;
    z-index: 800;
    top:20px;
}

.marque:hover:after{

    background:#7f7e7e;
   border-radius: 4px;
    color: #fff;
    left: 10%;
    padding: 5px;
    position: absolute;
    top:26px;
    z-index: 800;
    font-size:12px;
   white-space:nowrap;
}

.marque:hover:after{
    text-transform:uppercase;
    letter-spacing:1px;
content : attr(data-marque) ;
}


.pourtour {
   border:4px solid red;
}


.aide_{
    background-color:aqua;
    opacity:0.6;
}

#cursor {
   background-color:transparent;
}

#recette ul {padding:4px; margin:0; list-style-type: none; }
#recette ul li{padding:5px;}
#ul_sucre_res li, #ul_mg_res li, #ul_esdl_res li, #ul_mgT_res li {color:#aaa; width:140px; }
#ul_sucre li, #ul_mg li, #ul_esdl li, #ul_mgT li {text-align:right; color:#F5F5F5;}

#sucre, #lait, #creme, #chocolat, #stabilisant, #fruit, #divers, #poudre, #laitier{
    overflow:hidden;
}