/*  ------------------------------------------
/*  Corps principal
/*  ------------------------------------------
*/

body {
 /* 
 * Je mets les marges et les remplissages (padding) a 0px 
 * pour niveler les differences de comportement des navigateurs.
 */
 margin: 0; 
 padding: 0;
 font-size: 100%;
 line-height: 1.4em; /* La valeur par defaut est d'environ 1.2em. */
 font-family: verdana, arial, sans-serif;
 /* 
 * Je defini une couleur de police et une couleur d'arriere-plan explicites 
 * pour eviter les mauvaises surprises dans les navigateurs qui auraient 
 * des valeurs par defaut differentes des valeurs commune.
 */
 color: #222;
 /*background-color: #fff;*/
/*background: url(../img/bg.gif) 0 0 repeat;*/
/*background-color: #d9dde2;/*#e4e9f3;*/
background: #d7dce1 url(../img/Sans-titre-6.png) 0 -15px repeat-x;
 text-align: center; /* Pour corriger le bug de centrage IE. */
}

#conteneur{
 margin: 0 auto; /* On centre le conteneur. */ 
 width: 770px;
 /* 
 * On positionne le conteneur car si le contenu est positionne (absolu ou relatif) 
 * et le conteneur non alors le contenu sortira du conteneur et se placera par
 * rapport au dernier parent positionne : le document. 
 */
 position: relative;
 font-size: 0.8em;
 text-align: left; /* On retablit l'alignement normal du texte. */

background-color: #fff;
/*border: 1px solid #b4b4b4;*/}

/* pour enlever les bordures des images */
img{
 border:none;
}


/*  ------------------------------------------
/*  En-tete
/*  ------------------------------------------
*/

#en-tete{
 /*
 * Verticalement, mon #en-tete doit avoir exactement la meme hauteur que son contenu.
 * Le probleme, c'est que ce contenu est en flottement et que ce qui flotte n'a aucune influence 
 * sur la taille du conteneur. 
 * Pour obtenir l'espacement vertical voulu, il faut empecher l'element div 
 * de laisser son contenu deborder. Ce qu'on obtient avec overflow: hidden. 
 */
 overflow: hidden; 
 height: 115px;
 background: url(../img/arriere_plan.png) 0 -15px repeat-x;
/*background: url(../img/arriere_plan_inverse.png) 0 15px repeat-x;*/
 /*border: 1px solid;*/
}

/* la div du logo  (161x90) */
#logo{
 margin: 10px 0 0 5px;
 width: 200px;
 height: 70px;
 position: relative;
 float: left;
 /*border: 1px solid;*/
}

/* la div de la banniere pub horizontale (468x60) */
#banniere-horizontale{
 margin: 10px 5px 0 0;
 width: 468px;
 height: 60px;
 position: relative;
 float: right;
 border: 1px solid #ccc;
}


/*  ------------------------------------------
/*  Barre de navigation
/*  ------------------------------------------
*/

#navigation{
 margin: 0;
 height: 20px;
 line-height: 1.2em;
 /*border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;*/
/*border: 1px solid;*/
}


#navigation a{
text-decoration: none;}

#navigation a:hover{
text-decoration: underline;}
#acces-client{
 float: left;
/* margin-left:5px;
 background: url(../img/gtchemin.gif) 0 -3px no-repeat;
 padding-left: 16px;*/
 padding-left: 3px;
}

#lang{
 float: right;
 margin-right: 5px;
/* background: url(../img/unitedkingdom.gif) 0 0px no-repeat;*/
 padding-left: 22px;
}

.english{
background: url(../img/unitedkingdom.gif) 0 3px no-repeat;
}

.french{
background: url(../img/france.gif) 0 3px no-repeat;
}
/*  ------------------------------------------
/*  les liens
/*  ------------------------------------------
*/

/* les proprietes communes a link et visited */
a{
 font-weight:bold;
 /*text-decoration: underline;*/
text-decoration: none;
}

/* les proprietes specifiques de link */
a:link{
 color: #03c;
}

/* les proprietes specifiques de visited */
a:visited{
 color:#551A8B;
}

/* les proprietes specifiques de active */
a:hover{
 text-decoration: underline;
}

/* les proprietes specifiques de active */
a:active{
 color: #f00;
}


/*  ------------------------------------------
/*  Sidebar
/*  ------------------------------------------
*/

#sidebar{
 margin:0 0 0 5px;
 width: 150px;
 position: relative;
 float: left;
 /*border: 1px solid;*/
}


/** le menu **/

/* Une barre de titre grise pour le menu */
.barre-grise{
 margin: 2.6em 0 0 0;
 padding: 0.3em 0.4em 1.8em 0.5em;
 font-size: 0.9em;
 font-weight: bold;
 color: #445566;
 border-top: 1px solid #bbccdd;
 background: #eef0f3 url(../img/barre_grise.png) repeat-x;
}

/* toutes les listes */
#menu, #menu ul{
 /*
 * Je definis des valeurs explicites pour les marges et le remplissage 
 * afin de contourner les divergences de comportement entre les differents
 * navigateurs dans l'affichage des listes a puces 
 */
 margin: -5px 0 0 0;
 padding: 0;
 /* le width est de 150 -5(de marge gauche) = 145 */
 width: 145px; /* On fixe un width pour obliger les listes a se positionner les unes sous les autres */
 float: left; 
 list-style: none;  /* On enleve les icones de liste */
}

/* tous les items de liste */	
#menu li{ 
  /* 
 * Il vaut mieux indiquer une largeur (width) dans le 
 * selecteur #menu li, sinon Opera va peter un cable
 */
 width: 135px; /* la tailles des li qui ne sont pas cast par un <a>*/
 position: relative;
 float: left;
 line-height: 1.25em;
}


/* Les liens */	

/* les proprietes communes a link et visited */
#menu li a{
 padding: 0 0 0 10px; 
 /*
 * On a rajoute une bordure et des padding, on doit 
 * donc reajuster la taille 145-(2 de bordure + 10 de padding) =133 
 */ 
 width: 135px; /* la taille des <a> */
 display: block;
 font-size:0.83em; 
 font-weight: bold;
 text-decoration: none;
 border-bottom: 1px solid #C1CACF; /* Bordure de separation des <a> */
}

#menu li a{ /* link et visited */
 color:#333;
}

/* l'onglet lors du survol de la souris */
#menu li a:hover {
 color: #E75802;
 text-decoration: underline;
}


/*  ------------------------------------------
/*  Contenu
/*  ------------------------------------------
*/

#contenu{
 margin:0 0 35px 27px;
 width: 435px;
 float:left;
 /*border: 1px solid;*/
/*border: 1px solid;*/
}

/* Une barre de titre orange */
.barre-orange{
 margin: 0; 
 padding:0.1em 0 1.4em 0.5em;
 font-size: 1.1em;
 font-weight: bold;
 color: #930;
 border-top: 1px solid #ffb667;
 background: #ffdcb7 url(../img/barre_orange.png) repeat-x;
}

/* Titres des articles */
#contenu h1{
 margin:-8px 5px 1em 5px;
 font-size: 1.4em;
 font-weight: normal;
 font-family: Georgia,"Times New Roman";
 font-style: italic;
 line-height: 1.3em;
 color: #cb1804;
 text-align: center;
 letter-spacing: 0.2px;
}

/* Titres des offres d'emploi*/
#contenu h2{

 /*border: 1px red solid;*/
 margin: 0;
padding: 0;
padding-left: 5px;
 font-size: 1.5em;
 color: #900;
 font-family: arial;
 letter-spacing:0.2px;
}

#contenu h6{
margin:0;
padding: 0;
padding-left: 5px;
margin-top: 1.5em;
font-size:1em;
color: #900;
}

/* Titres de paragraphe (oranges) */
#contenu h4{
 margin: 1.5em 0 0 0; /* margin: 5px 0 10px 0; */
 padding: 8px 5px 0 5px;
 font-size: 1.2em;
 color: #e75802;
}

/*Titres des paragraphes quand le titre est a dire tout en haut */
/* C'est a dire le "premier" titre */
#contenu h4.premier{
 margin-top:-10px;
}

/* les sous titres de paragraphe (bleu) */
#contenu h5{
 margin: 1em 0 0 0; /*margin-top: 15px*/
 padding:0 0 0 5px;
 font-size: 1em;
 color: #1795ef;
}

p{
 margin: 0 0 1em 0;
 padding: 0 5px 0 5px; 
 font-size: 0.9em;
 line-height: 1.4em;
 text-align: justify;
}

/* Une classe qui s'applique au paragraphe avec asterisque* */
.asterisque{
 margin-top: 3.5em;
 font-size: 0.85em;
 line-height: 1.2em;
 margin-bottom:0.5em;
}

/* un classe qui s'applique au paragraphe pour mettre un bout de phrase en gras */
.gras{
 font-size: 1.1em;
 font-weight: bold;
 letter-spacing: -0.4px;
}

/* une classe qui centre un texte */
.centrer{
 text-align: center;
}

/* une classe qui aligne a droite un texte */
.a-droite{
 text-align: right;
}

#prochainement{
 margin: 120px 0 0 152px;
 width:130px;
 font-weight:bold;
 color:#333;  
 text-align: center;
}


/*  ------------------------------------------
/*  Les articles
/*  ------------------------------------------
*/

/* La liste des articles */
.liste-articles{
 margin:0;
 padding:0 5px 0 5px;
 text-align: justify;
}

/* On redefini les dt pour liste-articles */
.liste-articles dt{
 margin:0 0 0.3em 0;
 font-size:0.9em;
 line-height: 1.4em;
}

/* On redefini les dd pour liste-articles */
.liste-articles dd{
 margin:0 0 2em 0;
 font-size: 0.85em;
 line-height: 1.3em;
}

/*  ------------------------------------------
/*  Les kiosques
/*  ------------------------------------------
*/


/* La liste des kiosques */
.liste-kiosques{
margin: 0;
padding: 10px 5px 0 5px;
text-align: justify;
}

.liste-kiosques dt{
font-weight: bold;
font-size: 0.9em;
line-height: 1.4em;
}

.liste-kiosques dd{
margin: 0 0 0.9em 0;
line-height: 1.3em;
color: #666;
}

/*  ------------------------------------------
/*  Les tableaux
/*  ------------------------------------------
*/

/* redefinis table */
table{
 margin: 8px 5px 8px 5px; /* margin bottom en 8px */
 padding: 0 0 0 5px;
 /*
 * Grace a l'attribut width, les tailles du tableau et des cellules sont aussi definies.
 * Cela va permettre d'epurer le code (x)html qui suit.
 */
 width: 425px; /* Pour que le tableau occupe tout l'espace de la div */
 border-collapse: collapse; /* pour eviter que les separation internes du tableau apparaissent */
}

/* les cellules heriteront du width mais pas de la taille du texte ni de son alignement*/

th{
 padding: 0 0 0 5px;
 font-size:0.9em;
 color:#333;
 line-height: 1.6em;
 background-color:#e7e7e7;
}

td{
 padding: 0 0 0 5px;
 font-size:0.9em;
 border-bottom:1px solid #e7e7e7;
}

/* pour aligner le texte contenu a l'interieur d'un td au milieu de l'image*/
td img {
 vertical-align: middle;
}

/* la colonne du tableau contenant des images */
.col-image{
 padding: 5px;
 text-align: right;
}


/*  ------------------------------------------
/*  Les listes a puces
/*  ------------------------------------------
*/

ul.liste-simple{
 margin: -0.5em 0 0 0;
 padding: 0 0 0 25px ;
 list-style: none;
}

ul.liste-simple li{
 margin:0 0 0.4em 0;
 padding:0;
 font-size: 0.9em;
 text-align: justify;
 line-height:1.4em;
 background: url(../img/puce.gif) no-repeat 0 6px;
 padding-left: 15px; /* pour ne pas coller le texte a l'image */
}


/*  ------------------------------------------
/*  La page d'accueil
/*  ------------------------------------------
*/

/* La div qui regroupe tout */
#une{
/*border: 1px solid blue;*/
margin-bottom: 2.5em;
}


/* colone de gauche contelant du texte */
#col-texte{
 margin: 30px 0 0 5px;
 width: 270px;
 /*height: 170px;*/
 position: relative; 
 float: left;
 /*border: 1px solid green;*/
}

/* div qui contient l'image de la une */
#a-la-une{
 margin: 7px 9px 0 0; 
 width: 135px;
 height: 179px;
 float: right;
 border: 1px solid #cccccc;
}

#a-la-une img{
 margin: 2px;
 border: none;
 vertical-align: middle; /* pour centrer les images et ne pas avoir une marge inferieur grande */
}


/*  ------------------------------------------
/*  Les formulaires
/*  ------------------------------------------
*/

/* Je vais personaliser les inpute type="text"*/
input, textarea, select{
/* On met du padding pour que l'ecriture soit bien au milieu du champ de saisie */
padding: 0.1em;
border: 1px solid #a7a6aa;
font-size: 1em;
color: #222;
font-family: Verdana;
}

.input-petit{
 width: 100px;
}

.input-moyen{
 width: 200px;
}

textarea{
 /*width: 280px;
 height: 100px;*/
 overflow: auto; /* Pour eviter d'avoir la scrollbar verticale qui apparait dans ie */
 line-height: 1.25em;
}

#contenu label{
 /*display:inline;*/
 text-align: right;
 padding: 0px 8px 0px 0px;
 float: left;
 width: 100px;
}

.label-petit{
 width: 23px;
 margin-top: 2px;
 /*border: 1px solid black;*/
}
.label-petit2{
 width: 50px;
 margin-top: 2px;
 /*border: 1px solid black;*/
}

/* On redefini la marge bottom pour tout les p qui se trouve dans un formulaire */
form p{
 margin-bottom: .4em;
}

/* Les boutons annuler et envoyer */
.bouton{
 margin: .7em 30px 0 0;
 width: 70px;
 background: #fff;
 font-weight: bold;
}

/* Les boutons Rechercher */
.bouton-moyen{
 width: 90px;
 background: #fff;
 font-weight: bold;
}


/*  ------------------------------------------
/*  banniere pub laterale (120x600)
/*  ------------------------------------------
*/

#banniere-laterale{
 margin: 0 5px 35px 0;
 width: 120px;
 position: relative;
 float: right;
/* border: 1px #9E9FA1 solid;*/
}


/*  ------------------------------------------
/*  Pied de page
/*  ------------------------------------------
*/

#pied-de-page{
 margin: 0; 
 padding: 0;
padding-bottom: 5px;
 clear:both; /* pour annuler le flottement et s'assurer que footer sera toujours en dessous de #contenu et #sidebar */
 font-size: 0.85em;
 color: #adadad;
 text-align: center; /* grace a display: inline; les <li> se comportent maintenant comme du texte "normal".*/
 /* d'ou le centrage :D */
}

#pied-de-page ul{
 margin: 0;
 padding:0;
 height: 1.5em; /* je suis oblige de definir un height sinon les menu serait trop eloignıs les uns des autres */
 list-style: none;
}

#pied-de-page li{
 margin:0;
 padding:0;
 display: inline;/* pour que les <li> s'affichent comme des ılıments de type "inline" */
}

#pied-de-page li a{ /* link et visited */
 font-weight: normal;
 color: #adadad;
 text-decoration:none;
}

#pied-de-page li a:hover{
 color: #000;
 text-decoration: none;
}

/* La div qui permet d'annuler le flottement */
.clear {
 clear: both;
}

/* La couleur bleu des lignes du tableau */
.bleu{
 background-color: #e8eef7;
}


/* Le tableau des points de vente */

/* entetes des tableaux*/
.blue-th{
 padding: 0 0 0 5px;
 font-size:0.9em;
 line-height: 1.6em;
 background-color:#c3d9ff;
 height: 25px;
}

/* cellule du tableau */
.blue-td{
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.3em;
font-size: 0.89em;
}

/* Les onglets des regions : Centre, Est, Ouest, Sud */

/* ul des onglets */
ul.onglet-region{
list-style: none;
margin: 0;
padding: 0;
margin-left:5px;
float: left;
border-bottom: 3px solid #ef612a;
width: 425px;
margin-bottom: 0.5em;
}

/* li des onglets */
ul.onglet-region li{
font-weight: bold;
float: left;
width: 80px;
height: 20px;
line-height: 21px;
text-align: center;
background-color:#ffb667;
margin-right: 10px;
font-size: 0.9em;
background: #eeeeee url(../img/dark_fade_g.png) 0 -6px repeat-x;
}

/* Les liens inactifs (Non selectionne) des onglets. */
ul.onglet-region li a{
color: #334455;
display: block;
}

/* Les liens selectionne des onglets. */
ul.onglet-region li.selected a{
background: #ed5929 url(../img/crush.png) 0 0 repeat-x;
color: #fff;
}

/* Les link de la colonne texte de la page d'accueil*/
/* les proprietes communes a link et visited */
#col-texte a{
font-weight: normal;
color: #222;
}

/* les proprietes specifiques de active */
#col-texte a:hover{
 text-decoration: underline;
}

/* les proprietes specifiques de active */
#col-texte a:active{
 color: #f00;
}

#xiti-logo{
 margin-left: 20px;
 opacity: 0.35;
}





/*#acceder-direct{
position: relative;
float: right;
margin-top: 20px;
padding-left: 10px;
height: 35px;
width: 260px;
line-height: 30px;
background: url(../img/button_gold.png) -4px -8px no-repeat;
}*/

#acceder-direct{
position: relative;
text-align: center;
float: right;
line-height: 15px;
margin-top: 20px;
width: 165px;
}


#image-promo{
margin-left: 133px;
width: 450px;
}

#conteneur2{
 margin: 0 auto; /* On centre le conteneur. */ 
 width: 770px;
 /* 
 * On positionne le conteneur car si le contenu est positionne (absolu ou relatif) 
 * et le conteneur non alors le contenu sortira du conteneur et se placera par
 * rapport au dernier parent positionne : le document. 
 */
 position: relative;
 font-size: 0.8em;
 text-align: left; /* On retablit l'alignement normal du texte. */
}