@charset "utf-8";

@media screen and (min-width: 1660px){
    .header{
        max-width: 1660px;
        margin: 28px auto 20px auto;
    }
}
@media screen and (max-width: 1559px){
    .maxwidth{
        max-width: 100%;
        padding: 0 20px;
    }
}

@media screen /*and (min-width: 1025px)*/ and (max-width: 1200px){

}

@media screen /*and (min-width: 861px)*/ and (max-width: 1024px){
    h1.Title{
        margin: 25px auto 15px auto;
        font-size: 28px;
        line-height: 33px;
    }
    h2.Title{
        margin: 25px auto 15px auto;
        font-size: 21px;
        line-height: 25px;
    }
    h3.Title{
        margin: 25px auto 15px auto;
        font-size: 17px;
        line-height: 21px;
    }
    .desc1{
        margin: 10px auto 15px auto;
        font-weight: 500;
        font-size: 13px;
        line-height: 17px;
    }
    .desc2{
        margin: 10px auto 15px auto;
        font-weight: 300;
        font-size: 13px;
        line-height: 17px;
    }
    .intro>.evolue{
        bottom: 20px;
        right: 30px;
        left: initial;
        top: initial;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        padding: 16px 20px;
        max-width: 50vw;
    }
}
/* MENU MOBILE */
@media screen /*and (min-width: 861px)*/ and (max-width: 960px){
    .intro>.evolue {
        display: none;
    }
    .withSideBar{
        display: block;
        /*grid-template-columns: auto;*/
    }
    .pageContainer>.Left{

    }
    .pageContainer>.Right{
        display: none;
    }

    .header{
        grid-template-columns: none;
        display: block;
        text-align: center;
        margin-top: 60px;
    }
    .header .login{
        margin-top: 20px;
    }
    .header .logo{
        margin: 0 auto;
    }

    .menuR{
        display: flex;
        position: fixed;
        z-index: 10000;
        top: 0px;
        left: 0px;
        right: 0px;
        width:100%;
        height: 60px;
        text-align: left;
        background: #009DE0;
        -webkit-box-shadow: inset 0 -1px 0 #FFFFFF;
        box-shadow: inset 0 -1px 0 #FFFFFF;
    }
    .menuR span{
        color: #FFFFFF;
        padding-left: 10px;
        font-family: Roboto,"open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
    }
    .Burger{
        display: inline-block;
        color: #FFFFFF;
        font-size: 32px;
        align-self: center;
        padding: 20px;
    }
    .menu{
        display: none;
        position: fixed;
        z-index: 10000;
        top: 60px;
        left: 0px;
        right: 0px;
        width:100%;
    }
    .menu ul{
        display: block;
    }
    .menu ul>li{
        display: block;
        width: 100%;
        background: #009DE0;
        font-size: 20px;
        line-height: 60px;
    }
    .menu ul>li>a{
        border-bottom: 1px solid #FFFFFF;
        /*
        -webkit-box-shadow: inset 0px 0px 0px 1px #FFFFFF;
        box-shadow: inset 0px 0px 0px 1px #FFFFFF;
        */
    }
    /*
    .menu ul>li:last-child>a{
        border-bottom: none;
    }
    */
    .header input[name=Email]{
        width: auto;
    }
}

@media screen /*and (min-width: 769px)*/ and (max-width: 860px){
    .StepsGrid{
        grid-gap: 20px;
    }
    .StepsContainer{
        padding-bottom:15px;
    }
    .StepsContainer>ul>li{
        margin-top: 10px;
        display: block;
        margin-left: 0;
    }
    .StepsContainer>ul>li:first-child{
    }
    .StepsContainer ul>li:nth-child(3) .Step .Arrow{
    }
    .StepsContainer .Step{

    }
}

@media screen /*and (min-width: 641px)*/ and (max-width: 768px){
    .footerJournaux{
        grid-auto-flow: row;
        grid-template-columns: none;
        padding: 20px 10px;
        align-items: center;
    }
    .footerJournaux .title {
        text-align: center;
    }
    .footerJournaux .desc {
        text-align: center;
    }
    .footerJournaux .Button{
        font-size: 25px;
    }
    .footer .s1>div:nth-child(1){
        grid-area: a;
    }
    .footer .s1>div:nth-child(2){
        grid-area: b;
    }
    .footer .s1>div:nth-child(3){
        grid-area: c;
    }
    .footer .s1>div:nth-child(4){
        grid-area: d;
    }
    .footer .s1{
        grid-template-columns: none;
        grid-template-areas: "a d"
                             "c b";
    }
    .intro>.overlay{
        width: fit-content;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .intro>.info1{
        display: none;
    }
    .intro>.redigez{
        top: 120px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .intro>.info2{
        bottom: 12px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@media screen /*and (min-width: 481px)*/ and (max-width: 640px){
    .header .espaceclient{
        text-align: center;
    }
    .header .login ul>li{
        display: inline-block;
        margin-top: 10px;
    }
    .header .login .BLogin{
        margin: 0 auto;
    }
    .header .logo{
        max-width: 100%;
    }
    h1.Title{
        margin: 25px auto 15px auto;
        font-size: 23px;
        line-height: 25px;
    }
    h2.Title{
        margin: 25px auto 15px auto;
        font-size: 20px;
        line-height: 24px;
    }
    h3.Title{
        margin: 25px auto 15px auto;
        font-size: 17px;
        line-height: 21px;
    }
    .desc1{
        margin: 10px auto 15px auto;
        font-weight: 500;
        font-size: 13px;
        line-height: 17px;
    }
    .desc2{
        margin: 10px auto 15px auto;
        font-weight: 300;
        font-size: 13px;
        line-height: 17px;
    }
    .StepsContainer{
        padding-bottom:15px;
    }
    .StepsContainer>ul>li{
        display: block;
        margin-left:10px;
        margin-right:10px;
    }
    .StepsContainer>ul>li:first-child{
        margin-left:10px;
        margin-right:10px;
    }
    .StepsContainer ul>li:nth-child(3) .Step .Arrow{
        display: inline-block;
    }
    .StepsContainer .Step{

    }
    .loginContainer{
        display: block;
    }
    .loginContainer>div:nth-child(1){
        border-top: 2px solid #009DE0;
    }
    .loginContainer>div:nth-child(2){
        border-top: 2px solid #009DE0;
        border-bottom: 2px solid #009DE0;
        border-left:none;
        border-right:none;
        padding-bottom: 12px;
    }

    .info_circle_list{
        grid-template-columns: 1fr;
    }
    .info_panel_list{
        grid-template-columns: 1fr;
    }
    .StepsGrid{
        grid-template-columns: none;
        grid-auto-flow: row;
    }
    .StepsGrid .Step1{
        margin-bottom: 20px;
    }
}
@media screen /*and (min-width: 320px)*/ and (max-width: 480px){
    .footer .s1{
        grid-template-columns: none;
        grid-template-areas: "a" "c" "b" "d";
    }
    .header .login ul>li{
        display: block;
    }
}

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