/**
 * Collapsed header bar: stop the logo and the contact button sitting on top of
 * the menu.
 *
 * The bar is drawn by #header:before, which is wider than #header itself. The
 * menu is laid out against #header and centred, so its first item drifts left
 * of the logo. The theme patches this only between 1241px and 1400px, by
 * left-aligning the menu; outside that band the logo lands on "Projet", and
 * inside it the contact button lands on "Galerie".
 *
 * The fix gives the menu the bar's own box and reserves a lane at each end for
 * the logo and the contact button, so the three can never share space. Only the
 * collapsed bar is touched: the home page's expanded header is left alone.
 *
 * tools/verify-header.js checks every width for collisions.
 */

@media (min-width: 961px) {
  :root {
    /* Mirrors the width of #header:before, the bar itself. */
    --bar-width: min(calc(100vw - 100px), 1300px);
    /* The bar is centred on #header, so it overhangs by this much each side.
       The percentage resolves against #header wherever it is used. */
    --bar-overhang: calc((100% - var(--bar-width)) / 2);
    --bar-inset: 16px;
    --logo-lane: 68px;
    --contact-lane: 176px;
  }

  /* On the home page the bar forms mid-scroll, so the boxes below change while
     the reader is looking at them. Carry the new properties in the transition
     the theme already runs on the collapse, in both directions, so nothing
     jumps sideways. Declared outside the collapsed-state rules on purpose. */
  #main_menu {
    transition:
      transform .3s cubic-bezier(.25, .46, .45, .94),
      left .3s cubic-bezier(.25, .46, .45, .94),
      width .3s cubic-bezier(.25, .46, .45, .94),
      padding .3s cubic-bezier(.25, .46, .45, .94);
  }

  #main-logo {
    transition:
      opacity .3s cubic-bezier(.25, .46, .45, .94),
      transform .3s cubic-bezier(.25, .46, .45, .94),
      left .3s cubic-bezier(.25, .46, .45, .94);
  }

  body:not(.home) #main_menu,
  .menu-sticky #main_menu {
    left: 50%;
    width: var(--bar-width);
    padding-left: var(--logo-lane);
    padding-right: var(--contact-lane);
    transform: translateX(-50%) translateY(max(-265px, calc(var(--header_scroll) * -1)));
  }

  /* The 1241-1400 band left-aligns the menu as its own workaround; with lanes
     reserved it can be centred like every other width. */
  body:not(.home) #main_menu ul,
  .menu-sticky #main_menu ul {
    justify-content: center;
  }

  /* Six long French labels plus both lanes do not fit the bar on a small
     laptop, so the item spacing tracks the width it has to work with rather
     than stepping between fixed values at each breakpoint. */
  body:not(.home) .main_menu--item-link,
  .menu-sticky .main_menu--item-link {
    padding: 0 clamp(4px, calc((100vw - 1100px) / 25), 14px);
    transition: color .3s cubic-bezier(.455, .03, .515, .955), padding .3s cubic-bezier(.455, .03, .515, .955);
  }

  /* Anchor the logo to the bar rather than to the narrower #header. */
  body:not(.home) #main-logo,
  .menu-sticky #main-logo {
    left: calc(var(--bar-overhang) + var(--bar-inset));
  }
}

/* From 1241px the contact button sits inside the bar, so it gets anchored to
   the bar's right edge and the menu keeps a lane clear for it. */
@media (min-width: 1241px) {
  body:not(.home) .contact_btn,
  .menu-sticky .contact_btn {
    left: auto;
    right: calc(var(--bar-overhang) + var(--bar-inset));
    margin-right: 0;
  }
}

/* Below 1241px the bar is only as wide as #header, and the contact button
   leaves it for the page edge, so the menu shares the bar with the logo alone
   and needs no lane on the right. */
@media (min-width: 961px) and (max-width: 1240px) {
  :root {
    --bar-width: 100%;
    --bar-inset: 10px;
    --logo-lane: 50px;
    --contact-lane: 0px;
  }
}