/* Concept */

#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;}
  } 

#PanelBlocs {padding-top:5px;color:#000000;}

.row {margin-top:5px;margin-bottom:5px;}
.photo {}
.inPhoto {margin:15px 0px;overflow:hidden;}
.inPhoto>img {display:block;width:100%;margin:0 auto;}
.Paragraphe {}
.inParagraphe {margin:5px 5px 0px 5px;border:thin solid #dcdcdc;background: #fafafa;border-radius: 5px;}
h2.Titre {padding:8px 9px 8px 9px;font-weight:bold;color:#88B21A;font-size:110%;}
div.Texte {padding:0px 9px 8px 9px;font-size:100%;}
#lastInPhoto {font-size:5%;}

@media only screen and (min-width: 600px) and (max-width: 767px) {
  .row {margin-top:10px;margin-bottom:15px;}
  .photo {} 
  .inPhoto {margin:0px 5px;border:thin solid #dcdcdc;border-radius: 5px;}
  #lastInPhoto {border:0px solid #dcdcdc;}
  h2.Titre {font-size:110%;}
  }
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .row {margin-top:10px;margin-bottom:15px;}
  .photo {} 
  .inPhoto {margin:0px 5px;border:thin solid #dcdcdc;border-radius: 5px;}
  .inParagraphe {margin:0px 5px 0px 5px;}
  #lastInPhoto {border:0px solid #dcdcdc;}
  h2.Titre {font-size:115%;}
  }
@media only screen and (min-width: 960px) {
  .row {margin-top:15px;margin-bottom:20px;}
  .photo {}
  .inPhoto {margin:0px 5px;border:thin solid #dcdcdc;border-radius: 5px;}
  .inParagraphe {margin:0px 5px 0px 5px;}
  #lastInPhoto {border:0px solid #dcdcdc;}
  h2.Titre {padding:8px 12px 8px 12px;font-size:120%;}
  div.Texte {padding:0px 12px 8px 12px;}
  }

strong {font-weight:bold;color:#88b21a;}

div.BoutonIngr {
  position:relative;
  background: #ebebeb url(/images/triangleselectdecalevide.png) no-repeat right bottom/19px auto;
  border:thin solid #2D2D2D;
  margin:5px auto 10px 9px;padding:0 5px 0 8px;
  height:35px;width:200px;
  font-size:100%;color:#000000;text-transform:uppercase;
  line-height:35px;
  cursor:pointer;
  border-radius:5px;
  -webkit-tap-highlight-color:rgba(136, 178, 26, 0.3); /*les taps sont colorés*/
  }
.no-touch div.BoutonIngr:hover {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
.no-touch div.BoutonIngr:active {color:#FFFFFF;background-image:url(/images/triangleselectdecaleblanc.png);background-color:#88B21A;border:thin solid #88B21A;}
@media only screen and (min-width: 400px) {
    div.BoutonIngr {width:240px;}
	}
@media only screen and (min-width: 960px) {
    div.BoutonIngr {margin-left:12px;}
	}


/* 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) {
	.inParagraphe {border-width:calc(2px / 3);}
	div.BoutonIngr {border-width:calc(2px / 3);}
	.no-touch div.BoutonIngr:hover {border-width:calc(2px / 3);}
	.no-touch div.BoutonIngr:active {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) {
	.inPhoto {border-width:calc(2px / 3);}
	#lastInPhoto {border-width:0px;}
	}
/*à 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) {
	.inParagraphe {border-width:0.5px;}
	div.BoutonIngr {border-width:0.5px;}
	.no-touch div.BoutonIngr:hover {border-width:0.5px;}
	.no-touch div.BoutonIngr:active {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) {
	.inPhoto {border-width:0.5px;}
	#lastInPhoto {border-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) {	
	}