@charset "UTF-8";


.select, sub, sup {
    position: relative
}

.centered, .clear, .left {
    clear: both
}

pre, textarea {
    overflow: auto
}

a:active, a:hover, textarea:focus {
    outline: 0
}

a {
    text-decoration: none
}

.caption-link, .etape-0 .conditions {
    text-decoration: underline
}

address, caption, cite, code, dfn, strong, th, var {
    font-weight: 400;
    font-style: normal
}

b, div.error, optgroup, strong {
    font-weight: 700
}

ol, ul {
    list-style: none
}

q:after, q:before {
    content: ''
}

abbr, acronym {
    border: 0
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: #3D4A5C
}


.s-12, .s-6 {
    padding-left: 5px !important;
    padding-right: 5px !important
}

div.error {
    color: #d25454;
    font-size: 15px;
    background: #fff;
    border-radius: 3px;
    padding: 10px
}

img, legend {
    border: 0
}

legend, td, th {
    padding: 0
}

.caption-link {
    margin-bottom: 40px;
    cursor: pointer
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: 1px dotted
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

.select-options, .select-styled, .select-styled.active, .select-styled:active {
    background-color: #fff
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    max-width: 100%;
    height: auto
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}


.select, .select-options li:hover {
    color: #333
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

.btn-dark:hover, .bloc-reponse, .inline-radio .radio, .select, .etape-0 .conditions:hover {
    cursor: pointer
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.s-1, .s-10, .s-11, .s-12, .s-2, .s-3, .s-4, .s-5, .s-7, .s-8, .s-9 {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box
}

.container {
    margin-left: auto;
    margin-right: auto
}

.container:after {
    content: " ";
    display: block;
    clear: both
}

.o-1 {
    margin-left: 8.33333%
}

.o-2 {
    margin-left: 16.66667%
}

.o-3 {
    margin-left: 25%
}

.o-4 {
    margin-left: 33.33333%
}

.o-5 {
    margin-left: 41.66667%
}

.o-6 {
    margin-left: 50%
}

.o-7 {
    margin-left: 58.33333%
}

.o-8 {
    margin-left: 66.66667%
}

.o-9 {
    margin-left: 75%
}

.o-10 {
    margin-left: 83.33333%
}

.o-11 {
    margin-left: 91.66667%
}

.o-12 {
    margin-left: 100%
}

.s-1 {
    width: 8.33333%
}

.s-2 {
    width: 16.66667%
}

.s-3 {
    width: 25%
}

.s-4 {
    width: 33.33333%
}

.s-5 {
    width: 41.66667%
}

.s-6 {
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding-left: 15px;
    padding-right: 15px
}

.s-7 {
    width: 58.33333%
}

.s-8 {
    width: 66.66667%
}

.s-9 {
    width: 75%
}

.s-10 {
    width: 83.33333%
}

.s-11 {
    width: 91.66667%
}

.s-12 {
    width: 100%
}

@media (min-width: 800px) and (max-width: 2200px) {
    .l-1, .l-10, .l-11, .l-12, .l-2, .l-3, .l-4, .l-5, .l-7, .l-8, .l-9 {
        box-sizing: border-box;
        float: left;
        padding-left: 15px;
        padding-right: 15px
    }

    .hide-for-large {
        display: none
    }

    .hide-offset-large {
        margin-left: inherit
    }

    .l-1 {
        width: 8.33333%
    }

    .l-2 {
        width: 16.66667%
    }

    .l-3 {
        width: 25%
    }

    .l-4 {
        width: 33.33333%
    }

    .l-5 {
        width: 41.66667%
    }

    .l-6 {
        box-sizing: border-box;
        width: 50%;
        float: left;
        padding-left: 15px;
        padding-right: 15px
    }

    .l-7 {
        width: 58.33333%
    }

    .l-8 {
        width: 66.66667%
    }

    .l-9 {
        width: 75%
    }

    .l-10 {
        width: 83.33333%
    }

    .l-11 {
        width: 91.66667%
    }

    .l-12 {
        width: 100%
    }
}

@media (min-width: 450px) and (max-width: 900px) {
    .m-1, .m-10, .m-11, .m-12, .m-2, .m-3, .m-4, .m-5, .m-7, .m-8, .m-9 {
        box-sizing: border-box;
        float: left;
        padding-left: 15px;
        padding-right: 15px
    }

    .h-m {
        display: none
    }

    .h-o-m {
        margin-left: inherit
    }

    .m-1 {
        width: 8.33333%
    }

    .m-2 {
        width: 16.66667%
    }

    .m-3 {
        width: 25%
    }

    .m-4 {
        width: 33.33333%
    }

    .m-5 {
        width: 41.66667%
    }

    .m-6 {
        box-sizing: border-box;
        width: 50%;
        float: left;
        padding-left: 15px;
        padding-right: 15px
    }

    .m-7 {
        width: 58.33333%
    }

    .m-8 {
        width: 66.66667%
    }

    .m-9 {
        width: 75%
    }

    .m-10 {
        width: 83.33333%
    }

    .m-11 {
        width: 91.66667%
    }

    .m-12 {
        width: 100%
    }
}

@media (min-width: 0px) and (max-width: 450px) {
    .h-s {
        display: none
    }

    .h-o-s {
        margin-left: inherit
    }
}

.centered {
    float: inherit;
    margin-left: auto;
    margin-right: auto
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px
}

.select {
    display: inline-block;
    font-size: 16px;
    width: 100%;
    height: 65px;
    margin: 10px 0
}

.select-options li:first-child, .select-options li[rel=hide] {
    display: none
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 25px 15px 8px 18px;
    transition: all .2s ease-in;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    text-align: left;
    font-size: 20px
}


header nav {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.select-styled:after {
    content: url(arrow_down.svg);
    width: 13px;
    height: 7px;
    position: absolute;
    top: 20px;
    right: 20px
}

.select-styled.active:after, .select-styled:active:after {
    top: 36px;
    transform: rotate(180deg)
}

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .2)
}

.select-options li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    background-image: linear-gradient(to right, #979797 30%, rgba(255, 255, 255, 0) 0);
    background-position: bottom;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    transition: all .15s ease-in
}

.select-options.active {
    display: block
}

header {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    background-color: #f44336;
    padding: 10px 0
}

@media screen and (max-width: 1024px) {

}

.etape-0 {
    padding-top: 30px
}

.etape-0 .btn-dark {
    margin: 30px auto 20px
}

.etape-0 .picto {
    width: 100%;
    position: relative
}

.etape-0 .picto.intro {
    display: inline-block;
    width: 280px
}


.etape-end {
    padding-top: 30px
}

.etape-end .btn-dark {
    margin: 30px auto 20px
}

.etape-end .picto {
    width: 100%;
    position: relative
}

.etape-end .picto.intro {
    display: inline-block;
    width: 280px
}

@media screen and (max-width: 450px) {
    .etape-0 {
        padding-top: 20px
    }

    .etape-0 .picto.intro {
        width: 224px;
        height: 215px
    }

    .etape-end {
        padding-top: 20px
    }

    .etape-end .picto.intro {
        width: 224px;
        height: 215px
    }
}

@media screen and (max-width: 320px) {
    .etape-0 .picto.intro {
        width: 145px;
        height: 139px
    }
    .etape-end .picto.intro {
        width: 145px;
        height: 139px
    }
}

.etape-0 .picto .win {
    width: 170px;
    height: 170px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50%;
    left: -200px
}

.bloc-reponse, .bloc-reponse:after {
    border-radius: 5px;
    transition: all .5s
}

.bloc-reponse:after, .inline-checkbox .checkbox:before {
    left: 0;
    top: 0;
    content: ''
}

.etape-0 .picto .win p {
    padding-top: 36px
}

.etape-0 .picto .win p span {
    font-weight: 700
}

@media screen and (max-width: 1024px) {
    .etape-0 .picto .win {
        display: none
    }
}

.etape-0 h1 {
    max-width: 600px;
    margin: 10px 0 16px;
    font-size: 38px
}

@media screen and (max-width: 320px) {
    .etape-0 h1 {
        font-size: 24px
    }
}

.etape-0 p {
    font-size: 24px
}

@media screen and (max-width: 450px) {
    .etape-0 p {
        font-size: 20px
    }
}

.etape-0 .free {
    font-size: 30px;
    font-weight: 900;
    margin-top: 30px;
    display: none
}

.etape-0 .mobile-free {
    width: 100%;
    max-width: 100%;
    margin: 14px 0;
    padding: 10px 0;
    font-size: 25px;
    font-weight: 300;
    font-style: italic;
    background-color: #fff
}

@media screen and (max-width: 320px) {
    .etape-0 .mobile-free {
        font-size: 18px
    }
}

@media screen and (min-width: 768px) {
    .etape-0 .free {
        display: inherit
    }

    .etape-0 .mobile-free {
        display: none
    }
}

@media screen and (max-width: 900px) {
    .min-670 {
        display: none
    }
}



.btn-container, .bloc-reponse {
    width: 100%;
    display: inline-block
}

@media screen and (max-width: 900px) {
    .etape-0 .btn-dark {
        margin: 10px 0
    }
}

.multiple {
    font-size: 20px;
    margin-bottom: 20px
}

.left {
    float: left;
    text-align: left
}

.btn, .btn-dark, .bloc-reponse, h1, h2, h3, h3.intro, h6 {
    text-align: center
}

.bloc-reponse {
    padding: 40px 0 38px;
    margin-bottom: 10px;
    background-color: rgba(228, 228, 228, 0.21);
    /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);*/
    box-sizing: border-box;
    position: relative
}

.bloc-reponse.red {
    color: #FFF;
    background: rgba(255, 0, 46, 0.36)
}

.bloc-reponse:after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(check.svg);
    background-color: rgba(255, 0, 46, 0.36);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    opacity: 0
}

.btn, .btn-dark, h1, h2, h3 {
    width: 100%;
    display: inline-block
}

.bloc-reponse.link:after {
    background-image: url(arrow.svg)
}

.bloc-reponse.active, .bloc-reponse:hover {
    /*box-shadow: 0 4px 17px 0 rgba(0, 0, 0, .2)*/
}

.bloc-reponse.active:after, .bloc-reponse:hover:after {
    opacity: 1
}

@media screen and (max-width: 450px) {
    .bloc-reponse {
        padding: 40px 0 20px;
        margin-bottom: 12px
    }

    .bloc-reponse:hover:after {
        opacity: 0
    }

    .bloc-reponse.active:after {
        opacity: 1
    }
}

.bloc-reponse .icon-reponse {
    width: 100%;
    height: 90px;
    margin-bottom: 16px
}

.bloc-reponse .icon-reponse img {
    height: 90px
}

.bloc-reponse .label-reponse {
    padding: 0 20px;
    font-size: 18px;
    font-weight: 100;
}

@media screen and (max-width: 450px) {
    .bloc-reponse .label-reponse {

        font-size: 14px;
        padding: 0 10px
    }
}

@media screen and (max-width: 320px) {
    .bloc-reponse .label-reponse {

        font-size: 12px;
        padding: 0 10px
    }
}

.bloc-reponse .label-reponse span {
    font-weight: 400
}

@media screen and (min-width: 900px) {
    .l-6 .bloc-reponse {
        padding: 70px 0 58px
    }

    .l-6 .bloc-reponse .icon-reponse, .l-6 .bloc-reponse .icon-reponse img {
        height: 140px
    }
}



.btn-dark {
    background-color: #f44336;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    padding: 16px 0 14px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    transition: all .5s
}

.btn-dark:hover, textarea:focus {
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .2)
}

.btn-dark:hover {
    background-color: rgb(220, 60, 49);
}

h1, h2, h3, h4, h5, h6 {
    color: #3D4A5C
}

h1, h2, h3 {
    font-weight: 900
}

h1 {
    font-size: 50px;
    margin: 30px 0 16px
}

h3
{
    font-weight: 100;
    font-size: 30px;text-align:left;margin-bottom:30px
}

@media screen and (max-width: 450px) {
    h1 {
        font-size: 28px
    }
}

h2 {
    font-size: 50px;
    margin: 20px 0 30px
}

@media screen and (max-width: 450px) {
    h2 {
        font-size: 28px
    }
}

h3 {
    font-size: 30px;
    margin: 20px 0 40px;
}

@media screen and (max-width: 450px) {
    h3 {
        font-size: 20px;
        margin: 10px 0 25px;
    }

    .no-mobilex
    {
        display: none;
    }
}

h3.intro {
    margin-bottom: 20px
}

h4, h6 {
    margin: 20px 0;
    width: 100%;
    font-size: 20px;
    display: inline-block
}

h4 {
    text-align: left
}

h5 {
    width: 100%;
    display: inline-block
}

h6 {
    font-weight: 400
}

.timeline, .timeline .time-fill {
    height: 10px;
    display: inline-block;
    border-radius: 5px
}

.form-container input:focus {
    outline: 0;
    box-shadow: 0 4px 17px 0 rgba(0, 0, 0, .2)
}

.form-container .form-label {
    display: inline-block;
    position: absolute;
    top: 16px;
    left: 20px;
    transition: all .3s;
    z-index: 1
}

.form-container .form-label.dropdown {
    top: 30px
}

.form-container span.error {
    position: absolute;
    right: 5px;
    bottom: 23px;
    color: red;
    font-size: 11px
}

.form-container.focused .form-label {
    top: 8px;
    left: 20px
}

.form-container.focused .form-label.dropdown {
    top: 20px
}

.form-container.focused .form-label span {
    font-size: 12px
}

.timeline {
    width: 100%;
    background-color: #C3CCD4;
    position: relative;
    margin-top: 20px
}

.timeline .time-fill {
    width: 10%;
    background-color: #f44336;
    position: absolute;
    top: 0;
    left: 0
}



.parsley-error {
    border-color: #f35839 !important;
}
.parsley-errors-list {
    display: none;
    margin: 0;
    padding: 0;
}
.parsley-errors-list.filled {
    display: block;
}
.parsley-errors-list > li {
    font-size: 12px;
    list-style: none;
    color: #f35839;
}



input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    float:right;
    padding: 5px;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;

    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

.progress-bar-danger {
    background-color: #f44336;
}
.hidden
{display:none;}


@media screen and (max-width: 1025px) {
    #topi {
        display: none;
    }

    #mobile-btn {
        display: block;
    }
}

@media screen and (min-width: 1025px) {

    #mobile-btn {
        display: none;
    }
}