:root{
    --primary: #9F4F2E; /* #9F4F2E */
    --secondary: #B49562; /* #B49562 */
    --third: #EAE6D9; /* #EAE6D9 */
    --moderate: #FFFBF6; /* #EAE6D9 */
}

body{ font-family: "Poppins", sans-serif; }
.container{ max-width: 1170px; }
.img-full img{
    width: 100%;
    height: auto;
}

header{ padding: 15px 0; }
.logo-holder{
    display: flex;
    align-items: center;
}
#header .menu{
    position: absolute;
    text-decoration: none;

    right: 15px;
    font-size: 1.9em;
    color: var(--primary);
    top: 50%;
    margin-top: -20px;
    display: none;
}
.logo{ width: 150px; }
.mainmenu{
    padding: 0;
    margin: 0;

    width: 100%;
    list-style: none;

    display: flex;
    justify-content: flex-end;
}
.mainmenu li a{
    padding: 15px 25px;
    font-size: 0.9em;

    display: flex;
    text-decoration: none;
    color: #000;
    font-weight: 500;

    position: relative;
    border: 2px solid transparent;
}
.nav-holder .mainmenu li.active a::before{
    position: absolute;
    top: 5px;
    left: 50%;

    content: '';
    height: 2px;
    width: 15%;
    margin-left: -7.5%;
    background-color: var(--secondary);
}
.mainmenu li.active a{ color: var(--primary); }
.mainmenu li:hover a{ color: var(--primary); }
.mainmenu li.contact a{
    background-color: var(--primary);
    border: 2px solid var(--primary);
    color: #fff;

    display: flex;
    column-gap: 5px;
}
.mainmenu li.contact:hover a{
    background-color: #fff;
    color: var(--primary);
}

/**
* Slide
*/
#slider{
    width: 100%;
    height: auto;
    overflow: hidden;
}
#slider img{
    width: 100%;
    height: 500px;

    object-fit: cover;
    object-position: center;
}

.section{ padding: 30px 15px; }
.section-one{ text-align: center; }
.section-one .title{
    text-transform: uppercase;
    font-weight: 300;
}
.section-one.only .title{ margin: 0; }
.section-one h3,
.text-mix{
    font-family: "TTRT", serif;
    text-transform: uppercase;
}
.section-one h3 .cursive,
.text-mix .cursive{
    font-family: "TTRT Medium Italic", serif;
    text-transform: capitalize;
    color: var(--primary);
}

/**
* Espaces
* de vie
*/
.lifespace{
    background-color: var(--moderate);
    height: 600px;
}
.lifespace .inner{
    height: 100%;
    display: flex;
    padding: 0;

    column-gap: 45px;
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;
}
.lifespace .item.text{
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-left: 30px;
    margin-right: 30px;
}
.lifespace .item.text .stitle,
.stitle{
    position: relative;
    padding-left: 30px;
    font-weight: 300;
    font-family: "Poppins";
    text-transform: uppercase;
    font-size: 0.8em;
}
.lifespace .item.text .stitle:before,
.stitle:before{
    content: "";

    left: 0;
    bottom: 5px;
    width: 20px;
    position: absolute;

    border-bottom: 1px solid var(--primary);
}
.lifespace .item.text .text-mix{ margin-bottom: 15px; }
.lifespace .item.text .text-mix + p{
    font-family: "Poppins";
    font-weight: 300;
    font-size: 0.8em;
}
.lifespace a.item{ height: 100%; }
.lifespace a.item img{ height: 100%; }

/**
* Découvrir
* Korhogo
*/
.discover{ background-color: var(--moderate); }
.discover .textes{
    font-size: 0.8em;
    font-family: "Poppins", sans-serif;
    font-weight: 300;

    display: flex;
    align-items: center;
}
.discover .textes p{ margin: 0 }
.discover .actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.discover .actions a{ height: 35px; }
.discover .category-posts{
    margin-bottom: 60px;
}

/**
* Posts
*/
/* .posts .post{} */
.posts .post .image{
    background-color: #A0A0A0;
    height: 200px;
    overflow: hidden;
}
.posts .post .image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
.posts .post a{ color: #000; text-decoration: none; }
.posts .post .details{
    padding: 15px;
    background-color: #fff;
}
.posts .post .details p{
    font-size: 0.8em;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
}
.posts .post .foo{
    display: flex;
    justify-content: space-between;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 0.8em;
}
.posts .post .foo a{ color: var(--primary); }
.section.contacts.index .title{ margin-bottom: 45px; }

/**
* Page
* Article
*/
.post.article .text-mix{
    text-align: center;
    margin-bottom: 5px;
}
.post.article .post-title + p{
    text-transform: none;
    margin-bottom: 30px;
    font-style: italic;
    font-size: 0.9em;
}
.post.article .hero{
    height: 450px;
    overflow: hidden;

    margin-bottom: 30px;
}
.post.article .hero img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.post.article .post-content h1,
.post.article .post-content h2,
.post.article .post-content h3{ text-transform: uppercase; }
.post.article .post-content h1,
.post.article .post-content h2
{ font-weight: 700; }
.post.article .post-content h3{ font-size: 1.3em; }
.post.article .post-content p{
    font-size: 0.9em;
    font-weight: 300;
}
.post.article .post-content img{
    width: 100%;
    margin: 30px auto;
}
.post.author{ background-color: var(--moderate); }
.post.author .inner{
    padding: 0 60px;
    display: flex;
    column-gap: 30px;
}
.post.author .inner .infos{
    width: 200px;
    padding: 0 30px;
    border-right: 2px solid var(--secondary);
}
.post.author .inner .text{
    width: calc(100% - 230px);
    display: flex;
    align-items: center;
}
.post.author .inner .infos img{
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
}
.post.author .inner .infos h3{
    font-size: 1.0em;
    text-transform: uppercase;
    text-align: center;

    font-weight: 600;
    margin: 5px 0 0;
}
.post.author .inner .infos p{
    text-align: center;
    font-size: 0.8em;
    margin: 0px 0 0;
}
.post.author .inner .text p{
    margin: 0 0;
    font-size: 0.9em;
    font-weight: 300;
}




.section.page-title{ background-color: var(--moderate); }
.section.page-title h3{
    text-align: center;
    font-size: 1.0em;
    text-transform: uppercase;
    font-weight: 300;
}
.section.page-title h3.ariane{ font-size: 0.8em; }
.section.page-title h3 a{ color: #000; }
.section.page-title h3 a:hover{ color: var(--primary); }

.poster .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.poster .text .text-mix{ margin-bottom: 15px; }
.poster .text p{
    font-weight: 300;
    font-size: 0.9em;
}
.poster .text a{
    width: 150px;
}
.poster .image .img-full{
    height: 450px;
    overflow: hidden;
}
.poster .image .img-full img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.section.intermediate{
    background-color: var(--moderate);
    text-align: center;
}

.team .image{ margin-bottom: 15px; }
.team .name{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 1.1em;
    margin: 0;
}
.team .role{
    font-weight: 300;
    text-transform: uppercase;
    font-size: 0.75em;

    position: relative;
    margin-bottom: 30px;
}
.team .role::after{
    content: "";

    width: 40px;
    height: 2px;
    background-color: var(--secondary);

    position: absolute;
    bottom: -15px;
    left: 50%;

    margin-left: -20px;
}
.team .desc{
    font-weight: 300;
    font-size: 0.8em;
}
.booking{
    padding: 45px 0;
    position: relative;
}
.booking .bg{
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.4;

    background-image: url(../img/logotype.svg?v=0.1), url(../img/logotype.svg?v=0.1);
    background-repeat: no-repeat;
    background-position: 15% -145%, 85% 255%;
    background-size: 18% auto;

    z-index: 0;
}
.booking .container{
    position: relative;
    z-index: 2;
}
.booking .text-mix{ line-height: 1.5em; }

.section.carousel{
    background-color: var(--moderate);
    padding-left: 0;
    padding-right: 0;
}
.section.carousel .links{
    list-style: none;
    display: flex;
    column-gap: 45px;

    padding: 0;
    margin: 0 0 30px 0;
}
.section.carousel .links li a{
    display: block;
    position: relative;
    padding: 7px 15px;

    font-weight: 300;
    text-decoration: none;
    color: #000;
}
.section.carousel .links li:hover a,
.section.carousel .links li.active a
{ color: var(--secondary); }
.section.carousel .links li a::before{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;

    width: 20px;
    height: 2px;
    background-color: var(--secondary);

    content: "";
    display: none;
}
.section.carousel .links li.active a::before{ display: block; }
.section.carousel .images{
    height: 400px;
    display: flex;
    padding: 0;

    column-gap: 30px;
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;
}
.section.carousel .images a,
.section.carousel .images .item{ height: 100%; }
.section.carousel .images .item:first-child{ margin-left: 30px; }

.section.prices{ padding: 45px 0; }
.prices .price > div{
    background-color: var(--moderate);
    padding: 45px 45px;

    display: flex;
    flex-direction: column;
    align-items: center;

    row-gap: 30px
}
.prices .price .name,
.prices .price .package,
.prices .price .desc{
    font-weight: 300;
    font-family: "Poppins", sans-serif;
    margin: 0;
}
.prices .price .name{ font-size: 1.0em; }
.prices .price .package{ font-weight: 300; }
.prices .price .package span{ text-transform: uppercase; font-size: 0.7em; }
.prices .price .desc{
    font-size: 0.8em;
    min-height: 215px;
}
.prices .price .btn{ width: 200px; }

.poster.room .label{ margin-bottom: 0; }
.poster.room .price{ font-size: 1.3em; }
.poster.room .price span{
    text-transform: uppercase;
    font-size: 0.6em;
}

.section-two.gallery{ background-color: var(--moderate); }
.section-two .title{ text-transform: uppercase; }
.section-two.gallery .title{ margin-bottom: 30px; }
.gallery .row{ row-gap: 30px; }
.gallery .item img{
    width: 100%;
    height: 250px;

    object-fit: cover;
    object-position: center;
}
.gallery .actions{ text-align: center; margin-top: 30px; }
.gallery .actions a{
    text-decoration: none;
    color: #000;
    font-weight: 300;
    font-size: 0.8em;
    text-transform: uppercase;
}
.gallery .actions a:hover{ text-decoration: underline; }

#map{
    height: 400px;
    background-color: #666;
    width: 100%;
}

/**
* Page
* Contacts
*/
.contacts .second-title{
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 40px;

    text-align: center;
}
.contacts .sidebar .second-title{ text-align: left; }
.contacts .sidebar h3{
    text-transform: uppercase;
    font-size: 300;
    font-size: 1.2em;
    margin: 15px 0 0;
}
.contacts .sidebar p:not(.second-title){
    margin: 0;
    font-size: 0.9em;
    font-weight: 300;
}
.contacts.map{ background-color: var(--moderate); }
.contacts.map h3{
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
}
.contacts.map h3 + p{
    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-weight: 300;
    font-size: 0.9em;
}
.contacts.map #map{ margin: 30px 0 }
.contacts.map #map iframe{
    width: 100% !important;
    height: 100% !important;
}

footer .upfooter{
    padding: 45px 0;
    background-color: var(--moderate);
}
footer .logo{ width: 120px; }
footer .bloc h3{
    font-weight: 500;
    font-size: 1.0em;
}
footer .bloc ul{
    margin: 0;
    padding: 0;

    list-style: none;
}
footer .bloc ul li{ margin-bottom: 5px; }
footer .bloc ul li a{
    font-weight: 300;
    color: #000;
    text-decoration: none;
    font-size: 0.8em;
    display: block;
}
footer .bloc ul li a:hover{ color: var(--primary); }
footer .subfooter{ padding: 30px 0;}
footer .subfooter .container{ position: relative; }
footer .subfooter .container > p{
    margin: 0;
    font-size: 0.8em;

    font-family: 'Nunito Sans', sans-serif;
    font-weight: 300;
}
footer .madeby{
    font-family: "Nunito Sans", sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    text-align: right;

    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -23px;
    opacity: 0.5;

    transition: all 0.3s;
}
footer .madeby:hover{ opacity: 1; }
footer .madeby a{
    color: #000;
    text-decoration: none;
}
footer .madeby p{ margin: 0 0; }
footer .madeby img{ width: 110px; }

.goup{
    width: 48px;
    height: 48px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--primary);
    color: #fff;

    position: fixed;
    bottom: 90px;
    right: 24px;

    text-decoration: none;
    font-size: 2.3em;

    display: none;
}
.goup.active{ display: flex; }
.goup:hover{ opacity: 0.8; }
.goup span{
    display: inline-block;
    margin-left: -2px;
}

/**
* Menu
* Responsive
*/
#mobilepanel{
    position: fixed;
    width: 100%;
    height: 100%;

    background-color: var(--primary);
    z-index: 2000;

    top: 0px;

    transform: translateX(-100%);
    transition: all cubic-bezier(0.16, 1, 0.3, 1) .6s;
}
.onmobile #mobilepanel{
    transform: translateX(0%);
}
#mobilepanel .flexible > h3{
    font-family: 'Poppins', sans-serif;
    padding: 0 30px;
    margin-top: 30px;
    color: #fff;
    font-size: 1.9em;
}
#mobilepanel .flexible{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}
#mobilepanel .mainmenu{
    list-style: none;
    margin: 15px auto;
    padding: 0;
    text-align: left;

    display: block;
    width: 70%;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
#mobilepanel .mainmenu > li{
    display: block;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
    position: relative;
    margin-left: 0;
}
#mobilepanel .mainmenu li.withdrop:after{
    content: "\e91d";
    color: #fff;
    position: absolute;
    right: 20px;
    top: 8px;
    font-family: 'icomoon';
    font-size: 1.5em;
}
#mobilepanel .mainmenu li.withdrop.expanded:after{ content: "\e91c"; }
#mobilepanel .close{
    position: absolute;
    top: 22px;
    right: 15px;

    color: #fff;
    font-size: 1.8em;
    text-decoration: none;
}
/* #mobilepanel .mainmenu > li:first-child{ border-top: 1px solid rgba(255, 255, 255, 0.3); } */
#mobilepanel .mainmenu > li ul{ display: none; }
#mobilepanel .mainmenu > li a{
    display: block;
    padding: 10px 30px;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: normal;

    font-family: 'Poppins', sans-serif;
}
#mobilepanel .mainmenu li.contact:hover a{ background-color: var(--secondary); }
#mobilepanel .mainmenu > li:hover:not(.calltoaction) > a{ font-weight: normal; }
#mobilepanel .mainmenu > li.calltoaction:hover > a{ background-color: var(--primary); }
#mobilepanel .mainmenu .submenu{
    position: relative;
    margin-top: 0;
}
#mobilepanel .mainmenu li.withdrop.expanded .submenu{ padding-bottom: 7px; }
#mobilepanel .mainmenu .submenu ul{
    padding: 0;
    margin: 0;
}
#mobilepanel .mainmenu .submenu li{ display: block; }
#mobilepanel .mainmenu .submenu li a{
    font-family: "Manrope";
    font-size: 0.8em;
}
#mobilepanel .logo{
    position: absolute;
    bottom: 30px;
    left: 30px;
}
#mobilepanel .logo img{ width: 100px; }
#mobilepanel ul.socials{
    list-style: none;
    padding: 0 0 0 30px;
    margin: 15px 0 0 0;
}
#mobilepanel ul.socials li{
    display: inline-block;
    font-family: 'Roboto Light';
    margin-right: 25px;
}
#mobilepanel ul.socials li a{
    color: #fff;
    text-decoration: none;
}
#mobilepanel ul.socials li a{ font-size: 1.5em; }
#mobilepanel ul.socials li:hover a{ color: rgba(255, 255, 255, 0.7); }

#mobilepanel .mainmenu .withdrop.expanded ul{
    display: block;
    list-style: none;
}
#mobilepanel .madeby{
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 0.8em;
    text-align: right;

    position: absolute;
    right: 30px;
    bottom: 35px;
    opacity: 1;

    transition: all 0.3s;
}
#mobilepanel .madeby:hover{ opacity: 1; }
#mobilepanel .madeby a{
    color: #fff;
    text-decoration: none;
}
#mobilepanel .madeby p{ margin: 0 0; }

/**
* Preloader
*/
.preloading{
    width: 100%;
    height: 100%;

    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;

    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
body.ispreloading .preloading{ transform: translateY(0%); }
.preloading .jauge{
    width: 0%;
    height: 4px;

    position: absolute;
    top: 0;
    left: 0;

    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: var(--primary);
}


/**
* Bootstrap
* Modification
*/
.page-link{ color: var(--primary); background-color: transparent; border: none; }
.page-link.active, .active > .page-link{
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-link.disabled, .disabled > .page-link{ background-color: transparent; }
.btn{
    border-radius: 0;
    font-size: 0.8em;
}
.btn-primary{
    background-color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-primary:hover{
    background-color: #fff;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.form-control{
    border: none;
    border-bottom: 1px solid #CBCBCB;
    border-radius: 0px;

    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 0.9em;
}
.form-control:focus{
    outline: none;
    box-shadow: none;
    border-color: var(--primary);
}