@import url(https://fonts.googleapis.com/css?family=Lato);html{height:100%}body,html{margin:0;padding:0}body{display:flex;flex-direction:column;min-height:100%}a,button,div,h1,h2,h3,h4,h5,input,label,p,select,textarea{font-family:Lato,sans-serif}.header{display:flex;justify-content:center;align-items:center;padding:25px;background-color:#dadfe1}.header img{width:250px}#formulaire{background-color:#ecf0f1;padding-top:50px;padding-bottom:50px;flex-grow:1}#formulaire #app{width:500px;margin:auto;background-color:#fff;padding:80px 100px;box-shadow:0 0 2px 0 #aaa;position:relative}#formulaire #app h2{font-size:24px;text-align:center;margin-bottom:25px;background-color:#2c3e50;padding:5px;color:#fff}#formulaire #app .suivant{position:absolute;right:0;bottom:0;display:flex}#formulaire #app .suivant p{color:red;margin-right:20px}#formulaire #app .suivant button{background-color:#2c3e50;border:none;outline:none;cursor:pointer;padding:10px 30px;color:#fff;transition:all .3s ease;transform-origin:100% 100%;text-transform:uppercase}#formulaire #app .suivant button:hover{transform:scale(1.1)}#formulaire #app .suivant button:disabled{background-color:#444}#formulaire #app .precedent{position:absolute;top:0;left:0}#formulaire #app .precedent button{background-color:transparent;box-shadow:1px 1px 2px 0 #eee;outline:none;transition:all .3s ease;text-transform:uppercase}#formulaire #app .precedent button:hover{box-shadow:0 0 0 0 #eee}#formulaire #app .precedent button img{width:50px}#formulaire #app .form-input{margin-bottom:10px}#formulaire #app .form-input label{display:block;margin-bottom:5px}#formulaire #app .form-input input,#formulaire #app .form-input select{width:100%;padding:5px;font-size:18px;border:1px solid #888;box-sizing:border-box}#formulaire #app .error p{color:red}#formulaire #app .form-radio{margin-bottom:50px}#formulaire #app .form-radio p{text-align:center;font-weight:700}#formulaire #app .form-radio .labels{width:300px;margin:auto;display:flex;justify-content:space-between}#formulaire #app .form-radio .labels input[type=radio]{display:none}#formulaire #app .form-radio .labels label{width:50px;font-size:12px;text-align:center;position:relative}#formulaire #app .form-radio .labels label:after{content:"";border:2px solid #2c3e50;width:20px;height:20px;position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background-color:#fff;transition:all .5s ease}#formulaire #app .form-radio .labels [type=radio]:checked+label:after{background-color:#2c3e50}#formulaire #app .intro h1{font-size:24px;text-align:center;margin-bottom:25px;background-color:#2c3e50;padding:5px;color:#fff}#formulaire #app .intro p{font-size:16px;text-align:justify}#formulaire #app .outro p:first-of-type{font-size:24px}#formulaire #app .outro p{text-align:center}#resultat{background-color:#ecf0f1;padding-top:50px;padding-bottom:50px;flex-grow:1}#resultat .welcome{width:900px;margin:auto;font-size:18px}#resultat .welcome p:first-of-type{font-size:24px;font-weight:700}#resultat .box1{display:flex;justify-content:space-between;align-items:flex-start;width:800px;padding:50px;margin:auto;background-color:#fff;box-shadow:0 0 2px 0 #aaa}#resultat .box1 canvas{width:500px!important;height:250px!important}#resultat .box1 p{width:250px;text-align:justify;margin:0;font-weight:700;font-size:18px}#resultat .box2{width:800px;display:flex;background-color:#fff;box-shadow:0 0 2px 0 #aaa;margin:50px auto auto;padding:50px}#resultat .box2 canvas{width:400px!important;height:200px!important}