/* classe no-touch exclusivement pour les appareils sans touch panel, introduite dans session.php  +  faire le ménage ici!*/
/* beaucoup de choses communes avec Vos Besoins */


/*
Généralités

- Pour les écrans très résolus, instructions bordures thin => 0.5px en toute fin de page (en cours)
- terminaison SM ou classe agSMx : pour browser Samsung Android Chrome

*/

h1 {font-family: Courier New ;font-size:17pt;font-weight:700;color:#2d2d2d;margin:0px;padding:0px;} /* ? voir général aussi*/
h2 {font-family: Courier New ;font-size:14pt;font-weight:400;color:#ffffff;margin:0px;padding:0px;}

/* Bandeau bas avec boutons : en général ? */
#BasPanelCenter {
  position:absolute;
  bottom:0;
  left:0;
  border-top:thin solid #2d2d2d;
  width:100%;
  height:145px;
  background: url(/images/BandeauBas640.jpg) no-repeat center bottom;
  }
@media only screen and (min-width: 641px) and (max-width: 767px) {
  #BasPanelCenter {background: url(/images/BandeauBas768.jpg) no-repeat center center;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #BasPanelCenter {background: url(/images/BandeauBas1024.jpg) no-repeat center center;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #BasPanelCenter {background: url(/images/BandeauBas1280.jpg) no-repeat center center;}
  }
@media only screen and (min-width: 1281px) {
  #BasPanelCenter {background: url(/images/BandeauBas1920.jpg) no-repeat center center, url(/images/BandeauBasRepeat.jpg) repeat-x center;}
  }
/* images bannières basses HD */
/* nombreux smartphone 360x640 - samsung, sony */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 640px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 640px),
only screen and (                min-resolution: 192dpi) and (max-width: 640px),
only screen and (                min-resolution: 2dppx)  and (max-width: 640px) {
  #BasPanelCenter {background: url(/images/BandeauBas640HteRes.jpg) no-repeat center center/auto 240px;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 641px) and (max-width: 767px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 641px) and (max-width: 767px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 641px) and (max-width: 767px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 641px) and (max-width: 767px),
only screen and (                min-resolution: 192dpi) and (min-width: 641px) and (max-width: 767px),
only screen and (                min-resolution: 2dppx)  and (min-width: 641px) and (max-width: 767px) {
  #BasPanelCenter {background: url(/images/BandeauBas768HteRes.jpg) no-repeat center center/auto 240px;}
  }
/* tablettes 768x1024 - ipad...  */
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px) and (max-width: 1024px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 1024px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px) and (max-width: 1024px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) and (max-width: 1024px) {
  #BasPanelCenter {background: url(/images/BandeauBas1024HteRes.jpg) no-repeat center center/auto 240px}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1025px) and (max-width: 1280px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (                min-resolution: 192dpi) and (min-width: 1025px) and (max-width: 1280px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1025px) and (max-width: 1280px) {
  #BasPanelCenter {background: url(/images/BandeauBas1280HteRes.jpg) no-repeat center center/auto 240px}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1281px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (                min-resolution: 192dpi) and (min-width: 1281px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1281px) {
  #BasPanelCenter {background: url(/images/BandeauBas1920HteRes.jpg) no-repeat center center/auto 240px, url(/images/BandeauBasRepeatHteRes.jpg) repeat-x center/auto 240px;}
  }

#PanelBanner {height:60px;}
#inPanelBanner {display:block;position:relative;width:100%;}
#conteneurTitreBanner { /*généraliser le table-cell ?*/
	display: table-cell; /* comportement visuel de cellule */
    vertical-align: middle;
	table-layout: fixed;
	overflow: hidden;
	width:1440px; /*100% ne fonctionne pas*/
	height:58px; /*100% ou inherit ne fonctionnent pas*/
	padding:0 5px;
	}
h1 {} /* à mettre en général ? */
#TitreBanner {display:block;overflow:hidden;position:relative;text-transform:uppercase;font-weight:bold;font-size:120%;line-height:95%;text-shadow: 3px 3px 3px #b4b4b4;/*background-color: rgba(255,255,255,0.80);*/}

@media only screen and (min-width: 300px) and (max-width: 640px) {
  #TitreBanner {line-height:100%;}
  }
@media only screen and (min-width: 641px) and (max-width: 767px) {
  #TitreBanner {font-size:120%;line-height:105%;/*background-color: rgba(255,255,255,0.70);*/}
  #conteneurTitreBanner {padding:0 10px;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #TitreBanner {font-size:120%;line-height:105%;/*background-color: rgba(255,255,255,0.50);*/}
  #conteneurTitreBanner {padding:0 20px;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #TitreBanner {font-size:150%;line-height:105%;/*background-color: rgba(255,255,255,0.50);*/}
  #conteneurTitreBanner {padding:0 20px;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #TitreBanner {font-size:160%;line-height:110%;/*background-color: rgba(255,255,255,0.50);*/}
  #conteneurTitreBanner {padding:0 20px;}
  }
@media only screen and (min-width: 1480px) {
  #TitreBanner {font-size:160%;line-height:110%;/*background-color: rgba(255,255,255,0.50);*/}
  #conteneurTitreBanner {padding:0 20px;}
  #inPanelBanner {max-width:1440px;margin:0 auto;}
  } 

#PanelBlocs {min-height:480px;} /* inutile ? */

#BoxBesoins {display:block;overflow:hidden;position:relative;width:auto;margin-left:0;margin-right:0;min-height:480px;}


/*
Explications en mode manuel
*/

#BoxBesoinsManuel {display:none;clear:left;overflow:hidden;position:relative;width:100%;height:710px;background:#FFFFFF;background: transparent url(/images/bandeau-baschoixprop.png) no-repeat 0px 610px}
#ExplPrincipe {overflow:hidden;position:relative;width:100%;padding-top:0;}
#ExplPrincipeDte{display:none;position:relative;overflow:visible;background: #FFFFFF url(/images/pipetteDrop.jpg) no-repeat center bottom/50% auto;}
#ExplPrincipeGche{position:relative;border:0px solid #DCDCDC;padding-bottom:20px;margin-bottom:0;}
#animation{display:block;position:relative;width:100%;height:180px;margin:30px 0 10px 0%;}
#conteneurTextes1{display:block;position:relative;height:120px;width:100%;text-align: center;}
.textesbis {display:none;padding:5px 10px 0 10px;}
#intextes5bis {font-size:85%;font-style:italic;color:#88B21A;cursor:pointer;}
span.vertGras {font-weight:bold;color:#88B21A;}
.beaker {display:none;position:absolute;width:100%;left:0;height:100%;background: no-repeat center bottom/auto 100%;}
#beaker0 {background-image:url(/images/beakerSeul-0.jpg);}
#beaker1 {background-image:url(/images/beakerSeul-1.jpg);}
#beaker2 {background-image:url(/images/beakerSeul-2.jpg);}
#beaker3 {background-image:url(/images/beakerSeul-3.jpg);}
#beaker4 {background-image:url(/images/beakerSeul-4.jpg);}
#lesetapesFlaconimage {}
.conteneurTypeIngred {position:relative;width:100%;height:100%;vertical-align:middle;}
table.conteneurTypeIngred {position:absolute;}
#conteneurTypeIngred1 {display:none;}
#conteneurTypeIngred2 {display:table;}
#celluleTypeIngred1 {vertical-align:top;}
#cale {display:block;position:relative;height:0;width:100%;}
.typeIngred, .typeIngredbis {display:none;position:relative;width:100%;height:100%;background: no-repeat 0% center/auto 37.5%;}
#typeIngredHV, #typeIngredHVbis {background-image:url(/images/logoHV-240.png);}
#typeIngredHY, #typeIngredHYbis {background-image:url(/images/logoHY-240.png);}
#typeIngredActifs, #typeIngredActifsbis {background-image:url(/images/logoActifs-240.png);}
#typeIngredParfum, #typeIngredParfumbis {background-image:url(/images/logoParfum-240.png);}
.etapes {display:none;position:absolute;width:100%;left:0;height:100%;background: no-repeat center center/60px auto;}
#etapes1{background-image:url(/images/etape1fin.png);}
#etapes2{background-image:url(/images/etape2fin.png);}
#etapes3{background-image:url(/images/etape3fin.png);}
#etapes4{background-image:url(/images/etape4fin.png);}
.texteEtape {display:none;position:absolute;width:100%;}
.lesetapes{font-size:100%;width:100%;}
.inlesetapes{font-size:100%;padding:10px 3% 10px 3%;width:100%;}
/*.TitreManuelMob {display:block;position:relative;width:100%;color:#2D2D2D;background-color:#DCDCDC;padding:2%;font-size:120%;text-align:center;}*/
#titreAstuceMob {display:block;position:relative;width:94%;margin:20px 3% 0 3%;padding:8px 4px;background-color:#DCDCDC;font-size:90%;border:thin solid #DCDCDC;border-top-left-radius:10px;border-top-right-radius:10px;}
#contenuAstucesMob {display:block;position:relative;width:94%;margin:0 3% 0 3%;padding:15px 4px 0px 4px;font-size:90%;border:thin solid #DCDCDC;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.TitreManuel {
  display:block;
  position:absolute;
  top:0;left:0;
  width:96%;
  margin:0 2%;
  color:#000000;
  background-color:#DCDCDC;
  padding:1%;
  font-size:130%;
  text-align:center;
  border:thin solid #DCDCDC;border-radius:10px;
  }
#ConteneurAstuces1 {display:none;position:relative;background: #DCDCDC;width:96%;padding:1%;margin:0 2% 10px 2%;font-size:100%;text-align:center;border:thin solid #DCDCDC;border-radius:10px;}
#ConteneurAstuces2 {display:none;position:relative;width:96%;margin:0 2% 10px 2%;font-size:100%;border:thin solid #DCDCDC;border-radius:10px;background-color:rgba(255,255,255,0.85);}
.astuces {padding:5px 0px 15px 0px;font-size:100%;}
#titreAstuce2 {padding:5px 0px;background:#DCDCDC;width:100%;text-align:center;color:#000000;font-size:100%;border-top-left-radius:10px;border-top-right-radius:10px;}
#contenuAstuces {padding:25px 5px 0px 10px}
.enMaj {font-style:normal;text-transform:uppercase;}
.enGras {font-weight:bold;}
.enGrasVert {font-weight:bold;color:#88B21A;}
.cadre {border:thin solid #2D2D2D;padding:0px 4px}
.enPetit {font-size:80%;padding-left:5%}
@media only screen and (min-width: 360px) {
  #animation{display:block;position:relative;width:375px;max-width:100%;height:210px;margin:40px auto 15px auto;}
  .typeIngred, .typeIngredbis  {background-size: auto 43.75%;}
  .etapes {background-size: 70px auto;}
  .inlesetapes {font-size:100%;padding:15px 3% 15px 3%;}  
  }
@media only screen and (min-width: 600px) {
  .textesbis {padding:10px 10px 0 10px;}
  .astuces {padding:8px 0px 28px 0px;}
  #titreAstuceMob {display:none;}
  #contenuAstucesMob {display:none;}
  #ExplPrincipe {padding-top:10px;}
  #ExplPrincipeDte{display:block;}
  #ExplPrincipeGche{border-width:thin;margin-bottom:10px;}
  /*.TitreManuelMob {display:none;}*/
  #ExplPrincipeDte {min-height:732px;}
  #animation{display:block;position:relative;width:350px;max-width:100%;height:180px;margin:40px auto 15px auto;}
  .typeIngred, .typeIngredbis  {background-size: auto 37.5%;}
  .etapes {background-size: 60px auto;background-position:right center;}
  .texteEtape {display:block;font-size:120%;text-align:right;top:17.5%;}
  .inlesetapes {font-size:100%;padding:15px 3% 15px 3%;}
  .TitreManuel {font-size:100%;}
  }
@media only screen and (min-width: 768px) {
  #animation{display:block;position:relative;width:450px;max-width:100%;height:375px;margin:20px auto 20px auto;}
  .beaker {bottom:0;height:240px;}
  #conteneurTypeIngred1 {display:table;}
  #conteneurTypeIngred2 {display:none;}
  /*#cale {display:block;}*/
  .typeIngred {background-size: auto 33.3%;}
  .typeIngredbis {height:100px;background-size: auto 100%;}
  .typeIngredbis {background-position:center center;}
  .etapes {background-size: 80px auto;background-position:left 75%;}
  .texteEtape {display:block;font-size:120%;text-align:left;top:50%;}
  .inlesetapes {font-size:110%;padding:15px 3% 15px 3%;}
  .TitreManuel {font-size:100%;}
  }
@media only screen and (min-width: 1025px) {
  #animation{display:block;position:relative;width:450px;max-width:100%;height:375px;margin:20px auto 20px auto;}
  .beaker {bottom:0;height:240px;}
  #conteneurTypeIngred1 {display:table;}
  #conteneurTypeIngred2 {display:none;}
  /*#cale {display:block;}*/
  .typeIngred {background-size: auto 33.3%;}
  .typeIngredbis {height:100px;background-size: auto 100%;}
  .typeIngredbis {background-position:center center;}
  .etapes {background-size: 80px auto;background-position:left 75%;}
  .texteEtape {display:block;}
  .inlesetapes {font-size:120%;padding:20px 3% 20px 3%;}
  .TitreManuel {font-size:120%;}
  }
@media only screen and (min-width: 1281px) {
  #animation{display:block;position:relative;width:450px;max-width:100%;height:375px;margin:20px auto 20px auto;}
  .beaker {bottom:0;height:240px;}
  .typeIngred {background-size: auto 33.3%;}
  .typeIngredbis {height:100px;background-size: auto 100%;}
  .typeIngredbis  {background-position:center center;}
  .etapes {background-size: 80px auto;}
  .texteEtape {display:block;}
  .inlesetapes {font-size:120%;padding:20px 3% 20px 3%;}
  .TitreManuel {font-size:130%;}
  } 
/* laptop ou tablette paysage 16/9 et/ou avec barre d'adresse qui prend de la place - remonter de 90 à 100px l'animation*/
@media only screen and (min-width: 960px) and (max-height:700px) {
  #animation{display:block;position:relative;width:450px;max-width:100%;height:305px;margin:10px auto 10px auto;}
  #conteneurTextes1{height:100px;width:100%;text-align: center;}
  .beaker {bottom:0;height:210px;}
  .typeIngredbis {height:80px;background-size: auto 100%;}
  .typeIngredbis  {background-position:center center;}
  .etapes {background-size: 80px auto;}
  .texteEtape {display:block;top:45%;}
  .inlesetapes {font-size:100%;padding:10px 3% 10px 3%;}
  }  
@media only screen and (min-width: 960px) and (max-width: 1024px) and (max-height:700px) { /*tablettes 1024 et 960 px */
  }  

/* 
Page des propriétés
*/

#VosBesoins {display:block;overflow:hidden;position:relative;width:100%;height:auto}
#SurConteneurTextExpl {
	height:120px;width:100%;margin:0 auto;padding-left:95px;padding-right:15px;
	background: url(/images/miroir-seul.jpg) no-repeat 10px 20px/auto 100%;
	background-color: transparent;
	}
#ConteneurTextExpl {
	position:relative;
    display: table-cell; /* comportement visuel de cellule */
    vertical-align: middle;
	table-layout: fixed;
	height:120px;width:1440px;
	overflow: hidden;
	}
#TextExpl {display:none;font-size:100%;line-height:120%;text-align:right;color:#808080;font-style:italic;}
#ConteneurProp {position:relative;width:100%;margin:0 auto;} /*fusionner avec VosBesoins ?*/
#arriereConteneurProp {display:none;}
#posProp6Peau {position:relative;/*width:235px*/}
#posProp6Prop {position:relative;/*width:400px*/}
#posProp6Add {position:relative;/*width:323px*/}  
.TitreProp, .TitrePropCentral {
  height:60px;
  text-transform:uppercase;
  background:#2D2D2D no-repeat center center;
  padding:6px 8px;
  font-weight:normal;
  font-size:120%;
  line-height:120%;
  color:#FFFFFF;
  text-shadow: 0px 0px 8px #000000;
  }
.TitreProp, .TitrePropCentral {background-image:url(/images/FondTitreNoir-BR.jpg);}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    .TitreProp, .TitrePropCentral {background-image:url(/images/FondTitreNoir-HR.jpg);}
    }
.ContenantListePropCentral {padding:5px 0px 10px 0px;width:100%;margin:0 auto;} /* la hauteur dépend de la place des éléments dans la page */
.ContenantListeProp {padding:5px 0px 10px 0px;width:100%;margin:0 auto;}

div.conteneurLigne {display:block;position:relative;width:96%;padding:0 0;margin:6px auto;height:42px;line-height:95%;font-size:100%;}
div.conteneurEnrichi {display:block;position:relative;width:100%;font-size:100%;line-height:100%;}
div.texteEnrichi {display:block;position:relative;margin:0px auto;padding-left:5%;width:96%;font-size:75%;font-style: italic;}
div.parfumPrecis {height:32px;}
div.ParfumTitre {margin-bottom:0px;}
#listeParfums {display:none;width:100%;margin:0 auto;}
div.pointParfum {display:inline-block;position:relative;height:32px;width:10%;background-repeat:no-repeat;background-position: center center; background-size:15px auto;background-color:transparent;}
div.margeEnrichie {display:inline-block;position:relative;height:inherit;width:5%;}
div.conteneurParfum {display:inline-block;position:relative;height:32px;width:87%;font-size:85%;}
div.pourEnrichie {display:inline-block;position:relative;height:inherit;width:95%;font-size:inherit;}
div.bois {background-image: url(/images/cercle-olfaB1.png);}
div.fleur {background-image: url(/images/cercle-olfaF1.png);}
div.fruit {background-image: url(/images/cercle-olfaH1.png);}
div.frais {background-image: url(/images/cercle-olfaV1.png);}
div.vanil {background-image: url(/images/cercle-olfaG1.png);}
div.proven {background-image: url(/images/cercle-olfaA1.png);}
div.separateur {display:block;position:relative;width:96%;margin:10px auto;padding:0;border-top:thin solid #2D2D2D;height:1px;}
div.conteneurLigneSensible {display:block;position:relative;width:96%;margin:10px auto 15px auto;padding:10px 0 0 0;border-top:thin solid #2D2D2D;height:42px;line-height:95%;font-size:100%;}

@media only screen and (min-width: 400px) {
	#SurConteneurTextExpl {
		height:120px;width:100%;margin:0 auto;padding-left:105px;padding-right:15px;
		background: url(/images/miroir-seul.jpg) no-repeat 20px 20px/auto 100%;
		background-color: transparent;
		}
	#ConteneurTextExpl {}
    div.conteneurLigne {width:97%;padding:0 0;height:42px;line-height:95%;font-size:110%;}
    div.parfumPrecis {height:32px;}
	div.ParfumTitre {margin-bottom:0px;}
    div.pointParfum {height:32px;width:10%;background-size:20px auto;}
    div.conteneurParfum {height:32px;width:87%;}
    div.separateur {width:97%;}
    div.conteneurLigneSensible {width:97%;padding:10px 0 0 0;height:42px;line-height:normal;font-size:110%;}
	}
@media only screen and (min-width: 600px) and (max-width: 959px) {
	#TextExpl {font-size:100%;text-align:center;}
	@keyframes ImagePosition {
		from {background-position: 5% bottom,95% 35px;}
		to {background-position: 5% 35px,95% bottom;}
		}	
	#SurConteneurTextExpl { /* animation bouton vert annulée sur ce créneau */
		width:75%;margin-top:15px;margin-bottom:15px;padding-left:100px;padding-right:100px;
		border:thin solid #DCDCDC;
		background: url(/images/miroir-seul.jpg) no-repeat 5% bottom/auto 90%, url(/images/miroir-seul-oppose.jpg) no-repeat 95% 35px/auto 90%;
		background-color: transparent;
		border-radius:5px;
		animation: ImagePosition 5s linear infinite alternate;
		}
	#ConteneurTextExpl {}
	#ConteneurProp {width:75%;}
	#posProp6Peau, #posProp6Prop, #posProp6Add {border:thin solid #DCDCDC;margin-bottom:15px;border-radius:5px;overflow:hidden;}
    div.conteneurLigne {width:98%;padding:0 0;height:42px;line-height:95%;font-size:120%;}
    div.parfumPrecis {height:32px;}
	div.ParfumTitre {margin-bottom:0px;}
    div.pointParfum {height:32px;width:10%;background-size:20px auto;}
    div.conteneurParfum {height:32px;width:87%;}
    div.separateur {width:98%;}
    div.conteneurLigneSensible {width:97%;padding:10px 0 0 0;height:42px;line-height:normal;font-size:110%;}
	}
@media only screen and (min-width: 960px) {
    #arriereConteneurProp {display:block;position:absolute;top:0;left:25%;width:41.66%;height:800px;border-right:thin solid #DCDCDC;border-left:thin solid #DCDCDC}
	#ConteneurProp {overflow:hidden;} /* sinon ça dépasse avant */
	#SurConteneurTextExpl {height:30px;background:none;margin:0;padding-left:0;padding-right:0;}
	#TextExpl {text-align:center;font-size:100%;}
	#ConteneurTextExpl {height:30px;}
	.TitrePropCentral {border-right:thin solid #FFFFFF;border-left:thin solid #FFFFFF;}
	.ContenantListePropCentral {padding:10px 0px 20px 0px;border-right:thin solid #DCDCDC;border-left:thin solid #DCDCDC;} /* on peut supp les borders maintenant */
	.ContenantListeProp {padding:10px 0px 10px 0px;}
    div.conteneurLigne {padding:0 0;height:32px;font-size:100%;}
    div.parfumPrecis {height:27px;}
	div.ParfumTitre {margin-bottom:0px;height:34px;} /* height plus élevée ne se voit presque pas et utile si 2 lignes */
    div.pointParfum {height:27px;width:10%;background-size:15px auto;}
    div.conteneurParfum {height:27px;width:87%;}
	div.separateur {margin:15px auto;}
    div.conteneurLigneSensible {padding:15px 0 0 0;margin:15px auto;height:32px;font-size:100%;}
	#posProp6Peau > .ContenantListeProp > .conteneurLigne, #posProp6Peau > .ContenantListeProp > .conteneurLigneSensible, #posProp6Peau > .ContenantListeProp > .separateur {width:94.5%;}
	#posProp6Prop > .ContenantListeProp > .conteneurLigne {width:98%;}
	#posProp6Add > .ContenantListeProp > .conteneurLigne, #listeParfums > .conteneurLigne, #posProp6Add > .ContenantListeProp > .separateur {width:96.0%;}
	}
@media only screen and (min-width: 1025px) {
    #ConteneurTextExpl {height:30px;}
	.ContenantListePropCentral {padding:15px 0px 30px 0px;border-right:thin solid #DCDCDC;border-left:thin solid #DCDCDC;} /* on peut supp les borders maintenant */
	.ContenantListeProp {padding:15px 0px 15px 0px;}
	#posProp6Peau > .TitreProp {border-top-left-radius:3px;border-bottom-left-radius:3px;}
	#posProp6Add > .TitreProp {border-top-right-radius:3px;border-bottom-right-radius:3px;}
    div.conteneurLigne {padding:0 0;height:32px;font-size:110%;}
    div.parfumPrecis {height:27px;}
	div.ParfumTitre {margin-bottom:0px;height:37px;} /* height plus élevée ne se voit presque pas et utile si 2 lignes */
    div.pointParfum {height:27px;width:10%;background-size:20px auto;}
    div.conteneurParfum {height:27px;width:87%;}
    div.conteneurLigneSensible {padding:15px 0 0 0;height:32px;font-size:110%;}
	}
@media only screen and (min-width: 1281px) {
    #ConteneurTextExpl {height:30px;}
    div.conteneurLigne {padding:0 0;height:37px;font-size:120%;}
    div.parfumPrecis {height:30px;}
	div.ParfumTitre {margin-bottom:0px;height:42px;} /* height plus élevée ne se voit presque pas et utile si 2 lignes */
	div.separateur {margin:20px auto;}
    div.pointParfum {height:30px;width:10%;}
    div.conteneurParfum {height:30px;width:87%;}
    div.conteneurLigneSensible {margin:15px auto 30px auto;padding:15px 0 0 0;height:37px;font-size:120%;} /* attention si pas assez de prop à côté ! */
	}
div.ParfumTitre {}
	
div.Ligne {
	display: table-cell; /* comportement visuel de cellule */
    vertical-align: middle;
	table-layout: fixed;
	overflow: hidden;
	padding:0 20px 0 4px;
	height:inherit;width:1000px; /*100% ne fonctionne pas*/
	/*overflow:hidden;*/
	border: thin solid #ebebeb;
    border-radius: 5px;
	background: #ebebeb url(/images/triangleselectdecalevide.png) no-repeat right bottom/19px auto;
	font-size:90%;color:#000000;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
	}
div.Enrichie {padding-left:39px;}
.CaseInfo1 {
  display:block;position:absolute;
  top:0;left:6px;
  width:27px;height:100%;
  background: url(/images/LogoInfosblanc.png) no-repeat left center/contain;
  cursor:help;
  }
.no-touch .CaseInfo1:hover, .no-touch .CaseInfo1:active {background-image: url(/images/LogoInfos.png);}

div.CaseLibelle {position:relative;padding:2px 0px 0px 0px;font-size:100%;}
div.agSM3 {padding:0px 0px 0px 0px;} /*agent Samsung*/
@media only screen and (min-width: 1025px) {
    div.CaseLibelle {padding:3px 0px 0px 0px;}
	div.agSM3 {padding:0px 0px 0px 0px;}
    }

span.TextPetit {font-size:70%;text-transform:uppercase;}
span.TextGrand {font-size:120%;} /* déjà majuscule */
.no-touch div.Ligne:hover  {background-image:url(/images/triangleselectdecaleblanc.png);background-color:#b7d26f;border:thin solid #b7d26f;}
.no-touch div.Ligne:active {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
div.LigneSelected {color:#FFFFFF;background-color:#88B21A;border:thin solid #88B21A;background-image:url(/images/triangleselectdecaleblanc.png);}
.no-touch div.LigneSelected:hover, .no-touch div.LigneSelected:active {color:#000000;background-image:url(/images/triangleselectdecalevide.png);background-color:#88B21A;border:thin solid #88B21A;}
@keyframes borderColor {
  from {border-color: #dcdcdc;}
  to {border-color: #88B21A;}
  }
.logoQuestionnaire {
	position:relative;width:140px;height:130px;border:1px solid #dcdcdc;margin:0px auto 15px auto;
	background: transparent url(/images/vosBesoins-16x9.jpg) no-repeat center top/100% auto;
	cursor:pointer;color:#808080;
	border-radius:5px;
	animation: borderColor 2s linear infinite normal;
    -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
    }
.no-touch .logoQuestionnaire {animation-duration: 0s;}
@media only screen and (min-width: 600px) and (max-width: 959px) {
	.logoQuestionnaire {animation-duration: 0s;} /* car il y a une autre animation en même temps plus haut : perturbant */
	}
@media only screen and (min-width: 1281px) {
    .logoQuestionnaire {margin:8px auto 15px auto;}
    }
.no-touch .logoQuestionnaire:hover {border:1px solid #88B21A;color:#ffffff;background-color:#88B21A;}
.no-touch .logoQuestionnaire:active {border:1px solid #88B21A;color:#ffffff;background-color:#88B21A;}
div.petitTexteClick {width:100%;position:absolute;bottom:0px;font-size:80%;line-height:100%;text-align:center;font-weight:bold;padding-bottom:5px;}


/*
Zones Boutons bas
! thin (dépend du device) % 1px (fixé)
*/

.SousBlocsBas {
	position:relative;
	width:100%;height:145px
	}
.ConteneurGcheBoutons {border-left:1px solid #FFFFFF;}
#BoxMAZ, #BoxMAZRep, #BoxRet, #BoxRetBesoins, #ButRetQuestions, #Box101 {position:relative;border-bottom:1px solid #FFFFFF;}
@media only screen and (min-width: 600px) {
	#BoxMAZ, #BoxMAZRep, #BoxRet, #BoxRetBesoins, #ButRetQuestions, #Box101 {position:relative;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;}
}
.BoxValidation {display:inline-block;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-left:1px solid #FFFFFF;}
.ConteneurVide {height:145px;}

/* Boutons de validation */
div.BoutChoixIni {
  position:relative;
  background: #88B21A url(/images/trngleclick-blancvert.png) no-repeat bottom right/20px auto;
  border:thin solid #88B21A;
  padding:0px 20px;
  height:89px;
  width:100%;
  color:#FFFFFF;
  font-size:140%;
  line-height:89px;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.BoutChoixIni:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch div.BoutChoixIni:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}

/* Boutons retour aux Prop et mise à zéro */
div.RetourProp{
  position:relative;
  background: #2D2D2D url(/images/triangleselectblancinverse.png) no-repeat 15px 12px;
  border:thin solid #2D2D2D;
  padding:0px 0px 0px 45px;
  height:44px;
  width:100%;
  text-align:left;
  font-size:110%;
  color:#FFFFFF;
  text-transform:uppercase;
  line-height:44px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.RetourProp:hover{background-color:#FFFFFF;background-image:url(/images/triangleselectnoirvideinverse.png);color:#2D2D2D;} 
.no-touch div.RetourProp:active{background-color:#FFFFFF;background-image:url(/images/triangleselectnoirinverse.png);color:#2D2D2D;}
span.cliquez {padding-left:20px;font-size:70%;}
.logoInfos {
	position:absolute;width:35px;height:35px;bottom:10px;right:35px;
	background: url(/images/LogoInfos.png) no-repeat 0px 0px/contain;
	cursor:pointer;
    -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
    }
.no-touch .logoInfos:hover {background-image:url(/images/LogoInfosvert.png);}
.no-touch .logoInfos:active {background-image:url(/images/LogoInfosvert.png);}


/*
Questionnaire
*/

#BoxQuestionnaire {display:none;overflow:hidden;position:relative;width:auto;margin-left:0;margin-right:0;min-height:480px;}

#conteneurDiagnostic{display:block;overflow:hidden;position:relative;width:auto;margin-left:0;margin-right:0;min-height:480px;}
@media only screen and (min-width: 1025px) {
	#conteneurDiagnostic{background: transparent /*url(/images/4flacons-LC200-reel.png)*/ no-repeat 14% bottom/auto 240px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1025px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1025px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1025px),
only screen and (                min-resolution: 192dpi) and (min-width: 1025px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1025px) {
  #conteneurDiagnostic {/*background: transparent url(/images/4flacons-LC200-reelHteRes.png) no-repeat 14% bottom/auto 240px;*/}
  }

#conteneurResultatsDiagnostic {display:none;margin-bottom:20px;padding-top:0;background-color:#FFFFFF;}
#BoxRetQuestions {display:none;}
.no-touch #ButRetQuestions:hover{border-right:thin solid #2D2D2D;border-bottom:thin solid #2D2D2D;} 
.no-touch #ButRetQuestions:active{border-right:thin solid #2D2D2D;border-bottom:thin solid #2D2D2D;}

#conteneurDiagnosticQuestionnnaire {padding-bottom:2px;background-color:#FFFFFF;}
#sousConteneurDiagnosticQuestionnnaire {padding-bottom:0;}
#ConteneurTitreQuestionnaire {padding:22px 4px;}
#TitreQuestionnaire {width:100%;text-align:center;font-size:130%;line-height:105%;color:#88B21A;text-transform:uppercase;font-weight:bold;}
#sousTitreQuestionnaire {width:100%;padding-top:5px;text-align:center;font-size:90%;line-height:110%;text-transform:uppercase;}
.BlocQuestions {position:relative;width:100%;margin-bottom:0px;overflow:hidden;padding-bottom:6px}
div.conteneurQuestions, div.conteneurQuestionsVides, div.avantQuestParfum {position:relative;padding-bottom:5px;width:100%;}
div.avantQuestParfum {padding-bottom:0px;}

@keyframes animatedVisibility {
	0% {opacity: 1;}
	75% {opacity: 1;}
	100% {opacity: 0;}
	}
.point-vert {
	display:block;
	position:absolute;top:5px;right:5px;width:10px;height:10px;
	background: transparent url(/images/bullet-vert.png) no-repeat center center/auto 100%;	
	}
.clignotant {animation: animatedVisibility 2s linear infinite normal;}
div.Questions {
	position:relative;
	width:100%;
	min-height:57px; /*pour <600px*/
	padding:4px 20px 4px 1%;
	margin-bottom: 5px;
	background:#2D2D2D no-repeat center center;
	color:#FFFFFF;font-size:120%;line-height:100%;text-transform:uppercase;
	text-shadow: 0px 0px 8px #000000;
	}
div.Questions {background-image:url(/images/FondTitreNoir-BR.jpg);}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    div.Questions {background-image:url(/images/FondTitreNoir-HR.jpg);}
    }
	
span.Questions {font-size:80%;}
div.sousTitreQuestion {position:relative;top:0px;font-size:60%;line-height:100%;text-transform:lowercase;font-weight:normal;}
div.QuestionsVides {position:relative;margin:1px 2% 6px 2%;width:96%;border-top:thin solid #2D2D2D;}

#conteneurDiagnosticInfos {}
#TitreDiagnostic {}
.inPhoto {margin:0px 0px;overflow:hidden;}
.inPhoto>img {display:block;width:100%;margin:0 auto;}
#TitreDiagnostic2 {
	width:100%;margin:0px auto 0px auto;padding:2%;
	text-transform:normal;font-size:100%;line-height:115%;text-align:left;
	border:thin solid #DCDCDC;
	background-color:#DCDCDC;	
	}
.inTitreDiagnostic {padding-top:2%;}
#dejaLa {display:none;font-size:100%;}
#TitreDiagnostic3 {
	display:none;
	width:100%;margin:0px auto 0px auto;padding:2%;
	text-transform:normal;font-size:100%;line-height:115%;text-align:left;
	border:thin solid #DCDCDC;
	background-color:#DCDCDC;	
	}
#waiver {
	width:100%;margin:0px auto 0px auto;padding:2%;
	text-transform:normal;font-size:72%;line-height:115%;text-align:left;
	border:thin solid #DCDCDC;	
	}

[class*="Kol"] {float: left;margin:3px auto;}
.Kol1 {width:100%;padding:0 0.5%;height:32px;}
.Kol2 {width:100%;padding:0 0.5%;height:32px;}
.Kol3 {width:100%;padding:0 0.5%;height:42px;}
.Kol4 {width:100%;padding:0 0.5%;height:76px;}
div.pointParfumQuest {display:inline-block;position:relative;height:inherit;width:10%;background-repeat:no-repeat;background-position: center center; background-size:15px auto;background-color:transparent;}
div.conteneurParfumQuest {display:inline-block;position:relative;height:inherit;width:90%;}

#contactezNous {display:block;position:relative;text-align:left;padding:20px 10px;font-size:90%;line-height:115%;font-style:italic;}

@media only screen and (min-width: 400px) {
  .Kol1 {width:50%;padding:0 0.5%;height:32px;}
  .Kol2 {width:100%;padding:0 0.5%;height:32px;}
  .Kol3 {width:100%;padding:0 0.5%;height:42px;}
  .Kol4 {width:100%;padding:0 0.5%;height:59px;}
  div.pointParfumQuest  {width:8%;background-size:15px auto;}
  div.conteneurParfumQuest {width:92%;}
  #TitreQuestionnaire {font-size:150%;}
  #sousTitreQuestionnaire {font-size:100%;}
  }
@media only screen and (min-width: 600px) {
  #conteneurDiagnosticQuestionnnaire {margin-top:10px;margin-bottom:5px;}
  #sousConteneurDiagnosticQuestionnnaire {}
  #conteneurDiagnosticInfos {}
  #TitreDiagnostic {}
  .inPhoto {width:97%;margin:10px auto 0px 3%;border:thin solid #dcdcdc;border-radius: 5px;}
  #TitreDiagnostic2 {width:97%;margin:10px auto 0px auto;border-top-left-radius:5px;border-top-right-radius:5px;}
  #TitreDiagnostic3 {width:97%;margin:10px auto 0px auto;border-top-left-radius:5px;border-top-right-radius:5px;}
  #waiver {width:97%;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
  .Kol1 {width:33.33%;padding:0 0.5%;height:32px;}
  .Kol2 {width:50%;padding:0 0.5%;height:32px;}
  .Kol3 {width:100%;padding:0 0.5%;height:32px;}
  .Kol4 {width:100%;padding:0 0.5%;height:42px;}
  div.pointParfumQuest  {width:10%;background-size:15px auto;}
  div.conteneurParfumQuest {width:90%;}
  div.Questions {min-height:45px;}
  }
@media only screen and (min-width: 641px) {} /*id à 600!*/
@media only screen and (min-width: 768px) {
  #sousConteneurDiagnosticQuestionnnaire {max-width:720px;margin:auto;}
  .BlocQuestions {border:thin solid #959595;border-radius:5px;margin-bottom:15px;}
  .Kol1 {width:33.33%;padding:0 1%;height:32px;}
  .Kol2 {width:50%;padding:0 1%;height:32px;}
  .Kol3 {width:100%;padding:0 1%;height:32px;}
  .Kol4 {width:100%;padding:0 1%;height:42px;}
  div.pointParfumQuest  {width:10%;background-size:20px auto;}
  div.conteneurParfumQuest {width:90%;}
  #contactezNous {padding:20px 30px;text-align:center;}
}
@media only screen and (min-width: 1025px) {
  #conteneurResultatsDiagnostic {display:none;margin-top:10px;margin-bottom:10px;padding-top:90px;background-color:#FFFFFF;height:700px;}
  #ConteneurTitreQuestionnaire {border:thin solid #dcdcdc;border-radius:5px;margin-bottom:15px;}
  #conteneurDiagnosticQuestionnnaire {margin-top:10px;margin-bottom:10px;}
  #sousConteneurDiagnosticQuestionnnaire {max-width:none;}
  #conteneurDiagnosticInfos {}
  .inPhoto {width:94%;margin:10px auto 0px auto}
  #TitreDiagnostic2 {width:94%;}
  #TitreDiagnostic3 {width:94%;}
  #waiver {width:94%;}
  .Kol1 {width:33.33%;padding:0 1%;height:32px;}
  .Kol2 {width:50%;padding:0 1%;height:32px;}
  .Kol3 {width:100%;padding:0 1%;height:32px;}
  .Kol4 {width:100%;padding:0 1%;height:42px;}
  #contactezNous {padding:20px 15px;text-align:left;}
}
@media only screen and (min-width: 1281px) {
  #TitreDiagnostic {}
  div.Questions {font-size:140%;}
  .Kol1 {width:33.33%;padding:0 0.5%;height:37px;font-size:120%;}
  .Kol2 {width:50%;padding:0 0.5%;height:37px;font-size:120%;}
  .Kol3 {width:100%;padding:0 0.5%;height:37px;font-size:120%;}
  .Kol4 {width:100%;padding:0 0.5%;height:49px;font-size:120%;}
}
div.Reponses {
	display: table-cell; /* comportement visuel de cellule */
    vertical-align: middle;
	table-layout: fixed;
	overflow: hidden;
	padding-left:4px;
	height:inherit;width:1000px; /*100% ne fonctionne pas*/
	/*overflow:hidden;*/
	border:thin solid #ebebeb;
    border-radius: 5px;
	background: #ebebeb url(/images/triangleselectdecalevide.png) no-repeat right bottom/19px auto;
	font-size:90%;text-transform:uppercase;color:#000000;
	cursor:pointer;
    -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
    }
div.CaseLibelleReponse, div.CaseLibelleReponse4 {position:relative;padding:0px 10px 0px 0px;font-size:90%;line-height:100%;text-align:left;width:100%;} /*width:95%; pour les retour à la ligne à déployer*/
div.CaseLibelleReponse4 {/*width:95%;*/}
div.agSM2 {padding:0px 10px 2px 0px;} /*agent Samsung*/
@media only screen and (min-width: 300px) { /* en dessous : rare! */
	div.CaseLibelleReponse, div.CaseLibelleReponse4 {padding:0px 15px 0px 0px;font-size:100%;line-height:110%;}
	div.agSM2 {padding:0px 15px 2px 0px;}
	}
.no-touch div.Reponses:hover  {background-image:url(/images/triangleselectdecaleblanc.png);background-color:#b7d26f;border:thin solid #b7d26f;}
.no-touch div.Reponses:active {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
div.ReponseSelected {color:#FFFFFF;background-color:#88B21A;border:thin solid #88B21A;background-image:url(/images/triangleselectdecaleblanc.png);}
.no-touch div.ReponseSelected:hover, .no-touch div.ReponseSelected:active {color:#000000;background-image:url(/images/triangleselectdecalevide.png);background-color:#88B21A;border:thin solid #88B21A;}
span.CaseExplication {position:relative;}
#VosBesoinsParfumPrecisListe {display:none;}

div.ResultatsDiagnostic { /* doublon avec #conteneurResultatsDiagnostic ?*/
	position:relative;width:95%;padding:20px 0;margin:10px auto 0 auto;
	border:thin solid #88B21A;border-bottom:0px solid #88B21A;
	background-color:transparent;background-repeat:no-repeat;
	border-top-left-radius:3px;border-top-right-radius:3px;
	}

#TitreResultats {width:100%;margin:0px auto 0px auto;padding:30px 4px 0 4px;text-align:center;font-size:150%;line-height:105%;color:#88B21A;text-transform:uppercase;font-weight:bold;} /* id à #TitreQuestionnaire ?*/
#sousTitreResultats {
	position:relative;width:100%;margin:0px auto 0px auto;padding:5px 4px 10px 4px;
	font-size:95%;line-height:110%;text-align:center;text-transform:uppercase;
	}
div.ResultatsListe {position:relative;padding:0 4px 0 8px;text-transform:uppercase;font-size:100%;background-color:rgba(255, 255, 255, 0.7);}
div.TitreListe {position:relative;font-size:90%;margin-bottom:5px;margin-top:5px;font-weight:bold;line-height:100%;}
div.TypeCosmetique {position:relative;font-size:105%;margin-bottom:15px;margin-top:0px;color:#88B21A;font-weight:bold;line-height:100%;}
div.sousTitreListe {position:relative;top:0px;font-size:75%;line-height:100%;text-transform:lowercase;font-weight:normal;}
@media only screen and (max-width: 480px) { /* chargé pour les smartphones seulement */ 
	.photoTypeCosmetique {
		display:block;width:100%;height:170px;margin:10px auto 10px auto;overflow:hidden;
		background: transparent url(/images/flaconCJ-allonge.jpg) no-repeat center center/auto 100%;
		}
	#photoTypeCosmetiqueCJ {background-image: url(/images/flaconCJ-allonge.jpg);}
	#photoTypeCosmetiqueCN {background-image: url(/images/flaconCN-allonge.jpg);}
	#photoTypeCosmetiqueCY {background-image: url(/images/flaconCY-allonge.jpg);}
	#photoTypeCosmetiqueLC {background-image: url(/images/flaconLC-allonge.jpg);}
	}
@media only screen and (min-width: 481px) {
	#TitreResultats {padding-top:20px;padding-bottom:10px;}
	div.ResultatsListe {width:80%;margin:0 0 0 auto;padding:0 4px 0 0;}
	.photoTypeCosmetique {display:none;}
	div.ResultatsListe {width:80%;}
	}
@media only screen and (min-width: 600px) {
	div.ResultatsListe {width:75%;}
	div.ResultatsDiagnostic {width:100%;max-width:560px;}
    #conteneurResultatsDiagnostic {margin-top:10px;}
	#TitreResultats {width:90%;padding-bottom:20px;}
	#sousTitreResultats {width:90%;padding-bottom:10px;}
	div.TitreListe {font-size:110%;}
	div.TypeCosmetique {font-size:125%;}
	div.sousTitreListe {font-size:65%;}
	}
@media only screen and (min-width: 1025px) {
	#TitreResultats {width:80%;padding-top:40px;}
	#sousTitreResultats {width:80%;padding-bottom:20px;}
	div.TitreListe {font-size:110%;}
	div.TypeCosmetique {font-size:125%;}
	div.sousTitreListe {font-size:65%;}
	}
div.ContenuListe {font-size:75%;}
div.itemContenuListe {font-size:100%;}
div.itemContenuListeN {position:relative;font-size:100%;padding-left:20px;}
div.itemContenuListeNumero {position:absolute;top:0;left:0;font-size:100%;}
div.ResultatsBoutons {position:relative;width:95%;height:50px;margin:0 auto 0 auto;font-size:100%;}
div.BoutValide {
	display: table-cell; /* comportement visuel de cellule */
    vertical-align: middle;
	table-layout: fixed;
	overflow: hidden;
	height:inherit;width:1000px; /*100% ne fonctionne pas*/
    background: #88B21A url(/images/trngleclick-blancvert.png) no-repeat bottom right/20px auto;
    border:thin solid #88B21A;
    padding:0px 3px 0px 8px;
    text-align:left; 
    color:#FFFFFF;
    text-transform:uppercase;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
    }
div.BoutValide {border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
.no-touch .BoutValide:hover{background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch .BoutValide:active{background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}
@media only screen and (min-width: 600px) {
	div.ResultatsBoutons {position:relative;width:100%;max-width:560px;height:50px;margin:0 auto 0 auto;font-size:120%;}
	div.BoutValide{padding:0px 6px 0px 8px;}
	}

/*
Divers
*/
span.commeBouton {font-style:normal;font-size:85%;text-transform: uppercase;background:#ebebeb;padding:0 5px;border:thin solid #ebebeb;border-radius:5px;}
		
/* Pour les écrans très résolus, certaines instructions bordures thin trop fines => 0.5px (utilité vu la suite?) */
/*à partir de 3*/
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {
	div.QuestionsVides, div.separateur {border-top-width:0.5px;}
	#waiver {border-bottom-width: 0.5px;border-left-width: 0.5px;border-right-width: 0.5px;} /* pas besoin de modifier la zone du haut */	
	div.ResultatsDiagnostic, div.BoutValide {border-width:0.5px;} /*ne pas oublier le div !*/
	#SurConteneurTextExpl {border-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 3) and (min-width: 600px) and (max-width: 959px),
only screen and (   min--moz-device-pixel-ratio: 3) and (min-width: 600px) and (max-width: 959px),
only screen and (     -o-min-device-pixel-ratio: 3/1) and (min-width: 600px) and (max-width: 959px),
only screen and (        min-device-pixel-ratio: 3) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 288dpi) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 3dppx) and (min-width: 600px) and (max-width: 959px) {
	#posProp6Peau, #posProp6Prop, #posProp6Add {border-right-width:0.5px;border-left-width:0.5px;border-bottom-width:0.5px;border-top-width:0.5px;}
	}


/* border-thickness en fonction de la résolution - thin à supprimer ?*/
/*cas précis 1.5 - pb sur chrome avec laptop à 1280px 150%*/
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) {
	#BasPanelCenter {border-top-width:calc(2px / 3);}
	#titreAstuceMob {border-width:calc(2px / 3);}
	#contenuAstucesMob {border-width:calc(2px / 3);}
	.TitreManuel {border-width:calc(2px / 3);}
	#ConteneurAstuces1 {border-width:calc(2px / 3);}
	#ConteneurAstuces2 {border-width:calc(2px / 3);}
	.cadre {border-width:calc(2px / 3);}
	div.separateur {border-top-width:calc(2px / 3);}
	div.conteneurLigneSensible {border-top-width:calc(2px / 3)}
	div.Ligne {border-width:calc(2px / 3);}
	.no-touch div.Ligne:hover  {border-width:calc(2px / 3);}
	.no-touch div.Ligne:active {border-width:calc(2px / 3);}
	div.LigneSelected {border-width:calc(2px / 3);}
	.no-touch div.LigneSelected:hover, .no-touch div.LigneSelected:active {border-width:calc(2px / 3);}
	div.BoutChoixIni {border-width:calc(2px / 3);}
	div.RetourProp {border-width:calc(2px / 3);}
	/*questionnaire*/
	.no-touch #ButRetQuestions:hover{border-right-width:calc(2px / 3);border-bottom-width:calc(2px / 3);} 
	.no-touch #ButRetQuestions:active{border-right-width:calc(2px / 3);border-bottom-width:calc(2px / 3);}
	div.QuestionsVides {border-top-width:calc(2px / 3);}
	#TitreDiagnostic2 {border-width:calc(2px / 3);}
	#TitreDiagnostic3 {border-width:calc(2px / 3);}
	#waiver {border-width:calc(2px / 3);}
	div.Reponses {border-width:calc(2px / 3);}
	.no-touch div.Reponses:hover {border-width:calc(2px / 3);}
	.no-touch div.Reponses:active {border-width:calc(2px / 3);}
	div.ReponseSelected {border-width:calc(2px / 3);}
	.no-touch div.ReponseSelected:hover, .no-touch div.ReponseSelected:active {border-width:calc(2px / 3);}
	div.ResultatsDiagnostic {border-width:calc(2px / 3);border-bottom-width:0px;}
	div.BoutValide {border-width:calc(2px / 3);}
	span.commeBouton {border-width:calc(2px / 3);}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 600px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 600px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 600px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 600px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 600px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 600px) {
	#ExplPrincipeGche{border-width:calc(2px / 3);}
	.inPhoto {border-width:calc(2px / 3);}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 768px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 768px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 768px) {
	.BlocQuestions {border-width:calc(2px / 3);}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 600px) and (max-width: 959px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 600px) and (max-width: 959px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 600px) and (max-width: 959px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 600px) and (max-width: 959px) {
	#SurConteneurTextExpl {border-width:calc(2px / 3);}
	#posProp6Peau, #posProp6Prop, #posProp6Add {border-width:calc(2px / 3);}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 960px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 960px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 960px) {
    #arriereConteneurProp {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	.TitrePropCentral {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	.ContenantListePropCentral {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 1025px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 1025px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 1025px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 1025px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 1025px) {
	#ConteneurTitreQuestionnaire {border-width:calc(2px / 3);}
	}	
/*à partir de 2*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	#BasPanelCenter {border-top-width:0.5px;}
	#titreAstuceMob {border-width:0.5px;}
	#contenuAstucesMob {border-width:0.5px;}
	.TitreManuel {border-width:0.5px;}
	#ConteneurAstuces1 {border-width:0.5px;}
	#ConteneurAstuces2 {border-width:0.5px;}
	.cadre {border-width:0.5px;}
	div.separateur {border-top-width:0.5px;}
	div.conteneurLigneSensible {border-top-width:0.5px}
	div.Ligne {border-width:0.5px;}
	.no-touch div.Ligne:hover  {border-width:0.5px;}
	.no-touch div.Ligne:active {border-width:0.5px;}
	div.LigneSelected {border-width:0.5px;}
	.no-touch div.LigneSelected:hover, .no-touch div.LigneSelected:active {border-width:0.5px;}
	div.BoutChoixIni {border-width:0.5px;}
	div.RetourProp {border-width:0.5px;}
	/*questionnaire*/
	.no-touch #ButRetQuestions:hover{border-right-width:0.5px;border-bottom-width:0.5px;} 
	.no-touch #ButRetQuestions:active{border-right-width:0.5px;border-bottom-width:0.5px;}
	div.QuestionsVides {border-top-width:0.5px;}
	#TitreDiagnostic2 {border-width:0.5px;}
	#TitreDiagnostic3 {border-width:0.5px;}
	#waiver {border-width:0.5px;}
	div.Reponses {border-width:0.5px;}
	.no-touch div.Reponses:hover {border-width:0.5px;}
	.no-touch div.Reponses:active {border-width:0.5px;}
	div.ReponseSelected {border-width:0.5px;}
	.no-touch div.ReponseSelected:hover, .no-touch div.ReponseSelected:active {border-width:0.5px;}
	div.ResultatsDiagnostic {border-width:0.5px;border-bottom-width:0px;}
	div.BoutValide {border-width:0.5px;}
	span.commeBouton {border-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 600px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 600px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 600px),
only screen and (                min-resolution: 192dpi) and (min-width: 600px),
only screen and (                min-resolution: 2dppx) and (min-width: 600px) {
	#ExplPrincipeGche{border-width:0.5px;}
	.inPhoto {border-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px),
only screen and (                min-resolution: 2dppx) and (min-width: 768px) {
	.BlocQuestions {border-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 959px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 959px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 600px) and (max-width: 959px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 192dpi) and (min-width: 600px) and (max-width: 959px),
only screen and (                min-resolution: 2dppx) and (min-width: 600px) and (max-width: 959px) {
	#SurConteneurTextExpl {border-width:0.5px;}
	#posProp6Peau, #posProp6Prop, #posProp6Add {border-width:0.5px;}
 	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 960px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (                min-resolution: 192dpi) and (min-width: 960px),
only screen and (                min-resolution: 2dppx) and (min-width: 960px) {
    #arriereConteneurProp {border-right-width:0.5px;border-left-width:0.5px;}
	.TitrePropCentral {border-right-width:0.5px;border-left-width:0.5px;}
	.ContenantListePropCentral {border-right-width:0.5px;border-left-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 1025px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (                min-resolution: 192dpi) and (min-width: 1025px),
only screen and (                min-resolution: 2dppx) and (min-width: 1025px) {
	#ConteneurTitreQuestionnaire {border-width:0.5px;}
	}
/*à partir de 3*/
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) {

	}

	
/* Pour vieux écrans peu résolus : vieux IPAD... on voit mal quand fond complexe */
@media
only screen and (-webkit-max-device-pixel-ratio: 1),
only screen and (   max--moz-device-pixel-ratio: 1),
only screen and (     -o-max-device-pixel-ratio: 1/1),
only screen and (        max-device-pixel-ratio: 1),
only screen and (                max-resolution: 96dpi),
only screen and (                max-resolution: 1dppx) {
	div.Questions, .TitreProp, .TitrePropCentral {background:#2D2D2D;}
	}