/* Réinitialiser les marges et les espacements par défaut */
body, h1, h2, p {
    margin: 0;
    padding: 0;
}

/* Style général du corps */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #fff;
    background: #e0f7fa; /* Fond très clair pour contraste */
    margin: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

/* Animation des dégradés pour l'en-tête */
@keyframes header-bg {
    0% {
        background: linear-gradient(45deg, #ff5722, #ffc107);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #4caf50, #00bcd4);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #e91e63, #9c27b0);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #ffeb3b, #8bc34a);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #673ab7, #ff9800);
        background-size: 400% 400%;
    }
}

/* Style de l'en-tête */
header {
    background: linear-gradient(45deg, #ff5722, #ffc107); /* Dégradé initial */
    color: #fff;
    padding: 1rem;
    text-align: center;
    border-bottom: 3px solid #ffeb3b;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    z-index: 1; /* Assure que l'en-tête reste au-dessus du contenu */
    animation: header-bg 5s infinite linear; /* Animation rapide de dégradé */
}

header h1 {
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
    color: #fff; /* Texte en blanc pour contraste */
}

/* Animation des dégradés pour chaque section */
@keyframes section-bg1 {
    0% {
        background: linear-gradient(45deg, #ff5722, #ffc107);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #4caf50, #00bcd4);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #e91e63, #9c27b0);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #ffeb3b, #8bc34a);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #673ab7, #ff9800);
        background-size: 400% 400%;
    }
}

@keyframes section-bg2 {
    0% {
        background: linear-gradient(45deg, #ff9800, #00bcd4);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #e91e63, #ff5722);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #8bc34a, #ffeb3b);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #673ab7, #4caf50);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #ff5722, #00bcd4);
        background-size: 400% 400%;
    }
}

@keyframes section-bg3 {
    0% {
        background: linear-gradient(45deg, #00bcd4, #ff5722);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #ffeb3b, #4caf50);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #9c27b0, #ff9800);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #00bcd4, #e91e63);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #ff5722, #00bcd4);
        background-size: 400% 400%;
    }
}

@keyframes section-bg4 {
    0% {
        background: linear-gradient(45deg, #e91e63, #ffeb3b);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #4caf50, #ff5722);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #00bcd4, #9c27b0);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #ff9800, #8bc34a);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #ff5722, #00bcd4);
        background-size: 400% 400%;
    }
}

@keyframes section-bg5 {
    0% {
        background: linear-gradient(45deg, #00bcd4, #ff9800);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #ffeb3b, #ff5722);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #4caf50, #00bcd4);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #ff5722, #ff9800);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #e91e63, #00bcd4);
        background-size: 400% 400%;
    }
}

@keyframes section-bg6 {
    0% {
        background: linear-gradient(45deg, #ff9800, #00bcd4);
        background-size: 400% 400%;
    }
    25% {
        background: linear-gradient(45deg, #ff5722, #e91e63);
        background-size: 400% 400%;
    }
    50% {
        background: linear-gradient(45deg, #4caf50, #ffeb3b);
        background-size: 400% 400%;
    }
    75% {
        background: linear-gradient(45deg, #00bcd4, #ff9800);
        background-size: 400% 400%;
    }
    100% {
        background: linear-gradient(45deg, #ff5722, #00bcd4);
        background-size: 400% 400%;
    }
}

/* Style des sections */
section {
    padding: 2rem;
    margin: 1rem 0;
    border-radius: 15px;
    backdrop-filter: blur(15px);
    border: 2px solid #fff;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    color: #fff;
    position: relative; /* Assure que les sections ne débordent pas */
    z-index: 0; /* Assure que les sections restent sous l'en-tête */
    overflow: hidden; /* Assure qu'aucune partie de l'animation ne déborde */
    animation: section-bg1 10s infinite linear; /* Animation de dégradé rapide pour la section 1 */
}

/* Assign animation to each section with different delays */
#section1 {
    animation: section-bg1 10s infinite linear;
}

#section2 {
    animation: section-bg2 10s infinite linear;
    animation-delay: 2s; /* Décalage temporel pour éviter la synchronisation */
}

#section3 {
    animation: section-bg3 10s infinite linear;
    animation-delay: 4s; /* Décalage temporel pour éviter la synchronisation */
}

#section4 {
    animation: section-bg4 10s infinite linear;
    animation-delay: 6s; /* Décalage temporel pour éviter la synchronisation */
}

#section5 {
    animation: section-bg5 10s infinite linear;
    animation-delay: 8s; /* Décalage