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

body {
	background-color: #000;
	font-family: Verdana, Arial, sans-serif;
}
h1 {
	color:#390;
	font-size: 25px;
}
a {
	color:#0F0;
}
a:hover {
	color:#906;
}
#conteneur {
	position: relative; /* évite aux éléments intérieurs de se chevaucher */
	width: 900px;           /*idem: suite; les positionne les uns par rapport aux autres*/
	margin-right: auto;   /*centre l'ensemble dans les navigateurs*/
	margin-left: auto;    /*idem: centre l'ensemble dans les navigateurs*/
	background-color: #000;
	margin-top: -10px;
}
header{
	/*background-color: #06F;*/
	height: 617px;
	width: 100%;   /*la largeur s'aligne sur celle du conteneur*/
	display: block;
}
#img01 {
    /*background-color: #06F;*/
	height: 617px;
	width: 100%;   /*la largeur s'aligne sur celle du conteneur*/
	display: block;
	/*width: 900px;
	height: 150px;*/  /*alignement de l'image sur le header' ici pas nécessaire*/
}
nav {                           /*conteneur des boutons-menus horizontaux*/
	background-color: #FC0;
	height: 39px;
	width: 898px;
	display: block;
	padding-left: 2px;	
}
nav #menu-deroulant, nav #menu-deroulant ul {
        padding: 0;   /* important pour caler pile les boutons-menus à touche-touche dans le conteneur nav */
        margin: 0;    /*idem*/
        /*list-style: none;*/   /* pas nécessaire car figurant déjà dans reset.css pour compatibilité IE anciennes versions */
}
nav #menu-deroulant {
}
nav #menu-deroulant li {        /* boutons-menus */
        /*display: inline-block;   /* on place les liens du menu horizontalement */
	float: left;      /*display: inline-block; pas nécessaire grâce à float: left*/    
	background-color: #F00;
        height: 35px;
	width: 110px;
	border-top-width: 2px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
nav #menu-deroulant li:hover {
        background-color: #CCC;	  /*couleur hover des boutons-menus*/
	border-radius: 6px 6px 0px 0px;   /*arrondit le haut des boutons-menus en hover*/
}
nav #menu-deroulant ul li {
        /*display: inherit;*/   /* on enlève le comportement display: inline-block; pour les liens du sous-menu */
        float: none;             /* pas nécessaire grâce à float: none; */
	border-width: 0px;   /*pour supprimer les bordures données aux boutons-menus*/
	width: 150px;  /* largeur des sous-menus */
}
nav #menu-deroulant a {
	color:#FFF;            /*police des boutons-menus*/
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
        text-decoration: none;
        display: block;
        line-height: 30px;
	text-align: center;
}
nav #menu-deroulant ul {
        position: absolute;   /*impératif pour tout menu déroulant*/
        left: -999em;    /* on cache les sous menus complètement sur la gauche */
	margin-top: 7px;
	/*top: 0px;*/
}
nav #menu-deroulant li:hover ul {
        left: auto;    /* annule left: -999em; Au survol des li du menu on replace donc les sous menus */
}
nav #menu-deroulant ul li:last-child {
        border-radius: 0 0 6px 6px;   /*arrondit la base du menu-déroulant*/
}
#soulign{
	background-color: #000;
	height: 1px;
	width: 900px;
	display: block;
}
#fil{
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	color: #060;
	background-color: #FFF;
	width: 645px;
	height: 39px;
	display: block;
	padding-left: 35px;
	padding-top: 1px;
	line-height: 10px;
	float: left;
}
#result{
	font-family: Tahoma;
	font-size: 14px;
	font-weight: normal;
	color: #060;
	background-color: #FFF;
	width: 220px;
	height: 39px;
	display: block;
	padding-top: 1px;
	line-height: 10px;
	float: left;
	text-align: center;
}
#contenu {
	display: block;   /* signifie montrer par opposition à display: none; (cacher) */
	width: 500px;
	height: 200px;
	/*background-color: #090; /*couleur verte*/
	background-color: #000;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

section {
	/*background-color: #FF0; /*couleur jaune*/
	background-color: #FFF;
	height: 200px;
	width: 440px;
	float: left;
	padding-left: 30px;
	padding-right: 30px;
}
article {
	/*background-color: #CFF; /*couleur vert très pâle*/
	background-color: #FFF;
	height: 150px;
	width: 440px;
	text-align: center;
}
article .p1 {
	height: auto;
	width: 390px;
	text-align: justify;
}
article .image01{
	height: 200px;
	width: 200px;
	position: absolute;
	right: 250px;
}
article .p2 {
	text-align: justify;
	margin-top: 0px;
}
article .p3 .image02{
	height: 360px;
	width: 240px;
	position: absolute;
	left:  30px;
}
article .p4 {
	width: 350px;
	text-align: justify;
	position: absolute;
	right: 250px;
	top: 1020px;
}
aside {
	background-color: #999;  /*couleur du bloc aside sous les 2 pavés*/
	height: 1170px;
	width: 220px;
	float: right;
	/*padding-left: 20px;*/
}
#pav01, #pav02 {
	font-family: Arial Black;  /*police des titres des 2 pavés*/
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color:#000;
	/*padding-left: 20px;*/
}
#menu-accordeon {
  padding:0;
  margin-left: 20px;
  list-style:none;
  text-align: center;
  width: 180px;         /*la hauteur des boutons-menus se fait en fonction de la hauteur du texte et du padding #menu-accordeon a*/
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#FC0; /*couleur des boutons-menus*/
   /*background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);*/    /*ombrage sur les boutons à partir de coul #729EBF*/
   /*border-radius: 6px;*/   /*arrondit les coins des bordures*/
   margin-bottom:2px;
   /*box-shadow: 3px 3px 3px #999;*/    /* ??? */
   /*border:solid 1px #333A40;*/
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;    /* cache les liens sous-menus déjà repliés par max-height:0; */
   transition: all .5s;  /*??? vitesse de déroulement des sous-menus déroulants? */
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0;
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  /*padding: 8px 0;*/  padding: 8px;   /* ou padding-top: 8px + padding-bottom:8px */
  font-family: verdana;   /*police des boutons-menus*/
  font-size: 11px;
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size: 11px;        /*police des sous-menus déroulants et hover*/
}
#menu-accordeon li:hover {
   background: #F00;   /*couleur hover des boutons-menus*/
}
#menu-accordeon li li:hover {
   background: #999;   /*couleur hover des sous-menus déroulants*/
}
#menu-accordeon ul li:last-child {
   /*border-radius: 0 0 6px 6px;*/   /*arrondit la base du menu-déroulant*/
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;   /* hauteur maxi de déroulement des menus-déroulants */
}
footer {
	font-family: verdana;
	font-size: 12px;
	text-align: center;
	line-height: 17px;
	background-color: #99F;
	display: block;
	height: 85px;
	width: 100%;
	padding-top: 2px;
}