@charset "utf-8";
/* CSS Document */

#menu /* pour l'élément d'id "menu" : c'est l'ul conteneur du menu*/
{	
	margin: 0; /* contrôle des margin..*/
	padding: 0 /* ..et padding */
}
	
		
	#menu li .life /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 70%;
			height: 340px;
			border-style: solid;
			border-width: 1px;
		}



	#menu li .shape /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 70%;
			height: 700px;
			border-style: solid;
			border-width: 1px;
		}


		
			#menu li ul li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 40%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

			#menu li .shape li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 43%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

				#menu li ul li img {
					width: 60px;
					float: left;
				}

				#menu li .life li img {
					width: 60px;
					float: left;
					padding-top: 10px;
				}

				
		
				#menu li ul li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 22px;
					margin-top: 30px;
					margin-left: 10px;

				}

				#menu li .shape li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 20px;
					margin-top: 15px;
					margin-left: 10px;

				}
		
				#menu li ul li a:hover /* au survol des liens a des li des ul de sous-menu */
				{
					text-decoration: underline; /* arrière-plan rouge foncé */
				}



/***** Ecran moyen ***********************************************************************************/

@media (max-width: 1024px){


	#menu /* pour l'élément d'id "menu" : c'est l'ul conteneur du menu*/
{	
	margin: 0; /* contrôle des margin..*/
	padding: 0 /* ..et padding */
}
	
		
	#menu li .life /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 80%;
			height: 250px;
			border-style: solid;
			border-width: 1px;
		}



	#menu li .shape /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 67%;
			height: 450px;
			border-style: solid;
			border-width: 1px;
		}


		
			#menu li ul li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 40%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

			#menu li .shape li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 35%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

				#menu li ul li img {
					width: 30px;
					float: left;
				}

				#menu li .life li img {
					width: 40px;
					float: left;
					padding-top: 10px;
				}

				
		
				#menu li ul li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 10px;
					margin-top: 30px;
					margin-left: 10px;

				}

				#menu li .shape li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 12px;
					margin-top: 15px;
					margin-left: 10px;

				}
		
				#menu li ul li a:hover /* au survol des liens a des li des ul de sous-menu */
				{
					text-decoration: underline; /* arrière-plan rouge foncé */
				}






}





/***** Ecran petits ORDI ***********************************************************************************/

@media (max-width: 480px) {


	#menu /* pour l'élément d'id "menu" : c'est l'ul conteneur du menu*/
{	
	margin: 0; /* contrôle des margin..*/
	padding: 0 /* ..et padding */
}
	
		
	#menu li .life /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 90%;
			height: 300px;
			border-style: solid;
			border-width: 1px;
		}


	#menu li .shape /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 78%;
			height: 520px;
			border-style: solid;
			border-width: 1px;
		}




	

		
			#menu li ul li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 40%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}


			#menu li .shape li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 40%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

			
				#menu li ul li img {
					width: 30px;
					float: left;
				}

				#menu li .life li img {
					width: 40px;
					float: left;
					padding-top: 10px;
				}

				
		
				#menu li ul li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 8px;
					margin-top: 30px;
					margin-left: 10px;

				}

				#menu li .shape li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 8px;
					margin-top: 15px;
					margin-left: 10px;

				}
		
				#menu li ul li a:hover /* au survol des liens a des li des ul de sous-menu */
				{
					text-decoration: underline; /* arrière-plan rouge foncé */
				}




	}


/***** Ecran petits ***********************************************************************************/

@media all and (max-device-width: 500px) {


	#menu /* pour l'élément d'id "menu" : c'est l'ul conteneur du menu*/
{	
	margin: 0; /* contrôle des margin..*/
	padding: 0 /* ..et padding */
}
	
		
	#menu li .life /* Pour les ul dans les li dans l'élément d'id "menu" -> les sous-menus*/
		{
			margin: 0; /* ontrôle des margin..*/
			padding: 0; /* ..et padding */
			position: absolute; /* position par rapport au premier parent positionné/navigateur!! */
			background-color: white;
			width: 90%;
			height: 300px;
			border-style: solid;
			border-width: 1px;
		}



	

		
			#menu li ul li /* pour les li des ul de sous-menu */
			{	
				float: left;
				width: 40%;
				
				 /* les li sont ramenés dans le flux */
				/* ils reprennent leur display list-item type block compatible avec l'affichage en colonne */
			}

			
				#menu li ul li img {
					width: 30px;
					float: left;
				}

				#menu li .life li img {
					width: 40px;
					float: left;
					padding-top: 10px;
				}

				
		
				#menu li ul li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 8px;
					margin-top: 30px;
					margin-left: 10px;

				}

				#menu li .shape li a /* pour les liens a des li des ul de sous-menu */
				{
					 /* on laisse le navigateur calculer la largeur */
					color: black;
					float: left;
					font-size: 8px;
					margin-top: 15px;
					margin-left: 10px;

				}
		
				#menu li ul li a:hover /* au survol des liens a des li des ul de sous-menu */
				{
					text-decoration: underline; /* arrière-plan rouge foncé */
				}




	}