body {
	  background-color:#F0F0F0;
	  margin:0px;
	  padding:0px 2px;
	}
	body, p, td, th , h1, h2, h3, h4, h5, h6, img, form, li{
		font-family: Verdana,Lucida,Helvetica,sans-serif;
		font-size: 85%;
	}
	h1 {
		font-size:3em;
		margin:0px;
	}
	h3 {
		font-size:1em;
		margin:0px;
	}
	a {
		text-decoration:none;
		color:#333;
		margin:0px;
	}
	a:hover {
		color:#666;
	}
	div {
		margin:0px;
		padding:0px;
	}
	img {
		color: #FFF;
		background-color:#666;
		vertical-align: bottom;
		margin-right:-4px !important;
	}
	#canvas {
		padding:10px 4px;
		overflow:hidden;
	}
	.canvas_col {
		width:310px;
		overflow:hidden;
		float:left;
	}
	.canvas_col img {
		display:inline;
		margin:2px 0px 1px 2px;
		border:1px solid #333;
	}
	.canvas_col .item_1:hover img, .canvas_col .item_2:hover img, .canvas_col .item_4:hover img {
		box-shadow: 1px 1px 3px #333;
		margin:0px -2px 3px 0px !important;
		border-color:#FFF;
	}
	.pTitle, .pText {
		padding:4px;
		margin:2px 1px 1px 2px;
		height:146px;
		position: relative;
		overflow: hidden;
	}
	.pText {
		background-color:#DDD;
		border:1px solid #EEE;	
		height:144px;
	}
	.pTitle form,  .pText form{
		position: absolute;
		bottom:5px;
		right:2px;
	}
	img.fr {
		float:right;
	}
	img.fl {
		float:left;
	}
	.item_1, .item_2, .item_4{
		position:relative;
		overflow:hidden;
	}
	.item_1 {
		width:155px;
		float:left;
	}
	.item_2, .item_4 {
		width:309px;
	}
	.item_1:hover  .overlay, .item_2:hover  .overlay{
		top: 93px;
		height:42px;
	}
	.item_4:hover  .overlay{
		top: 205px;
		height:85px;
	}
	.overlay{
		-webkit-transition: top .6s ease 0s;
		-moz-transition: top .6s ease 0s;
		-o-transition: top .6s ease 0s;
		transition: top .6s ease 0s;
		position: absolute;
		color:#FFF;
		font-size:11px;
		border-left:5px solid #000;
		padding:5px 2px 5px 5px;
		background-color:rgba(0, 0, 0, 0.7);
		margin:0px;
		box-shadow: 2px 2px 3px #000;
	}
	.overlay a {
		color:#999;
	}
	.item_1 .overlay{
		top:160px;
		width:135px;
	}
	.item_2 .overlay{
		top:160px;
		width:288px;
	}
	.item_4 .overlay{
		top:315px;
		width:288px;
	}
	
/* NAV */
#ruban {
	height:24px;
	border-bottom:1px solid #000;
	box-shadow: 1px 1px 3px #333;
	background-color:#444;
	margin:0 -3px;
	padding:0 3px;
}
#ruban a {
	padding:5px 25px;
	border-right:1px solid #666;
	font-weight:bold;
	color:#EEE;
	vertical-align:sub;
	margin:0px;
}
#ruban a:hover{
	background-color:#666;
}
#ruban li  {
	color:#EEE;
	display:inline;
	font-size:12px;
}

/* AJAX */
.wait {
	background:url('/image/wait.gif') no-repeat center; 
	height:50px;
	background-size:contain;
}

/* language */
.language, .language a {
	color:#999;
	margin:8px 0;
}

/* ========== CSS Mobile / Tablet ========== */	
/* CSS Iphone / Android / ... */
/* ipad */
/* @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) */


@media (max-width: 640px) {
 /* passer tous les éléments de largeur fixe en largeur automatique */
 body {
   width: auto;
   margin: 0px;
   padding: 0px;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 #canvas {
   /*float: none !important;*/
   width:310px !important;
   padding:8px !important;
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }
 #pub03 {
   display: none !important; 
 }
#ruban{
	height:auto !important;
}
 /* Un message personnalisé */
#ruban:after {
   content: "Version mobile";
   display: block;
   color: #777;
   text-align: center;
   font-size:8px;
   font-style: italic;
 }
}
@media (max-width:640px) and (orientation: landscape),
@media (max-width:768px) {
  body {
   /*-webkit-text-size-adjust: 70%;*/
   width:636px;
  }
  #canvas {
	width:620px !important;
  }
#ruban{
	height:auto !important;
}

}	
@media (max-width:768px) and (orientation: landscape) {
  body {
   /*-webkit-text-size-adjust: 70%;*/
   width:942px;
  }
  #canvas {
	width:930px !important;
  }
}