/*====================================================

        common.css
        LA VILLA VALENCIA

======================================================*/


/*=========================================
=          01. VARIABLES CSS              =
=========================================*/

:root{

    --primary:#593450;
    --secondary:#FFF5D0;
    --white:#FFFFFF;
    --text:#3A3A3A;

    --radius:18px;

    --transition:.35s ease;

    --shadow:
        0 15px 40px rgba(0,0,0,.08);

    --max-width:1280px;

}


/*=========================================
=             02. RESET                   =
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    color:var(--text);

    background:var(--secondary);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    width:100%;

    display:block;

    object-fit:cover;

}

ul{

    list-style:none;

}

a{

    text-decoration:none;

    color:inherit;

}

section{

    padding:110px 0;

}

.container{

    max-width:var(--max-width);

    margin:auto;

    padding:0 30px;

}


/*=========================================
=            03. TYPOGRAPHIE              =
=========================================*/

h1,h2,h3,h4{

    font-family:'Playfair Display',serif;

    color:var(--primary);

    font-weight:700;

}

h1{

    font-size:4rem;

    line-height:1.1;

}

h2{

    font-size:2.8rem;

    margin-bottom:20px;

}

h3{

    font-size:1.5rem;

}

p{

    font-size:1rem;

    margin-bottom:18px;

}

.section-subtitle{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}



.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/*====================================================
           04. IMAGES
====================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*=========================================
=            05. BOUTONS                  =
=========================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:50px;

    border:2px solid white;

    color:white;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:white;

    color:var(--primary);

}


.btn-primary:active,
.btn-secondary:active{

    transform:scale(.97);

}

/*====================================================
                BOUTONS HERO
====================================================*/

/*====================================================
            GROUPE DE BOUTONS
====================================================*/

.hero-actions{

    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:35px;

}

.hero-actions .btn-primary,
.hero-actions .btn-secondary{

    min-width:220px;
    height:56px;

    padding:0 28px;

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

    gap:10px;

    border-radius:50px;

    font-weight:600;

}

.hero .subtitle{
    color:var(--secondary);
}

section .subtitle,
section .section-subtitle{
    color:var(--primary);
}

/*=========================================
=             06.  HEADER                 =
=========================================*/

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.4s;

    padding:20px 0;

}

#header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo img{

    width:150px;

    transition:.35s;

}


/* Header après scroll */

#header.scrolled{

    background:white;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    padding:12px 0;

}

#header.scrolled .logo img{

    width:70px;

}

/*====================================================
            HEADER MOBILE
====================================================*/

@media (max-width:768px){

    #header{

        top:0;

        padding:12px 0;

    }

    #header.scrolled{

        padding:10px 0;

    }

    .header-content{

        min-height:60px;

        display:flex;

        justify-content:space-between;

        align-items:center;

    }

    .logo img{

        width:78px;

        height:auto;

        display:block;

    }

}

/*=========================================
              07. TOP BAR
=========================================*/

.top-bar{

    background:var(--primary);

    color:white;

    font-size:.9rem;

    padding:10px 0;

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-bar a{

    color:white;

    transition:.3s;

}

.top-bar a:hover{

    color:var(--secondary);

}

.top-bar i{

    margin-right:8px;

    color:var(--secondary);

}

/*====================================================
            TOP BAR RESPONSIVE
====================================================*/

@media (max-width:768px){

    .top-bar{

        display:none;

    }

}

/*=========================================
=           08. NAVIGATION                =
=========================================*/

.navbar ul{

    display:flex;

    gap:35px;

}

.navbar a{

    position:relative;

    color:white;

    font-weight:500;

    transition:.3s;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.navbar a:hover::after,

.navbar .active::after{

    width:100%;

}

/* Texte noir après scroll */

#header.scrolled .navbar a{

    color:var(--primary);

}

#header.scrolled .navbar a::after{

    background:var(--primary);

}

/*====================================================
              09. MENU MOBILE
====================================================*/

.mobile-menu{

    display:none;

    font-size:2rem;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    cursor:pointer;

    z-index:10002;

    transition:.3s;

}

#header.scrolled .mobile-menu{

    color:var(--primary);

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9997;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

@media(max-width:992px){

    .mobile-menu{

        display:block;

    }

    .btn-reservation{

        display:none;

    }

    .navbar{

        position:fixed;

        top:0;

        right:-340px;

        width:280px;

        max-width:82%;

        height:100vh;

        background:#fff;

        padding:120px 35px 40px;

        box-shadow:-20px 0 50px rgba(0,0,0,.18);

        transition:.4s ease;

        z-index:9999;

        overflow-y:auto;

    }

    .navbar.active{

        right:0;

    }

    .navbar ul{

        display:flex;

        flex-direction:column;

        gap:0;

    }

    .navbar li{

        width:100%;

        border-bottom:1px solid rgba(0,0,0,.08);

    }

    .navbar a{

        display:block;

        padding:18px 0;

        color:var(--primary);

        font-size:1.05rem;

        font-weight:600;

    }

    .navbar a::after{

        display:none;

    }

}

.mobile-menu{

    transition:.3s ease;

}

.mobile-menu i{

    transition:transform .3s ease, color .3s ease;

}

.mobile-menu:hover i{

    transform:scale(1.1);

}

/*====================================================
            BOUTON FERMETURE MENU MOBILE
====================================================*/

.close-menu{

    display:none;

}

@media(max-width:992px){

    .close-menu{

        position:absolute;

        top:22px;

        right:20px;

        width:46px;

        height:46px;

        border:none;

        background:transparent;

        color:var(--primary);

        font-size:2rem;

        cursor:pointer;

        display:flex;

        align-items:center;

        justify-content:center;

        transition:.3s;

        z-index:10001;

    }

    .close-menu:hover{

        transform:rotate(90deg);

    }

}

/*=========================================
=       10. BOUTON RÉSERVER               =
=========================================*/

.btn-reservation{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--primary);

    color:white;

    padding:13px 14px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-reservation:hover{

    transform:translateY(-3px);

}

/*=========================================
=       10. BOUTON PRIVATISER             =
=========================================*/

.btn-header{



    color:rgb(89, 52, 80);



    transition:.35s;

}

.btn-header:hover{

    transform:translateY(-3px);

}

/*=========================================
=             11. HERO                    =
=========================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100svh;

    height:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.hero-slider{

    position:absolute;

    inset:0;

    z-index:-2;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:-1;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 1.5s ease;

}

.slide.active{

    opacity:1;

}

.hero-content{

    max-width:850px;

    text-align:center;

    color:white;

    padding:20px;

    animation:heroFade 1.2s ease;

}

.hero-content h1{

    color:white;

    font-size:4rem;

    margin:20px 0;

}

.hero-content p{

    color:white;

    font-size:1.3rem;

    margin-bottom:40px;

}

.subtitle{

    display:inline-block;

    color:var(--secondary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:1.8rem;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

        transform:translate(-50%,-12px);

    }

    60%{

        transform:translate(-50%,-6px);

    }

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:768px){

    .hero{

        padding-top:90px;

    }

    .hero-actions{

        flex-direction:column;
        align-items:center;
        gap:14px;

    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary{

        width:100%;
        max-width:320px;
        min-width:unset;

    }

}

/*====================================================
              12. FOOTER
====================================================*/

footer{

    background:var(--primary);

    color:var(--white);

}

.footer-top{

    padding:80px 0 50px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.4fr;

    gap:60px;

}

.footer-logo{

    width:180px;

    margin-bottom:25px;

}

.footer-about p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

.footer h3,
.footer-column h3{

    color:var(--secondary);

    margin-bottom:25px;

    font-size:1.4rem;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-column a{

    color:white;

    transition:.3s;

}

.footer-column a:hover{

    color:var(--secondary);

    padding-left:8px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact i{

    width:22px;

    color:var(--secondary);

}

.footer-contact a{

    color:white;

}

.footer-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.12);

    transition:.35s;

}

.footer-social a:hover{

    background:var(--secondary);

    color:var(--primary);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    padding:25px 0;

    text-align:center;

    font-size:.9rem;

    color:rgba(255,255,255,.7);

}

.footer-bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom a{

    color:var(--secondary);

    font-weight:600;

}

.footer-bottom a:hover{

    text-decoration:underline;

}

/*====================================================
                13. RETOUR EN HAUT
====================================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:80px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    box-shadow:var(--shadow);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-6px);

}

/*=========================================
=          14. ANIMATIONS                 =
=========================================*/

.speciality-card,
.signature-speciality-card,
.rooms-gallery img,
.welcome-image img,
.heritage-image img,
.btn-primary,
.btn-secondary{

    transition:all .35s ease;

}

/*====================================================
           15. ANIMATIONS D'APPARITION
====================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:all .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:all .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

.reveal-zoom{

    opacity:0;

    transform:scale(.9);

    transition:all .8s ease;

}

.reveal-zoom.active{

    opacity:1;

    transform:scale(1);

}

/*====================================================
             16. TRANSITIONS GLOBALES
====================================================*/

a,
button,
.speciality-card,
.signature-speciality-card,
.rooms-gallery img,
.btn-primary,
.btn-secondary,
.footer-social a{

    transition:all .35s ease;

}

/*====================================================
             17. EFFET IMAGES
====================================================*/

.speciality-card img,
.signature-speciality-card img,
.rooms-gallery img,
.welcome-image img,
.heritage-image img{

    transition:transform .6s ease;

}

/*====================================================
                  18. SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--secondary);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#47283f;

}


/*====================================================
                19. SELECTION TEXTE
====================================================*/

::selection{

    background:var(--primary);

    color:white;

}

/*====================================================
               20. ACCESSIBILITÉ
====================================================*/

a:focus,
button:focus{

    outline:3px solid var(--secondary);

    outline-offset:3px;

}


/*====================================================
                21. PERFORMANCE
====================================================*/

.hero,
.welcome-image,
.heritage-image,
.speciality-card,
.signature-speciality-card{

    will-change:transform;

}


/*====================================================
                22. DESKTOP (<1200px)
====================================================*/

@media (max-width:1200px){

    .container{
        padding:0 25px;
    }

    h1{
        font-size:3.5rem;
    }

    h2{
        font-size:2.5rem;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:45px;
    }

}


/*====================================================
                23. TABLETTE (<992px)
====================================================*/

@media (max-width:992px){

    section{
        padding:90px 0;
    }

    .container{
        padding:0 22px;
    }

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.2rem;
    }

    p{
        font-size:.98rem;
    }

    .hero{

        min-height:100svh;
        height:auto;
        padding:140px 0 80px;

    }

    .hero-content{

        max-width:700px;

    }

    .hero-content h1{

        font-size:3.4rem;

    }

    .hero-content p{

        font-size:1.1rem;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

}


/*====================================================
            24. TABLETTE PORTRAIT (<768px)
====================================================*/

@media (max-width:768px){

    html{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    .container{

        padding:0 18px;

    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.35rem;

    }

    .hero{

        min-height:calc(100svh - 60px);

        padding:90px 0 40px;

        justify-content:center;

    }

    .hero-content{

        max-width:100%;

        padding:0 10px;

    }

    .hero-content h1{

        font-size:2.4rem;

        line-height:1.15;

        margin:12px 0;

    }

    .hero-content p{

        font-size:.95rem;

        line-height:1.6;

        margin-bottom:22px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

        gap:12px;

        align-items:center;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:300px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:auto auto 20px;

    }

    .footer-contact{

        align-items:center;

    }

    .footer-social{

        justify-content:center;

    }

}


/*====================================================
                25. SMARTPHONE (<576px)
====================================================*/

@media (max-width:576px){

    html{

        font-size:14px;

    }

    section{

        padding:60px 0;

    }

    .container{

        padding:0 16px;

    }

    h1{

        font-size:2.2rem;

        line-height:1.2;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.25rem;

    }

    .hero{

        min-height:calc(100svh - 55px);

        padding:80px 0 35px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-content p{

        font-size:.95rem;

    }

    .scroll-down{

        display:none;

    }

    .btn-primary,
    .btn-secondary{

        padding:14px 20px;

    }

    .back-to-top{

        width:48px;

        height:48px;

        right:15px;

        bottom:15px;

    }

}


/*====================================================
            26. PETITS SMARTPHONES (<400px)
====================================================*/

@media (max-width:400px){

    html{

        font-size:13px;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    .hero-content h1{

        font-size:2.1rem;

    }

    .container{

        padding:0 14px;

    }

    .logo img{

        width:105px;

    }

}

/*====================================================
             25. LOADER (optionnel)
====================================================*/

.loader{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.5s;

}

.loader.hidden{

    opacity:0;

    visibility:hidden;

}

/*====================================================
            FLOATING ACTION BUTTONS
====================================================*/

.floating-actions{

    position: fixed;

    right: 24px;

    bottom: 95px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    z-index: 1000;

}

.floating-btn{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:.3s ease;

}

.reservation-btn{

    background:var(--primary);

}

.private-btn{

    background:var(--secondary);

    color:var(--primary);

}

.floating-btn:hover{

    transform:translateX(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.floating-btn i{

    font-size:1.2rem;

}

@media(max-width:768px){

    .floating-actions{

        right:18px;

        bottom:110px;

        gap:12px;

    }

    .floating-btn{

        width:55px;

        height:55px;

        padding:0;

        justify-content:center;

        border-radius:50%;

    }

    .floating-btn span{

        display:none;

    }

}


/*====================================================
                IMAGE PLEIN ÉCRAN
====================================================*/


.image-modal{

    position:fixed;
    inset:0;

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

    padding:20px;

    background:rgba(0,0,0,.95);

    overflow:auto;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.image-modal.show{

    opacity:1;
    visibility:visible;

}

.modal-image{

    width:auto;
    height:auto;

    max-width:98vw;
    max-height:98vh;

    object-fit:contain;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.close-modal{

    position:absolute;

    top:25px;
    right:25px;

    width:50px;
    height:50px;

    border-radius:50%;

    background:white;

    color:var(--primary);

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

    cursor:pointer;

    font-size:1.6rem;

    transition:.3s;

}

.close-modal:hover{

    transform:rotate(90deg) scale(1.1);

}

@media(max-width:768px){

    .close-modal{

        top:15px;
        right:15px;

        width:45px;
        height:45px;

    }

}

/* ===== Menu hamburger ===== */

/* Desktop */
@media (min-width: 992px) {
    .mobile-menu {
        display: none !important;
    }
}

/* Tablette et mobile */
@media (max-width: 991px) {
    .mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*=========================================
        LANGUAGE SWITCHER
=========================================*/

.language-switcher{

    display:flex;
    align-items:center;
    gap:.45rem;

    margin-left:1.5rem;

}

.lang-btn{

    width:38px;
    height:38px;

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

    background:transparent;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.25s ease;

}

.lang-btn .fi{

    font-size:1.35rem;

    border-radius:50%;

    box-shadow:0 3px 8px rgba(0,0,0,.15);

}

.lang-btn:hover{

    transform:translateY(-2px) scale(1.08);

}

.lang-btn.active{

    background:rgba(106,27,154,.12);

}

.lang-btn.active .fi{

    box-shadow:0 0 0 2px var(--primary-color);

}

/* Cache complètement Google */

#google_translate_element,
.goog-logo-link,
.goog-te-gadget span,
.goog-te-banner-frame.skiptranslate{

    display:none !important;

}

body{

    top:0 !important;

}

@media (min-width:1200px){

    .language-switcher{

        margin-left:2rem;

    }

}

/** Tablette **/
@media(max-width:1199px){

    .language-switcher{

        margin-left:1rem;

        gap:.35rem;

    }

    .lang-btn{

        width:34px;
        height:34px;

    }

    .lang-btn .fi{

        font-size:1.2rem;

    }

}

/** Mobile **/
@media(max-width:991px){

    .language-switcher{

        width:100%;

        justify-content:center;

        margin:1.5rem 0;

    }

    .lang-btn{

        width:42px;
        height:42px;

    }

    .lang-btn .fi{

        font-size:1.4rem;

    }

}

/** Mobile **/

@media (max-width:480px){

    .language-switcher{

        gap:.4rem;

    }

    .lang-btn{

        width:38px;
        height:38px;

        font-size:1.2rem;

    }

}

/* =========================================
   GOOGLE TRANSLATE
========================================= */

/* Cache le widget */
#google_translate_element{
    display:none;
}

/* Cache le bandeau Google */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{
    display:none !important;
}

/* Empêche Google de décaler la page */
body{
    top:0 !important;
}

/* Cache la barre supérieure */
.skiptranslate{
    display:none !important;
}

/* Cache le texte Google */
.goog-logo-link,
.goog-te-gadget span,
.goog-te-gadget{
    font-size:0 !important;
}

.goog-te-gadget img{
    display:none !important;
}

/*=========================================
        MOBILE - BOUTONS FLOTTANTS
=========================================*/

@media (max-width:768px){

    .back-to-top{
        bottom:80px;
    }

}