@charset "utf-8";
/* CSS Document */

/*
Vert pomme : #c2d547
Violet : #637392
Orange : #FB5D13
Rouge : #E1360F
*/

body{margin:auto; background:url(image/fond_global.gif) repeat-y center; text-align:center; background-color:#DBDBDB; color:#303030; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
#global	{width:980px; margin:auto; text-align:left;}
#content {clear:both; margin: 0 0 0 1px; }
.clear {clear:both;}
p {margin:0}


/* *********** MISE EN FORME *********** */
a img {border:0;}
.taille-neuf {font-size:9px;}
.taille-dix {font-size:10px;}
.taille-onze {font-size:11px;}
.taille-douze {font-size:12px;}
.taille-treize {font-size:13px;}
.taille-quatorze {font-size:14px;}
.taille-vingt {font-size:20px;}

.violetciel{color:#bbd1fd;}
.violet {color:#393E68;}
.jaune {color:#E8B20A;}
.vert {color:#A9B837;}
.orange {color:#FA6310;}
.rouge {color:#D8300B;}
.gras {font-weight:bold;}
.blanc {color:white;}

.bordure { background:url(image/fond_td_offres.gif) top left no-repeat;}



/* *********** HEADER *********** */
#header { height:127px;}
#header #logo { margin:10px 0 0 60px; float:left;}
#header #suividecommande { width:260px; height:19px; padding-top:2px; background:url(image/fond_suividecommande.gif) no-repeat; color:white; text-align:center; font-size:11px; float:left; margin:0 0 40px 450px;}
#header #suividecommande #int_suividecommande { padding-right:13px; margin-right:13px; border-right:1px solid white;}
#header #suividecommande #int_suividecommande a {color:#fff;}
#header #suividecommande #int_prix { color:#c2d547; font-weight:bold;}

#header #espaceclient {float:left; margin:0 0 0 160px;}
#header #espaceclient p#espace_logue { width:450px; height:38px; background:url(image/fond_espaceclient.gif) no-repeat; padding:7px 0 0 110px; font-size:12px;}
#header #espaceclient p#opt_espaceclient {padding-left:110px;}
#header #espaceclient p#opt_espaceclient a {color:#FB5D13; font-size:11px;}
#header #espaceclient input[type=submit] {width:25px; height:16px; margin:0 0 5px 10px; background:url(image/ok_espaceclient.gif) no-repeat; border:0; font-size:11px; color:#FFF; font-weight:bold;}


/* *********** MENU *********** */
#menu { margin:0 0 0 -10px;}
#menu ul li {list-style:none; float:left;}

a.btn_accueil {background-image:url(image/menu/accueil.gif); display:block; width:102px; }
a.btn_accueil:hover{background-image:url(image/menu/accueil_on.gif); display:block; width:102px;}
a.current_accueil{background-image:url(image/menu/accueil_on.gif); display:block; width:102px;}

a.btn_commander {background-image:url(image/menu/commander.gif); display:block; width:122px; }
a.btn_commander:hover{background-image:url(image/menu/commander_on.gif); display:block; width:122px;}
a.current_commander{background-image:url(image/menu/commander_on.gif); display:block; width:122px;}

a.btn_offres {background-image:url(image/menu/offres.gif); display:block; width:123px; }
a.btn_offres:hover{background-image:url(image/menu/offres_on.gif); display:block; width:123px;}
a.current_offres{background-image:url(image/menu/offres_on.gif); display:block; width:123px;}

a.btn_realisation {background-image:url(image/menu/realisation.gif); display:block; width:165px; }
a.btn_realisation:hover{background-image:url(image/menu/realisation_on.gif); display:block; width:165px;}
a.current_realisation{background-image:url(image/menu/realisation_on.gif); display:block; width:165px;}

a.btn_contact {background-image:url(image/menu/contact.gif); display:block; width:158px; }
a.btn_contact:hover{background-image:url(image/menu/contact_on.gif); display:block; width:158px;}
a.current_contact{background-image:url(image/menu/contact_on.gif); display:block; width:158px;}


/* *********** FOOTER *********** */
#footer {text-align:center;  clear:both;}
#footer p, #footer p a {color:#777; margin:2px; text-decoration:none}


/* *********** ACCUEIL *********** */
#accueil {clear:both; padding: 0 0 0 26px;}
#accueil #gauche {width:225px; float:left;}
#accueil #gauche #cingetapes { width:225px; background:url(image/encart-en5etapes.gif) no-repeat; padding:27px 0 0 10px; font-size:11px; color:#303030;}
#accueil #gauche #cingetapes ul {list-style:none; margin:0; padding:0;}
#accueil #gauche #cingetapes ul li {text-transform:uppercase; border-bottom: 1px dashed #999; width:200px; font-weight:bold;}
#accueil #gauche #cingetapes ul li span { color:#637392; font-size:18px; font-weight:bold;}

#accueil #droite { margin:0 0 0 5px; float:left; width:693px;}

/* Les packs */
#accueil #droite #lespacks { font-size:11px;text-align:left; margin: 15px 0 0 0px; width:693px;}
#accueil #droite #lespacks .photos {font-size:12px;}
#accueil #droite #lespacks img {margin: 5px 0;}
#accueil #droite #lespacks .ensavoirplus a { padding:0 0 0 10px; font-size:10px; color:#666}

#accueil #droite #lespacks #packstart {float:left; width:164px; height:105px; background:url(image/encart-packstart.gif) no-repeat; padding:30px 0 0 95px;}
#accueil #droite #lespacks #packstart p{width:162px;}
#accueil #droite #lespacks #packstart p .prix {color:#637392; font-size:19px; font-weight:bold;}

#accueil #droite #lespacks #packultimum {float:left; height:100px; width:213px; background:url(image/encart-packultimum.gif) no-repeat; padding:30px 15px 0 95px; margin:0 0 0 5px;}
#accueil #droite #lespacks #packultimum p .prix {color:#E1360F; font-size:19px; font-weight:bold;}

#accueil #droite #lespacks #autrespacks {float:left; width:0px;}
#accueil #droite #lespacks #autrespacks p {margin:0px; padding:3px 0 0 30px; color:#666;}
#accueil #droite #lespacks #autrespacks p a {color:#666; margin:0 0 0 5px;}
#accueil #droite #lespacks #autrespacks p#packmedium {background: url(image/encart-packmedium.gif) no-repeat; width:118px; height:38px;}
#accueil #droite #lespacks #autrespacks p#packpremium {background: url(image/encart-packpremium.gif) no-repeat; width:118px; height:38px;}
#accueil #droite #lespacks #autrespacks p#packmillenium {background: url(image/encart-packmillenium.gif) no-repeat; width:118px; height:38px;}


/* *********** NOS OFFRES *********** */
#offres {padding: 0 0 0 26px;}
#offres table#tableau  {background:url(image/fond_offres.jpg) no-repeat; height:1162px;}
#offres tr {padding:0;}
#offres td {align:center;}


/* *********** REALISATION *********** */
#realisation {padding: 0 0 0 26px;}
#realisation #gauche {float:left; width:245px; border-right: 1px dotted #999;}
#realisation #gauche p { text-align:justify; padding:0 15px 0 0; }

#realisation #droite .encart-realisation {width:213px; height:210px; background:url(image/fond_nosrealisations.gif) no-repeat; margin:0 0 40px 10px; float:left; text-align:center;}
#realisation #droite .encart-realisation h4 {color:#B7CD3E; font-size:16px; margin:0; text-align:left; margin:12px 0 0 15px;}
#realisation #droite .encart-realisation p { width:190px; margin:5px 0; text-align:left; margin:5px 0 10px 15px;}
#realisation #droite .encart-realisation .capture {width:213px; height:124px; text-align:center;}


/* *********** COMMANDER *********** */

#haut .gauche { width:420px; font-size:12px; float:left;}
#haut .droite { float:left; width:520px; vertical-align:top; display:block; text-align:right; width:346px;}

#connexion {padding: 0 0 0 26px; background:url(image/fond_homme_commander.gif) no-repeat ;}
#connexion #champ-connexion {padding-left:130px; width:785px;}
#connexion #bas .gauche { width:380px; height:200px; font-size:12px; float:left; background:url(image/fond_identifiezvous.gif) no-repeat; text-align:right; margin:0 10px 0 0 ;}
#connexion #bas .gauche a { font-size:11px; color:#303030;}
#connexion #bas .gauche form { margin:50px 30px 0 0;}
#connexion #bas .gauche form input { margin:0 0 8px 15px;}
#connexion #bas .gauche input[type=submit] {width:120px; height:28px; margin:0 0 5px 10px; background:url(image/bt_jemeconnecte.gif) no-repeat; border:0; font-size:0px;}
#connexion #bas .droite p { font-size:11px; margin:45px 0 0 75px;}
#connexion #bas .droite span { color:#FFF; font-size:12px;}
#connexion #bas .droite p#jemeconnecte { width:250px; text-align:right; margin-top:10px;}
#connexion #bas .droite { width:394px; height:200px; font-size:12px; float:left; background:url(image/fond_pasencoremembre.gif) no-repeat;}

#offrespack {padding: 0 0 0 26px; background:url(image/fond_photo_offrespack.gif) no-repeat ;}
#offrespack #champ-offres {padding-left:130px; width:785px;}
#offrespack #champ-offres h5 { width:787px; height:16px; color:#FFF; font-size:13px; background:url(image/fond_titre_offrespack.gif) no-repeat;}
#offrespack #champ-offres #questions {clear:both; width:788px;}

#offrespack #questions .question {clear:both; background:#f0f0f0; padding:10px 0 0 10px; margin:0; font-size:12px;}
#offrespack #questions .question .separateur {clear:both; border-bottom:1px dashed #999; width:720px; padding:15px; 0 15px 0;}
#offrespack #questions .question .separateur input {float:left; margin:0;}
#offrespack #questions .question .separateur .puce {float:left; margin:0 50px 0 0 ;}

#offrespack #questions .une .vignette-pack {float:left; width:215px; height:66px; margin:15px 13px 0 0;}
#offrespack #questions .une .vignette-pack p {margin:30px 0 0 50px;}
#offrespack #questions .une .vignette-pack a {color:#637392; font-size:11px; font-style:italic;}
#offrespack #questions .une input {float:left; margin:40px 6px 0 0;}
#offrespack #questions .trois .intitule {width:480px; float:left; font-size:12px;}

#offrespack #prixtotal { background:url(image/fond_prix.gif) no-repeat top; width:660px; float:left; text-align:right; padding:3px 0 0 0; margin:0 20px 0 0;}


#transfert {padding: 0 0 0 26px; background:url(image/fond_couple_transfert.gif) no-repeat ;}
#transfert #champ-transfert {padding-left:130px; width:785px;}
#transfert #champ-transfert h5 { width:787px; height:16px; color:#FFF; font-size:13px; background:url(image/fond_titre_offrespack.gif) no-repeat;}
#transfert #champ-transfert .envoifichier {clear:both; width:773px; background:#f0f0f0; padding:10px 0 0 10px; margin:0; font-size:12px;}
#transfert #champ-transfert .envoifichier form {float:left; margin:0 20px 0 0;}


#recapitulatif {padding: 0 0 0 26px; background:url(image/fond_fillette_recapitulatif.gif) no-repeat ;}
#recapitulatif #champ-recap {padding-left:130px; width:785px;}
#recapitulatif #champ-recap #bas #gauche {width:235px; height:197px; font-size:12px; background:url(image/fond_coordonnees.png) no-repeat center bottom; float:left;}
#recapitulatif #champ-recap #bas #gauche h5 {width:235px; color:#FFF; font-size:13px; background:url(image/fond_titre_coordonnees.gif) no-repeat;}
#recapitulatif #champ-recap #bas #gauche p {padding:0 0 0 10px; margin:0;}
#recapitulatif #champ-recap #bas #droite {float:left; width:530px;}
#recapitulatif #champ-recap #bas #droite h5 {width:530px; height:16px; color:#FFF; font-size:13px; background:url(image/fond_titre_recap.gif) no-repeat;}
#recapitulatif #champ-recap #bas #droite #commande {border:1px solid #dedede; padding:15px;}
#recapitulatif #champ-recap #bas #droite table {font-size:12px;}
#recapitulatif #champ-recap #bas #droite .hr { border-bottom:2px solid #dedede; width:480px;}
#recapitulatif #champ-recap #bas #droite #leprix { width:530px; background:url(image/fond_prix_recap.gif) right top no-repeat; height:30px; color:#fff; text-align:right; padding:2px 10px 0 0;}


#paiement {padding: 0 0 0 26px; background:url(image/fond_paiement.gif) no-repeat ;}
#paiement #champpaiement {padding-left:130px; width:785px;}
#paiement #champpaiement h5 {width:787px; height:16px; color:#FFF; font-size:13px; background:url(image/fond_titre_offrespack.gif) no-repeat;}
#paiement #champpaiement #bas .typepaiement {border:1px solid #dedede; padding:15px; background-color:#FFF; font-size:12px;}
#paiement #champpaiement #bas .typepaiement h6 {color:#A9B837; font-size:14px; font-weight:bold; margin:0;}


/* *********** SUIVI DE COMMANDE *********** */
#suivicommande {padding: 0 0 0 26px; background:url(image/fond_suividecommande_machine.gif) no-repeat ;}
#suivicommande #champsuivi {padding-left:130px; width:785px;}
#suivicommande #bas {clear:both;}
#suivicommande #bas h6 {color:#A9B837; font-size:14px; font-weight:bold; margin:0;}
#suivicommande #bas #facture a {color:#637392;}
#suivicommande #bas .commande {border:1px solid #dedede; padding:15px; background-color:#FFF; font-size:11px; width:460px; float:left; margin:0 30px 0 0;}
#suivicommande #bas .commande h6 { text-transform:uppercase; text-decoration:underline; color:#303030; font-size:11px; font-weight:normal;}
#suivicommande #bas .commande td {font-weight:bold;}
#suivicommande #bas .commande ul { list-style-position:inside; list-style:none;}
#suivicommande #bas .commande ul .valider {list-style-image:url(image/picto_valider.gif);}
#suivicommande #bas .commande ul li {border-bottom:1px #999 dashed; margin:6px 0; width:200px; font-weight:bold;}
#suivicommande #bas .coordonnees {width:235px; height:197px; font-size:12px; background:url(image/fond_coordonnees.png) no-repeat center bottom; float:left;}
#suivicommande #bas .coordonnees h5 {width:235px; color:#FFF; font-size:13px; background:url(image/fond_titre_coordonnees.gif) no-repeat;}
#suivicommande #bas .coordonnees p {padding:0 0 0 10px; margin:0;}


/* *********** CONTACT *********** */
#contact {padding: 0 0 0 26px; background:url(image/fond_callcenter_contact.gif) no-repeat ;}
#contact #champ-contact {padding-left:130px; width:785px;}
#contact #champ-contact #formulaire { background:url(image/fond_form_contact.gif) no-repeat;}
#contact #champ-contact #formulaire input[type=submit] {width:121px; height:28px; background:url(image/bt_envoyer.gif) no-repeat; border:0; font-size:0px;}
#contact #champ-contact #formulaire .mercimail { height:280px;}
#contact #champ-contact #formulaire .mercimail p { margin:100px 0 0 200px;}
#contact #champ-contact #formulaire .mercimail a {color:#303030;}


/* *********** CONDITIONS GENERALES *********** */
#conditions { padding:0 60px 0 30px; text-align:justify;}
#conditions h3 {color:#A9B837; font-size:15px; font-weight:bold; }
#conditions h4 {color:#FA5D12; font-size:13px; font-weight:bold; margin:0;}


/* css pour la tooltip normal */
#tooltip{ text-align:left;width:300px;position:absolute; background:#23314c; padding:2px 2px; color:#333; display:none; color:#FFF; font-size:10px; font-style:italic;}