@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		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 */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
	
		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 */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}

.cadredate {
font-family: "Roboto", Arial, sans-serif;
font-size: 1em;
font-weight: 400;
color: #ffffff;
}			

.cadresemaine {
font-family: "Roboto", Arial, sans-serif;
font-size: 1em;
font-weight: 400;
color: #73ffff;
}		
h1 { 		
font-family: "Roboto", Arial, sans-serif;
font-size: 1.1em;
margin-top: 0.1em;
margin-bottom: 0.1em;
margin-left: 0;
margin-right: 0;
font-weight:500;
color: #000;
}

.heures {
font-family: "Roboto", Arial, sans-serif;
color: #000;
font-size: 1.1em;
font-weight:300;
}

.horaires {
font-family: "Roboto", Arial, sans-serif;
position:relative;
float:left;
width:93%;
height:2em;
background:#eeeeee;
margin:0.2em 0 0.2em 3%;
padding:5px 5px 5px 5px;
border:1px solid #ccc;
border-radius:0.5em;
}

.horaires:hover {
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}

.modifhoraires {
font-family: "Roboto", Arial, sans-serif;
position:relative;
float:left;
width:43%;
height:2em;
background:none;
margin:0.2em 0 0.2em 3%;
padding:5px 5px 5px 5px;
border:1px solid #ccc;
border-radius:0.5em;
}

.modifhoraires:hover {
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}




.horairesnoclick {
font-family: "Roboto", Arial, sans-serif;
position:relative;
float:left;
width:93%;
height:2em;
background:#e9e9e9;
margin:0.2em 0 0.2em 3%;
padding:5px 5px 5px 5px;
border:1px solid #ccc;
border-radius:0.5em;
}

.horairesnoclick:hover {

}



.postes {
font-family: "Roboto", Arial, sans-serif;
color: #000;
font-size: 1.3em;
font-weight:300;
}

.textes {
font-family: "Roboto", Arial, sans-serif;
color: #000;
font-size:1.2em;
font-weight:300;
}

.foot {
font-family: "Roboto Condensed", Arial, sans-serif;
color: #fff;
font-size: 1.05em;

font-weight:300;
}


.cadremenu {
font-family: 'Roboto', sans-serif;
font-weight: 400;
display:block;width:90%;
color:#fff;
font-size: 1.1em;
line-height: 1em;
margin:0.5em 1em 0.5em 1em ;
padding:0.8em  1em  0.8em  1em ;
text-decoration:none;
text-align:left;
background: #666;
border-radius:1em;
cursor:pointer;
color:#fff;
}

.cadremenu:hover {
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}

.cadremenuno {
font-family: 'Roboto', sans-serif;
font-weight: 400;
display:block;width:90%;
color:#fff;
font-size: 1.1em;
line-height: 1em;
margin:0.5em 1em 0.5em 1em ;
padding:0.8em  1em  0.8em  1em ;
text-decoration:none;
text-align:left;
background: #666;
border-radius:1em;
cursor:pointer;
color:#fff;
}



#btnzip {
cursor:pointer;
}

#btnzip:hover {
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}



	#header {
	height:5%;
	width: 100%;
	margin-top:0px;
	float:left;
	position:fixed;
	left:0px;
	top:0px;
	text-align: left;			
	z-index:100;	
	border-bottom:1px solid #333;	
	}


	#footer {
	height:80px;
	width: 100%;
	margin-top:0px;
	float:left;
	position:fixed;
	left:0px;
	bottom:0px;
	text-align: left;			
	z-index:100;	
	border-top:1px solid #333;	
	background: #000000;
	}
	
	#global {	
	padding-top:5%;
	margin-top:5%;
	}
	
	.sigPad {
 padding: 0.1em  1%  0.3em 0.5em;
 margin:0.1em 0 7em 0%;
  width: 100%;
  border:none;
  }
	
	
	@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}