/* classe no-touch exclusivement pour les appareils sans touch panel, introduite dans session.php (quid des appareils avec touch ET souris -> W8 ?) */

/* 
Général
*/

h1 {font-family: Courier New ;font-size:17pt;font-weight:400;color:#2d2d2d;margin:0px;padding:0px;}
h2 {font-family: Courier New ;font-size:14pt;font-weight:400;color:#ffffff;margin:0px;padding:0px;}
/*#TextCache {display:block;position:relative;width:100%;height:550px;padding-top:50px;padding-bottom:400px;background:#ffffff;text-align:center;font-weight:bold;font-size:150%;} /* retravailler */
#Box9 {display:block;overflow:hidden;position:relative;width:100%;height:auto;}
#inBox9 {display:block;overflow:hidden;position:relative;width:100%;height:auto;}

/* Bandeau bas pour 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;}
  }

/* bannière titre et contenus : mettre une partie en général+cssRoutineCompteClient ? */
#PanelBanner {height:60px;}
#inPanelBanner {display:block;position:relative;width:100%;}
#inPanelBannerMP, #inPanelBannerDiag {display:none;position:relative;border:thin solid #2D2D2D;border-top:thin solid transparent;border-bottom:thin solid transparent;color:#FFFFFF;margin:0;background:#2D2D2D;background:rgba(0,0,0,0.8);}
#inPanelBannerCrea {margin:0;}
#conteneurTitreBanner, #conteneurTitreMP, #conteneurTitreDiag, #conteneurTitreCrea  { /*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*/ /*si on met crea en générique, garder ici la height du crea en question*/
	padding:0 5px 0 50px;
	}
#conteneurTitreBanner {padding:0 5px;}
#imageEtape {width:35px;height:35px;vertical-align:middle;}
#apresEtape {padding-left:5px;}
#conteneurTitreMP, #conteneurTitreDiag, #conteneurTitreCrea {padding:0 50px 0 10px;}
#TitreBanner, #TitreMP, #TitreDiag {display:block;overflow:hidden;position:relative;font-size:120%;text-transform:none;line-height:90%;}
#TitreDiag {text-transform:uppercase;line-height:normal;}
#TitreMP {font-size:110%;line-height:100%;}
#TitreBanner {text-transform:uppercase;display:inline;font-weight:bold;text-shadow: 3px 3px 3px #b4b4b4;}
@media only screen and (min-width: 641px) and (max-width: 767px) {
  #TitreBanner, #TitreMP, #TitreDiag {font-size:120%;}
  #conteneurTitreBanner {padding:0 10px;}
  #imageEtape {width:40px;height:40px;}
  #apresEtape {padding-left:10px;}
  #inPanelBannerMP, #inPanelBannerDiag, #inPanelBannerCrea {margin:0;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #TitreBanner, #TitreMP, #TitreDiag {font-size:120%;}
  #TitreMP {line-height:95%;}
  #conteneurTitreBanner {padding:0 20px;}
  #imageEtape {width:40px;height:40px;}
  #apresEtape {padding-left:10px;}
  #inPanelBannerMP, #inPanelBannerDiag, #inPanelBannerCrea {margin:0;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #TitreBanner, #TitreMP, #TitreDiag {font-size:150%;}
  #TitreMP {line-height:95%;}
  #conteneurTitreBanner {padding:0 20px;}
  #imageEtape {width:43px;height:43px;}
  #apresEtape {padding-left:10px;}
  #inPanelBannerMP, #inPanelBannerDiag, #inPanelBannerCrea {margin:0 20px;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #TitreBanner, #TitreMP, #TitreDiag {font-size:160%;}
  #TitreMP {line-height:95%;}
  #conteneurTitreBanner {padding:0 20px;}
  #imageEtape {width:43px;height:43px;}
  #apresEtape {padding-left:10px;}
  #inPanelBannerMP, #inPanelBannerDiag, #inPanelBannerCrea {margin:0 20px;}
  }
@media only screen and (min-width: 1480px) {
  #TitreBanner, #TitreMP, #TitreDiag {font-size:170%;}
  #TitreMP {line-height:100%;}
  #conteneurTitreBanner {padding:0 20px;}
  #imageEtape {width:43px;height:43px;}
  #apresEtape {padding-left:10px;}
  #inPanelBanner, #inPanelBannerMP, #inPanelBannerDiag, #inPanelBannerCrea {max-width:1440px;margin:0 auto;}
  } 

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

/* Boites de connexion/création compte client (voir aussi le css correspondant) */
#BoxConnect {display:none;overflow:hidden;position:absolute;left:0;top:0px;width:100%;height:100%;min-height:520px;background-color:rgba(255,255,255,0.7);} /* et dans ? */
#BoxCrea {margin-bottom:144px;}
div.titreConnectCreaProduit {display:block;position:relative;margin:0 auto;width:100%;height:43px;line-height:43px;max-width:640px;background-color:#88B21A;color:#FFFFFF;text-align:center;font-size:120%;border:thin solid #88B21A;}
#posLogin {display:block;position:relative;padding-top:18px;margin:0 auto;width:100%;font-size:100%;color:#000000;max-width:640px;background-color:#ffffff;border-right:thin solid #88B21A;border-left:thin solid #88B21A;}
#conteneurLogoFermer {display:block;position:relative;width:100%;max-width:640px;height:50px;margin:0 auto;background-color:#ffffff;border:thin solid #88B21A;border-top:0px solid #88B21A;}
/* Boutons génériques - changer nom! */
/* div.BoutonGeneral, input.BoutonGeneral sur cssRoutineCompteClient */

/*
Page récapitulative composition
*/

/* Page récap droite */
#RecapCompo {position:relative;margin-bottom:10px;padding:0 5px;}  /* utilisé en critère de positionnement de BoxConnect dans le js Produit */
@media only screen and (min-width: 1025px) {
	#RecapCompo {padding:0 0;}
}
#posFormulation9, #posDetailPrix, #posDiag, #posDiagS {position:relative;width:100%;border:thin solid #DCDCDC;margin:10px auto 0 auto;max-width:640px;}
.TitreRecap {
	position:relative;
	padding:1.5% 0;width:100%;
	font-size:100%;text-transform:uppercase;text-align:center;color:#000000;
	background-color:#DCDCDC;
	}
.TexteRecap {position:relative;padding:1.5%;width:97%;font-size:85%;font-style:italic;}
/*#BlockTotalPrix {padding-top:0;}*/
#BlockDetailPrix {padding-bottom:0;}
.SsTitreRecap {position:relative;font-weight:bold;text-transform:capitalize;font-style:normal;}
.ligneDetail {position:relative;width:100%;margin:10px 0;line-height:100%;}
.ligneDetailNom {position:relative;padding-right:60px;}
.ligneDetailPrix {position:absolute;top:0px;right:0px;}
.InfoGeneText {padding-bottom:10px;}
div.RecapDiag{
  position:relative;
  background: #ebebeb url(/images/triangleselectdecalevide.png) no-repeat right bottom/19px auto;
  border:thin solid #2D2D2D;
  margin:5px auto 10px auto;padding:0 25px 0 8px;
  height:35px;width:240px;
  font-size:100%;color:#000000;text-transform:uppercase;
  line-height:35px;
  cursor:pointer;
  border-radius:5px;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.RecapDiag:hover{color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
.no-touch div.RecapDiag:active{color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
#SuppEnrichi {display:none;position:relative;width:100%;border-top:thin solid #DCDCDC;}
.TexteSuppOption {position:relative;padding:1.5%;width:97%;font-size:85%;text-align:center;}

/* Page récap gauche */
#RecapPrix {position:relative;}
#conteneurImageCarte {
  position:relative;
  margin:15px auto 15px auto;width:97%;max-width:400px;
  }
#conteneurImageCarte>img {display:block;width:100%;margin:0 auto;}
#BoxImg9 { 
  position:absolute;top:0;left:0;width:100%;height:100%;
  background: transparent url(/images/CC-General-visuel.jpg) no-repeat center center/contain;
  }
#prixBoxImg {
  position: absolute;top:1px;right:1px;width:18%;height:10%;overflow:visible;padding-top:2px;padding-right:1px;
  background: #ffffff;
  font-weight:bold;color:#000000;font-size:5vw;text-align:right; /*5vw pour ajuster*/
  }
@media only screen and (min-width: 360px) {
 #prixBoxImg {padding-top:3px;padding-right:2px;}
 }
@media only screen and (min-width: 400px) {
 #prixBoxImg {padding-top:3px;padding-right:2px;font-size:18pt;}
 }

#Box90 {position:relative;width:100%;font-size:100%;color:#000000;}
div.PartieGauche {display:block;position:relative;margin:0px auto 15px auto;}
#posFormule2 {width:97%;max-width:400px;}
#posFormule3 {width:97%;max-width:700px;}
#posFormule4 {width:97%;max-width:700px;margin-bottom:30px;}
#posFormule5 {}
#posFormule6 {}
#posFormule7 {}
#posFormule8 {width:100%;}
div.TitreDataGauche {
 width:100%;border:thin solid #88B21A;padding:4px 6px;
 background:transparent url(/images/FondTitreVert.jpg) no-repeat center center;
 color:#000000;text-align:center;font-weight:bold;font-size:120%;
 border-top-right-radius:6px;border-top-left-radius:6px;
 }
@media only screen and (min-width: 600px) {
  div.TitreDataGauche{padding:6px 6px;}
  div.PartieGauche{margin-bottom:20px;}
  }
.ContenuDataGauche {width:100%;border:thin solid #88B21A;border-top:0px solid #88B21A;padding:6px 6px 15px 6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;}
.ContenuDataGauche2 {padding-bottom:4px;}
#conteneurImageDeFond {max-width:400px;margin:0px auto 4px auto;}
div.ChampDataGauche {display:block;position:relative;margin-top:8px;margin-bottom:14px;width:100%;}
.colonne2 {display:block;position:relative;padding-left:35px;font-size:100%;line-height:110%;}
.colonne2 > span {vertical-align:text-top;} /*bof - alignement verticaux texts entre mob et ordi*/
.colonne1 { /* radio conteneur */
	display:block;position:absolute;top:0;left:0;width:35px;height:18px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent; /*enlever le fond bleu temporaire apparaissant sur chrome-smartphones quand on sélectionne*/	
	}
/* customisation radio bouton */
.colonne1 input { /* Hide the browser's default radio button */
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;width: 0; left:0;top:0;
  }
.radiomark { /* Create a custom radio button */
  position: absolute;
  top: 0;
  left: 5px;
  height: 18px;
  width: 18px;
  background: transparent url(/images/radio-vide-noir.png) no-repeat center center/100% 100%;
  }
.no-touch .colonne1:hover input ~ .radiomark { /* On mouse-over, add a grey background color */
  background-image: url(/images/radio-vide-vert.png);
  }
.radiomark:after {/* Create the indicator (the dot/circle - hidden when not checked) */
	content: "";
	position: absolute;
	display: none;
 	top: 0px;
	left: 0px;
	width: 18px;
	height: 18px;
	background: transparent url(/images/radio-plein-vert.png) no-repeat center center/100% 100%;
}
.colonne1 input:checked ~ .radiomark:after {/* Show the indicator (dot/circle) when checked */
  display: block;
}
/**/
#OptionNotificationBisErreur, #OptionPrixBisErreur, #ValidationErreur {display:none;color:red;text-align:center;}
.milieu {text-align:center;}
.TitreDataGauche2 {font-size:110%;font-weight:bold;padding:4px 6px 0px 6px;text-align:center;}
.TitreDataGauche3 {font-style:italic;font-size:85%;text-align:center;padding-bottom:4px;}
.TitreDataGauche4 {font-size:110%;font-weight:bold;padding:4px 6px;text-align:center;}
#voirVisuel {
 display:none;position:relative;width:97%;max-width:300px;margin:6px auto 20px auto;	
 }
#voirVisuel > img {display:block;width:100%;border:thin solid #A9A9A9;border-radius:0px;}
#ConteneurOptionNotification3bis, #ConteneurOptionPrix3bis {display:none;}
#ConteneurOptionNotification3bis {text-align:center;}
span.petit {font-size:85%;}
.trespetit {font-size:75%;text-transform:none;}
span.Gras {font-weight:bold}
#OptionPour1, #OptionDeLaPartDe1, #Etiquette1, #OptionNotification3bis {width:97%;max-width:300px;}
#emojisNon1,#emojisNon2,#emojisNon3 {display:none;} 
#Etiquette1 {max-width:450px;}
img.LogoInfoNoirPetit {height:18px;width:18px;vertical-align:text-bottom;cursor:pointer;}

ul.Conditions {padding:0px 0px 0px 18px;list-style-position:outside;}
li.Conditions {padding:0px 0px 6px 5px;}

div.ChangerNbCont {position:relative;display:inline-block;width:240px;vertical-align:top;margin-bottom:5px;}
#input0T97 {width:97%;max-width:640px;margin:0 auto;} /* revoir le box sizing de input */
#ChampQte {display:none;padding:0px 5px;width:220px;text-align:center;background-color:#FFFFFF;}
#ConteneurPrix {position:relative;height:55px;}
.LePrix {
	position:relative;margin:0 auto;width:240px;height:55px;padding:4px 4px 4px 4px;border:thin solid #000000;border-bottom-width:0;
	background-color:#ffffff;
	color:#000000;font-size:120%;line-height:120%;
	font-weight:bold;text-align:center;
	}
.agSM2 {padding:2px 4px 4px 4px;} /*agSM1?*/
#ConteneurPrixNormal {display:none;font-size:70%;padding-top:2px;font-weight:normal;}
#ButAjoutPanier {position:relative;margin:0 auto;width:240px;}
#ButSauver {position:relative;margin:10px auto 0 auto;width:240px;}
@media only screen and (min-width: 600px) {
    #conteneurImageCarte {margin:20px auto 20px auto;}
    #ConteneurPrix {height:54px;}
	.LePrix {
		position:absolute;right:0;top:0;width:241px;height:54px;
		border:thin solid #000000;border-right-width:0;
		text-align:left;
		}
	#ButAjoutPanier {margin:0 0;}
	#ButSauver {margin:10px auto 0 0;}
	}
div.BoutonRecap {
  background: #88B21A url(/images/trngleclick-blancvert.png) no-repeat right bottom/20px auto;
  border:thin solid #88B21A;
  padding:5px 6px 3px 6px;
  height:54px;
  width:240px;
  color:#FFFFFF;
  font-size:120%;
  line-height:110%;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.agSM3 {padding:2px 6px 3px 6px;}
.no-touch div.BoutonRecap:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch div.BoutonRecap:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}
div.BoutonRecapGauche, input.BoutonRecapGauche, input.BoutonRecapGaucheVert { 
  display:block;position:relative;
  background :#ebebeb url(/images/triangleselectdecalevide.png) no-repeat right bottom/19px auto;
  border:thin solid #2D2D2D;
  height:35px;width:240px;
  padding:0 25px 0 8px; margin:0 auto; 
  color:#000000; font-size:100%;text-align:left;
  line-height:35px;
  cursor:pointer;  
  border-radius:5px;
  }
input.BoutonRecapGauche {}
input.BoutonRecapGaucheVert {
  background-color:#88B21A;background-image:url(/images/triangleselectdecaleblanc.png);
  border-color:#88B21A;
  color:#ffffff;
  }
#button0T96 {display:inline;width:110px;margin-left:10px}
.no-touch div.BoutonRecapGauche:hover, .no-touch input.BoutonRecapGauche:hover {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border-color:#88B21A;}
.no-touch div.BoutonRecapGauche:active, .no-touch input.BoutonRecapGauche:active {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border-color:#88B21A;}
.no-touch input.BoutonRecapGaucheVert:hover {color:#000000;background-image:url(/images/triangleselectdecalevide.png);background-color:#ebebeb;border-color:#2d2d2d;}
.no-touch input.BoutonRecapGaucheVert:active {color:#000000;background-image:url(/images/triangleselectdecalevide.png);background-color:#ebebeb;border-color:#2d2d2d;}
/* !!! tester boite ci-dessous sur LC : */
#boxClick95 {position:relative;cursor:pointer;display:none;width:240px;padding:2px;background-color:#FFFFFF;border:thin solid #2D2D2D;margin-left:auto;margin-right:auto;top:-1px}
div.DansBoxClick95 {padding:4px 2px}
input.ChampsGauche {font-size:100%}
.commentaires {font-size:70%;font-style:italic;}
.commentaires2 {font-size:70%;font-style:italic;padding-bottom:5px;}
.commentaires3 {font-size:70%;font-style:italic;color: #808080;}
.encadre {display:inline-block;border:thin solid #dcdcdc;border-radius:5px;padding:2px 4px;margin:0 5px;color: #808080;}
#boxInfosQte {padding:10px 5px 0 5px;text-align:center;}

/* 
Diagnostic crème
*/

#BoxDiag {
  display:none; /* display:block ? pour avoir du jquery */
  overflow:hidden;
  position:relative;
  width:100%;
  min-height:760px;
  padding-bottom:50px;
  margin-bottom:144px;
  border:thin solid #2D2D2D;
  border-top:0px solid #2D2D2D;
  } 
#BoxDiag {font-size:100%;color:#000000;}
#ContBoutDiag {margin:10px 0px 0px 5px;}
.BoutDiag {
  display:block;float:left;
  background: #DCDCDC url(/images/triangleselectnoirvide2.png) no-repeat 142px 15px;
  border:thin solid #2D2D2D;
  padding:0 2px;
  margin:0 5px 10px 0px;
  height:35px;
  width:160px;
  text-align:center;
  font-size:100%;
  color:#000000;
  text-transform:uppercase;
  line-height:35px;
  cursor:pointer;}
.no-touch .BoutDiag:hover{background-color:#FFFFFF;background-image:url(/images/triangleselectnoirvide2.png);color:#000000;}
.no-touch .BoutDiag:active{background-color:#FFFFFF;background-image:url(/images/triangleselectnoir2.png);color:#000000;}
.BlocsDiag {display:none;position:relative;width:100%;}
.conteneurTableauxDiag {padding:10px 0px 5px 5px;}
.ConteneurDiag {display:block;position:relative;padding:0 5px 10px 0;width:100%;} /**/
.TitreDiag {display:block;width:100%;margin-bottom:10px;margin-top:10px;font-weight:bold}
table.TabDiag {position:relative;border-collapse:collapse;border:thin solid #000000;width:100%;font-size:90%;max-width:640px;}
td.TabDiag, td.TabDiag1, td.TabDiag2 {border:thin solid #000000;padding:4px 6px}
td.TabDiag1 {width:14%;min-width:70px;padding:4px 2px}
td.TabDiag2 {width:35%;height:57px}
.pttEsp {font-size:40%;} /* petit espace entre les étoiles */
.DisclaimerDiag {width:100%;padding:20px 5px 20px 5px;font-size:80%;font-style:italic;}
.PourcBioNat {width:100%;margin:20px 0;padding:3px 3px;background-color:#dbe8b9;border-radius:5px;}
.ExplicationPourcent {font-size:80%;font-style:italic;padding-top:5px;}
#BilanOdeursDiag {padding:20px 5px 10px 5px;}
.ConteneurDiagLarge {display:block;position:relative;padding:10px 5px;width:100%;} /**/
.TexteDiag {padding:5px 0px;}
.ConteneurFamilleDiag {max-width:960px;margin:15px 5px 5px 5px;padding:5px;border:thin solid #dcdcdc;border-radius:5px;}
.TitreFamilleDiag {width:100%;padding:5px 0px 0px 0px;font-weight:bold;text-transform:uppercase;}
.ContenuFamilleDiag {width:100%;padding:0px 0px 5px 0px;}
.ContenuFamilleDiagLegend {display:inline-block;margin:0 0 0 5px;padding:2px 5px;border:thin solid #2d2d2d;border-radius:5px;}
.itemFamilleDiag {width:100%;padding:3px 0px;line-height:105%;}
.itemOdeurDiag {width:100%;padding:5px 0px;}
#ConteneurConcentDiag {width:100%;}
.ListeDiag {max-width:600px;margin:8px 5px 2px 5px;font-weight:normal;padding:5px;border:thin solid #dcdcdc;border-radius:5px;}
@media only screen and (min-width: 400px) {
	td.TabDiag1 {min-width:80px;}
	.pttEsp {font-size:60%;}
	.ConteneurFamilleDiag {margin:15px 5px 5px 10px;}
    .TitreFamilleDiag {padding:5px 0px 0px 0px;}
    .ContenuFamilleDiag {padding:0px 0px 5px 0px;}
    .ContenuFamilleDiagLegend {margin:0 0 0 10px;}
    }
@media only screen and (min-width: 600px) {
    .conteneurTableauxDiag {padding:10px 0px 10px 0;}
	.ConteneurDiag {padding:0 10px 10px 10px;}
    #ContBoutDiag {margin:10px 0px 0px 10px;}
    .BoutDiag {margin:0 10px 10px 0px;}
	table.TabDiag {height:330px;}
	td.TabDiag1 {min-width:85px;}
	.pttEsp {font-size:80%;}
    .DisclaimerDiag {padding:20px 10px 20px 10px;}
    .ConteneurDiagLarge {padding:10px 10px;}
    #BilanOdeursDiag {padding:20px 10px 10px 10px;}
    .PourcBioNat {padding:5px 5px;}
	.ConteneurFamilleDiag {margin:15px 5px 5px 15px;}
    .TitreFamilleDiag {padding:5px 0px 0px 0px;}
    .ContenuFamilleDiag {padding:0px 0px 5px 0px;}
    .ContenuFamilleDiagLegend {margin:0 0 0 15px;}
    .ListeDiag {margin:8px 5px 2px 10px;}
	}
@media only screen and (min-width: 960px) {
    .conteneurTableauxDiag {padding:20px 0px 10px 0;}
	td.TabDiag1 {min-width:90px;}
	.pttEsp {font-size:90%;}
    }
@media only screen and (min-width: 1281px) {
	table.TabDiag {font-size:100%;height:360px;}
	td.TabDiag1 {width:16%;min-width:100px;}
	.conteneurTableauxDiag {}
    .DisclaimerDiag {padding:30px 10px 20px 10px;font-size:90%;}
}
@media only screen and (min-width: 1440px) {
	table.TabDiag {font-size:110%;}
	td.TabDiag1 {width:18%;min-width:110px;}
	.conteneurTableauxDiag {}
}
.Gras {font-weight:bold}
.Gros {font-size:120%;font-weight:bold;}
.puissPart {color:#88B21A;}
img.logoOlf {height:20px;width:auto;}
img.logoOlfN {height:20px;width:auto;vertical-align:middle;}
img.logoIntensite {height:40px;width:auto;vertical-align:middle;}
strong {font-weight:bold;color:#88b21a;}

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

.SousBlocsBas {
	position:relative;
	width:100%;height:145px;
	}
.ConteneurGcheBoutons {border-left:1px solid #FFFFFF;height:145px;}
.BoxValidation {display:inline-block;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-left:1px solid #FFFFFF;}
.ConteneurVide {height:145px;}


/* Boutons retour aux Prop et mise à zéro */
div.RetourProp { /*autre nom ?, homogénéiser*/
  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);}


/* 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);}
	#inPanelBannerMP, #inPanelBannerDiag {border-width:calc(2px / 3);}
	div.titreConnectCreaProduit {border-width:calc(2px / 3);}
	#posLogin {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	#conteneurLogoFermer {border-width:calc(2px / 3);border-top-width:0;}
	#posFormulation9, #posDetailPrix, #posDiag, #posDiagS {border-width:calc(2px / 3);}
	div.RecapDiag{border-width:calc(2px / 3);}
	.no-touch div.RecapDiag:hover{border-width:calc(2px / 3);}
	.no-touch div.RecapDiag:active{border-width:calc(2px / 3);}
	#SuppEnrichi {border-top-width:calc(2px / 3);}
	.LePrix {border-width:calc(2px / 3);border-bottom-width:0;}
	div.TitreDataGauche {border-width:calc(2px / 3);}
	.ContenuDataGauche {border-width:calc(2px / 3);border-top-width:0px;}
	div.BoutonRecap {border-width:calc(2px / 3);}
	div.BoutonRecapGauche, input.BoutonRecapGauche, input.BoutonRecapGaucheVert {border-width:calc(2px / 3);}
	#boxClick95 {border-width:calc(2px / 3);top:-1px;} /*-*/
	.encadre {border-width:calc(2px / 3);}
	#BoxDiag {border-width:calc(2px / 3);border-top-width:0px;}
	.BoutDiag {border-width:calc(2px / 3);}
	table.TabDiag {border-width:calc(2px / 3);}
	td.TabDiag, td.TabDiag1, td.TabDiag2 {border-width:calc(2px / 3);}
	.ConteneurFamilleDiag {border-width:calc(2px / 3);}
	.ContenuFamilleDiagLegend {border-width:calc(2px / 3);}
	.ListeDiag {border-width:calc(2px / 3);}
	div.RetourProp {border-width:calc(2px / 3);}
	#voirVisuel > img {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) {
	.LePrix {border-width:calc(2px / 3);border-right-width:0;}
	}	
/*à 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;}
	#inPanelBannerMP, #inPanelBannerDiag {border-width:0.5px;}
	div.titreConnectCreaProduit {border-width:0.5px;}
	#posLogin {border-right-width:0.5px;border-left-width:0.5px;}
	#conteneurLogoFermer {border-width:0.5px;border-top-width:0;}
	#posFormulation9, #posDetailPrix, #posDiag, #posDiagS {border-width:0.5px;}
	div.RecapDiag{border-width:0.5px;}
	.no-touch div.RecapDiag:hover{border-width:0.5px;}
	.no-touch div.RecapDiag:active{border-width:0.5px;}
	#SuppEnrichi {border-top-width:0.5px;}
    .LePrix {border-width:0.5px;border-bottom-width:0;}
	div.TitreDataGauche {border-width:0.5px;}
	.ContenuDataGauche {border-width:0.5px;border-top-width:0px;}
	div.BoutonRecap {border-width:0.5px;}
	div.BoutonRecapGauche, input.BoutonRecapGauche, input.BoutonRecapGaucheVert {border-width:0.5px;}
	#boxClick95 {border-width:0.5px;top:-1px;} /*-*/
	.encadre {border-width:0.5px;}
	#BoxDiag {border-width:0.5px;border-top-width:0px;}
	.BoutDiag {border-width:0.5px;}
	table.TabDiag {border-width:0.5px;}
	td.TabDiag, td.TabDiag1, td.TabDiag2 {border-width:0.5px;}
	.ConteneurFamilleDiag {border-width:0.5px;}
	.ContenuFamilleDiagLegend {border-width:0.5px;}
	.ListeDiag {border-width:0.5px;}
	div.RetourProp {border-width:0.5px;}
	#voirVisuel > img {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) {
	.LePrix {border-width:0.5px;border-right-width:0;}
	}
/*à 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) {	
	}