/*#FFAA00*/







/*-Mise en page---------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/



/*1    em = 16px*/

/*0.875em = 14px*/

/*0.750em = 12px*/

/*0.625em = 10px*/

/*0.065em =  1px*/







body, html {

 line-height: 14px;

 font-family: 'Roboto', Verdana, Calibri, sans-serif;

 font-weight: normal;

 background: white;

 color: #333;

}







html {

 max-width: 1280px;

 width: 100%;

 /*font-size: 100%;*/ /*--Pas nécessaire normalement, mais permet de Contourner un bug Internet Explorer--*/

 font-size: 0.9em; /*EN TEST : Le 26/04/2014*/

 z-index: 1;

 padding: 0;

 margin: 0;

}





body { /*--Toute la surface de l'écran--*/

 max-width: 1280px;

 width: 100%;

 font-size: 0.9em; /* 14px=0.875em - Si pas fixé, ce doit être la police par défaut du navigateur qui s'applique */

 margin: 0;       /*--Impératif pour éviter l'héritage des valeurs par défaut du CMS--*/

 padding: 0;      /*--Impératif pour éviter l'héritage des valeurs par défaut du CMS--*/

 background: #ededed;

}





#page {

 max-width: 1280px;

 width: 80%;

 position: absolute;

 left: 10%;

 border: none;

 padding: 0;

 margin: 0;

 background: white;

}





#top {

 float: left;

 width: 100%;

 min-height: 9.2em;

 margin: 0;

 padding: 0;

 /*background-image: url(custom/pictures/topbg.png);*/

 background-image: none; /*--Supprimer l'image du default CSS--*/

 background: white;

}





#mid { /*--#mid fait 100% de #page et contient oppside, #side et #main--*/

 float: left;

 width: 100%;

 /*min-height: 450px;*/

 padding: 0; /*--20px de dégagement avant le pied de page à conserver ???--*/

 border: 0;

 margin: 0;

 background: white;

}





#main {

 /* width: 78%; (Valeur valide lorsque le module de navigation est affiché) */

 width: 96%;  /*--100% - 4% de padding--*/

 float: left;

 padding: 2%;

 margin: 0;

 border-width : 0;

 border-style: none;

 background: white

}





#side {

 width: 15%;

 float: right;

 margin:0;

 padding: 0;

}





#oppside {

 width: 15%;

 height: 100%;

 float: right;

 margin-top: 100px;

 padding: 0;

 background: orange;

}





#bot {

 width: 100%;

 padding: 0;

 margin: 30px 0 0 0;

 font-size: 0.8em;

 text-align: center;

 /*background-image: url(./custom/pictures/mainbg_TR.png);*/

 background-image: none; /*--Supprimer l'image du default CSS--*/

 background: white;

}





#break {

 clear: both;

}





/*----------------------------------------------------------------------------------------------*/

/*-Mise en forme des caractères et des listes---------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/





#top h1 {

 margin: 0;

 color: #333; /*CHARTE*/

 font-size: 1.4em;

}





#top h2 {

 margin: 0;

 color: #333; /*CHARTE*/

 font-size: 1.4em;

}





#spacer {

 float: right;

 width: 80%;

 height: 1px;

}





p {

 text-align: left;

}





p.left{

 text-align: left;

}





p.justify {

 text-align: justify;

}





p.center {

 text-align: center;

}





p.center_middle {

 text-align: center;

 vertical-align: middle;

}





p.pad1 {

padding: 0 1em 0 1em;

}





h1 {font-size: 1.4em; padding: 0; text-align: left; margin-bottom: 0.6em}

h2 {font-size: 1.3em; padding: 0; text-align: left; margin-bottom: 0.6em}

h3 {font-size: 1.2em; padding: 0; text-align: left; margin-bottom: 0.6em}

h4 {font-size: 1.1em; padding: 0; text-align: left; margin-bottom: 0.6em}

h5 {font-size: 1.0em; padding: 0; text-align: left; margin-bottom: 0.6em}





h1.text {font-size: 1.4em; color: #333; text-align: left; padding: 0; margin: 0}

h2.text {font-size: 1.3em; color: #333; text-align: left; padding: 0; margin: 0}

h3.text {font-size: 1.2em; color: #333; text-align: left; padding: 0; margin: 0}

h4.text {font-size: 1.1em; color: #333; text-align: left; padding: 0; margin: 0}

h5.text {font-size: 1.0em; color: #333; text-align: left; padding: 0; margin: 0}





a {

 color: #6495ED;

 text-align: left;

 text-decoration: none;

}





a.bottom {

 font-size: 1.1em;

}





a:hover {

 color: #FF8C00;

}





ul, ol {

 list-style-type: none;

}





li {

 list-style-image: url('custom/pictures/puce_orange_TR.png');

 list-style-position: outside;

 background-repeat: no-repeat;

 padding:0;

 margin:0;

}





ul.bullet li {

 list-style: none;

 list-style-type: none;

}





span.orange {

 color: #FF8C00;

 font-weight: bold;

}







/*-Mise en forme des DIV------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/





div.pad05 {

padding: 1em 0.5em 0.5em 0.5em;

}





div.pad1 {

padding: 1em;

}





div.pad2 {

padding: 1em 2em 1em 2em;

}



div.pad3 {

padding: 1em 3em 1em 3em;

}





div.pad5_tb {     /*Top et Bottom*/

padding: 5em 0 5em 0;

}





#table {

display: table;

width: 100%;

border-spacing: 0 0; /*Espacement des cellules : Horizontal & Vertical*/

border-collapse: collapse;

}





.table {

display: table;

width: 100%;

border-spacing: 0 0; /*Espacement des cellules : Horizontal & Vertical*/

border-collapse: collapse;

}





#table95_right {

display: table;

border-spacing: 0px 0px; /*Espacement des cellules : Horizontal & Vertical*/

width: 95%;

float: right;

}





#table30_right {

display: table;

border-spacing: 0px 0px; /*Espacement des cellules : Horizontal & Vertical*/

width: 30%;

float: right;

}





#row {

display: table-row;

border-collapse: collapse;

width: 100%;

}





.row {

display: table-row;

border-collapse: collapse;

width: 100%;

}





/*Plus clair : B7CCFE*/

.zzblueback {

background: #dddddd;                  /*Couleur de remplacement pour les navigateur incompatibles*/

background:    -moz-linear-gradient(bottom right, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(bottom right, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(bottom right, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(bottom right, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(bottom right, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





/*Opacité=1 Transparence=0 Séparateur(dot)=0.5*/

.blueback {

/*Couleur de remplacement pour les navigateur incompatibles*/

background: #dddddd;

/* For Firefox 3.6 to 15  */

background:    -moz-linear-gradient(bottom right, rgba(183,204,255,1) 10%, rgba(183,204,255,0) 60%);

/* For Safari 5.1 to 6.0  */

background: -webkit-linear-gradient(bottom right, rgba(183,204,255,1) 10%, rgba(183,204,255,0) 60%);

/* For Opera 11.1 to 12.0 */

background:      -o-linear-gradient(bottom right, rgba(183,204,255,1) 10%, rgba(183,204,255,0) 60%);

/* For IE ? to ?          */

background:     -ms-linear-gradient(bottom right, rgba(183,204,255,1) 10%, rgba(183,204,255,0) 60%);

/* Standard syntax        */

background:         linear-gradient(bottom right, rgba(183,204,255,1) 10%, rgba(183,204,255,0) 60%);

}







#cell {

display: table-cell;

width: 100%;

border-width: 0;

border-style: none;

border-collapse: collapse;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell_noback {

display: table-cell;

width: 100%;

border-width: 0;

border-style: none;

border-collapse: collapse;

text-align: left;

vertical-align: top;

}





.cell {

display: table-cell;

width: 100%;

border-width: 0;

border-style: none;

border-collapse: collapse;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





.xy {

border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

/*border-collapse: collapse;*/

text-align: center;

vertical-align: middle;

}





#cell_xy {

display: table-cell;

border-width: 0;

border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

border-collapse: collapse;

text-align: center;

vertical-align: middle;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell_xy_noback {

display: table-cell;

border-width: 0;

border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

/*border-collapse: collapse;*/

text-align: center;

vertical-align: middle;

}





.cell_xy {     /* Inutile remplacer par class="cell xy" */

display: table-cell;

border-width: 0;

border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

/*border-collapse: collapse;*/

text-align: center;

vertical-align: middle;

}





#cell95_title {

display: table-cell;

width: 95%;

height: 25px;

padding: 0 0 0 1em;

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0 0 5em 0;

text-align: left;

vertical-align: middle;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell95_title_noback {

display: table-cell;

width: 95%;

height: 25px;

padding: 0 0 0 1em;

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0 0 5em 0;

text-align: left;

vertical-align: middle;

}





#cell90_title_noback {

display: table-cell;

width: 90%;

height: 30px;

border-style: none;

padding: 0;

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: middle;

}





#cell60 {

display: table-cell;

width: 60%;

/*padding: 0;*/

border-width: 0;

border-style: solid;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell60_noback {

display: table-cell;

width: 60%;

/*padding: 0;*/

border-width: 0;

border-style: solid;

border-collapse: separate;

margin: 0;

text-align: left;

vertical-align: top;

}





#cell60_xy {

display: table-cell;

width: 60%;

/*padding: 0;*/

border-width: 0;

border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

border-collapse: collapse;

margin: 0;

text-align: center;

vertical-align: middle;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell50 {

display: table-cell;

width: 50%;

/*padding: 0;*/

border-width: 0;

border-style: solid;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell50_noback {

display: table-cell;

width: 50%;

/*padding: 0;*/

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

}





.cell50 {

display: table-cell;

width: 50%;

padding: 0;

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell50_xy {

display: table-cell;

width: 50%;

/*padding: 0;*/

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;  /*solid nécessaire pour que vertical-align fonctionne ?*/

text-align: center;

vertical-align: middle;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell50_xy_noback {

display: table-cell;

width: 50%;

border-width: 0;

border-style: solid;

border-collapse: collapse;  /*solid nécessaire pour que vertical-align fonctionne ?*/

text-align: center;

vertical-align: middle;

}





#cell45 {

display: table-cell;

width: 45%;

/*padding: 0;*/

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell45_noback {

display: table-cell;

width: 45%;

/*padding: 0;*/

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

}







.cell45 {

display: table-cell;

width: 45%;

border-width: 0;

border-style: none;

border-collapse: collapse;

text-align: left;

vertical-align: top;

}







#cell40 {

display: table-cell;

width: 40%;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/

}





#cell40_noback {

display: table-cell;

width: 40%;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: left;

vertical-align: top;

}





.cell40 {

display: table-cell;

width: 40%;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: left;

vertical-align: top;

}





#cell40_xy {

display: table-cell;

width: 40%;

/*padding: 0;*/

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell40_xy_noback {

display: table-cell;

width: 40%;

/*padding: 0;*/

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

}





#cell30 {

display: table-cell;

width: 30%;

/*padding: 0;*/

border-width: 0;

border-style: solid;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

/*background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);*/

/*background-repeat: no-repeat;*/

/*background-position: right bottom;*/



background: #dddddd;

background:    -moz-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Firefox 3.6 to 15  */

background: -webkit-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Safari 5.1 to 6.0  */

background:      -o-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For Opera 11.1 to 12.0 */

background:     -ms-linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* For IE ? to ?          */

background:         linear-gradient(330deg, #97ACFE 10%,#FFFFFF 50%);  /* Standard syntax        */

}





#cell30_noback {

display: table-cell;

width: 30%;

/*padding: 0;*/

border-width: 0;

border-style: solid;

border-collapse: collapse;

margin: 0;

text-align: left;

vertical-align: top;

}





#cell10_img {

display: table-cell;

width: 10%;

padding: 0 0 0 5%;

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0;

text-align: center;

vertical-align: middle;

background-image: url(custom/pictures/reflet_oxygene.png);

}





#cell5_title_noback {

display: table-cell;

width: 5%;

height: 25px;

padding: 0 0 0 15px;

border-width: 0;

border-style: none;

border-collapse: collapse;

margin: 0 0 0 0;

text-align: center;

vertical-align: middle;

}





#container {

width: 100%;

/*padding: 0;*/

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

}





#container_masking {

display: block;

width: 100%;

/*padding: 0;*/

margin: 0;

border-width: 0;

border-style: solid;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

}



#container_masking .masked {

display: none;

}





#container_masking:hover a {

display: inline;

color: black;

}





#block {

padding: 0; /* aération interne des blocs */

/*margin: 0 10px;*/  /* espacement horizontal entre les blocs */

width: 100%;

/*border: solid;*/

display: inline-block;

vertical-align: middle;

text-align: justify; /* on rétablit l'alignement du texte */

}







/*-Positionnement d'éléments divers---------------------------------------------------------------*/



#logo {

 display: table-cell;

 float: left;

 width: 25%;

 text-align: center;

 border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

 border-width: 0;

 vertical-align: middle;

}





#titre {

 display: table-cell;

 float: left;

 width: 50%;

 text-align: center;

 border-style: solid; /*Obligatoire pour que le vertical-align soit effectif*/

 border-width: 0;

 vertical-align: middle;

}





img.deco {

width: 70%;

border-style: none;

}





#masking { /*Usage : positionner une DIV et y insérer un conteneur de type block avec l'ID #masked */

display: block;

}





#masking .masked {

display: none;

}





#masking:hover a {

display: inline;

color: black;

}





#popup {

width: 30%;

padding: 1em;

border-width: 0;

border-style: none;

margin: 0;

text-align: justify;

vertical-align: middle;

background-image: url(custom/pictures/Fond_Colonnes_Angle_BR.png);

background-repeat: no-repeat;

background-position: right bottom;

}







#menuHoriz { /**Position de la balise div contenant le menu horizontal**/

 /*ATTENTION : Seuls les éléments positionnés peuvent avoir un attribut z-index, c'est à dire relative, absolute, fixed*/

 /*Le menu doit rester dans body car dans page il est tronqué ne pouvant pas déborder du contenant*/

 z-index: 10;

 position: absolute;

 top: 80px;

 left: 25%;

 width: 75%;

}





/*-Menus déroulants-----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/





#menuDeroulant { /*Positionnement de l'origine du menu - Appliqué à UL racine*/

 float: right;

 width: 100%;

 padding: 0;

 border-width: 0;

 margin: 0;

}  





#menuDeroulant ul {

 /*height: 15px;*/ /*Doit être égale à la hauteur des lignes*/

}





#menuDeroulant li { /*Positionnement des balises li du menu de niveau 1 - UL racine*/

 float: left;

 width: 20%;

 /*height: 25px;*/ /*Hauteur des lignes de la partie déroulante*/

 border-width: 1px;

 margin: 0;

 font-weight: bold;

 list-style-image: none; /*Pas d'affichage de puces*/

 } 





#menuDeroulant li a {

 padding: 5px; /*Positionnement des liens de toutes situations (link, visited, hover...) dans les balises LI*/

 /*text-size + 2 x padding = hauteur de ligne des sous-menus*/

}





#menuDeroulant li a:link, /*Conversion des lignes en blocks et réglage de la hauteur*/

#menuDeroulant li a:visited {

 display: block;

 color: #333; /*CHARTE : Couleur du texte des lignes de menu principal*/

 background: #ededed;

 background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);

 background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

 background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

 background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

 background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);



 /*background: transparent url("./custom/pictures/sous_menu_TR.png");*/  /*L'image de fond au repos se règle ici*/

 border-left: solid 1px #2F3540;

}





#menuDeroulant li a:hover {

 /*color: #FFFFFF;*/ /*Couleur du texte des liens lors du survol*/

 background: transparent url("./custom/pictures/sous_menu_hover_TR.png");

}





#menuDeroulant li a:active {

 color: #FFFFFF; /*CHARTE : Couleur du texte des lignes de menu lors du clic*/

}





/*-Sous-menus---------------------------------------------------------------*/





#menuDeroulant .sousMenu { /* Appliqué aux balises UL du niveau 2 */

 display: none; /* Masquage des lignes de sous menus */

}       





#menuDeroulant .sousMenu li { /*Appliqué aux balises LI du niveau 2*/

 width: 100%;

 height: 24px; /*Hauteur des lignes de la partie déroulante, hauteur des lignes + padding haut et bas*/

 border-top: 1px solid transparent;

 border-right: 1px solid transparent;

 list-style-position: inside; /* inside, outside ou inherit, puce dans ou hors le flux de contenu */

}





#menuDeroulant .sousMenu li a {

 /*padding: 0.5em 0 0 0.3em;*/

}





#menuDeroulant .sousMenu li a:link, /*l'ordre est Link - Visited - Hover - Active (LoVe HAte)*/

#menuDeroulant .sousMenu li a:visited { /*Héritage de #MenuDeroulant*/

 width: 300%;

}





#menuDeroulant .sousMenu li a:hover {

 color: #000032; /*Couleur des liens de sous-menu lors du survol*/

 background: transparent url("custom/pictures/sous_menu_hover_TR.png") no-repeat;

}	





#menuDeroulant .sousMenu li a:active {

 color: #FFFFFF; /*CHARTE : Couleur du texte des lignes de sous-menu lors du clic*/

}





#menuDeroulant li:hover > .sousMenu {

 display: block;

}







/*-Images avec transitions de survol (transurfing) ---------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/



 /*_____

 Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant :



    -o- pour Opera

    -moz- pour Gecko (Mozilla)

    -webkit- pour Webkit (Chrome, Safari, Android...)

    -ms- pour Microsoft (Internet Explorer)

    -khtml- pour KHTML (Konqueror)

	

_____*/





div.transurfing {

min-height:320px;

font-weight:bold;

padding: 4px 4px 0 4px;

color: #333;

background: #ededed;

background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);

background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);

background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);

border-radius: 4px;

/*border-top: 1px solid #ccc;*/

}





p.transurfing {

text-align:center;

vertical-align:middle;

min-height: 40px;

padding: 0 2% 0 2%;

/*margin: 0 4% 0 4%;*/

}





p.transurfing-title {

font-size:130%;

text-align:center;

vertical-align:middle;

min-height: 70px;

padding: 5% 2% 0 2%;

/*margin: 0 4% 0 4%;*/

}





ul.transurfing {

width 100%;

height:auto;

margin: 0; /*init à conserver pour bloquer des héritages intempestifs*/

padding:0; /*init à conserver pour bloquer des héritages intempestifs*/

}



li.transurfing {

list-style:none;

float:left;

/*width: 23%;*/

width: 29%;

height:auto;

/*margin: 0 1% 0 1%;*/ /*init à conserver pour bloquer des héritages intempestifs*/

margin: 0 2% 0 2%; /*init à conserver pour bloquer des héritages intempestifs*/

padding: 0; /*init à conserver pour bloquer des héritages intempestifs*/

}



/*

ul.transurfing li:nth-child(4).transurfing  {

clear:right;

}

*/





img.transurfing {

position:relative;

z-index:1;

width: 100%;

margin: 0;

box-shadow: 0 0 3px black;

-webkit-transition:all .5s cubic-bezier(.6,2,.4,1);

-moz-transition:all .5s cubic-bezier(.6,2,.4,1);

-ms-transition:all .5s cubic-bezier(.6,2,.4,1);

-o-transition:all .5s cubic-bezier(.6,2,.4,1);

transition:all .5s cubic-bezier(.6,2,.4,1);

}





ul li:hover img.transurfing {

z-index:5;

box-shadow:0 0 10px black;

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

}





ul:hover li:not(:hover) img.transurfing {

-webkit-filter: grayscale(1) blur(3px);

-moz-filter: grayscale(1) blur(3px);

-ms-filter: grayscale(1) blur(3px);

-o-filter: grayscale(1) blur(3px);

filter: grayscale(1) blur(3px);

}





/*-Boutons avec liens et transitions de survol et activation -----------------------------------*/

/*----------------------------------------------------------------------------------------------*/





div.aligncenter { /*Pour contenir les div.button et pouvoir les centrer grâce à leur attribut inline-block*/

text-align: center;

}





div.button {

display:inline-block; /*vertical-align ne fonctionne que sur des éléments inline et se réfère au line-height*/

vertical-align: middle;

width: 98%;            /*A réduire dans le code page si nécessaire*/

height: auto;		/*hauteur à fixer dans le code page pour les boutons à une seule ligne*/

line-height: 1;		/*hauteur à fixer dans le code page pour les boutons à une seule ligne*/

padding: 5px;

margin: 0;

text-align: center;

color: white;



background: #444;

background: -webkit-linear-gradient( #555, #2C2C2C);

background:    -moz-linear-gradient( #555, #2C2C2C);

background:     -ms-linear-gradient( #555, #2C2C2C);

background:      -o-linear-gradient( #555, #2C2C2C);

background:         linear-gradient( #555, #2C2C2C);



border-radius: 4px;

text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);

box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);

}



div.button:hover {

 color: orange;

 background: #555;

 background: -webkit-linear-gradient( #777, #333);

 background:    -moz-linear-gradient( #777, #333);

 background:     -ms-linear-gradient( #777, #333);

 background:      -o-linear-gradient( #777, #333);

 background:         linear-gradient( #777, #333);

}



div.button:active {

 color: orange;

 background: #555;

 background: -webkit-linear-gradient( #555, #2C2C2C);

 background: -moz-linear-gradient( #555, #2C2C2C);

 background: -ms-linear-gradient( #555, #2C2C2C);

 background: -o-linear-gradient( #555, #2C2C2C);

 background: linear-gradient( #555, #2C2C2C);

 box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);

}