html, body {
	margin: 0;
	padding: 0 0 0 0;
	height: 100%;
	font-family:arial;
	font-size:18px;
	width:100%;
}
body {
	background-image:url("images/fond.png");
	background-repeat:no-repeat;
}
#main {
	background-repeat:no-repeat;
	background-position: top center;
	height:100%;
}
.avec-header {
	background-image:url("images/logo-grand-header.png");
}
.sans-header {
	background-image:url("images/logo-grand.png");
}



@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) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}





#footer {
	position:fixed;
	bottom:0;
	width:100%;
	padding:10px;
	background-image:url("images/fond-dark.png");
	overflow:hidden;
}

.bloc-icone {
	text-align:center;
	width:90px;
	height:70px;
	color:rgb(127,127,127);
	font-size:13px;
	margin: 10px 6px 0 6px;
	padding:0;
	float:left;
}
.bloc-icone p{
	margin:0;
	padding:0;
}
.icone {
	width:50px;
	height:50px;
	border:2px solid rgb(185,205,229);
	border-radius: 10px;
	padding: 4px 0 0 4px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.text-general {
	font-size:12px;
	color:white;
	padding:0;
	margin:6px 0 0 0;
}

#bloc_connexion {
	width:170px;
	margin-left:auto;
	margin-right:auto;
}

#bloc_boutons_connexion {
	overflow:hidden;
	margin:20px 0 10px 0;
}
#btn_login {
	width:60px;
	height:29px;
	background-image:url("images/btn-login.png");
	float:left;
	margin: 0 15px 0 0;
}
#btn_annuler {
	width:75px;
	height:29px;
	background-image:url("images/btn-annuler.png");
	float:left;
	margin: 0 15px 0 0;
}
#rester_connecte {
	margin:6px 0 0 0;
}
#rester_connecte img {
	margin:0 4px 0 0;
}
#groupe_label {
	font-size:13px;
	color:white;
	background-image:url("images/fond-dark.png");
	padding:2px 0 2px 5px;
	margin:4px 0 0 0;
}
#groupe_value {
	font-size:13px;
	color:#E2EE42;
	margin:0 0 0 6px;
}
#header {
	overflow:hidden;
	margin:4px 0 0 0;
}
#logo_petit {
	float:left;
}
#bloc_droite {
	float:right;
	overflow:hidden;
}
#avatar {
	border:1px solid rgb(185,205,229);
	float:left;
	margin:0 6px 0 0;
}
#prenom {
	font-size:13px;
	color:white;
	margin:8px 6px 0 0;
	float:left;
}
#deconnexion {
	margin:7px 6px 0 0;
	float:left;
}
#separateur_header {
	width:100%;
	height:2px;
	border-bottom:1px solid rgb(89,89,89);
	margin:2px 0 6px 0;
}


.texte_label {
	font-size:15px;
	color:white;
	margin: 0;
	padding: 0;
}
.texte_valeur {
	font-size:15px;
	color:white;
	margin: 0;
	padding: 0;
}
.col1 {
	width:60px;
	float:left;
	margin:10px 10px 0 10px;
}
.col2 {
	margin:10px 4px 0 80px;
}
.couleur_verte {
	color:#E2EE42;
}
.bloc_detail_compte img {
	border:1px solid white;
	float:left;
	margin:10px 10px 0 10px;
}
.bloc_detail_compte {
	overflow:hidden;
}
#bloc_info {
	overflow:hidden;
}
#bloc_info img {
	float:left;
	margin:10px 10px 0 10px;
}
#bloc_info .titre {
	color:white;
}
#bloc_info_texte {
	margin:10px;
}
#bloc_info_texte .sous-titre {
	color:red;
	font-weight:bold;
	margin:16px 0 7px 0px;
	padding:0;
}
#bloc_info_texte img {
	float:left;
	margin:-3px 4px 0 0;
}
#trajet{
	font-size:11px;
}
#planning {
	background-color:white;
	height:auto;
	width:100%;
	padding:5px 0 5px 0;
}
#jours_planning {
	list-style: none;
	margin: 0 auto 0 auto;
	padding: 0;
	overflow:hidden;
	width:210px;
}
#jours_planning  li {
	display:inline;
}
#jours_planning  li img {
	vertical-align:middle;
}