body {
}


.header-background {
    background-color: #F0E6D2;
}

.logo {
    height: 100%;
}

.navbar {
    min-height: 8vh;
    height: 8vh;
    padding: 0rem 1.5rem;
}

.navbar .container-fluid {
        height: 100%;
}

.header-title {
    font-size: 1.8rem;
}

.header-menu {
    font-size: 1.5rem;
}

.nav-item a {
    border-bottom: 3px solid transparent;
}

    .nav-item a:hover {
        border-bottom: 3px solid #C0392B;
    }

    .nav-item a.active {
        border-bottom: 3px solid #C0392B;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.navbar-collapse.show {
    background-color: #F0E6D2; /* couleur solide, même que ton header */
    z-index: 1000;
    position: absolute;
    top: 8vh; /* égale à la hauteur de ton navbar */
    left: 0;
    width: 100%;
    padding-left: 3rem;
}

@media (max-width: 1024px) {
    .header-menu {
        font-size: 1.2rem;
    }
    .header-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .navbar-collapse {
        background-color: #F0E6D2; /* couleur solide, même que ton header */
        padding: 1rem;
    }

    .navbar-nav {
        flex-direction: column; /* force l'empilement vertical */
        align-items: start;
    }

    .nav-link {
        width: 100%; /* pour qu’ils prennent toute la largeur */
        padding: 0.5rem 1rem;
    }

    /* si nécessaire, ajuste le _LoginPartial */
    .navbar-collapse > .login-partial {
        margin-top: 1rem;
    }
}

/* Tablette */
@media (min-width: 577px) and (max-width: 768px) {

}

/* Tablettes (paysage) et petits laptops */
@media (min-width: 769px) and (max-width: 1024px) {

}