body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-color: #FFF;
}
.titre {
	background-color: #369; 
	width: 100%; 
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 18px;
	color: #FFF;
}
.arrondi {
	border-radius:7px;
}
.tempo {
	text-align:center;
	z-index:100; 
	background:#ffc; 
	padding:10px; 
	border:1px solid #ff0;
    animation-name: disparait;
    animation-duration: 5s;
	visibility:hidden;
}
@keyframes disparait {
    from {
		opacity:1;
		visibility:visible;
      }
	50% {opacity:0.5;}
    to {
		opacity:0;
		visibility:hidden;
	}
}
/*
@media only screen and (max-device-width:980px) {
 body {
	font-size:120%;
 }
 .titre {
	font-size:24px;
 }
}
*/
@media (max-width: 640px) {

	 /* passer tous les éléments de largeur fixe en largeur automatique */
	 body, element1, element2 {
	   width: auto;
	   margin: 0;
	   padding: 0;
	 }

	 /* 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;
	   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) */
	 element1, element2 {
	   float: none;
	   width: auto;
	 }

	 /* masquer les éléments superflus */
	 .hide_mobile {
	   display: none !important;
	 }

	 /* Un message personnalisé */
	 body:before {
	   content: "Version mobile du site";
	   display: block;
	   color: #777;
	   text-align: center;
	   font-style: italic;
	 }
}


@media (max-device-width:768px) and (orientation: landscape) {
/* réduire de façon harmonieuse toutes les tailles de polices en orientation paysage 
(car bug sur les périphériques iPhone et iPad).
*/	
	  html {
	   -webkit-text-size-adjust: 100%;
	  }
}

a {  text-decoration: none}
a:hover { background-color: #dddddd; }
#menu a:hover { background-color: #aaaaaa; }

.surlignage:hover { background-color: #eee; }	/* tr dans tableaux */

#moncoin {
  border-radius: 7px;
}
.boite {
	background-color:#eee; 
	border-radius:7px; 
	padding:5px;
}

/*
#left_column h4 { -moz-border-radius-topleft: 7px; }
#left_column h4 { -webkit-border-top-left-radius: 7px; }
#left_column h4 { -moz-border-radius-topright: 7px; }
#left_column h4 { -webkit-border-top-right-radius: 7px; }
#left_column h4 { -moz-border-radius-bottomleft: 0px; }
#left_column h4 { -webkit-border-bottom-left-radius: 0px; }
#left_column h4 { -moz-border-radius-bottomright: 0px; }
#left_column h4 { -webkit-border-bottom-right-radius: 0px; }
*/