/* =========================================================
   VARIABLES & FONT
========================================================= */

:root {
    --brand: #0d6efd;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* =========================================================
   GLOBAL
========================================================= */

body {
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
}

.container-narrow {
    max-width: 860px;
}

.article img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    margin: .75rem 0;
}

    .article img.clickable {
        cursor: zoom-in;
    }

.article p {
    margin: 0 0 1rem 0;
}

footer {
    margin-top: 3rem;
}

.footer-social a {
    text-decoration: none;
}

/* =========================================================
   BRAND / TITRE DU SITE
========================================================= */

.brand-dot {
    width: 12px;
    height: 12px;
    background: var(--brand);
    display: inline-block;
    border-radius: 50%;
}

.brand-block {
    padding-top: .3rem;
    padding-bottom: .2rem;
}

.brand-title {
    text-decoration: none;
}

.brand-main {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #0c2a4d;
    text-transform: uppercase;
}

.brand-baseline {
    font-size: .80rem;
    color: #6c7a89;
    margin-top: .15rem;
    letter-spacing: .3px;
}

/* =========================================================
   NAVIGATION (MENU PRINCIPAL)
========================================================= */

.nav-main {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .4rem;
    padding-bottom: .25rem;
    border-top: 1px solid rgba(0,0,0,.07);
}

    .nav-main .nav-link {
        position: relative;
        padding: .35rem .7rem;
        border-radius: .4rem;
        font-size: .95rem;
        color: #0c2a4d;
        text-decoration: none;
        transition: color .15s ease, background-color .15s ease;
    }

        /* Surbrillance hover */
        .nav-main .nav-link:hover {
            color: var(--brand);
            background: #f3f7ff;
        }

        .nav-main .nav-link::after {
            content: "";
            position: absolute;
            left: .6rem;
            right: .6rem;
            bottom: .25rem;
            height: 2px;
            background: var(--brand);
            border-radius: 999px;
            transform: scaleX(0);
            transition: transform .18s ease-out;
        }

        .nav-main .nav-link:hover::after {
            transform: scaleX(1);
        }

        /* Active (via Razor) */
        .nav-main .nav-link.active {
            color: var(--brand);
            background: #eaf1ff;
        }

            .nav-main .nav-link.active::after {
                transform: scaleX(1);
            }

/* =========================================================
   BURGER MENU (BOOTSTRAP)
========================================================= */

.navbar-toggler {
    border: 1px solid rgba(0,0,0,.2);
}

.navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg);
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}

/* =========================================================
   RESPONSIVE (MOBILE)
========================================================= */

@media (max-width: 991.98px) {
    .nav-main {
        flex-direction: column;
        align-items: flex-start;
        border-top: 1px solid rgba(0,0,0,.1);
        padding-left: .5rem;
        gap: .2rem;
    }

        .nav-main .nav-link {
            width: 100%;
            padding-left: 0;
        }

            .nav-main .nav-link::after {
                left: 0;
                right: 0;
            }
}

/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

    .lightbox-backdrop img {
        max-width: 90%;
        max-height: 90%;
        border-radius: .5rem;
        box-shadow: 0 0 30px rgba(0,0,0,.5);
    }

    .lightbox-backdrop.show {
        display: flex;
    }