/* ============================================================
   Global Mondrian top menu — SQUALP / Isoar V2
   Used by: index.html + chapter pages
   ============================================================ */

:root {
  --mondrian-red: #FE0908;
  --mondrian-blue: #3374CE;
  --mondrian-yellow: #F3C14F;
  --mondrian-black: #1A1A1A;
  --mondrian-white: #F7F4EF;
  --menu-height: 76px;
  --menu-line: 4px;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--mondrian-black);
  border-bottom: var(--menu-line) solid var(--mondrian-black);
  /* Only the slide is animated. The border-bottom width switches INSTANTLY with the
     collapsed class (the fixed .menu-show button carries the line while collapsed), so
     the bottom border is never thinner than 4px mid-transition. */
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: Verdana, Geneva, sans-serif;
  /* the 4px gap reveals the black background as a Mondrian line */
  gap: var(--menu-line);
  /* reserve space on the right for the permanent collapse arrow */
  padding-right: 56px;
}
/* First row: main menu items are sized off the configured height */
.menu > .menu__item,
.menu > .menu__toggle,
.menu > .menu__hamburger {
  height: var(--menu-height);
}

/* ---- Hamburger (mobile drawer trigger) ---- */
.menu__hamburger {
  flex: 0 0 auto;
  width: 58px;
  display: none; /* hidden on desktop */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--mondrian-blue);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.18s ease;
}
.menu__hamburger:hover { background: #275aa3; }
.menu__hamburger:active { transform: scale(0.94); }
.menu__hamburger span {
  display: block;
  width: 22px;
  height: 3px;
  background: white;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu__hamburger[aria-expanded="true"] {
  background: var(--mondrian-red);
}
.menu__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu.is-collapsed {
  transform: translateY(-100%);
  border-bottom-width: 0;
}

/* ---- Generic item ---- */
.menu__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  text-decoration: none;
  font-size: 0.98rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mondrian-black);
  background: var(--mondrian-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    letter-spacing 0.2s ease;
}
.menu__item:focus-visible {
  outline: 3px solid var(--mondrian-yellow);
  outline-offset: -6px;
}

/* ---- Logo (left) ---- */
.menu__item--logo {
  flex: 0 0 auto;
  padding: 0 26px;
  background: var(--mondrian-white);
}
.menu__item--logo img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform 0.25s ease;
}
.menu__item--logo:hover {
  background: var(--mondrian-yellow);
}
.menu__item--logo:hover img {
  transform: scale(1.05);
}

/* ---- ERP SQUALP (primary / active) ---- */
.menu__item--erp {
  flex: 0 0 auto;
  padding: 0 36px;
  background: var(--mondrian-red);
  color: white;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  position: relative;
}
.menu__item--erp[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--mondrian-yellow);
}
.menu__item--erp:hover {
  background: #9e2218;
  color: white;
  letter-spacing: 0.22em;
}

/* ---- Color variants for other entries ---- */
.menu__item--yellow { background: var(--mondrian-yellow); color: var(--mondrian-black); }
.menu__item--blue   { background: var(--mondrian-blue);   color: white; }
.menu__item--white  { background: var(--mondrian-white);  color: var(--mondrian-black); }

.menu__item--white:hover  { background: var(--mondrian-yellow); }
.menu__item--yellow:hover { background: var(--mondrian-white);  }
.menu__item--blue:hover   { background: var(--mondrian-yellow); color: var(--mondrian-black); }


/* ---- Old in-bar toggle (replaced by the permanent fixed arrow) ---- */
.menu__toggle {
  display: none;
  flex: 0 0 auto;
  width: 58px;
  background: var(--mondrian-yellow);
  color: var(--mondrian-black);
  border: none;
  cursor: pointer;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.menu__toggle:hover {
  background: var(--mondrian-red);
  color: white;
}
.menu__toggle:active {
  transform: scale(0.94);
}

/* ---- Permanent collapse / restore arrow (replaces the bar toggle AND the
   old "▼ Menu" button). Always visible; rotates on toggle. ---- */
.menu-show {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 210;
  width: 56px;
  height: calc(var(--menu-height) + var(--menu-line));
  background: var(--mondrian-yellow);
  color: var(--mondrian-black);
  border: none;
  border-left: var(--menu-line) solid var(--mondrian-black);
  /* PERMANENT bottom border, sized + box-sizing so it lands EXACTLY on the bar's own
     border-bottom (no doubling at rest) and never disappears during the collapse/expand
     transition. Height grows by --menu-line to make room for it. */
  border-bottom: var(--menu-line) solid var(--mondrian-black);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;                       /* hide the "Menu" text label */
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-show::before {
  content: "\25B2";                   /* ▲ */
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-collapsed .menu-show::before { transform: rotate(180deg); }  /* ▲ → ▼ */
.menu-show:hover { background: var(--mondrian-red); color: white; }

/* ---- Breadcrumb row (chapter pages) ----
   Now a sibling of .menu so the hide-toggle only affects the bar above,
   not the breadcrumb + back button. */
.menu__crumbs {
  display: none;   /* breadcrumb removed (redundant with the sommaire) */
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--menu-height) + var(--menu-line));
  z-index: 199;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--mondrian-cream, #FAF8F3);
  padding: 10px 28px;
  /* Match the body padding-top reservation so the "▼ MENU" tab sits flush
     against the crumbs row instead of floating below it. */
  min-height: 50px;
  border-bottom: var(--menu-line) solid var(--mondrian-black);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.7);
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When the bar is collapsed, slide the crumbs up to the top of the viewport */
body.menu-collapsed .menu__crumbs { top: 0; }
.menu__crumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.menu__crumbs-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.menu__crumbs-list li::after {
  content: "/";
  color: rgba(26, 26, 26, 0.3);
  font-weight: 400;
}
.menu__crumbs-list li:last-child::after { content: ""; }
.menu__crumbs-list a {
  color: var(--mondrian-black);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.18s ease, background 0.18s ease;
  padding: 2px 4px;
}
.menu__crumbs-list a:hover {
  color: var(--mondrian-red);
  background: var(--mondrian-yellow);
}
.menu__crumbs-list [aria-current="page"] {
  color: var(--mondrian-red);
  font-weight: 700;
}
/* "Retour" button removed — the floating "Page précédente" already covers it */
.menu__back { display: none !important; }
.menu__back--legacy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mondrian-black);
  background: var(--mondrian-yellow);
  border: 2px solid var(--mondrian-black);
  padding: 6px 14px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.menu__back:hover {
  background: var(--mondrian-red);
  color: white;
  transform: translateX(-3px);
}

/* ---- Body offset so fixed menu doesn't overlap content ---- */
body.has-menu {
  /* Fallback before JS measures the real menu height */
  padding-top: calc(var(--menu-height) + var(--menu-line));
}
/* Breadcrumb removed — has-crumbs now reserves only the menu bar height */
body.has-menu.has-crumbs {
  padding-top: calc(var(--menu-height) + var(--menu-line));
}
/* When the bar is collapsed, nothing occupies the top */
body.has-menu.menu-collapsed { padding-top: 0; }
body.has-menu.has-crumbs.menu-collapsed { padding-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .menu__item { padding: 0 12px; font-size: 0.72rem; letter-spacing: 0.1em; }
  .menu__item--erp { padding: 0 22px; font-size: 0.78rem; letter-spacing: 0.14em; }
}

@media (max-width: 760px) {
  :root { --menu-height: 64px; }
  .menu {
    gap: 0;                                       /* no thick black Mondrian gaps on mobile */
    background: var(--mondrian-white);            /* avoid a black band behind logo + hamburger */
    border-bottom: 2px solid var(--mondrian-black);
    padding-right: 0;                             /* no permanent arrow on mobile */
  }
  .menu-show { display: none; }                   /* collapse arrow is desktop-only */
  /* The collapse feature is desktop-only (its ▲ toggle and ▼ restore button are
     hidden on phones). So NEVER honour a collapsed state on mobile — otherwise a
     state set on desktop leaves the menu permanently unreachable on the phone. */
  .menu.is-collapsed { transform: none; border-bottom-width: 2px; }
  body.has-menu.menu-collapsed,
  body.has-menu.has-crumbs.menu-collapsed { padding-top: calc(var(--menu-height) + var(--menu-line)); }
  .menu__item--logo img { height: 34px; }
  .menu__item--logo { padding: 0 16px; order: 1; }

  /* Bar shows only the logo + hamburger; everything else lives in the drawer. */
  .menu__item--erp,
  .menu__item--services,
  .menu__item--references,
  .menu__item--contact,
  .menu__item--actualites,
  .menu__toggle {
    display: none;
  }
  .menu__hamburger { display: flex; width: 56px; margin-left: auto; order: 2; }

  /* Drawer order (rows flow below the bar when open) */
  .menu__item--erp        { order: 5; }
  .menu__item--services   { order: 6; }
  .menu__item--references { order: 7; }
  .menu__item--contact    { order: 8; }
  .menu__item--actualites { order: 9; }

  /* When the drawer is open, ALL nav entries become full-width rows. */
  .menu[data-drawer-open="true"] .menu__item--erp,
  .menu[data-drawer-open="true"] .menu__item--services,
  .menu[data-drawer-open="true"] .menu__item--references,
  .menu[data-drawer-open="true"] .menu__item--contact,
  .menu[data-drawer-open="true"] .menu__item--actualites {
    display: flex;
    flex: 0 0 100%;
    height: 52px;
    justify-content: flex-start;
    padding-left: 22px;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    border-top: 1px solid rgba(26, 26, 26, 0.14);
  }
  .menu[data-drawer-open="true"] .menu__item--erp::after { display: none; }


  .menu__crumbs { padding: 8px 14px; gap: 10px; font-size: 0.66rem; letter-spacing: 0.08em; }
  .menu__crumbs-list { gap: 6px; }
  .menu__back { padding: 5px 10px; font-size: 0.66rem; }
  body.has-menu.has-crumbs {
    padding-top: calc(var(--menu-height) + 44px + var(--menu-line) * 2);
  }
  body.has-menu.has-crumbs.menu-collapsed {
    padding-top: calc(44px + var(--menu-line));
  }
  body.has-crumbs .menu-show { top: calc(44px + var(--menu-line)); }

}

/* ============================================================
   Breadcrumb dropdown navigation (built by menu.js)
   ============================================================ */
.menu__crumbs-list .crumb-dd { position: relative; display: inline-flex; align-items: center; }
.crumb-dd__btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--mondrian-black);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.crumb-dd__btn:hover,
.crumb-dd__btn[aria-expanded="true"] { color: var(--mondrian-red); background: var(--mondrian-yellow); }
.crumb-dd[data-current] .crumb-dd__btn { color: var(--mondrian-red); }
.crumb-dd__caret { font-size: 0.7em; line-height: 1; }
.crumb-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 230;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 3px solid var(--mondrian-black);
  box-shadow: 5px 5px 0 var(--mondrian-black);
  text-transform: none;
  letter-spacing: 0;
}
.crumb-dd__menu[hidden] { display: none; }
.crumb-dd__menu li { list-style: none; }
.crumb-dd__menu li::after { content: none; }
.crumb-dd__menu a,
.crumb-dd__menu span {
  display: block;
  padding: 8px 18px;
  text-decoration: none;
  color: var(--mondrian-black);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.crumb-dd__menu a:hover { background: var(--mondrian-yellow); color: var(--mondrian-red); }
.crumb-dd__menu [aria-current="true"] { color: var(--mondrian-red); background: rgba(213,33,61,0.06); }
.crumb-dd__menu .is-disabled { color: rgba(26,26,26,0.4); cursor: default; }

/* ============================================================
   Left "book" sidebar — full sommaire while reading the book
   Built by menu.js on chapter pages only (never on the cover).
   Inspired by the original SQUALP 1992 left-rail navigation.
   ============================================================ */
.book-nav {
  position: fixed;
  left: 0;
  /* Sits flush under the menu bar (breadcrumb removed). */
  top: calc(var(--menu-height) + var(--menu-line));
  bottom: 0;
  width: 270px;
  z-index: 180;
  background: var(--mondrian-white);
  border-right: 4px solid var(--mondrian-black);
  font-family: Verdana, Geneva, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
body.menu-collapsed .book-nav { top: 0; }
.book-nav.is-collapsed { transform: translateX(-100%); }

.book-nav__head {
  position: relative;
  flex: 0 0 auto;
  background: var(--mondrian-red);
  color: white;
  padding: 12px 18px 14px;
  border-bottom: 4px solid var(--mondrian-black);
  font-family: Verdana, Geneva, sans-serif;
}
/* SQUALP logo sits on a light chip so the Mondrian cells read cleanly on red */
.book-nav__brand-logo {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  padding: 10px 12px;
  border: 2px solid var(--mondrian-black);
  box-sizing: border-box;
}
.book-nav__since {
  display: block;
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.92;
  margin-top: 10px;
  line-height: 1;
}

.book-nav__list {
  list-style: none;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 50px 10px 24px 0;   /* right gutter so the ▾ chevron clears the scrollbar */
}

/* Download CTA pinned to the bottom of the panel */
.book-nav__download {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  background: var(--mondrian-yellow);
  border-top: 4px solid var(--mondrian-black);
  color: var(--mondrian-black);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.book-nav__download:hover { background: var(--mondrian-black); color: #fff; }
.book-nav__download-ic { font-size: 1.2rem; flex: 0 0 auto; line-height: 1; }
.book-nav__download-txt { flex: 1; }
.book-nav__item { border-bottom: 1px solid rgba(0,0,0,0.06); }
.book-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mondrian-black);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
/* Top-level chapter labels stay on ONE line (consistent, never wrap). */
.book-nav__label { white-space: nowrap; }
.book-nav__bullet {
  width: 11px;
  height: 11px;
  background: var(--mondrian-red);
  flex-shrink: 0;
  display: inline-block;
}
.book-nav__label { flex: 1; }
.book-nav__expand {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 4px 6px;
  margin: -4px -8px -4px 0;
  border-radius: 2px;
  transition: transform 0.22s ease, background 0.18s ease;
}
.book-nav__expand:hover { background: rgba(0,0,0,0.08); }
.book-nav__item.is-current > .book-nav__link .book-nav__expand:hover { background: rgba(255,255,255,0.18); }
.book-nav__item.is-expanded > .book-nav__link .book-nav__expand { transform: rotate(180deg); }
.book-nav__link:hover {
  background: var(--mondrian-yellow);
}
.book-nav__item.is-current > .book-nav__link {
  background: var(--mondrian-blue);
  color: white;
}
.book-nav__item.is-current > .book-nav__link .book-nav__bullet {
  background: var(--mondrian-yellow);
}
/* "À venir" items keep the same look as normal entries (client request).
   The pointer-events stay disabled because there's no target href yet,
   but visually nothing distinguishes them. */
.book-nav__item.is-coming > .book-nav__link {
  cursor: default;
  pointer-events: none;
}

.book-nav__sub {
  list-style: none;
  margin: 0;
  padding: 4px 0 10px 12px;   /* less left indent → more room for long labels */
  background: rgba(34, 80, 149, 0.05);
  border-top: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
/* Collapsed by default; current chapter is open. JS toggles `is-expanded`. */
.book-nav__item:not(.is-expanded) > .book-nav__sub { display: none; }
.book-nav__sublink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 4px;
  font-size: 0.8rem;
  color: rgba(26,26,26,0.82);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.book-nav__sublink::before {
  content: "▸";
  color: var(--mondrian-red);
  font-size: 0.72rem;
  line-height: 1;
}
.book-nav__sublink:hover { color: var(--mondrian-blue); background: rgba(250, 201, 1, 0.18); }
.book-nav__sub li.is-current .book-nav__sublink {
  color: var(--mondrian-blue);
  font-weight: 700;
}
.book-nav__sub li.is-current .book-nav__sublink::before {
  color: var(--mondrian-blue);
}

/* Small close ARROW — top of the panel, just under the header, so open (▶) and
   close (◀) happen in the same place. Arrow only (text hidden). */
.book-nav__toggle {
  position: absolute;
  top: 132px;          /* centred in the white strip between the red head and the first item */
  left: 12px;
  width: 42px;
  height: 32px;
  background: var(--mondrian-yellow);
  border: 2px solid var(--mondrian-black);
  cursor: pointer;
  font-size: 0;            /* hide the "Masquer" text */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mondrian-black);
  padding: 0;
  z-index: 3;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.book-nav__toggle::before { content: "\25C0"; font-size: 0.95rem; line-height: 1; }
.book-nav__toggle:hover {
  background: var(--mondrian-black);
  color: var(--mondrian-yellow);
}
.book-nav__toggle:active { transform: translateY(1px); }

/* Re-open tab when the sidebar is hidden */
/* Re-open tab — labelled "▶ Sommaire" so the user can find it easily */
.book-nav-show {
  position: fixed;
  left: 0;
  top: calc(var(--menu-height) + var(--menu-line) + 132px);   /* same height as the close ◀ */
  z-index: 190;
  width: 42px;
  height: 32px;
  background: var(--mondrian-yellow);
  border: 3px solid var(--mondrian-black);
  border-left: none;
  cursor: pointer;
  font-size: 0;            /* hide the "Sommaire" text — arrow only */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mondrian-black);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-nav-show::before { content: "\25B6"; font-size: 0.95rem; line-height: 1; }
body.menu-collapsed .book-nav-show { top: 132px; }
.book-nav-show[hidden] { display: none; }
.book-nav-show:hover { background: var(--mondrian-red); color: white; }

/* RAIL MODE (>= 1380px — includes a 13" MacBook at 1440 CSS px). The sommaire is a
   docked LEFT COLUMN, never an overlay, so it can never cover the book. Open ->
   reserve 260px and push the book right; closed -> reclaim the width. The book moves
   horizontally between the two states but is NEVER resized: the card width is
   viewport-based (calc(100vw - 330px), identical open/closed) and fit.js scales by
   HEIGHT, which the rail doesn't change. So no reflow, no rescale, no border/font
   change on toggle. (The old rule that squeezed .chapter-content only when open —
   the real cause of the drift — has been removed.) */
@media (min-width: 1380px) {
  body.has-book-nav { padding-left: 270px; transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  body.has-book-nav.book-nav-collapsed { padding-left: 0; }
  /* Shift the floating "Précédent" button so it clears the rail when open. */
  body.has-book-nav:not(.book-nav-collapsed) .chapter-nav__prev { left: 270px; }
}

/* Below the rail breakpoint the sommaire is a MODAL / OFF-CANVAS DRAWER (overlay +
   dim backdrop, NO content push). Default state is collapsed (set in menu.js), so the
   diagram loads fully visible; the user opens it, picks a chapter -> it closes. This
   covers tablet & mobile too. */
@media (max-width: 1379px) {
  body.has-book-nav { padding-left: 0 !important; }   /* never push content */
  .book-nav {
    z-index: 210;
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.35);
    width: min(82vw, 360px);
  }
  .book-nav-show { z-index: 205; }
  /* dim backdrop while the drawer is open */
  .book-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  body.has-book-nav:not(.book-nav-collapsed) .book-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }
}
/* The backdrop never shows in rail mode (the panel is a docked column there). */
@media (min-width: 1380px) {
  .book-nav-backdrop { display: none; }
}

/* === Site footer (injected by menu.js on book pages) === */
.home-footer {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--mondrian-black);
  color: rgba(255,255,255,0.78);
  border-top: 4px solid var(--mondrian-red);
  padding: 36px 36px 22px;
  font-family: Verdana, Geneva, sans-serif;
}
.home-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.home-footer__col h3 {
  color: var(--mondrian-yellow);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.home-footer__brand {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: white;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.home-footer__brand-line {
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
.home-footer__col p,
.home-footer__col a {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  display: block;
}
.home-footer__col a:hover { color: var(--mondrian-yellow); }
.home-footer__legal {
  max-width: 1280px;
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 980px) {
  .home-footer { padding: 28px 22px 18px; }
  .home-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .home-footer__grid { grid-template-columns: 1fr; }
  .home-footer__legal { flex-direction: column; gap: 6px; }
}


/* Footer spans full width even when the book sidebar pushes the body right. */
@media (min-width: 1100px) {
  body.has-book-nav:not(.book-nav-collapsed) .home-footer {
    margin-left: -260px;
    width: calc(100% + 260px);
  }
}