:root {
    --text-color: var(--zinc-300);
    --background-color: var(--zinc-950);

    --nav-text-color: var(--zinc-200);
    --nav-background-color: var(--zinc-900);
    --nav-text-color-hover: var(--zinc-100);
    --nav-background-color-hover: var(--zinc-700);
    --nav-text-color-current: var(--zinc-100);
    --nav-background-color-current: var(--zinc-800);
}

/* ============================================================================ */

#menu-button {
    background-color: rgba(255, 255, 255, 0.125);
}

#menu-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#menu-button:active {
    background-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================================ */

#accueil {
    h1 {
        margin: 0 auto;
        padding: var(--gap) 0;
    }

    section:not(:first-child) {
        gap: var(--gap) !important;
        padding: calc(var(--gap) * 2) var(--gap) !important;

        article {
            content {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                align-items: stretch !important;
                gap: var(--gap) !important;
            }

            .photo {
                width: 100%;
                object-fit: cover;
                background-color: white;
                border-radius: var(--card-border-radius);
                margin-bottom: var(--gap);
            }

            .signature {
                margin: var(--gap) 0 var(--gap) 50%;
                width: 50%;
                font-family: var(--font-family-cursive);
                font-size: 3rem;
                line-height: 200%;

                h {
                    font-family: var(--first-letter-font-family);
                    font-size: 150%;
                }
            }
        }

        #accueil-presentation {
            div {
                flex: 1 1 170px;
            }

            div:nth-child(2) {
                border-radius: var(--card-border-radius);
            }
        }

        #accueil-avantages div {
            flex: 1 1 210px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: var(--gap);
            border-radius: var(--card-border-radius);
            box-shadow: var(--card-box-shadow);
        }
    }
}