/***************** BODY *****************/

* {
/*---on passe toutes les marges à 0---*/

margin:0;
padding:0;
}

html {
height:100%;/*---permet de changer la couleur de la barre de scroll dans IE (déconseillé)

scrollbar-base-color:#7d8a2e;
---*/

/*background:#FFF url(../../charte/images/bg-body.png) center top repeat-x;*/

background-image:

url(../../charte/images/bg-body1.png),

url(../../charte/images/bg-body2.png),

url(../../charte/images/bg-body.png);
background-position: top left, center 142px, top left;
/*background-origin: border-box, content-box, border-box;*/

background-repeat: repeat-x, no-repeat, repeat;




}

body {
background:none;
height:100%;
}



/***************** FONTFACE *****************/



@font-face {
font-family: 'Pictos';
src:url('../../charte/font/Pictos.eot');
src:url('../../charte/font/Pictos.eot?#iefix') format('embedded-opentype'),

url('../../charte/font/Pictos.woff') format('woff'),

url('../../charte/font/Pictos.ttf') format('truetype'),

url('../../charte/font/Pictos.svg#Pictos') format('svg');
font-weight: normal;
font-style: normal;
}

/***************** CONTAINER *****************/

#container {
position:relative;
min-height:100%;
width:988px;
margin:0 auto;
background:none;
}

/***************** HEADER NO FLASH *****************/

#headerNoFlash {
    display: block;
    height: 82px;
    outline: 0 none;
    width: 988px;
}



#HeaderMid {
width: 988px;
height: 380px;
float: left;
position: relative;
-webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
     -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
}





/***************** ANIMATION HEADERMID *****************/



@-moz-keyframes AnimHeaderMid {
from { top: 40px;opacity:0;} to { top: 30px;opacity:1;}}



@-webkit-keyframes AnimHeaderMid {
from { top: 40px;opacity:0;} to { top: 30px;opacity:1;}}



@-ms-keyframes AnimHeaderMid {
from { top: 40px;opacity:0;} to { top: 30px;opacity:1;}}



@-o-keyframes AnimHeaderMid {
from { top: 40px;opacity:0;} to { top: 30px;opacity:1;}}



@keyframes AnimHeaderMid {
from { top: 40px;opacity:0;} to { top: 30px;opacity:1;}}

#HeaderMid .HeaderMidTxt {
-webkit-animation: AnimHeaderMid 1.5s ease-in-out 1;
-moz-animation: AnimHeaderMid 1.5s ease-in-out 1;
-ms-animation: AnimHeaderMid 1.5s ease-in-out 1;
-o-animation: AnimHeaderMid 1.5s ease-in-out 1;
animation: AnimHeaderMid 1.5s ease-in-out 1;
position: absolute;
top: 30px;
width: 480px;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);


}



#HeaderMid .HeaderMidTxt h1{
font:  30px 'Abel', Arial,Helvetica,sans-serif;
color: #FFF;
text-transform: uppercase;
}

#HeaderMid .HeaderMidTxt h1 span{color: #fe9291;}

#HeaderMid .HeaderMidTxt p{
font:  23px 'Abel', Arial,Helvetica,sans-serif;
color: #FFF;
margin:20px 0; 

}



#HeaderMid .HeaderMidTxt p strong{
font: 300 23px 'Ubuntu', Arial,Helvetica,sans-serif;
color: #FFF;
}



#HeaderMid .HeaderMidTxt a{
font:  20px 'Abel',  Arial,Helvetica,sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
padding: 10px 30px;
background-color: #a90908;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius: 8px;


box-shadow: 0px 1px 0px 0px rgba( 0, 0, 0, 0.3);
-webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
     -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
}



#HeaderMid .HeaderMidTxt a:hover{
background-color: #eb0100;
}



#HeaderMid .headerMidDiapo {
width: 60%;
height: 100%;
position: absolute;
right: 0;


}





/***************** ANIMATION LOGO *****************/



@-moz-keyframes AnimLogo {
from { opacity:0;} to { opacity:1;}}



@-webkit-keyframes AnimLogo {
from { opacity:0;} to { opacity:1;}}



@-ms-keyframes AnimLogo {
from { opacity:0;} to { opacity:1;}}



@-o-keyframes AnimLogo {
from { opacity:0;} to { opacity:1;}}



@keyframes AnimLogo {
from { opacity:0;} to { opacity:1;}}





#Logo {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
-webkit-animation: AnimLogo 0.8s ease-in-out 1;
-moz-animation: AnimLogo 0.8s ease-in-out 1;
-ms-animation: AnimLogo 0.8s ease-in-out 1;
-o-animation: AnimLogo 0.8s ease-in-out 1;
animation: AnimLogo 0.8s ease-in-out 1;
    left: 0;
    top: 0;
    position: relative;
    text-decoration: none;
    width: 358px;
    height: 142px;
    display: block;background:#fff;
    /*background: #FFF url(../../charte/images/Picto_Logo.jpg) 5px center no-repeat;*/

    box-shadow: 0 -10px 15px rgba(0,0,0,.15);
    -webkit-box-shadow: 0 -10px 15px rgba(0,0,0,.15);
}

#Logo #Txt1 {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:    all 0.3s ease-in-out;
    -o-transition:      all 0.3s ease-in-out;
    -ms-transition:     all 0.3s ease-in-out;
    transition:         all 0.3s ease-in-out;
    color: #000;
    font:  37px/40px 'Abel', Arial,Helvetica,sans-serif;
    margin-top: 0;
    text-decoration: none;
    margin-left:15px;
   height: 141px;   width:350px;background: url(../../charte/images/Picto_Logo.jpg) 5px center no-repeat;
}

#Logo #Txt1 strong{
    color: #eb0100;
  

}

#Logo #Txt1 span{
    color: #000;
  font-size: 20px;
}

#Logo:hover #Txt1 {
    margin-left: 5px;
}



/***************** MENU TOP *****************/

#menuTop {
position:absolute;
top: 0;
right: 0;
z-index:10;
/*width:988px;*/

height:82px;
list-style:none;
}

#menuTop li {
position:relative;
float:left;
}



#menuTop a {
text-decoration:none;
font: 18px/82px 'Abel', Arial, Helvetica, sans-serif;
color:#eee;
text-align:center;
display:block;
height:82px;
overflow:hidden;
padding:0 15px;
text-transform: uppercase;
-webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
     transition: all 500ms ease-in-out;
}

#menuTop a:after {
content:"|";
font: 18px/82px 'Abel', Arial, Helvetica, sans-serif;
color:#eee;
position: absolute;
right: 0;
}

#menuTop li:last-child a:after {
content:"";
font: 18px/82px 'Abel', Arial, Helvetica, sans-serif;
color:#eee;
position: absolute;
right: 0;
}



#container #menuTop a:hover, #container #menuTop a.trigered, #container #menuTop a.rubrique_active {
color:#eb0100;
}

/***************** SOUS MENU */

#menuTop li ul {
list-style:none;
position:absolute;
width:330px;
top:-6000px;
left:-165px;
background:#fff;
border-top:4px solid #eb0100;
}

#menuTop li li {
float:none;
}

#container #menuTop li li a {
background:none;
width:auto;
position:relative;
height:auto;
font: 18px/25px 'Abel', Arial, Helvetica, sans-serif;
text-transform: none;
color:#000;
padding: 5px;
text-decoration:none;
text-align: left;
}

#container #menuTop li li a:hover {
background:#000;
color: #FFF;
}

/***************** MENU LEFT *****************/

#ContentMenuLeft {
width:250px;
margin: 35px 0;
float: left;
}

#menuLeft {
float:left;
width:100%;
list-style:none;
}

#menuLeft li a {
background:none;
text-decoration:none;
font:300 20px/20px 'Ubuntu', Arial, Helvetica, sans-serif;
color:#666;
display:block;
overflow:hidden;
padding:7px 10px;
text-transform: uppercase;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius: 8px;
margin: 1px 0;
}

#menuLeft li:hover a, #menuLeft li a.rubrique_active, #menuLeft li.inUse a {
background:#3b414a;
color:#fff;
}

/***************** SOUS MENU */

#menuLeft li ul {
list-style:none;
background:none;
}

#menuLeft li ul li a, #menuLeft li:hover ul li a, #menuLeft li.inUse ul li a {
background:none;
border:none;
text-decoration:none;
font:300 16px/18px 'Ubuntu', Arial, Helvetica, sans-serif;
color:#2C2F35;
display:block;
overflow:hidden;
padding:7px 10px;
border-width:0;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius: 8px;
}

#menuLeft li ul li a:hover, #menuLeft li ul li a.rubrique_active {
text-decoration:none;
color:#666;
background:none;
border-width:0;
background: #EFEFEF;
}

/***************** CONTENU *****************/

#contenu_bg {
float:left;
width:738px;
margin: 35px 0;
}

#contenu {
float:left;
width:718px;
padding:0 0 10px 20px;
}

#contenu-gauche {
float:left;
width:710px;
margin:0;
}

#contenu-droite {
float:left;
width:180px;
display: none;
}

/***************** BOUTON DE RETOUR EN HAUT DE PAGE *****************/

#btn_up {
position:absolute;
cursor: pointer;
z-index: 100;
top: -25px;
margin-left: -30px;
left:50%;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width:60px;
height:30px;
background:#191919 url(../../charte/images/btn_up.png) center center no-repeat;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}



#btn_up:hover {
background:#eb0100 url(../../charte/images/btn_up.png) center 8px no-repeat;
}



/*---obligatoire pour le footer---*/

/*---mettre <div class="clearer" id="clearFooter"></div>--*/

/*---apres la div contenu---*/

.clearer {
clear:both;
}

#clearFooter {
height:80px;/*--- = à la hauteur du footer ---*/

}

/***************** FOOTER *****************/

#containerfooter {
position:relative;
clear:both;
width:100%;
height:80px;
margin:-80px 0 0;
background:url(../../charte/images/bg-containerfooter.png) top center repeat-x;
}

#footer {
position:relative;
width:988px;
height:80px;
margin:0 auto;
font:9px/15px Arial, Helvetica, sans-serif;
color:#FFF;
}

#linkeo {
position:absolute;
left:0;
top:25px;
width:350px;
height:26px;
line-height:10px;
color:#ccc;
padding:4px 0 0;
}

#linkeo img {
float:left;
margin:4px 10px 0 10px;
}

#footer #linkeo a.linkeo {
text-decoration:none;
font:9px Arial, Helvetica, sans-serif;
color:#FFF;
}

#footer #linkeo a:hover.linkeo {
text-decoration:none;
color:#FFF;
}

/******************* STYLE FOOTER *****************/

#footer p {
font:300 12px/30px 'Ubuntu', Arial, Helvetica, sans-serif;
color:#fff;
text-align:right;
padding:25px 10px 0 0;
text-transform: uppercase;
}

#footer a:link, #footer a:visited {
text-decoration:none;
color:#fff;
}

#footer a:hover, #footer a:active {
text-decoration:underline;
color:#fff;
}

/********************* STYLES BANNIERES DE PUBS ***************/



#pub468 {
width:468px;
height:60px;
position:absolute;
top:5px;
left:50%;
margin-left:-234px;
z-index:100;
border: 1px solid #FFFFFF;
}

#pub468 img {
padding:0 !important;
margin:0 !important;
border:0 !important;
}

#pub180 {
width:180px;
height:150px;
float:right;
margin-left:15px;
border: 1px solid #FFFFFF;
}

#pub180 img {
padding:0 !important;
margin:0 !important;
border:0 !important;
}



/**/



#index #contenu-gauche  ul {background: #f8f8f8;
padding:18px 10px;}



#contenu #contenu-gauche a img { border: 1px solid #ccc; padding: 3px;}