/* Ajustement des styles pour les tablettes et les téléphones */
/* voir : https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html */

@media only screen and /*and (min-width: 320px)*/ and (max-width: 480px) {
    /* la plupart des smartphones (portrait) + écran */ 
 body {
 	/*	color:green; */
 }
 .colonne {
    clear:both;
    width:99%;
 }
}

@media only screen and /*(min-width: 320px) and*/ (max-width: 480px) {
    /* la plupart des smartphones (portrait) */ 
 body {
 	/*	color:blue; */
 }
 .colonne {
    clear:both;
    width:99%;
 }
 #basdepage {
   position:relative;
   background-color:white;
 }
 #basdepage>* {
    clear:both;
    width:99%;
    border-top:solid grey 1px;
    background-color:white;
 }
 #basdepage>*:nth-child(1) {
    /* border-top:none transparent 0px; */
 }
 
 #carte {
  text-align:center;
  width:100%; margin : 0 auto;
  position:relative;
  bottom:0em;
 }
 .vignette { margin-top:10px; }
}

@media only screen and (min-width: 420px) and (max-width: 640px) {
    /* ?tablette mini en portrait */ 
 body {
  /*   color:red;  */
}
 .colonne {
   /* clear:both; float: none; width: auto; */
 }
 .vignette { margin-top:10px; }
}



@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;
 	/*	color:purple; */
	}
	
	/* 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 {
		-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 */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
	.colonne,
	#basdepage > * {
		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;
		text-align: center;
		font-style: italic;
		color: #777;
	}
}


@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}