/* Général */
	html, body { height:100%; width:100%; }
	.ipad { overflow:hidden; }
	
	/* Masque noir */
	#mask { position:absolute; top:0; left:0; background-color:black; opacity:0.5; width:100%; height:100%; z-index:-10; transition:all 0.2s ease;}

	/* Menu de navigation Hamburger */
	.navigation { 
		width:100%; height:100%; position:fixed; top:0; right:0; bottom:0; left:0; z-index:0; /* ne pas toucher */
		list-style: none; background:#fff; }
		
		/* Logo site */
		.navigation .logo { margin:45px 30px; }
			@media screen and (max-width: 367px) { .navigation .logo { margin:15px 30px; }}
		
		/* items du menu */
		.nav-item { width:265px; }
			.nav-item a { display:block; margin:1px 0; padding:15px 28px; background-color:#f2f2f2; color:#555555; font-size:1.2em; text-decoration:none; }
				.nav-item a img { display:inline-block; vertical-align:middle; margin-right:8px; }
				.nav-item a:hover { color:#fff; background: #006699; }
					.nav-item a img + img  { display:none; }
					.nav-item a:hover img  { display:none; }
						.nav-item a:hover img + img { display:inline-block; }
						
						/* sur l'ipad, le logo hover oblige � double cliquer pour activer un item. Du coup on d�sactive. */
						.ipad .nav-item a:hover img { display:inline-block; }
						.ipad .nav-item a:hover img + img { display:none; }
		
		/* icone hamburger */
		.hamburger { position:absolute; clip:rect(0,0,0,0); /* ne pas toucher */ }
		label[for="hamburger"] {
			position:fixed; left:20px; top:25px; z-index:2; /* ne pas toucher */
			height:25px; width:25px; cursor:pointer;
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='25px' height='25px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve'><rect width='25' height='1' stroke='white' fill='white' /><rect y='16' width='25' height='1' stroke='white' fill='white' /><rect y='8' width='25' height='1' stroke='white' fill='white' /></svg>");
			background-size:contain; }
			
		/* Animation du menu hamburger */
		.hamburger + label, .main { transition:left 0.2s; }
		.hamburger:checked + label { left:225px; bottom:40px; top:auto; }
			.hamburger:checked + label[for="hamburger"] { background:url('../img/hide.png') center center no-repeat #0099cb; top:0; left:265px; bottom:auto; height:100%; width:45px; }
		.hamburger:checked ~ .main { left:310px; box-shadow:0 0 5px rgba(0,0,0,0.5); }
		.hamburger:checked ~ .main .header { display:none; }
		.hamburger:checked ~ .main ~ #mask { z-index:10; left:310px; }
		
		/* sur les écrans larges, on ouvre le menu par défaut */
		@media screen and (min-width: 1024px) {
			.hamburger + label { left:285px; }
			.hamburger ~ .main { margin-left:265px; box-shadow:0 0 5px rgba(0,0,0,0.5); min-width:auto;}
			label[for="hamburger"] { display:none; }
			.header { display:none; }
		}
		
		/* sur les écrans petits, on affiche la mni-bar en haut */
		@media screen and (max-width: 1023px) {
			.header { background-color:white; width:100%; text-align:center; padding:4px 0 2px; position:fixed; top:0; left:0; z-index:2; }
				.header img { margin-left:5px; }
		}

	/* Contenu du site */
	.main { min-height:100%; background-color:white; position:relative; top:0; bottom:100%; left:0; z-index:1; /* ne pas toucher sauf background */	}
		.wrapper { padding:0; }
		
		/* pour les petits écrans, pour que tout soit centré */
		@media screen and (max-width: 1023px) { .wrapper { padding:80px 0 20px }}
		
		/* sur smartphone, on masque le logo classique et on passe en logo smartphone */
		.main #logo_smartphone { display:none; margin:10px auto;}
		@media screen and (max-width: 1023px) { 
			.main #logo { display:none; }
			.main #logo_smartphone { display:block; }
		}