/* CSS Document */

/* si le navigateur a au moins une largeur de 680px */
@media only screen and (min-width: 680px) {
	.nav-mobile {
	display:none;
	}

}


/* si le navigateur a une largeur inférieure à 680px */
@media (max-width: 679px) {
	body {
		width: auto;
		margin: 0;
		padding: 0;
		font-family: "Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
	}
	
	img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
	max-width: 100%;
	}
	
	
	.site-header {
	text-align: center;
	width: auto;
	height: auto;
	}
	
	.menu-ecran {
	display: none;
	}
	
	.nav-mobile {
	text-align:right;
	z-index: 1;
	}
	
	.nav-button {
	background-image:url(images/png/menu_mobile.png);
	background-repeat:no-repeat;
	background-color: rgba(255,255, 255, 0);
	border:none;
	margin: 12px;
	padding: 0;
	cursor: pointer;
	font-size:20px;
	font-weight:bold;
	text-transform:uppercase;
	}
	
	.nav-button:hover {
	background-image:url(images/png/menu_mobile_over.png);
	}
	
	
	.sr-only {
	color: rgba(255,255, 255, 0);
	}
	
	ul {
	margin: 0px;
	padding: 0px;
	}
	
	ul:after {
	content:close-quote;
	display: block;
	clear: both;
	}
	
	li {
	list-style-type: none;
	float:right;
	position: relative;
	width: 100%;
	}
	
	.menu-mobile {
	display: none;
	background-color:#000000;
	}
	
	.menu-mobile a {
	
	font-size:24px;
	}
	
	.menu-mobile li:hover a{
	color:#FFFFFF;
	}
	
	.menu-mobile li:hover {
	background-color:#666666;
	}
	
	li:hover .menu-mobile {
	display: inline-block;
	position: absolute;
	top: 100%;
	right: 0px;
	padding: 0px;
	z-index: 100000;
	}
	
	.menu-mobile li {
	border-bottom: 1px solid #CCC;
	}
	
	.menu-mobile li a{
	padding: 15px 15px;
	color:#FFFFFF;
	}
	
	.nom {
	text-align:left;
	position:absolute;
	}
	
	

	@font-face {
	font-family: 'Tw Cen MT';
	src: url('fontscorecomttwcenmt.eot');
	src: url('fontscorecomttwcenmt.ttf');
	src: url('fontscorecomttwcenmt.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}
	

	.footer {
		width: 100%;	
	}
	
	.deco {
		font-size: 1.2em;
	}
	
	.icon {
	width: 60%;
	}
	
	.h1 {
		font-size: 0.8em;
		display:inline;
	}
	.copyright {
		font-size: 0.6em;
	}
	
	table {
	width: 50%;
	}
	
	/* conserver le ratio des images */
	img {
		width: 100%;
	}
	
	/* gestion des mots longs */
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
		
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}

}

/* réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad) */
@media (max-device-width:679px) and (orientation: landscape) {
 html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}