@import "commun.css";

tml,
body {
    margin: 0;
    line-height: 1.5;
    color: #403737;
}

/* GLOBAL */
h2 {
    color: #DAB072;
    font-family: "lustria";
    line-height: 1;
}


button {
    font-size: 15px;
    font-family: Arial;
    width: 140px;
    height: 50px;
    border-width: 1px;
    color: #ffffff;
    border-color: rgba(0, 0, 0, 0);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: inset 0px 1px 0px 0px rgba(202, 202, 202, 0);
    text-shadow: inset 0px 1px 0px rgba(253, 249, 249, 1);
    background: linear-gradient(rgba(218, 176, 114, 1), rgba(144, 113, 69, 1));
    font-family: 'montserrat', serif;
}

button:hover {
    background: linear-gradient(rgba(144, 113, 69, 1), rgba(218, 176, 114, 1));
}





/* HOME GLOABL */
.content {
    margin: 0 12vw;
    /* border: 1px green solid; */
}

.homeImgShadow {
    box-shadow: 4px 4px 20px 5px rgba(0, 0, 0, 0.52);
    width: clamp(10rem, 30vw, 25rem);
}


.home h2 {
    color: #DAB072;
    margin: 0;
    line-height: 0;
}


.home h3 {
    margin-bottom: 2vw;
    line-height: 1;
    color: #646464;
}



/* SECTION HERO */
#homeHero {
    width: 100%;
    min-height: 101vh;
    background-image: url(../images/hero-bg1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#homeHero h1 {
    color: #e0e4e4;
    font-size: clamp(1rem, 2vw, 3rem);
}

.imgHero {
    width: 70vw;
}

.home {
    min-height: 200px;
    padding-top: 10vw;

}



/* HOME PRESENTATION */
.home-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homePresentation-picto {
    display: flex;
    justify-content: space-around;
    width: 70%;
    margin: 50px auto;

}

.homePresentation-description {
    background-color: #EBE6E4;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    padding: 1rem 80px;
    z-index: -1;
    position: relative;
    text-align: center;
}

.homePresentation-description h2 {
    line-height: 1.5;
}


/* SECTION SPACIOUS BEDROOM */
.home-room {
    background-image: url('../images/home-bedroom.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height: 500px;
}

.home-bath {
    display: flex;
    justify-content: flex-end;
    flex-direction: column-reverse;


}

.homeBath1 {
    width: clamp(10rem, 35vw, 48rem);
    margin-top: clamp(-10rem, -15vh, -8rem);
    height: fit-content;
    position: relative;
    z-index: 5;
}

.homeBath3 {
    width: clamp(5rem, 20vw, 26rem);
    height: fit-content;
    margin-bottom: -1vw;
}

.home-bath-content {
    margin-top: -3vw;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.home-bath-description {
    background-color: #EBE6E4;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    padding: 1rem 80px;
    z-index: -1;
    position: relative;
    text-align: center;
}

.room-pictures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.home-room-pictures {
    background-color: rgba(235, 230, 228, 0.41);
    padding: 2vw 0;
}

.home-room-picture {
    width: 30vw;
    margin: 1vw;
}


/* SECTION RELAXING ENVIRONEMENT */
.home-environement {
    background-image: url('../images/beach.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.environement-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vw 0;
}

.home-environement-description {
    background-color: #EBE6E4;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    padding: 1rem 80px;
    text-align: center;
}

.environement-content img {
    width: clamp(6rem, 67vw, 14rem);
    margin-bottom: -0.5vw;
    position: relative;
}


/* SECTION ALSO OFFERS */
.home-other-services {
    display: flex;
    font-size: 1.3em;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    line-height: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.home-services {
    margin: 2vw;
    width: clamp(10rem, 21vw, 39rem);
}


.home-other-services span {
    color: #686868;
    font-size: 0.5em;
}

.home-other-services img {
    width: -webkit-fill-available;
}






/* MEDIA SCREEN > 778px */

@media screen AND (min-width: 778px) {

    /* HOME */

    .home-presentation {
        flex-direction: row;
    }

    .homePresentation-description {
        margin-left: -50px;
    }

    .home-room {
        background-image: url('../images/home-bedroom.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        height: 500px;
    }

    .home-bath {
        display: flex;
        justify-content: flex-end;
        flex-direction: column-reverse;

    }

    .homeBath1 {
        width: clamp(19rem, 24vw, 25rem);
        margin-top: -200px;
        height: fit-content;
    }

    .homeBath3 {
        width: clamp(5rem, 20vw, 19rem);
        height: fit-content;
        margin-top: 2rem;
        margin-left: -1rem;

    }

    .home-bath-content {
        display: flex;
        margin-top: -0.5vw;
        flex-direction: row;
        align-items: flex-start;
    }


    .imgHero {
        width: 30vw;
    }

    .homeRestaurant {
        flex-direction: row;
    }

    .homeRestaurant img {
        width: 30%;
    }

    #homePresentation p {
        padding: 4rem;
        margin: auto;
    }

    .homeWellness div article {
        max-width: 273px;
        min-height: 198px;
    }

    .room-pictures {
        justify-content: space-between;

    }

    .home-room-picture {
        width: 16vw;
        margin: 1vw;
    }


    .home-environement {
        background-image: url('../images/beach.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .environement-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 5vw 0;
    }

    .environement-content img {
        width: clamp(6rem, 19vw, 32rem);
        margin-right: -0.5vw;
    }



    
}

@media screen AND (min-width: 940px) {
    #homePresentation p {
        width: 75ch;
    }
}

@media screen AND (min-width: 1300px) {
    .home-bath {
        flex-direction: row;
    }

    .homeBath3 {
        margin-left: -2vw;
        margin-right: 0;
        width: clamp(3rem, 9vw, 23rem);
        height: fit-content;
    }

    .homeBath1 {
        width: clamp(15rem, 17vw, 25rem);
        margin-left: -70px;
        margin-top: -8vw;
    }

    .home-bath-content {
        align-items: flex-start;
        margin-top: 5vw;
    }
}