@font-face {
  src: local('Lobster'), local('Lobster-Regular'), url(lobster.woff) format('woff');
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
}
body {
	font-family:monospace;
	font-size:15px;
	background:#f8f8f8;
	text-align: center;
}
a{
	text-decoration:none;
}
a:first-letter {
	font-weight: bold;
}

h1, h2, h3, th {
	font-family: 'Lobster', serif;
	color :#f01002;
	text-align:center;
}
h1 {
	font-size:300%;
	margin-top:-10px;
	margin-bottom:-6px;
}
strong.sousTitre {
	color :#888;
	font-size:80%;
	text-align:center;
	margin-bottom:5px;/*MARCHE PAS!!!*/
}
hr {
	margin-top:20px;
}
li {
	text-align:left;
	list-style:url(img/etoile+.png) ;
}
li:hover {
	list-style:url(img/etoile.png) ;
}
li:first-letter {
	font-size:150%;
}
table,td,th{
	width:100%;
	border: 1px solid #ccc;
            border-collapse: collapse;
	background: white;
	margin:5px;
}

.piti {
	font-size:80%;
}
.langu {
	position:absolute;
	top:2px;
	right:2px;
	text-align:right;
	color:#bbb;
	font-size:70%;
}
.conteneur {
	margin: 0 auto;
	/*max-width:1600px;*/
 }
/*Affichage par defaut*/
.colonnes {
	column-count: 3;
	column-width: 33.3333333%;
	margin:0px; padding:0px;
	margin-right:7px;
}
@media only screen and (min-width: 1500px)  {
	body,.colonnes {
            	column-count: 2;
		column-width: 50%;
	}
}
@media only screen and (min-width: 960px) and (max-width: 1499px) {
	.colonnes {
		column-count: 4;
		column-width: 25%;
	}
}
@media only screen and (min-width: 480px) and	(max-width: 960px) {
	.colonnes {
		column-count: 2;
		column-width: 50%;
	}
}
@media only screen and (max-width: 479px){
	.colonnes {
		column-count: 1;
		column-width: 100%;
	}
}
.bloc{
	display: block;
	width: 100%;
	height: auto;
	margin: 0px;
	margin-bottom: 7px;
	padding:4px;
	padding-left:6px;
	border:none;
	border-radius:5px;
	overflow:hidden;
	background:white;
	text-align:center;
	column-break-inside:avoid;
	-moz-column-break-inside:avoid;
	-webkit-column-break-inside:avoid
	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
}

#image {
	transition:background-color 2s;
}
#image:hover{
	background-color:#ffffe0;
	transition:background-color 2s;
}
/*TROP GOURMAND!
	transition:box-shadow 0.3s ease;
}
.bloc:hover{
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease;
}
TROP GOURMAND!*/
footer{
	font-size:70%;
	color:gray;
}