/* Style CSS mobile pour smartphone et tablette */

/* Mise en page réactive - lorsque l'écran est inférieur à 820px de large, transformer les deux colonnes en une seule */
@media screen and (max-width: 820px) {
	.leftcolumn, .rightcolumn {   
		width: 100%;
		padding: 0;
	}
}

/* Disposition mobile : 600px et moins. */
/* Lorsque l'écran est inférieur à 600 pixels de large, cacher tous les éléments du topnav */
/* à l'exception de ("Accueil"). Afficher le menu hamburger pour ouvrir et fermer le topnav */
@media screen and (max-width: 600px) {
	nav ul.topnav li:not(:first-child) {display: none;}
	nav ul.topnav li.icon {
		float: right;
		display: inline-block;
	}
}

/* La classe "responsive" est ajouté au topnav avec JavaScript lorsque l'utilisateur clique sur l'icône. */
/* Cette classe rend le topnav apparent sur les petits écrans */
@media screen and (max-width: 600px) {
	nav ul.topnav.responsive {position: relative;}
	nav ul.topnav.responsive li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	nav ul.topnav.responsive li {
		float: none;
		display: inline;
	}
	nav ul.topnav.responsive li a {
		display: block;
		text-align: left;
	}
}