/* CSS générique pour mon compte */

/* 
Général
*/

h1 {font-family: Courier New ;font-size:17pt;font-weight:bold;color:#2d2d2d;margin:0px;padding:0px;}
h2 {font-family: Courier New ;font-size:14pt;font-weight:400;color:#ffffff;margin:0px;padding:0px;}

/* bannière titre et contenus : mettre une partie en général+cssRoutineCompteClient ? */
#PanelBanner {height:80px;}
#inPanelBanner {display:block;position:relative;width:100%;}
#inPanelBannerCrea {margin:0;}
#conteneurTitreBanner, #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:78px; /*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 25px;
	}
#conteneurTitreBanner {padding:0 5px;}
#conteneurTitreCrea {padding:0 50px 0 10px;}
#conteneurTitreCrea {height:80px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
#TitreBanner {display:block;overflow:hidden;position:relative;font-size:140%;text-transform:none;line-height:95%;/*background-color: rgba(255,255,255,0.80);*/}
#TitreBanner {display:inline;text-transform:uppercase;font-weight:bold;font-size:140%;line-height:100%;text-shadow: 3px 3px 3px #b4b4b4;}
@media only screen and (min-width: 641px) and (max-width: 767px) {
  #TitreBanner {font-size:160%;}
  #conteneurTitreCrea {padding:0 10px 0 30px;height:98px;}
  #conteneurTitreCrea {height:100px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
  #conteneurTitreBanner {padding:0 10px;height:98px;}
  #inPanelBannerCrea {margin:0;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #TitreBanner {font-size:180%;}
  #conteneurTitreCrea {padding:0 20px 0 35px;height:98px;}
  #conteneurTitreCrea {height:100px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
  #conteneurTitreBanner {padding:0 20px;height:98px;}
  #inPanelBannerCrea {margin:0;}
  #PanelBanner {height:100px;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #TitreBanner {font-size:180%;}
  #conteneurTitreCrea {padding:0 20px 0 40px;height:118px;}
  #conteneurTitreCrea {height:120px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #inPanelBannerCrea {margin:0 20px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #TitreBanner {font-size:190%;}
  #conteneurTitreCrea {padding:0 20px 0 40px;height:118px;}
  #conteneurTitreCrea {height:120px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #inPanelBannerCrea {margin:0 20px;}
  #PanelBanner {height:120px;}
  }
@media only screen and (min-width: 1480px) {
  #TitreBanner {font-size:200%;}
  #conteneurTitreCrea {padding:0 20px 0 50px;height:118px;}
  #conteneurTitreCrea {height:120px;} /*plus haut mais pas grave car conteneur PanelBanner est ici overflow hidden*/
  #conteneurTitreBanner {padding:0 20px;height:118px;}
  #inPanelBanner, #inPanelBannerCrea {max-width:1440px;margin:0 auto;height:120px;} /* avant height : 118px;??*/
  #PanelBanner {height:120px;}
  } 

#PanelBlocs {min-height:480px;} /*au cas où ?*/

#BoxInfos {display:none;overflow:hidden;position:relative;width:100%;border-right:thin solid #2d2d2d;border-left:thin solid #2d2d2d;padding:5px 1.5% 10px 1.5%;} /*conteneur général*/

/* boites de connection */
#BoxConnect {display:none;overflow:hidden;position:relative;width:100%;} /*reste dans routinecompteclient*/
div.titreConnectCreaMonCompte {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:thin solid #88B21A;border-top:0px solid #88B21A;}
#BoxCrea {margin-bottom:0px;} /*dans routinecompteclient*/
@media only screen and (min-width: 960px) {
    #BoxConnect {padding:30px 0;}
}
@media only screen and (min-width: 1281px) {
    #BoxConnect {padding:60px 0;}
}

/*
rubriques compte client
*/

/* Menu haut */
#posMenu { /*plus bas aussi!*/
  display:none;position:relative;overflow:hidden; 
  width:100%; /* rattraper un peu de marge de BoxInfos, pas élégant... */
  margin:5px 0 5px 0;
  font-size:90%;
  color:#000000
}
.BoutMenuCompte {
  display:block;float:left;
  height:35px;width:160px;
  padding:0 2px;margin:0 5px 10px 0px;
  border:thin solid #2D2D2D;
  background: #DCDCDC url(/images/trngleclick-noirinv-BR.png) no-repeat 142px 15px/20px 20px;
  text-align:center;font-size:100%;line-height:35px;color:#000000;text-transform:uppercase; 
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch .BoutMenuCompte:hover{background-color:#FFFFFF;background-image:url(/images/trngleclick-noirinv-BR.png);color:#000000;}
.no-touch .BoutMenuCompte:active{background-color:#FFFFFF;background-image:url(/images/trngleclick-noir-BR.png);color:#000000;}
.BoutMenuCompteRouge {
  display:block;float:left;
  height:35px;width:160px;
  padding:0 2px;margin:0 5px 10px 0px;
  border:thin solid #B22222;
  background: #B22222 url(/images/trngleclick-blancrouge-BR.png) no-repeat bottom right/15px auto; /*triangle pas homogène avec ceux du dessus... */
  text-align:center;font-size:100%;line-height:35px;color:#FFFFFF;text-transform:uppercase; 
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch .BoutMenuCompteRouge:hover{background-color:#FFFFFF;background-image:url(/images/trngleclick-blancrouge-BR.png);color:#B22222;}
.no-touch .BoutMenuCompteRouge:active{background-color:#FFFFFF;background-image:url(/images/trngleclick-rouge-BR.png);color:#B22222;}
@media only screen and (min-width: 960px) {
    #posMenu {margin:10px 0 10px 0;}
	#BoxConnect {width:100%;}
	.BoutMenuCompte{margin:0 10px 10px 0px;}
	.BoutMenuCompteRouge{margin:0 10px 10px 0px;}
	}
/* aspect triangles en fonction de la résolution */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 1.5/1),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 144dpi),
only screen and (                min-resolution: 1.5dppx) {
	.BoutMenuCompte, .no-touch .BoutMenuCompte:hover {background-image:url(/images/trngleclick-noirinv-HR.png);}
	.no-touch .BoutMenuCompte:active {background-image:url(/images/trngleclick-noir-HR.png)}
	.BoutMenuCompteRouge, .no-touch .BoutMenuCompteRouge:hover {background-image:url(/images/trngleclick-blancrouge-HR.png);}
	.no-touch .BoutMenuCompteRouge:active {background-image:url(/images/trngleclick-rouge-HR.png)}
}
@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) {
	.BoutMenuCompte, .no-touch .BoutMenuCompte:hover {background-image:url(/images/trngleclick-noirinv-THR.png);}
	.no-touch .BoutMenuCompte:active {background-image:url(/images/trngleclick-noir-THR.png)}
	.BoutMenuCompteRouge, .no-touch .BoutMenuCompteRouge:hover {background-image:url(/images/trngleclick-blancrouge-THR.png);}
	.no-touch .BoutMenuCompteRouge:active {background-image:url(/images/trngleclick-rouge-THR.png)}
}



#parrain {display:none;}

/*conteneur principal pour ajaxqueries*/

/* Mise à jour Compte - dans RoutineCompteClient*/

/* listes */
.Titre {padding:10px 0px 10px 0px;font-weight:bold;}
.SousTitre {padding:5px 0px 5px 10px;}
.ChoixTypeListe {margin:10px 0 30px 0;}
.inChoixTypeListe {margin:5px 0;}
.ListeForm, .ListeComm {display:block;position:relative;max-width:1280px;font-size:90%;margin-top:15px;}
.ListeForm {margin-top:30px;}
.HeadingsForm, .HeadingsComm, .HeadingsParr {
	display:none;position:relative;
	width:100%;
	margin:0 0 10px 0;padding:10px 0;
	border-left:thin solid #2D2D2D;border-right:thin solid #2D2D2D;
	color:#FFFFFF;
	background: url(/images/ligneverticaleblanche.png) repeat-y 8.33%, url(/images/ligneverticaleblanche.png) repeat-y 58.33%, url(/images/ligneverticaleblanche.png) repeat-y 83.33%, #2D2D2D;
	}
.HeadingsComm {
	background: url(/images/ligneverticaleblanche.png) repeat-y 8.33%, url(/images/ligneverticaleblanche.png) repeat-y 41.66%, url(/images/ligneverticaleblanche.png) repeat-y 66.66%, #2D2D2D;
    }
.HeadingsParr {
	background: url(/images/ligneverticaleblanche.png) repeat-y 8.33%, url(/images/ligneverticaleblanche.png) repeat-y 75.00%, url(/images/ligneverticaleblanche.png) repeat-y 91.66%, #2D2D2D;
    }
.HeadingsForm > div, .HeadingsComm > div, .HeadingsParr > div {padding:0 5px;text-align:center;text-transform: uppercase;}
.rangeeListe {display:block;position:relative;width:100%;margin:0 0 10px 0;padding:0 0 0 0;border:thin solid #2D2D2D;background-image:url(/images/fond-listes.jpg);background-size:100% 100%;overflow:hidden;border-radius:5px;}
.rangeeListeC {display:block;position:relative;width:100%;margin:0 0 20px 0;padding:0 0 0 0;border:thin solid #2D2D2D;overflow:hidden;border-radius:5px;}
.rangeeListeF {display:block;position:relative;width:100%;margin:0;padding:0;}
.caseRef {padding:5px 5px 5px 5px;border-bottom:thin solid #2D2D2D;color:#ffffff;background-color:#2d2d2d;font-size:120%}
.pluspetit {font-size:100%;}
.pluspetit2 {font-size:85%;}
.anciennement {display:inline;font-size:75%;font-style:italic;} /* comme un span */
.caseDescrip {padding:0 5px 5px 5px;border-bottom:thin solid #2D2D2D;}
.caseDescripF {position:relative;padding:7px 5px 2px 14px;border:thin solid #2D2D2D;overflow:hidden;border-radius:5px;font-size:90%;}
div.ArticleSupp {
  position:absolute;
  display:block;
  top:5px;right:5px;
  width:25px;height:25px;
  background:url(/images/fermerrouge.png) no-repeat center center/100% auto;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.ArticleSupp:hover, .no-touch div.ArticleSupp:active{background-image: url(/images/fermernoirinv.png);}

.caseHistorique {padding:5px 5px 5px 5px;border-bottom:thin solid #2D2D2D;}
.caseHistoriqueF {padding:7px 5px 7px 14px;margin-top:5px;border:thin solid #2D2D2D;overflow:hidden;border-radius:5px;font-size:90%;}
.caseHistorique2 {padding:5px 5px 5px 5px;} /*inutile ?*/
.caseAction {padding:5px 0 5px 0;position:relative;} /*fond herbe de banner dans cssGeneral*/
.caseActionF {padding:0 0 10px 0;}
.TypeCompo {position:relative;padding:5px 0 0 0;text-transform: uppercase;}
.TypeCompoF {position:relative;padding-bottom:2px;text-transform:capitalize;font-size:120%;font-weight:bold;}
span.TexteSpecialF {display:none;}
.DescripCompo {position:relative;padding:5px 0 0 0;}
.rondCC, .rondCJ, .rondCN, .rondCY, .rondLC {position:relative; background: transparent no-repeat left center/auto 14px;padding:0 0 0 23px;margin:0 0 3px 0;}
.rondCC {background-image:url(/images/rondCC.png);}
.rondCJ {background-image:url(/images/rondCJ.png);}
.rondCN {background-image:url(/images/rondCN.png);}
.rondCY {background-image:url(/images/rondCY.png);}
.rondLC {background-image:url(/images/rondLC.png);}
.InfosCompo {position:relative;padding:5px 0 0 0;font-style:italic;}
.InfosCompoC {position:relative;padding:5px 0 0 0;font-weight:bold;font-size:120%;}
.conteneurBouton {display:block;position:relative;margin:0 auto;}
.conteneurBoutonC {display:block;position:relative;margin:0 5px 0 auto;}
.conteneurBoutonF {display:block;position:relative;text-align:left;margin:0 auto;background-color:rgba(255,255,255,0.95);min-height:70px;}
.TitreStar {font-size:85%;padding:10px 10px 20px 10px;}
@media only screen and (min-width: 481px) {
	.rangeeListeF {margin-bottom:5px;}
	.caseDescripF {padding:10px 5px 5px 14px;}
	.caseHistoriqueF {padding:10px 5px 10px 14px;}
	.TypeCompoF {padding-bottom:5px;}
	span.TexteSpecialF {display:inline;}
    } 
@media only screen and (min-width: 640px) {
	.caseDescripF {padding-left:18px;}
	.caseHistoriqueF {padding-left:18px;}
	}
@media only screen and (min-width: 960px) {
    .ListeForm {font-size:90%;margin-top:30px;}
	.ListeComm {font-size:90%;margin-top:20px;}
	.rangeeListeF {margin-bottom:20px;}
	.caseRef {border-style:none;color:#000000;background-color:transparent;font-size:100%;}
	.pluspetit {font-size:85%;}
	.caseDescrip {border-style:none;}
	span.TexteSpecialF {display:none;}
	.caseHistorique, .caseHistorique2 {border-style:none;}
	.caseHistoriqueF {margin:0;padding-left:18px;border:none;}
	.anciennement {display:block;}
	.HeadingsForm, .HeadingsComm, .HeadingsParr {display:block;}
	.caseAction {padding:5px 0 5px 0;background:none;}
	.conteneurBoutonF {margin:0;}	
	}
@media only screen and (min-width: 1150px) { /*batard!*/
	span.TexteSpecialF {display:inline;}
	.caseDescripF {padding-right:18px;}
	.caseHistoriqueF {padding-left:30px;}
	}
@media only screen and (min-width: 1281px) {
    .ListeForm, .ListeComm {font-size:100%;}
}
@media only screen and (min-width: 1440px) {
	.caseDescripF, .caseHistoriqueF {font-size:100%;}
}

/* Affiche Commande - inspiré de cssPanier */
div.TitreComm {font-size:110%;font-weight:bold;width:100%;max-width:720px;margin:20px auto 15px auto;text-transform:uppercase;color:#000000;}
div.Commentaires {font-size:100%;width:100%;max-width:720px;margin:10px auto 15px auto;color:#000000;}
#posPanier  {display:block;position:relative;width:100%;margin:0 auto;color:#000000;} /* posPanier/inPosPanier, un en trop! */
#inPosPanier {display:block;position:relative;width:100%;background-color:#FFFFFF;font-size:100%;}
div.Article {display:block;position:relative;width:100%;max-width:720px;margin:0 auto;padding:15px 0 0 0;} 
div.ArticleGene {display:block;position:relative;overflow:hidden;border:1px solid #2D2D2D;border-radius:5px;}
div.ArticleDescr {display:block;position:relative;color:#000000;min-height:35px;overflow:hidden;}
div.ArticleDescr1 {width:100%;position:relative;padding:7px 5px 7px 14px;overflow:hidden;background-color:rgba(255,255,255,0.95);font-weight:bold;}
.bandeauArticle {display:block;position:absolute;width:11px;top:-1px;left:-1px;height:calc(100% + 3px);}
.bandeauArticleCJ {background-color:#eedc12;}
.bandeauArticleCN {background-color:#4b5c9c;}
.bandeauArticleCY {background-color:#238072;}
.bandeauArticleLC {background-color:#ebc8c0;}
div.ArticlePrix {
	position:relative;width:100%;padding:7px 10px;
	text-align:right;color:#000000;font-weight:bold;
	background-color:rgba(255,255,255,0.95);
	border-top:1px solid #2d2d2d;
	}
div.ArticleContenu {display:block;position:relative;padding:7px 5px 2px 14px;font-size:80%;background-color:rgba(235,235,235,0.95);border-top:1px solid #2D2D2D;}
div.ArticleItem {padding-bottom:5px}
span.ArticleItemTitre {font-weight:bold}
div.ArticleBouton {display:block;position:relative;text-align:left;margin:0 auto;background-color:rgba(255,255,255,0.95);height:50px;}
div.posTotal {position:relative;background-color:#FFFFFF;border:thin solid #2D2D2D;margin-bottom:30px;padding:10px 5px;font-size:110%;color:#000000;background-color:#FFFFFF;background-color: rgba(255,255,255,0.8);}
div.TotalPrix {display:block;position:relative;line-height:105%;}
#leTotal {margin-top:10px;font-weight:bold;}
#laReduc {margin-top:10px;}
#prixTotal, #prixExped, #prixReduction {text-align:right}
.TitreStarC {font-size:85%;width:100%;max-width:960px;margin:0 auto 20px auto;}
@media only screen and (min-width: 481px) {
	div.ArticleDescr1 {padding:10px 115px 10px 14px;}
	div.ArticlePrix {position:absolute;width:110px;height:100%;top:0;right:0;padding:10px 5px;border-top:none;}
	div.ArticleContenu {padding:10px 5px 5px 14px;}
	div.ArticleBouton {height:70px;}
    } 
@media only screen and (min-width: 640px) {
	.bandeauArticle {width:13px;}
	div.ArticleDescr1, div.ArticleContenu {padding-left:18px;}
	} 
@media only screen and (min-width: 960px) {
	div.posTotal {margin-bottom:30px;}
	div.ArticleBouton {margin:0;}
	div.TitreComm {margin-top:25px;}
	div.Article {padding:15px 0 15px 0;}
    } 
/* rubrique Fidélité */
.Texte {font-size:100%;padding:10px 0px 10px 0px;}
.BoldVert {font-size:140%;font-weight:bold;color:#88B21A;}
.Vert {color:#88B21A;}
.GrasVert {color:#88B21A;font-weight:bold;}
.Orange {color:#ff722f;}
.SousTexte {font-size:80%;font-style:italic;margin-top:4px;}
.descriptCheckMemoire {display:block;position:relative;padding-left:25px;margin-top:4px;}
.checkMemoire { /* checkbox conteneur */
	display:table-cell;position:relative;height:30px;padding-left:25px;
	cursor: pointer;vertical-align:bottom;
	-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*/	
	}
.checkMemoire > span.TexteInutilePour600 {vertical-align:top;}
/* customisation checkbox */
.checkMemoire input { /* Hide the browser's default checkbox */
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;width: 0; left:0;top:0;
  }
.checkMemoire .checkboxmark { /* Create a custom checkbox */
  display:block; position: absolute;
  left:2px;top:8px;
  height: 18px;
  width: 18px;
  background: transparent url(/images/check-vide-noir.png) no-repeat center center/100% 100%;
  }
.no-touch .checkMemoire:hover input ~ .checkboxmark { /* On mouse-over*/
  background-image: url(/images/check-vide-vert.png);
  }
/*.checkboxmark:after fait dans cssRoutineCompteClient*/
.checkMemoire input:checked ~ .checkboxmark:after {/* Show the indicator when checked */
  display: block;
  }
.TexteImage {display:block;position:relative;font-size:100%;margin:0 auto;padding:10px 0px 10px 0px;width:70%;max-width:300px;}
.TexteImage > img {display:block;position:relative;width:100%;border:thin solid #A9A9A9;border-radius:0px;}
@media only screen and (min-width: 481px) {
	.TexteImage{margin:0;}
	}
/*rubrique parrains*/
.Ligne {
  position:relative;display:block;
  font-size:100%;
  width:100%;margin:15px 0px 0px 0px; border:0.5px solid #dcdcdc; background: #fafafa; padding:8px 9px;
  border-radius: 8px;
  }
.LigneTitre {position:relative;display:block;margin:0px 0px 10px 0px;}
.LigneContenu {position:relative;display:block;margin:10px 0 0 0;}
.Bullet {
	margin:5px 0px;padding:2px 0px 2px 27px; /*il y a agSM1 ici */
	background:transparent url(/images/bullet-vert.png) no-repeat 5px 8px/8px 8px; 
	}
.commentairePetit {font-style:italic;font-size:80%;}
div.TitreResumeP {padding-bottom:10px;}
span.TitreP {font-weight:bold;color:#88B21A;}
div.ResumeP {width:100%;max-width:720px;margin:0px auto 0px auto;padding:5px;font-size:90%;border:thin solid #88B21A;}
h2.TitreP {padding:20px 5px 10px 5px;font-weight:bold;color:#88B21A;}
#TitreContrat {padding-top:10px;text-align:center;}
div.TexteP {padding:0px 5px 10px 5px;font-size:90%;}
div.TextePSpe {padding:10px 5px 10px 5px;font-size:90%;}
span.Gras {font-weight:bold}
ul.PointsCGV {padding:0px 0px 0px 15px;margin:0;list-style-position:outside;}
li.PointsCGV {padding:0px 0px 5px 5px;}
.sousLi {padding:0px 0px 5px 0px;}

.conteneurLabel {margin-top:6px;}
.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;
}
/**/
/* Boutons */
div.Bouton, div.BoutonRouge, div.ToutPetitBoutonGris { /*plus de BoutonRouge*/
  display:inline-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:50px;
  width:140px;
  margin:5px;
  text-align:left;
  font-size:110%;
  color:#FFFFFF;
  text-transform:uppercase;
  line-height:50px;
  border-radius:3px;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
#versContrat {margin-top:10px;}
#versContrat2 {display:block;margin:10px 0;}
#loaderBouton {
  display:none;
  height:50px;
  width:140px;
  margin:10px 0;
  background: transparent url(/images/loader-vert.svg) no-repeat center center/40px 40px;
  border:thin solid #88B21A;
  border-radius:3px;
  }
div.BoutonRouge {background: #B22222 url(/images/trngleclick-blancrouge.png) no-repeat bottom right/20px auto;border:1px solid #B22222;}
div.ToutPetitBoutonGris {
  border:thin solid #808080;
  background: #808080 url(/images/trngleclick-blancgris.png) no-repeat bottom right/14px auto;
  margin:0 auto;
  width:50px;height:32px;
  line-height:32px; 
}
.no-touch div.Bouton:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertinv.png);color:#88B21A;}
.no-touch div.Bouton:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-vertplein.png);color:#88B21A;}
.no-touch div.BoutonRouge:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-rougeinv.png);color:#B22222;}
.no-touch div.BoutonRouge:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-rougeplein.png);color:#B22222;}
.no-touch div.ToutPetitBoutonGris:hover {background-color:#FFFFFF;background-image:url(/images/trngleclick-grisinv.png);color:#808080;}
.no-touch div.ToutPetitBoutonGris:active {background-color:#FFFFFF;background-image:url(/images/trngleclick-grisplein.png);color:#808080;}

.conteneurBoutonC > div.Bouton {float:right;}
div.ArticleBouton > div.Bouton {font-size:99%;} /*homogénéiser tailles dans bouton*/
@media only screen and (max-width: 480px) {
	.conteneurBoutonC > div.Bouton {width:100px;padding-left:6px;font-size:100%;height:40px;line-height:40px;background-size:15px auto;}
	.conteneurBoutonF > div.Bouton {width:120px;padding-left:6px;font-size:100%;height:40px;line-height:40px;background-size:15px auto;}
	div.ArticleBouton > div.Bouton {width:120px;padding-left:6px;font-size:90%;height:40px;line-height:40px;background-size:15px auto;}
    } 
@media only screen and (max-width: 480px) {
	div.ArticleBouton > div.Bouton {display:block;margin:5px 0 0 0;position:absolute;top:0;right:5px;}
	.conteneurBoutonF > div.Bouton {display:block;margin:5px 0;position:absolute;top:0;right:5px;}
	.conteneurBoutonC > div.Bouton {float:right;}
	}
@media only screen and (min-width: 481px) and (max-width: 959px) {
	div.ArticleBouton > div.Bouton {display:block;margin:10px 0 0 0;position:absolute;top:0;right:15px;}
	.conteneurBoutonF > div.Bouton {display:block;margin:5px 0;position:absolute;top:0;right:15px;}
	}
@media only screen and (min-width: 960px) {
	div.ArticleBouton > div.Bouton, .conteneurBoutonF > div.Bouton {margin:0 0 0 10px;}
    } 
	
/* 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.Bouton, div.BoutonRouge, div.ToutPetitBoutonGris, #loaderBouton {border-width:0.5px;}
	.BoutMenuCompteRouge, .BoutMenuCompte {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) {
	#BoxInfos {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	div.titreConnectCreaMonCompte {border-width:calc(2px / 3);}
	#posLogin {border-width:calc(2px / 3);border-top-width:0px;}
	.BoutMenuCompte {border-width:calc(2px / 3);}
	.BoutMenuCompteRouge {border-width:calc(2px / 3);}
	.HeadingsForm, .HeadingsComm, .HeadingsParr {border-right-width:calc(2px / 3);border-left-width:calc(2px / 3);}
	.rangeeListe, .rangeeListeC {border-width:calc(2px / 3);}
	.caseRef {border-bottom-width:calc(2px / 3);}
	.caseDescrip {border-bottom-width:calc(2px / 3);}
	.caseDescripF {border-width:calc(2px / 3);}
	.caseHistorique {border-bottom-width:calc(2px / 3);}
	.caseHistoriqueF {border-width:calc(2px / 3);}
	div.ArticleGene {border-width:calc(2px / 3);}
	.bandeauArticle {border-right-width:calc(2px / 3);}
	div.ArticlePrix {border-top-width:calc(2px / 3);}
	div.ArticleContenu {border-top-width:calc(2px / 3);}
	div.posTotal {border-width:calc(2px / 3);}
	div.Bouton, div.BoutonRouge, div.ToutPetitBoutonGris, #loaderBouton {border-width:calc(2px / 3);}
	div.ToutPetitBoutonGris {border-width:calc(2px / 3);}
	.TexteImage > 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: 481px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 481px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 481px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 481px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 481px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 481px) {
	div.ArticlePrix {border-top:none;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)	  and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 960px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 960px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 960px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 960px) {
	.caseHistoriqueF {border:none;}
	}
/*à 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) {
	#BoxInfos {border-right-width:0.5px;border-left-width:0.5px;}
	div.titreConnectCreaMonCompte {border-width:0.5px;}
	#posLogin {border-width:0.5px;border-top-width:0px;}
	.BoutMenuCompte {border-width:0.5px;}
	.BoutMenuCompteRouge {border-width:0.5px;}
	.HeadingsForm, .HeadingsComm, .HeadingsParr {border-right-width:0.5px;border-left-width:0.5px;}
	.rangeeListe, .rangeeListeC {border-width:0.5px;}
	.caseRef {border-bottom-width:0.5px;}
	.caseDescrip {border-bottom-width:0.5px;}
	.caseDescripF {border-width:0.5px;}
	.caseHistorique {border-bottom-width:0.5px;}
	.caseHistoriqueF {border-width:0.5px;}
	div.ArticleGene {border-width:0.5px;}
	.bandeauArticle {border-right-width:0.5px;}
	div.ArticlePrix {border-top-width:0.5px;}
	div.ArticleContenu {border-top-width:0.5px;}
	div.posTotal {border-width:0.5px;}
	div.Bouton, div.BoutonRouge, div.ToutPetitBoutonGris, #loaderBouton {border-width:0.5px;}
	div.ToutPetitBoutonGris {border-width:0.5px;}
	.TexteImage > img {border-width:0.5px;}
	}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 481px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 481px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 481px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 481px),
only screen and (                min-resolution: 192dpi) and (min-width: 481px),
only screen and (                min-resolution: 2dppx) and (min-width: 481px) {
	div.ArticlePrix {border-top:none;}
    } 
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 960px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 960px),
only screen and (                min-resolution: 192dpi) and (min-width: 960px),
only screen and (                min-resolution: 2dppx) and (min-width: 960px) {
	.caseHistoriqueF {border:none;}
    } 
/*à 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) {	
	}

	
/* trucs moches à corriger quand 1dppx - à faire autrement ? */
@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.ArticleGene, .caseDescripF, .caseHistoriqueF, .rangeeListe, .rangeeListeC {border-radius:0px;}
	div.Bouton, div.ToutPetitBoutonGris, #loaderBouton {border-radius:0px;}
	}