/* Variables CSS personnalisées */
:root {
    --ocean-blue: #0077be;
    --deep-blue: #003f5c;
    --sand-beige: #f4e4c8;
    --sunset-orange: #ff6b35;
    --oasis-green: #2d5016;
    --warm-white: #fefcf5;
    --coral: #ff8a80;
    --gold: #ffd700;
}

/* Styles de base */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--deep-blue);
}

.font-display {
    font-family: 'Playfair Display', serif;
}

/* Classes utilitaires de couleur */
.text-ocean { color: var(--ocean-blue) !important; }
.text-sunset { color: var(--sunset-orange) !important; }
.text-oasis { color: var(--oasis-green) !important; }
.bg-sand { background-color: var(--sand-beige) !important; }
.bg-ocean { background-color: var(--ocean-blue) !important; }
.bg-warm { background-color: var(--warm-white) !important; }

/* Gradients */
.hero-gradient {
    background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--deep-blue) 100%);
}

/* Boutons personnalisés */
.btn-sunset {
    background-color: var(--sunset-orange);
    border-color: var(--sunset-orange);
    color: white;
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-sunset:hover {
    background-color: #e55a2b;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
    color: white;
}

.btn-outline-ocean {
    border: 2px solid var(--ocean-blue);
    color: var(--ocean-blue);
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 50px;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-outline-ocean:hover {
    background-color: var(--ocean-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 119, 190, 0.3);
}

/* Cartes avec effet hover */
.card-hover {
    transition: all 0.3s ease;
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Navigation */
.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
}

/* Sections */
.section-padding {
    padding: 100px 0;
}

/* Icônes de fonctionnalités */
.icon-feature {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
}

/* Effets parallaxe */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Effets d'image */
.image-overlay-hover {
    transition: all 0.3s ease;
}

.image-overlay-hover:hover {
    transform: scale(1.05);
}

.gallery-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.object-fit-cover {
    object-fit: cover;
}

/* Styles de logo */
.logo-navbar {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 119, 190, 0.1);
    transition: all 0.3s ease;
}

.logo-navbar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 119, 190, 0.2);
}

.logo-footer {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 119, 190, 0.1);
}

/* Classes utilitaires */
.rounded-4 {
    border-radius: 1.5rem !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .parallax-bg, 
    [style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
    
    /* Logo responsive */
    .logo-navbar {
        height: 35px !important;
    }
    
    .logo-footer {
        height: 30px !important;
    }
    
    .navbar-brand span {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 576px) {
    .logo-navbar {
        height: 32px !important;
    }
    
    .navbar-brand span {
        font-size: 1.2rem !important;
    }
}