/* ============================================
   Styles personnalisés - Clémence
   ============================================ */

/* Animation douce au chargement */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation modale */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Image d'en-tête */
.hero-bg {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
        url('images/hero.png');
    background-size: cover;
    background-position: center;
}

/* Iframe responsive pour mobile */
.iframe-container {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.iframe-container iframe {
    width: 100%;
    border: none;
    min-height: 500px;
}

@media (max-width: 640px) {
    .iframe-container iframe {
        min-height: 600px;
    }
}

/* Canvas particules */
#particlesCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}