/* Animation de vagues */
.wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.wave-container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

.wave {
    position: absolute;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    opacity: 0.15;
}

/* Première vague */
.wave-1 {
    bottom: 15%;
    background: linear-gradient(to bottom, transparent 50%, #888 50%);
    background-size: 200px 200px;
    animation: wave 12s linear infinite;
}

/* Deuxième vague */
.wave-2 {
    bottom: 10%;
    background: linear-gradient(to bottom, transparent 50%, #999 50%);
    background-size: 300px 300px;
    animation: wave 8s linear infinite;
}

/* Troisième vague */
.wave-3 {
    bottom: 5%;
    background: linear-gradient(to bottom, transparent 50%, #aaa 50%);
    background-size: 400px 400px;
    animation: wave 6s linear infinite;
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

/* SVG Waves */
.wave-svg {
    position: absolute;
    bottom: 0;
    left: -5%;  /* Étendre légèrement hors écran */
    width: 110%; /* Couvrir plus que la largeur totale */
    height: 40%;
    opacity: 0.15;
}

.wave-path {
    animation: wave-float 8s ease-in-out infinite alternate;
    fill: #d400aa;
}

.wave-path-2 {
    animation: wave-float 5s ease-in-out infinite alternate;
    animation-delay: -2s;
    fill: #0088aa;
    opacity: 0.7;
}

.wave-path-3 {
    animation: wave-float 3s ease-in-out infinite alternate;
    animation-delay: -1s;
    fill: #fbb605;
    opacity: 0.5;
}

@keyframes wave-float {
    from {
        transform: translateX(-3%) translateY(0);
    }
    to {
        transform: translateX(3%) translateY(10px);
    }
}