/* 
   version gérée avec la variable vCSS = 1.00 au 16/11/2017
   ! MAJ images changer version de l'image puis MAJ version CSS
   Accueil général du site 
   ! rajouter bornes hautes et basses pour media queries
   terminaison SM ou classe agSMx : pour browser Samsung Android Chrome
*/

#PanelBanner {width:100%;} /* #PanelBannerFlacons de height */

.PanelBannerSlides { /* MAJ des images du slider dans Accueil-Slider */
  display:none;overflow:hidden;position:absolute;
  top:0;left:0;width:100%;height:100%;
  }
.imageAccueil {
  overflow:hidden;
  position:relative;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center center;
  }

.TitreSlides, .TitreSlidesSM {
	display:block;position:absolute;padding:4px 8px;	
	border-right:thin solid #2D2D2D;border-left:thin solid #2D2D2D;	
	text-transform:uppercase;font-weight:normal;font-size:110%;
	line-height:110%;	
	}
.TitreSlidesSM {padding:3px 8px 6px 8px;}
.pourLeClick {display:block;position:absolute;}
.inPourLeClick {
	display:block;position:relative;
	width:30px;height:30px;
	background:transparent url(/images/LogoInfosSlider.png) no-repeat center center/100% 100%;
	cursor:pointer;
	}
.no-touch .inPourLeClick:hover, .no-touch .inPourLeClick:active {background-image: url(/images/LogoInfosSliderInv.png);}

@media only screen and (max-width: 767px) {
  .pourLeClick {bottom:15px;text-align:center;}
  .inPourLeClick {margin:0 auto;}
  .TitreSlides, .TitreSlidesSM {top:0;border-bottom:thin solid #2D2D2D;border-top:0 solid #2D2D2D;background-color: rgba(255,255,255,0.90);text-shadow: 1px 1px 2px #8b8b8b;}
  }
@media only screen and (min-width: 768px) {
  .pourLeClick {top:50%;padding-right:15px;text-align:right;}
  .inPourLeClick {margin:0 0 0 auto;}
  .TitreSlides, .TitreSlidesSM {bottom:0;border-bottom:0 solid #2D2D2D;border-top:thin solid #2D2D2D;background-color: rgba(255,255,255,1);}
  }

@media only screen and (max-width: 319px) { /* pas d'image adaptative */
  #PanelBannerFlacons {display:block;position:relative;height:180px;margin:0 auto;right:calc(320px - 100%);} 
  .imageAccueil {height:180px;width:100%;background-size:auto 100%;} 
  .TitreSlides, .TitreSlidesSM {border-left-style:none;border-right-style:none;}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:0;width:100%;}
  }
@media only screen and (min-width: 320px) and (max-width: 480px) { /* une image adaptative apparait car on a des photos pleines */
  #PanelBannerFlacons {display:block;position:relative;width:100%;} 
  .imageAccueil {height:100%;width:100%;background-size:cover;}
  .TitreSlides, .TitreSlidesSM {border-left-style:none;border-right-style:none;}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:0;width:100%;}
  }
@media only screen and (min-width: 481px) { /* une image adaptative apparait */
  #PanelBannerFlacons {display:block;position:relative;height:240px;margin-left:calc(100% - 426px);} 
  .imageAccueil {height:240px;width:426.667px;margin:0 auto 0 calc(50% - 213.3335px);border-right:thin solid #2d2d2d;border-left:thin solid #2d2d2d;background-size:cover;}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 213.3335px);width:426.667px;}
  }
@media only screen and (min-width: 641px) { /* image plus grande */
  #PanelBannerFlacons {display:block;position:relative;height:240px;margin-left:calc(100% - 426px);} 
  .imageAccueil {height:240px;width:640px;margin:0 auto 0 calc(50% - 320px);border-right:thin solid #2d2d2d;border-left:thin solid #2d2d2d;background-size:cover;}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 320px);width:640px;}
  }
/* quelques décalages pour desktop, bizarre sinon */
@media only screen and (min-width: 1025px) and (max-width: 1400px) { /* pour size 1366px & 1280px */
  .imageAccueil {margin:0 auto 0 calc(50% - 313px);}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 313px);}
  }
@media only screen and (min-width: 1401px) and (max-width: 1500px) { /* pour size 1440px */
  .imageAccueil {margin:0 auto 0 calc(50% - 312px);}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 312px);}
  }
@media only screen and (min-width: 1501px) and (max-width: 1700px) { /* pour size 1536px & 1600px */
  .imageAccueil {margin:0 auto 0 calc(50% - 311px);}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 311px);}
  }
@media only screen and (min-width: 1701px) { /* pour size 1920px */
  .imageAccueil {margin:0 auto 0 calc(50% - 310px);}
  .TitreSlides, .TitreSlidesSM, .pourLeClick {left:calc(50% - 310px);}
  }

#TitreBanner {
  display:block;overflow:hidden;position:absolute;
  top:0;left:0;width:calc(100% - 10px);height:calc(100% - 10px);
  margin:10px 5px 0 5px;padding:0 5px;
  text-transform:uppercase;font-weight:bold;font-size:130%;line-height:110%;text-shadow: 3px 3px 3px #b4b4b4;/*background-color: rgba(255,255,255,0.80);*/
  }

#PanelBlocs {
  border-right:thin solid #2d2d2d;
  border-left:thin solid #2d2d2d;
  min-height:480px;
  /*fond géré par le conteneur PanelCenter jusque 640px*/
  }

@media only screen and (max-width: 480px) {
  #PanelCenter {background:#ffffff url(/images/FondPanelCenter480.jpg) no-repeat center top/480px auto;} /*parfois un peu lourd pour juste un bandeau*/
  #PanelBlocs, #PanelBanner {background:transparent;}
  }
@media only screen and (min-width: 400px) and (max-width: 480px) {
  #TitreBanner {font-size:150%;padding:0 5px;margin:10px 5px 0 5px;width:calc(100% - 10px);height:calc(100% - 10px);line-height:115%;}
  }
@media only screen and (min-width: 481px) and (max-width: 640px) {
  #PanelCenter {background:#ffffff url(/images/FondPanelCenter640.jpg) no-repeat center top/640px auto;}
  #PanelBlocs, #PanelBanner {background:transparent;}
  #TitreBanner {font-size:150%;padding:0 5px;margin:10px 5px 0 5px;width:calc(100% - 10px);height:calc(100% - 10px);line-height:115%;}
  }
@media only screen and (min-width: 641px) and (max-width: 767px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs768.jpg) no-repeat center center/auto 100%;}
  #PanelBannerFlacons {margin-left:calc(95% - 426px);}
  #TitreBanner {font-size:160%;padding:0 10px;margin:25px 10px 0 10px;width:calc(100% - 20px);height:calc(100% - 25px);line-height:115%;}
  }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1024.jpg) no-repeat center center/auto 100%;}
  #PanelBannerFlacons {margin-left:calc(95% - 426px);}
  #TitreBanner {font-size:180%;padding:0 20px;margin:30px 20px 0 20px;width:calc(100% - 40px);height:calc(100% - 30px);line-height:115%;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1280.jpg) no-repeat center center/auto 100%;}
  #PanelBannerFlacons {margin-left:calc(100% - 426px);}
  #TitreBanner {font-size:180%;padding:0 20px;margin:30px 20px 0 20px;width:calc(100% - 40px);height:calc(100% - 30px);line-height:115%;}
  }
@media only screen and (min-width: 1281px) and (max-width: 1479px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1440.jpg) no-repeat center center/auto 100%;}
  #PanelBannerFlacons {margin-left:calc(95% - 426px);}
  #TitreBanner {font-size:190%;padding:0 20px;margin:30px 20px 0 20px;width:calc(100% - 40px);height:calc(100% - 30px);line-height:115%;}
  }
@media only screen and (min-width: 1480px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1440.jpg) no-repeat center center/auto 100%;}
  #PanelBannerFlacons {margin-left:calc(89% - 426px);}
  #TitreBanner {font-size:200%;width:1440px;padding:0 20px;margin:30px auto 0 auto;margin-left:calc(50% - 720px);height:calc(100% - 30px);line-height:115%;}
  } 
  
/* images pour haute résolution */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (max-width: 480px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (max-width: 480px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (max-width: 480px),
only screen and (        min-device-pixel-ratio: 1.5)      and (max-width: 480px),
only screen and (                min-resolution: 144dpi) and (max-width: 480px),
only screen and (                min-resolution: 1.5dppx)  and (max-width: 480px) {
  #PanelCenter {background: url(/images/FondPanelCenter480HteRes.jpg) no-repeat center top/480px auto;;}
  #PanelBlocs, #PanelBanner {background:transparent;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (min-width: 481px) and (max-width: 640px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (min-width: 481px) and (max-width: 640px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (min-width: 481px) and (max-width: 640px),
only screen and (        min-device-pixel-ratio: 1.5)      and (min-width: 481px) and (max-width: 640px),
only screen and (                min-resolution: 144dpi) and (min-width: 481px) and (max-width: 640px),
only screen and (                min-resolution: 1.5dppx)  and (min-width: 481px) and (max-width: 640px) {
  #PanelCenter {background: url(/images/FondPanelCenter640HteRes.jpg) no-repeat center top/640px auto;;}
  #PanelBlocs, #PanelBanner {background:transparent;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (min-width: 641px) and (max-width: 767px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (min-width: 641px) and (max-width: 767px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (min-width: 641px) and (max-width: 767px),
only screen and (        min-device-pixel-ratio: 1.5)      and (min-width: 641px) and (max-width: 767px),
only screen and (                min-resolution: 144dpi) and (min-width: 641px) and (max-width: 767px),
only screen and (                min-resolution: 1.5dppx)  and (min-width: 641px) and (max-width: 767px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs768HteRes.jpg) no-repeat center center/auto 100%;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (min-width: 768px) and (max-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (min-width: 768px) and (max-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (min-width: 768px) and (max-width: 1024px),
only screen and (        min-device-pixel-ratio: 1.5)      and (min-width: 768px) and (max-width: 1024px),
only screen and (                min-resolution: 144dpi) and (min-width: 768px) and (max-width: 1024px),
only screen and (                min-resolution: 1.5dppx)  and (min-width: 768px) and (max-width: 1024px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1024HteRes.jpg) no-repeat center center/auto 100%;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (min-width: 1025px) and (max-width: 1280px),
only screen and (        min-device-pixel-ratio: 1.5)      and (min-width: 1025px) and (max-width: 1280px),
only screen and (                min-resolution: 144dpi) and (min-width: 1025px) and (max-width: 1280px),
only screen and (                min-resolution: 1.5dppx)  and (min-width: 1025px) and (max-width: 1280px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1280HteRes.jpg) no-repeat center center/auto 100%;}
  }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (min-width: 1281px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (min-width: 1281px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)    and (min-width: 1281px),
only screen and (        min-device-pixel-ratio: 1.5)      and (min-width: 1281px),
only screen and (                min-resolution: 144dpi) and (min-width: 1281px),
only screen and (                min-resolution: 1.5dppx)  and (min-width: 1281px) {
  #PanelBlocs {background: #FFFFFF url(/images/FondPanelBlocs1440HteRes.jpg) no-repeat center center/auto 100%;}
  }  

/* informations supplémentaires */
#Explications {display:block;overflow:hidden;position:relative;margin-left:1%;margin-right:1%;font-size:100%;font-style:normal;}
@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)  {
  #Explications {font-style:italic;}
  }

#conteneurLogoCC{
  position:relative;
  height:70px;
  padding:3px;padding-left:80px;margin:10px 0px;margin-left:4%;
  width:70px;
  }
#tabTexteLogoCC{height:100%;display:none;}
#texteLogoCC, #texteLogoCCSM { /*agent Samsung*/
  background-color:#2D2D2D;/*rgba(136,178,26,1);*/
  border:thin solid #2D2D2D;padding:3px;color:#ffffff;font-style:normal;font-weight:normal;text-transform: uppercase;
  vertical-align:middle;cursor:pointer;
  border-radius:3px;
  }
#texteLogoCC > h2, #texteLogoCCSM > h2 {color:#ffffff;font-weight:normal;font-size:100%;}
#texteLogoCCSM {padding:2px 3px 4px 3px;}
#logoCC {
  display:block;position:absolute;left:0;top:0;
  height:70px;width:70px;
  background: transparent url(/images/logo-CC6.png) no-repeat left center/contain;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch #conteneurLogoCC:hover > #logoCC, .no-touch #conteneurLogoCC:active > #logoCC {background-image:url(/images/logo-CC6-inv.png);}
.no-touch #conteneurLogoCC:hover #texteLogoCC, .no-touch #conteneurLogoCC:active #texteLogoCC, .no-touch #conteneurLogoCC:hover #texteLogoCCSM, .no-touch #conteneurLogoCC:active #texteLogoCCSM {border-color:#88B21A;background-color:#88B21A;}
.no-touch #conteneurLogoCC:hover #texteLogoCC > h2, .no-touch #conteneurLogoCC:active #texteLogoCC > h2, .no-touch #conteneurLogoCCSM:hover #texteLogoCC > h2, .no-touch #conteneurLogoCC:active #texteLogoCCSM > h2 {}
#AvisClients {
  display: block;position:relative;
  margin:0px 4px 10px 4px;
  border:thin solid #2D2D2D;
  background:#ffffff;
  min-height:116px;
  max-width:570px;
  border-radius: 5px;overflow:hidden;
  }
.AvisIntro{display:none;position:relative;padding:8px 4px;font-size:100%;}
.AvisIntroScoring {padding:8px 0px;font-size:100%;font-weight:bold;color:#88B21A;}
.AvisFin{display:none;position:relative;padding:8px 4px;font-size:85%;font-style:italic;}
.Avis {display:none;position:static;min-height:114px;max-width:568px;} /*non positionné et les absolute suivants sont vis à vis du conteneur*/
.AvisBandeau {
  display: block;
  position: absolute;
  top: 0;left: 0;
  height: calc(100% + 2px);
  width: 10px;
  }
.AvisCJ > .AvisBandeau {background:#eedc12;}
.AvisCN > .AvisBandeau {background:#4b5c9c;}
.AvisCY > .AvisBandeau {background:#238072;}
.AvisLC > .AvisBandeau {background:#ebc8c0;}
.Explic {color:#ffffff;}

.Etoiles0 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;} /*pas de notation - avis spontané*/
.Explic > .Etoiles0 {display:block;position:absolute;height:20px;width:20px;top:7px;left:7px;background: transparent url(/images/logo-simple-egotopie-blanc.png) no-repeat 0px 0px/auto 20px;}
.AvisCJ > .Etoiles5 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCJ5.png) no-repeat 0px 0px/auto 15px;}
.AvisCJ > .Etoiles45 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCJ45.png) no-repeat 0px 0px/auto 15px;}
.AvisCJ > .Etoiles4 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCJ4.png) no-repeat 0px 0px/auto 15px;}
.AvisCJ > .Etoiles35 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCJ35.png) no-repeat 0px 0px/auto 15px;}
.AvisCJ > .Etoiles3 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCJ3.png) no-repeat 0px 0px/auto 15px;}
.AvisCN > .Etoiles5 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCN5.png) no-repeat 0px 0px/auto 15px;}
.AvisCN > .Etoiles45 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCN45.png) no-repeat 0px 0px/auto 15px;}
.AvisCN > .Etoiles4 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCN4.png) no-repeat 0px 0px/auto 15px;}
.AvisCN > .Etoiles35 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCN35.png) no-repeat 0px 0px/auto 15px;}
.AvisCN > .Etoiles3 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCN3.png) no-repeat 0px 0px/auto 15px;}
.AvisCY > .Etoiles5 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCY5.png) no-repeat 0px 0px/auto 15px;}
.AvisCY > .Etoiles45 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCY45.png) no-repeat 0px 0px/auto 15px;}
.AvisCY > .Etoiles4 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCY4.png) no-repeat 0px 0px/auto 15px;}
.AvisCY > .Etoiles35 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCY35.png) no-repeat 0px 0px/auto 15px;}
.AvisCY > .Etoiles3 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesCY3.png) no-repeat 0px 0px/auto 15px;}
.AvisLC > .Etoiles5 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesLC5.png) no-repeat 0px 0px/auto 15px;}
.AvisLC > .Etoiles45 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesLC45.png) no-repeat 0px 0px/auto 15px;}
.AvisLC > .Etoiles4 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesLC4.png) no-repeat 0px 0px/auto 15px;}
.AvisLC > .Etoiles35 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesLC35.png) no-repeat 0px 0px/auto 15px;}
.AvisLC > .Etoiles3 {display:block;position:absolute;height:15px;width:120px;top:7px;left:20px;background: transparent url(/images/etoilesLC3.png) no-repeat 0px 0px/auto 15px;}
.AvisContenu {min-height:114px;padding:27px 5px 30px 20px;font-size:90%;line-height:115%;}
.Explic .AvisContenu {padding:27px 10px 30px 10px;}
.inAvisContenu {vertical-align:middle;}
.AvisSignature {display:none;position:absolute;height:50px;bottom:0;width:100%;padding:0px 10px 3px 20px;}
.inAvisSignature {vertical-align:bottom;text-align:right;font-size:75%;line-height:90%;}
.AvisDate {display:none;position:absolute;width:100%;text-align:right;top:7px;right:0;padding-right:10px;font-size:75%;}
@media only screen and (min-width: 340px) {
  #AvisClients {margin:0px 7px 10px 7px;}
  .AvisContenu  {font-size:100%;line-height:110%;}
  .inAvisSignature {font-size:85%;line-height:90%;}
  .AvisDate {font-size:85%;}
}
@media only screen and (min-width: 481px) { /* < 481px -> smartphones */
  #conteneurLogoCC{width:auto;}
  #tabTexteLogoCC{display:table;}
  #AvisClients {margin:0px 10px 10px 10px;}
  .AvisContenu {min-height:114px;padding:27px 5px 27px 20px;line-height:110%;}
  .Explic .AvisContenu {padding:27px 10px 27px 10px;}
  .AvisSignature{padding-bottom:7px;}
}
@media only screen and (min-width: 600px) {
  #Explications {margin-top:0px;}
  #AvisClients {margin:0px 10px 20px 10px;}
  #conteneurLogoCC{padding-left:80px;margin:20px 0px;margin-left:1.5%;width:60%;}
  #texteLogoCC {padding:5px;}
  #texteLogoCCSM {padding:4px 5px 7px 5px;}
}
@media only screen and (min-width: 1025px) {
  #Explications {margin-top:100px;}
  #AvisClients {margin:80px 1% 10px 1%;}
  #conteneurLogoCC{padding-left:80px;margin:0 0 20px 0;width:50%;}
  #texteLogoCC {padding:7px;}
  #texteLogoCCSM {padding:6px 7px 9px 7px;}
}
@media only screen and (min-width: 1280px) {
  #Explications {margin-top:100px;font-size:120%;}
  #AvisClients {margin:80px 1% 10px 1%;}
  #conteneurLogoCC{padding-left:80px;margin:0 0 20px 0;width:35%;}
  #texteLogoCC {padding:7px;}
  #texteLogoCCSM {padding:6px 7px 9px 7px;}
}
@media only screen and (min-width: 1440px) {
  #conteneurLogoCC{width:31%;}
}
/* boites */
.BoutonAccueil {
  display:block;
  overflow:hidden;
  position:relative;
  border-bottom:thin solid #2d2d2d;
  background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-noirinv-BR.png) no-repeat right bottom/20px 20px;
  padding:8px 0px 5px 30%;
  height:60px;
  text-align:left;
  font-size:120%;
  line-height:120%;
  color:#000000;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.agSM4 {padding-top:6px;} /*agent Samsung*/
.BoutonAccueil > h2 {color:#000000;font-weight:normal;font-size:100%;}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
	.BoutonAccueil {padding-left:15%;}
	#BoiteLC {border-right:thin solid #2d2d2d;}
	#BoiteCJ {border-right:thin solid #2d2d2d;}
}
@media only screen and (min-width: 1025px) {
	.BoutonAccueil {border-right:thin solid #2d2d2d;padding-left:7.5%;}
	#BoiteCY {border-right:0px solid #2d2d2d;}
}
.BandeauCouleur {display:block;position:absolute;top:0;left:0;height:100%;width:5%;border-right:thin solid #2d2d2d;}
#BoiteCJ .BandeauCouleur {background-color:#efdb30;}
#BoiteCN .BandeauCouleur {background-color:#4d6299;}
#BoiteLC .BandeauCouleur {background-color:#e6bfc0;}
#BoiteCY .BandeauCouleur {background-color:#238072;}
.no-touch #BoiteCJ:hover, .no-touch #BoiteCJ:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CJ-BR.png) no-repeat right bottom/20px 20px;}
.no-touch #BoiteCN:hover, .no-touch #BoiteCN:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CN-BR.png) no-repeat right bottom/20px 20px;}
.no-touch #BoiteLC:hover, .no-touch #BoiteLC:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-LC-BR.png) no-repeat right bottom/20px 20px;}
.no-touch #BoiteCY:hover, .no-touch #BoiteCY:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CY-BR.png) no-repeat right bottom/20px 20px;}
/* aspect en fonction de la résolution - ajustement complexe !*/
@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) {
  .BoutonAccueil {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-noirinv-HR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCJ:hover, .no-touch #BoiteCJ:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CJ-HR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCN:hover, .no-touch #BoiteCN:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CN-HR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteLC:hover, .no-touch #BoiteLC:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-LC-HR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCY:hover, .no-touch #BoiteCY:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CY-HR.png) no-repeat right bottom/20px 20px;}
  }	
@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) {
  .BoutonAccueil {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-noirinv-THR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCJ:hover, .no-touch #BoiteCJ:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CJ-THR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCN:hover, .no-touch #BoiteCN:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CN-THR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteLC:hover, .no-touch #BoiteLC:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-LC-THR.png) no-repeat right bottom/20px 20px;}
  .no-touch #BoiteCY:hover, .no-touch #BoiteCY:active {background: url(/images/logosimple-egotopie240.png) no-repeat 10% center/40px 40px, url(/images/trngleclick-CY-THR.png) no-repeat right bottom/20px 20px;}
  }	

.BoutonAccueil,
.no-touch #BoiteCJ:hover, .no-touch #BoiteCJ:active,
.no-touch #BoiteCN:hover, .no-touch #BoiteCN:active,
.no-touch #BoiteLC:hover, .no-touch #BoiteLC:active,
.no-touch #BoiteCY:hover, .no-touch #BoiteCY:active {background-color:#ffffff;}

/**/
div.ComposEnCours{
  position:absolute;
  display:none;
  height:60px;
  width:54px;
  right:7%;
}
#ComposEnCoursCJ {top:0px;}
#ComposEnCoursCN {top:60px;}
#ComposEnCoursLC {top:120px;}
#ComposEnCoursCY {top:180px;}
div.ComposEnCoursIm{
  position:relative;
  display:block;
  height:54px;
  width:54px;
  margin:3px auto 3px auto;
  cursor:help;
  background: transparent url(/images/composencours-noirplein.png) no-repeat center center/54px 54px;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch  div.ComposEnCoursIm:hover, .no-touch  div.ComposEnCoursIm:active {background-image:url(/images/composencours-vertplein.png);}
@media only screen and (min-width: 600px) {
  #ComposEnCoursCJ {top:0px;right:53.5%;}
  #ComposEnCoursCN {top:0px;right:3.5%;}
  #ComposEnCoursLC {top:60px;right:53.5%;}
  #ComposEnCoursCY {top:60px;right:3.5%;}
}
@media only screen and (min-width: 1025px) {
  div.ComposEnCours {height:100px;width:25%;}
  div.ComposEnCoursIm{
    height:80px;
    width:80px;
    margin:10px auto;
    background: transparent url(/images/composencours-noirplein.png) no-repeat center center/80px 80px;
    }
  #ComposEnCoursCJ {top:60px;left:0;}
  #ComposEnCoursCN {top:60px;left:25%;}
  #ComposEnCoursLC {top:60px;left:50%;}
  #ComposEnCoursCY {top:60px;left:75%;}
}

/* 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) {
	.TitreSlides, .TitreSlidesSM {border-bottom-width: calc(2px / 3);border-right-width: calc(2px / 3);border-left-width: calc(2px / 3);border-top-width:0;}
	#PanelBlocs {border-right-width: calc(2px / 3);border-left-width: calc(2px / 3);}
	#texteLogoCC {border-width: calc(2px / 3);}
	#AvisClients {border-width: calc(2px / 3);}
	.BoutonAccueil {border-bottom-width: calc(2px / 3);}
	.BandeauCouleur {border-right-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) {
	.imageAccueil {border-right-width: calc(2px / 3);border-left-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) {
	.TitreSlides, .TitreSlidesSM {border-bottom-width:0;border-right-width: calc(2px / 3);border-left-width: calc(2px / 3);border-top-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) and (max-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 1.5)	  and (   max--moz-device-pixel-ratio: 1.5) and (min-width: 600px) and (max-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 1.5/1)	  and (     -o-max-device-pixel-ratio: 1.5/1) and (min-width: 600px) and (max-width: 1024px),
only screen and (        min-device-pixel-ratio: 1.5)	  and (        max-device-pixel-ratio: 1.5) and (min-width: 600px) and (max-width: 1024px),
only screen and (                min-resolution: 144dpi)  and (                max-resolution: 144dpi) and (min-width: 600px) and (max-width: 1024px),
only screen and (                min-resolution: 1.5dppx) and (                max-resolution: 1.5dppx) and (min-width: 600px) and (max-width: 1024px) {
	#BoiteLC {border-right-width: calc(2px / 3);}
	#BoiteCJ {border-right-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) {
	.BoutonAccueil {border-right-width: calc(2px / 3);}
	#BoiteCY {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) {
	.TitreSlides, .TitreSlidesSM {border-bottom-width:0.5px;border-right-width:0.5px;border-left-width:0.5px;border-top-width:0;}
	#PanelBlocs {border-right-width:0.5px;border-left-width:0.5px;}
	#texteLogoCC {border-width:0.5px;}
	#AvisClients {border-width:0.5px;}
	.BoutonAccueil {border-bottom-width:0.5px;}
	.BandeauCouleur {border-right-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) {
	.imageAccueil {border-right-width:0.5px;border-left-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) {
	.TitreSlides, .TitreSlidesSM {border-bottom-width:0;border-right-width:0.5px;border-left-width:0.5px;border-top-width:0.5px;}
	}	
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-width: 600px) and (max-width: 1024px),
only screen and (        min-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 1024px),
only screen and (                min-resolution: 192dpi) and (min-width: 600px) and (max-width: 1024px),
only screen and (                min-resolution: 2dppx) and (min-width: 600px) and (max-width: 1024px) {
	#BoiteLC {border-right-width:0.5px;}
	#BoiteCJ {border-right-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) {
	.BoutonAccueil {border-right-width:0.5px;}
	#BoiteCY {border-right-width:0px;}
	}
/*à 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) {	
	}