@media(max-width:640px) {
    * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1em;
    }
	
	/*Supression de routes les colonnes*/
    div#colonne_tertiaire.colonne,
	div#colonne_double,
	div#colonne_secondaire.colonne,
    div#colonne_principale.colonne{
        float: none;
    }

	html,
	body,
	table.calendrier a,
    div#colonne_tertiaire.colonne,
	div#colonne_double,
	div#colonne_secondaire.colonne,
    div#colonne_principale.colonne,
	footer{
		padding:0;
	}
	
	html,
	body,
	div#conteneur_milieu
	table.calendrier a,
    div#colonne_tertiaire.colonne,
	div#colonne_double,
	div#colonne_secondaire.colonne,
    div#colonne_principale.colonne,
	footer{
		margin: 0;
	}
	
    html,
	body,
	footer,
    div,
    div#login,
    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }

	div#conteneur_milieu{
        padding: 0 5px 0 5px;
	}


	
	
	ul#menu_general li a{
        border: 0;
	}
	
	ul#menu_general li a {
        font-size: 1.2em;
        line-height: 48px;
		min-width:48px;
    }

    span#titre {
        font-size: 2em;
    }

    span#soustitre {
        display: block;
    }

    header#header,
	header#header.fixed_top {
        padding-top: 0;
    }

    body > header div#barre_login {
        height: 48px;
        line-height: 100%;
    }

    div#barre_login,
    div#login {
        margin: 0 auto;
    }

    div#barre_login > form {
        margin: 0;
        padding: 0;
        line-height: 100%;
    }

    input.identifiant {
    }

    div#login label {
        display: inline-block;
    }

    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    header#header.fixedtop + div {
        margin-top: 220px;
    }

    div#barre_login a.bouton_submit {
        width: 80px;
        height: 22px;
        margin: 0;
        padding: 4px 9px;
        border: 1px solid grey;
        font-size: 0.8em;
        line-height: 100%;
        color: black;
        background-color: white;
        cursor: pointer;
    }

    div#barre_login input {
        -webkit-appearance: none;
        border: 1px solid grey;
        border-radius: 0;
    }

 	table.calendrier a,
    div#colonne_tertiaire.colonne,
	div#colonne_double,
	div#colonne_secondaire.colonne,
    div#colonne_principale.colonne,
	footer,
	div.fb-page {
        width: 100%;
    }

    div#barre_login input.submit {
        width: 80px;
        height: 25px;
        margin: 0;
        padding: 0;
        font-size: 0.8em;
        line-height: 100%;
        background-color: white;
    }

    /* conserver le ratio des images */

    img {
        height: auto;
    }

    /* gestion des mots longs */

    textarea,
    table.liste,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-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) */

    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }

    /* Un message personnalisé */

    body:before {
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
	
	nav{
		max-width: 100%;
	}

    div#map {
        display: inline-block;
		max-width: 100%;
    }

	article.agenda img{
		float: none;
		width: auto;
		margin: 0 0;
	}
	
	section#selection li{
		line-height: 48px;
		font-size: 1.5em;
	}
	
	section{
		width: 100%;
		float: none;
		margin: 0;
	}
	
	section#derniere_photo{
		max-width: 100%;
	}
	
	section#dernieres_photos img{
	max-width: 100%;
	}
	
	section#dernieres_cartes img{
	max-width: 100%;
	display: block;
	}
	
	section.bloc iframe.iframe_video{
	max-width: 100%;
	}
	
	table.calendrier{
		width: 100%;
	}
	
	table.calendrier th, table.calendrier td{
		height: 48px;
	}
	
	table.calendrier a{
		height: 100%;
		vertical-align: middle;
		line-height: 100%;
		margin: auto;
	}
}