@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

* {
    scroll-behavior: smooth;
}

.text-loutopia {
    font-family: 'Urbanist', sans-serif;
}
.title-loutopia {
    font-family: 'Sour Gummy', sans-serif;
    font-weight: 700;
}

a.transition-colors img {
    height: 5rem;
    transition-duration: .42s;
}
.navbar-compact a.transition-colors img {
    height: 3.5rem;
}
@media (max-width:800px) {
    .relative.z-10.container.mx-auto.pt-3.pb-12.py-6.flex.items-center.justify-between {
        padding: 12px 19px 0 25px;
    }
    a.transition-colors img {
        height: 3.5rem;
        transition-duration: .42s;
    }
    .navbar-compact a.transition-colors img {
        height: 2.5rem;
    }
}
button.bg-white {
    background: #F8E5D6;
    color: #683027;
}
/* Navbar background avec courbure */
.bg-black\/80, .bg-gray-900 {
    background: #683027 !important;
}
.bg-blue-600 {
    background: #AF9319 !important;
}
.bg-gray-100 {
    background: #f9e7d7 !important;
}
.text-gray-200 {
    color: #F8E5D6 !important;
}
.text-gray-400, .text-blue-700 {
    color: #AF9319 !important;
}
.text-blue-600 {
    color: #683027 !important;
}
.hover\:text-blue-800, a.text-blue-600:hover {
    color: #ec812e !important;
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6{
    color: #683027 !important;
}
#home .text-lg {
    text-shadow: #000 0 0px 4px, #0007 0 0px 14px, #0004 0 0px 44px;
}
.navbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #683027;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.underline-rounded {
    position: relative;
    color: white;
    background-color: #AF9319;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
}

.navbar-bg::after {
    content: '';
    position: absolute;
    bottom: -42px;
    left: 0;
    right: 0;
    height: 42px;
    background: #683027;
    backdrop-filter: blur(10px);
    border-radius: 0 0 50% 50%;
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: #0000005c 0 17px 17px;
}

/* État réduit de la navbar */
.navbar-compact .navbar-bg {
    height: 70px;
    background: #683027;
}

.navbar-compact .navbar-bg::after {
    bottom: -10px;
    height: 10px;
    border-radius: 0 0 30% 30%;
    box-shadow: #340c065c 0 5px 7px;
}

/* Animation du contenu de la navbar */
.navbar-compact .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Transition fluide pour le contenu de la navbar */
#navbar .container {
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#navbar .relative.z-10 {
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Effet de vague subtile */
@keyframes wave {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

.navbar-bg {
    animation: wave 4s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-bg {
        height: 80px;
    }
    
    .navbar-compact .navbar-bg {
        height: 60px;
    }
    
    .navbar-bg::after {
        bottom: -15px;
        height: 15px;
    }
    
    .navbar-compact .navbar-bg::after {
        bottom: -8px;
        height: 8px;
    }
}

/* Amélioration de la section hero */
.hero-section {
    padding-top: 140px;
    background: url(https://loutopia.bzh/assets/alexia/08.jpg) no-repeat center center;
    background-size: cover;
}

/* Effet de parallaxe subtil */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.text-white {
  color: #ffffff !important;
}
.text-gray-50, .text-gray-100 {
  color: #f9e7d7 !important;
}
.text-blue-100 {
  color: #683027 !important;
}