﻿html, body { 
margin:0;
padding:0;
width:100%;
font-family: Century Gothic, Segoe UI, Calibri, Arial;
font-style: normal;
background-color: #cbcbcb;
background-image:url(AA_IMAGES_FINIES/image_de_fond.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
}

img, object, canvas, video, audio, picture
{
display: block;
float: left;
border: 2px solid green;
margin: 0 auto;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
height: auto;
border:1px;
}

h1
{
font-size: 1em; 
font-style:normal;
font-weight:normal;
color: #596e8b;
clear:both;
}

h2
{
font-size: 0.9em; 
font-style:normal;
font-weight:normal;
color: #596e8b;
clear:both;
}

h3
{
font-size: 0.9em; 
font-style:normal;
font-weight:normal;
color: #596e8b;
clear:both;
}

p
{
font-size: 0.9em;
margin-top: 10px;
clear:both;
}

ul
{
text-decoration: none;
list-style-type: none;
}

li
{
line-height: 175%;
text-decoration: none;
text-indent:-35px;
color: black;
}

a
{
text-decoration: none;
color: black;
}

a:visited
{
text-decoration: none;
color: black;
}

a:hover, a:focus, a:active
{
text-decoration: none;
color: red;
}

div#bloc_menu
{
float: left;
padding-left: 10px;
padding-top:60px;
padding-right:10px;
margin-left:10%;
margin-top:0px;
width: 20%;
min-height:1500px;
text-align:left;
background-color:white;
filter:alpha(opacity=90); opacity:0.9;
box-shadow: 0px 0px 10px #333; /* décalage droite, décalage horizontal, largeur, couleur */ 
z-index: 10;
position: fixed;
}

div#logo_menu
{
float: left;
padding-left: 15px;
padding-top:30px;/* modifier ici pour la distance du logo au top */
padding-right:10px;
margin-left:10%;
margin-top:6%;/* modifier ici pour la distance du logo au top */
width:20%;
position: fixed;
z-index: 20;
}

div#texte_menu
{ 
font-family: Century Gothic, Segoe UI, Calibri, Arial;
font-size: 0.9em;
font-style: normal;
color:black;
float: left;
padding-left: 15px;
padding-top: 75px; /* modifier ici pour la distance texte menu au top */
padding-right:10px;
margin-left:10%;
margin-top:16%;/* modifier ici pour la distance texte menu au top */
width:20%;
position: fixed;
z-index: 30;
}

#menu-accordeon
{
text-align: left;
}

#menu-accordeon ul
{
list-style:none;
text-align: left;
}

#menu-accordeon li 
{
margin-bottom:2px;
}

#menu-accordeon li li 
{
max-height:0;
overflow: hidden;
transition: all 1s;
margin-left: -80px;
}

#menu-accordeon a {
display:block;
text-decoration: none;
margin-left: 0px;
}

#menu-accordeon ul li a, #menu-accordeon li:hover li a
{
margin-left:45px;
color: #596e8b;
}

#menu-accordeon li:hover li 
{
max-height: 15em;
}

div#image
{
float: left;
padding: 0%;
margin-top:20px;
width: 100%;
position: relative;
z-index: 2;
}

div#image-entete
{
float: left;
padding: 0%;
margin-top:20px;
width: 100%;
position: relative;
z-index: 2;
}

div#contenu
{
float: left;
padding: 0%;
margin-top:25px;/* modifier ici pour la distance du logo au top */
margin-right:10%;
margin-left:35%;
width: 55%;
min-height: 1800px;
background-color:ffffff;
position: relative;
z-index: 3;
}

div#copyright
{
font-family: Century Gothic, Segoe UI, Calibri, Arial;
font-size: 0.8em;
font-style: normal;
color: #596e8b;
text-align:center;
}

/* application d'un responsive-design pour ecran en-dessous de 800 pixels */ 

@media screen and (max-width:800px) {

li 
{
padding-bottom: 2px;
padding-top: 2px;
margin-left: 1%;
}

div#bloc_menu
{
display:none; /* Supprime le div */
}

div#logo_menu
{
float: left;
padding-left: 1%;
padding-top: 1%;
padding-right: 1%;
margin-left:1%;
margin-top:1%;
margin-right:1%;
width:97%;
position: relative;
}

div#texte_menu
{
font-size: 1,5em;
font-style:normal;
color:black;
float: left;
padding-left: 1%;
padding-top: 0%;
padding-right:1%;
margin-left:1%;
margin-top:0%;
margin-right:1%;
width:97%;
position: relative;
}

div#image
{
float: left;
padding: 1%;
margin-top: 0%;
width: 97%;
position: relative;
}

div#image-entete
{
max-height:1px;
visibility:hidden;
}


div#contenu
{
float: left;
padding-left: 2%;
padding-top: 0%;
padding-right:1%;
margin-left:1%;
margin-top:0%;
margin-right:1%;
width: 96%;
min-height: 200px;
position: relative;
}



