/* Pour les routines Compte Client php */

/* 
- classe no-touch exclusivement pour les appareils sans touch panel, introduite dans session.php
- terminaison SM ou classe agSMx : pour browser Samsung Android Chrome (agSM1 dans général)

*/

/* bannières vertes pour créa compte client */
#inPanelBannerCrea {display:none;position:relative;}
@media only screen and (min-width: 1025px) {
  #inPanelBannerCrea {border-left:thin solid #88B21A;border-right:thin solid #88B21A;}
  }
#titreConnectCreaMonCompte {
  display:block;overflow:hidden;position:relative;  
  text-transform:uppercase;font-weight:bold;font-size:140%;line-height:95%;color:#2d2d2d;
  text-shadow: 3px 3px 3px #a7b289;
  }
/* images bannières hautes BD */
#inPanelBannerCrea {
  background: url(/images/BanniereAccueil640vert.jpg) no-repeat center bottom; /* center center avant partout */
  }
#titreConnectCreaMonCompte {text-align:left;font-size:140%;}
@media only screen and (min-width: 641px) and (max-width: 767px) { 
  #inPanelBannerCrea {background: url(/images/BanniereAccueil768vert.jpg) no-repeat center bottom;}
  #titreConnectCreaMonCompte {text-align:center;font-size:140%;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil1024vert.jpg) no-repeat center bottom;}
  #titreConnectCreaMonCompte {text-align:center;font-size:150%;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil1280vert.jpg) no-repeat center bottom;}
   #titreConnectCreaMonCompte {text-align:center;font-size:160%;}
 }
@media only screen and (min-width: 1281px) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueilvert.jpg) no-repeat center bottom, url(/images/BanniereAccueilRepeat.jpg) repeat-x center;}
  #titreConnectCreaMonCompte {text-align:center;font-size:170%;}
  }
@media only screen and (min-width: 1480px) {
  #titreConnectCreaMonCompte {text-align:center;font-size:180%;}
  }

/* images bannières hautes 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) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil640HteResvert.jpg) no-repeat center bottom/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) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil768HteResvert.jpg) no-repeat center bottom/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) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil1024HteResvert.jpg) no-repeat center bottom/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) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueil1280HteResvert.jpg) no-repeat center bottom/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) {
  #inPanelBannerCrea {background: url(/images/BanniereAccueilHteResvert.jpg) no-repeat center bottom/auto 240px;}
  }  


/* Boutons de validation */ /* sert aussi sur commande, mon-compte et produit + redirections */
div.BoutonGeneral, input.BoutonGeneral { /* input pas même box-sizing ! pb sur ipad */
  position:relative;
  background: #88B21A url(/images/trngleclick-blancvert.png) no-repeat bottom right/20px auto;
  border:thin solid #88B21A;
  padding:0px 0px 0px 8px;
  height:42px;
  width:240px;
  margin:0 auto;
  text-align:left;
  font-size:110%;
  color:#FFFFFF;
  text-transform:uppercase;
  line-height:42px;
  cursor:pointer;
  border-radius:0;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.BoutonGeneral:hover, input.BoutonGeneral:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch div.BoutonGeneral:active, input.BoutonGeneral:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}
div.conteneurLoader {
	display:none;position:absolute;height:42px;width:42px;top:0px;right:20px;
	background: transparent url(/images/loader-blanc.svg) no-repeat center center/32px 32px;
	}	
.no-touch div.BoutonGeneral:hover > div.conteneurLoader, input.BoutonGeneral:hover > div.conteneurLoader {background-image:url(/images/loader-vert.svg);}

/* Connexion */
#BoxConnect {} /* ou ds les pages */
/* #posLogin {position:relative;margin-top:18px;margin-bottom:10px;width:100%;font-size:100%;color:#2D2D2D;} */ /* mis dans les pages */
/*div.titreConnectCreaMonCompte, *//*géré sur produitcss*/div.titreConnectCreaProduit {} /* ou ds les pages */
#messageConnexion {display:block;position:relative;width:100%;text-align:center;padding:0 5px 5px 5px;}
#conteneurCadreConnexion {display:block;position:relative;width:100%;padding:0 2%;}
#cadreConnexion {
	display:block;position:relative;width:100%;max-width:420px;
	margin-left:auto;margin-right:auto;padding:10px 0 0 2%;
	border:thin solid #88B21A;border-radius:10px;
	}
div.conteneurEmailPass {display:block;position:relative;padding:0 2% 5px 0;}
div.titreEmailPass {display:block;position:relative;width:100%;text-align:center;padding-bottom:5px}
div.conteneurInputEmailPass {display:block;position:relative;width:100%;text-align:center;padding-bottom:5px}
#email, #password {display:block;position:relative;width:98%;}
@media only screen and (max-width: 400px) {
    #email, #password {width:90%;margin:0 auto;}
}
@media only screen and (min-width: 400px) and (max-width:599px) {
    #email, #password {width:80%;margin:0 auto;}
}
@media only screen and (min-width: 960px) and (max-width:1439px) {
     #email, #password {width:80%;margin:0 auto;}   
}

#emailwarning, #passwordwarning, #messageConnect {display:none;visibility:hidden;position:relative;width:100%;height:30px;text-align:center;font-size:80%;color:red;line-height:105%;}
#conteneurMessages {display:block;position:relative;width:100%;padding:10px 2%;} /* diminuer height ? actuellement messages longs possibles */
#messageConnect {height:45px;}
/*div.messageConnection {display:none;height:auto;padding:10px 5px 0px 5px;font-size:80%;color:red;text-align:center;overflow:hidden;}*/
div.conteneurBoutonsConnect {display:block;position:relative;padding-top:10px;padding-bottom:20px;width:100%;}
#boutonGeneral, #boutonRenvoi, #boutonPerteEtape1 {padding-right:2%;}
#boutonRenvoi {display:none}
#perteEtape1  {
  background: #FFFFFF url(/images/LogoInfosInv.png) no-repeat right center/contain;
  width:210px;
  height:25px;
  line-height:25px;
  margin:0px auto 10px auto;
  padding:0px 25px 0px 0px;
  font-size:95%;
  font-style:italic;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch #perteEtape1:hover, .no-touch #perteEtape1:active {background-image: url(/images/LogoInfos.png);}
.messagePourCreer{width:100%;padding-top:30px;text-align:center;}

/* Création */
#BoxCrea {
  display:none; position:relative; /* display:block ? pour avoir du jquery */
  overflow:hidden;  
  width:100%;
  padding-bottom:50px;
  }
@media only screen and (min-width: 1025px) {
  #BoxCrea {border-left:thin solid #88B21A;border-right:thin solid #88B21A;}
  }
#posCrea {display:block;position:relative;margin:5px 1.5% 0 1.5%;width:97%;background-color:transparent;font-size:100%;color:#000000;}
.infosCrea {padding-bottom:20px;font-size:90%;font-style:italic;}
.conteneurChamps {display:block;position:relative;width:100%;font-size:90%;padding:10px 0px;} /* sur les css principaux aussi ? */
#conteneurCrea{}
#conteneurFactCrea{display:none;}
#conteneurFactCreaMAJ {display:block;}
.inscr {display:block;margin:0px 0px 7px 0px;}
.nomChamp {display:block;position:relative;padding:2px 2px;text-align:left;color:#88B21A;font-weight:bold;}
.contenuChamp {display:block;position:relative;padding:2px 2px;text-align:left;}
.contenuChamp>input[type=text], .contenuChamp>input[type=password] {width:95%;max-width:260px;} /*!box-sizing*/ /*sauf pays et téléphone*/
#zipcrea, #night_phone_acrea, #zipFactcrea {width:95%;max-width:80px;}
#zipMAJ, #night_phone_aMAJ, #zipFactMAJ {width:95%;max-width:80px;}
.errChamp {display:block;position:relative;padding:2px 2px 2px 10px;text-align:left;}
.pourFact {width:100%;margin:0px auto;}
#pourFactEnsuite {display:none;}
#pourFactEnsuiteMAJ {display:block;}
#pourFactInitialMAJ {display:none;}
.pourFactCheck { /* checkbox conteneur */
	display:inline-block;position:relative;width:10%;text-align:center;margin-left:1.5%;height:20px;
	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 checkbox */
.pourFactCheck input { /* Hide the browser's default checkbox */
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;width: 0; left:0;top:0;
  }
.pourFactCheck .checkboxmark { /* Create a custom checkbox */
  display:block; position: relative;
  margin: 2px auto 0 auto;
  height: 18px;
  width: 18px;
  background: transparent url(/images/check-vide-noir.png) no-repeat center center/100% 100%;
  }
.no-touch .pourFactCheck:hover input ~ .checkboxmark { /* On mouse-over*/
  background-image: url(/images/check-vide-vert.png);
  }
.checkboxmark:after {/* Create the indicator (hidden when not checked) */
	content: "";
	position: absolute;
	display: none;
 	top: 0px;
	left: 0px;
	width: 18px;
	height: 18px;
	background: transparent url(/images/check-plein-vert.png) no-repeat center center/100% 100%;
}
.pourFactCheck input:checked ~ .checkboxmark:after {/* Show the indicator when checked */
  display: block;
}
/**/
.pourFactComment {display:inline-block;width:87%;vertical-align:top;}
/*.pourFactTitre {display:block;position:relative;width:95%;margin:10px auto 10px auto;padding-bottom:5px;border-bottom:thin solid #88B21A;text-transform:uppercase;text-align:center;color:#88B21A;font-size:110%;line-height:105%;}*/
.pourFactTitre {
	display:block;position:relative;width:100%;margin:10px auto 10px 0;padding-bottom:1px;
	border-bottom:thin solid #2D2D2D;
	color:#000000;font-size:120%;line-height:105%;font-weight:bold;text-transform:capitalize;
	}
#messageConnect2 {display:block;height:50px;padding:0px 10px;color:red;text-align:center;font-size:85%;} /* ? */
.errChamp {display:none;visibility:hidden;overflow:hidden;color:red;}
.conteneurBoutonsCrea {display:block;position:relative;padding-top:20px;padding-bottom:20px;width:100%}
#errValidation {display:none;position:absolute;width:100%;top:0;left:0;text-align:center;font-style: italic;color:red;font-size:80%;}
@media only screen and (min-width: 600px) {
	#messageConnect2 {padding:0px 80px;font-size:100%;} /* ? */
	.inscr {margin:0px 0px 4px 0px;}
    .nomChamp {text-align:right;}
	.errChamp {position:relative;padding:2px 2px 2px 50%;text-align:center;}
    .pourFactTitre {margin:10px auto 10px auto;width:95%;border-bottom-color:#a9a9a9;font-size:120%;line-height:normal;padding-bottom:5px;}
	.pourFactCheck {width:10%;margin-left:5%}
	.pourFactComment {width:85%;}
}
@media only screen and (min-width: 768px) {
    .nomChamp {text-align:right;}
    .errChamp {position:relative;padding:2px 2px;text-align:left;}
    .pourFactTitre {width:90%;font-size:120%;}
	.pourFactCheck {width:7.5%;margin-left:7.5%}
	.pourFactComment {width:77.5%;}
}
@media only screen and (min-width: 960px) {
    .nomChamp {text-align:right;}
    .pourFactTitre {width:80%;font-size:120%;}
	.pourFactCheck {width:5%;margin-left:10%}
	.pourFactComment {width:75%;}
}

	
/* 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.BoutonGeneral {border-width:0.5px;}
	.pourFactTitre {border-bottom-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) {
	div.BoutonGeneral, input.BoutonGeneral {border-width:calc(2px / 3);}
	#cadreConnexion {border-width:calc(2px / 3);}	
	.pourFactTitre {border-bottom-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) {
	#inPanelBannerCrea {border-left-width:calc(2px / 3);border-right-width:calc(2px / 3);}
	#BoxCrea {border-left-width:calc(2px / 3);border-right-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) {
	div.BoutonGeneral, input.BoutonGeneral {border-width:0.5px;}
	#cadreConnexion {border-width:0.5px;}	
	.pourFactTitre {border-bottom-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) {
	#inPanelBannerCrea {border-left-width:0.5px;border-right-width:0.5px;}
	#BoxCrea {border-left-width:0.5px;border-right-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) {	
	}