/* Contact */

/* titre général */
#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%;}
  #conteneurTitreBanner {padding:0 10px;height:98px;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #TitreBanner {font-size:180%;}
  #conteneurTitreBanner {padding:0 20px;height:98px;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #TitreBanner {font-size:180%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #TitreBanner {font-size:190%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1480px) {
  #TitreBanner {font-size:200%;}
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #inPanelBanner {max-width:1440px;margin:0 auto;height:118px;}
  #PanelBanner {height:120px;}
  } 

#posAdresse {position:relative;padding:10px;width:100%;background-color:transparent;font-size:100%;color:#000000;border-left:thin solid #DCDCDC;border-right:thin solid #DCDCDC;} /* aussi */

.infosCrea {padding-bottom:20px;font-size:90%;font-style:italic;}
.indirectives {font-size:110%;font-style:normal;font-weight:bold;}
.conteneurChamps {display:block;position:relative;width:100%;font-size:90%;padding:10px 0px;} /* sur les css principaux aussi ? */
.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;
	}
.inscr {display:block;margin:0px 0px 7px 0px;}
.nomChamp {color:#88B21A;font-weight:bold;display:block;position:relative;padding:2px 2px;text-align:left; }
.contenuChamp {display:block;position:relative;padding:2px 2px;text-align:left;}
.contenuChamp>input[type=text] {width:95%;max-width:260px;} /*!box-sizing*/ /*sauf pays et téléphone*/
#zip, #night_phone_a, #code {width:95%;max-width:80px;}
#sujet {max-width:none;}
#contenu {width:95%;height:190px;}
.errChamp {display:block;position:relative;padding:2px 2px 2px 2px;text-align:left;color:red;}
/*div.titre {padding:10px 0px;font-size:120%;font-weight:bold;text-transform:capitalize}*/
.obligatoire {position:absolute;right:2%;bottom:5px;width:96%;font-size:80%;font-style:italic;text-align:right;}
#conteneurChampsRadio {width:80%;margin-left:15%;}
.etoile {display:none;}
.RED {color:red;}
#imCaptcha {vertical-align:middle;}
#contenuErr {color:red;}
#categorie{font-size:100%;width:95%;max-width:360px;}
.contenuRadio { /* radio conteneur */
	text-align:left;height:35px;position:relative;
	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 */
.contenuRadio 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 */
  display:inline-block;position: relative;
  height: 18px;
  width: 18px;
  vertical-align:middle;
  background: transparent url(/images/radio-vide-noir.png) no-repeat center center/100% 100%;
  }
.no-touch .contenuRadio: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%;
}
.contenuRadio input:checked ~ .radiomark:after {/* Show the indicator (dot/circle) when checked */
  display: block;
}
/**/
@media only screen and (min-width: 400px) {
    #categorie{font-size:100%;}
	}
@media only screen and (min-width: 600px) {
    #categorie{font-size:100%;}
	.inscr {margin:0px 0px 4px 0px;}
    .nomChamp {text-align:right;}
	.errChamp {display:block;position:relative;padding:2px 2px 2px 41.66%;text-align:left;}
    .pourFactTitre {margin:10px auto 10px auto;width:95%;border-bottom-color:#a9a9a9;font-size:120%;line-height:normal;padding-bottom:5px;}
}
@media only screen and (min-width: 768px) {
    #categorie{font-size:100%;}
	.nomChamp {text-align:right;}
    .errChamp {display:block;position:relative;padding:2px 2px;text-align:left;}
    .pourFactTitre {width:90%;font-size:120%;}
}
@media only screen and (min-width: 960px) {
    .nomChamp {text-align:right;}
    .pourFactTitre {width:80%;font-size:120%;}
}

form {position:relative;}
#conteneurSubmit {position:relative;display:block;}
div.BoutonGeneral, input.BoutonGeneral { /* input pas même box-sizing ! pb sur ipad */
  display:block;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, .no-touch input.BoutonGeneral:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch div.BoutonGeneral:active, .no-touch input.BoutonGeneral:active{background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}

input.BoutonGeneral {margin-top:30px;margin-bottom:50px;}  /* box-sizing:content-box fait sur cssGeneral */
#submitLoader {display:none;position:absolute;height:42px;width:40px;left:calc(50% + 40px);top:0;margin:0 auto;background: transparent url(/images/loader-blanc.svg) no-repeat center center/40px 40px;}
no-touch #submitLoader:active, input.BoutonGeneral:active {background-image:url(/images/loader-vert.svg);}

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