@charset "utf-8";
/* CSS Document */

figure{
	float: left;
	width: 40%;
	font-size: smaller;
	text-align:center;
	/*border: thin silver solid;*/
	border: solid #f19008 2px; 
	moz-box-shadow: 8px 8px 12px #aaa; 
	box-shadow: 8px 8px 12px #aaa; 
	-webkit-box-shadow: 8px 8px 12px #aaa;
	margin: 0.5em;
	padding-top: 0.8em;
	height:320px;
	margin-left:2%;
	display:inline;}

figcaption {
  padding: 0.5em;
  height:130px;}

figure a {
	text-decoration:none;
	color:#00c;}

figure a:hover{
	color:#00C;
	font-style:italic;}
		 

.bloc-he  { /*pour positionner en savoir + */
	text-transform: uppercase;
	font-weight:bold;
	border:1px solid blue ;/*dotted #CCCCCC;*/
	padding:1%; /*0.5em;*/
	font-size:1em;
	height:20px;
	}

	
@media (max-width: 480px) { /*jaune*/

figure{
	float: left;
	width: 100%;
	font-size: 10px;
	/*padding: 0.5em;*/
	height:290px;
	margin-left:5%;}

figcaption {
  height:140px;}	

.bloc-he {
	font-size:10px;
	}
	
		
.he-responsive {
	width:100%;
	}
}

@media (min-width: 481px) and (max-width: 768px) { /*rouge*/

figure{
	float:left;
	width: 80%;
	font-size: 10px;
	/*padding: 0.5em;*/
	height:260px;
	margin-left:8%;}
	
figcaption {
  height:110px;}
  	
.bloc-he {
	font-size:10px;}
	}
@media (min-width: 769px) and (max-width: 1024px) {	/*vert*/

figure{
	float: left;
	width: 60%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:260px;
	margin-left:20%;}
	
figcaption {
  height:110px;}

.bloc-he {
	font-size:10px;}
	
	
}
@media (min-width: 1025px) and (max-width: 1280px) { /*bleu*/
	
figure{
	float: left;
	width: 29%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:290px;}
	
figcaption {
  height:170px;}
  		
.bloc-he {
	font-size:12px;}
	
}
@media (min-width: 1281px) and (max-width: 1600px) { /*rose*/

	
figure{
	float: left;
	width: 29%;
	font-size: 12px;
	/*padding: 0.5em;*/
	height:300px;}
	
figcaption {
  height:160px;}
  		
.bloc-he {
	font-size:12px;}
	


}