@font-face {
    font-family: "SourceSansPro";
    font-display: auto;
    src: url("../fonts/source-sans-pro/SourceSansPro-Regular.otf") format("opentype");
}
@font-face {
    font-family: "SourceSansPro-Bold";
    font-display: auto;
    src: url("../fonts/source-sans-pro/SourceSansPro-Bold.otf") format("opentype");
}
@font-face {
    font-family: "SourceSansPro-semiBold";
    font-display: auto;
    src: url("../fonts/source-sans-pro/SourceSansPro-Semibold.otf") format("opentype");
}
@font-face {
    font-family: "SourceSansPro-extraLight";
    font-display: auto;
    src: url("../fonts/source-sans-pro/SourceSansPro-ExtraLight.otf") format("opentype");
}

.cross , .menuBurger , .step2 ,.step3 ,.step2Bis ,.step2Rep,.step4,.step5,.step6{
    display: none;
}  



/*GLOBAL*/
    html { 
        width: 100%;
        font-size: 62.5%;    
        
    }
    body{
        overflow-x:hidden!important;
        overflow-y:scroll!important;
    }
    
    .imgBackground{
        width: 45%;
        position: absolute;
        z-index: -1;
        top: -4rem;
        right: 0;
    }
    .sticky-top,.bigView,.commentCaMarche,.faireConfiance,.enParlez,.conseilInfos,footer{
        padding: 0 10%;
    }
    .sticky-top{
        position: initial!important;
        padding: 0 8% !important;
    }
    .questions{
        padding: 5rem 15% 8rem 15%;
    }
    .commentCaMarche,.conseilInfos,.enParlez{
        padding-bottom: 8rem;
        padding-top: 5rem;
    }
    h2{
        color: #5D40B6!important;	
        font-family: "SourceSansPro-extraLight"!important;	
        font-size: 56px!important;	
        font-weight: 300!important;	
        line-height: 56px!important;	
        text-align: center!important;
    }
    h3{
        color: #1B0E4F!important;	
        font-family: "SourceSansPro"!important;	
        font-size: 32px!important;	
        line-height: 48px!important;	
        text-align: center!important;
        margin-bottom: 0!important;
    }
    h3::after {
        content: '';
        display: block;
        width: 5%;
        height: 2px;
        background: #7E58F2;
        text-align: center;
        margin:0 auto;
    }

    .civility-min {
    text-transform: lowercase;
    }

/*END GLOBAL*/

/*NAV BAR*/
    header{
        align-items: center;
        background:none;
    
    }
    header a img{
        margin: 1.5rem 0;
        width: 300px;
    } 

    header nav a   {
        text-align: center;
        font-family: "SourceSansPro-semiBold",sans-serif;
        font-size: 1.4rem;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0 1rem;
        padding-bottom: 1rem;
        font-weight: bold;
        color:#1B0E4F;
        transition:0.3s;
        display: inline-block;
    }
    header nav a:hover{
        color:#7E58F2;
        
        text-decoration: none;
    }

    header nav a::after {
        content: '';
        display: block;
        width: 0;
        height: 1px;
        background: #7E58F2;
        transition: width .3s;
    }
    header nav a:hover::after {
        width: 100%;
    }
    

    header>nav a:nth-child(4){
        color: #7E58F2;
        border: 0.2rem solid #7E58F2;
        padding: 0.7rem 1rem; 
        border-radius: 2rem;
        transition:0.5s; 
    }
    header>nav a:nth-child(4):hover{
        color:white;
        background-color: #7E58F2;
    }
    header>nav a:nth-child(5){
        color:white;
        background-color: #7E58F2;        
        padding: 0.7rem 1rem;
        border: 0.2rem solid #7E58F2;	
        border-radius: 2rem;
        transition:0.5s; 
    }
    header>nav a:nth-child(5):hover{
        color: #7E58F2;
        border: 0.2rem solid #7E58F2;  
        background-color: white;

    }
    header nav a:nth-child(5)::after{
        display: none;
    }
    .row{
        margin-right: 0!important;
        margin-left: 0!important;
    }
    .fas{
    margin: 0.5rem;
    }
    /*css burger menu*/
    .menuBurger{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#e2d8fd;  position:absolute; text-align:center; font-size:12px; position:fixed}
    .menuBurger ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
    .menuBurger li {display: block;   padding:15px 0 15px 0; border-bottom:#5D40B6 1px solid;}
    .menuBurger li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
    .menuBurger ul li a { text-decoration:none;  margin: 0px; color:#666;}
    .menuBurger ul li a:hover {  color: #5D40B6; text-decoration:none;}
    .menuBurger a{text-decoration:none; color:#666;}
    .menuBurger a:hover{text-decoration:none; color:#5D40B6;}

    .menuBurger a{
    text-align: center;
    font-family: "SourceSansPro",sans-serif;
    font-size: 1.4rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color:#1B0E4F;
    transition:0.3s;
    }
    nav+a{
    background:none;
    position:absolute;
    top:1rem;
    right:1rem;
    line-height:45px;
    padding:5px 15px 0px 15px;
    color:#1B0E4F;
    border:0;
    font-size:2rem;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:10000000000000;
    display: none;
  }
    .hamburger{
    background:none;
    position:absolute;
    top:1rem;
    left:0;
    line-height:45px;
    padding:5px 15px 0px 15px;
    color:#1B0E4F;
    border:0;
    font-size:3rem;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:10000000000000;
    display: none;
  }
  .cross{
    background:none;
    position:absolute;
    top:1rem;
    left:1.5rem;
    padding:7px 15px 0px 15px;
    color:#1B0E4F;
    border:0;
    font-size:4rem;
    line-height:65px;
    font-weight:bold;
    cursor:pointer;
    outline:none;
    z-index:10000000000000;
  }
  .whiteBck{
      background-color: white;
  }
/*end burger menu*/
/*END NAVBAR*/


/*BANDEAU COOKIES*/
.js-cookie-consent{
    background-color: #1B0E4F;
    width: 100%;
    color: white;
    font-size: 18px; 
    font-family: "SourceSansPro-Bold",sans-serif;
    text-align: center;
    position: fixed;
    z-index: 99999;
    padding: 0.5em;
    bottom:0;

}

.js-cookie-consent .cookie-consent__message{
    margin-right: 2em;
}
.js-cookie-consent button{
    color: #7E58F2;
    padding: 0.7rem 2rem;
    border: 0.2rem solid #7E58F2;
    border-radius: 2rem;
    margin-left: 2em;
}
/* END BANDEAU COOKIES*/

/*BIG VIEW*/
.bigView article{
    display: block;
    display: block;
    width: 47rem;
    margin:5rem 3rem 3rem 7rem;
}
.bigView article h1{
    color: #1B0E4F;	
    font-family: "SourceSansPro-Bold",sans-serif;	
    font-size: 3.2rem;	
    font-weight: bold;	
    line-height: 4rem;
}
.bigView h1+p{
    margin-bottom: 3rem;
}
.bigView article p {
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 24px;	
    line-height: 32px;
}
.bigView article p strong{
    color: #5D40B6;	
    font-family: "SourceSansPro-Bold";	
    font-size: 32px;	
    font-weight: bold;	
    line-height: 40px;
    padding-top: 4rem;
}
.vignettes+p{
    color: #5D40B6;	
    font-family: "SourceSansPro";	
    font-size: 24px;	
    line-height: 32px;	
    text-align: center;
    margin:7rem 0;
}
#vignetteCaptionMobile{
    display: none;
}
#vignetteCaptionDestop{
    display: block;
}
.formulaireJs{
    width: 100%;
    margin:0 auto 6rem auto;;
    border-radius: 16px;	
    background-color: #FFFFFF;	
    box-shadow: 0 6px 16px 0 rgba(141,104,255,0.33);
    display: inline-block;
    align-items: center;
    position: relative;
}

.formulaireJs figure{
    width: 18%;
    display: inline-block;
    text-align: center;
    margin: 0.4%;
    padding: 2rem;
    border: 1px solid #DFDFDF;	
    border-radius: 16px;	
    background-color: #FFFFFF;	
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.33);
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 18px;
    transition: 0.3s;
    height: 11rem;
    vertical-align: bottom;
}
.formulaireJs figure figcaption{
    vertical-align: bottom;
    text-align: center;

}

#creationCompte{
    width: 80%;
    margin: 0px auto;
}
#creationCompte>div{
    margin: 20px 0px;
}
#creationCompte input{
    font-size: 15px;
    padding: 5px;
    color: gray;
    width: 100%;
    border: none;
    border-bottom: 2px solid gray;
}
/*Figcaption fuite et pv police */
figure.simulationForm2:nth-child(6) > figcaption:nth-child(2), figure.simulationForm3:nth-child(4) > figcaption:nth-child(2) {
    line-height: 2rem;
}
.formulaireJs figure:hover, .formulaireJs .active{
    border: 1px solid #7E58F2;
    background-color: #F2EEFE;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}



.formulaireJs button , .buttonHome{
    color: #FFFFFF;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;	
    font-weight: bold;	
    letter-spacing: 1px;	
    text-align: center;
    border-radius: 28px;	
    background-color: #7E58F2;
    text-transform: uppercase;
    padding: 1.2rem 2rem;
    transition: 0.4s;
    width: 17%;
    vertical-align: middle;
    margin-bottom: 1rem;
    margin-left: 1%;
}
.formulaireJs button:hover{
    color:#7E58F2;
    background-color:#F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
    
}
.step1 figure{
    width: 23.9%;
}
.step2,.step3 {
    padding-left: 1%;
}
figure.simulationForm2:nth-child(3),figure.simulationForm2:nth-child(4),figure.simulationForm2:nth-child(7){
    padding-top: 4rem;
}
figure.simulationForm3{
    padding-top: 4rem;
}


.step2 h6,.step3 h6,.step1 h6, .step2Bis h6{
    color: #444444;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;
    line-height: 32px;	
    text-align: center;
    text-transform: uppercase;
    margin-top: 2rem;
}
.formulaireJs.step2 figure,.formulaireJs.step3 figure{
    margin: 0.8%;
    height: 14rem;
    vertical-align: bottom;
}

#submit1,#submit2,#submit3,#submit6,#submit2Bis,#submit2Rep{
    position: unset;
    margin: 1rem 33%;
    width: 35%;
}
.step2Bis{
    text-align: center;

}
.step2Bis p , .step2Bis label {
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 1.6rem;	
    line-height: 2.4rem;
}
.step2Bis label{
    color:#666;
    margin:2rem 4rem;
}
.step2Bis input {
    margin : 1.5rem;
}
.step4 {
    padding: 5rem 15%;
   
}
.step4 img{
    float: left;
    margin: 0 2rem 0 0;
}
.step4 h5{
    color: #5D40B6;	
    font-family: "SourceSansPro";	
    font-size: 32px;	
    line-height: 32px;
    margin-bottom: 2rem;
}
.step4 h4{
    color: #5D40B6;	
    font-family: "SourceSansPro";	
    font-size: 24px;	
    line-height: 24px;
    margin-bottom: 2rem;
}
.step4 p {
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 24px;
    margin-bottom: 6rem;
}
.step4 form div {
    width: 49%;
    display: inline-block;
    margin :3.5rem 0;
    
}
.step4 label{
    display:none;
}
.step4 input{
    font-size: 1.6rem;
    border:none;
    border-bottom:1px solid #666;
    width: 90%; 
    transition:0.3s; 
}
.step4 input:focus {
    border-bottom:2px solid #7E58F2;
    
}

.step4 #cgucheckbox{
    display: inline-flex;
} 

.step4 #cgucheckbox #cgu{
    width:30px;
    height: 26px;
}

#errorsAjax ul{
    color: red;
    font-size: 1.5rem;
    border: solid 1px;
    border-radius: 1rem;
    background-color: rgba(247,147,147,0.5);
}
#submit4,#submit4Bis{
    position: unset;
    width: 45%;
    margin: 2rem 29%;
}

.step4 .disabled{
    border-radius: 8px;
    border: 1px solid #736b8c;
    background-color: #736b8c;
    font-family: "SourceSansPro-extraLight";
    color: white;
    font-weight: bold;
    padding: 5px 30px;
    font-size: 18px;
}

.step4 .disabled:hover{
    border-radius: 8px;
    border: 1px solid #736b8c;
    background-color: #736b8c;
    font-family: "SourceSansPro-extraLight";
    color: white;
    font-weight: bold;
    padding: 5px 30px;
    font-size: 18px;
}

.step4 .enabled{
    color: #FFFFFF;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 28px;
    background-color: #7E58F2;
    text-transform: uppercase;
    padding: 1.2rem 2rem;
    transition: 0.4s;
}

.step4 .enabled:hover{
    color: #7E58F2;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 28px;
    padding: 1.2rem 2rem;
    background-color: #F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}


.step5,.step6,.step2Rep{
    text-align: center;
    padding: 4rem 15% 2rem 15%;
}
.step5 h5,.step6 h5,.step2Rep h5{
    color: #5D40B6;	
    font-family: "SourceSansPro";	
    font-size: 32px;	
    line-height: 32px;
    text-align: left;
    margin-bottom: 2rem;
}
.step5 p,.step6 p, .step2Rep p{
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 20px;
    text-align: left;
}
.step5 h3{
    float: right;
}
.step5 img{
    width: 100%;
    margin-top: 2rem;
}
#submit5{
    position: unset;
    width: 20%;
    margin: 2rem;
}
.step6{
    padding-bottom: 6rem;
}
.step6 p {
    margin-bottom: 4rem;
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 24px;
}
.step6 img{
    margin: 5rem;
}
#previous2, #previous2Bis , #previous3 , #previous4{
    position: absolute;
    top:1rem;
    left: 2rem;
}
#previous2 .fas, #previous2Bis .fas, #previous3 .fas, #previous4 .fas{
    font-size: 2rem;
    color: #5D40B6;
}
#previous2 p, #previous2Bis p , #previous3 p , #previous4 p{
    display:inline-block;
    color: #5D40B6;	
    font-family: "SourceSansPro";	
    font-size:14px;	
    line-height: 32px;
}
/*BIG VIEW*/
.bigView+h3{
    padding: 24rem 0 6rem 0;
    background-image: url('../images/background/Back-top.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 15%;
}
/*VIGNETTES*/
.vignettes{
    margin: 0rem 0;
    padding-top: 1rem;
}
.vignettes img {
    width: 8rem;
}
.vignettes figcaption {
    color: #5D40B6;	
    font-family: "SourceSansPro-extraLight";	
    font-size: 3rem;	
    font-weight: 300;
    line-height: 3rem;
}

/*END VIGNETTES*/

/* BIGVIEW2 */
#bigView2{
    
}

#bigView2 .presentation{
    display:inline-flex;
    width:100%;
    margin-bottom: 30px;
}

.title-violet{
    color: #5D40B6;
    line-height: 0.5;
    font-size: 3rem;
    margin-bottom: 10px;
}

#bigView2 .presentation .intro{

    width:50%;
}

#bigView2 .presentation .vignettes2{
    width:50%;
    padding-top: 60px;
}

#bigView2 .presentation .vignettes2 div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

#bigView2 .presentation .vignettes2 div article{
    width:100%;
    display: inline-flex;
    margin: 1rem auto;
    padding: 1rem;
    box-shadow: 0 6px 16px 0 rgba(141,104,255,0.33);
    border-radius: 16px;
}

#bigView2 .presentation .vignettes2 div article img{
    width:10%;
}

#bigView2 .presentation .vignettes2 div article div{
    width:80%;
}

#bigView2 .presentation .vignettes2 div article div p{
    line-height: 1;
    margin-bottom: 0px;
    color: #5D40B6;
}

.vignettes2 article {
    position: relative;  /*les .picto-item deviennent référents*/
    cursor: help; /*affiche un petit ? au survole de l'element*/
}
.vignettes2 article:hover:after,.vignettes2 article:focus:after{ 
    content: attr(aria-label);  /* on affiche  l'attribut aria-label */
    position: absolute;  
    top: -8em;
    left: 50%;
    transform: translateX(-50%);  /* on centre horizontalement  */
    z-index: 1;  /* pour s'afficher au dessus des éléments en position relative */
    padding: 5px 14px;
    background: #5D40B6;
    color: #fff;
    border-radius: 6px;
    font-size: 1.5rem;
    font-family: "SourceSansPro";
    width: 40rem;
    height: 13rem;
}
/* on génère un second élément en :before pour la flèche */

#bigView2 [aria-label]:hover:before,
#bigView2 [aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: 0em;
    left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #5D40B6;
}



#bigView2 .step0{
    padding-bottom: 30px;
}

#bigView2 .step0 .introformulaire{
    margin-top:30px;
}

#bigView2 .step0 .introformulaire p:nth-child(1){
    color: #5D40B6;
    line-height: 0.5;
    font-size: 3rem;
    margin-bottom: 10px;

}

#bigView2 .step0 .introformulaire p:nth-child(1) i{
    padding: 1.5%;
    border: 1px solid lightgray;
    border-radius: 60px;
}

#bigView2 .step0 .introformulaire p:nth-child(2){
    font-size: 1.2rem;
}

#creationcompte>p{
    color: #5D40B6;
    font-size: 2.5rem;
    margin-top: 6%;
    padding: 5px 15px;
}

#civilite{
    width: 100%;
    height: 100%;
    font-size: 1.4rem;

}
#civilite option{
    
}

#bigView2 #cgucheckbox{
    font-size: 1.3rem;
    color: black;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 50%;
    margin: 36px auto;
}

#bigView2 #cgucheckbox #cgu {
    width: 30px;
    height: 26px;
}
#bigView2 #cgucheckbox a{
    
    color: #5D40B6;
    font-weight: bold;
    text-decoration: underline;
}

#submit0{
    margin: 2px auto;
}

.step0 .disabled {
    border-radius: 8px;
    border: 1px solid #736b8c;
    background-color: #736b8c;
    font-family: "SourceSansPro-extraLight";
    color: white;
    font-weight: bold;
    padding: 5px 30px;
    font-size: 18px;
}


.step0 .enabled {
    color: #FFFFFF;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 28px;
    background-color: #7E58F2;
    text-transform: uppercase;
    padding: 1.2rem 2rem;
    transition: 0.4s;
}

#bigView2 > div:nth-child(4) > p{
    color: #5D40B6;
    font-size: 2.2rem;
}

/* END BIGVIEW2 */


/*COMMENT CA MARCHE*/
.commentCaMarche,.faireConfiance{
    background-image: url('../images/background/Back-middle.png');
    background-size: cover;
    
}
.commentCaMarche{
    text-align: center;
}
.commentCaMarche article, .vignettes article {
    width: 30%;
    margin:0 1%;
    display: inline-block;
    text-align: center;
    border-radius: 16px;	
    background-color: #FFFFFF;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.33);
    padding: 4rem 5rem 0;
    vertical-align: text-top;
    height: 44rem;
}
.vignettes article {
    height: 22rem;
    padding-top: 3rem;
    position: relative;  /*les .picto-item deviennent référents*/
    cursor: help; /*affiche un petit ? au survole de l'element*/
}
.vignettes article:hover:after,.vignettes article:focus:after{ 
    content: attr(aria-label);  /* on affiche  l'attribut aria-label */
    position: absolute;  
    top: -12em;
    left: 50%;
	transform: translateX(-50%);  /* on centre horizontalement  */
    z-index: 1;  /* pour s'afficher au dessus des éléments en position relative */
    padding: 5px 14px;
    background: #5D40B6;
    color: #fff;
    border-radius: 6px;
    font-size: 1.5rem;
    font-family: "SourceSansPro";
    width: 30rem;
    height: 17rem;
}
/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #5D40B6;
}
.commentCaMarche article figure figcaption{
    color: #5D40B6;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 1.4rem;	
    line-height: 2.8rem;
    text-transform: uppercase;
    padding: 2rem 0 0 0;
}
.commentCaMarche article h2{
    font-size: 4rem!important;
    margin-top: -1rem;
}
.commentCaMarche article h2+p{
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 1.6rem;	
    line-height: 2.4rem;	
}
/*END COMMENT CA MARCHE*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*FAIRE CONFIANCE*/
.faireConfiance h2{
    padding: 6rem 0 3rem 0;
    text-align: center!important;
    font-size: 4rem!important;
}
.faireConfiance article{
    width: 30%;
    display: inline-block;
    text-align: center;
    margin: 1.5%;
    vertical-align: text-top;
    padding: 5rem 2rem 10rem 2rem;
    
}
.faireConfiance > article:nth-child(2){
    background-image: url('../images/background/1@2x.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38%;
    background-position-y: 0;
}
.faireConfiance > article:nth-child(3){
    background-image: url('../images/background/2@2x.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38%;
    background-position-y: 0;
}
.faireConfiance > article:nth-child(4){
    background-image: url('../images/background/3@2x.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38%;
    background-position-y: 0;
}
.faireConfiance article p{	
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 18px;	
    line-height: 28px;
}
.faireConfiance+div>a, .enParlez div>a, .mySlides a{
    display: block;
    margin: 0 auto;
    width: 25rem;
    text-decoration: none!important;
    text-align: center;	
    color: #FFFFFF;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;	
    font-weight: bold;	
    letter-spacing: 1px;	
    line-height: 56px;
    border-radius: 28px;	
    background-color: #7E58F2;	
    text-transform: uppercase;
    transition: 0.3s;
}
.faireConfiance+div>a:hover, .enParlez div>a:hover, .mySlides a:hover{
    color:#7E58F2;
    background-color:#F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}
.faireConfiance+div{
    background-image: url('../images/background/Back-bottom.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem 0 14rem 0;
}

#articlesLink a{
    display: block;
    margin: 0 auto;
    width: 25rem;
    text-decoration: none!important;
    text-align: center;
    color: #FFFFFF;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 56px;
    border-radius: 28px;
    background-color: #7E58F2;
    text-transform: uppercase;
    transition: 0.3s;
}

#articlesLink a:hover{
    color: #7E58F2;
    background-color: #F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}

    
/*END FAIRE CONFIANCE*/
/***************//*////////////////////////////////////////////********************************//***********************************************************************************************//*//////////////////////////////////////////////////////////////////////////////////*/
/*QUESTIONS*/
.questions{
    position: relative;
}
.questions h3{
    padding: 0 0 3rem 0;
}
.questions h3+p{
    width: 90%;
    margin: 1rem auto 10rem auto;
    text-align: center;
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 24px;
}
.questions article {
    display: inline-block;
    width: 59%;
    background-color: #F4F4F4;
    vertical-align: top;
    padding: 3rem 3rem 9rem 4rem;
    margin-left: -2rem;
    height: 39rem;
}
.questions article h5 {
    color: #5D40B6;	
    font-family: "SourceSansPro-semiBold";	font-size: 20px;	
    line-height: 28px;
    margin-bottom: 2rem;
}
.questions article p{
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 28px;
}
.questions aside {
    width: 40%;
    display: inline-block;
    padding-left: 2rem;
}
.questions .w3-left , .questions .w3-right{
    display: none;
    color: #5D40B6;
}
.questions .w3-left{
    position: absolute;
    font-size: 3rem;
    top: 48%;
    left: 2%;
}
.questions .w3-right{
    position: absolute;
    font-size: 3rem;
    top: 48%;
    right: 2%;
}
.titleOff {
    color: #444444;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;	
    line-height: 40px;
}
.titleOff:hover{
    color:#5D40B6;
}
.titleOff::after {
    content: '';
    display: block;
    width: 0;
    height: 1.5px;
    background: #5D40B6;
    transition: width .3s;
    z-index: 2;
}
.titleOff:hover::after {
    width: 100%;
}
.titleActif{
        color: #5D40B6!important;
        border-bottom: 2px solid #5D40B6;
        z-index: 2;
}
.pastilles{ 
    margin-top: 1rem;
    display:none;
}
.pastilleOff{
    color:#999999;
}
.pastilleOn{
    color: #5D40B6;
}
.mySlides {display:none}


/*END QUESTIONS*/

/* SIMULATEUR */ 

#simulateur h1{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 4rem;
    text-align: center;
}

#simulateur #introsimu{  
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2rem;
    text-align: center;
}

#simulateur section{
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #eeeeee;
    border-radius: 7px;

}

#simulateur section #formulaire{
    width: 99%;
    margin: 5px auto;
    border: 10px solid #7E58F2;
    background-color: #eeeeee;
    padding: 6%;
    text-align: left;

}

#simulateur section #formulaire label{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 4rem;
    text-align: left;
}

#simulateur section #formulaire select{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 4rem;
    text-align: left;
    border-radius: 8px;
    margin: 1% 20%;
    width: 40%;
}

#simulateur section #formulaire #perte input{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 4rem;
    text-align: center;
    border-radius: 8px;
    margin: 1% 20%;
    width: 40%;
}

#simulateur #submitsimulateur{
    color: #FFFFFF;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 28px;
    background-color: #7E58F2;
    text-transform: uppercase;
    padding: 1.2rem 2rem;
    /*width: 30%;*/
    
}


/* END SIMULATEUR */

/* RESULTAT SIMULATEUR */
#result #recap {
    padding: 0 10%;
    margin-bottom: 30px;
}


#result #recap h1{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 4rem;
    text-align: center;
}

#result #recap >div{
    background-color: #eee;
    padding: 10px 20px;
    margin: 30px auto;
}
#result #recap >div>p {
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2.2rem;
    padding-left: 15px;
    text-decoration: underline; 

}

#result #recap div div div p{
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2rem;
    line-height: 3rem;
    text-align: left;
    
}

#result #recap div div div span{
    font-size: 1.5rem;
    text-transform: uppercase;
}


#result #recap #montant {
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 2.2rem;
    text-align: center;
}

#result #recap #montant span{
    font-size: 2.8rem;
    color: #5D40B6;
}

#result #recap #accompagnement {
    color: #5D40B6;
    font-family: "SourceSansPro-Bold",sans-serif;
    font-size: 1.8rem;
    text-align: center;

}

/* END RESULTAT SIMULATEUR */


/*VOUS EN PARLEZ*/
.enParlez{
    background: url('../images/background/Back-middle.png');
    text-align: center;
}
.enParlez h3{
    padding-top: 2rem;
}
.enParlez article{
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 30%;
    margin: 5rem 1%;
    padding:10rem 1rem 0 1rem;
    background-image: url('../images/background/quote-right@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-position-y:0;
}
.enParlez article>p {
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 18px;	
    font-style: italic;	
    line-height: 32px;
}
.enParlez article p+p{
    color: #5D40B6;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;	
    line-height: 24px;
    font-style: normal;
}
.enParlez article p strong {
    	color: #1B0E4F;
}
/*END VOUS EN PARLEZ*/
/*CONSEIL ET INFOS*/
.conseilInfos{
    background-color: #F8F6FC;
    text-align: center;
}
.conseilInfos #overlay{
    display: block;
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 41rem;
}
.conseilInfos article:hover{
   transform: scale(1.03);
}
.conseilInfos article{
    width: 22%;
    display: inline-block;
    margin: 6rem 1%;
    border-radius: 6px;	
    background-color: #FFFFFF;	
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
    vertical-align: top;
    height: 41rem;
    position: relative;
    text-align: initial;
    transition: 0.3s;
}
.conseilInfos > article:nth-child(2) > a:nth-child(4){
    padding-top:1.4rem;
}
.conseilInfos article img{
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.conseilInfos h6{
    color: #5D40B6;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 1.4rem;
    line-height: 24px;
    padding: 1rem 0 1rem 2rem;
}
.conseilInfos p{
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size:1.8rem;	
    line-height: 24px;
    padding: 1rem 0 1rem 2rem;
    
}
.conseilInfos p+a{
    float: right;
    padding: 4rem 2rem 2rem 0;
    color: #1B0E4F;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 13px;
    line-height: 17px;
    text-decoration: none;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    right: 0;
}
.conseilInfos p+a:hover{
    text-decoration: none;
    color:#7E58F2;

}
/*END CONSEIL ET INFO*/
/*FOOTER */
footer{
    text-align: center;
}
footer >img{
    width: 20%;
    margin: 2rem;
}
footer nav img{
    width: 5rem;
    margin: 2rem 1rem;
}
footer nav img:hover{
    background-color:#E2D8FD;
    border-radius: 25rem;
}

footer #up{
    width: 60%;
    margin: 10px auto;
    display: flex;
    justify-content : space-between;
}

footer #partenaires #logosentreprises{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer #partenaires img{
    width: 70%;
    margin: 1px 20px;
}

footer #partenaires p{
    margin: 1rem auto; 
    margin-bottom: 2rem; 
    color: #1B0E4F;
    font-family: "SourceSansPro";    
    font-size: 3.2rem;   
    line-height: 20px;
}

footer #partenaires p span{
    font-family: "SourceSansPro-Bold";
}

footer>p{
    width: 80%;
    margin: 2rem auto;	
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 14px;	
    line-height: 20px;
}
footer > p:nth-child(4){
    color: #999999;	
    font-family: "SourceSansPro";	
    font-size: 14px;	
    line-height: 20px;
    padding-bottom: 10rem;
}



footer .footerlinks p{
    font-size: 15px;
}
/*END FOOTER*/

.article{
    background-color:#F2EEFE;
    padding: 4rem 10%;
    position: relative;
}
.article h1{
    color: #1B0E4F;	
    font-family: "SourceSansPro-Bold";	
    font-size: 40px;
    text-align: center;
}
.article article {
    width: 80%;
    margin: 0 auto;
    display: block;
    
    
}
.article p, .article ul li{
    margin: 1rem 0;
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 18px;
    line-height: 32px;
}
.article img{
    width: 50%;
    margin: 5px auto;
}
.article aside {
    position: absolute;
    bottom: 0;
    right: 5%;
    margin-bottom: 1rem;
}

.article p.content-synopsis{
    text-align: justify;
    font-size: 22px;
    margin-bottom: 2%;
}

.article #CTA_buttons a{
    display: block;
    margin: 0 auto;
    width: 25rem;
    text-decoration: none!important;
    text-align: center;
    color: #FFFFFF;
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 56px;
    border-radius: 28px;
    background-color: #7E58F2;
    text-transform: uppercase;
    transition: 0.3s;
}

.article #CTA_buttons a:hover{
    color: #7E58F2;
    background-color: #F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}

.nav-login li a{
    color: #1B0E4F!important;	
    font-family: "SourceSansPro";	
    font-size: 18px;
}
.title-form{
    color: #5D40B6!important;	
    font-family: "SourceSansPro-extraLight";	
    font-size: 25px;
    margin: 0 2rem;
}
.form-login {
    border-radius: 16px!important;	
    background-color: #FFFFFF;	
    box-shadow: 0 6px 16px 0 rgba(141,104,255,0.33);
}
.form-login label {
    color: #444444;	
    font-family: "SourceSansPro";	
    font-size: 16px;
}
.btn-login{
    color: #FFFFFF;	
    font-family: "SourceSansPro-semiBold";	
    font-size: 16px;	
    font-weight: bold;	
    letter-spacing: 1px;	
    text-align: center;
    border-radius: 28px;	
    background-color: #7E58F2;
    padding: 1.2rem 2rem;
    transition: 0.4s;
}
.btn-login:hover{
    color:#7E58F2;
    background-color:#F2EEFE;
    border: 1px solid #7E58F2;
    box-shadow: 0 2px 16px 0 rgba(178,153,255,0.43);
}

.droit section{
    margin: 4rem 18%;
}
.droit img{
    width: 100%;
}
.droit h1,.droit h2,.droit h3,.droit h4,.droit h5{
    margin: 2rem 0;
    text-align: center;
}
.droit h1{
    color: #1B0E4F;	
    font-family: "SourceSansPro-Bold";	
    font-size: 40px;
}
.droit h4{
    color: #1B0E4F;
    font-family: "SourceSansPro-semiBold";	
    font-size: 20px;	
    line-height: 28px;
}
.droit h5 {
    color: #1B0E4F;
    font-family: "SourceSansPro-Bold";	
    font-size: 16px;	
    line-height: 28px;
}
.droit p {
    color: #444444;
    margin: 5rem 0;
}
.droit > section:nth-child(3) > p:nth-child(5){
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 24px;
}
.droit > section:nth-child(3) > p:nth-child(6){
    font-family: "SourceSansPro-Bold";	
    font-size: 16px;	
    line-height: 24px;
}
.droit > section:nth-child(3) > p:nth-child(7){
    font-family: "SourceSansPro";	
    font-size: 16px;	
    font-style: italic;	
    line-height: 24px;
}
.droit ul li{	
    color: #1B0E4F;	
    font-family: "SourceSansPro";	
    font-size: 16px;	
    line-height: 24px;
    list-style: disc; 
    text-align: justify;
}
.droit ul li+li{
    list-style: decimal; 
}

.droit #indemnisation ul li+li, .droit #cgu ul li+li, .droit #confidentialite ul li+li{
    list-style: disc; 
}
.droit #indemnisation ul li{
    padding-top: 10px;
}
.droit #confidentialite h4 {
    text-align: left!important;
}
.droit ul + p{
    padding: 5rem 0 0 6rem;
    color: #7E58F2;	
    font-family: "SourceSansPro-extraLight";	
    font-size: 20px;
    line-height: 32px;
    background-image: url('../images/background/quote-right@2x.png');
    background-size: 8rem;
    background-position: 0rem 2rem;
    background-repeat: no-repeat;
}
.droit #indemnisation ul + p, .droit #cgu ul + p, .droit #confidentialite ul + p{
    background: none;
    padding: 0;
}
.droit #comment p{
    color: #444444; 
    font-family: "SourceSansPro-extraLight";    
    font-size: 20px;    
    line-height: 32px;
}

.droit #nous p, .droit #comment .text, .droit #indemnisation p, .droit #cgu p, .droit #confidentialite p{
    color: #444444; 
    font-family: "SourceSansPro-extraLight";    
    font-size: 20px;    
    line-height: 32px;
    text-align: justify;
    
}

.droit #thanks p{
    color: #444444; 
    font-family: "SourceSansPro-extraLight";    
    font-size: 20px;    
    line-height: 32px;
    text-align: center;
}


.droit #cgu p, .droit #confidentialite p {
    margin: 1rem 0;
}

.droit #comment .text{
    width: 125%;
    margin: auto 0px;
}

.droit #comment article{
    display: flex;
    justify-content: center;
    margin: 40px 0px;
}

.droit #comment article aside{
    text-align: center;
    /*width: 20%;*/
    /*float: left;*/
    margin: 30px 30px 30px 0px;
}

.droit #comment article aside figcaption{
    color: #5D40B6;
    font-family: "SourceSansPro-semiBold";
    font-size: 1.4rem;
    line-height: 2.8rem;
    text-transform: uppercase;
    padding: 2rem 0 0 0;
}

.droit #comment article aside h2{
    margin: 0;
    font-size: 15px;
}

.droit #comment article aside p{
    margin: 0;
    color: #444444;
    font-family: "SourceSansPro";
    font-size: 1.6rem;
    line-height: 2.4rem;
}
/*.droit #comment article .text{
    width: 80%;
}*/
.droit #comment article.right aside{
    /*float: right;*/
    margin: 30px 0px 30px 30px;
}
.droit #comment article img{
    width: 100px;
}

/*FORMULAIRE CONVENTION */
#formulaireconvention .box {
  width: 90%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

#formulaireconvention .flexbox{
    display: flex;
}


#formulaireconvention .overlay {
    overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
#formulaireconvention .overlay:target {
  visibility: visible;
  opacity: 1;
}

#formulaireconvention .popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 80%;
  position: relative;
  transition: all 5s ease-in-out;
  overflow: auto;
}

#formulaireconvention .popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
#formulaireconvention .popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
#formulaireconvention .popup .close:hover {
  color: #06D85F;
}
#formulaireconvention .popup .content {
  max-height: 30%;
  overflow: auto;
}

#formulaireconvention form{
    margin-top: 50px;
}

#formulaireconvention label{
    font-size: 20px;
}
.formcustomerinfos div {
    width: 50%;
    margin: 1% auto;
}
.formcustomerinfos .bootstrap-select {
    width: 30%!important;
    margin-top: 0;
}
/*.nationaliteuser {
    width: 15%!important;
}
.adressecustomer {
    width: 86%!important;
}*/
.formcustomerinfos .card, .formcustomerinfos .body, .formcustomerinfos .col-md-4 {
    margin-bottom: 0!important;
}
/*.zipcodeuser {
    width: 15%!important;
}*/
.formcustomerinfos{
    width: 80%;
}
.formcustomerinfos label, .formcustomerinfos select {
    font-size: 20px;
    font-family: "SourceSansPro-extraLight";
    color: #1B0E4F;
}
.formcustomerinfos button {
    font-family: "SourceSansPro-semiBold";
    font-size: 20px;
    color: #5D40B6!important;
}
.formcustomerinfos input {
    font-family: "SourceSansPro-semiBold";
    font-size: 16px;
    color: #5D40B6;
}


.btnformuser {
    margin-left: 75%;
    border-radius: 8px;
    border: 1px solid #736b8c;
    background-color: #736b8c;
    font-family: "SourceSansPro-extraLight";
    color: white;
    font-weight: bold;
    padding: 5px 30px;
    font-size: 18px;
}

#formulaireconvention .btnformuser{
    color: white;
    margin-left: 47%;

}


.enabled{
    border: 1px solid #5D40B6;
    background-color: #5D40B6;
    cursor: pointer;
}

/* FORMULAIRE CONVENTION END*/
/* PAGE CONTACT FORM */

    .contactform h2 {
        margin-top: 2%;
    }
    .contactform label {
        color: #1B0E4F;
        font-family: "SourceSansPro-semiBold";
        font-size: 15px;
        margin: 2% 0 0 35%;
    }
    .contactform input {
        display: block;
        width: 25%;
        margin-left: 35%;
        padding: 1%;
        border-radius: 8px;
        border: solid 1px #5D40B6;
        font-size: 19px;
        font-family: "SourceSansPro";
        color: #1B0E4F;
    }
    .contactform input:placeholder {
        color: #5D40B6;
    }
    .contactsujet {
        width: 35%!important;
    }
    .contactform textarea {
        border-radius: 8px;
        border: 1px solid #5D40B6;
        font-family: "SourceSansPro";
        color: #1B0E4F;
        padding: 5%;
        width: 35%;
        height: 150px;
        font-size: 16px;
        margin-left: 35%;
        display: block;
        padding: 0!important;
    }
    .contactform .btncontactform {
        border-radius: 8px;
        border: solid 1px #5D40B6;
        font-size: 19px;
        font-family: "SourceSansPro-extraLight";
        background-color: #5D40B6;
        color: white;
        font-weight: bold;
        width: 10%;
        margin: 2% 0 4% 35%;
    }

    /*INFOBULLES*/
#infobulles a.info {
   position: relative;
   color: #444444;
   text-decoration: none;
}
#infobulles a.info span {
   display: none; /* On masque l'infobulle. */
}
#infobulles a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
#infobulles a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   bottom: 20px; /* On positionne notre infobulle. */
   left: 20px;

   background: #5D40B6;

   color: white;
   padding: 3px;
}

/*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*MEDIA QUERIES*/

@media screen and (max-width: 1400px){
    header > a:nth-child(1) > img{
        width:150px;
    }
    
}
@media screen and (max-width: 1300px){
    .sticky-top {
        padding: 0 5% !important;
    }
    
}
@media screen and (max-width: 1100px){
     
    .imgBackground{
        width: 50%;
        top: 10%;
        right: 0%;
    } 
    .sticky-top{
        background-color: white;
    }
    .bigView{
        padding: 0 3%;
    }
    .bigView article {
        margin: 4rem 0 4rem;
    }

    #bigView2 .presentation{
    display:flex;
    flex-direction: column;
    }

    #bigView2 .presentation .intro{
    width:100%;
    }

    #bigView2 .presentation .vignettes2{
    width:100%;
    }

    figure.simulationForm2{
        line-height: 2rem;
    }
    .formulaireJs.step2 figure.simulationForm2{
        margin:0.3%;
        width: 19%;
    }
    .hamburger{
        display: block;
    }
    nav+a{
        display:block;
    }
    header a:first-child{
        margin: 1.2rem auto;
    }
    header>nav {
        display: none;
    }
}

@media screen and (max-width:1050px){
    .imgBackground {
        right: -6%;
    }
    .sticky-top,.bigView,.commentCaMarche,.faireConfiance,.enParlez,.conseilInfos,footer,.questions{
        padding: 0 3%;
        text-align: center;
    }
    .bigView h1,.bigView p{
        width: 100%;
        text-align: left;
    }
    .vignettes article{
        width: 30%;
    }
    .vignettes + p{
        text-align:center;
    }
    .bigView article{
        margin:0 0 1rem 6rem;
        width: 45%;
    }
    .vignettes article{
        width: 30%;
        margin: 0 1% 4rem 0;
    }
    .formulaireJs{
        width: 95%;
        margin:2rem;
        text-align: center;
        padding: 1rem 0 0 0;
        margin-bottom: 3rem;
    }
    .formulaireJs figure{
        width: 42%!important;
    }
    .formulaireJs figure:hover,.formulaireJs .active{
        width: 42%!important;
    }
    .formulaireJs button{
        position: unset;
        width: 25rem;
        margin: 4rem 0;
    }
    .step4 {
        padding: 7rem 5%;
        text-align: initial;
    }
    .step4 img {
        margin-bottom: 4rem;
    }
    .step2Bis,.step2Rep{
        padding: 2rem ;
    }
    .step2Bis p{
        text-align: center;
    }
    .step5,.step6 {
        padding: 4rem;
    }
    .bigView h2+p{
        margin: 3rem auto;
        width: 80%;
    }
    .bigView + h3{
        padding-top: 12rem;
    }
    .commentCaMarche{
        padding-bottom: 4rem;
    }
    .commentCaMarche article h2{
        font-size: 3rem !important;
    }
    .commentCaMarche article{
        width: 28%;
        margin: 1%;
        padding: 3rem 3rem;
    }
    .faireConfiance article {
        width:28%;
        padding:3rem 2rem 3rem 2rem;
    }
    .faireConfiance h2{
        padding: 3rem 0 1rem 0;
        font-size: 3rem !important;
    }
    .questions{
        padding-bottom: 2rem;
    }
    .questions h3 + p{
        margin-bottom: 4rem;
    }
    .questions aside{
        width: 40%;
    }
    .questions article{
        width: 57%;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    .enParlez article{
        width: 28%;
        margin:1rem 1%;
        padding: 4rem 1rem 0 1rem;
    }
    .conseilInfos{
        padding-top: 3rem;
    }
    .conseilInfos article{
        width: 35%;
        margin: 2rem 2%;
    }
    .conseilInfos h6, .conseilInfos p{
        text-align:left;
    }
    .conseilInfos a {
        padding:0 2rem 2rem 0;
    }
    .conseilInfos > article:nth-child(2) > a:nth-child(4){
        padding-top: 0rem;
    }
    .article{
        padding: 2rem 0% ;
    }
    .article img{
        margin-left:0;
    }
    .droit #comment article{
        flex-direction: column;
        align-items: center;
    }

    .formcustomerinfos{
        width: 90%;
        margin: 5% auto;
    }
    
    .formcustomerinfos input{
        font-size: 20px;
    }
    .formcustomerinfos select {
        width: 40%;
    }

    #formulaireconvention .flexbox{
        display: flex;
        flex-direction: column;
    }

    #formulaireconvention input{
        width: 100%;
        padding: 20px;
    }
    
    #formulaireconvention #agree {
        width:30px;
        height:30px;
    }

    .formcustomerinfos div {
        width: 100%;
    }
    
    #formulaireconvention .btnformuser {
        margin: 0% 5%;
        width: 90%;
        padding: 20px;
    }
}
@media screen and (max-width:800px){

    #bigView2 .step0 .introformulaire p:nth-child(1) {
        line-height: 1.5;
    }

    .droit h2{
        font-size: 36px!important;
    }
    .vignettes article {
        margin:-1rem auto 0rem auto;
        box-shadow: none;
        display: inline-block;
        width: 30%;
        padding: 0;
        height: inherit;
    }
    .vignettes img {
        width: 7rem;
    }
    .vignettes+p{
        font-size: 18px;
        margin: 1rem 0;
    }
    
    .vignettes article figcaption {
        font-size: 2.8rem;
        line-height: 2.1rem;
    }
    .vignettes article:hover:after,.vignettes article:focus:after,[aria-label]:hover:before,
    [aria-label]:focus:before{
        display: none;
    }

    footer #up{
        flex-direction: column;
    }

    

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

    header a img{
        width: 240px;
    }
    .commentCaMarche article{
        display:block;
        width: 75%;
        margin: 0 auto 1rem auto;
        padding: 3rem 3rem;
    }
    .faireConfiance article {
        width:100%;
        padding:3rem 2rem 3rem 2rem;
    }
    .faireConfiance article {
        background-size: 18%!important;
    }
    .questions aside{
        display:none;
    }
    .questions .w3-left , .questions .w3-right , .pastilles{
        display: block;
    }
    .questions article{
        width: 80%;
        margin: 0 auto;
        padding: 2rem 1rem;
    }
    .enParlez article{
        width: 80%;
        margin:1rem 1%;
        padding: 4rem 1rem 0 1rem;
    }
   
    .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
@media screen and (max-width:600px){
    
    .imgBackground{
        display: none;
    } 
    .bigView h1,.bigView h1+p ,.bigView p+p{
        text-align: center;
    }
    .bigView h1+p{
        margin-bottom: 0.5rem;
    }
    .bigView article{
        margin:0rem auto 0rem auto;
        width: 95%;
    }
    .bigView article h1 {
        font-size: 2.5rem;
    }
    .bigView article p {
        font-size: 16px;
        line-height: initial;

    }
    .bigView article p strong
    {
        font-size: 23px;
    }
    .vignettes article {
       /* margin:-3rem auto 0rem auto;*/
    }
    .vignettes img {
        width: 5rem;
    }
    .vignettes article figcaption {
        font-size: 1.8rem;
        line-height: 1.8rem;
    }

    .vignettes article{
        width: 30%;
    }
    #vignetteCaptionMobile{
        display: block;
    }
    #vignetteCaptionDestop{
        display: none;
    }
    .formulaireJs{
        margin:2rem auto;
        text-align: center;  
    }
    .formulaireJs figcaption{
        font-size: 1.3rem;
        line-height:15px;
    }
    figure.simulationForm2:nth-child(3) > img:nth-child(1),figure.simulationForm2:nth-child(4) > img:nth-child(1){
        width: 7rem;
    }

    #submit1,#submit2,#submit2Bis,#submit2Rep,#submit3,#submit4,#submit5,#submit6{
        width: 80%!important;
        margin-left: 10%;
    }
    
    .step4 img{
        margin: 0 1rem 1rem 0;
        width: 20%;
    }
    .step4{
        text-align: initial;
    }

    
    .step5 h2{
        font-size: 3rem !important;
    }
    .step6 img{
        width: 60%;
    }
    #submit5,#submit6,#submit2Rep{
        width:40%;
    }
    .bigView + h3{
        padding-top: 9rem;
    }
    
    .questions article{
        height: 64rem;
    }
    
    
    .conseilInfos article{
        width: 90%;
        margin: 2rem 0;
    }
    .conseilInfos a {
        padding:0 2rem 2rem 0;
    }
    .article {
        padding: 2rem 5%;
    }
    .article img {
        width: 100%;
        float: left;
        margin: 1rem 0rem 4rem;
    }
}
@media screen and (max-width: 400px){
    header a img{
        width: 20rem;
    }  
}
@media screen and (max-width: 345px){
    .step4 img{
        width: 20%;
    }
}

.article-h2 h2{
    color: #5D40B6 !important;
    font-family: “SourceSansPro-extraLight” !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 32px !important;
    text-align: left !important;
    padding-top: 15px !important;
}

.article-h2 h3{
    color: #1B0E4F !important;
    font-family: “SourceSansPro-extraLight” !important;
    font-size: 24px !important;
    line-height: 48px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    padding-top: 5px !important;
}

.article-h2 h3::after{
    content: '';
    display: block;
    width: 5%;
    height: 2px;
    background: #7E58F2;
    /*text-align: center;*/
    margin:0;
}