@charset "UTF-8";
/* CSS Document */
html{background:#E5E5E5 url(../images/design/fond.jpg) repeat-x; font-size:1em; font-family:Arial, Helvetica, sans-serif;  }
body, #pied-page{ background:url(../images/design/entete.jpg) repeat-x; margin:0; padding:0;}
#conteneur,  #menu-bas{ width:920px; margin:auto;}
#conteneur{  }
a{color:#BF0000; }
a:hover{color:#FFFFFF; background:#BF0000 url(../images/design/entete.jpg) repeat-x; text-decoration:none;}
*a img:hover{border:none;}
a, a:hover, img, a img{border:none;}
h1 a img, h1 a:hover{background:none;}
h1{ position:absolute; margin-top:-55px;}
h2, h3, h4{font-family:"Arial Rounded MT Bold", Geneva, Arial, Helvetica, sans-serif;  font-weight:normal;}
.obligatoire{ color:#BF0000;}
#entete{ padding-top:60px; margin-bottom:40px;  }

/*=====================================================================================*/
/*===================================== MENU PRINCIPAL ================================*/
/*=====================================================================================*/
#menu,  #menu-bas{ position:relative; z-index:2; padding-left:15px; text-align:center; }
#menu{ text-align:left; margin-left:0px;}
#menu li, #menu-bas li{ padding-left:0;list-style:none;  display:inline; color:#FFF; font-size:0.8em;}
#menu li a, #menu-bas li a{ color:#FFF; text-decoration:none;  }
#menu li a:hover, #menu-bas li a:hover{ text-decoration:underline; background:none; }

/*=====================================================================================*/
/*===================================== MENU UTILITAIRE ===============================*/
/*=====================================================================================*/
#menu-utilitaire{ }
#menu-utilitaire li{ }
#menu-utilitaire li a{ }
#menu-utilitaire li a:hover{ }

/*=====================================================================================*/
/*======================================== ARIANE =====================================*/
/*=====================================================================================*/
#ariane{ font-size:0.8em; margin-top:-20px; padding-left:0px;}
#ariane li{display:inline; background:url(../images/design/fleche-gris.png) 0px 3px no-repeat; padding-left:15px; margin-right:5px;}
#ariane #ariane-accueil{ background:none;}

/*=====================================================================================*/
/*======================================== CONTACT =====================================*/
/*=====================================================================================*/
#formulaire-de-contact{ width:420px; color:#fff; background:url(../images/design/fond-contact-avec-ombre.png) no-repeat; height:800px; padding-top:0px; font-size:0.9em;}
#formulaire-de-contact #text-de-vente{ width:180px; margin-left:60px; margin-bottom:20px;}

#formulaire-de-contact form{width:280px; margin-left:60px;}
#formulaire-de-contact fieldset{  border:none;}
#formulaire-de-contact form label{width:80px; display:block; float:left; padding-right:10px; text-align:right; }
#formulaire-de-contact form p { margin-top:0px; margin-bottom:0px;}
#formulaire-de-contact form #p-message-{margin-top:20px;}
#formulaire-de-contact form textarea{ height:160px;}

#formulaire-de-contact #listeErreur{font-size:0.8em;  margin-bottom:20px;}
#formulaire-de-contact ul{ text-align:center;}
#formulaire-de-contact li { display:inline;  }
#formulaire-de-contact li a{ color:#fff;}
/*======================================== CONTENU ====================================*/
.contenu{ }
.contenu p { }

/*======================================== ACCUEIL ====================================*/
#accueil h2{ text-align:center;}
#accueil #pub{ height:450px; width:600px; margin:auto; }
#accueil #pub h3{ font-size:0.8em; font-style:italic; margin-top:40px;}
#accueil #bouton-pub-accueil{ margin-left:280px;}
#accueil #pub #besoins{ list-style:none; margin-left:240px; } 
#accueil #pub #besoins li{ display:block; margin-bottom:20px; }
#accueil #pub #besoins span{ } 
#accueil #affiche-publicitaire{ float:left; margin-right:10px;}
#accueil #bouton-pub-accueil{ }
#accueil #bouton-pub-accueil a, #accueil #bouton-pub-accueil a:hover, 
#portfolio #bouton-pub-accueil a, #portfolio #bouton-pub-accueil a:hover
{ background:none; text-decoration:none; background:url(../images/design/bouton-pub-accueil.png) no-repeat; padding-top:5px; color:#FFF; width:200px; padding-right:15px; height:70px; display:block;}
#accueil #bouton-pub-accueil a:hover,#portfolio #bouton-pub-accueil a:hover
{background:url(../images/design/bouton-pub-accueil-2.png) no-repeat;}

/*boite*/
#boite { list-style:none; height:200px; margin-top:-20px; }

#boite #gauche{ background:url(../images/design/boite-gauche.png) no-repeat; padding-top:2px;  height:250px; width:200px; padding-left:50px; position:absolute; margin-top:-10px; margin-left:0px; }
#boite #gauche  h3{ color:#FFF;}
#boite #gauche h3 a, #boite #gauche h3 a:hover{color:#fff; background:url(../images/design/titre-boite-cote.png) 0 18px no-repeat; display:block; padding-left:10px;   text-decoration:none; font-size:0.9em; height:30px; width:180px; margin-left:-5px; padding-top:20px; margin-top:-30px; margin-bottom:-20px;  }
#boite #gauche h3 a:hover{background:url(../images/design/titre-boite-cote-2.png) 0 18px no-repeat;}
#boite #gauche h4{ font-size:0.8em; margin-bottom:-10px;width:180px;  }

#boite #gauche .txt{ height:65px;  width:120px; font-size:0.8em; margin-left:50px; }
#boite #gauche .suite{ margin-top:-10px;font-size:0.8em;}

.date{background:url(../images/design/calendrier.png) no-repeat; width:80px; height:120px; margin-top:5px; margin-left:-18px; }
.date span{display:block;}
.date .mois{color:#FFFFFF; margin-left:30px; margin-top:-5px; padding-top:0px;font-size:1em; }
.date .jour{margin-left:28px; padding-top:5px;font-size:1.3em;}
.date .annee{font-size:0.7em; margin-left:40px; margin-top:5px;}
.date{display:block; float:left;}

/*centre*/
#boite #centre{ background:url(../images/design/boite-centre.png) no-repeat; padding-top:2px;  height:250px; width:200px; padding-left:50px; margin-top:0px; margin-left:270px; position:absolute; }
#boite #centre  h3{ color:#FFF;}
#boite #centre h3 a, #accueil #boite #centre h3 a:hover{color:#fff; background:url(../images/design/titre-boite-centre.png) 0 18px no-repeat; display:block; padding-left:10px;   margin-bottom:-50px; text-decoration:none; font-size:0.9em; height:40px; width:210px; margin-left:-25px; padding-top:20px;  position:relative; top:-30px;}
 #accueil #boite #centre h3 a:hover{background:url(../images/design/titre-boite-centre-2.png) 0 18px no-repeat;}

#boite #centre p{ height:120px; overflow:hidden; width:200px; font-size:0.8em; margin-left:-20px;}
#boite #centre p img{ float:left; margin-right:10px;}
#boite #centre .suite{ margin-top:-10px;font-size:0.8em;}
#accueil #boite #centre h4, #type_de_service #boite #centre h4{ font-size:0.8em; margin-top:0px; padding-top:0px;}
#accueil #boite #centre .txt, #type_de_service #boite #centre .txt{ margin-left:85px; width:110px; }
#accueil #boite #centre .txt p, #type_de_service #boite #centre .txt p{ margin-left:0px; width:auto; height:60px;}
#accueil #boite #centre .img, #type_de_service #boite #centre .img{ margin-left:-20px; float:left;}
#accueil #boite #centre .img a:hover, #type_de_service #boite #centre .img a:hover{ background:none;}
/*droit*/
#boite #droit{ background:url(../images/design/boite-droite.png) no-repeat; padding-top:2px;  height:250px; width:200px; padding-left:50px; margin-top:-10px; margin-left:570px; position:absolute; }
#boite #droit  h3{ color:#FFF;}
#boite #droit h3 a, #boite #droit h3 a:hover{color:#fff; background:url(../images/design/titre-boite-cote.png) 0 18px no-repeat; display:block; padding-left:10px;   margin-bottom:-50px; text-decoration:none; font-size:0.9em; height:40px; width:210px; margin-left:-40px; padding-top:20px;  position:relative; top:-30px;}
#boite #droit h3 a:hover{background:url(../images/design/titre-boite-cote-2.png) 0 18px no-repeat;}

#boite #droit .txt{ height:120px; overflow:hidden; width:200px; font-size:0.8em; margin-left:-40px;}
#accueil #boite  #droit ul { height:120px; overflow:hidden;  }
#accueil #boite  #droit ul li{ list-style:circle;}
#boite #droit .txt img{ float:left; margin-right:10px;}
#boite #droit .suite{ margin-top:-10px;font-size:0.8em;}
#boite #droit ul{ font-size:0.8em; padding-left:0px; margin-left:-20px;  width:150px; margin-top:-55px;  }
#boite #droit ul li{ margin-bottom:10px;}
/*=====================================================================================*/
/*====================================== AGENCE =======================================*/
/*=====================================================================================*/
#agence{ min-height:600px;}
#services h3 a, #services h3 a:hover{display:block; color:#fff; background:none; text-decoration:none;}
#agence h2, #agence h4, #services h3 a, #services h3 a:hover, #services h2, #portfolio h2, #lexique h2, #travailler h2,
#partenaires h2, #faq h2, #produits h2, #produits #listes-applications h3
{ background:url(../images/design/titre.png) 0 2px no-repeat; color:#FFF; padding-left:10px; padding-bottom:10px;}
#agence h4, #services h3 a{ padding-top:4px; margin-bottom:-15px;}
#agence h3, #type_de_service h3, #portfolio h3, #lexique dt, #faq #liste-des-questions li h3{ border-bottom:1px solid #000;}
#agence #equipe, #services #type_de_services_offert{ padding-left:0px; margin:auto; width:810px;}
#agence #equipe li, #services #type_de_services_offert li{ width:186px; margin-right:40px;  margin-left:40px;  float:left; list-style:none; margin-bottom:20px;}
#agence #equipe .img img, #services #type_de_services_offert .img{ display:block;  text-align:center; width:186px;  margin-bottom:15px;}


/*=====================================================================================*/
/*===================================== SERVICES ======================================*/
/*=====================================================================================*/
#services h3 a{background:url(../images/design/titre-lien.png) 0 2px no-repeat;}
#services h3 a:hover{background:url(../images/design/titre-lien-2.png) 0 2px no-repeat;}
#services #type_de_services_offert .img{  height:370px; width:235px;}
#services #type_de_services_offert li{width:235px; margin-right:20px;  margin-left:20px; }
#services #type_de_services_offert { padding-left:0px; width:880px;}
/*=====================================================================================*/
/*================================== TYPE DE SERVICE ==================================*/
/*=====================================================================================*/
#type_de_service { width:480px; min-height:700px;}
#type_de_service h2{text-align:center;}
#type_de_service #formulaire-de-contact{ position:absolute; top:150px; margin-left:460px;}
#type_de_service #boite{ margin-top:100px; position:relative; z-index:3;}
#type_de_service #boite h3{ border:none;}
#type_de_service #boite #gauche .txt{margin-left:10px; width:160px;  height:85px;}
/*=====================================================================================*/
/*===================================== PORTFOLIO =====================================*/
/*=====================================================================================*/
#portfolio .img{ float:left; margin-top:-80px; margin-left:-60px;}
#portfolio #information-sur-le-site-internet{ position:relative; left:-60px; padding-top:40px; list-style:none; }
#portfolio #bouton-pub-accueil{ margin-left:600px;}
#portfolio #bouton-pub-accueil a{ padding-left:20px;}
#portfolio .liste-portfolio li{display:inline;}
#portfolio #liste-portfolio{  margin-bottom:40px; }
#portfolio .categorie{ float:left; width:250px; margin-right:20px; margin-left:20px; }
#portfolio .categorie ul{ padding-left:0px;}
#portfolio .information-video{ margin-left:600px;}

/*=====================================================================================*/
/*===================================== LEXIQUE =======================================*/
/*=====================================================================================*/
#lexique, #faq{ min-height:700px;}
#lexique  .liste-alphabetique{ background:url(../images/design/fond-lexique.png) no-repeat; width:640px; height:80px; padding-top:20px; margin:auto;   text-transform:capitalize; padding-left:15px; }
#lexique  .liste-alphabetique li{ list-style:none; display:inline; margin:4px;}
#lexique #menu-rapide, #faq #menu-rapide{ font-size:0.8em; position:absolute; margin-left:680px; padding-left:40px; width:150px; list-style:circle;}
#lexique #menu-rapide li a , #faq #menu-rapide li a{ display:block; padding:5px 0px; border-bottom:1px dashed #666;}
#lexique dl{display:block; width:650px; }
#lexique dt{ font-weight:bold;}
#lexique dd img{ float:right; margin-left:10px; margin-bottom:10px;}
#lexique dd{margin-bottom:20px; min-height:100px;}
#recherche p{ margin-top:-60px; margin-left:650px; width:195px;}
#recherche #input-recherche{ border:none; background:url(../images/design/recherche.png) no-repeat; font-size:1.2em; padding:1px 15px 10px 35px; width:195px;}
#recherche input:focus{ border:none; }
.mot_trouver{ background:#FF0;}

/*=====================================================================================*/
/*===================================== TRAVAILLER ====================================*/
/*=====================================================================================*/
#travailler  .annonce, #partenaires .annonce{ background:url(../images/design/fond-annonce.png) no-repeat; width:840px; height:130px;  padding-top:1px;  padding-left:25px; margin-bottom:30px; margin-top:-20px; }
#travailler  .annonce h3, #partenaires .annonce h3{ font-size:1em;}
#travailler  .annonce .date, #partenaires .annonce .date{ margin-top:-20px;}
#travailler  .annonce .txt, #partenaires .annonce .txt{ font-size:0.9em; margin-top:-10px; margin-left:70px;}

#travailler #accroche{  margin-left:400px; width:480px; position:absolute; }

#travailler #formulaire-de-contact #text-de-vente{ padding-top:20px;}

/*=====================================================================================*/
/*===================================== PARTENAIRES ===================================*/
/*=====================================================================================*/
#partenaires  { min-height:900px;}
#partenaires #liste-partenaires{ width:450px; padding-left:10px;}
#partenaires #liste-partenaires li{ list-style:none;}
#partenaires  #formulaire-de-contact{ position:absolute; margin-left:480px; top:350px;}

/*=====================================================================================*/
/*========================================= FAQ ========================================*/
/*=====================================================================================*/
#faq h3{ font-size:1em;}
#faq #liste-des-questions{ padding:10px; width:650px;}
#faq #liste-des-questions li p{ margin-left:20px;}  
#faq #menu-rapide { margin-top:40px;}
.lire-la-suite{ font-size:0.8em; }
.masquer{ display:none;}

/*=====================================================================================*/
/*===================================== PRODUITS ======================================*/
/*=====================================================================================*/
#produits #boite-produit{ display:block; float:left; margin-right:20px;}
#produits #listes-applications{ min-height:600px;}
#produits #listes-applications ul{ padding-left:10px; list-style:none;}
#produits #listes-applications ul li{ border-bottom:1px dashed #666;}
#produits #listes-applications h4{ margin-bottom:-15px;}
#produits #listes-applications div{ width:400px;}
#produits #listes-applications #module-web{ float:left;}
#produits #listes-applications #applications-web{ margin-left:450px; padding-top:2px; }




.image-temoignage{ float:right; margin-left:20px; margin-bottom:20px;}
/*=====================================================================================*/
/*===================================== MENU BAS ======================================*/
/*=====================================================================================*/
#menu-bas{}
.menu-bas li{  }
.menu-bas li a{ }
.menu-bas li a:hover{ }

/*=====================================================================================*/
/*===================================== PIED DE PAGE ==================================*/
/*=====================================================================================*/
#pied-page{ background-color:#990100; margin-bottom:0;  }
#pied-page li{ list-style:none; }
#pied-page #logo-phenix-creation{ }
#pied-page #copyright{ color:#FFF; text-align:center; font-size:0.8em; padding-bottom:20px; }


/*************/
#download{ margin-top:50px;}
#download strong{display:block;}
#download img{ float:left; margin-right:10px;} 
#download strong{ padding-top:20px; margin-bottom:-10px;}
#download ul {margin-left:80px; list-style:circle;}
/*=====================================================================================*/
/*======================================= BLOG ========================================*/
/*=====================================================================================*/
#toutLeCorps{margin-bottom:150px;}

#blog{}
#blog #corps h2{ font-size:1em; border:none; margin-top:60px; margin-bottom:40px;}
#blog #menu-secondaire{width:250px;  float:right; margin-left:20px; padding-top:40px;}
#blog #menu-secondaire h2{ font-size:1em; padding-top:3px; }
#blog  #corps{ min-height:700px; width:600px;}
#blog  .masquer{ display:none;}
#blog .entry{ border-bottom:1px dashed #666; list-style:none; background:#E5E5E5 url(../images/design/fond.jpg) repeat-x;}
#blog .entry .post-body{ padding-lef:10px; padding-right:10px;}
#blog #content { padding-left:5px; }
#blog .entry h3 a{ background:#BF0000 url(../images/design/entete.jpg); color:#fff; display:block; text-decoration:none; padding:2px;}
#blog .entry .date, #blog #liste-commentaires li .date{ margin-top:-20px;}
#blog .entry .lire-la-suite{ text-align:right; font-size:0.8em; margin-right:10px;}
#blog .entry .post-body{ margin-left:80px;}
.masquer-image{ display:none;}
.afficher-image{ float:right; margin-left:20px; margin-bottom:20px;}
#blog .page{ text-align:center;}
#blog .page li{ display:inline; padding:0px; margin:0px; }
#blog .page li a{ padding:5px; }
#blog a:hover{ color:#fff; background:#BF0000 url(../images/design/entete.jpg) repeat-x;}


#blog #liste-commentaires li { min-height:150px; list-style:none; border-bottom:1px dashed #666;}
#blog #liste-commentaires li h3 a{ display:block; text-decoration:none; border-bottom:1px solid #BF0000; }
#blog #liste-commentaires li .nbr_com{ color:#666; font-size:0.8em; margin-top:-15px; margin-bottom:20px;}
#blog .notification{ margin-left:130px; font-size:0.8em;}
.masquerCAT, .masquerAutre{ display:none;}



#blog .date{background:url(../images/design/calendrier.png) no-repeat; width:80px; height:120px; margin-top:5px; margin-left:-5px; }
#blog .date span{display:block;}
#blog .date .mois{color:#FFFFFF; margin-left:25px; margin-top:-5px; padding-top:0px;font-size:1em; }
#blog .date .jour{margin-left:28px; padding-top:5px;font-size:1.3em;}
#blog .date .annee{font-size:0.7em; margin-left:40px; margin-top:5px;}
#blog .date{display:block; float:left;}

#autre-lecture h3{ font-size:0.9em;}
/*=====================================================================================*/
/*===================================== MENU SECONDAIRE ===============================*/
/*=====================================================================================*/
#blog #menu-secondaire ul{ padding-left:0px; margin-top:-15px; }
#blog #menu-secondaire li{ list-style:none; }

#blog #menu-secondaire li a{ display:block; border-bottom:1px dashed #666; padding:5px; text-decoration:none; font-size:0.8em;}
#blog #menu-secondaire li a:hover{ background:#BF0000 url(../images/design/entete.jpg) repeat-x; color:#fff; }
#blog #menu-secondaire li em { font-size:0.8em;}
#blog #menu-secondaire  h2{ border-bottom: 1px solid #666;}
#blog #menu-secondaire .sections{}
#blog code { background:#fff; border:1px solid #ccc; display:block; padding:10px;}

#blog #menu-secondaire #abonner-rss{ display:block; background:url(http://blog.phenixcreation.com/images/design/rss.png) no-repeat; height:50px; padding-top:15px; padding-left:60px; color:#ff414e; position:absolute; top:130px;}
/*=====================================================================================*/
/*======================================== CONTACT =====================================*/
/*=====================================================================================*/
#formulaire-de-contact2 #text-de-vente{ width:180px; margin-left:60px; margin-bottom:20px;}

#formulaire-de-contact2 form{ margin-bottom:50px; }
#formulaire-de-contact2 form legend{ background:#E5E5E5 url(../images/design/entete.jpg) repeat-x; padding:10px; color:#fff;}
#formulaire-de-contact2 fieldset{background:#E5E5E5 url(../images/design/fond.jpg) repeat-x; }
#formulaire-de-contact2 form label{width:120px; display:block; float:left; padding-right:10px; text-align:right; }
#formulaire-de-contact2 form p { margin-top:0px; margin-bottom:0px;}
#formulaire-de-contact2 form #p-commentaire-ajouter-un-commentaire{margin-top:20px;}
#formulaire-de-contact2 form textarea{ height:160px;}
.obligatoire{ color:#BF0000;}

#formulaire-de-contact2 li a{ color:#fff;}