:root {
    --space-blue: #0f2865;
    --star-yellow: #e6b84d;
    --star-white: #f2f0ef;
    --twilight-bg: #eef1f6;
    --twilight-bg-alt: #e4e9f2;
    --ink: #1a2332;
    --ink-muted: #3d4a5c;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;

    --bulma-family-primary: var(--font-body);
    --bulma-family-secondary: var(--font-display);
    --bulma-text: var(--ink);
    --bulma-text-strong: var(--space-blue);
    --bulma-title-color: var(--space-blue);
    --bulma-subtitle-color: var(--ink-muted);
    --bulma-link-h: 214deg;
    --bulma-link-s: 68%;
    --bulma-link-l: 32%;
    --bulma-link-on-scheme-l: 32%;
    --bulma-body-background-color: var(--twilight-bg);
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--ink);
    font-family: var(--font-body);
    background-color: var(--twilight-bg);
}

.title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.navbar-item,
.button,
.subtitle,
.content {
    font-family: var(--font-body);
}

.hero.is-link {
    position: relative;
    background-color: var(--space-blue);
    background-image:
        linear-gradient(
            180deg,
            rgba(8, 18, 48, 0.55) 0%,
            rgba(8, 18, 48, 0.72) 55%,
            rgba(8, 18, 48, 0.88) 100%
        ),
        url("./assets/images/pixnio-5362x3575.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: var(--star-white);
}

.hero.is-link .title,
.hero.is-link .subtitle {
    color: var(--star-white);
}

.hero.is-link .title {
    font-family: var(--font-display);
    font-weight: 700;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero.is-link .subtitle {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    color: rgba(242, 240, 239, 0.92);
}

.eyebrow {
    margin-bottom: 1rem;
    color: var(--star-yellow);
    font-family: var(--font-body);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero.is-link .button.is-light {
    border: none;
    background-color: var(--star-white);
    color: var(--space-blue);
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hero.is-link .button.is-light:hover,
.hero.is-link .button.is-light:focus {
    background-color: var(--star-yellow);
    color: var(--space-blue);
    transform: translateY(-2px);
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero.is-link .hero-body .container > * {
    animation: hero-fade-up 0.7s ease both;
}

.hero.is-link .hero-body .container > *:nth-child(1) { animation-delay: 0.05s; }
.hero.is-link .hero-body .container > *:nth-child(2) { animation-delay: 0.15s; }
.hero.is-link .hero-body .container > *:nth-child(3) { animation-delay: 0.25s; }
.hero.is-link .hero-body .container > *:nth-child(4) { animation-delay: 0.35s; }

.navbar {
    background-color: rgba(15, 40, 101, 0.92);
}

.navbar .navbar-item,
.navbar .navbar-burger {
    color: var(--star-white);
}

.navbar .navbar-item:hover,
.navbar .navbar-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--star-yellow);
}

.navbar-burger span {
    background-color: var(--star-white);
}

.navbar-menu {
    background-color: rgba(15, 40, 101, 0.98);
}

@media screen and (min-width: 1024px) {
    .navbar-menu {
        background-color: transparent;
    }
}

address {
    font-style: normal;
}

.section-band {
    background-color: var(--twilight-bg);
}

.section-band--alt {
    background-color: var(--twilight-bg-alt);
}

.section .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 48rem;
}

#reservation .container,
#horaires .container {
    max-width: 56rem;
}

.section .title.is-2 {
    margin-bottom: 1.25rem;
}

.content ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.content ul li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.85rem;
}

.content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--star-yellow);
}

.time-slot {
    --bulma-notification-background-l: 22%;
    background-color: var(--space-blue) !important;
    color: var(--star-white);
    border-radius: 0.35rem;
    box-shadow: none;
    padding: 1.25rem 1rem;
}

.time-slot strong {
    color: inherit;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.button.is-link {
    background-color: var(--space-blue);
    border-color: transparent;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.button.is-link:hover,
.button.is-link:focus {
    background-color: #173a8c;
    transform: translateY(-1px);
}

.button.is-dark {
    background-color: transparent;
    border: 2px solid var(--space-blue);
    color: var(--space-blue);
    font-weight: 600;
}

.button.is-dark:hover,
.button.is-dark:focus {
    background-color: var(--space-blue);
    color: var(--star-white);
}

.footer {
    background-color: var(--space-blue);
    color: var(--star-white);
    padding: 2.5rem 1.5rem;
}

.footer strong {
    color: var(--star-white);
    font-family: var(--font-display);
    font-size: 1.35rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero.is-link .hero-body .container > *,
    .hero.is-link .button.is-light,
    .button.is-link,
    .button.is-dark {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}
