html 
{ 
margin: 0;
padding: 0;

}

body {
background-image: url("../images/site/bg.jpg");
position : relative;
width : 100%;
height : 100%; 
margin : 0;
margin-left: auto;
margin-right: auto;
}


/* -------------------------------------
#page
------------------------------------- */

#page {
position : relative;
background-image: url("../images/site/cadre.png") ;
width: 652px ;
height: 670px ;
margin-left: auto;
margin-right: auto;
}

#viewer {
   position: relative;
   width: 186px;
   height: 146px;
   border: 5px solid #ffffff;
   margin-left: 10px;
   margin-top: 20px;
   }

#cadreviolet{
background-image: url("../images/site/cadreviolet.png") ;
   position: relative;
   width: 178px;
   height: 73px;
   float : left;
   margin-left : 8px;
   margin-top: 10px;
   font-size: 11px;
   font-family: Trebuchet MS ;
   font-weight:normal;
   text-align : center;
   padding : 10px;
   color: white;
   line-height : 20px;


   }


/* -------------------------------------
#header
------------------------------------- */


#header {
position : relative;
width: 630px ;
height : 227px;
margin-left: auto;
margin-right: auto;
top : 11px;
}
   
   
/* -------------------------------------
#FOOTER
------------------------------------- */

#bottom {
position : relative;
background-image: url("../images/site/bande_bottom.jpg") ;
width: 630px ;
height : 31px;
margin-left: auto;
margin-right: auto;
bottom : -370px;
text-align :center;
font-size: 10px;
font-family: Trebuchet MS ;
color: white;
font-weight:bold;
line-height : 45px;
}

/* -------------------------------------
#TEXTE
------------------------------------- */

#titre {
position : relative;
width: 600px ;
margin-left: auto;
margin-right: auto;
padding-top : 5px;
}

#texte {
position : relative;
width: 360px ;
float: right;
text-align : justify;
margin-right: 7px;
color: #ffffff;
font-size: 12px;
font-family: Trebuchet MS ;
font-weight:normal;
line-height : 25px;
padding-top : 20px;
}

#texte2 {
position : relative;
width: 420px ;
float: left;
text-align : justify;
color: #ffffff;
margin-left: 15px;
font-size: 12px;
font-family: Trebuchet MS ;
font-weight:normal;
padding-top : 10px;
}


a:link {  font-family:verdana, arial;  color:#ffffff; text-decoration:none }
a:visited { font-family:verdana,arial;  color:#ffffff; text-decoration:none }
a:hover {  font-family:verdana,Arial; font-size:10px; color:#B7429C; text-decoration:none }


h3 {
   color: #ffffff;
   font-size: 20px;
   font-family: Trebuchet MS ;
   margin:0;
   padding:0;
   font-weight:bold;
}



h2 {
   color: #B7429C;
   font-size: 14px;
   font-family: Trebuchet MS ;
   margin:0;
   padding:0;
   font-weight:normal;
}


h1 {
   color: #B7429C;
   font-size: 15px;
   font-family: Trebuchet MS ;
   margin:0;
   padding:0;
   font-weight:normal;
   line-height : 12px;
}


b {
   color: #B7429C;
}

li {
 background-image:url("../images/site/puce.jpg");
font-family: Trebuchet MS,Verdana, Arial, Helvetica, Geneva, sans-serif;
 font-size: 100%;
 color: white;
 list-style-type:none;
 background-repeat:no-repeat;
 background-position:0% 10%;
 padding-left:20px;
 line-height : 18px;
 margin-left : 0px;
 text-align : left;
} 


/* -------------------------------------
#navigation
------------------------------------- */
#menu {
position : relative;
background-image: url("../images/site/bande_menu.jpg") ;
width: 630px ;
height : 31px;
margin-left: auto;
margin-right: auto;
top : 12px;

}

.menu1 {
position : absolute;
margin-left : 109px;
}
.menu2 {
position : absolute;
margin-left : 189px;
}
.menu3 {
position : absolute;
margin-left : 269px;
}
.menu4 {
position : absolute;
margin-left : 349px;
}
.menu5 {
position : absolute;
margin-left : 429px;
}
.menu6 {
position : absolute;
margin-left : 509px;
}

.menuver1 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
text-align : left;
margin-left : 109px;
padding-top : 7px;
}
.menuver2 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
text-align : left;
margin-left : 189px;
padding-top : 7px;
}

.menuver3 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
text-align : left;
margin-left : 269px;
padding-top : 7px;
}

.menuver4 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
text-align : left;
margin-left : 349px;
padding-top : 7px;
}

.menuver5 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
margin-left : 429px;
padding-top : 7px;
}

.menu6 {
background-image: url("../images/site/separ_vert.jpg") ;
position : absolute;
width: 2px ;
height : 24px;
text-align : left;
margin-left : 509px;
padding-top : 7px;
}

/* -------------------------------------
#ROLLOVER
------------------------------------- */

/* -------
#MENU 1
------- */
.menu11
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;   
}

.menu11 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 82px ;
   height:31px;
   text-decoration: none ;
   background: url('../images/boutons/accueil.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

.menu11 a:hover
{
   background: url('../images/boutons/accueil.jpg') no-repeat 0 -31px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#MENU 2
------- */

.menu12
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}


.menu12 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 82px ;
   height:31px;
   text-decoration: none ;
   background: url('../images/boutons/references.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

.menu12 a:hover
{
   background: url('../images/boutons/references.jpg') no-repeat 0 -31px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#MENU 3
------- */
.menu13
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}


.menu13 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 82px ;
   height:31px;
   text-decoration: none ;
   background: url('../images/boutons/savoirfaire.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

.menu13 a:hover
{
   background: url('../images/boutons/savoirfaire.jpg') no-repeat 0 -31px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#MENU 4
------- */

.menu14
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}


.menu14 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 82px ;
   height:31px;
   text-decoration: none ;
   background: url('../images/boutons/equipe.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

.menu14 a:hover
{
   background: url('../images/boutons/equipe.jpg') no-repeat 0 -31px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#MENU 5
------- */

.menu15
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.menu15 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 82px ;
   height:31px;
   text-decoration: none ;
   background: url('../images/boutons/contact.jpg') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.menu15 a:hover
{
   background: url('../images/boutons/contact.jpg') no-repeat 0 -31px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}


/* ------------------------
#IMAGES EQUIPE
------------------------ */

#equipe {
position : relative;
margin-left: auto;
margin-right: auto;
margin-top : 15px;
width : 420px;
}

.equipe1 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe1.png') 0 -132px ;
}
.equipe2 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe2.png') 0 -132px ;
}
.equipe3 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe3.png') 0 -132px ;
}
.equipe4 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe4.png') 0 -132px ;
}
.equipe5 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe5.png') 0 -132px ;
}
.equipe6 {
position : relative;
float : left;
width: 140px ;
height:132px;
background: url('../images/equipe/cadre-equipe6.png') 0 -132px ;
}

/* -------
#EQUIPE 1
------- */

.equipe11
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe11 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe1.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe11 a:hover
{
   background: url('../images/equipe/cadre-equipe1.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 2
------- */

.equipe12
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe12 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe2.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe12 a:hover
{
   background: url('../images/equipe/cadre-equipe2.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 3
------- */

.equipe13
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe13 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe3.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe13 a:hover
{
   background: url('../images/equipe/cadre-equipe3.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 4
------- */

.equipe14
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe14 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe4.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe14 a:hover
{
   background: url('../images/equipe/cadre-equipe4.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 5
------- */

.equipe15
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe15 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe5.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe15 a:hover
{
   background: url('../images/equipe/cadre-equipe5.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 6
------- */

.equipe16
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe16 a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 140px ;
   height:132px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe6.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe16 a:hover
{
   background: url('../images/equipe/cadre-equipe6.png') no-repeat 0 -132px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}


   
   /* ------------------------
#IMAGES EQUIPEMINI
------------------------ */


#equipemini {
position : relative;
width : 132px;
}

.equipephoto {
position : absolute;
margin-left: 440px;
margin-top : 30px;
left : 20px;

}

.equipe1mini {
position : relative;
float: right;

}
.equipe2mini {
position : relative;
float: right;
}
.equipe3mini {
position : relative;
float: right;
}
.equipe4mini {
position : relative;
float: right;

}
.equipe5mini {
position : relative;
float: right;
}
.equipe6mini {
position : relative;
float: right;
}
   
/* -------
#EQUIPE 1 MINI
------- */

.equipe11mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe11mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe1mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe11mini a:hover
{
   background: url('../images/equipe/cadre-equipe1mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 2 MINI
------- */

.equipe12mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe12mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe2mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe12mini a:hover
{
   background: url('../images/equipe/cadre-equipe2mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 3 MINI
------- */

.equipe13mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe13mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe3mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe13mini a:hover
{
   background: url('../images/equipe/cadre-equipe3mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 4 MINI
------- */

.equipe14mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe14mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe4mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe14mini a:hover
{
   background: url('../images/equipe/cadre-equipe4mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 5 MINI
------- */

.equipe15mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe15mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe5mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe15mini a:hover
{
   background: url('../images/equipe/cadre-equipe5mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

/* -------
#EQUIPE 6 MINI
------- */

.equipe16mini
{
   display: block ;
   margin: 0 ;
   padding: 0 ;
   text-align:center;
}

.equipe16mini a
{
   display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
   width: 42px ;
   height:40px;
   text-decoration: none ;
   background: url('../images/equipe/cadre-equipe6mini.png') no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */   
}

.equipe16mini a:hover
{
   background: url('../images/equipe/cadre-equipe6mini.png') no-repeat 0 -40px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}


/* -------------------------------------
#DIAPO
------------------------------------- */
   #slider {
      position: relative;
      width: 600px;
      height: 250px;
      overflow: hidden;
      border: 1px solid #000;
      margin-left: auto;
      margin-right: auto;
      top : 15px;
   }
   #slider .slide {
      position: absolute;
      top: 0px;
      height: 333px;
      width: 500px;
      background: #000;
      overflow: hidden;
      border-left: #000 solid 1px;
      cursor: auto;
   }
   #slider .title   {
      color: #B7429C;
      font-weight: bold;
      font-size: 1.2em;
      margin-right: 1.5em;
      text-decoration: none;
   }
   #slider .backgroundText {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 100%;
      background: #000;
      filter: alpha(opacity=40);
      opacity: 0.8;
   }
   #slider .text {
      position: absolute;
      top: 1%;
      top: 100%;
      color: #FFF;
      font-family: verdana, arial, Helvetica, sans-serif;
      font-size: 0.6em;
      text-align: justify;
      width: 360px;
      left: 10px;
      padding-top: 7px;
   }
   #slider .diapo {
      position: absolute;
      filter: alpha(opacity=100);
      opacity: 1;
      visibility: hidden;
   }


   
/* -------------------------------------
#FORMULAIRE
------------------------------------- */
#contenu_droite {
   position:relative;
   width:400px;
   text-align:justify;
   margin-left: auto;
   margin-right: auto;
}

#titre_page {
   color:white;
   font-family: Arial;
   font-weight:bold;
   float:right;
   
}


/* DIV général contenant l'ensemble du FORMULAIRE */
div.formulaire_general {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   width: 370px;
   margin-left: auto;
   margin-right: auto;
}
/* DIV contenant l'ensemble des ERREURS de saisie */
div.formulaire_erreursSaisie {
   border-style: solid;
   border-width: 0px;
   border-color: #ccc;
   background-color: #eee;
   padding: 5px;
}
/* DIV pour chaque LIGNE D'ERREUR de saisie */
div.formulaire_erreursSaisie_ligne {
}

/* Tableau de champs général */
table.formulaire_table {
   border-style: solid;
   border-width: 1px;
   border-color: #999;
   /*background-color: #999;*/
   margin-top : 10px;
   width: 100%;
   
}

/* #transparent{
   position : absolute;
   background-color: #999;
   width: 370px;
   height : 285px;
   filter.: alpha;
   opacity: 0.2;
   top : 339px;
   left : 140px;
}
#transparent2{
   position : absolute;
   background-color: #666;
   width: 356px;
   height : 250px;
   filter.: alpha;
   opacity: 0.3;
   top : 344px;
   left : 148px;
}
*/
/* GROUPE de champs : ligne entête de table */
.formulaire_table th {
   background-color: #ccc;
   color: #333;
   padding: 5px;
   text-align: center;
   font-weight: bold;
}
/* GROUPE de champs : en FIELSET */
.formulaire_table fieldset {
   border-style: solid;
   border-width: 1px;
   border-color: #666;
   
   
}
/* LEGENDE du fielset ci-dessus */
.formulaire_table legend {
   font-weight: bold;
   padding: 5px;
}
/* LIGNES de SÉPARATION entre deux lignes de champs */
.formulaire_cell_espacement {
   height: 3px;
}

/* LIBELLE des champ dans le formulaires */
/*---------------------------------------*/
   /* Dans TOUS les cas */
   td.formulaire_nom_champ, td.formulaire_nom_champ_erreur {
      width: 100px;
      padding: 0px 5px 0px 10px;
      text-align: right;
      font-weight:light; 
      font-family:arial; 
      font-size:12px; 
      color:#ffffff; 
      text-decoration:none
   }
   /* Normal */
   td.formulaire_nom_champ {
   }
   /* En cas d'ERREUR sur le champ */
   td.formulaire_nom_champ_erreur {
      color: #f00;
      font-weight: bold;
   }

/* CELLULES qui contiennent les CHAMPS */
/*-------------------------------------*/
   /* Dans TOUS les cas */
   td.formulaire_td_champ, td.formulaire_td_champ_erreur {
      padding-right: 10px;
   }
   /* Normal */
   td.formulaire_td_champ {
   }
   /* En cas d'ERREUR sur le champ */
   td.formulaire_td_champ_erreur {
   }

/* Champs dans les formulaires : INPUT, TEXTAREA */
/*-----------------------------------------------*/
   /* Dans TOUS les cas */
   .formulaire_champ, .formulaire_champ_erreur {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      text-align: left;
      width: 200px;
      padding-top: 2px;
      padding-right: 3px;
      padding-bottom: 2px;
      padding-left: 3px;
      /* Attention, jouer sur l'opacité ICI (sur les INPUT) peut provoquer des problèmes d'affichage de SELECT sous IE */
      /*filter: alpha(opacity=80);
      opacity: 0.8;*/
   }
   /* Normal */
   .formulaire_champ {
      background-color: #eee;
      color: #000;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
   }
   /* En cas d'ERREUR sur le champ */
   .formulaire_champ_erreur {
      background-color: #fcc;
      border-style: solid;
      border-width: 1px;
      border-color: #f99;
   }

/* SUFFIXES : texte qui s'ajoute après les champs (€, kg, /jour...) */
span.formulaire_champ_suffixe, span.formulaire_champ_suffixe_erreur {
   font-style: italic;
}

/* Cellules réunies (colspan) : dans TOUS les cas */
td.formulaire_td_colspan, td.formulaire_td_colspan_erreur {
   padding-top: 0px;
   padding-right: 10px;
   padding-bottom: 0px;
   padding-left: 10px;
}

/* Cellule TD du Titre d'un objet TABLEAU */
td.formulaire_tableau_titre {
   font-style: italic;
}
/* Cellule TH d'un objet TABLEAU au croisement des en-têtes de lignes/colonnes */
th.formulaire_tableau_coin {
   background-color : transparent;
}
/* EN-TETE TH de COLONNES d'un objet TABLEAU */
th.formulaire_tableau_colonne_entete {
   background-color: #ccc;
}
/* EN-TETE TH de LIGNES d'un objet TABLEAU */
th.formulaire_tableau_ligne_entete {
   background-color: #ccc;
}

/* TD du Bouton "ENVOYER" du formulaire */
td.formulaire_td_envoyer {
   padding-right: 5px;
   text-align: right;

}
/* BOUTON "ENVOYER" du formulaire */
input.formulaire_envoyer {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: #aaa;
   color: #000;
   border: solid 1px #999;
   cursor: pointer;
   margin: 5px;
      


}

/* TEXTE EN BAS du formulaire concernant les astérisques */
.formulaire_note {
   text-align: center;
   font-style: italic;
}

/* DIV du message une fois le MESSAGE ENVOYÉ */
div.formulaire_msgRetour {
   background-color: #eee;
   color: #000;
   text-align: center;   
   padding: 10px;
   margin: 50px auto;
   border: solid 1px #999;
}
/* Lien "RETOUR" un fois le message envoyé */
a.formulaire_msgRetour_lien {
   color: #000;
   font-weight: bold;
}

/**************/
/* CALENDRIER */
/**************/

.div_calend {
   position: absolute;
   margin-left: 0px;
   margin-top: -80px;
   display: none;
   z-index: 100;
}
.div_calend .tab_general {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   background-color: #fff;
   text-align: center;
   width: 280px;
   border: solid 1px #333;
}
.div_calend .cell_mois {
   background-color: #ccc;
   font-weight: bold;
   text-align: center;
   color: #000;
   width: 60%;
   padding: 3px;
}
.div_calend .cell_fleche {
   background-color: #ccc;
   text-align: center;
   padding: 3px;
}
.div_calend .cell_fleche a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #333;
   font-weight: bold;
   text-decoration: none;
}
.div_calend .cell_nomjour {
   font-size: 10px;
   color: #000;
   background-color: #ddd;
   text-align: center;
   vertical-align: middle;
   border-top: solid 1px #ddd;
   border-right: solid 1px #aaa;
   border-bottom: solid 1px #aaa;
   border-left: solid 1px #ddd;
   padding: 3px;
}
.div_calend .cell_jour {
   font-size: 10px;
   color: #000;
   background-color: #eee;
   text-align: center;
   vertical-align: middle;
   border-top: solid 1px #fff;
   border-right: solid 1px #ddd;
   border-bottom: solid 1px #ddd;
   border-left: solid 1px #fff;
}
.div_calend .cell_jour:hover {
   border-top: solid 1px #ccc;
   border-right: solid 1px #eee;
   border-bottom: solid 1px #eee;
   border-left: solid 1px #ccc;
}
.div_calend .cell_jour_vide {
   background-color: #f8f8f8;
}
.div_calend .cell_jour_a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #333;
   text-decoration: none;
   text-align:center;
   display: block;
   width:inherit;
   padding: 3px;
}
.div_calend .cell_jour_a:hover {
   background-color: #fff;
   color: #666;
   font-weight:bold;
}
.div_calend .lien_fermer {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   color: #fff;
   background-color: #333;
   text-decoration: none;
   padding: 2px;    /** voir note de l'attribut taille **/
   display: block;  /** on met un display: block car le margin-top ne sera pas pris en compte pour un display in-line (par défaut) **/
   width: 70px;    /** display: block implique une taille de 100%. Il faut donc mettre une taille qui DOIT être cohérente avec le padding **/
   text-align: center;
}

/* NE_PAS_TOUCHER_CETTE_LIGNE_POUR_MAIL_PAGE_CONTACT_FIN */
 /*-------------------------------------------------------*
  *----        CSS PAGE CONTACT  FIN                  ----*
  *-------------------------------------------------------*/
  
  
  /* -------------------------------------
#SAVOIR FAIRE
------------------------------------- */
  
  
   #pagesavoir {
      position: relative;
      width: 600px;
      height: 250px;
      margin-left : auto;
      margin-right : auto;
      top : 45px;
      overflow : hidden;
   }
   #screen {
      position: relative;
      top: 0%;
      width: 600px;
      height: 250px;
      overflow:hidden;
      margin-left : auto;
      margin-right : auto;
      
   
   }
   #screen .gridSpan {
      position: absolute;
      overflow: hidden;
      margin-left : auto;
      margin-right : auto;
   }
   #screen .pageHTML {
      position: relative;
      color: #eee;
      font-family: verdana;
      font-size: 0.8em;
      width: 270px;
      height: 150px;
      cursor: pointer;

   }

   .abs {
      position: relative;
   }
   #screen .pageHTML H2 {
      position: relative;
      margin: 8px;
      cursor: pointer;
   }
   .sourceHTML {
      visibility: hidden;
   }
   #screen .text {
      margin: 20px;
      padding-top: 40px;
      text-align: justify;
   }
   #screen a {
      position: relative;
      border: none;
      text-decoration: none;
   }
   #screen a:hover {
      left:1px;
      top:1px;
   }
   #screen img {
      border: none;
      cursor: pointer;
   }