/* =========================================================
   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;
    }

.brand-social img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    border-radius: 4px; /* optionnel */
    transition: transform .15s ease, opacity .15s ease;
}

.brand-social:hover img {
    transform: scale(1.12);
    opacity: .85;
}

.brand-logo {
    height: 150px; /* taille réduite de 20% */
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto; /* centre le logo si nécessaire */
}

.full-width-image {
    width: 100%; /* force l’image à prendre toute la largeur */
    height: auto; /* conserve les proportions */
    display: block; /* évite les espaces parasites inline */
}

.images-center {
    text-align: center; /* centre les images dans le div */
}

    .images-center img {
        display: inline-block; /* permet de les aligner côte à côte */
        max-width: 100%; /* sécurité responsive */
        height: auto;
        margin: .5rem; /* espace entre les images */
        border-radius: .5rem; /* esthétique, optionnel */
    }

/* Réduit l’espace vertical 
   et place tout proprement sur desktop */
@media (min-width: 992px) {

    /* Alignement général du container */
    .navbar-two-line .container {
        align-items: flex-start; /* logo aligné en haut avec la baseline */
    }

    .brand-logo {
        height: 100px; /* tu gardes ta taille */
    }

    .brand-baseline {
        margin-top: 0.3rem;
        text-align: center !important; /* CENTRE la baseline */
        width: 100%;
    }

    #mainNav {
        margin-top: 0.2rem;
    }

    /* CENTRE le bloc baseline + menu */
    .navbar-two-line .right-block {
        display: flex;
        flex-direction: column;
        align-items: center; /* centre baseline + menu */
        width: 100%;
    }

    /* Centre le menu */
    #mainNav .nav-main {
        justify-content: center !important;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .brand-logo {
        height: 90px;
    }
}