@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background: linear-gradient(120deg, #fdf6e3 0%, #f5f5fa 100%);
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    letter-spacing: 1px;
}

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/terrasse.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.room-card {
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 8px 32px 0 rgba(34, 34, 34, 0.15);
    border-radius: 20px;
    background: #fff;
}

.room-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 16px 40px 0 rgba(34, 34, 34, 0.18);
}

.gallery-item {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 4px 24px 0 rgba(34, 34, 34, 0.10);
}

.gallery-item img, .room-card img {
    transition: transform 0.5s cubic-bezier(.25,.8,.25,1);
    border-radius: 20px;
}

.gallery-item:hover img, .room-card:hover img {
    transform: scale(1.08);
}

.tag {
    background: #fef3c7;
    color: #b45309;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: 0 2px 8px 0 rgba(251, 191, 36, 0.15);
}

.tag i {
    color: #b45309;
}

#back-to-top {
    animation: bounce 2s infinite;
    box-shadow: 0 8px 24px 0 rgba(251, 191, 36, 0.18);
}

@media (max-width: 768px) {
    .room-card, .gallery-item {
        border-radius: 12px;
    }
    .gallery-item img, .room-card img {
        border-radius: 12px;
    }
}

.fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-in-left {
    animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 1s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}