/*--------------------THIS FOR NAV BAR--------------------------------------------*/
a,button:hover{
cursor: pointer;
}

nav{
    background-color: #fff;
   width: 100%;  /* 1920px */
    display:flex;
    
}

.logo-header{ 
    width : auto;
     margin-left:9.01%;} 



.social-media{padding-left : 50%;
} 
.cta-navbar {
   
    margin-left : 2em;
    margin-top:1.5em;
    border: none;
    border-radius: 0.7em;
    background-color: #57555581;
    color: #272629;
    padding:1em 1em;
    text-align: center;
    text-transform:uppercase;
    font-size: 0.8em;

}
.social-media img{
    width:2.5em;
    height:auto;
    margin-left: 1em;
    margin-top: 1em;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;   
}



.chapeau {
    background-color: rgba(27, 23, 57, 0.4);
    text-align: center;
    color:#7C788F;
    opacity:1;
    padding:0.5em 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5em;
    width:100%;
    }
    
section {
    
    background-color:#F0EEFA;
    width:85.62%;
    height: auto;    
}

section div{
    width: auto;
    line-height: 2em;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    margin: auto; 
    padding-top: 5%;
    padding-left: 5%;
    padding-right : 5%;
    padding-bottom : 5%;
   text-align:justify
    
}

#mentions {
    
    margin: 6.92% auto 11.56%;}

    footer {
        width: 100%;
        height: auto;
        background-color:#1D1739 ;
        display: flex;
        justify-content: space-between;
        
       }
    
    .intro {
        padding-left: 5%;
        margin-top: 2%;
        line-height: 1.5em; 
        
    }
    .intro div img {
        max-width: 30%;
        height: auto;
        }
    
    footer p,a {
        font-family: 'Quicksand',sans-serif;
        color:white;
        font-size:0.8em;
        }
    
    .logo-footer {
        display: flex; 
        justify-content:center ;
        margin-left: 5.5%;
        /* align-items:flex-start; */
    
         }
    
    .logo-footer img {
        margin-top: 2%;
        width: 11rem;
        height: auto;
    }
    
     .logo-footer p{ 
        margin-left: 90%;
        margin-top: -40%; 
    }
    
     .logo-paris {
        padding-right: 30%; 
        padding-left: 30%;
    }
    
    .logo-lille {
        padding-right: 30%; 
    } 
    /* .logo-nantes {
        /* margin-right: 30%;  */
    
    
    .legal {
         margin-top: 6.5%; 
         margin-right: 10%;
    
    } 

    /* ================================= RESPONSIVE DESKTOP: <1200px /* =================================*/
    @media screen and (max-width:1200px) {
    .logo-header{ 
            width : auto;
           margin: 0 auto;}
           .social-media{display: none;}
           .cta-navbar{display: none;}
           footer {
            flex-direction: column;
        }
        
        .intro{
            margin-left: 0;
            text-align: center;}
        
        .intro p br {display:none;}
        
        .intro img{
            position: absolute;
            margin-top: 5em;
            margin-left: -5%;
            max-width : 10%; 
        }
        .logo-footer p{ 
            margin-left: 90%;}
        
        .logo-footer img {
          max-width:10em;}
        
        .legal {
           position: relative;
           text-align: right;
           font-size: 0.8em;
        }
        
        .logo-paris {
            padding-right: 2em;
            padding-left:0%; 
           
        }
        .logo-lille {padding-right: 1em;}
    
    }
    /* ===========================RESPONSIVE TABLET <736px =================================================*/

@media screen and (max-width:736px)  {
    #mentions p{ font-size:0.8em;}
    .chapeau {font-size:1em;}
    footer {font-size: 0.6em;}
    .logo-footer {margin:0 auto;}
    .logo-footer p{ 
        margin-left: 90%;}
    }

     /* ===========================RESPONSIVE DESKTOP 2 <1200-1780px =================================================*/
     @media screen and (min-width:1203px) and (max-width:1780px) {
        .intro{
            margin-left: 0;}
    
     .legal {
                
                text-align: right;
                font-size: 0.8em; 
             }
             
    .logo-paris {
                 padding-right: 2em;
                 padding-left:0%; 
                
             }
     .logo-lille {padding-right: 1em;}
    
    }