@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    max-width: 800px;
    margin: 1rem auto;
    opacity: 0;
}

#hero {
    margin-bottom: 0;
}

.main{
    margin: auto;
    padding: 0 16px;
    opacity: 100;
    max-width: 700px;
}

section.is-visible {
    animation: slide-in 1s ease-out;
    opacity: 1;
    transform: none;
}

section.main.is-visible {
    animation: none;
    transform: none;
}

.section-rouge {
    background-color: #8b2a4f;
    color: white;
    padding: 32px;
    border-radius: 8px;
    box-shadow: var(--Box-shadow);
}

.section-rouge h2 {
    margin-top: 0;
    padding: 0;
}

.boutton-questionnaire {
    margin: 1.8rem auto;
}


#probleme,
#solution,
#cible,
#bio,
#faq {
    background-color: #6f7f63;
}

#exclusion {
    background-color: #c44a6a;
}

#intro h2 {
    margin-top: 45px;
}