@import url("couleurs_titres.css");

body {
	background: #FFF url(../images/fond_haut.png) no-repeat center top;
	margin: 0;
	text-align: center;
	font: 75% Arial, Helvetica, sans-serif;
	color: #082782;
	padding-bottom: 20px;
}

#global {
	position: relative;
	margin: 0 auto;
	width: 770px;
	text-align: left;
	background: url(../images/fond_bas.png) no-repeat center bottom;
}
h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; }
p {	margin: 0 0 6px 0; line-height: 1.5em; }
a { text-decoration: none; }
img { border: 0; }
br { line-height: 1em; }
ul, ol { padding: 0; margin: 0; }
ul { list-style: none; }
.gras_orange { color: #FE7639; font-weight: bold;}
.droite { float: right;	margin: 4px 0 10px 25px; }
.gauche { float: left; margin: 4px 12px 0 0; }
.center { text-align: center; }
.hide {	display: none; }

div.hr {
	height: 10px;
	background: url(../images/filet_horiz.png) repeat-x left center;
  	margin-bottom: 8px;
}
div.hr hr { display: none; clear: both; }


/*  =================================================================
/*  Barre Navigation
/*  ================================================================*/

#nav {
	width: 735px; height: 38px;
	background: transparent url(../images/nav_fond.gif) no-repeat;
	margin: 0 0 30px 20px;
}

#nav a { display: block; height: 80%; }

#nav li { /* tous les elements de listes */
	float: left;
	text-indent: -9000px;
	height: 100%;
}

#nav li ul { /* sous-menu */
	z-index: 50;
	margin-top: -6px;
	padding: 9px;
	position: absolute;
	background: #FE7E3A;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #FEB28E;
	left: -999em; /* left et pas display: none car pas lu par les lecteurs d'ecran */
}

#nav li li {
	text-indent: 0;
	margin-bottom: 5px;	padding-bottom: 5px;
	border-bottom: 1px solid #FEB28E;
	width: 100%;	
}

#nav li:hover ul, #nav li.sfhover ul { /* pour apparition sous-menu en rollover */
	left: 0; /* auto marche pas dans IE */
}

#nav a:link, #nav a:visited { color: #FFF; display: block; }
#nav a.selected, #nav a:hover { color: #032380; }

/* dernier item sans filet */
#nav .last, #content #sommaire .last { border-bottom-style: none; margin-bottom: 0; padding-bottom: 0; }


/*  =================================================================
/*  Bandeau
/*  ================================================================*/

#bandeau_logo {
	background: url(../images/bandeau_gauche.jpg) no-repeat left bottom;
	width: 163px; height: 217px;	
	float: left;
	left: 20px;	position: absolute;
	text-align: right;
}

#logo{
	margin-top: 38px;
	border-right: 1px solid #FFF;
	padding: 6px 11px 9px 0;
}

#bandeau_visuel {
	background: url(../images/bandeau_droite.jpg) no-repeat left bottom;
	height: 217px; width: 572px;
	margin-left: 183px;
}

#bandeau_visuel h1 { position: absolute; text-indent: -9000px; margin-left: 20px; }

#home #bandeau_visuel h1 {
	background: url(../images/titre_home.gif) no-repeat;
	width: 372px; height: 40px;	margin-top: 89px;
}
#pval #bandeau_visuel h1 {
	background: url(../images/titre_pval.gif) no-repeat;
	width: 214px; height: 38px;	margin-top: 88px;
}
#demarche #bandeau_visuel h1 {
	background: url(../images/titre_demarche.gif) no-repeat;
	width: 262px; height: 37px;	margin-top: 89px;
}
#rea #bandeau_visuel h1 {
	background: url(../images/titre_rea.gif) no-repeat;
	width: 207px; height: 37px;	margin-top: 89px;
}
#passerelles #bandeau_visuel h1 {
	background: url(../images/titre_passerelles.gif) no-repeat;
	width: 216px; height: 41px;	margin-top: 88px;
}
#actu #bandeau_visuel h1 {
	background: url(../images/titre_actu.gif) no-repeat;
	width: 103px; height: 16px; margin-top: 110px;
}
#contact #bandeau_visuel h1 {
	background: url(../images/titre_contact.gif) no-repeat;
	width: 172px; height: 15px;	margin-top: 112px;
}
#plan #bandeau_visuel h1 {
	background: url(../images/titre_plan.gif) no-repeat;
	width: 128px; height: 16px;	margin-top: 111px;
}
#mentions #bandeau_visuel h1 {
	background: url(../images/titre_mentions_legales.gif) no-repeat;
	width: 183px; height: 19px;	margin-top: 111px;
}


/*  =================================================================
/*  Bandeau - Visuels homme - droite
/*  ================================================================*/

#visuel { position: relative; background-repeat: no-repeat; }

#home #visuel, #actu #visuel, #plan #visuel, #mentions #visuel {
	width: 113px; height: 183px;
	background-image: url(../images/homme_defaut.jpg);
	left: 422px; top: 25px;
}
#pval #visuel {
	width: 160px; height: 205px;
	background-image: url(../images/homme_pval.jpg);
	left: 376px; top: 3px;
}
#demarche #visuel {
	width: 228px; height: 195px;
	background-image: url(../images/homme_demarche.jpg);
	left: 316px; top: 3px;
}
#rea #visuel {
	width: 160px; height: 153px;
	background-image: url(../images/homme_rea.jpg);
	left: 376px; top: 0;
}
#passerelles #visuel, #contact #visuel {
	width: 216px; height: 169px;
	background-image: url(../images/homme_passerelles.jpg);
	left: 324px; top: 26px;
}


/*  =================================================================
/*  Colonne gauche
/*  ================================================================*/

#col_teaser {
	\width: 218px; w\idth: 198px; /*IE 5.5, autres */
	float: left; padding-left: 20px;
}

/* navigation sous-rubrique =============================*/

#navrub { padding: 0; margin: 0 0 29px 0; list-style: none; }

#navrub li {
	padding-top: 5px; margin-top: -1px;
	_margin-bottom: -3px; /* IE */	
	border-top: 1px solid #EBEBEB;
	width: 100%;
	font-size: 95%;
	letter-spacing: 0.1em;
}
#navrub li:first-child, #navrub li li:first-child { border:0; }

#navrub a:link, #navrub a:visited {
	display: block;	color: #697EB9;
	border-left: 6px solid #FFF;
	padding: 2px 0 5px 11px;
	font-weight: normal;
}
#navrub a:hover { color: #294493; border-left-color: #FE8545; }
#navrub #rub_active { color: #294493; border-left-color: #FE8545; font-weight: bold; }

/* boites teaser =======================================*/

#teaser {
	padding: 12px;
	\width: 198px; w\idth: 174px; /*IE 5.5, autres */
	background: #E7E7E7 url(../images/teaser_haut.png) no-repeat left top;
}

#teaser p {	line-height: 1.3em; }

.teaser_bas {
	background: url(../images/teaser_bas.png) no-repeat left top;
	width: 198px; height: 8px;
}

.cadre {
	background: url(../images/teaser_cadre_img.png) left top no-repeat;
	width: 164px; height: 79px;
	padding: 5px;
}

/* lien realisation idem */
#teaser p.aligndroite, #content p.aligndroite {
	display: block;
	text-align: right;
	margin-bottom: 0;
}

#teaser a.aligndroite:link, #teaser a.aligndroite:visited {
	font-weight: bold; color: #FE7639;
	background: url(../images/puce_teaser.png) no-repeat left center;
	padding-left: 25px;
}
#teaser a.aligndroite:hover { color: #082782; }
/* realisations : pour differencier les questions deja consultees */
#rea #content a.aligndroitevisited { font-style: italic; }



/*  =================================================================
/*  Contenu
/*  ================================================================*/

#content { margin-left: 250px; width: 500px; }

#content a:link, #content a:visited {
	font-weight: bold; color: #FE7639; text-decoration: none; padding: 0 2px; }
#content a:hover { color: #FFF; background-color: #FB844A; padding: 0 2px; }


h2 { font-weight: normal; font-size: 1.4em; line-height: 1.2em;
	margin: 0 0 0.6em 0;	
}

h3 { font-weight: bold; font-size: 1.2em; 
	margin: 8px 0 3px 0;
}

#content ul { margin-bottom: 13px; }

#content li, #concept #teaser li {
	background: url(../images/puce_violette.png) no-repeat 0 0.4em;	
	padding-left: 11px;	margin-bottom: 3px;
	line-height: 1.5em;
}

/* Home =========================================================*/

#content blockquote {
	padding: 0.2em 1.8em 0 3.6em;
	background: url(../images/citation_debut.png) no-repeat left top;
	font: bold 1em/1.6em Verdana, Arial, Helvetica, sans-serif;
	margin: 0 0 0.5em 6em;
}
#content blockquote p {
	background: url(../images/citation_fin.png) no-repeat right bottom;
	font-style: italic;
	padding-right: 2.8em;
}

#home #content li, #passerelles #content li {
	background: url(../images/puce_orange.png) no-repeat 0 0.4em;
}


/* liste alignee sur comment */
#content .liste { float: left; margin-top: 0; }
#content .comment {	margin-left: 10em;	margin-top: 0.7em; }

/* home, nous rejoindre */
#content a.lienflechebig:link, #content a.lienflechebig:visited {	
	background: url(../images/fleche_orange_big.png) no-repeat left center;
	color: #852196; padding-left: 20px; font-weight: normal;
}
#content a.lienflechebig:hover { color:#032380; background-color: #FFF; }
#content h3 a.lienflechebig:link, #content h3 a.lienflechebig:visited { font-weight: bold; }

/* Equipe ======================================================*/

#content .photo_associe {
	float: right; padding: 6px;
	border: 1px solid #999999; margin: 4px 0 5px 15px;
}

/* menu pval - equipe, demarche - etapes */
#menu_niv3 { margin-left: auto; margin-right: auto; }
#menu_niv3 ul { text-align: center; position: relative; }
#menu_niv3 li { display: inline; background: none; line-height: 45px; }
#menu_niv3 li a:link,  #menu_niv3 li a:visited { 
	font-size: 95%; font-weight: normal; color: #082782;
	border: 1px solid #FE7639; padding: 2px 10px;
}
#menu_niv3 li a:hover, #menu_niv3 #step { color: #FFF; background-color: #FB844A; padding: 2 10px;}


/* Notre demarche ===============================================*/

/* concept monde colonne gauche */
#concept #teaser { font-size: 95%; }
#concept #teaser li { margin-bottom: 1px; }
#concept #teaser p { margin: 0 0 4px 0; }
#concept #teaser br { line-height: 0.4em; }
#concept #teaser a:link, #concept #teaser a:visited { color: #852196; }
#concept #teaser a:hover { color: #082782; }

/* pour etape 1, 2... en bleu */
#demarche h3 span, #demarche h2 span { color: #082782; }

/* sommaire */
.fleche_verti {	right: 93px; _right: 90px; z-index: 1; position: absolute; margin-top: -1px; }
div.hr { margin-bottom: 11px; }
/* vignette etape, pour impression du cadre */
#demarche #content .etape {	float: right; margin: 6px 0 10px 20px; }
#demarche #content img.etape { z-index:1; position: absolute; margin: 5px 0 0 5px; }
#demarche #content .etape a { margin: 0; padding: 0; }

.fleche_tablo { margin: 2px 0 1px 260px; }
table {
	border: 1px solid #FFF;
	width: 100%;
	border-collapse: collapse;
	background-color: #EEEEEE;
}
td, th { border: 2px solid #FFF; padding: 4px 8px; line-height: 1.2em; }
th { text-align: center; background-color: #FB844A; color: #FFF; height: 2.8em; }
.col1 { width: 30%; }
.col2 { width: 35%; }
.col3 { width: 35%; }

/* schema etape 4 */
.boite_haut, .boite_milieu, .boite_bas1, .boite_bas2 {
	background-color: #E7E7E7; text-align: center; border: 1px solid #FE7639; font-size: 95%; 
}
.boite_haut p, .boite_milieu p, .boite_bas1 p, .boite_bas2 p {
	line-height: 1.2em; margin-bottom: 5px;
}
.boite_haut, .boite_bas1 { width: 150px; padding: 8px 3px 5px 3px; }
.boite_haut { margin-top: 40px; margin-bottom: -39px;}

#milieu { width: 100%; overflow: auto; }
.boite_milieu {
	float: left; \width: 95px; w\idth: 88px; /*IE 5.5, autres */
	margin-right: 5px; padding: 8px 3px 5px 3px;	
}
#milieu1 { margin-top: 57px; padding-bottom: 10px;}
#milieu2 { margin-top: 57px;}
#milieu3 { margin-top: 42px; padding: 14px 3px; }
#milieu4 { margin-top: 30px; padding: 20px 3px}
#milieu5 { margin: 0 0 10px 0; padding-top: 10px}

.boite_bas1 { margin-top: -15px; margin-bottom: 20px;}
.boite_bas2 { width: 493px; padding: 4px }


/* Nos realisations =============================================*/

#rea .left { float: left; width: 225px; }
#rea .right { margin-left: 235px; }

#rea #content h3 { font-weight: bold; font-size: 1.2em; color: #082782; margin: 0;}
#rea .right p { line-height: 1.4em; padding-left: 25px; margin-bottom: 5px; }

#rea h4 {
	text-transform: uppercase; color: #852196;
	font-size: 1em; font-weight: bold; letter-spacing: 0.1em;
	margin-bottom: 2px; margin-top: 0;
}
/* la question du client */
#rea .right h4 {
	padding-left: 25px;	
	background: url(../images/fleche_bleue_big.png) no-repeat left center;
}

/* reponse */
.haut_bulle { background: url(../images/encadre_haut.gif) no-repeat left bottom; height: 9px; margin-top:10px;}
.bas_bulle { background: url(../images/encadre_bas.gif) no-repeat left top; height: 16px; }
.bulle { width: 500px; background: url(../images/encadre_fond.gif) repeat-y left top; overflow: auto; }

#rea .bulle .left { float: left; padding-left: 18px; \width: 238px; w\idth: 220px; /*IE 5.5, autres */}
#rea .bulle .right { margin-left: 260px; padding-right: 15px; }

#rea .bulle .right p { padding-left: 0; }
#rea .bulle .left p, #rea .bulle .right p { line-height: 1.3em; margin-bottom: 0;}
#rea .bulle ul { margin-bottom: 0; }
#rea .bulle br { line-height: 0.6em; }
#rea .bulle h4 { padding-left: 0; background: none; color: #FFF; }
#rea .bulle li {
	background: url(../images/encadre_puce.png) no-repeat 0 0.4em;
	line-height: 1.3em;
}

/* croix pour fermer les boites reponses et recommander ======== */
#content .bulle a.fermer, #recommander a.fermer {
	width: 12px; height: 10px; float: right; text-indent: -9000px;	
	background: url(../images/encadre_fermer.gif) no-repeat top left;
	overflow: hidden; padding: 1px;
}
#content .bulle a.fermer:hover,  #recommander .bulle a.fermer:hover{
	background-color: none;	background-position: 0 -12px;
}

/* Recommander ================================================= */
#recommander { position: absolute; z-index: 1; margin-top: -303px; }
#recommander .bulle { font-size: 1.25em; }
#recommander p { margin: 5px 30px 0 15px; }
#recommander a.fermer { margin-right: 15px;}
#recommander label { width: 145px; }
#recommander #form_recomand { margin: 10px 0 5px 0; }
#recommander .bouton { font-size: 1em; }
#recommander .msg_erreur {	color: #CC3300;	}
#recommander .succes { color: #FFF; margin: 9px 0 15px 0; font-size: 1.1em;}


/* Publications ==================================================*/

#publications #content img { position: relative; bottom: 6px; right: 6px;}

#content .ombre {
	float:right; background: url(../images/ombre.gif) no-repeat bottom right;	
	margin: 10px 0 8px 25px;
}
#publications #content h3, #actu #content h3 { font-size: 1.3em; } 

/* Articles =====================================================*/

/* titres articles */
#passerelles #content h4 { font-size: 1.25em; margin: 0 0 0.6em 0; }
#passerelles #content h4 a { color: #852196; padding: 0; background: none; }
#passerelles #content h4 a:hover { color: #FE7639; }
/* auteur article */
#passerelles #content h4 span { font-size: 0.85em; font-weight: bold; color: #082782; }
/* inter bleu */
#content h5 { font-size: 1.15em; line-height: 1.2em; margin: 1em 0 0.5em 0; }

/* liens acheter en ligne, lire la suite, equipe contact */
#content a.lien_fleche:link, #content a.lien_fleche:visited {
	background: transparent url(../images/fleche_bleue_small.png) no-repeat left center;
	padding-left: 14px;
}
#content a.lien_fleche:hover {
	background: #FB844A url(../images/fleche_bleue_small_over.png) no-repeat left center;
	padding-left: 14px;
}

/* liste formations */
#content #liste_liens li { background: none; padding-left: 0; }
#articles #content li, #formations #content li  { margin-left: 1em;  }
#passerelles #content ol li { background: none; padding-left: 0; margin-left: 2.5em; _margin-left: 2.8em; /* IE */ }

/* menu deroulant articles, formations ========================= */
#content #sommaire {
	float: right;
	margin: 0 1px 15px 220px !important;
	margin: 0 1px 0 220px;
}
#content #sommaire li {	background: none; } /* sinon, puce */
#content #sommaire a, #content #sommaire a:visited { font-size: 0.9em; font-weight: normal; color: #082782; }
#content #sommaire a:hover, #content #sommaire #encours { color: #FE7639; }

#sommaire a.menubox, #sommaire a.menubox:visited {
	display: block; padding: 2px 5px; 
	\width: 240px; w\idth: 230px; /*IE 5.5, autres */ height: 18px; 
	background: #FFF url(../images/menubox.gif) no-repeat left top;
}
#sommaire a.menubox:hover {	padding: 2px 5px; color: #FE7639; }

#content #sommaire li ul { /* liste sommaire */
	position : absolute; left: -999em;
	width: 220px; background: #EBEBEB;		
	border: 1px solid #C6C9CD; padding: 1px 9px;
}
#content #sommaire li li { 
	border-bottom: 1px solid #C6C9CD;	
	padding: 0; margin: 0;
}
#content #sommaire li ul a, #content #sommaire li ul a:visited  {
	padding: 4px 0; display: block; width: 220px;
}
#content #sommaire li ul a:hover { background: none; }
#content #sommaire li:hover ul, #content #sommaire li.sfhover ul { left: auto; }


/* Contact ======================================================*/

label {
	width: 110px; float: left;
	text-align: right; margin: 2px 0.6em 0 0;
}

.input-box {
	width: 280px; text-align: left;
	padding: 1px 2px; color: #082782; margin: 1px 0;
	font: 1.1em Arial, Helvetica, sans-serif;
	background: #F5F5F5; border: 1px solid #AA9791;
}

#contact form { margin: 25px 0 0 0; }
input.input-box:focus, textarea:focus {	background:#FBEAE0; }
.bouton  { font-size: 1em; letter-spacing: 0.1em; padding: 1px; }

.msg_erreur, .erreur, .succes { font-weight: bold; text-align: center; }
.msg_erreur, .erreur {	color: #FE7639;	margin-bottom: 5px; }
.erreur { letter-spacing: 0.2em; }
.succes { color: #66B61F; margin-bottom: 8px; font-size: 1.1em; }
.note { font-size:85%; text-align:center }


/* Plan  du site ================================================*/

#plan div.hr { height: 5px; }
#plan #content li a:link, #plan #content li a:visited {	font-weight: normal; color: #082782; }
#plan  #content li a:hover { color: #FE7639; background-color: #FFF; }


/*border: 1px solid #FF0000;*/
/*
bleu : #082782
violet : #852196
orange : #FE7639
vert : #66AA2A
*/



/*  =================================================================
/*  Pied de page
/*  ================================================================*/

.cleaner {
		clear: both;
		height: 1px; font-size: 1px;
		margin: 0; padding: 0;
		background: transparent;
}

#utils {
	margin: 15px 0 0 250px; width: 500px;
	background: url(../images/filet_horiz.png) repeat-x left top;
	padding-top: 15px; font-size: 80%;
}
#utils a:link, #utils a:visited { color: #852196; }
#utils a:hover {
	color: #F87034;
}
#utils #retour_haut {
	background: url(../images/utils_top.png) no-repeat right center;
	padding: 0 23px 0 0; float: right;
}
#utils #envoi {
	background: url(../images/utils_envoyer.png) no-repeat left center;
	padding: 3px 0 0 22px; margin-right: 20px;
}
#utils #imprimer {
	background: url(../images/utils_imprimer.png) no-repeat left center;
	padding: 8px 0 1px 25px;
}

#coordonnees { text-align: center; margin-top: 40px; font-size: 88%; }
#coordonnees p { padding-right: 135px; }

#coordonnees .pvalcoord {
	font-weight: bold; color: #FE7639; letter-spacing: 0.1em;	
	background: url(../images/picto_pval_pied.gif) no-repeat center left;
	padding: 15px 0 20px 135px; margin-right: 5px;
}

.puce {
	background: url(../images/puce_orange.png) no-repeat center center;
	padding: 0 4px;
}

#pied {
	margin-left: 1px; text-align: center;
	background-color: #032380;
	font-size: 88%; font-weight: bold; color: #FFF;
}
#pied p { margin: 0; padding: 0; }
#pied a:link, #pied a:visited { line-height: 2.1em; color: #FFF; }
#pied a:hover {	color: #859FEB; }
#pied span{ color: #859FEB; margin: 0 6px; font-size: 1.1em; }

#ombre_pied {
	background: #FFF url(../images/fond_pied.png) repeat-x left top;
	height: 8px; font-size:1px;	
}