@import "general.css";
@import "header.css";
@import "hebergement.css";
@import "footer.css";
@import "geolocalisation.css";
@import "filtres.css";
@import "activites.css";
@import "populaire.css";

/* Le code ci-dessous correspond à la version responsive uniquement */

/****** Media queries ***********/
/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {
    .hebergements-and-populaires {
        flex-direction: column;
    }

    .hebergements {
        width: 100%;
    }

    .populaires {
        width: 100%;
        margin-top: 50px;
    }

    .populaires-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .populaires article{
        width: 30%;
    }

    .populaires-cards .card-title {
        font-size: 14px;
    }

    .populaires-cards .card-subtitle {
        font-size: 13px;
    }

    .populaires-cards img{
        width: 50%;
    }

    

    
    

    .Filtres {
        flex-direction: column;
        gap:0;
    }

    .activites_cards img{

        width: 100%;
        height: 80%;
    }

    .activites_cards .card{

      height: 320px;
    }

  
    
    

}

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    .main-container {
        padding: 0;        
    }
    
    body{

        margin: 0;
    }

    header{
        flex-direction: column;
        justify-content:center;
        align-items: center;            
    }

    header > * {
        width:100%;        
    }

    header span{
        text-align: center;
        padding-top: 20px;
    }

    .nav-link{          
        justify-content: center;
        align-items: center;
        padding: 0;
        gap:0;       
    }

    .nav-link li{  
        flex:1;
        text-align: center;        
        border:0;
        border-bottom: 2px solid var(--main-bg-color);        
    }

    header ul li:hover{    
        border:0;          
        border-bottom: 2px solid  var(--main-color);         
     }


     .sous-header , .geolocalisation, .Filtres ,.phrase_sous_localisation{
      padding: 0 2% ;
     }

     .geolocalisation{
        justify-content: center;
        align-items: center;
     }

     .search-button{
        display: none;
     }

     .search-icon{
        display: inline-block;
        text-align: center;
        padding: 15px;
        background-color: var(--main-color);
        width:30px;
        margin-left: -6px;;
    }


    .geolocalisation form {
        width:100%;
    }
     .search-domain{       
    
    width : calc(100% - 100px)
    }
    

    .button-filtres{
        flex-wrap: wrap;
    }
    .button-filtres > * {
        width: 46%;
        white-space: nowrap;
        font-size: 11px;

    }

    .hebergements_cards img{

        width:100%;
        

    }
    .hebergements_cards{

        flex-direction: column;
    }

    .hebergements_cards .card{

        width: 100%;
        

    }

    

    .populaires-cards img{

        
        width: 40%;
        
    }

    .populaires-cards{

        flex-direction: column;
        
       
        
    }

    .populaires-cards article{

        width:100%;

    }

    .activites_cards img{

        
        width: 100%;
        
    }
    
    .activites_cards{

        flex-direction: column;
        
        
    }

    .activites_cards .card{

        width:95%;
        height: 200px;
    }

    .activites_flex{

        padding-left:20px;
    }


    .footer_{

        flex-direction: column;
    }

    .hebergements-and-populaires{
        flex-direction: column-reverse;
    }

    .populaires{
        margin-top: -30px;
    }

   .hebergements-and-populaires section {
        
       border-radius: 0px;
       
        
    }

    .hebergements_media{

        background-color:white;
    }

    .geolocalisation, .Filtres, .phrase_sous_localisation, .sous-header, .activites_flex , footer{

        padding: 0 30px ;
    }
    
    .phrase_sous_localisation{

        font-size: 10px;
    }

    .i_logo{

        font-size: 12px;
        padding: 5px 5px;
        padding-left: 9px;
        padding-right: 9px;
    }


}