@media screen and (max-width:2560px) and (min-width:1921px)
{
    .section1, .section2
    {
        padding: 0 20rem;
    }
    .section3
    {
        padding: 0 19rem;
    }
    .artheb
    {
        flex-basis: 200px;
    }  
    .navigation
    {
        padding: 0 19rem;
    }
    footer 
    {
        padding: 3rem 25rem 0 25rem;
    } 
} 

/*version 4K*/
@media screen and (max-width:1920px) and (min-width:1441px)
{
    /*pour garder aligner les trois premiers articles*/
    .artheb
    {
        flex-basis: 290px;
        flex-grow: 3;
        flex-shrink: 2;
    }  
}  

@media screen and (max-width:1440px) and (min-width:1025px) /*Pour garder les proportions de la version desktop*/
{ 
    .artheb
    {
        flex-basis: 193px;
        flex-grow: 3;
        flex-shrink: 1;
    } 
    .pop-bloc
    {
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 2;
        flex-basis: 150px;
    } 
    .floatpop
    {
        margin-top: 0.5rem;
    }
    .floatpop h3
    {
        padding-bottom: 0.1rem;
    }
    .div-act
    {
        flex-basis: 190px;
    } 
    .activite4 h3 
    {
        margin-top: 0.9rem; 
        padding-bottom: 0rem;
    }
}

@media screen and (max-width:1024px) and (min-width:769px) /*Reduire le margin et faire passer les populaires au-dessus des hebergements*/
{
    .navigation
    {
        margin:  0rem 1rem 0rem 1.5rem;
    }
    .section1
    {
        margin:  0rem 0rem 0.5rem 0.5rem;
    }
    .section2
    {
       flex-direction: column;
       margin:  0.5rem 0rem 0.5rem 0rem; 
       padding: 1rem; 
    }
    #hebergement
    {
        order: 2;
        margin-right: 0;    
    }
    .artheb 
    {
        flex-basis: 217px;
        flex-shrink: 1;
    }

    /*populaires*/
    .populaire
    {
        order: 1;
        margin-bottom: 2rem;
    }
    .pop-bloc
    {
        flex-direction: row;
    } 
    .floatpop /*figcaption populaire*/
    {
        margin: 0.3rem  0.2rem 0.5rem -0.2rem;
    } 
    .floatpop h3
    {
        padding-bottom: 0.3rem;
    }
    .etoiles
    {
        margin-top: auto; 
    }

    /*activites*/
    .section3
    {
        margin: 3rem 1.5rem 2rem 1.5rem;
    }
     .bloc-act2
    {
        order: 3; 
        margin: 1rem 1rem 1rem 0; 
        flex-direction: column;
    } 
    .bloc-act1
    {
        margin: 0 0 1rem 1rem; 
    }
    .activite4
    {
        order: 4;  
        margin: 1rem 0 1rem 1rem;
        padding: 0;  
    } 
     .div-act, .bloc-act1, .bloc-act2
    {
        flex-basis: 310px;
        flex-grow: 2;
        flex-shrink: 2;
    }  
    footer
    {
        padding: 2rem 0 0 2rem;
    }
}

/* Version tablet*/
@media screen and (max-width: 778px) and  (min-width:426px) 
{
    /*header*/
    .navigation
    {
        margin: 0rem 1rem 0rem 2rem;
    }
    
    /*section2*/
    .section1 
    {
        margin: 0 0.5rem 0.5rem 0.5rem;
    } 
    .section2
    {
        flex-direction: column;
        margin: 0.5rem; 
    }
    #hebergement
    {
        order: 2;
        width: 100%; 
    }
    .populaire
    {
        order: 1;
        width: 100%;
        margin-bottom: 2rem;
    }
    .pop-bloc
    {
        flex-direction: column;
    } 

    /*Activite*/
     .section3 
    {
        margin: 1.8rem;
    }
    .bloc-act2
    {
        order: 3; 
        margin: 1rem 1rem 1rem 0; 
        flex-direction: column; 
    } 
    .bloc-act1
    {
        margin: 0 0 1rem 1rem; 
    }
    .div-act, .bloc-act1, .bloc-act2
    {
        flex-basis: 230px;
        flex-grow: 2;
        flex-shrink: 3;
    }
    .activite4
    {
        order: 4;  
        margin: 1rem 0 1rem 1rem;
        padding: 0;  
    }  

    /*footer*/
    footer 
    {
        justify-content: space-between;
        padding: 2rem 0 0 2rem;
    } 
    .footer ul
    {
        justify-content: center;
    }
}

/*Version tablet , smartphone*/
 @media screen and (max-width:571px) and (min-width:426px) 
{  
    /*header*/
    /* Navigation version mobile*/
    .navigation 
    {
        display: flex; 
        flex-wrap: wrap;
        margin: 0; 
    }
    #reservia
    {
        margin-left: 1.5rem;
    }
    .menu
    {   
        display: flex;
        padding-bottom: 0;
        order: 2;
        align-items: center;
        margin: 0;
        width: 100%;
    } 
    .inscrire 
    {
        order: 1;
        margin-left: auto;
        padding-top: 2rem;
    }
    .nav1
    {
        border-bottom: 3px solid #0065fc;
        border-top: none;
        padding: 0 3rem 1rem 1rem;
        text-align: center;
        width: 50%;
    }
    .nav2
    {
        border-bottom: 3px solid #f2f2f2;
        border-top: none;
        padding: 0 1rem 1rem 1rem  ;
        text-align: center;
        width: 50%;
    } 

    /*section1*/
    h1 
    {
        padding-bottom: 1rem;
        padding-top: 1.5rem;
    }
    .soustitre
    {
        padding-bottom: 2rem;
    }

    /*Activite*/
    .section3 
    {
        margin: 1.5rem;
    }
    .bloc-act2, .bloc-act1
    {
        margin: 0 0 2rem 0;
    } 
    .div-act, .bloc-act1, .bloc-act2
    {
        flex-basis: 270px;
        flex-grow: 2;
        flex-shrink: 3;
    }
    .activite1
    {
        margin: 1rem 0 2rem 0;
    } 
    .activite2
    {
        margin-bottom: 2rem;
    } 
    .activite3 , .activite5 
    {
        height: 210px;
    }  
    .activite4
    {
        margin: 0 0 0.5rem 0;
    }
    .activite5 
    {
        margin-bottom: 2rem;
    } 
    .activite6 
    {
        margin-bottom: 0;
    }
    .figact img
    {
        height: 160px;
    } 
    footer 
    {
        padding: 2rem 0 0 2rem;
        flex-direction: column;
    } 
}   

@media screen and (max-width:425px) and (min-width:320px) 
{
    .section1 , .section2 
    {
        margin: 0rem;
    } 

    /*header*/
    .navigation 
    {
        display: flex; 
        flex-wrap: wrap;
        margin: 0; 
    }
    #reservia
    {
        margin-left: 1.5rem;
    }
    .menu
    {
        display: flex;
        padding-bottom: 0;
        order: 2;
        align-items: center;
        margin: 0;
        width: 100%;
    } 
    .inscrire 
    {
        order: 1;  
        margin-left: auto;
        padding-top: 2rem;
    }
    .nav1
    {
        border-bottom: 3px solid #0065fc;
        border-top: none;
        padding: 0 1rem 1rem 1rem;
        text-align: center;
        width: 50%;
    }
    .nav2
    {
        border-bottom: 3px solid #f2f2f2;
        border-top: none;
        padding: 0 1rem 1rem 1rem  ;
        text-align: center;
        width: 50%;
    } 

    /*section1*/
    .section1 
    {
        margin: 1.5rem ;
        padding: 0;
    }
    h1 
    {
        padding-bottom: 1rem;
        font-size: 1.2rem;
    }
    .soustitre
    {
        padding-bottom: 2rem;
    }
    .recherche 
    {
        margin-bottom: 1rem;
    }
    .rechercher
    {
        max-width: 280px;  
    }
    .champ
    {
        height: 60%;
        width: 70%;
    }
    .boutonsearch /*Supression du bouton search de la version desktop*/
    {
        display: none;
    }
    .fa-search /*Ajout du bouton search de la version mobile*/
    {
        background-color: #0065fc;
        color: white;
        border-radius:  1rem ;
        padding: 0.9rem;
        position: absolute; 
    }
    .filtres
    {
        flex-wrap: wrap;
        font-weight: bold;
        gap: 0;
    }
    .filtre-choix
    {
        gap: 0.8rem;
    }
    .filtre-name
    { 
        padding: 0.75rem;
    }
    
    /*section2*/
    .section2 
    {
        margin: 0;
        padding: 0;
    }
    .artheb
    {
        margin-bottom: 0rem;
    }
    #hebergement
    {
        order: 2;
        width: 100%; 
        padding: 0.5rem;
        background-color: white;
        margin: 0;
    }
    .populaire
    {
        order: 1;
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 0.5rem 0.5rem 2rem 0.5rem;
    }
    .pop-bloc
    {
        flex-direction: column;
    } 
    .artpop
    {
        margin-bottom: 0;
    } 

    /*section3*/
    .section3 
    {
        margin: 1.5rem;
    }
    .bloc-act1, .bloc-act2, .activite1, .activite4
    {
        margin: 0 0 1.5rem 0;
    } 
    .activite2
    {
        margin-bottom: 1.5rem;
    } 
    .activite3 , .activite5,  .activite6 , .activite2
    {
        height: 165px;
    }  
    .activite5 
    {
        margin-bottom: 1.5rem;
    } 
    .activite6 
    {
        margin-bottom: -1.5rem;
    }
    .figact img
    {
        height: 115px;
    }  

    /*footer*/
    footer 
    {
        flex-direction: column;
        padding: 2rem 0 0 2rem;
    }  
}

@media screen and (max-width:320px) 
{
    .section1 
    {
        margin: 1.5rem 1rem 1rem 1rem;
    }
    .filtre-choix
    {
        gap: 0.7rem;
        margin-right: -1rem;
        margin-left: -0.3rem; 
    }
    .filtre-name
    { 
        padding: 0.75rem 0.75rem 0.75rem 0;
    }
}