*,
*::before,
*::after{
    box-sizing: border-box;
}

/**
    Les couleurs de la charte sont le bleu #0065FC,
    et sa version plus claire #DEEBFF ainsi que le gris pour le fond #F2F2F2

 */

/** Les principaux style */


body{
    background-color: #FFFFFF;
    font-family: 'Raleway', Calibri, sans-serif;
    font-size: 16px;  
    font-weight: 400;  
    margin: 0;
    padding: 0;
}
.header-main{
   margin-left: 30px;
   margin-right: 30px;
}

.fa-star {
    color:#0065FC;
}
.fa-star-diff{
    color:rgba(128, 128, 128, 0.5);
}
.euro{
    font-weight: bold;
}

#container{             
    margin: auto;
    max-width:1440px
}
.box-shadow{
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
}

/** header */

.logo_nav{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.logo{
    height: 100px;
    width: 110px;
    display: flex;
    align-items: center;  
}
img{
    padding:0;
    margin: 0;
}
    
a{
    text-decoration: none ; 
    color: #000;          
}
.logo_nav nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.logo_nav nav ul li{
    float: left;
    padding: 40px; 
    border-top: 2px solid #FFFFFF;       
}

.logo_nav nav ul li:last-child{
    padding-right: 0;
}

li.actived{
    border-top:2px solid #0065FC !important;
}
.actived a{
    color:#0065FC;
}
.lien-inscrire a{
    color:#0065FC;
    font-weight: bold;
}

h2{
    margin-bottom: 0;
    margin-top: 0;
    font-size: 22px;
}

h3{
    font-weight: bold;
    font-size: 19px;
    margin-top: 0;
}

.titre-page{
    line-height:1.3;
}

.titre-page p{
   margin-top: 6px;
   margin-bottom: 30px;
}
/** Debut style page Hebergements */
.botton-rechercher{
    background:#0065FC;
    color:#DEEBFF;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    border:0;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.botton-rechercher i{
    display: none;
}
.bar-recherches{
    display: flex;
    max-width: 400px;
    border-radius: 12px;
    border: 1px solid #ddd;
}
.icone-recherche{
    background: #ddd;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    height: 45px;
    min-width:45px;    
    display: flex;    /*centrer l'icone*/
    justify-content:center; /*centrer l'icone*/
    align-items: center; /*centrer l'icone*/
}
.input-recherches{
    flex:1;
    border:0;
    padding-left: 10px;
    font-weight: bold;
    min-width:150px;              /*permet de retrécir la taille d'un input jusqu'a zéro */ 
}
::placeholder{
    font-size: 1.2em;
}

/** plus de 500 infos */
.infos{
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    align-items: center; /*centrer l'icone*/
}
.icone-infos{
    width: 32px;
    height: 32px;
    border: 1px solid #cdcdcd;
    display: flex;    /*centrer l'icone*/
    justify-content:center; /*centrer l'icone*/
    align-items: center; /*centrer l'icone*/
    border-radius: 50%;
    margin-right: 10px;
}
.fa-info{
    color:#0065FC;
}
/** 
   ############################################################################
        Responsive design:All descktop 
   ##########################################################################
 */

    @media all and (min-width: 1024px){
        #container{
            max-width: 1440px;
            min-width: 1024px;
            width: 80%; 
        }
    }
 
 /** 
   ############################################################################
        Responsive design:tablette min-width: 485px and max-width: 1024px
   ##########################################################################
 */

@media all and (min-width: 485px) and (max-width: 1024px){

    #container{     
        width: 95%;
    }
    /** Logo & nav */
    .lien-inscrire{
        margin-right: 5px;
    }
    .container-hebergement{
        flex-direction: column;    
    }
    .logo_nav nav ul li{
        padding-left: 20px;
        padding-right: 20px;
    }
    /** Barre filtre */
    .bar-filtres{
        flex-wrap: wrap;
        min-width: 280px !important;
    }
    .filtre-tag{
        margin-top: 15px;
        margin-right: 20px !important;
    }
    .filtres-titre{
        width: 100%;
    }
    #heberg-marseille{
        width: 100%;
    }
    #heberg-populaires{
        width: 100% !important;
        flex-direction: row !important;
        margin-left: 0 !important;
        margin-top: 30px;
    }
   
    /** Footer */
    
    .style-footer{
        flex-wrap: wrap;
    }
}

/** 
   ############################################################################
        Responsive design:smart phone           max-width: 485px
   ###########################################################################
 */
                                

@media all and (max-width: 485px){

    #container{
        width: 94%;
    }
    /*Logo & nav*/
    .logo_nav{
        flex-direction: column;
    }
    .logo_nav nav ul li{
        border-top:0 !important;       
    }
    .actived{        
        border-bottom:2px solid #0065FC !important;
        border-top: 0;
        width: 50%;
        text-align: center;
    }
    .non-actived{    
        border-bottom:2px solid #f2f2f2;    
        width: 50%;
        text-align: center;
    }
    .lien-inscrire{
        height: 100px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        position: absolute;
        top: 0;
        right:3%;
    }
    .logo_nav nav ul li{
        height: 40px;
        padding-top: 10px;
        padding-bottom: 0px;
        margin-bottom: 20px;
    }
    .bar-filtres{
        flex-wrap: wrap;
    }
    
    /*Rechercher*/
    .bar-recherches{
        width: 100% !important;
    }
    .input-recherches{
        min-width: 50px !important;
    }
    .botton-rechercher{
        border-radius:10px;
        height: 45px;
    }
    .botton-rechercher span{
        display: none;
    }
    .botton-rechercher i{
        display: block;
    }

   

    .filtre-tag{
        margin-top: 15px;
    }
    .filtres-titre{
        width: 100%;
    }
    /*Les plus populaire*/
    .container-hebergement{
        flex-direction: column-reverse;
    }
    #heberg-populaires{
        width: 100%;
    }

    /*Hebergement marseille*/
    .container-hebergement-row{
        flex-direction: column !important;
    }
    .container-hebergement-child{
        width: 100% !important;
        margin-left: 0px !important;
        margin-bottom: 30px;
    }
    .container-hebergement-child:last-child{
        margin-bottom: 0 !important;
    }
    .container-hebergement-child:first-child{
        margin-left: 0 !important;
    }
    
    /*Activité marseille*/
    .container-activite{
        flex-direction: column !important;
    }
    .container-bloc{
        width: 100% !important;
        margin-left: 0px !important;
        margin-bottom: 30px;
    }
    .container-bloc:last-child{
        margin-bottom:0
    }
    .activite-mobile .style-image-text:first-child{
        margin-bottom: 30px; 
    }
    .activite-mobile{
        min-height: 490px !important;
    }
    .activite-image2,
    .activite-image1{
        height: 200px !important;

    }

    /*Aside :les plus populaire*/
    #heberg-populaires{
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 30px;
    }

    /*Footer*/
   

    .style-footer{
        flex-direction: column;
       
    }

}