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

header#formules {
    color-scheme: only dark;
    background:
        var(--picture-gradient),
        url("/assets/couverture-formules.jpeg") center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    h2 {
        font-size: 3rem;
    }
    p {
        font-size: 1.5rem;
        margin: 0;
        color: var(--on-background-strong);
    }
    nav.nav-menu {
        border: 2px solid var(--on-background-strong);
        padding: calc(var(--spacing) / 6);
        border-radius: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 2);
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            li {
                a {
                    text-decoration: none;
                    display: block;
                    color: inherit;
                    font-weight: 600;
                    transition:
                        color 300ms ease,
                        background 300ms ease;
                    padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
                    color: var(--on-background-strong);
                    border-radius: calc(var(--spacing) * 2);
                    &:hover,
                    &:target {
                        background: var(--on-background-strong);
                        color: var(--background);
                    }
                }
            }
        }

        /* Responsive design for smaller screens */
    }
}

@media screen and (max-width: 768px) {
    .nav-menu ul {
        flex-direction: column;
        align-items: center;
    }

    .nav-menu li {
        padding: 0.5rem 0;
    }
}
.pricing-table {
    border-collapse: separate;
    border-spacing: 0;
    td,
    th {
        border: calc(1rem / 16) solid var(--border);
        border-right: none;
        border-bottom: none;
        padding: calc(var(--spacing) / 2);
        line-height: 1.2;
        &.empty {
            border: none;
        }
        &:last-child {
            border-right: calc(1rem / 16) solid var(--border);
        }
    }
    th {
        span {
            font-weight: 400;
            display: block;
        }
    }
    thead {
        th.empty + th {
            border-radius: var(--radius) 0 0 0;
        }
        th:not(.empty) {
            background-color: var(--background-primary);
            color: var(--on-background-primary);
            &:last-of-type {
                border-radius: 0 var(--radius) 0 0;
            }
        }
    }
    tbody {
        tr {
            &:first-of-type th {
                border-radius: var(--radius) 0 0 0;
            }
            &:last-of-type {
                th {
                    border-radius: 0 0 0 var(--radius);
                }
                td,
                th {
                    border-bottom: calc(1rem / 16) solid var(--border);
                }
                td:last-of-type {
                    border-radius: 0 0 var(--radius) 0;
                }
            }
        }

        th {
            background-color: var(--background-primary);
            color: var(--on-background-primary);
            border-right: none;
        }
        td {
            text-align: center;
            font-size: x-large;
            font-weight: 500;
            color: var(--on-background-primary);
            span {
                font-size: medium;
                display: block;
                color: var(--on-background);
                font-weight: 400;
            }
        }
    }
}
.pricing-figure-paragraph {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing);

    .pricing-figure {
        display: inline-block;
        padding: calc(var(--spacing) / 2);
        border-radius: var(--radius);
        margin: 0;
        text-align: center;
        font-size: x-large;
        font-weight: 500;
        color: var(--on-background-primary);
        border: 3px solid var(--on-dimmed-background);
        figcaption {
            font-size: medium;
            display: block;
            color: var(--on-background-primary-light);
            font-weight: 400;
        }
    }
}

main {
    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        h3 {
            font-size: 2rem;
            margin-top: var(--spacing);
            margin-bottom: calc(var(--spacing) / 2);
        }
    }
}

#etang-a-reserver {
    background: var(--dimmed-background);
    color: var(--on-dimmed-background);
}