/* ===========================================
   SVG WAVES - Transitions organiques
   =========================================== */

.wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin: 0;
    padding: 0;
    /* Colle la wave à la section suivante */
    margin-bottom: -1px;
}

.wave-flip {
    transform: scaleY(-1);
    margin-bottom: 0;
    margin-top: -1px;
}

.wave-inverted {
    margin-bottom: 0;
    margin-top: -1px;
}

.wave-yellow-inverted {
    fill: #fff8dc;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 80px;
    position: relative;
}

/* ===========================================
   Couleurs des waves - Matchent les sections
   Les waves ont la couleur de la section qui SUIT
   =========================================== */

/* Section "Ce que nous proposons" - fond jaune */
.wave-what-we-do {
    fill: #fff8dc;
}

/* Section "Une méthode en 3 temps" - fond blanc */
.wave-method {
    fill: #ffffff;
}

/* Wave jaune inversée (bas de section what-we-do) */
.wave-yellow-bottom {
    fill: #fff8dc;
}

/* Section Témoignages - bleu foncé pour commencer le gradient */
.wave-testimonials {
    fill: rgba(43, 50, 94, 0.28);
}

/* Section Financement - fond vert clair */
.wave-financing {
    fill: #cbffea;
}

/* Section Contact/CTA Final - fond blanc */
.wave-contact {
    fill: #ffffff;
}

/* Footer - même couleur que le footer */
.wave-footer {
    fill: #2e3b63;
}

/* Couleurs génériques si besoin */
.wave-white {
    fill: #ffffff;
}

/* Banderole hero */
.wave-banner {
    fill: rgba(43, 50, 94, 0.7);
}

.wave-cream {
    fill: #fffbf5;
}

.wave-light-blue {
    fill: #e8f4fc;
}

/* Responsive - waves plus petites sur mobile */
@media (max-width: 768px) {
    .wave-divider svg {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .wave-divider svg {
        height: 35px;
    }
}