/*===================== SECTION FIRST OF WEBSITE ===========================*/

.section-first {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    position: relative;
    overflow: hidden;
}

.section-first figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* width: 100.625vw;
    height: 100vh; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.section-first figure::before {
    content: "";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(61,31,18,0.45);
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.section-first figure img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    animation: slider 20s infinite;
}
.section-first figure.img-back img.active {
    opacity: 1;
}

.img-back img:nth-child(1) { animation-delay: 0s; }
.img-back img:nth-child(2) { animation-delay: 4s; }
.img-back img:nth-child(3) { animation-delay: 8s; }
.img-back img:nth-child(4) { animation-delay: 12s; }
.img-back img:nth-child(5) { animation-delay: 16s; }

@keyframes slider {
    0% { opacity: 0; }
    10% { opacity: 1; }
    25% { opacity: 1; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

.section-first .content-details {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    top: 3vw;
}


.section-first .content-details span#typing-text {
    font-size: 1.35vw;
    font-weight: 500;
    color: white;
    font-family: var(--font-name);
}
.section-first .content-details span.cursor {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: white;
    display: inline-block;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    50% { opacity: 0; }
}

.section-first title {
    display: block;
    font-size: 2.3vw;
    font-family: var(--font-ebgaramond);
    font-weight: 500;
    color: white;
    /* -webkit-text-stroke: 0.15625vw white; */
    line-height: 3.6458vw;
    text-align: center;
    text-transform: uppercase;
    width: 74.302vw;
}
.section-first .btn-action {
    font-size: var(--h6-size);
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-name);
    background: var(--color-secundary);
    color: #ffffff;
    display: flex;    
    justify-content: center;
    align-items: center;
    transition: all .5s ease-in-out;
}
.section-first .btn-action:hover {
    backdrop-filter: blur(25px);
    color: white;
    background: var(--color-secundary);
    transition: all .5s ease-in-out;
    cursor: pointer;
}

/*===================== SECTION TWO OF WEBSITE ===========================*/

.os-tab-head::after{
    display: none;
}

.section-avantages {
    background: rgb(239, 239, 239);
    /* align-items: center; */
    padding: 4vw 5.1562vw 7vw 5.1562vw;
}
.section-avantages .content-left {
    /* border: 1px solid red; */
    gap: .5vw;
}
.section-avantages .content-left .subtitle {
    color: black;
    font-weight: 300;
    text-transform: uppercase;
    font-family: var(--font-name);
}
.section-avantages .content-left .title {
    font-family: var(--font-ebgaramond);
    color: var(--color-secundary);
}
.section-avantages .content-left .description {
    font-size: 1vw;
    font-family: var(--font-name);
    line-height: 1.9vw;
    margin: 1vw 0;
}
.section-avantages .content-left ul.list {
    gap: .51vw 2vw;
    font-size: 1vw;
    color: var(--color-primary);
}
.section-avantages .content-left ul.list li.actif {
    color: var(--color-secundary);
}

.section-avantages .content-right {
    /* border: 1px solid blue; */
    display: flex;
    flex-direction: column;
    position: relative;
    height: 30vw;
    padding-top: 3vw;
}
.section-avantages .content-right .img-back {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    border: .1px dashed var(--color-secundary);
}
.section-avantages .content-right .img-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s ease-in-out;
}
.section-avantages .content-right .img-back img.actif {
    opacity: 1;
    transition: all .5s ease-in-out;
}

.section-avantages .content-right .list-details-img-scroll {
    gap: 1vw;
    z-index: 3;
    background: #caa569e6;
    width: 90%;
    margin: 0 auto;
    padding: 1vw;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    color: white;
}
.section-avantages .content-right .list-details-img-scroll .list-bullet {
    gap: 1vw;
}
.section-avantages .content-right .list-details-img-scroll .list-bullet .bullets {
    position: relative;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background: white;
}
.section-avantages .content-right .list-details-img-scroll .list-bullet .bullets.actif {
    background: var(--color-secundary);
}
.section-avantages .content-right .list-details-img-scroll .list-avantages {
    position: relative;
}
.section-avantages .content-right .list-details-img-scroll .list-avantages .content-one-img-back {
    opacity: 0;
    display: none;
    gap: 1vw;
}
.section-avantages .content-right .list-details-img-scroll .list-avantages .content-one-img-back.actif {
    display: flex;
    opacity: 1;
}

/* SECTION BEST === SERVICES  */

.section-best {
    background: white;
    padding: 4vw 5.1562vw 4vw 5.1562vw;
}
.section-best .subtitle {
    color: black;
    font-weight: 300;
    text-transform: uppercase;
    font-family: var(--font-name);
}
.section-best .title {
    font-family: var(--font-ebgaramond);
    color: var(--color-secundary);
}
.section-best .list-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 2vw;
}
.section-best .list-services .one {
    width: calc(25% - 20px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 10px;
    transition: all .5s ease-in-out;
}
.section-best .list-services .one:hover {
    color: var(--color-secundary);
    background: var(--color-tert);
    transition: all .5s ease-in-out;
}


/* SECTION ROOMS & SUITS  */

.section-rooms {
    background: rgb(239, 239, 239);
    padding: 4vw 5.1562vw;
    gap: 2vw;
}
.section-rooms .head-top .subtitle {
    color: black;
    font-weight: 300;
    text-transform: uppercase;
    font-family: var(--font-name);
}
.section-rooms .head-top .title {
    font-family: var(--font-ebgaramond);
    color: var(--color-secundary);
}
.section-rooms .head-top .btn-action {
    background: var(--color-primary);
    color: #ffffff;
    width: fit-content;
    height: fit-content;
    transition: all .5s ease-in-out;
}
.section-rooms .head-top .btn-action:hover {
    background: var(--color-secundary);
    transition: all .5s ease-in-out;
}

.section-rooms .content-list {
    display: flex;
    gap: 3vw;
}
.section-rooms .content-list .card {
    position: relative;
    transition: all .5s ease-in-out;
    overflow: hidden;
    cursor: pointer;
}
.section-rooms .content-list .card figure {
    width: 28vw;
    height: 30vw;
    transition: all .5s ease-in-out;
}
.section-rooms .content-list .card figure::before {
    content: "";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(61,31,18,0.45);
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.section-rooms .content-list .card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .5s ease-in-out;
}
.section-rooms .content-list .card:hover figure img {
    transition: all .5s ease-in-out;
    transform: scale(1.1);
}
.section-rooms .content-list .card .category {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-secundary);
    padding: 1vw 2vw;
    color: white;
    text-transform: uppercase;
    border-radius: 0;
    z-index: 3;
}
.section-rooms .content-list .card .details {
    position: absolute;
    bottom: 0;
    padding: 2vw;
    color: white;
    gap: 1vw;
    z-index: 3;
}

/* SECTION RESTAURANT  */

.section-restaurants {
    background: white;
    padding: 4vw 5.1562vw;
    background: url('../images/back_restaurant.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position-y: bottom;
    background-position-x: left;
}
.section-restaurants::before {
    content: "";
    position: absolute;
    display: flex;
    width: 50%;
    height: 100%;
    background: #e2d9cdeb;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.section-restaurants .head-top .btn-direction .btn-action {
    border-radius: 50%;
    width: 5vw;
    height: 5vw;
    background: #fff;
    font-size: 1.5vw;
    border: 1px dashed var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
}
.section-restaurants .head-top,
.section-restaurants .details-delices {
    z-index: 3;
    position: relative;
}

.section-restaurants .details-delices {
    gap: 3vw;
    /* position: relative; */
    overflow: hidden;
}

.section-restaurants .details-delices .content-left .btn-action {
    background: var(--color-primary);
    color: #ffffff;
    width: fit-content;
    height: fit-content;
    transition: all .5s ease-in-out;
}
.section-restaurants .details-delices .content-left .btn-action:hover {
    background: var(--color-secundary);
    transition: all .5s ease-in-out;
}

.section-restaurants .details-delices .content-right {
    width: 70%;
    overflow: hidden;
    position: relative;
}
.section-restaurants .details-delices .content-right .slider-container {
    display: flex;
    gap: 2vw;
    transition: transform 0.5s ease-in-out;
    width: max-content;
}
.section-restaurants .details-delices .content-right .one-delices {
    background: rgb(73 42 23 / 82%);
    color: white;
    height: 30vw;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    /* width: 20vw;
    width: 33.33% */
}
.section-restaurants .details-delices .content-right .one-delices figure {
    width: auto;
    height: 100%;
    position: relative;
}
.section-restaurants .details-delices .content-right .one-delices figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-restaurants .details-delices .content-right .one-delices .banne {
    position: absolute;
    z-index: 3;
}
.section-restaurants .details-delices .content-right .one-delices .banne.top {
    top: 0;
    text-align: center;
    background: #3d1f12a8;
    width: 100%;
    padding: .5vw;
}
.section-restaurants .details-delices .content-right .one-delices .banne.bottom {
    bottom: 0;
    text-align: center;
    background: #3d1f12a8;
    width: 100%;
    padding: .5vw;
}
.section-restaurants .details-delices .content-right .one-delices:hover .details-descr {
    width: 100%;
    z-index: 4;
    opacity: 1;
    overflow: visible;
    color: black;
}
.section-restaurants .details-delices .content-right .one-delices .details-descr {
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    z-index: 4;
    opacity: 0;
    padding: 0 2vw;
    overflow: hidden;
    transition: height 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
/* Survol : ouverture progressive du haut vers le bas */
.section-restaurants .details-delices .content-right .one-delices:hover .details-descr {
    height: 100%;
    opacity: 1;
    padding: 2vw;
    gap: 2vw;
}
/* Animation de fermeture progressive du bas vers le haut */
.section-restaurants .details-delices .content-right .one-delices:not(:hover) .details-descr {
    height: 0;
    opacity: 0;
    padding: 0 2vw;
}
    
/* SECTION ATTRACTION  */

.section-attractions {
    background: rgb(239, 239, 239);
    padding: 4vw 5.1562vw;
    gap: 2vw;
}
.section-attractions .content-left {
    width: 36vw;
}
.section-attractions .content-left .subtitle {
    color: black;
    font-family: var(--font-name);
}
.section-attractions .content-left .title {
    font-family: var(--font-ebgaramond);
    color: var(--color-secundary);
}
.section-attractions .content-left .description {
    font-size: 1vw;
    font-family: var(--font-name);
    /* line-height: 1.9vw; */
    margin: 1vw 0;
}
.section-attractions .content-left .btn-action {
    background: var(--color-primary);
    color: #ffffff;
    width: fit-content;
    height: fit-content;
    transition: all .5s ease-in-out;
}
.section-attractions .content-left .btn-action:hover {
    background: var(--color-secundary);
    transition: all .5s ease-in-out;
}

.section-attractions .content-right figure {
    width: 40vw;
    height: 32vw;
    position: relative;
    transition: all .5s ease-in-out;
}
.section-attractions .content-right figure::before {
    content: "";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(286deg, rgb(82 44 22 / 14%), transparent), linear-gradient(286deg, rgb(82 44 22 / 53%), transparent);
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.section-attractions .content-right .list-attractions {
    gap: 2vw;
    position: relative;
    right: 3vw;
    z-index: 3;
}
.section-attractions .content-right .list-attractions .one-attraction {
    background: white;
    cursor: pointer;
    box-shadow: 0px 3px 10px #e0d8ce;
    transition: all 0.5s ease-in-out;
}
.section-attractions .content-right .list-attractions .one-attraction.active {
    background: var(--color-tert);
    color: var(--color-primary);
    transition: all 0.5s ease-in-out;
}
.section-attractions .content-right figure img,
.section-attractions .content-right .list-attractions .one-attraction .img-relative img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}
.section-attractions .content-right .list-attractions .one-attraction .img-relative {
    width: 10vw;
    height: 7vw;
    transition: all 0.5s ease-in-out;
}


@media (max-width:768px) {


    .section-first .content-details {
        position: relative;
        z-index: 3;
        padding: 0vw 5vw;
        gap: 10vw;
    }

    .section-first title {
        font-size: 7vw;
        color: #fff8f8a8;
        -webkit-text-stroke: 0.15625vw #ffffff;
        line-height: 9.36458vw;
        letter-spacing: 0.26em;
        width: 100%;
    }
    .section-first .content-details span#typing-text {
        font-size: 5.35vw;
        font-weight: 200;
        line-height: 24px;
    }

    .section-first .btn-action {
        font-size: 5vw;
        width: fit-content;
        height: auto;
        display: flex;
    }
    
    
    /* ==================== AVANTAGES ===================== */
    
    .section-avantages .content-left ul.list {
        gap: 2.51vw 2vw;
        font-size: 4vw;
    }
    .section-avantages .content-right {
        height: 69vw;
        /* padding-top: 3vw; */
    }
    .section-avantages .content-right .list-details-img-scroll .list-bullet .bullets {
        width: 5vw;
        height: 5vw;
    }
    .section-avantages .content-right .list-details-img-scroll .list-bullet {
        gap: 3vw;
    }
    .section-avantages .content-right .list-details-img-scroll {
        gap: 2vw;
        width: 90%;
        padding: 3vw;
    }

    /* ===================== SERVICES ===================== */
    .section-best {
        gap: 2vw;
    }
    .section-best .list-services .one {
        width: 100%;
        gap: 4vw;
    }
    .section-best .list-services .one .icon i {
        font-size: 6vw;
    }
    
    /* ===================== SECTION CHAMBRE ===================== */
    .section-rooms .content-list {
        gap: 8vw;
    }
    .section-rooms .content-list .card figure {
        width: 100%;
        height: 100vw;
    }
    .section-rooms .content-list .card .category {
        padding: 3vw 6vw;
    }
    .section-rooms .content-list .card .details {
        font-size: 5vw;
    }
    
    /* ===================== RESTAURANTS ===================== */
    .section-restaurants::before {
        width: 100%;
    }
    .section-restaurants .head-top .btn-direction .btn-action {
        border-radius: 50%;
        width: 10vw;
        height: 10vw;
        font-size: 3.5vw;
    }
    .section-restaurants .details-delices .content-right {
        width: 100%;
    }
    .section-restaurants .details-delices .content-right .one-delices {
        color: white;
        height: 100vw;
        width: 62vw;
    }
    .section-restaurants .details-delices .content-right .slider-container {
        gap: 7vw;
        width: auto;
    }
    .section-restaurants .details-delices .content-right .one-delices .banne {
        font-size: 5vw;
    }

    /* ===================== ATTRACTIONS ===================== */

    .section-attractions .content-left {
        width: 100%;
    }
    .section-attractions .content-left .description {
        font-size: 3vw;
        font-family: var(--font-name);
        /* line-height: 1.9vw; */
        margin: 0vw 0;
    }
    .section-attractions .content-right figure {
        width: 100%;
        height: 100vw;
    }
    .section-attractions .content-right .list-attractions {
        gap: 5vw;
        right: 0;
        top: 6vw;
        padding-bottom: 3vw;
    }

}