body
{
background:url(images/toile_fond.jpg)repeat;
margin:1%;
}
h1
{
color:yellow;
text-shadow:1px 2px 4px black;
text-align:center;
}
nav
{
vertical-align: top;
display:inline-block;
width:80%;
text-align:center;
background:url(images/feuille-palmier.jpg)repeat;
margin:top;
width:100%;
height:50px;
border: 1px solid #aaa; 
border-radius: 6px;
}
nav ul
{
list-style-type:none;
display:inline-block;

}
nav li
{
display:inline-block;
margin-right: 15px;
float:left;
margin:5px;

}
article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
article
{
width: 55%;
margin-right:2%;
}
aside
{
position: relative;
width: 40%;
margin-right: 2%;
}
#photos
{
position: center;
}
#photos li
{
margin-left:auto;
margin-right: auto;
display:inline;
width:100%;
list-style-type:none;
padding: 5px 0px;
}
a.bouton {

color: black;  
font: bold 20px Arial, sans-serif;
padding-right:5px;
padding-left:5px;  
width: 350px;  
height: 300px;  
line-height: 2%;  
text-align: center;  
text-decoration: none;  
border: 1px solid #aaa;  
background: #f8f8f8;  
border-radius: 6px;  
background: -moz-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -webkit-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -o-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -ms-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
text-shadow: 0 1px 0 #fff;  
box-shadow: 0 0 10px rgba(0,0,0,0.2);  
}  
a.bouton:hover {  
background: -moz-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -webkit-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -o-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -ms-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
}  
a.bouton:active {  
 box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;  
}
section
{
top:5%;
}
img.zoom_Effet
 {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.9;
}
img.zoom_Effet:hover 
  {
 margin-left:-50%;
 bottom:10%;
    -moz-transform: rotate(1deg) scale(1.50);
    -webkit-transform: rotate(1deg) scale(1.50);
    -o-transform: rotate(1deg) scale(1.50);
    -ms-transform: rotate(1deg) scale(1.50);
    transform: rotate(1deg) scale(1.50);
    opacity: 1;
}
.illustration
{
display:inline-block;
margin-left:0%;
text-align:center;
}
a.bas
{

color: black;  
font: bold 20px Arial, sans-serif;
padding-top:10px;
padding-right:5px;
padding-left:5px; 
bottom:10px;
right:0px; 
position:fixed; 
width: 100px;  
height: 15px;  
line-height: 2%;  
text-align: center;  
text-decoration: none;  
border: 1px solid #aaa;  
background: #f8f8f8;  
border-radius: 6px;  
background: -moz-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -webkit-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -o-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: -ms-linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
background: linear-gradient(top, #f8f8f8 40%, #cacaca 100%);  
text-shadow: 0 1px 0 #fff;  
box-shadow: 0 0 10px rgba(0,0,0,0.2);  
}
 a.bas:hover {  
background: -moz-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -webkit-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -o-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: -ms-linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
background: linear-gradient(top, #cacaca 20%, #f8f8f8 100%);  
}  
a.bas:active {  
 box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;  
}