@charset "UTF-8";
/* Média fluide simple
   Remarque : un média fluide exige que vous supprimiez les attributs de hauteur et de largeur du média du code HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video { max-width: 100%; }
/* IE 6 ne prend pas en charge max-width ; la largeur par défaut est donc fixée à 100% */
.ie6 img { width:100%; }

/*
	Propriétés de grille fluide Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5; dw-num-cols-tablet:		8; dw-num-cols-desktop:	10; dw-gutter-percentage:	25; 
	Inspiré par "Responsive Web Design" par Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	et le système Golden Grid par Joni Korpi
	http://goldengridsystem.com/
*/

/* Disposition mobile : 480px et moins. */

.gridContainer { width: 100%; position: relative; }
#illustration { background-image: url("../images/immeuble-mini.jpg"); background-size: cover; display: block; height: 97px; width: 100%; position:relative; }

#header { background-color: #e5007e; background-image: url("../images/fd-header.jpg"); background-repeat: no-repeat; background-size: cover; color: #fff; font-size: 14px; height: 171px; padding: 0 30px; position: relative; width: 100%;}
	
#header > h1 { font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif; font-size: 23px; font-weight: normal; margin: 0; text-transform: uppercase; }
#header > h2 { font-family: gothambold; font-size: 36px; line-height: 36px; margin: 0; text-transform: uppercase; font-weight: normal; }
#header span { display: block; font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif; font-size: 14px; margin-top: -7px; text-transform: none; }
#header > img { margin-left: 84px; }	
	

#description { background-color: #f1f2ed; position: relative; margin-top: 514	px; padding-bottom: 20px; }
.desc-g, .desc-d { display: inline-block; vertical-align: top; width: 100%; font-size:18px; color:#737373; font-family:Arial, Helvetica, sans-serif; }
.desc-g > p, .desc-d > p { line-height: 32px; margin: 0; padding: 22px; }
.desc-g span, .desc-d span { background-color: #e5007e; color: #fff; display: block; font-size: 24px; font-weight: bold; margin: 12px -22px; padding: 12px 20px; text-transform: uppercase; }

#formulaire { background-color: #fff; display: inline-block; margin-top: -50px; padding: 25px 20px 25px; width: 100%; }
#formulaire > h1 { font-family: gotham_book; font-size: 18px; line-height: 21px; margin: 0; text-transform: uppercase; }
#formulaire > P { font-family: gotham_book; font-size: 16px; line-height: 16px; margin: 6px 0; }
#avantages { display: none;}
#avantageg, #avantaged { margin: 0; width: 100%; display: block;}
#avantageg h1 {  background-color: #a1c617; background-image: url("../images/fd-vert.jpg");}
#avantaged h1 {  background-color: #63c3d1; background-image: url("../images/fd-bleu.jpg");}
.bleu > h1 { background-image: url("../images/fd-bleu.jpg") !important;}
.vert > h1 { background-image: url("../images/fd-vert.jpg") !important;}

#avantageg h1, #avantaged h1 { background-position: right top; color: #ffffff; font-family: "gotham_book"; font-size: 24px; line-height: 24px; margin: 0 0 5px; padding: 6px 10px; text-transform: uppercase; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); }
#avantageg h2, #avantaged h2  { font-family: 'gothambold'; font-size: 16px; line-height: 16px;  margin: 0; }
#avantageg > div { padding: 19px 15px 0 20px;}
#avantaged > div { padding: 19px 20px 0 15px;}
.bleu, .vert { padding-top: 0 !important;}
#avantaged > a {display: block; padding: 0 15px;}

ol.logement1 {counter-reset: immo1; list-style: none;}
ol.logement2 {counter-reset: immo2 7; list-style: none;}
ol.logement1 li { counter-increment: immo1; /* on incrémente le compteur à chaque nouveau li */ margin-bottom: 10px;}
ol.logement2 li { counter-increment: immo2; margin-bottom: 10px;}
ol.logement1 li:before { content: counter(immo1)". ";  font-family: 'gothambold'; font-size: 24px;}
ol.logement2 li:before { content: counter(immo2)". ";  font-family: 'gothambold'; font-size: 24px;}

.exemple { clear: both; display: block; padding: 0 25px; }

/*formulaire*/

input[type="text"], input[type="email"], input[type="tel"],input[type="number"], select {border: 1px solid #ebebeb; border-radius: 5px; margin-bottom: 14px; padding: 10px; width: 100%;} 
option { padding: 10px;  width: 100%;}
select {  padding: 0 5px; } 
input:focus {outline:none;} /*safari/chrome pas de halo */
input:valid { background-color:#fff; } /* champs non obligatoire*/
input:invalid { background-color: #fff; } /* champs obligatoire*/
:-moz-ui-invalid:not(output) { border: solid 1px #e5007e; box-shadow:none; color:#e5007e;}/* champs mal saisi*/
input:required:valid, textarea:required:valid  { background-image: url("../images/ok.png"); background-repeat:no-repeat; background-position:right;} /*champs correctement rempli*/


::-webkit-input-placeholder { font-size:14px; color:#3f4b51;}
::-moz-placeholder { font-size:14px; color:#3f4b51; }
:-ms-input-placeholder {font-size:14px; color:#3f4b51;}
input:-moz-placeholder {font-size:14px; color:#3f4b51;}
input[type="submit"] {font-family: "gotham_book"; border-radius: 5px; border:none; width:100%; background-color: #e5007e; color: #FFFFFF; margin-top: 10px;  padding: 8px; font-size:16px; text-transform:uppercase;}
input[type="submit"]:hover { background-color: #b30062;}

#exemples { background-color:#f1f2ed; clear:both;padding: 10px 0;}

 canvas { max-width:766px; width:100%;}

/* Disposition tablette : 481px sur 768px. Hérite des styles de : Disposition mobile */

@media only screen and (min-width: 481px) {
#illustration {  background-image: url("../images/immeuble.jpg"); background-size: cover; height: 406px;}
#header { left: 30%; position: absolute; top: 169px;  width: 312px;}
		
#formulaire { padding: 25px 20px 0; width: 333px; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);}

#avantaged img {  margin-bottom: 5px;  margin-top: 10px;}
 canvas { margin-left:20px;}
 #avantageg, #avantaged { float: left; width: 50%;}
 .desc-g, .desc-d { width: 210px;}

#avantages { display: block; margin-top: -380px; height:380px; padding: 0 22px; position: relative; }
.bloc { float: left; color: #fff; height: 119px; width: 215px; padding: 20px 22px; background-repeat: no-repeat; background-size: cover; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); }

.bloc:first-child { background-color: #e5007e; background-image: url("../images/fd-economisez.jpg");margin-right: 30px;}
.bloc:nth-child(2) { background-color: #a1c617; background-image: url("../images/fd-protegez.jpg");margin-right: 30px;}
.bloc:last-child { background-color: #63c3d1; background-image: url("../images/fd-gagnez.jpg");}
.plus:after { content: "+"; font-family: gothambold,Arial,Helvetica,sans-serif; font-size: 36px; left: 197px; position: relative;  top: -75px;}

.bloc > h1 { margin: 0;font-size: 20px; }
.bloc h1 span { font-family: gothambold, "Arial Black", arial, sans-serif; font-size:33px;  margin: -8px 0 -5px; display:block;}
.bloc p { font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0;}

}

/* Disposition bureau : 769px à max. 1232px.  Hérite des styles de : Disposition mobile et disposition tablette */

@media only screen and (min-width: 769px) {
.gridContainer { max-width: 808px; margin: auto; }
#header {  top: 287px;}
#illustration {height: 540px;}
#avantages { margin-top: -520px; height:520px; }
#formulaire {width: 380px;}
.bloc {  width: 234px; }
.plus:after {left: 215px;  top: -58px;}
.bloc > h1 {font-size: 20px; }
.bloc h1 span { font-size:36px; }
input[type="submit"] { margin-bottom: 25px;}
.financement {width: 324px !important; max-width: 324px;}

}