h1,h2,h3,h4,h5,h6,p,form,ul,li { padding:0px; margin:0px; }
html,body { width:100%; height:100%; padding:0px; margin:0px; }
* { 
	outline:none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'Gill Sans MT', sans-serif;  /* Open Sans */
	font-size: 15px;
	min-width: 320px;
	background-color: #f2f2f2;
	padding: 40px 0px;
}

::-webkit-scrollbar { background-color:#ddd; width:6px; border-radius:4px; }
::-webkit-scrollbar-thumb { background-color:#777; border-radius:4px; }

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}


section { margin-bottom:40px; }
.container { width:900px; max-width:100%; min-width:320px; }
.row { /* margin-left:0px; margin-right:0px; */ }

a { text-decoration:none !important; outline:none; }

input[type=number] { -moz-appearance:textfield !important; }
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button { -webkit-appearance:none !important; margin:0; }
input::-o-inner-spin-button,input::-o-outer-spin-button { -o-appearance:none !important; margin:0 }

.input-group { width:100%; background-color:#f2f2f2; border-radius:10px; border:none; }
.input-group input { position:relative; height:50px; line-height:50px; padding:0px 15px; background-color:#f2f2f2; border:none; border-radius:10px; box-shadow:none !important; outline:none !important; }
.input-group .input-group-addon { width:50px; height:50px; line-height:50px; padding:0px; text-align:center; background-color:#bfbfbf; border-radius:10px !important; border:none; vertical-align:middle; transition:all 0.6s ease-in-out; }
.input-group .input-group-addon img { display:inline-block; max-width:40%; height:auto; vertical-align:middle; }

.input-group[data-control='combo'] { cursor:pointer !important; }
.input-group[data-control='combo'] input { cursor:pointer !important; user-select:none; -webkit-appearance: none; }
.input-group[data-control='combo'] ul { position:absolute; left:0px; top:calc(100% + 10px); right:0px; z-index:11; background-color:#f2f2f2; border-radius:10px; border:solid 5px #fff; margin:0px; padding:0px; list-style-type:none; display:none; max-height:150px; overflow:hidden; overflow-y:auto; }
.input-group[data-control='combo'] ul li { height:30px; line-height:30px; padding:0px 15px; cursor:pointer; }
.input-group[data-control='combo'] ul li:nth-child(even) { background-color:#e8e8e8; }
.input-group[data-control='combo'] ul li:hover { background-color:#081530; color:#fff; }
.input-group.open[data-control='combo'] ul { display:block; }

.form-group .control { display:block; overflow:hidden; }
.form-group .control .btn-check { position:relative; display:inline; float:left; width:48%; margin-right:2%; height:50px; line-height:50px; text-align:center; background-color:#f2f2f2; border-radius:10px; color:#bfbfbf; }
.form-group .control .btn-check.non { margin-left:2%; margin-right:0; }
.form-group .control .btn-check.oui.checked { color:#2aa857; }
.form-group .control .btn-check.non.checked {  }
input[type='radio'] { margin-top:0px; margin-bottom:0px; }
input[type='radio']:before { content:''; position:absolute; left:0px; top:0px; right:0px; bottom:0px; background-color:#f2f2f2; border-radius:10px; }
input[type='radio']:after { content:'\2713'; position:absolute; left:0px; top:0px; right:0px; bottom:0px; text-align:center; font-size:20px; font-weight:bold; }
input[type='radio'].non:after { content:'\2716'; }
input[type='radio'].oui:checked:after { color:#2aa857; }
input[type='radio'].non:checked:after { color:#c93131; }

.option-radio input[type='radio'] { position:relative; display:inline-block; width:70px; height:40px; line-height:40px; border-radius:20px; background-color:#eee; }
.option-radio input[type='radio']:before { content:''; position:absolute; left:0px; top:0px; right:0px; bottom:0px; border-radius:20px; border:solid 5px #f2f2f2; background-color:#fff; }
.option-radio input[type='radio']:after { content:''; position:absolute; left:5px; top:5px; width:30px; height:30px; height:30px; border-radius:50%; border:solid 5px #081530; background-color:#fff; transition:all 0.2s ease-in-out; }
.option-radio input[type='radio']:checked:before { background-color:#2aa857; }
.option-radio input[type='radio']:checked:after { left:auto; right:5px; }

.ui-slider { position:relative; height:30px; background-color:#fff; border:solid 5px #f2f2f2; border-radius:15px; max-width:80%; margin:auto; }
.ui-slider:before { content:'-'; position:absolute; left:0px; top:0px; width:20px; height:20px; line-height:20px; text-align:center; font-size:14px; font-weight:bold; z-index:9; }
.ui-slider:after { content:'+'; position:absolute; right:0px; top:0px; width:20px; height:20px; line-height:20px; text-align:center; font-size:14px; font-weight:bold; z-index:9; }
.ui-slider .ui-slider-range-min { border-radius:15px; background-color:#e04c38 !important; background-image:none; }
.ui-slider .ui-slider-handle { top:0px; height:20px; width:20px; margin-left:-10px; border-radius:50%; background-color:#fff !important; border:solid 4px #101f40; }
.ui-slider-index { display:inline-block; width:100px; height:40px; margin:auto; line-height:40px; text-align:center; background-color:#f2f2f2; border-radius:0px 0px 10px 10px; }

.form-group.error .input-group .input-group-addon { background-color:#c93131; } 
.form-group.error label { color:#c93131; }

header { margin-bottom:40px; }
header .menubar { display:block; height:80px; line-height:80px; background-color:#bfbfbf; border-radius:10px; overflow:hidden; }
header .menubar ul { margin:0px; padding:0px; display:flex; list-style-type:none; }
header .menubar ul li:first-child { background-color:#dddbdb; }
header .menubar ul li:last-child { background-color:#dddbdb; }
header .menubar ul li { position:relative; flex:1; text-align:center; font-size:18px; font-weight:normal; color:#fff; cursor:pointer; }
header .menubar ul li.active { background-color:#e04c38; }
header .menubar ul li span.label { display:inline-block; line-height:1; vertical-align:middle; font-weight:normal; font-size:16px; margin-top:-20px; }
header .menubar ul li .glyphicon { display:block; margin-top:5px; font-size:20px; }
header .menubar ul li:after { content:''; position:absolute; right:-15px; top:50%; width:30px; height:30px; margin-top:-15px; background-color:#bfbfbf; transform:rotate(-45deg); z-index:2; }
header .menubar ul li:first-child:after { background-color:#dddbdb; }
header .menubar ul li:last-child:after { background-color:#dddbdb; }
header .menubar ul li.active:after { background-color:#e04c38; }
header .menubar ul li:before { position:absolute; left:50%; top:0px; content:'\2713'; z-index:2; font-size:30px; font-weight:bold; margin-left:-15px; margin-top:10px; }


main { transition:all 0.6s ease-in-out !important; transition-delay:1000; }
main#main { padding-bottom:40px; transition:all 0.6s ease-in-out; }
main#main section { /* display:none; margin-left:-100%; opacity:0; */ transition:all 0.6s ease-in-out; }
main#main section.active { /* margin-left:0px; opacity:1; display:block; */ } 
main[data-step] { display:none; /* margin-left:100%; opacity:0; */
    -webkit-animation: fadeInFromNone 0.8s ease-out;
    -moz-animation: fadeInFromNone 0.8s ease-out;
    -o-animation: fadeInFromNone 0.8s ease-out;
    animation: fadeInFromNone 0.8s ease-out;
}
/* 
main#resultats { display:none; }
main.active { display:block; margin-left:0px; opacity:1; }
main.passed { margin-left:-100%; opacity:0; }
main[data-status='active'] { display:block; margin-left:0px; opacity:1;
main[data-status='passed'] { margin-left:-100%; opacity:0; }
main[data-status='active'] { display: block; } 
*/

#select-mode { margin-top:20px; }
#select-mode ul { list-style-type:none; margin:0px; padding:0px; display:flex; flex-direction:row; }
#select-mode ul li { flex:1; margin:0px 20px; }
#select-mode [data-select-mode] { cursor:pointer; }

#select-mode .select-mode-item { position:relative; width:100%; display:inline-block; overflow:visible; padding:40px 30px; margin-bottom:40px; background-color:#fff; border-radius:20px; text-align:center; }
#select-mode .select-mode-item img { max-width:80%; height:auto; margin-bottom:20px; }
#select-mode .select-mode-item label { display:block; font-size:20px; text-transform:uppercase; line-height:1.2em; }
#select-mode .select-mode-item label strong { display:block; font-weight:bold; font-size:30px; }
#select-mode .select-mode-item label span { display:block; margin-top:10px; font-size:14px; text-transform:none; }
#select-mode .select-mode-item .btn-select { position:absolute; bottom:-25px; left:0px; right:0px; margin:auto; width:80%; height:50px; line-height:50px; background-color:#e04c38; color:#fff; border:none; border-radius:25px; font-size:20px; text-transform:uppercase; }

section.section-questions h2 { position:relative; overflow:hidden; height:80px; line-height:80px; background-color:#101f40; color:#fff; font-size:24px; text-transform:uppercase; border-radius:10px; padding-left:100px; padding-right:80px; }
section.section-questions h2 span { font-size:16px; }
section.section-questions h2:before { content:''; position:absolute; left:0px; top:0px; width:80px; height:80px; line-height:80px; border-radius:20px; text-align:center; background:#081530 url('../img/icon-waiting.big.png') no-repeat center center; background-size:45%; }
section.section-questions h2:after { content:''; position:absolute; right:0px; top:0px; width:80px; height:80px; line-height:80px; border-radius:20px; text-align:center; background:transparent url('../img/icon-arrow-right.big.png') no-repeat center center; background-size:45%; }
section.section-questions .row.questions { margin-left:20px; margin-right:20px; padding:50px 40px; background-color:#fff; font-size:16px; color:#101f40; }
section.section-questions .row.questions label { font-weight:normal; }
section.section-questions.open h2:after { background:transparent url('../img/icon-arrow-down.big.png') no-repeat center center; }
section.section-questions.ok h2:before { background-image:url('../img/icon-ok.big.png'); }
section.section-questions.error h2:before { background-image:url('../img/icon-error.big.png'); }
section.section-questions.error row.questions { color:#c93131; }


section#futur-bien { }
section#futur-bien .questions { padding:80px 40px; }
section#futur-bien .option-radio { display:inline-block; text-align:center; }
section#futur-bien .option-radio input[type='radio'] { display:block; margin:10px auto; }


section#votre-projet { }


section.form-submit { text-align:center; }
.btn-valider { display:inline-block; height:60px; line-height:60px; padding:0px 40px; font-size:20px; color:#fff; background-color:#101f40; border:none; border-radius:8px; }

#resultats .row { display:flex; }
#resultats .row > .column { flex:1; }
#resultats > p { margin-bottom:40px; font-size:18px; }

#resultats-1 { overflow:visible; border-radius:50px; background-color:#fff; padding-bottom:15px; }
#resultats-1 .montant { overflow:hidden; border-radius:25px; font-size:24px; background-color:#e04c38; color:#fff; margin:0px -15px; }
#resultats-1 .montant > div:first-child { line-height:50px; padding-left:25px; }
#resultats-1 .montant > div:last-child { line-height:50px; background-color:#101f40; color:#fff; text-align:center; border-radius:25px; font-weight:normal; }

#resultats-1 .montant > p { width:100%; line-height:50px; padding-left:25px; }
#resultats-1 .montant > p strong { display:inline-block; float:right; line-height:50px; background-color:#101f40; color:#fff; text-align:center; border-radius:25px; font-weight:normal; padding:0px 25px; }

#resultats-1 .resume { padding:20px; display:flex; }
#resultats-1 .resume > .column { flex:1; background-color:#f2f2f2; padding:15px; border-radius:0px 0px 30px 30px; }
#resultats-1 .resume > .column:first-child { margin-right:10px; } 
#resultats-1 .resume > .column:last-child { margin-left:10px; } 
#resultats-1 .resume h4 { padding:0px 10px; line-height:40px; background-color:#fff; margin-bottom:20px; text-align:center; font-size:19px; }
#resultats-1 .resume ul { list-style-type:none; padding:0px; margin:0px; text-align:center; font-size:16px; }
#resultats-1 .resume ul li { text-transform:uppercase; line-height:1.3em; margin-bottom:20px; font-size:17px; }
#resultats-1 .resume ul li strong { display:block; font-size:28px; font-weight:bold; font-style:italic; color:#e04c38; }
#resultats-1 .resume ul li.total { height:50px; line-height:50px; background-color:#fff; border-radius:25px; font-weight:bold; font-size:20px; margin-bottom:0px; margin-top:20px; }
#resultats-1 .resume ul li.total strong { display:inline; float:right; width:50%; border-radius:25px; background-color:#101f40; color:#fff; font-style:normal; font-size:20px; }

#resultats-2 { overflow:hidden; border-radius:15px; background-color:#fff; }
#resultats-2 #chart-canvas { width:100%; height:0px; padding-bottom:80%; margin:50px 40px; }
.chart-control { background-color:#BFBFBF; border-radius:15px; overflow:hidden; color:#fff; }
.chart-control > .column { position:relative; /* height:100px; line-height:100px; */ padding:30px 40px 30px 0px; text-align:center; }
.chart-control .column:first-child { background-color:#DCDCDC; }
.chart-control .column:last-child { background-color:#DCDCDC; }
.chart-control .column span { display:inline-block; line-height:1; font-size:17px; text-transform:uppercase; }
.chart-control .column span strong { display:block; font-size:22px; font-weight:bold; font-style:italic; font-size:26px; }
.chart-control .column .actions { position:absolute; top:0px; right:0px; bottom:0px; width:40px; background-color:#081530; border-radius:15px; }
.chart-control .column .actions .btn-more { position:absolute; left:0px; top:0px; right:0px; bottom:50%; /* padding-top:50%; */ color:#fff !important; text-decoration:none; }
.chart-control .column .actions .btn-more span { top:17px; }
.chart-control .column .actions .btn-less { position:absolute; left:0px; top:50%; right:0px; bottom:0px; /* padding-top:50%; */ color:#fff !important; text-decoration:none; }
.chart-control .column .actions .btn-less span { top:17px; }

#resultats #slider-montant { width:60%; margin:40px auto; }



/****** Etapes ******/
/*
body[data-mode] section.section-questions { margin-left:0px !important; opacity:1 !important; display:block !important; }
body[data-mode] #select-mode { opacity:0; display:none !important; }
body[data-mode=enveloppe] .form-group[data-mode=enveloppe] { display:block; }
body[data-mode=enveloppe] .form-group[data-mode=plan] { display:none; }
body[data-mode=plan] .form-group[data-mode=enveloppe] { display:none; }
body[data-mode=plan] .form-group[data-mode=plan] { display:block; }
*/


body[data-step='1'] main[data-step='1'] { display:block; }
body[data-step='1'] main[data-step='2'],
body[data-step='1'] main[data-step='3'] { display:none; }

body[data-step='2'] main[data-step='1'] { display:none; }
body[data-step='2'] main[data-step='2'] { display:block; }
body[data-step='2'] main[data-step='3'] { display:none; }

body[data-step='3'] main[data-step='1'] { display:none; }
body[data-step='3'] main[data-step='2'] { display:none; }
body[data-step='3'] main[data-step='3'] { display:block; }

body[data-step='1'] header .menubar li[data-step='1']:before { content:'\2713'; }
body[data-step='1'] header .menubar li[data-step='2']:before { content:'\2716'; }
body[data-step='1'] header .menubar li[data-step='3']:before { content:'\2716'; }

body[data-step='2'] header .menubar li[data-step='1']:before { content:'\2713'; }
body[data-step='2'] header .menubar li[data-step='2']:before { content:'\2713'; }
body[data-step='2'] header .menubar li[data-step='3']:before { content:'\2716'; }

body[data-step='3'] header .menubar li[data-step='1']:before { content:'\2713'; }
body[data-step='3'] header .menubar li[data-step='2']:before { content:'\2713'; }
body[data-step='3'] header .menubar li[data-step='3']:before { content:'\2713'; }



#resultats #slider-montant { position:relative; margin:auto; }
#slider-index { position:relative; width:60%; margin:auto; }
#slider-index .index { position:relative; display:inline-block; text-align:center; font-size:80%; /* font-size:11px; */ }
#slider-index .index span { font-size:75%; /* font-size:10px; */ }


@media (max-width: 640px) {
	
	header .menubar { height:60px; line-height:60px; }
	header .menubar ul li { font-size:4vw; }
	header .menubar ul li:before { font-size:3vw; margin-left:0px; }
	
	#select-mode ul { display:block; }
	#select-mode .select-mode-item { display:block; max-width:300px; margin:auto; margin-bottom:40px; }
	#select-mode .select-mode-item img { max-width:60%; }
	#select-mode .select-mode-item label { font-size:3vw; }
	#select-mode .select-mode-item label strong { font-size:5vw; }
	#select-mode .select-mode-item label span { font-size:2.4vw; }
	
	section.section-questions h2 { font-size:3.5vw; }
	section.section-questions h2 span { font-size:2vw; }
	
	section#futur-bien .questions { padding:40px; }
	
	#resultats > p { font-size:3.2vw; }
	
	#resultats-1 .montant { font-size:3.5vw; }
	#resultats-1 .montant strong { font-size:4.5vw; }
	#resultats-1 .resume { display:block; }
	#resultats-1 .resume h4 { font-size:4vw; }
	#resultats-1 .resume > .column { display:block; margin:0px !important; }
	#resultats-1 .resume > .column:first-child { margin-bottom:20px !important; }
	#resultats-1 .resume ul li { font-size:3.5vw; }
	#resultats-1 .resume ul li strong { font-size:5vw; }
	#resultats-1 .resume ul li.total { font-size:4vw; }
	#resultats-1 .resume ul li.total strong { font-size:5vw; }
	
	.chart-control .column span { font-size:2vw; }
	.chart-control .column span strong { font-size:4vw; }
	.chart-control .column .actions .btn-more span { top:auto; }
	
	#resultats #slider-montant { width:80%; }
	#resultats #slider-index { width:80%; }
	
}