.reservation-windows{
    background-color: #e3f3e9;
    z-index: 10;
}

.bloc-hebergement-details, .reservation-windows{
    display: none;
    position:fixed;
    z-index: 5;
    overflow-y: scroll;
    border: thick silver solid;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    border-radius: 2em;
    border-width: 3px;
    border-color: grey;
}


.hebergement_grid{
    display: grid;
    background-color: #e3f3e9;
    grid-template-areas: 
        "header header  header  header  header  header  header  header  nbpersons  nbpersons "
        "focus  focus   focus   focus   focus   focus   focus   focus nofocus nofocus"
        "focus  focus   focus   focus   focus   focus   focus   focus nofocus nofocus"
        "focus  focus   focus   focus   focus   focus   focus   focus nofocus nofocus"
        "descp  descp   descp   descp   descp   descp   descp   descp   descp   descp"    
        "resa   resa    resa    resa    resa    resa    resa    resa    resa    resa";     
    grid-template-rows: min-content max-content max-content max-content max-content ;
    grid-template-columns: repeat(10, fr);
}

.h1grid{
    grid-area: header;
    background-color: green;
    font-size: 20px;
    border-style: solid;
    border-color: black;
}
.nbpersons{
    grid-area: nbpersons;
    background-color: lightgreen;
    font-size: 20px;
}
.image_nofocus{
    grid-area: nofocus;
    width: 100%;
    margin: 0 5px 0 5px;
    max-width: 100px;
  
}

.image_focus{
    grid-area: focus;
   width: 100%;
   max-width: 600px;
}

.pos1{
      grid-row-start: 6 ;   
}

.desc-h1{
    font-size: 23px;
    margin-top: 15px;
}
.desc-h2{
    font-size: 19px;
    margin-top: 10px;
}

.description{
    grid-area: descp;
    font-size: 15px;
    background-color: #fff;
        font-weight: 500;
    line-height: 1.1;
}


.reservation-button {
   background-color: #76b38f;
    display: inline-block;
    border-style: inset;
    border-width: medium;
    border-radius: 2em;
    float: right;
    width: 180px;
    height: 2em;
    text-align: center;
    position: fixed;
    top: 1%;
    right: 10%;
}
.menu .bloc-reservation a{
    display: block;
    border-style: inset;
    border-width: medium;
    border-radius: 2em;
    box-sizing: border-box;
    background-color: #76b38f;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    line-height: 3em;
}


/* Small size screen */
@media screen and (max-width: 800px){
    .hebergement_grid{
    width: 100%;
    height: 100%;
    display: grid;
    background-color: #e3f3e9;
    grid-template-areas: 
        "close  close   close   close   close   close   close   close   resa    resa"
        "header header  header  header  header  header  header  header  nbpersons  nbpersons "
        "focus  focus   focus   focus   focus   focus   focus   nofocus nofocus nofocus"
        "focus  focus   focus   focus   focus   focus   focus   nofocus nofocus nofocus"
        "focus  focus   focus   focus   focus   focus   focus   nofocus nofocus nofocus"
        "descp  descp   descp   descp   descp   descp   descp   descp   descp   descp"    
        "resa   resa    resa    resa    resa    resa    resa    resa    resa    resa";     
    grid-template-rows : min-content min-content max-content max-content max-content max-content ;
    grid-template-columns: repeat(10, fr);
    }

    .bloc-hebergement-details, .reservation-windows,.typehebgtdetails {
        height: 95%;
        top: 1%;
        left: 2.5%;
    }

    .bloc-hebergement-details, .reservation-windows {
        width: 95%;
    }

    .typehebgtdetails {
        width: 100%;
    }

    .bloc-hebergement-details, .reservation-windows {
        border-radius: 2em;
        border-width: 3px;
        border-color: grey;
    }

    .button2{
        grid-area: close;

    }

    .reservation-windows{
        overflow-y: scroll;
    }
}

/* Large size screen */
@media screen and (min-width: 800px){
    .hebergement_grid{
        width: 100%;
        height: 50%;
    }

.bloc-hebergement-details{
     top:10px;
     margin-left: 10%;
    width:80%;
    display: none;
    position:fixed;
    z-index: 5;
    max-height: 900px;
    overflow-y: scroll;
    border: thick silver solid;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    border-radius: 2em;
    border-width: 10px;
    border-color: grey;
}

    .reservation-windows{
        display: none;

        background-color: #e3f3e9;
        top:50px;
        margin-left: 10%;
        width:80%;
        display: none;
        position:fixed;
        z-index: 10;
        max-height: 90%;
/*        overflow-y: scroll;
*/        border-radius: 2em;
        border-width: 40px;
        border-color: grey;

    }

    .typehebgtdetails {
        height: 80%;
        max-height: 800px;
    }


    .bloc-hebergement-details .button2{
        float: right;
        position: fixed;
        top: 1.5em;
        margin-right: 0px;
    }

}