@charset "utf-8";
/* -- NORMALISATION ---------------------------------------------------------------------------------------------------------------*/
	* {
		margin: 0;
		padding: 0;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	fieldset, img {
		border: 0;
	}
	q:before, q:after {
		content: '';
	}
	ul, ol {
		list-style-position:outside;
	}
	input, textarea {
		border:1px solid #dedede;
	}
	a:link,
	a:visited {
		color:#21651A;
		text-decoration:underline;
	}
	a:hover,
	a:active,
	a:focus {
		text-decoration:none;
	}
	kbd {
		font-size:1.3em;
		background-color:#f0f0f0;
		padding:0 3px;
	}
	area {
		border:solid 1px red;
	}
/* -- CLASSES GÉNÉRALES -----------------------------------------------------------------------------------------------------------*/
	.cache {
		position:absolute;
		left:-9999px;
	}
	.hrCache {
		display:none;
	}
	.listeHorizontale li {
		float:left;
	}
	.clear {
		clear:both;
	}
	.sansPuces {
		list-style-type:none;
	}
	.positionContenu {
		width:606px;
		margin-left:175px;
		position:relative;
		padding:0;
	}
/* -- STYLES SPÉCIFIQUES GÉNÉRAUX -------------------------------------------------------------------------------------------------*/
	/* - ENSEMBLE ---------------------------------------------------------*/
		/* - Corps de la page -----------------*/
			body {
				background:#FFF url(images/fondPage.gif);
				font: 1em "Lucida Sans", Arial, Helvetica, sans-serif;
				color:#404040;
			}
		/* - Conteneur de la page -----------------*/
			div#conteneur {
				position:relative;
				margin:8px 0;
			}
		/* - Menu secondaire -----------------*/
			div#menuSecondaire {
				font-size:0.7em;
				background:transparent url(images/ligneGrise_haut.jpg) no-repeat 50% 100%;
				padding-bottom:5px;
			}
			div#menuSecondaire ul {
				float:right;
				padding-left:18px;
				background:transparent url(images/fond_menuSecondaire_gauche.png) no-repeat 0% 0%;
			}
			div#menuSecondaire ul li {
				margin:0;
				margin-left:5px;
			}
			div#menuSecondaire ul li.dernier {
				background:transparent url(images/fond_menuSecondaire_droite.png) no-repeat 100% 0%;
				padding-right:15px;
			}
			div#menuSecondaire ul li a:link,
			div#menuSecondaire ul li a:visited {
				color:#404040;
				text-decoration:none;
				margin:3px;
				line-height:2.2em;
				vertical-align:bottom;
				position:relative;
				top:5px;
			}
			div#menuSecondaire ul li a:hover,
			div#menuSecondaire ul li a:active,
			div#menuSecondaire ul li a:focus {
				text-decoration:underline;
			}
		/* - Logo -----------------*/
			div#haut div#logoPunchline #logo {
				width:140px;
				height:70px;
				float:left;
				padding:40px 0 0 25px;
				font: bold 0.9em "Lucida Sans", Arial, Helvetica, sans-serif; /* Pour assurer le même positionnement sur l'accueil et dans les sections */
			}
		/* - Punchline et numéro de téléphone -----------------*/
			div#haut div#logoPunchline {
				background:transparent url(images/ligneVerte_haut.png) no-repeat 100% 0%;
			}
			div#haut div#logoPunchline p {
				text-align:right;
				height:70px;
				font: bold 0.9em "Lucida Sans", Arial, Helvetica, sans-serif;
				padding:3.8em 25px 0 0;
			}
			div#haut p span {
				color:#21651a;
				font-size:0.9em;
			}
	/* - MENU -------------------------------------------------------------*/
		ul#menuPrincipal {
			position:absolute;
			list-style-position:outside;
			width:100%;
			font-weight:bold;
			background:transparent url(images/menu_haut.png) repeat-x 0% 0%;
			padding:1.6em 0 0 0;
			/* Voir dans a.css, aa.css et aaa.css pour positionnement vertical du menu */
		}
		ul#menuPrincipal li {
			background-color:#FFF;
		}
		ul#menuPrincipal li.dernier {
			padding-bottom:1.6em;
			background:transparent url(images/menu_bas.png) repeat-x 0% 100%;
		}
		ul#menuPrincipal li span {
			display:block;
			width:200px;
			line-height:2em;
		}
		ul#menuPrincipal li span a {
			display:block;
			width:156px;
			text-align:right;
			padding-right:20px;
		}
		ul#menuPrincipal a:link,
		ul#menuPrincipal a:visited {
			color:#404040;
			text-decoration:none;
		}
		ul#menuPrincipal a:hover,
		ul#menuPrincipal a:active,
		ul#menuPrincipal a:focus,
		ul#menuPrincipal a.menuActif:link,
		ul#menuPrincipal a.menuActif:visited {
			color:#21651a;
			background:transparent url(images/flecheMenu.gif) no-repeat 100% 50%;
			text-decoration:underline;
		}
	/* - BAS --------------------------------------------------------------*/
		div#bas {
			z-index:3;
			background:transparent url(images/ligneGrise_milieu.png) repeat-y 50% 0%;
			position:relative;
		}
		body.index div#bas {
			background:transparent url(images/ligneGrise_milieu_ancien.png) repeat-y 50% 0%;
		}
		/* - Bannière -----------------*/
			div#dessusFlash {
				position:absolute;
				right:25px;
				top:45px;
				z-index:5;
				color:#FFF;
				width:275px;
				height:150px;
			}
			div#dessusFlash span {
				display:block;
				font-size:1.2em;
				margin-bottom:10px;
				font-style:italic;
			}
			div#dessusFlash ul li {
				font-size:0.75em;
				margin-bottom:5px;
				list-style-position:outside;
				margin-left:10px;
			}
			div#dessusFlash a {
				background:transparent url(images/btnBanniere.gif) no-repeat 0% 70%;
				color:#FFF;
				font-size:0.8em;
				display:block;
				width:160px;
				height:23px;
				text-indent:25px;
				line-height:23px;
				padding-top:5px;
				position:relative;
			}
			div#dessusFlash a span {
				display:block;
				height:1px;
				width:1px;
				overflow:hidden;
				position:absolute;
				top:-1px;
			}
			div#dessusFlash p#pigerCarte {
				background: transparent url(images/btnCartes.gif) no-repeat 0 0;
				width:151px;
				height:24px;
				line-height:24px;
				font-size:0.8em;
				margin-bottom:10px;
				padding-left:30px;
			}
			div#banniere {
				background:transparent url(images/fondBanniere_petit.png) no-repeat 50% 100%;
				text-align:center;
				position:relative;
				width:606px;
				height:236px;
				z-index:0;
			}
			div#banniere div {
				position:relative;
				top:8px;
				left:0;
			}
			div#banniere div#btnCartes {
				position:absolute;
				bottom:0px;
			}
		/* - Contenu -----------------*/
			div#contenu {
				position:relative;
				z-index:3;
				padding-left:13px;
			}
			div#colonneGauche {
				position:relative;
			}
			body.index div#colonneGauche {
				float:left;
				width:350px;
			}
			div#contenu.accueil div#colonneGauche div#titre {
				background:transparent url(images/logoCrochet_moyen.gif) no-repeat 17px 0;
			}
			div#colonneGauche h1 {
				margin:1em 1em 0 55px;
				font-size:1.1em;
				font-weight:bold;
				color:#21651a;
				font-family:"Lucida Sans",Arial,Helvetica,sans-serif;
			}
			div#colonneGauche h2 {
				margin:1.5em 1em 0 15px;
				font-size:0.8em;
			}
			div#colonneGauche div#titre span {
				display:block;
				position:relative;
				top:-1px;
				font-size:0.9em;
			}
			div#colonneGauche p,
			div#colonneGauche ul {
				font-size:0.8em;
				line-height:1.4em;
				margin:1.5em;
			}
			div#colonneGauche ul li {
				margin-top:5px;
				margin-left:20px;
			}
			div#colonneDroite {
				width:235px;
				float:left;
				position:relative;
			}
			div#colonneGauche .encart {
				border:solid 1px #CCC;
				background:#FAFAFA;
				margin:20px 30px 20px 20px;
				padding:15px;
			}
			a#btnHaut:link,
			a#btnHaut:visited {
				background:transparent url(images/btnHaut.gif) no-repeat 0 0;
				font-size:0.7em;
				text-decoration:none;
				padding:0 0 0 24px;
				line-height:40px;
				position:relative;
				left:20px;
			}
			a#btnHaut:hover,
			a#btnHaut:active,
			a#btnHaut:focus {
				background:transparent url(images/btnHaut.gif) no-repeat 0 0;
				font-size:0.7em;
				text-decoration:underline;
				padding:0 0 0 24px;
				line-height:40px;
				position:relative;
				left:20px;
			}
		/* - Moteur de recherche -----------------*/
			form#frmRecherche {
				margin:1em 0em 0.7em 0.3em; /* Pour IE6 */
				position:relative;
				float:left;
				width:100px; /* Pour IE6 */
			}
			html > body form#frmRecherche { /* Pour l'affichage des autres navigateurs que IE6 */
				width:auto;
				margin:1em 0em 0.7em 0.7em;
			}
			form#frmRecherche div { /* Nécessaire pour régler une différence de FF et IE et assurer une pareille position au bouton */
				position:relative;
				width:151px;
				margin-right:3px;
			}
			form#frmRecherche label {
				font-size:0.7em;
				display:block;
				margin-bottom:2px;
			}
			form#frmRecherche input#txtRecherche {
				width:125px;
				position:absolute;
				top:0;
				left:0;
				padding:2px;
				font-size:0.8em;
			}
			form#frmRecherche input#btnRecherche {
				background:#EEE;
				position:absolute;
				top:0;
				right:0;
				/* Voir autres réglages dans a.css, aa.css et aaa.css */
			}
		/* - Tailles de polices (AAA) -----------------*/
			ul#polices {
				margin-top:1.9em;
			}
			ul#polices li a {
				display:block;
				width:20px;
				height:25px;
			}
			ul#polices li#a_petit,
			ul#polices li#a_moyen {
				width:21px;
				background:transparent url(images/petitsPoints.gif) repeat-y 100% 0%;
			}
			ul#polices li#a_petit a {
				background: transparent url(images/a_petit.gif) no-repeat;
			}
			ul#polices li#a_moyen a {
				background: transparent url(images/a_moyen.gif) no-repeat;
			}
			ul#polices li#a_grand a {
				background: transparent url(images/a_grand.gif) no-repeat;
			}
		/* - Contact -----------------*/
			div#zoneContact {
				background:#FFF;
				position:relative;
				z-index:4;
			}
			div#zoneContact.ouvert {
				background: transparent url(images/fondContact_ouvert.gif) no-repeat 50% 0%;
			}
			div#zoneContact.ferme {
				background: transparent url(images/fondContact_ferme.png) no-repeat 50% 0%;
				height:30px;
			}
			div#zoneContact.ouvert div#zoneContactInterne {
				background: transparent url(images/fondContact_ouvert_bas.gif) no-repeat 50% 100%;
			}
			div#zoneContact h2 {
				font-size:1em;
				margin-bottom:15px;
			}
			div#zoneContact div#ecrire {
				width:320px;
				float:left;
				margin:35px 0 0 20px;
				position:relative;
				z-index:5;
			}
			html > body div#zoneContact div#ecrire { /* Pour l'affichage des autres navigateurs que IE6 */
				margin-left:0;
				padding-left:40px;
			}
			div#zoneContact div#ecrire div#nom,
			div#zoneContact div#ecrire div#courriel {
				width:150px;
				float:left;
			}
			div#zoneContact div#ecrire div#nom input,
			div#zoneContact div#ecrire div#courriel input {
				width:133px;
				padding:2px;
				margin-bottom:7px;
			}
			form#frmContact {
				margin-bottom:25px;
			}
			form#frmContact p {
				font-size:0.7em;
				margin-bottom:8px;
			}
			form#frmContact label {
				font-size:0.7em;
				display:block;
				margin-bottom:2px;
			}
			form#frmContact #txtMessage {
				margin-bottom:8px;
				width:287px;
				height:80px;
			}
			form#frmContact #btnContact {
				background:#eaeaea;
				padding:2px;
				font-size:0.8em;
			}
			div#zoneContact div#contacter {
				width:210px;
				position:relative;
				z-index:5;
				float:left;
				margin-top:35px;
				padding:0 0 25px 25px;
				background:transparent url(images/petitsPoints.gif) repeat-y 0% 0%;
			}
			div#zoneContact div#contacter p {
				font-size:0.8em;
			}
	/* - PIED DE PAGE -----------------------------------------------------*/
		p#piedPage {
			font-size:0.7em;
			padding-top:2px;
			padding-bottom:2px;
			position:relative;
			left:10px;
			margin-bottom:15px;
			display:inline;
		}
		html > body p#piedPage { /* Pour l'affichage des autres navigateurs que IE6 */
			padding-bottom:0;
		}
		p#piedPage img {
			margin-right:5px;
			position:relative;
			top:5px;
		}
		p#piedPage a {
			font-size:1em;
		}
		p#piedPage span.ligne {
			margin:0 5px;
		}
/* -- STYLES SPÉCIFIQUES ACCUEIL --------------------------------------------------------------------------------------------------*/
	/* - ACCÈS CLIENT -----------------------------------------------------*/
		form#frmAccesClient {
			position:relative;
			bottom:0;
			left:12px;
			width:324px;
			background:transparent url(images/accesClient_bas.gif) no-repeat 0% 100%;
			padding-bottom:10px;
		}
		form#frmAccesClient.ferme {
			bottom:-75px;
			/* Voir dans aaa.css pour exception */
		}
		form#frmAccesClient a {
			font-size:0.7em;
			text-decoration:none;
			color:#404040;
			font-weight:bold;
			display:block;
			background: transparent url(images/accesClient_haut_ouvert.gif) no-repeat 0% 0%;
			padding:14px 0 10px 18px;
		}
		form#frmAccesClient a span {
			/* Voir dans a.css, aa.css et aaa.css */
		}
		
		form#frmAccesClient.ferme a span {
			background-image:url(images/flecheAcces_haut.gif);
		}
		form#frmAccesClient p {
			font-size:0.7em;
			padding: 0 0 10px 22px;
			display:block;
		}
		form#frmAccesClient label {
			font-size:0.7em;
			display:block;
			margin-bottom:2px;
		}
		form#frmAccesClient div#usager {
			margin-left:12px; /* Pour IE6 */
		}
		html > body form#frmAccesClient div#usager { /* Pour l'affichage des autres navigateurs que IE6 */
			margin-left:22px;
		}
		form#frmAccesClient div#usager,
		form#frmAccesClient div#motPasse {
			width:130px;
			float:left;
		}
		form#frmAccesClient input#txtUsager,
		form#frmAccesClient input#txtMotPasse {
			width:115px;
			padding:2px;
			font-size:0.8em;
		}	
		form#frmAccesClient input#btnAccesClient {
			position:relative;
			/* Voir autres réglages dans a.css, aa.css et aaa.css */
		}	
	/* - PORTLETS DE DROITE -----------------------------------------------*/
		div#portlets {
			position:relative;
			top:-15px; /* Pour IE6 */
			font-size:0.8em;
		}
		html > body div#portlets { /* Pour l'affichage des autres navigateurs que IE6 */
			top:15px;
		}
		div#portlets div {
			background:#FFF;
			border:1px solid #dedede;
			margin:15px 0 0 11px;
			width:197px;
			padding:5px;
		}
		div#portlets div a:link,
		div#portlets div a:visited {
			color:#404040;
			text-decoration:none;
			margin:0 5px;
		}
		div#portlets div a:hover,
		div#portlets div a:active,
		div#portlets div a:focus {
			text-decoration:underline;
		}
		/* - Coordonnées -----------------*/
		div#portlets div#coordonnees {
			font-size:0.95em;
			padding:6px;
		}
		div#portlets div#coordonnees a {
			color:#21651A;
			margin:0 0 6px 0;
		}
/* -- STYLES SPÉCIFIQUES DÉCLINAISONS ---------------------------------------------------------------------------------------------*/
	div#contenu.section div#colonneGauche h1 {
		margin-left:1.1em;		
	}
	/* - FIL D'ARIANE -----------------------------------------------------*/
		div#filAriane {
			/*font-size:0.85em;*/
		}	
	/* - CONTENU ----------------------------------------------------------*/
		div#colonneGauche ul.autresclients span.em {
			display: block;
			color:#21651A;
		}
		div#colonneGauche ul.autresclients li a:link,
		div#colonneGauche ul.autresclients li a:visited {
			color: #404040;
			text-decoration:none;
			padding-right:15px;
			background:transparent url(images/liens.gif) no-repeat 100% 2px;
		}
		div#colonneGauche ul.autresclients li a:hover,
		div#colonneGauche ul.autresclients li a:active,
		div#colonneGauche ul.autresclients li a:focus {
			text-decoration:underline;
		}
		div#colonneGauche #form label, #assainissement label {
			display:block;
			font-size:0.9em;
			margin-top:20px;
		}
		div#colonneGauche #form p {
			margin:0;
			font-weight:bold;
		}
		div#colonneGauche #form div div {
			float:left;
			margin-right:20px;
		}
		div#colonneGauche #form div div.message {
			clear:left;
			float:none;
			padding-top:1px;
		}
		div#colonneGauche #form	#f_message {
			width:468px;
		}
		div#colonneGauche #form input,
		div#colonneGauche #form textarea {
			padding:2px;
		}
		div#colonneGauche #form #btn-formulaire {
			margin-top:15px;
			border:solid 1px #CCC;
			background:#FCFCFC;
		}
		div#contenu table {
			width:475px;
			margin:0 auto;
			font-size:0.9em;
			text-align:left;
		}
		div#contenu table caption {
			font-weight:bold;
			margin-bottom:9px;
			border-bottom:solid 1px #CCC;
		}
		div#contenu table th {
			background:#FCFCFC;
		}
		div#contenu table tr {
			background:#FFF;
			line-height:2em;
		}
		div#contenu table tr.impair {
			background:#EEE;
		}
		div#contenu table td {
			padding:2px 5px;
		}
		div#contenu div#carte {
			border:1px solid #CCCCCC;
			margin:20px 30px 20px 20px;
			overflow:hidden;
			width:542px;
			height:337px;
		}