/* Vos Besoins */
/* beaucoup de choses communes avec cssBesoins-generique */


/*
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

*/

/* 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:80px;}
#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:78px; /*100% ou inherit ne fonctionnent pas*/
	padding:0 5px;
	}

#TitreBanner {display:block;overflow:hidden;position:relative;text-transform:uppercase;font-weight:bold;font-size:140%;line-height:100%;text-shadow: 3px 3px 3px #b4b4b4;/*background-color: rgba(255,255,255,0.80);*/}

@media only screen and (min-width: 641px) and (max-width: 767px) {
  #TitreBanner {font-size:160%;line-height:105%;}
  #conteneurTitreBanner {padding:0 10px;height:98px;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #TitreBanner {font-size:180%;line-height:105%;}
  #conteneurTitreBanner {padding:0 20px;height:98px;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #TitreBanner {font-size:180%;line-height:105%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #TitreBanner {font-size:190%;line-height:110%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1480px) {
  #TitreBanner {font-size:200%;line-height:110%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #inPanelBanner {max-width:1440px;margin:0 auto;}
  #PanelBanner {height:120px;}
  } 

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

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

.enGras {font-weight:bold;}
.enGrasVert {font-weight:bold;color:#88B21A;}


/*
Zone basse Boutons - commun à plein d'autres ? général ?
! thin (dépend du device) % 1px (fixé)
*/

.SousBlocsBas {
  position:relative;
  width:100%;height:145px;
  /*background*/
  }
.ConteneurGcheBoutons {border-left:1px solid #FFFFFF;}
#BoxMAZ, #BoxMAZRep, #BoxRet, #BoxRetBesoins, #ButRetQuestions {position:relative;border-bottom:1px solid #FFFFFF;} /* classe */
@media only screen and (min-width: 600px) {
	#BoxMAZ, #BoxMAZRep, #BoxRet, #BoxRetBesoins, #ButRetQuestions {position:relative;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;}
}
.BoxValidation {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 (But6) - faire le tri ici */
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*/
  }
#ButRetBesoins {background:#2D2D2D;cursor:auto;}
.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);}

/*supprimer*/
.logoQuestionnaire {position:absolute;width:90px;height:95px;bottom:40px;left:73px;background: url(/images/diagnosticnoirinv.png) no-repeat 16px 0px/64px 64px;cursor:pointer;color:#000000;}
.no-touch .logoQuestionnaire:hover {background-image:url(/images/diagnosticvertinv.png);color:#88B21A;}
.no-touch .logoQuestionnaire:active {background-image:url(/images/diagnosticvertinv.png);color:#88B21A;} 
div.petitTexteClick {width:100%;position:absolute;bottom:0px;text-transform:uppercase;font-size:70%;text-align:center;font-weight:bold;}
 
/*
Questionnaire
*/

#BoxQuestionnaire {display:block;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-LC100200-reel.jpg) no-repeat 4.5% bottom/auto 300px;}
	}
@media only screen and (min-width: 1281px) {
    #conteneurDiagnostic {background-position:5% bottom;background-size:auto 360px;}
    }
@media only screen and (min-width: 1480px) {
    #conteneurDiagnostic {background-position:7% bottom;;}
    }
@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-image: url(/images/4flacons-LC100200-reelHteRes.jpg);}
  }

#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-bottom:3px;margin-top:3px;}
.Kol1 {width:100%;padding-left:0.5%;padding-right:0.5%;height:32px;}
.Kol2 {width:100%;padding-left:0.5%;padding-right:0.5%;height:32px;}
.Kol3 {width:100%;padding-left:0.5%;padding-right:0.5%;height:42px;}
.Kol4 {width:100%;padding-left:0.5%;padding-right: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%;}
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);}

#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-left:0.5%;padding-right:0.5%;height:32px;}
  .Kol2 {width:100%;padding-left:0.5%;padding-right:0.5%;height:32px;}
  .Kol3 {width:100%;padding-left:0.5%;padding-right:0.5%;height:42px;}
  .Kol4 {width:100%;padding-left:0.5%;padding-right: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-left:0.5%;padding-right:0.5%;height:32px;}
  .Kol2 {width:50%;padding-left:0.5%;padding-right:0.5%;height:32px;}
  .Kol3 {width:100%;padding-left:0.5%;padding-right:0.5%;height:32px;}
  .Kol4 {width:100%;padding-left:0.5%;padding-right: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-left:1%;padding-right:1%;height:32px;}
  .Kol2 {width:50%;padding-left:1%;padding-right:1%;height:32px;}
  .Kol3 {width:100%;padding-left:1%;padding-right:1%;height:32px;}
  .Kol4 {width:100%;padding-left:1%;padding-right: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) {
  #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-left:1%;padding-right:1%;height:32px;}
  .Kol2 {width:50%;padding-left:1%;padding-right:1%;height:32px;}
  .Kol3 {width:100%;padding-left:1%;padding-right:1%;height:32px;}
  .Kol4 {width:100%;padding-left:1%;padding-right: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-left:0.5%;padding-right:0.5%;height:37px;font-size:120%;}
  .Kol2 {width:50%;padding-left:0.5%;padding-right:0.5%;height:37px;font-size:120%;}
  .Kol3 {width:100%;padding-left:0.5%;padding-right:0.5%;height:37px;font-size:120%;}
  .Kol4 {width:100%;padding-left:0.5%;padding-right: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;overflow:hidden;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;
	}
@media only screen and (min-width: 481px) {
	#ResultatsDiagnostic1 {background-image: url(/images/flacon-CJ480-reel.jpg);background-size:12% auto;background-position:4% center;} 
	#ResultatsDiagnostic2 {background-image: url(/images/flacon-CN480-reel.jpg);background-size:12% auto;background-position:4% center;} 
	#ResultatsDiagnostic3 {background-image: url(/images/flacon-CY480-reel.jpg);background-size:9% auto;background-position:6% center;} 
	#ResultatsDiagnostic4 {background-image: url(/images/flacon-LC100480-reel.jpg);background-size:13% auto;background-position:4% center;} 
	}
@media only screen and (min-width: 600px) {
	#ResultatsDiagnostic1 {background-position:7% center;} 
	#ResultatsDiagnostic2 {background-position:7% center;} 
	#ResultatsDiagnostic3 {background-position:9% center;} 
	#ResultatsDiagnostic4 {background-position:7% center;} 
	}
#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;}
	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-top: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 {position:relative;font-size:75%;}
div.itemContenuListe {position:relative;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;}
	}

	
/* 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 {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 !*/
	}

		
/* 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);}
	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);}
	}	
@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) {
	.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: 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;}
	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;}
	}
@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) {
	.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: 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 {background:#2D2D2D;}
	}