/*
 * ============================
 * Styles généraux (h1, p, a, ...)
 * ============================
 */
body {
  font: 15px/1.34 "Source Sans Pro", sans-serif;
}

h1, h2 {
  font-weight: bold;
  color: black;
  font-size: 32px;
  line-height: 110%;
  margin:20px 0 5px;
}

#page-title{
	text-transform:uppercase;
	color: white;
}
h3 {
  font-weight: normal;
  font-size: 24px;
  margin: 15px 0 5px;
  line-height: 110%;
}

h4 {
  font-weight: 400;
  font-size: 18px;
  line-height: 110%;
  margin: 15px 0 5px;
}

h5 {
  font-size: 18px;
  line-height: 1.222;
  font-weight: 400;
  margin: 40px 0 10px;
}

h3.red{
	color:#D41906;
}
a {
  text-decoration: none;
  color: #d41906;
}
a img {
  border: none;
}

p.guillemet{
	background:url(../images/guillemet.png) no-repeat 0 0;
}
.boite_approche{
	border-top: 1px solid #A3A3A3;
	margin-top: 40px;
	padding: 10px 0;
}
.boite_approche h5{
	margin-top:9px;
}

#page-wrapper li{
	background: url("../images/li-bullet2.png") no-repeat scroll left 5px transparent;
	padding-left:16px;
	list-style:none;
}
#page-wrapper li h4{
	margin:0;
}
/*
 * ============================
 * .formatted est une classe ajoutée aux éléments contenant du contenu saisi
 * par l'administrateur dans le CMS. On veut donc que les <p>, les <ul>,
 * les <ol>, ... aient un affichage tel qu'attendu (avec les bons styles, les
 * bonnes marges, etc.).
 * ============================
 */
.formatted ol {
  list-style: decimal;
}
.formatted ul {
  list-style: disc;
}
.formatted ol, .formatted ul {
  list-style-position: inside;
}
.formatted li ol, .formatted li ul {
  padding-left: 1em;
	
}
.formatted strong {
  font-weight: bold;
}
.formatted em {
  font-style: italic;
}
.formatted sup {
  font-size: 0.6em;
  vertical-align: top;
}
.formatted sub {
  font-size: 0.6em;
  vertical-align: bottom;
}
.formatted p, .formatted ol, .formatted ul {
  margin: 9px 0;
}
.formatted .big {
  font-size: 1.2em;
  line-height: 1.2;
}

#page-content.page-produits{
	max-width:950px;
}

#page-content.page-produits #page-content-cms{
	padding:0px;
}

.page-produits .produits_content{
	margin:10px 1%;
	max-width:none;
	width:31.33%;
}

@media only screen and (max-width : 675px) {
	.page-produits #page-wrapper .produits_content{
		margin:10px 1%;
		max-width:none;
		width:48%;
	}
}

@media only screen and (max-width : 480px) {
	.page-produits #page-wrapper .produits_content{
		margin:10px auto;
		max-width:294px;
		width:100%;
		float:none;
	}
}