/* pour les articles */

#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 {}
#PanelBlocs {
  min-height:480px;
  border:thin solid #2D2D2D;
  border-top:0px solid #2D2D2D;
  border-bottom:0px solid #2D2D2D;  
  } /* inutile ? */

/*Visuel proche infos constituants*/

#Box {
  display:block; 
  overflow:hidden;
  position:relative;
  width:100%;
  max-width:768px;
  padding-bottom:0px;
  margin:0 auto;
  } 
.photo, .photoIn {position:relative;display:block;width:100%;margin:0px 0 15px 0;}
.photo>img, .photoIn>img {display:block;width:100%;margin:0 auto;}
.photoIn {margin:15px 0 0 0;} /*il y a toujours un titre div.Ligne dessous qui est inline-block avec margin-top 15px*/
#posBlocTexte {position:relative;display:block;width:100%;font-size:100%;color:#000000;padding:0 4px 15px 4px;} /* avant color #2D2D2D"*/
#posBlocTexte > .photoIn {width:calc(100% + 8px);margin:15px 0 0 -4px;} /*photos corps du texte*/
#lastImage {margin-bottom:0px;} /*photos corps du texte*/
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .photo {margin:10px 0 15px 0;}
  .photo>img, .photoIn>img {max-width:420px;border:thin solid #dcdcdc;border-radius:3px;}
  #posBlocTexte {font-size:110%;padding:0 4px 15px 4px;}
  #posBlocTexte > .photoIn {width:100%;margin:15px 0 0 0;}
  #lastImage {margin:0 0 10px 0;}
  }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .photo {margin:15px 0 15px 0;}
  .photo>img, .photoIn>img {max-width:450px;border:thin solid #dcdcdc;border-radius:3px;}
  #posBlocTexte {font-size:110%;padding:0 0 15px 0;}
  #posBlocTexte > .photoIn {width:100%;margin:15px 0 0 0;}
  #lastImage {margin:0 0 15px 0;}
  }
@media only screen and (min-width: 1281px) {
  .photo {margin:15px 0 15px 0;}
  .photo>img, .photoIn>img {max-width:540px;border:thin solid #dcdcdc;border-radius:3px;}
  #posBlocTexte {font-size:110%;padding:0 0 15px 0;}
  #posBlocTexte > .photoIn {width:100%;margin:15px 0 0 0;}
  #lastImage {margin:0 0 15px 0;}
  }

div.Titre {font-weight:bold;color:#88b21a;margin:15px 0px 0px 0px;padding:0px 12px 8px 12px;font-size:110%;}
div.sommaire {padding:0px 12px 8px 12px;font-size:90%;}
div.Ligne {
  position:relative;display:inline-block;
  margin:15px 0px 0px 0px; border:thin solid #2D2D2D; background: #ebebeb; padding:8px 9px;
  border-radius: 10px;
  }
div.Ligne2, div.LigneIntro {
  position:relative;display:block;
  width:100%;margin:15px 0px 0px 0px; border:thin solid #2D2D2D; background: #ebebeb; padding:8px 9px;
  border-radius: 10px;
  }
div.Ligne2 {margin-top:6px;background: #ffffff;}
div.LigneIntro {margin-top:0;background: #ffffff;border-color:#ffffff;} /*utilisé une seule fois dans faq-ete-frais*/
h2.paragraphe {position:relative;display:block;width:100%;font-size:100%;font-weight:bold;color:#2D2D2D;} /*titres secondaires pour faq*/
div.paragraphe {position:relative;display:block;width:100%;margin:7px 0px 0px 0px;}
.respirationLogo {
	position:relative;display:block;width:100%;height:60px;margin:7px 0px 0px 0px; 
	background:transparent url(/images/logosDiagBio.png) no-repeat center center/auto 40px; 
	}
.respiration {
	position:relative;display:block;width:100%;height:10px;margin:0px; 
	}
div.Bullet {
	margin:5px 0px;padding:2px 0px 2px 27px;
	background:transparent url(/images/bullet-vert.png) no-repeat 5px 8px/8px 8px;
	}
div.Bullet > img, div.Bullet > span > img {width:180px;border-radius:3px;margin:8px 0px 2px 0px;} /* pour "les meilleurs ingrédients" */
.logoSelectType {	
    display:inline-block;position:relative;padding:12px 40px 12px 0px;
	color:#000000;font-size:80%;line-height:105%;
	font-style:italic;
	background:transparent url(/images/logosSelectGeneralVert.png) no-repeat right center/auto 30px;
	cursor:pointer;
    }
.adroite {text-align:right;}
.adroite:first-child {margin-top:0;}
.no-touch .logoSelectType:hover, .no-touch .logoSelectType:active {background-image:url(/images/logosSelectGeneralBlanc.png);color:#88b21a;font-weight:bold;}

.conteneurPropositions {padding-bottom:3px;/*padding-left:27px;*/}
.petitCentre, .petitCentre2 {display:block;position:relative;width:100%;text-align:center;font-style:italic;font-size:80%;color:#808080;margin-top:7px;}
.petitCentre2  {margin-top:2px;padding:0 8px;}
div.BoutonIngr, div.BoutonIngr2 {
  position:relative;
  background: #88B21A url(/images/triangleselectdecaleblanc.png) no-repeat right bottom/19px auto;
  border:thin solid #88B21A;
  margin:1px auto 12px auto;padding:0 5px 0 8px;
  height:35px;width:160px;
  font-size:100%;color:#FFFFFF;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*/
  }
div.BoutonIngr2 {margin-bottom:10px;}
.no-touch div.BoutonIngr:hover, .no-touch div.BoutonIngr2:hover {color:#88B21A;background-image:url(/images/triangleselectdecalevertvide.png);background-color:#ffffff;border:thin solid #88B21A;}
.no-touch div.BoutonIngr:active, .no-touch div.BoutonIngr2:active {color:#88B21A;background-image:url(/images/triangleselectdecalevert.png);background-color:#ffffff;border:thin solid #88B21A;}
/*
@media only screen and (min-width: 481px) {
	.petitCentre {text-align:left;padding-left:10%;}
	div.BoutonIngr {width:160px;margin-left:10%;}
	div.BoutonIngr2 {width:160px;}
	}
*/
@media only screen and (min-width: 600px) {
	.petitCentre {text-align:left;padding-left:10%;}
	div.BoutonIngr {width:180px;margin-left:10%;}
	div.BoutonIngr2 {width:180px;}
	}

div.remarques {font-size:90%;font-style:italic;position:relative;display:block;width:100%;margin:7px 0px 0px 0px;}
.grasVert, strong {font-weight:bold;color:#88b21a;}
span.commeBouton {font-style:normal;font-size:85%;text-transform: uppercase;background:#ebebeb;padding:0 5px;border:thin solid #ebebeb;border-radius:5px;}
ul {margin:0; padding:0 0 0 12px;}
ol {margin:0;}
div.sommaire > ol > li {margin:4px 0px;}
div.sommaire > ol > li > ul > li {margin:2px 0px;}
div.sommaire > ol > li > ul {list-style-type: disc;}
h2.Titre {padding:5px 5px 5px 5px;font-weight:bold;color:#88B21A;}
div.Texte {padding:0px 5px 5px 5px}
div.Texte2 {margin:0px 0px 10px 5px;padding:0px 5px 0px 25px;font-size:100%;min-height:20px;line-height:20px;background:transparent url(/images/FondHerbesAttenue.jpg) no-repeat left center/15px 20px;}
@media only screen and (min-width: 481px) and (max-width: 1024px) {
    div.Ligne, div.Ligne2 {padding:8px 12px;background:#fafafa;border-color:#dcdcdc;}
    }
@media only screen and (min-width: 1025px) {
    div.Ligne, div.Ligne2, div.LigneIntro {padding:8px 12px;}
	div.Ligne, div.Ligne2 {background:#fafafa;border-color:#dcdcdc;}
    div.ImParagraphe {background-position:center center;}
	div.Texte2 {background-position:left top;}
	}

	
/* 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) {
	#PanelBlocs {border-width:calc(2px / 3);border-top-width:0px;border-bottom-width:0px;}  
	div.Ligne, div.Ligne2, div.LigneIntro {border-width:calc(2px / 3);}
	span.commeBouton {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) {
	.photo>img, .photoIn>img {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) {
	#PanelBlocs {border-width:0.5px;border-top-width:0px;border-bottom-width:0px;}  
	div.Ligne, div.Ligne2, div.LigneIntro {border-width:0.5px;}
	span.commeBouton {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) {
	.photo>img, .photoIn>img {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) {	
	}