html {margin:0; padding:0; background: #f7b2ca; -webkit-background-size: cover; /* pour anciens Chrome et Safari */ background-size: cover; /* version standardisée */}



	body
	{
	width: 100% ;
	font-size: 1.5em;
	margin:0px; 
	text-align: center;
	}

	header
	{	
	width: 100%;
	position: fixed;
	top: 0px;
	width: 80% ;
	padding: 50% ;
	background: rgba(100,100, 100, 100) ;/*fond transparent*/
	}
	
		
	nav
	{
	display: inline-block; /*horizontal*/
	background: rgba(0, 0, 0, 0) ;/*fond transparent*/
	text-align: center;
	}

		nav ul
		{
		margin: 0px;
		padding: 0px;
		list-style-type:none;
		}

		nav li
		{
		display: inline-block;
		margin-left: 3px;
		}

		nav a
		{
		padding: 1px;
		padding-top: 1px;
		font-size: 1.3em;  
		width: 200px;
		background: #222222;
		text-align: center;
		text-decoration: none;
		border-bottom: 3px solid #222222;
		}

		nav a:hover
		{
		background: #555555;
		border-color: #222222;
		border-bottom: 1px solid #00FFFF;
		}


	section
	{
	background:#dbd8d4;
	padding:1%;
	margin-bottom:0px;
	margin-left:10%;
	margin-right:10%;
	border-radius:15px 15px 15px 15px;	
	font-family: "Verdana", "Arial Narrow";
	font-size: 100%;
	text-align: center;
	line-height:40px;
	}

	
	article
	{
	background:rgba(255,255,255,0.6);
	padding:0px;
	margin-bottom:0px;
	margin-left:2%;
	margin-right:2%;
	margin-top:1px;
	border-radius:10px 10px 10px 10px;
	box-shadow:0px 0px 0px;
	font-family: "Verdana", "Arial Narrow";
		font-size: 100%;
	text-align: center;
	line-height:40px;
	}
	
	aside
	{
	background:rgba(0,0,0,0);
		padding:0px;
	margin-bottom:0px;
	margin-left:10%;
	margin-right:10%;
	margin-top:1px;
	font-family: "Verdana", "Arial Narrow";
		font-size: 100%;
	text-align: center;
	line-height:40px;
	}
	
	footer
	{
	background:#f7b2ca;
	width: 100%;
	position: fixed;
	bottom: 0px;
	font-size: 15px;
	color:blue;
	text-align: center;
		}	
	


/* Dans le NAV il doit y avoir UL */
		ul
		{
		padding: center;
		list-style-type:none;
		}



/* #ID */

			/* Menu principal */
		ul#menu li { padding: 2; margin: 2;  float: left ; text-align: center ; list-style:none;/* enleve les puces */}

		ul#menu li a {background: #b51540; width: 160px ; line-height: 35px ; 
			font-size: 75% ; font-weight: bold ; letter-spacing: 4px ; color: #dbd8d4 ; display: inline-block ; margin: auto 20px; text-decoration: none ; 
		border-radius: 35px 35px 0px 0px; box-shadow: 1px 1px 2px #ed6dad; color: #dbd8d4;/* Ligne verticale entre onglets :     border-right: 2px solid #dea   */;}

		ul#menu li a:hover { background: #012463;}




		ul#menu2 li {  padding: 0; margin: 0px; float: center ; text-align: center ; list-style:none/* enleve les puces */;}

		ul#menu2 li a { background: rgba(0,0,0,0); width: 130px ; line-height: 20px ; font-size: 60% ; font-weight: bold ; letter-spacing: 1px ; color: #fff ; display: inline-block ; margin: auto 40px; text-decoration: none ; 
		 color:rgba(0,0,0,0);/* Ligne verticale entre onglets :     border-right: 2px solid #dea   */;}

		ul#menu2 li a:hover { background:rgba(0,0,0,0); width: 130px ;}




			p
			{
			font-family: "Verdana", "Arial Narrow";
			color:black;
			font-size: 100%;
			}
			
			
				/* Titres */
			h1
			{
			color: black;
			font-family: "Verdana", "Arial Narrow";
			font-size: 180%;
			margin-left: 20px;
			margin-right: 20px;
			text-align: center;
			text-shadow: 3px 3px 6px #355eb7;
			}
			
			
			/* Sous-titres */
			h2
			{
			color: black;
			font-family: "Verdana", "Arial Narrow";
			font-size: 90%;
			text-shadow: 1px 1px 3px #355eb7;
			text-align: center;
			padding: 2px;
			}

			
			/* Textes*/			
			h3
			{
			color: black;
			font-weight: bold;
			font-family: "Verdana", "Arial Narrow";
			font-size: 160%;
			margin-left: 10%;
			margin-right: 10%;
			border-radius: 10px;
			text-align: center;
			}

			/* Textes 2 */
			h4
			{
			color: black;
			font-family: "Verdana", "Arial Narrow";
			font-size: 120%;
			margin-left: 10%;
			margin-right: 10%;
			text-align: center;
			text-shadow: 1px 1px 6px #355eb7;
			}
			
			
			/* Traductions */			
			h5
			{
			font-family: "Verdana", "Arial Narrow";
			font-size: 14px;
			/*font-style:italic;*/
			margin-left: 10%;
			margin-right: 10%;
			text-align: center;
				line-height:20px;
			}
		

			/* Copyright */
			h6
			{
			color: black;
			font-family: "Verdana", "Arial Narrow";
			margin-left: 10%;
			margin-right: 10%;
			text-align: center;
			font-size: 12px;
			}	


	
/* CLASS */

					.souligne
					{
					text-decoration: underline;
					}

					.lettre1
					{color:black; font-size:80%;}

					.lettre2
					{color:black; font-size:160%;}


					/* couleurs */	
					.rouge
					{color:red;}
					.orange
					{color:orange;}
					.noir
					{color:black;}
					.noirb
					{color:black;}

					/* Taille des polices */	
					.taille60
					{font-size:60%;}
					.taille90
					{font-size:90%;}
					.taille100
					{font-size:100%;}
					.taille110
					{font-size:110%;}
					.taille120
					{font-size:120%;}
					.taille130
					{font-size:130%;}
					.taille140
					{font-size:140%;}
					.taille150
					{font-size:150%;}
					.taille160
					{font-size:160%;}
					.taille170
					{font-size:170%;}
					.taille180
					{font-size:180%;}
					.taille190
					{font-size:190%;}


					.italic
					{font-style:italic;}
					.bold
					{font-weight:bold;}
					/*Police pour journaux*/
					.font2
					{font-family:"courier new", arial, serif;}


					/* Ombres sous polices */	
					.ombre1/* */{text-shadow:3px 3px 3px #000000}
					.ombre2 /* Orange */{text-shadow: 0px 0px 5px #FF6600}
					.ombre3 /* Blanc */ {text-shadow: 0px 0px 5px #FFFFFF}

					/* Centré */	
					.center
					{text-align: center;}



					/* #id */  /* Attention  1 seul #id par page */	
					#citation
					{			
					color: black;
					font-size: 100%;
					font-family: "georgia", "Constantia";
					font-weight:bold;
					text-align: center;
					text-shadow: 0px 0px 5px #FF6600;
					margin-right: 1%;
					margin-top: 10%;
					}	

	.arrondi 
	{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(/PIE.htc);
	}

#cadre 
	{
 	border-radius: 10px 10px 10px 10px;
  	box-shadow:2px 2px 2px 2px;
	}

#cadre2 
	{
 box-shadow:1px 1px 6px 1px;
 color: #303030;
	}

#cadre3 
{
 border-radius: 10px 10px 10px 10px;
 box-shadow:2px 2px 8px 1px;
 color: #303030;
}


				/* ---> Pour les Boutons de CONTACTS */
				a.bouton1 {
				padding: 10px 30px; 
				background: #333366; 
				color: white; 
				border-radius: 15px 15px 15px 15px;
				box-shadow: 3px 3px 6px black;
				border:2px solid #FFFFFF; 

				}
				a.bouton1:hover {
				background: #333399;
				text-decoration:underline; 
				}




						div.img 
						{
						margin: 5px;
						border: 1px solid #ccc;
						float: left;
						width: 180px;
						}

						div.img:hover 
						{
						border: 1px solid #777;
						}

						div.img img 
						{
						width: 100%;						
						height: auto;
						}

						div.desc 
						{
						padding: 15px;
						text-align: center;
						}









#colonne1{
    float:left;
    width:33.33%;


}


#colonne2{
    position:relative;
    float:left;
        width:33.33%;


}


#colonne3{
    float:right;
    width:33.33%;

}




.colonne{
  max-width: none;
  height: 80%;
}




			/*

			#fixehaut
				{width: 100%; position: fixed; left: 0px; top: 0px;}
				
			#fixebas
				{position:inherit; width:100%; height:100%}

		
		
			em
			{font-size: 90%;}


		
			photo01
			{border: 3px blue dashed;}


*/


			/*  
			Menu horizontal
			#navigation li {display:inline;}
			#navigation {margin:0 ; padding:0 ; list-style:none ;text-align:center ;}
			#navigation li {display:inline; margin-right:1px; color:#fff; background:#B80034; border-radius:0px 0px 15px 15px; box-shadow:1px 1px 2px black;}
			#navigation li a {padding:4px 20px; background:#A10000; color:#fff; border:1px solid #600; font:1em "Trebuchet MS",Arial,sans-serif; line-height:1em; text-align:center;text-decoration:none; border-radius: 0px 0px 15px 15px;}
			#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background:#870000; text-decoration:underline;

			/* Détail trio 
			#navigation2 {margin:0; padding:0; list-style:none; text-align:center;}
			#navigation2 li {display:inline; margin-right:40px; color:#fff; background:#B80034; border-radius: 30px 30px 30px 30px; box-shadow: 0px 13px 10px black;}
			#navigation2 li a {padding:10px 10px; background:#A10000; color:#fff; border:1px solid #600; font:small "Trebuchet MS",Arial,sans-serif; line-height:1em; text-align:center; text-decoration:none; border-radius: 20px 20px 20px 20px;}
			#navigation2 li a:hover, 
			#navigation2 li a:focus, 
			#navigation2 li a:active {background:#870000; text-decoration:underline;}
						
					
		SI Menu vertical	
			/* contact 			
			#navigation3 {list-style:nonetext-align:center;}
			#navigation3 li {list-style:none; background:#333366; border:2px solid #FFFFFF; margin-bottom:30px; border-radius:10px 10px 10px 10px;  }
			#navigation3 li a {list-style:none; background:#333366; color:#FFFFFF; display:block; font:1em "Trebuchet MS",Arial,sans-serif; line-height:4em; text-align:center; text-decoration:none; font-weight:bold; border-radius:10px 10px 10px 10px;}
			#navigation3 li a:hover, 
			#navigation3 li a:focus,
			#navigation3 li a:active {background:#333399; text-decoration:underline;}

			/* 			
			#navigation4 {list-style:none; text-align:center; margin:0; padding:0; width:200px; }
			#navigation4 li {list-style:none; background:#333366; color:#fff; border:2px solid #FFFFFF; margin-bottom:30px; border-radius:10px 10px 10px 10px;}
			#navigation4 li a {list-style:nonepadding:0px 0px; background:#333366; color:#FFFFFF; display:block; font:1em "Trebuchet MS",Arial,sans-serif; line-height:4em; text-align:center; text-decoration:none; font-weight:bold; border-radius:10px 10px 10px 10px;}
			#navigation4 li a:hover, /* a remplir si besoin */
			/*#navigation4 li a:focus, /* a remplir si besoin */
			/*#navigation4 li a:active {background:#333399; text-decoration:underline;}

	
		/* A tester

		ul#menu0 li { background: #A10000; float: left ; text-align: center ; list-style:none/* enleve les puces ;border-radius: 90px 90px 90px 90px;
		box-shadow: 3px 3px 6px black;}

		ul#menu0 li a { width: 300px ; line-height: 50px ; font-size: 1em ; font-weight: bold ; letter-spacing: 2px ; color: #fff ; display: block ; text-decoration: none ; border-radius: 90px 90px 90px 90px;
		box-shadow: 3px 3px 6px black; /* Ligne verticale entre onglets :     border-right: 2px solid #dea;

		ul#menu0 li a:hover { background: #870000 ;}