:root {
    --title-font:'Daniel', serif;
    --text-font:'Taviraj', serif;

    --bg:#fefbf6;
    --fg:#005b27;
    --accent:#8e8e7c;
}

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

body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--text-font);
    scroll-behavior:smooth;
}

/* ======================== HEADER ======================== */
header{
    position: fixed;
    width: 100%;
    padding: 18px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.logo{height:35px;}

nav a{
    margin-left:25px;
    text-decoration:none;
    font-size:1.1rem;
    color:var(--fg);
}

h1,h2,h3{font-family:var(--title-font);font-weight:normal;}

/* ===== NAV / BURGER ===== */
.burger{
    display:none; /* visible seulement en mobile */
}

/* ======================== HERO ======================== */
section.hero {
    max-width:100vw;
    margin:0;
    padding:0;
}

.hero{
    width:100vw;
    height:100vh;
    position:relative;
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    padding-top:140px; /* évite passage sous header */
    overflow:hidden;
}

/* Fond image plein écran */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:url('assets/hero.jpg') center/cover no-repeat;
    z-index:-1;

    /* load animation */
    opacity:0;
    animation: heroImageFade 1.8s ease-out forwards 0.2s,
               zoomFade 18s ease-in-out infinite alternate 2s;
}

/* image fade + mise au point progressive */
@keyframes heroImageFade {
    0% { opacity:0; filter:blur(10px) brightness(.75);}
    100% {opacity:1; filter:blur(4px) brightness(.85);}
}

/* fond cinematic breathing */
@keyframes zoomFade {
    0%   { transform: scale(1.05); filter: blur(6px) brightness(.88);}
    100% { transform: scale(1.17); filter: blur(3px) brightness(.93);}
}

/* CONTENU HERO */
.hero .hero-logo,
.hero h1,
.hero p {
    opacity:0;
    transform:translateY(25px);
    animation: heroTextFade 1.4s ease-out forwards;
    width: 100%;
}

.hero .hero-logo {
    animation-delay:1.1s;
    width: 20%;
    margin-bottom:20px;
}

.hero h1 {
    animation-delay:1.4s;
    font-size:clamp(3rem,7vw,6rem);
}

.hero p {
    animation-delay:1.7s;
    font-size:clamp(1.1rem,2vw,1.6rem);
    opacity:.95;
    max-width:80%;
}

@keyframes heroTextFade {
    0%   {opacity:0; transform:translateY(25px);}
    100% {opacity:1; transform:translateY(0);}
}

/* ======================== PAGE CONTENT ======================== */
section{
    padding:120px 8%;
    max-width:900px;
    margin:auto;
}

.menu{
    max-width:1100px;
}

h2{
    text-align:center;
    font-size:3rem;
    margin-bottom:40px;
}

.menu-wrapper{
    display:flex;
    justify-content:space-between;
    gap:60px;
}

h3{
    font-size:2rem;
    margin-bottom:16px;
}

.mets-vins, .menu-note{
    margin-top: -10px;
    margin-bottom: 20px;
    font-style: italic;
    color: var(--accent);
    font-size: 0.95rem;
}

.menu-note{
    text-align:center;
    margin-top:40px;
    font-size:1rem;
}

/* ======================== CAROUSEL ======================== */
/* Carrousel propre : 1 image visible à la fois */
.carousel{
    position:relative;
    width:100%;
    max-width:900px;
    margin:120px auto;
    overflow:hidden;
}

.carousel-track{
    display:flex;
    transition:transform 0.5s ease;
}

/* Chaque slide occupe 100% de la largeur */
.carousel-track img{
    width:100%;
    flex:0 0 100%;
    object-fit:cover;
    max-height:600px;
    border-radius:14px;
}

/* Boutons navigation */
.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(254,251,246,0.8);
    border:none;
    font-size:2.2rem;
    color:var(--fg);
    cursor:pointer;
    padding:4px 12px;
    border-radius:999px;
}
.prev{left:10px;}
.next{right:10px;}

/* ===== RÉSERVATION / ZENCHEF ===== */
.reservation-text{
    text-align:center;
    max-width:600px;
    margin:0 auto 20px;
    font-size:1.05rem;
}

.zenchef-btn{
    display:block;
    margin:0 auto;
    padding:14px 32px;
    font-size:1.2rem;
    border-radius:999px;
}

button{
    padding:14px;
    background:var(--fg);
    color:white;
    border:none;
    margin-top:10px;
    cursor:pointer;
    border-radius:6px;
    font-size:1.2rem;
}

/* =============== FOOTER PREMIUM =============== */
.footer{
    width:100%;
    background:var(--fg);
    color:white;
    margin-top:120px;
    padding-top:80px;
}

.footer-content{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    max-width:1200px;
    margin:auto;
    padding:0 8%;
    gap:50px;
}

/* Colonnes */
.footer-col{
    flex:1;
    min-width:220px;
}

.footer-col h4{
    font-family:var(--title-font);
    font-size:1.8rem;
    margin-bottom:12px;
}

.footer-col .contact{
    color:white;
}

/* Logo */
.footer-logo{
    width: 60%;
    margin-bottom:15px;
    filter:brightness(100);
}

.footer-tag{
    font-size:1.1rem;
    opacity:.85;
}

/* Bouton réservation */
.footer-btn{
    display:inline-block;
    background:white;
    color:var(--fg);
    padding:12px 22px;
    border-radius:6px;
    font-size:1.1rem;
    font-weight:600;
    text-decoration:none;
    margin-bottom:15px;
    transition:0.3s;
}

.footer-btn:hover{
    background:#ffffffcc;
    transform:scale(1.05);
}

.reservation-note {
    text-align: center;
    margin-top: 14px;
    font-size: 0.95rem;
    color: var(--accent);
}

.reservation-note a {
    color: var(--fg);
    text-decoration: underline;
}

/* Réseaux */
.socials{
    display:flex;
    gap:18px;
    margin-top:10px;
}

.socials img{
    height:35px;
    opacity:.9;
    cursor:pointer;
    transition:.3s;
}

.socials img:hover{
    opacity:1;
    transform:scale(1.15);
}


/* Mobile */
@media(max-width:900px){
    .footer-content{
        flex-direction:column;
        text-align:center;
        gap:35px;
    }
    .footer-col{
        min-width:100%;
    }
    .footer-btn{margin:auto;}
}



/* ======================== SCROLL FADE ======================== */
.fade{
    opacity:0;
    transform:translateY(40px);
    transition:1s;
}
.fade.visible{
    opacity:1;
    transform:translateY(0);
}

/* ======================== RESPONSIVE ======================== */
@media(max-width:800px){
    header{
        padding: 12px 6%;
    }

    /* Bouton burger visible en mobile */
    .burger{
        display:block;
        background:none;
        border:none;
        cursor:pointer;
        width:32px;
        height:22px;
        position:relative;
        margin-left:12px;
    }

    .burger span{
        position:absolute;
        left:0;
        right:0;
        height:2px;
        background:var(--fg);
        border-radius:999px;
        transition:0.3s;
    }

    .burger span:nth-child(1){ top:0; }
    .burger span:nth-child(2){ top:50%; transform:translateY(-50%); }
    .burger span:nth-child(3){ bottom:0; }

    /* Animation en X quand le menu est ouvert */
    .burger.open span:nth-child(1){
        top:50%;
        transform:translateY(-50%) rotate(45deg);
    }
    .burger.open span:nth-child(2){
        opacity:0;
    }
    .burger.open span:nth-child(3){
        bottom:auto;
        top:50%;
        transform:translateY(-50%) rotate(-45deg);
    }

    /* NAV : passe en menu déroulant plein écran haut */
    nav.nav-links{
        position:fixed;
        top:70px;          /* sous le header fixe */
        left:0;
        right:0;
        background:rgba(254,251,246,0.98);
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:20px 0 30px;
        gap:16px;

        transform:translateY(-120%);
        opacity:0;
        pointer-events:none;
        transition:transform 0.3s ease, opacity 0.3s ease;
    }

    nav.nav-links a{
        margin:0;
        font-size:1.1rem;
    }

    /* État ouvert du menu */
    nav.nav-links.open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }

    .hero .hero-logo {
        animation-delay:1.1s;
        width: 50%;
        margin-bottom:20px;
    }

    /* Reste de ta mise en page mobile */
    .hero h1{font-size:4rem;}
    .menu-wrapper{flex-direction:column;text-align:center;}
    .carousel-track img{max-height:260px;}

    .footer-logo{
        width: 50%;
    }

    .socials{
        justify-content:center;
    }

    .footer-bottom{
        text-align:center;
        font-size:0.9rem;
        padding:20px 8%;
    }
}