@import url("/assets/stylesheets/base.css");
@import url("/assets/stylesheets/components/grille-formule.css");
@import url("/assets/stylesheets/components/avis-visiteur.css");

section > header {
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        font-size: 2.5rem;
    }

    p {
        margin: 0;
        color: var(--on-background-primary);
    }
}

#accueil {
    color-scheme: only dark;
    background:
        var(--picture-gradient),
        url("/assets/couverture-accueil.jpeg") center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);

    .slogan {
        font-size: 3rem;
        line-height: 1.1;
        font-weight: 900;
    }

    h1,
    p {
        width: 49vw;
        margin: 0;
        color: var(--on-background-strong);
        @media (max-width: 1000px) {
            width: auto;
        }
    }

    p br {
        margin-bottom: 0.5rem;
    }
}

#formules {
    color-scheme: only dark;
    background: var(--background);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 2);
    header p {
        color: var(--tertiary);
    }
}

#lachers-samedi {
    height: calc(700rem / 16);
}

#avis-visiteurs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing);
    background: var(--dimmed-background);
    header {
        grid-column: span 3;
    }
}