/*COULEURS*/

/*	#333333; /* gris niveau 4 (police) */
/*	#666666; /* gris niveau 3 (titre clients) */
/*	#999999; /* gris niveau 2 (police box acces clients) */
/*	#cccccc; /* gris niveau 1 (BG content) */
/*	#4a4949; /* gris (BG body down) */
/*	#68b022; /* vert clair (logo) */
/*	#21a02d; /* vert foncé (logo) */
/*	#dbdbdb; /* gris (BG box) */

* 
{
	margin: 0;
	padding: 0;
}

body 
{
	text-align: center;
	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size: 78%;
	background:#4a4949 /* gris (BG body down) */ url(../images/BG-body-top.png) repeat-x top left;
	color:#333333; /* gris niveau 4 (police) */
}

/*///////////////////////////////////////  TITRES   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
h1 span, h2 span, h3 span{position:absolute;margin-top:-2000px;}

h1 {font-size:1.8em}
h2 {font-size:1.5em}
h3 {font-size:1.2em}
h4 {font-size:1.1em}
h5 {font-size:1em;}
h6 {font-size:0.8em;}
/*   /TITRES   */


/*///////////////////////////////////////  PARAGRAPHES    ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
p {font-size:1em;}


/*///////////////////////////////////////  LISTES A PUCES   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
ul li{list-style-type:none;list-style-position:outside;}
ol li{list-style-position:inside;}


/*///////////////////////////////////////   LIENS   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
/*	*:link	=> lien pas encore visité
	*:visited	=> lien déjà visité
	*:hover	=> lorsque l'on pointe le lien
	*:active	=> lorsque l'on clic sur le lien
	*:focus	=> lorsque le lien reçoit le focus (touche Tab par ex)
* repecter ordre d'écriture des styles!!
*/

a, a:link {text-decoration:underline; color:#68b022; /* vert clair (logo) */}
a:hover, a:active, a:focus {text-decoration:underline;color:#000000; /*noir*/}
a.select {text-decoration:underline;}
/*   /LIENS   */


/*///////////////////////////////////////   IMAGES   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
img {border:none;vertical-align:middle;}


/*///////////////////////////////////////   BANDEAU DETECTION MOBILE ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
#annonce_site_mobile {
   font-size: 2.5em;
   padding : 20px 10px;
   text-align : center;
   /*border: 1px solid #68b022;*/
   margin: 20px 0 0 0;
   background-color:#FFFFFF;
   position:absolute;
   right:0;
   width:65%;
}

#annonce_site_mobile a {
   font: 2em bold;
}


/*///////////////////////////////////////   CONTAINER et CONTENU ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
#container {
	text-align:left;
    width:920px;
	margin:0 auto;
    font-size: 1em;
    line-height: 1.2em;
	position:relative;
}
#container-top {clear:both; background:url(../images/BG-container-top.png) no-repeat top left; width:920px; height:20px;}
#container-bottom {clear:both; background:url(../images/BG-container-bottom.png) no-repeat top left; width:920px; height:20px;}

#contenu-up {
	clear:both; 
	background:#333333 url(../images/BG-container-up.png) repeat-y top left; 
	width:880px;
	padding:0 20px;
}
#contenu-up.menu-packs-accueil {position:relative;}
#contenu-down {
	clear:both; 
	background:#4a4949 url(../images/BG-container-down.png) repeat-y top left; 
	width:880px;
	padding:0 20px;
}
/*   /CONTAINER et CONTENU */


/*///////////////////////////////////////   HEADER   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
#header {
	background-color: #333333; /* gris niveau 4 (police) */
	height:auto !important;/*IE*/
	height:175px;/*IE*/
	min-height:175px;
}
/*   /HEADER   */

/*///////////////////////////////////////   FOOTER   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
#footer {
	text-align:center;
	clear:both;
	margin:5px 0 30px 0;
	padding:0;
	color:#999999;
}
#footer a, #footer a:visited{
	color:#cccccc;
	text-decoration:none;
}
#footer a:hover{
	color:#cccccc;
	text-decoration:underline;
}
/*   /FOOTER   */


/*///////////////////////////////////////   CONTENT ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
#content {
	clear: both;
	padding:0 10px;
	background-color:#cccccc; /* gris niveau 1 (BG content) */
	overflow:hidden; /*cela empeche aux flottants de dépasser*/
	width:860px;
}
#content-top {clear:both;background-color:#cccccc; /* gris niveau 1 (BG content) */ /*background:url(../images/BG-content-top.png) no-repeat top left;*/ width:880px; height:10px;}
#content-bottom {clear:both; background:#cccccc url(../images/BG-content-bottom.png) no-repeat top left; width:880px; height:10px;}

/* colonnes */
#partie-gauche-accueil {
	float:left;
	display: inline; /* bug IE */
	width:320px;
}
#partie-centre-accueil {
	float:left;
	display: inline; /* bug IE */
	width:320px;
	margin:0 10px;
}
#partie-droite-accueil {
	float:left;
	display: inline; /* bug IE */
	width:200px;
}
#partie-gauche {
	float:left;
	display: inline; /* bug IE */
	width:650px;
	margin:0 10px;
}
#partie-droite {
	float:left;
	display: inline; /* bug IE */
	width:200px;
}
#partie-centre {
	width:860px;
}
#partie-centre.partie-packs {position:relative;}

/* liens accueil */
#partie-gauche-accueil a, #partie-droite-accueil a {text-decoration:none;}
.lien-suivant {font-weight:bold;text-align:right;padding-right:10px;}
.lien-suivant a {text-decoration:none;}
.box-gauche .lien-suivant, .box-droite .lien-suivant {background-color:#dbdbdb; /* gris (BG box) */}
.box-centre .lien-suivant {background-color:#21a02d; /* vert foncé (logo) */}
#partie-centre-accueil a {color:#333333;}
#partie-centre-accueil .lien-suivant a{color:#FFFFFF;}
.lien-video {font-weight:bold;text-align:center;margin-top:5px;}
#partie-gauche-accueil .lien-video a {color:#333333;}
#partie-centre-accueil a:hover,
#partie-centre-accueil .lien-suivant a:hover,
#partie-gauche-accueil .lien-video a:hover  {color:#000000; /* noir */}

/* box */
.box-gauche, .box-centre {width:320px;}
.box-droite {width:200px;}
.box-centre {background-color:#21a02d; /* vert foncé (logo) */}
.box-texte {padding:20px 10px 0 10px;clear:both;}
.box-gauche, .box-gauche .box-texte, .box-droite .box-texte {background-color:#dbdbdb; /* gris (BG box) */}
.box-texte iframe {width:188px; height:188px;}
.box-image {
	width:224px;
	margin:0 auto;
	height:auto !important;/*IE*/
	height:159px;/*IE*/
	min-height:159px;
}
.box-image-droite {width:180px;height:80px;text-align:center;}
.box-bottom {background:url(../images/BG-box-gris-gauche-bottom.png) no-repeat top left; width:320px; height:10px;}
.box-bottom-vert {background:url(../images/BG-box-vert-centre-bottom.png) no-repeat top left; width:320px; height:10px;}
.box-bottom-droite {background:url(../images/BG-box-gris-droit-bottom.png) no-repeat top left; width:200px; height:10px;}
.box-real {padding:14px 10px 19px 10px;clear:both;background-color:#21a02d; /* vert foncé (logo) */}
.box-real .box-image {border: #ccc 4px solid;}
.box-real .box-image img {vertical-align:top;}
/* box agences communication */
.box-agence-communication {width:642px;float:left;margin-right:10px;}
.box-agence-communication .box-texte, .box-agence-droite .box-texte {background-color:#dbdbdb; /* gris (BG box) */ }
.box-bottom-agence-communication {width:642px;height:10px;background:url(../images/box-agence-communication-bottom.png) no-repeat top left;}
.box-agence-droite {width:208px;float:left;margin-bottom:10px;}
.box-bottom-agence-communication-droite {width:208px;height:10px;background:url(../images/box-agence-coordonees-bottom.png) no-repeat top left;}
/* box services */
.box-services, .box-services-pack {width:208px;float:left;}
.box-bottom-services {width:208px;height:10px;}
.box-services .box-texte {height:auto !important;/*IE*/	height:723px;/*IE*/	min-height:723px;}
.box-services-pack .box-texte {height:auto !important;/*IE*/height:465px;/*IE*/	min-height:465px;}
#services-web .box-texte {background-color:#9f9f9f;}
#services-ecommerce .box-texte {background-color:#ababab;}
#services-impression .box-texte {background-color:#c3c3c3;}
#services-referencement .box-texte {background-color:#b7b6b6;}
#services-web, #services-ecommerce {margin-right:9px;}
#services-web .box-bottom-services {background:url(../images/box-bottom-services-web.png) no-repeat top left;}
#services-ecommerce .box-bottom-services {background:url(../images/box-bottom-services-ecommerce.png) no-repeat top left;}
#services-impression .box-bottom-services {background:url(../images/box-bottom-services-impression.png) no-repeat top left;}
#services-impression {margin-left:10px;}
#services-referencement .box-bottom-services {background:url(../images/box-bottom-services-referencement.png) no-repeat top left;}
/* box realisations */
.box-realisations {width:208px;float:left;background-color:#dbdbdb; /* gris (BG box) */margin:0 9px 10px 0;}
.last-box {margin:0 0 10px 1px;}
.box-top-realisations {background:url(../images/box-references-top.png) no-repeat top left;width:208px;height:10px;}
.box-bottom-realisations {background:url(../images/box-references-bottom.png) no-repeat top left;width:208px;height:10px;}
.box-realisations .box-image {
	width:188px;
	margin:0 auto;
	height:auto !important;/*IE*/
	height:130px;/*IE*/
	min-height:130px;
}
.box-realisations .box-image img {width:188px; height:130px;}
.box-ref-img {width:500px;margin:0 30px 0 10px;float:left;display:inline;}
.box-ref-img img {width:500px; height:357px;}
.box-ref-content {margin:0 10px 0 0;float:left;width:310px;display:inline;}
.box-ref-partage{overflow:hidden; margin-top:40px;}
.box-ref-titre-partage{text-align:left; margin-top:10px; float:left; width:50%;}
.box-ref-titre-partage span{color:#6BAF25; font-style:italic; font-weight:bold;}
.box-ref-twitter{text-align:right; margin:6px 0 0 85px; float:left;}
.box-ref-twitter a{margin-left:5px;}
/* box actualites */
.box-actualites {width:860px;background-color:#dbdbdb; /* gris (BG box) */ overflow:hidden;margin-bottom:10px;}
.box-actualites-top {background:url(../images/box-actualites-top.png) no-repeat top left; width:860px;height:10px;}
.box-actualites-bottom {background:url(../images/box-actualites-bottom.png) no-repeat top left; width:860px;height:10px;clear:both;}
.box-actualites-img {width:224px;margin:0 30px 0 10px;float:left;display:inline;}
.box-actualites-img img {width:224px;}
.box-actualites-content {margin:0 10px 0 0;float:left;width:586px;display:inline;}
/* box espace client */
.box-espace-client {float:left; width:325px; margin:20px 0 0 0;}
.box-bottom-espace-client {width:325px;height:10px;}
.box-espace-client .box-image {
	width:265px;
	margin:0 auto;
	height:auto !important;/*IE*/
	height:178px;/*IE*/
	min-height:178px;
	margin-top:10px;
}
#espace-client-apercu.box-espace-client {background-color:#68b022; /* vert clair (logo) */}
#espace-client-apercu .box-image img {border:3px solid #999999; width:265px;}
#espace-client-etapes.box-espace-client {background-color:#666666; /* gris niveau 3 (titre clients) */ margin:20px 0 0 10px;}
#espace-client-commentaire.box-espace-client {background-color:#dbdbdb; /* gris niveau 3 (titre clients) */ margin:20px 0 0 10px;}

#espace-client-progression .box-bottom-espace-client,
#espace-client-commentaire .box-bottom-espace-client {background:url(../images/box-composer-message-bottom.png) no-repeat top left;}
#espace-client-progression .box-bottom-espace-client {background:url(../images/box-espace-client-gris-bottom.png) no-repeat top left;}
#espace-client-apercu .box-bottom-espace-client {background:url(../images/box-espace-client-bottom.png) no-repeat top left;}
#espace-client-etapes .box-bottom-espace-client {background:url(../images/box-espace-client-gris-bottom.png) no-repeat top left;}
.espace-client-message .box-bottom-message {background:url(../images/box-composer-message-bottom.png) no-repeat top left;}
.espace-client-message-vemeo .box-bottom-message {background:url(../images/box-message-vemeo-bottom.png) no-repeat top left;}

#espace-client-progression.box-espace-client {background-color:#666666; /* gris niveau 3 (titre clients) */ margin:10px 0 0 10px;}
#partie-gauche-espace-client{float:left; width:660px;}
#partie-droite-espace-client{float:left; width:170px; margin:20px 5px 0px 10px; background-color:#dbdbdb; padding:5px; color:#979696;}

.espace-client-message {background-color:#dbdbdb; /* gris niveau 3 (titre clients) */ }
.espace-client-message-vemeo {background-color:#999999; /* vert clair (logo) */}
.box-bottom-message {width:325px;height:10px;}
.separation-espace-client {width:inherit; background-color:#21A02D;  margin: 20px 0 0 0; padding:0 0 10px 0;}
.message_envoye-espace_client{margin: 10px 0 0 0; font-size:14px; font-weight:bold;}
.date_espace_client{margin: 10px 10px 0 0; font-size:11px; font-style:italic; text-align:right;}


/* titres */
.titre-realisation {font-size:1.2em;font-weight:bold;margin:10px 0;color:#ffffff; /* blanc */}
.titre-realisations {font-size:1.3em;font-weight:bold;margin-bottom:5px;color:#333333; /* gris niveau 4 */}
#partie-centre-accueil .titre-realisation a {text-decoration:none;color:#ffffff;}
#partie-centre-accueil .titre-realisation a:hover {color:#000000;}
.titre-blog {font-size:1.1em;font-weight:bold;}
.date-blog {font-size:0.9em;margin-top:2px;color:#999999; /* gris niveau 2 (police box acces clients) */}
#partie-gauche h2 {margin-bottom:10px;}
#partie-centre h3 {margin-bottom:20px;}
.titre-actualites {font-size:1.5em;font-weight:bold;margin-bottom:5px;}
.sous-titre-services, .box-agence-communication .box-texte p.sous-titre-services {font-weight:bold;padding:20px 0 10px 0;color:#21a02d; /* vert foncé (logo) */ text-transform:uppercase;font-size:1.1em;}

/* liens */
.titre-realisations a {color:#333333; /* gris niveau 4 */ text-decoration:none;}
.titre-realisations a:hover {color:#000000; /* noir */ text-decoration:underline;}
.lien-references a, .lien-voir-details a{color:#333333; /* gris niveau 4 */ }
.lien-references a:hover, .lien-voir-details a:hover{color:#000000; /* noir */}
.lien-retour {text-align:right;margin:-15px 0 7px 0;color:#666666;}
.lien-retour a {color:#999999;text-decoration:underline;}
.lien-retour a:hover {color:#333333;}

/* listes */
li.articles-blog {
	padding-bottom:6px;
	height:auto !important;/*IE*/
	height:47px;/*IE*/
	min-height:47px;

}
.box-services ul li, .box-services-pack ul li {
	/*list-style-type:none;
	list-style-position:inside;
	list-style-image::url(../images/puce-grise.png); */
	background:transparent url(../images/puce-grise.png) no-repeat scroll 0 3px;
	padding-left:10px;
	margin-bottom:3px;
	display:inline-block;
}
.box-services ul.lien-references li {
	background:none;
	padding-left:0;
	margin-bottom:3px;
	font-style:italic;
}
.box-services-pack ul {
	height:auto !important;/*IE*/
	height:147px;/*IE*/
	min-height:147px;
}
li.liste-actu {padding-bottom:15px;}

/* styles de texte, de paragraphe */
.texte-realisation {height:auto !important;/*IE*/ height:30px;/*IE*/ min-height:30px;}
.box-realisations .box-texte {padding:10px 10px 0 10px;clear:both;text-align:center;}
#recherche-realisations {clear:both;margin:10px 0 0 0;width:840px;background-color:#B7B6B6;padding:10px;font-weight:bold;}
#recherche-realisations p {display:inline;}
.intro-services {font-weight:bold;}
.lien-voir-references {padding:20px 0 7px 0;font-weight:bold;color:#21a02d; /* vert foncé (logo) */}
.lien-voir-details {padding:20px 0 7px 0;font-weight:bold;color:#333333;}
.box-agence-communication .box-texte p {clear:both;padding:0 0 10px 0;}
#services-referencement .box-texte p.imageadwords {text-align:center;padding:15px 0;}
/* packs */
.p-prix-pack{padding: 35px 0 0 0 ;}
.p-pre-commande-pack{padding: 158px 0 0 0 ;}
.p-pre-commande-pack-ecommerce{padding: 25px 0 0 0 ;}
.prix-pack{font-size:36px;color:#339900;font-weight:bold;}
.texte-pack{margin:0;padding:0 0 30px 0; font-weight:bold; font-size:1.1em;}
.texte-pack p {padding-top:5px;}
.sans-engagement{font-size:16px; font-weight:bold; color:#68b022; text-align:center; padding-top:15px;}
/*#bouton-prereserver {position:absolute;width:250px;height:75px;left:610px;}
#bouton-prereserver img {position:fixed;}*/

/* styles espace client */
.etape-passee{color:#999999; /* gris niveau 2 (police box acces clients) */}
.etape-active{font-weight:bold; font-size:14px; font-style:italic; color:#68b022;}
.etape-future{color:#ffffff;}
.text-image-espace-client {text-align:center; margin: 3px 0 0 0; font-size:11px; color:#FFFFFF;}
.text-image-espace-client a{color:#fff; text-decoration:underline;}
.text-image-espace-client a:hover{color:#000000; text-decoration:none;}

/* Barre de progression espace client */
#barre-progression {width:300px; border:solid 1px black;height:20px; margin:20px 10px 13px 10px;}
#interieur-barre-progression {background-color:#68b022;height:inherit;height:18px;text-align:right; padding:2px 0 0 0; font-size:14px; font-weight:bold; color:#FFFFFF;}

/* navigation pages */
#nav-pages {clear:both; width:860px; text-align:right; margin-top:10px;}
#nav-pages a {
	background-color:#DBDBDB;
	color:#666666;
	margin:2px;
	padding:1px 5px;
	text-decoration:none;
}
#nav-pages a:hover {
	background-color:#DBDBDB;
	color:#68b022; /* vert clair (logo) */
}
#nav-pages span{
	background-color:#68b022; /* vert clair (logo) */
	color:#FFFFFF;
	font-weight:bold;
	margin:2px;
	padding:1px 5px;
}
/*   /CONTENT */


/*///////////////////////////////////////   FORMULAIRES   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
form{margin-top:10px;}
.ligne	{
	background-color:#dbdbdb; /* gris (BG box) */
	margin:0 0 5px 0!important;
	padding:10px; 
	list-style:none!important; 
	text-align:left;
	line-height:1.3em;
	overflow:hidden;
	width:840px;
}
.ligne p {
	clear:both;
	margin:8px 0;
	overflow:hidden; /*cela empeche aux flottants de dépasser*/
	width:100%;
}
.libelle {text-align:left;float:left;width:300px;padding-top:3px;}
.champs {text-align:left;float:left;width:520px;}
.champs input, .champs textarea, .champs select {
	/*background:#FFFFFF none repeat scroll 0 0;*/
	border:1px solid #999999;
	color:#333333;
	font-family:"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size:1em;
	padding:3px;
	margin-top:3px;
	float:left;
}


.champs input {height:20px;width:300px;}
.champs select {width:308px;}
.champs option {padding:0 3px;}
.champs input.radio {width:10px;border:medium none;height:inherit;margin:1px 5px 0 0;padding:0;}
.champs input.checkbox {width:10px;border:medium none;height:inherit;margin:1px 5px 0 0;padding:0;}
.champs input.file {border:medium none;height:inherit;}
.champs input.devis-budget {height:20px;width:150px;}
.champs textarea {width:95%;}

/* styles formulaires */
.texte-ok {}
.texte-error {color:#ff0000;}
.bouton-defaut{
	font-weight:bold;
	width: auto;
    background-color: #999999; 
    border: 1px solid #666666;
    padding:2px;
	cursor:pointer;
}
.form-erreur {color:#ff0000;font-weight:bold;margin:10px 0;}
.form-reussi {font-weight:bold;margin:10px 0;}

/* formulaire acces clients */
#form-acces-clients {padding:17px 10px 0 10px;overflow:hidden;margin:0;background-color:#dbdbdb; /* gris (BG box) */width:180px;}
#form-acces-clients p {
	margin:0;
	padding:0; 
	text-align:left;
	line-height:1.3em;
}
#form-acces-clients p input.case {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #999999;
	color:#333333;
	font-family:"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size:1em;
	margin-top:3px;
	color:#999999; /* gris niveau 2 (police box acces clients) */
	width:172px;
	padding:1px 3px;
}
#form-acces-clients .bouton-defaut {margin-top:5px;float:right;}

/* formulaire choix typess */
#form-choix-types {display:inline;margin:0 0 0 5px;}
#form-choix-types select {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #999999;
	color:#333333;
	font-family:"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size:1em;
	padding:3px;
	width:220px;
}
#form-choix-types option {padding:0 3px;}

/*   /FORMULAIRES   */

/*///////////////////////////////////////   TABLEAUX   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
table {
	margin:0 10px 0 0;
	/*background-color:#cccccc; /* gris niveau 1 (BG content) */
	font-size:12px;
	width:600px;
	border:1px solid #AFAEAE;
	float:left;
}
table tr{}
table td {padding:5px 5px 5px 10px;background-color:#dbdbdb; /* gris (BG box) */ vertical-align:top; }
table tr.libelles {font-weight:bold;}
table tr.libelles td {background-color:#bdbcbc;padding-left:5px;}
table td.colonne2 {width:80px;text-align:center;padding:5px 0;}
table tr.ligne-impair td {background-color:#e2e2e2;}
/*   /TABLEAUX   */

	
/*///////////////////////////////////////   DIVERS   ///////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////*/
hr{margin:0;border:none;height:1px;clear:both;}
.clr5 {clear:both;display:block;margin: 0;_margin: -5px 0;padding:0;font-size:1px;height:5px;border:none;background:none;color:#fff;}
.clr10 {clear:both;display:block;margin: 0;_margin: -5px 0;padding:0;font-size:1px;height:10px;border:none;background:none;}

.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}

.floatleft {float:left;}
.floatright {float:right;}
/*   /DIVERS   */