/* Desktop: put logo and menu on the same row and align menu to the right */
@media (min-width: 992px) {
  /* 1) Make the header a 2‑column grid, vertically centered */
  .container-header {
    display: grid;                 /* make sure it's a grid */
    grid-template-columns: auto 1fr; /* logo takes natural width, menu takes the rest */
    align-items: center;           /* vertically center logo and menu */
  }

/* Ensure container-nav stacks its children vertically */
.container-header .container-nav {
    display: flex;
    flex-direction: column;   /* stack menu UL and search block */
}

/* Align the menu UL to the right */
.container-header .container-nav > ul.mod-menu {
    align-self: flex-end;     /* push menu to the right */
}

/* Push the search block to the right on its own line */
.container-header .container-nav .container-search {
    align-self: flex-end;     /* align this child to the right */
    margin-top: .5rem;        /* add spacing above if needed */
}
	
/* 2) Right‑align the menu grid item */
  .container-header .grid-child.container-nav {
    justify-self: end;             /* push the menu to the right edge */
  }

  /* 3) (Optional) ensure the UL behaves horizontally and hugs the right */
  .container-header .grid-child.container-nav .mod-menu.nav {
    display: flex;                 /* keep menu items on one line */
    justify-content: flex-end;
    gap: .75rem;                   /* tweak spacing if you like */
  }
}

/* If the menu ever wraps under the logo on mid breakpoints, forbid wrapping */
@media (min-width: 992px) {
  .container-header .grid-child.container-nav .mod-menu.nav {
    flex-wrap: nowrap;
  }
}

/* Add space before the logo */
.container-header .navbar-brand {
    padding-left: 1rem; /* adjust as needed: 1rem = ~16px */
}

/* If you prefer margin instead of padding */
.container-header .navbar-brand {
    margin-left: 1rem;
}

/* Make main menu links white */
.container-header .mod-menu a {
	color: #fff !important;
}

/* Optional: hover color */
.container-header .mod-menu a:hover {
    color: #f0f0f0 !important;
}

/* Style the submenu toggle button text */
.container-header .mod-menu__toggle-sub .mod-menu__heading {
    color: #fff !important;   /* make 'Rapports' white */
}

/* Optional: change hover/focus color */
.container-header .mod-menu__toggle-sub:hover .mod-menu__heading,
.container-header .mod-menu__toggle-sub:focus .mod-menu__heading {
    color: #f0f0f0 !important;
}

/* If you also want the button background different */
.container-header .mod-menu__toggle-sub {
    background-color: #334B68 !important;   /* dark background */
    border: none;                        /* remove default border if any */
/*    padding: .5rem 1rem; */
    border-radius: 4px;
}

/* Make the submenu toggle arrow white */
.container-header .mod-menu__toggle-sub .icon-chevron-down {
    color: #fff !important;   /* force arrow to white */
    fill: #fff !important;    /* covers SVG icons */
}

/* Submenu container background */
.container-header .mod-menu__sub {
    background-color: #334B68 !important;   /* dark background */
    padding: .5rem;
    border-radius: 4px;
}

/* Submenu links */
.container-header .mod-menu__sub a {
    color: #fff !important;              /* white text */
    display: block;                      /* full clickable area */
    padding: .5rem 1rem;
}

/* Hover effect for submenu links */
.container-header .mod-menu__sub a:hover {
    background-color: #334B68 !important;   /* darker background on hover */
    color: #f0f0f0 !important;
}