/* Styles personnalisés pour LoveConnect */

:root {
    --pink-light: #FFDCE1;
    --pink-primary: #FF4B7B;
    --white: #FFFFFF;
    --gray-dark: #333333;
}

body {
    scroll-behavior: smooth;
}

/* Animations d'apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-section, #comment-ca-marche, #evenements, #histoires {
    animation: fadeIn 1s ease-out;
}

/* Styles pour les boutons */
button {
    box-shadow: 0 4px 6px rgba(255, 75, 123, 0.2);
}

button:hover {
    box-shadow: 0 6px 8px rgba(255, 75, 123, 0.3);
}

/* Styles pour les cartes d'événements */
#evenements .bg-white {
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Styles pour les témoignages */
#histoires .bg-gray-50 {
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Menu mobile */
@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        display: none;
    }
    
    .mobile-menu.active {
        display: block;
        animation: fadeIn 0.3s ease-out;
    }
    
    .mobile-menu a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mobile-menu a:last-child {
        border-bottom: none;
    }
}

/* Styles pour les images placeholder */
.hero-section img, #histoires img {
    background-color: var(--pink-light);
}

/* Effet de survol sur les liens */
a:hover {
    transition: all 0.3s ease;
}

/* Styles pour le header lors du défilement */
header.scrolled {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Styles pour les sections */
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}