/* ============================================================
   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;
  --mondrian-grey: #5B5B54;   /* SEUL gris sanctionné (audit 2026-07) */
  /* TOKENS DE TRAITS (audit B1) — les 3 seules épaisseurs sanctionnées */
  --line-hair: 2px;   /* séparateurs internes fins */
  --line: 4px;        /* bordures de boîtes + grille du menu */
  --line-wall: 6px;   /* murs Mondrian (gap + border des .wall) */
  /* TOKENS D'ESPACEMENT (audit H1) — échelle 8px */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  --menu-height: 76px;
  --menu-line: var(--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: #295DA5; }   /* #3374CE assombri 20% */
.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);
}
/* Drawer du menu haut OUVERT : les boutons du sommaire latéral (▶ Sommaire / ◀)
   disparaissent le temps du menu — il doit les recouvrir (retour client 2026-07-07). */
.menu[data-drawer-open="true"] ~ .book-nav-show,
.menu[data-drawer-open="true"] ~ .book-nav .book-nav__toggle { visibility: hidden; }
.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 {
  /* La barre coulisse vers le haut AVEC sa bordure basse (la bordure « suit » le menu
     pour se cacher, au lieu de disparaître d'un coup). Demande client 2026-07-18. */
  transform: translateY(-100%);
}

/* ---- Generic item ---- */
.menu__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Taille FLUIDE : le libellé rétrécit progressivement quand la fenêtre se
     réduit, au lieu d'être coupé (client 2026-07-12). Plancher = valeurs du
     breakpoint 1024px. Plafond relevé à 1.32rem (client 2026-07-13) : sur grand
     écran (> ~1750px) le libellé continue de grandir avec les boutons — 0.98rem
     paraissait perdu dans des boutons de 450px à 2560. */
  padding: 0 clamp(8px, 1.25vw, 18px);
  text-decoration: none;
  font-size: clamp(0.72rem, 0.58vw + 0.35rem, 1.32rem);
  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: clamp(44px, 2.2vw, 54px);   /* grandit avec le menu sur grand écran (> 2000px), 44px inchangé en dessous */
  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);
}
.menu__item--logo:hover .logo-clock { transform: scale(1.05); }

/* ---- Logo « vivant » : aiguilles d'horloge dans le O (client 2026-07-18) ----
   Le wrap enveloppe l'image ; l'horloge SVG est posée en surimpression sur le O
   (fractions mesurées sur le logo 800×225 : centre O ≈ 48 % × 50 %). Les aiguilles
   tournent en boucle (60 s / 3600 s / 43200 s) et sont calées sur l'heure réelle par
   menu.js (animation-delay négatif). Repli : transform inline (heure du chargement). */
.logo-wrap { position: relative; display: inline-block; line-height: 0; }
.logo-clock { position: absolute; left: 38%; top: 13.1%; width: 20.3%; height: 73.5%;
  pointer-events: none; transition: transform 0.25s ease; }
.logo-clock__face { width: 100%; height: 100%; overflow: visible; display: block; }
.logo-clock line { fill: none; stroke-linecap: round;
  transform-box: view-box; transform-origin: 50px 50px; }
/* halo clair sous les aiguilles → lisibles par-dessus la grille noire et les aplats */
.logo-clock__halo line { stroke: var(--mondrian-white, #F7F4EF); }
.logo-clock__halo .lc-h { stroke-width: 7.5; }
.logo-clock__halo .lc-m { stroke-width: 6; }
.logo-clock__halo .lc-s { stroke-width: 4.5; }
.logo-clock__hands .lc-h { stroke: #1a1a1a; stroke-width: 4; }
.logo-clock__hands .lc-m { stroke: #1a1a1a; stroke-width: 3; }
.logo-clock__hands .lc-s { stroke: var(--mondrian-red, #E30613); stroke-width: 2; }
.logo-clock .lc-pin { fill: #1a1a1a; stroke: var(--mondrian-white, #F7F4EF); stroke-width: 1.2; }
.lc-h { animation: logo-clock-spin 43200s linear infinite; animation-delay: var(--h, 0s); }
.lc-m { animation: logo-clock-spin 3600s linear infinite; animation-delay: var(--m, 0s); }
.lc-s { animation: logo-clock-spin 60s steps(60) infinite; animation-delay: var(--s, 0s); }
/* le « from » explicite est requis : sans lui l'aiguille repart de la valeur inline et ne tourne pas */
@keyframes logo-clock-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lc-h, .lc-m, .lc-s { animation: none; }   /* figées sur l'heure du chargement (transform inline) */
}

/* ---- ERP SQUALP (primary / active) ---- */
.menu__item--erp {
  flex: 0 0 auto;
  padding: 0 clamp(16px, 2.5vw, 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: #CB0706;   /* #FE0908 assombri 20% */
  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__item--lexique,
  .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; }
  .menu__item--lexique    { order: 10; }

  /* 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,
  .menu[data-drawer-open="true"] .menu__item--lexique {
    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; }
  /* ⚠️ MOBILE — RÉSERVATION FANTÔME SUPPRIMÉE (retour client 2026-08-06 : « l'espace
     entre le header et le contenant blanc est immense »). Le fil d'Ariane .menu__crumbs
     est `display:none` depuis longtemps, mais le body lui réservait toujours 44px + 2
     traits (= 52px de vide teal sous le header). Sur mobile le header mesure
     EXACTEMENT --menu-height + 2px (sa bordure basse passe à 2px dans ce même bloc) :
     on ne réserve plus que ça. Le menu ne se replie jamais sur mobile
     (.menu.is-collapsed{transform:none} plus haut) → l'état « collapsed » réserve la
     MÊME hauteur, sinon la carte glissait SOUS le header fixe. */
  body.has-menu,
  body.has-menu.menu-collapsed,
  body.has-menu.has-crumbs,
  body.has-menu.has-crumbs.menu-collapsed {
    padding-top: calc(var(--menu-height) + 2px);
  }
  body.has-crumbs .menu-show { top: calc(var(--menu-height) + 2px); }

}

/* ============================================================
   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: 6px 6px 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(254,9,8,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%); }
/* Nav STATIQUE (dans le HTML) : l'état replié doit s'appliquer dès le 1er paint,
   avant menu.js — le script inline du <head> ne pose que la classe sur <body>. */
body.book-nav-collapsed .book-nav { 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;
  /* La place manquait pour « Commercial « Full Business » », qui repassait à la ligne.
     On la récupère à DROITE (et non en rognant le retrait des sous-pages) : la barre de
     défilement native fait 15px et creusait une grosse bordure — on l'affine, et on
     réduit la gouttière. Total récupéré : ~17px. */
  padding: 50px 0 24px 0;
  /* ⚠️ PAS de scrollbar-width/scrollbar-color ici : dès qu'on les déclare, Chrome bascule
     sur la barre « standard » (11px) et IGNORE le ::-webkit-scrollbar ci-dessous. En les
     omettant, Chrome/Safari appliquent bien les 6px. Firefox garde sa barre native. */
}
.book-nav__list::-webkit-scrollbar { width: 6px; }          /* Chrome / Safari */
.book-nav__list::-webkit-scrollbar-track { background: transparent; }
.book-nav__list::-webkit-scrollbar-thumb {
  background: rgba(26,26,26,0.28);
  border-radius: 3px;
}
.book-nav__list::-webkit-scrollbar-thumb:hover { background: rgba(26,26,26,0.45); }

/* 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;
  transition: transform 0.22s ease, background 0.18s ease;
}
.book-nav__item.is-expanded > .book-nav__link .book-nav__expand { transform: rotate(180deg); }
/* ⚠️ SURVOLS RÉSERVÉS À LA SOURIS (2026-08-06). Sur iOS, un élément qui porte une règle
   :hover reçoit d'abord un « faux survol » au 1er appui — WebKit peut alors AVALER le clic
   et il faut taper une 2e fois. Le sommaire latéral étant tactile sur téléphone, tous ses
   survols passent sous @media (hover: hover). */
@media (hover: hover) {
  .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__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;   /* retrait des sous-pages — la place manquante est prise à DROITE (cf. .book-nav__list) */
  background: rgba(51, 116, 206, 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;
}
@media (hover: hover) {   /* survol souris uniquement — cf. note « faux survol iOS » plus haut */
  .book-nav__sublink:hover { color: var(--mondrian-blue); background: rgba(250, 201, 1, 0.18); }
}
/* Pas de délai de double-tap : le navigateur active le lien au 1er appui. */
.book-nav__link, .book-nav__sublink, .book-nav__expand,
.book-nav-show, .book-nav__toggle { touch-action: manipulation; }
.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; }
@media (hover: hover) {
  .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; }
/* Drawer mobile : le ◀ reste au MÊME endroit que le ▶ d'ouverture (bord gauche,
   sous le bandeau rouge) — retour client 2026-07-07, ne pas le déplacer en haut. */
/* Bouton statique : masqué tant que le sommaire est ouvert (avant que menu.js gère [hidden]) */
body:not(.book-nav-collapsed) .book-nav-show { display: none; }
@media (hover: hover) {
  .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; }
  /* la transition n'existe qu'APRÈS le 1er rendu (menu.js pose .nav-anim) : sinon,
     au chargement, le contenu « glissait » parfois depuis la gauche (client 2026-07-12) */
  body.has-book-nav.nav-anim { 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; }
}

/* ============================================================
   MOBILE (≤767px) — BOUTON ▶ SOMMAIRE REMONTÉ SOUS LE HEADER
   Client 2026-08-06 : « mets le bouton pour ouvrir le menu de gauche plus haut,
   comme ça on peut réduire les espaces ».
   Il était à 200px du haut → chapter.css devait pousser les planches de 130px pour
   qu'elles ne passent pas dessous, d'où « le graphique s'affiche trop bas » et des
   boutons Précédent/Suivant hors écran. Collé au coin haut-gauche de la carte, il ne
   mange plus que ~36px (cf. chapter.css, même point de rupture).
   `body.menu-collapsed` est repris ici : sur mobile le menu ne se replie pas, mais
   la classe peut être héritée du localStorage posé sur desktop (règle 0,2,0 à battre).
   DESKTOP INCHANGÉ. ============================================================ */
@media (max-width: 767px) {
  .book-nav-show,
  body.menu-collapsed .book-nav-show {
    top: calc(var(--menu-height) + var(--menu-line) + 4px);
  }
}

/* ============================================================
   MOBILE (≤1099px) — TIROIR DU SOMMAIRE COMPACTÉ (2026-08-06)
   Le tiroir gaspillait 136px de bandeau rouge + 74px de gouttières, et son bouton de
   téléchargement était COLLÉ EN BAS par-dessus la liste : les derniers chapitres
   (Références prestigieuses, L'âge de raison, Services de maintenance, ISOAR créateur)
   passaient dessous — on croyait taper une entrée, on lançait le téléchargement.
   Deux correctifs : on compacte (~80px récupérés) ET **c'est le tiroir ENTIER qui
   défile**, le bouton de téléchargement redevenant un simple élément de fin de liste.
   Plus rien ne peut se cacher derrière lui, quel que soit le nombre de chapitres dépliés.
   DESKTOP (rail ≥1100px) INCHANGÉ. ============================================================ */
@media (max-width: 1099px) {
  .book-nav__head { padding: 8px 14px 10px; }
  .book-nav__brand-logo { padding: 6px 10px; }
  .book-nav__since { font-size: 0.8rem; margin-top: 6px; }
  /* ◀ recalé dans la bande blanche sous le bandeau rouge raccourci (bandeau = 116px) :
     à 100px il mordait sur « Depuis 1992 ». `sticky` et non `absolute`/`fixed` : le tiroir
     défile maintenant en entier et le bouton de fermeture partait avec la liste. (`fixed`
     ne sert à rien ici : `.book-nav` porte un `transform`, il devient bloc conteneur et le
     `fixed` défile comme un `absolute`.) La marge basse négative annule sa hauteur pour
     qu'il ne pousse pas le bandeau rouge vers le bas. */
  .book-nav__toggle {
    position: sticky;
    top: 122px;
    align-self: flex-start;
    margin: 0 0 -32px 12px;
    z-index: 3;
    /* ⚠️ INDISPENSABLE : en passant de `absolute` à `sticky` le bouton est redevenu un
       élément de flux du tiroir (flex colonne). Avec le `flex-shrink: 1` par défaut et une
       liste plus haute que l'écran, il se faisait ÉCRASER — mesuré à 19px au lieu de 32
       (retour Michal 2026-08-06). Ne pas retirer. */
    flex: 0 0 auto;
  }
  .book-nav__list { padding: 42px 0 6px; }
  .book-nav__download { padding: 9px 14px; font-size: 0.72rem; }
  .book-nav__download-ic { font-size: 1rem; }
  /* Le défilement passe de la LISTE au TIROIR : la liste reprend sa hauteur naturelle et
     le bouton de téléchargement la suit au lieu de la recouvrir. `overscroll-behavior`
     empêche le geste de se propager à la page dessous. */
  .book-nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .book-nav__list { flex: 0 0 auto; overflow: visible; }
  .book-nav__head { position: sticky; top: 0; z-index: 2; }   /* le bandeau rouge reste en tête */
}

/* === 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;
}
.home-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.home-footer__legal a:hover { color: var(--mondrian-yellow); }
/* Wrapper <picture> WebP : ne crée aucune boîte → l'<img> garde exactement sa mise en page. */
.img-pic { display: contents; }
@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);
  }
}

/* ============================================================
   ALIGNEMENT DU MENU SUR LES COLONNES DE LA PAGE — règle globale.
   (Déployé depuis presentation-generale vers TOUTES les pages.)

   • Le menu du haut est FIGÉ et identique partout (ne bouge jamais
     quand on ouvre/ferme le panneau gauche).
   • Sur les pages du LIVRE (panneau gauche + fond blanc : pages
     .chapter-content--fit ou --text), le fond blanc se DOCKE sous le
     menu quand le panneau est OUVERT, et se RECENTRE quand il est FERMÉ.

   Colonnes : Logo = panneau (270) ; ERP = gouttière gauche (184) ;
   Références→Actualités = fond blanc (÷4) ; Lexique = gouttière droite.
   ============================================================ */
@media (min-width: 1100px) {
  /* --- MENU FIGÉ (toutes les pages) --- */
  body { --card: min(1800px, calc(100vw - 630px)); }   /* plafond 1800 (1500 rendait LEXIQUE immense à 2560 : la carte docke à gauche, le surplus partait dans la gouttière droite) */
  .menu { gap: 0; padding-right: 40px; background: var(--page-bg, #537780); }   /* gap 0 → bordures Mondrian exactes ; fond teal pour la gouttière droite */
  .menu > .menu__item { border-right: var(--menu-line) solid var(--mondrian-black); }
  .menu > .menu__item--lexique { border-right: none; }   /* pas de double-bordure avant le ▲ */
  .menu__item--logo { flex: 0 0 270px; }                 /* = bord du panneau gauche */
  .menu__item--erp  { flex: 0 0 184px; }                 /* RÉFÉRENCES commence au blanc (270+184 = 454) — l'ACCUEIL est calé sur cette grille (maquette client) : NE PAS élargir ERP (casse l'alignement de la home, cf. retour client 2026-07-15). */
  .menu__item--references,
  .menu__item--services,
  .menu__item--contact,
  .menu__item--actualites { flex: 0 0 calc(var(--card) / 4); }   /* = fond blanc ÷4 */
  .menu__item--lexique { flex: 1 1 0; max-width: none; }        /* remplit le reste de la barre → la grille du menu se FERME à toute largeur (audit F1) */
  .menu__item--erp, .menu__item--lexique { font-size: clamp(0.98rem, 0.58vw + 0.35rem, 1.2rem); letter-spacing: 0.11em; padding: 0 8px; }   /* échelle fluide sur grand écran ; plafond 1.2rem : « ERP SQUALP » doit tenir dans ses 184px fixes */
  .menu-show { width: 40px; }

  /* --- CONTENU des pages du LIVRE : aligné si panneau OUVERT, recentré si FERMÉ --- */
  body.has-book-nav:not(.book-nav-collapsed) { padding-left: 270px !important; }   /* docké même < 1380px */
  body.has-book-nav:not(.book-nav-collapsed) .book-nav-backdrop { display: none !important; }
  /* carte décalée de 4px (sa bordure gauche recouvre le séparateur ERP/Références)
     et élargie de 4px (le bord droit reste aligné sur Actualités). */
  body.has-book-nav:not(.book-nav-collapsed) .chapter-content--fit,
  body.has-book-nav:not(.book-nav-collapsed) .chapter-content--text {
    width: calc(var(--card) + 4px); max-width: calc(var(--card) + 4px) !important;
    margin-left: 180px; margin-right: auto;
  }
}



/* === Bulle de définition du lexique (survol/tap des sigles .lex-link — Lot 70) === */
.lex-tip {
  position: fixed; z-index: 420; box-sizing: border-box;
  background: var(--mondrian-white); border: 3px solid var(--mondrian-black);
  box-shadow: 6px 6px 0 var(--mondrian-black); padding: 12px 15px 13px;
  font-family: Verdana, Geneva, sans-serif;
}
.lex-tip__sigle { font-weight: 900; color: var(--mondrian-blue); font-size: 1.02rem; margin-right: 8px; }
.lex-tip__full { font-weight: 700; font-size: 0.76rem; color: var(--mondrian-grey, #5B5B54); text-transform: uppercase; letter-spacing: 0.04em; }
.lex-tip__def { display: block; margin-top: 8px; font-size: 0.86rem; line-height: 1.52; color: var(--mondrian-black); font-weight: 400; }
.lex-tip__more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 0.76rem; color: var(--mondrian-blue); text-decoration: underline; text-underline-offset: 3px; }


/* === Aperçu des chapitres au survol du sommaire latéral (Lot 70) === */
.nav-peek {
  position: fixed; z-index: 300; width: 270px; box-sizing: border-box;
  background: var(--mondrian-white); border: 3px solid var(--mondrian-black);
  box-shadow: 6px 6px 0 var(--mondrian-black); padding: 12px 14px 13px;
  font-family: Verdana, Geneva, sans-serif; pointer-events: none;
}
.nav-peek__t { display: block; font-weight: 900; font-size: 0.85rem; color: var(--mondrian-blue);
  text-transform: uppercase; letter-spacing: 0.04em; }
/* .nav-peek__t (titre) n'est plus rendu (client 2026-07-29 : titre non répété). */
.nav-peek__d { display: block; font-size: 0.86rem; line-height: 1.5; color: var(--mondrian-black); }
/* Initiales de l'acronyme mises en évidence (bleu + gras), comme les strips du site. */
.nav-peek__d b { color: var(--mondrian-blue); font-weight: 900; }

/* === ASTUCE PREMIÈRE VISITE — « le sommaire s'ouvre ici » (client 2026-08-06) ===
   Une seule fois par navigateur, quelques secondes, une bulle pointe le bouton ▶ qui
   ouvre le sommaire latéral. Sans elle, un visiteur qui arrive sur une planche ne
   devine pas que le petit onglet jaune du bord gauche est la navigation du livre.
   Style De Stijl : cadre noir, ombre dure, aucune couleur hors palette. */
.nav-hint {
  position: fixed;
  z-index: 430;
  box-sizing: border-box;
  width: min(268px, calc(100vw - 74px));
  background: var(--mondrian-white);
  border: 3px solid var(--mondrian-black);
  box-shadow: 6px 6px 0 var(--mondrian-black);
  padding: 12px 14px 13px;
  font-family: Verdana, Geneva, sans-serif;
  color: var(--mondrian-black);
  cursor: pointer;
}
.nav-hint[hidden] { display: none; }
/* pointe triangulaire vers le bouton, à gauche */
.nav-hint::before {
  content: "";
  position: absolute;
  left: -11px;
  top: var(--hint-arrow, 20px);
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 11px solid var(--mondrian-black);
}
.nav-hint__t {
  display: block;
  font-weight: 900;
  font-size: 0.86rem;
  line-height: 1.25;
  color: var(--mondrian-blue);
  margin-bottom: 5px;
}
.nav-hint__d { display: block; font-size: 0.78rem; line-height: 1.42; }
.nav-hint__x {
  display: block; margin-top: 9px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(26,26,26,0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-hint { animation: hint-in 0.28s ease-out; }
  @keyframes hint-in { from { opacity: 0; transform: translateX(-10px); } }
  /* le bouton lui-même clignote doucement tant que la bulle est là */
  body.nav-hint-on .book-nav-show { animation: hint-pulse 1.15s ease-in-out 3; }
  @keyframes hint-pulse {
    50% { background: var(--mondrian-red); color: #fff; }
  }
}