/* ============================================================
   ALINA SZAPOCZNIKOW — Estate website wireframe
   Monospaced, minimalist, low-fi structural wireframe
   ============================================================ */

/* ---------- FR-9 · brand type pairing (PRD §9.4) ----------
   Mercure          = titles + running body text  (--display / --body)
   Riforma Mono LL  = all UI + secondary/numeric   (--ui / --mono)
   IBM Plex Mono placeholder retired. Fonts served locally from assets/fonts/. */

@font-face {
  font-family: "Mercure";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Mercure-Regular.woff2") format("woff2"),
       url("assets/fonts/Mercure-Regular.woff") format("woff");
}
/* No real Mercure italic web cut is available yet. We deliberately do NOT declare an
   italic @font-face, so `font-style: italic` (font-synthesis: style) obliques the
   Regular face — used on original work titles. Replace with the true italic cut when
   Loevenbruck/Balland deliver it (add an @font-face with font-style: italic). */

@font-face {
  font-family: "Riforma Mono LL";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* woff2 = subset (progressive enhancement) first; woff = full Latin charset
     (é, œ, ×) as the fallback for engines without woff2 support. */
  src: url("assets/fonts/RiformaMonoLL-Regular.woff2") format("woff2"),
       url("assets/fonts/RiformaMonoLL-Regular.woff") format("woff");
}

:root {
  --bg:        #faf9f7;   /* warm off-white, archival paper */
  --ink:       #1a1a1a;   /* near-black */
  --mut:       #8a8780;   /* muted grey text */
  --rule:      #d9d6cf;   /* hairline dividers */
  --ph:        #efece6;   /* placeholder fill */
  --ph-line:   #d2cec5;   /* placeholder hatch line */
  --ph-ink:    #9a958b;   /* placeholder label */
  --accent:    #4f5b8c;   /* wireframe annotation / interactive hint */
  --accent-bg: #eef0f6;
  --hover:     #3a3a3a;
  --wash:      color-mix(in srgb, var(--ink) 4%, var(--bg));  /* rollover wash, shared by all clickable lists */

  --measure:   66ch;
  --side:      clamp(24px, 4vw, 56px);  /* full-bleed side margin, shared with the facing-streams home */
  --gap:       clamp(72px, 11vh, 150px);

  /* FLUID TYPE (2026-07-29). --fs-display was already viewport-relative; body + meta were
     hard-fixed at 0.95/0.78rem, tuned for a ~1440px laptop. Once the lists went full-bleed
     (10px edges) that read genuinely small on a large display: 15.2px text stretched across
     a 2560px screen, ~35 rows in view at once.
     v79 tried to protect the laptop by pinning the floor at 1440px — wrong call: on a
     Retina iMac the CSS viewport is often ≤1440, so the clamp sat on its minimum and the
     site still read as "the MacBook version" (Seba, twice). The floor is now RAISED and
     growth starts earlier, so every width gets a lift:
        1024px → 16.0px   1440px → 16.9px   1920px → 18.0px   ≥2200px → 18.56px
     Three knobs: the min (baseline everywhere), the vw term (how fast it grows), the max
     (ceiling on huge displays). --fs-display was already fluid and is untouched. */
  --fs-display: clamp(2.2rem, 5.5vw, 4.4rem);
  --fs-body:    clamp(1.00rem, 0.86rem + 0.22vw, 1.16rem);
  --fs-meta:    clamp(0.82rem, 0.72rem + 0.14vw, 0.92rem);

  --dens: 1;  /* density multiplier, driven by tweak */

  /* FR-9 type tokens (PRD §9.4) */
  --display: "Mercure", "Times New Roman", Georgia, serif;              /* titles */
  --body:    "Mercure", Georgia, serif;                                 /* running text */
  --ui:      "Riforma Mono LL", ui-monospace, "SF Mono", Menlo, monospace; /* UI + secondary/numeric */
  --mono:    var(--ui);   /* legacy alias — existing code references --mono heavily */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);   /* running body text = Mercure */
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }

img { max-width: 100%; display: block; }

/* ---------- layout primitives ---------- */
/* full-bleed: every page module hangs from the same --side edge
   (matches the facing-streams home); inner max-widths cap line length */
.wrap   { margin: 0; padding: 0 var(--side); }
.section{ padding-block: calc(var(--gap) * var(--dens)); }
section[id], [id].section { scroll-margin-top: 64px; }
.measure{ max-width: var(--measure); }

/* ---------- section label ---------- */
.label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 4vw, 52px);
}
.label::before { content: "──"; color: var(--mut); letter-spacing: 0; }
.label::after  {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ---------- type ---------- */
.display {
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
}
/* secondary/meta style: Riforma Mono, caps, letter-spaced — never italic */
.meta { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; line-height: 1.55; }
.body { font-family: var(--body); font-size: var(--fs-body); line-height: 1.7; text-wrap: pretty; }
/* Biographie heading (client, 2026-09-05) */
.bio-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem);
             line-height: 1.15; margin: 0 0 clamp(18px,2.4vw,28px); text-wrap: balance; }
/* Hyphenation on every long reading text (client, 2026-09-05: "césures"). The browser hyphenates
   per <html lang>, which the FR/EN toggle already updates, so each language breaks by its own
   rules. limit-chars 7 3 3 = only words of 7+ letters, at least 3 letters on each side. */
.body, .xdesc, .hz-dbody, .lz-yr p {
  -webkit-hyphens: auto; hyphens: auto;
  -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 7 3 3;
}
.dim  { color: var(--mut); }

/* ---------- image placeholder ---------- */
.ph {
  position: relative;
  background-color: var(--ph);
  border: 1px solid var(--ph-line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* corner crop marks to read as "image placeholder" */
.ph::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--ph-line);
  pointer-events: none;
}
.ph > .ph-label {
  position: relative;
  background: var(--ph);
  color: var(--ph-ink);
  font-family: var(--ui);
  font-size: var(--fs-meta);
  letter-spacing: .02em;
  padding: 6px 12px;
  max-width: 82%;
  line-height: 1.4;
}
/* hatch variant (opt-in via tweak) */
body[data-ph="hatch"] .ph {
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 13px,
      var(--ph-line) 13px, var(--ph-line) 14px);
}
.cap { font-family: var(--ui); margin-top: 10px; }

/* ---------- annotation note ---------- */
.note {
  font-family: var(--ui);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  border: 1px dashed var(--accent);
  border-radius: 2px;
  padding: 2px 7px;
  display: inline-block;
  background: var(--accent-bg);
}
.link-arrow {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
}
.link-arrow:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* annotations hidden via tweak */
body.no-notes .note { display: none !important; }

/* ---------- hairline rule ---------- */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }


/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(16px, 3vw, 40px);
  /* The brand must sit on the SAME left axis as the content. Everything below the nav is
     full-bleed at 10px (.xsheet, the .hz-down section bars, the list rows), but the topbar
     still used var(--side) — measured 56px vs 10px, so the site title looked indented by
     46px against every heading under it (Seba). */
  padding: 14px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
}
/* The site title in the display face (meeting 1 Oct, v104): the home's cover name travels into
   it as you scroll, so it must be the same face and tracking as the cover's name, whole
   ("The Estate of" + the name, each in its own span: the travelling copy measures both). */
.topbar .crumb { font-family: var(--display); letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
  font-size: clamp(0.86rem, 0.74rem + 0.3vw, 1.1rem); line-height: 1.2; color: var(--ink); }
.topbar .lang  { flex-shrink: 0; margin-left: auto; }

/* ---------- top nav links ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 1 auto;
  justify-content: flex-start;   /* in the flow, on the left; the title takes the centre (v104) */
  min-width: 0;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  position: relative;
  white-space: nowrap;
  letter-spacing: .02em;
  font-family: var(--ui);
  font-size: var(--fs-meta);
  color: var(--mut);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

@media (max-width: 1280px) { .topnav { gap: 12px; } }
/* ONE BAR ON EVERY PAGE (v104, as the design proposal Seba and Alexandra approved): the menu on
   the left, FR/EN on the right, the whole site title dead-centre of the SCREEN — absolute, so the
   menu's and FR/EN's different widths cannot push it off-centre. Only where there is genuinely
   room for it between them; narrower, it sits first in the flow, on the left, and nothing can
   collide. Measured 02.10 (centred title vs the mono menu, ≥24px clear on both sides): French
   fits from 1750px (at 1512 the centred title would overlap "Expositions" by 66px), English
   from 1550px — 1750 serves both. */
@media (min-width: 1750px) {
  .topbar .crumb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 860px) {
  .topnav { justify-content: flex-start; }
}
/* the whole title + FR/EN + menu button on the smallest phones: at 320px they overran the screen
   by 8px with the 16px gaps (measured 02.10); 10px gaps leave 4px to spare */
@media (max-width: 340px) { .topbar { gap: 10px; } }

/* ---------- lang toggle ---------- */
.lang { display: inline-flex; gap: 6px; letter-spacing: 0.05em; font-family: var(--ui); font-size: var(--fs-meta); }
.lang button {
  font: inherit; font-size: var(--fs-meta); background: none; border: 0; cursor: pointer;
  color: var(--mut); padding: 0; letter-spacing: 0.05em;
}
.lang button.on { color: var(--ink); font-weight: 600; }
.lang .sep { color: var(--rule); }

/* ---------- FAB + index panel ---------- */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: 0; cursor: pointer;
  font-family: var(--ui); font-size: 0.62rem; line-height: 1.1;
  letter-spacing: .02em;
  display: none;   /* Index FAB removed for good — desktop + mobile (Seba) */
  align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: transform .2s ease;
}
.fab:hover { transform: scale(1.06); }

/* ---------- mobile hamburger + nav overlay ---------- */
.nav-toggle { display: none; width: 28px; height: 20px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { position: absolute; left: 2px; right: 2px; height: 1.5px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span:nth-child(1) { top: 3px; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 15px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .topbar .crumb { margin-right: auto; }              /* push lang + hamburger to the right */
  .topbar .lang { margin-left: 0; }                   /* one auto margin only, or FR/EN floats mid-bar */
  .topbar .topnav {
    display: none;
    position: fixed; top: var(--topbar-h, 52px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: 4px var(--side) 12px; z-index: 39;
    max-height: calc(100dvh - var(--topbar-h, 52px)); overflow-y: auto;
    box-shadow: 0 14px 26px rgba(0,0,0,0.10);
  }
  body.nav-open .topbar .topnav { display: flex; }
  .topbar .topnav a { padding: 14px 2px; border-bottom: 1px solid var(--rule); font-size: 0.98rem; letter-spacing: 0.02em; }
  .topbar .topnav a:last-child { border-bottom: 0; }
  .topbar > .xtools { margin-left: 0; }               /* one auto margin only (the title's) */
}
/* The same, wherever the bar MEASURES too full for the menu inline (tweaks-apply.js fit(): a page
   tool sits next to FR/EN on Expositions and Actualités, v107) — wider than 1024px included. */
.topbar.compact .nav-toggle { display: block; }
.topbar.compact .crumb { margin-right: auto; }
.topbar.compact > .xtools, .topbar.compact .lang { margin-left: 0; }
.topbar.compact .topnav {
  display: none;
  position: fixed; top: var(--topbar-h, 52px); left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  padding: 4px var(--side) 12px; z-index: 39;
  max-height: calc(100dvh - var(--topbar-h, 52px)); overflow-y: auto;
  box-shadow: 0 14px 26px rgba(0,0,0,0.10);
}
body.nav-open .topbar.compact .topnav { display: flex; }
.topbar.compact .topnav a { padding: 14px 2px; border-bottom: 1px solid var(--rule); font-size: 0.98rem; letter-spacing: 0.02em; }
.topbar.compact .topnav a:last-child { border-bottom: 0; }

.index-panel {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 70;
  width: min(340px, 86vw);
  background: color-mix(in srgb, var(--bg) 96%, #fff);
  border-left: 1px solid var(--rule);
  box-shadow: -8px 0 40px rgba(0,0,0,0.08);
  padding: 28px 26px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
}
.index-panel.open { transform: translateX(0); }
.index-backdrop {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(26,26,26,0.12);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.index-backdrop.open { opacity: 1; pointer-events: auto; }
.index-panel .ip-title { font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; font-weight: 600; }
.index-panel .ip-close { position: absolute; top: 22px; right: 22px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1rem; color: var(--mut); }
.ip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-family: var(--ui); }
.ip-list a {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-meta); letter-spacing: 0.04em;
}
.ip-list a .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.ip-list a .px { color: var(--mut); }
.ip-list a.active { color: var(--ink); font-weight: 600; }
.ip-list a.active .num { text-decoration: underline; }
.ip-sub { display: flex; flex-direction: column; gap: 9px; }
.ip-sub a { font-size: var(--fs-meta); }

/* ---------- exhibition cards ---------- */
.exh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.exh-card { display: flex; flex-direction: column; gap: 12px; }
.exh-card .ph { aspect-ratio: 16 / 10; }
.exh-card .exh-title { font-size: 1rem; font-weight: 400; line-height: 1.3; }
.exh-card .exh-venue,
.exh-card .exh-dates { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; }

/* ---------- data tables (formation / collections / colophon) ---------- */
.rows { display: flex; flex-direction: column; /* full width: tables run edge to edge of the wrap */ }
.row {
  display: grid;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  align-items: baseline;
}
.row:first-child { border-top: 1px solid var(--rule); }
.row.c3 { grid-template-columns: 5.5rem minmax(0, 1.2fr) minmax(0, 1fr); }
.row.exh-row { grid-template-columns: max-content minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 24px; }
.row.exh-row .yr { min-width: 3.4em; }
.row.exh-row.hide { display: none; }  /* type filter hides list rows exactly like .exh-card.hide hides cards */
.row.coll { grid-template-columns: 1fr auto 3rem; }
.row .yr  { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; }
.row .loc { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; text-align: right; }
.row .cc  { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); text-align: right; letter-spacing: .02em; }

/* ---------- publication entry ---------- */
.pub-entry { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: start; }
.pub-entry + .pub-entry { margin-top: clamp(34px,5vw,60px); padding-top: clamp(34px,5vw,60px); border-top: 1px solid var(--rule); }
.pub-entry .ph { aspect-ratio: 22 / 28; }
/* real cover image from the CMS API (replaces the old .ph placeholder box) */
.pub-entry > img { display: block; width: 100%; height: auto; background: var(--ph); }
/* the API ships a ready-made bibliographic caption as HTML */
.pub-desc { font-family: var(--ui); font-size: var(--fs-meta); line-height: 1.6; color: var(--mut); margin-top: 12px; }
.pub-desc p { margin: 10px 0 0; }
.pub-desc .bold, .pub-desc b, .pub-desc strong { color: var(--ink); font-weight: 400; }
.pub-meta { display: flex; flex-direction: column; gap: 6px; }
.pub-meta .t { font-size: 1.15rem; font-weight: 400; }
.pub-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 12px 0 0; font-size: var(--fs-meta); font-family: var(--ui); }
.pub-meta dt { color: var(--mut); }
.pub-meta dd { margin: 0; }

/* ---------- footer ---------- */
.foot { padding-block: clamp(64px, 8vh, 110px) clamp(80px, 10vh, 140px); }
.foot-block { margin-bottom: 30px; }
.foot-block .ft-label { font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); margin-bottom: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .exh-grid { grid-template-columns: 1fr; }
  .pub-entry { grid-template-columns: 110px 1fr; gap: 20px; }
  .row.c3 { grid-template-columns: 4rem 1fr; }
  .row.c3 .loc { grid-column: 2; text-align: left; }
  .row.coll { grid-template-columns: 1fr auto; }
  .row.coll .cc { display: none; }
}

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ============ SUB-PAGE HEADERS (.subhead — used by actualites) + CHRONOLOGIE ============ */
.subhead { padding-block: clamp(40px,6vw,72px) clamp(8px,2vw,20px); }
.subhead .display { font-size: clamp(1.5rem,3.4vw,2.4rem); letter-spacing: .02em; line-height: 1.1; }

.year-nav {
  position: sticky; top: 53px; z-index: 30;
  font-family: var(--ui);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-block: 1px solid var(--rule);
  margin-bottom: 0;
}
.year-nav .ynav-inner {
  display: flex; gap: 0; overflow-x: auto; padding: 12px clamp(20px,5vw,64px);
  scrollbar-width: thin;
}
.year-nav a {
  flex: 0 0 auto; font-size: var(--fs-meta); color: var(--mut);
  padding: 4px 10px; letter-spacing: 0.04em; white-space: nowrap;
  border-right: 1px solid var(--rule); cursor: pointer;
}
.year-nav a:first-child { padding-left: 0; }
.year-nav a:last-child { border-right: 0; }
.year-nav a.on { color: var(--ink); font-weight: 600; }
.year-nav .ynav-dim {
  flex: 0 0 auto; font-size: var(--fs-meta); color: var(--accent);
  padding: 4px 10px; letter-spacing: 0.04em; white-space: nowrap;
  border-right: 1px solid var(--rule); opacity: 0.5;
}

.year-head {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(1.4rem,3vw,2rem); font-weight: 300; letter-spacing: 0.04em;
  margin: 0 0 clamp(22px,3vw,36px);
}
.year-head::before { content: "──"; color: var(--mut); font-size: 1rem; }
.year-head .y-sub { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); letter-spacing: .02em; }

.img-1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.img-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.img-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.img-row { margin-bottom: clamp(22px,3vw,34px); }
.img-row .ph { aspect-ratio: 4/3; }
.img-wide .ph { aspect-ratio: 16/8; }

.bquote {
  border-left: 2px solid var(--ink);
  margin: clamp(24px,3.5vw,40px) 0;
  padding: 4px 0 4px 24px;
  max-width: 60ch;
  margin-left: clamp(0px, 4vw, 56px);
}
.bquote p { font-family: var(--body); font-style: italic; font-size: 1.02rem; line-height: 1.6; margin: 0; }
.bquote cite { display: block; margin-top: 12px; font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); font-style: normal; }

.exh-list { margin-top: clamp(22px,3vw,32px); }
.exh-list .el-label { font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); margin-bottom: 10px; }
.exh-list .el-item { font-family: var(--ui); font-size: var(--fs-meta); padding: 6px 0; border-top: 1px solid var(--rule); }

@media (max-width: 720px) {
  .img-2, .img-3 { grid-template-columns: 1fr; }
  .bquote { margin-left: 0; }
}

/* ============ SUB-PAGE: actualites ============ */
.filter-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: clamp(36px,5vw,60px); font-family: var(--ui); }
.filter-row button {
  font: inherit; font-size: var(--fs-meta); background: none; border: 0; cursor: pointer;
  color: var(--mut); padding: 0 0 4px; letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}
.filter-row button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.exh-card.hide { display: none; }
.time-group { margin-bottom: clamp(48px,7vw,90px); }
/* past rows share the .exh-row template (year | title | venue) */

/* ============================================================
   V2 — RELATIONAL DETAIL PANEL (fiche) + relation chips
   Split-screen: desktop shifts the main column; < 900px overlay.
   ============================================================ */
:root {
  --fiche-focus: clamp(360px, 42vw, 560px);   /* right focus column */
  --fiche-ctx:   clamp(280px, 26vw, 400px);   /* left context column (appears on pivot) */
  /* FR-9 · single swap-point for the Ludovic Balland custom display cut (not yet
     delivered). When it arrives, prepend it here, e.g.
       --display: "Balland", "Mercure", "Times New Roman", Georgia, serif;
     Until then --display resolves to Mercure (defined in :root at the top). */
}

/* the relational surface: docked right; grows a left context column on pivot */
.fiche-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: var(--fiche-focus); max-width: 100vw;
  background: color-mix(in srgb, var(--bg) 96%, #fff);
  border-left: 1px solid var(--rule);
  box-shadow: -10px 0 48px rgba(0,0,0,0.10);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
.fiche-panel.open { transform: none; }
.fiche-panel.has-context { width: calc(var(--fiche-ctx) + var(--fiche-focus)); }

.fiche-backdrop {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(26,26,26,0.14);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.fiche-backdrop.open { opacity: 1; }

/* desktop: main column shifts left, no backdrop needed */
@media (min-width: 900px) {
  body { transition: margin-right .32s cubic-bezier(.4,0,.2,1); }
  body.has-fiche { margin-right: var(--fiche-focus); }
  body.has-fiche.has-context { margin-right: calc(var(--fiche-ctx) + var(--fiche-focus)); }
  .fiche-backdrop { display: none; }
}
/* mobile/tablet: true full-screen overlay; pivots become push/back */
@media (max-width: 899px) {
  .fiche-panel, .fiche-panel.has-context { width: 100vw; }
  .fiche-col.context { display: none !important; }
  .fiche-backdrop.open { pointer-events: auto; }
}

/* [audit P2-3] reduced motion: no panel slide / width tween, no body shift tween, no smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fiche-panel { transition: none; }
  body { transition: none; }
}

/* trail / breadcrumb bar across the top of the surface */
.fiche-trail {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px clamp(16px,2.4vw,22px);
  font-family: var(--ui);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(6px);
}
.fiche-crumbs { flex: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.fiche-crumbs::-webkit-scrollbar { display: none; }
.fiche-crumb {
  font: inherit; font-size: var(--fs-meta); background: none; border: 0; cursor: pointer;
  color: var(--mut); padding: 0; letter-spacing: 0.02em; white-space: nowrap;
}
.fiche-crumb:hover { color: var(--ink); }
.fiche-crumb.current { color: var(--ink); font-weight: 600; cursor: default; }
.fiche-crumb-sep { color: var(--rule); }
.fiche-close {
  flex: 0 0 auto; font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--mut); padding: 2px 4px; line-height: 1; font-size: 1.05rem;
}
.fiche-close:hover { color: var(--ink); }

/* the two columns */
.fiche-cols { flex: 1; min-height: 0; display: flex; }
.fiche-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.fiche-col.focus { flex: 1 1 auto; }
.fiche-col.context {
  flex: 0 0 var(--fiche-ctx);
  border-right: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  cursor: pointer;
}
.fiche-col.context[hidden] { display: none; }
.fiche-col.context .fiche-body { opacity: 0.6; }
.fiche-col.context:hover .fiche-body { opacity: 0.82; }

.fiche-colbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px clamp(16px,2.4vw,22px);
  font-family: var(--ui);
  border-bottom: 1px solid var(--rule); min-height: 40px;
}
.fiche-kicker { flex: 1; font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); }
.fiche-context-tag { font-size: 0.6rem; letter-spacing: .02em; color: var(--mut); border: 1px solid var(--rule); border-radius: 2px; padding: 1px 6px; }
.fiche-back {
  font: inherit; background: none; border: 0; cursor: pointer; color: var(--mut);
  padding: 2px 6px; line-height: 1; font-size: 1.05rem;
}
.fiche-back:hover { color: var(--ink); }
.fiche-back[hidden] { display: none; }

.fiche-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: clamp(20px,3vw,30px) clamp(16px,2.6vw,28px) clamp(48px,7vh,80px);
  outline: none;
}

.fiche-hero { margin-bottom: 22px; }
.fiche-hero .ph { aspect-ratio: 3 / 4; width: 100%; }
.fiche-hero img { width: 100%; height: auto; }

.fiche-artiste {
  font-family: var(--ui);
  font-size: var(--fs-meta); letter-spacing: .02em;
  color: var(--mut); margin: 0 0 8px;
}
.fiche-title {
  font-weight: 400; font-size: 1.18rem; line-height: 1.35; margin: 0;
  letter-spacing: 0; font-family: var(--display);
}
.fiche-title.doc { font-size: 1.02rem; }
.fiche-title em { font-style: italic; }

.fiche-meta {
  margin: 18px 0 0; padding: 16px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.fiche-meta .fl { font-family: var(--ui); margin: 0 0 4px; font-size: var(--fs-body); line-height: 1.5; }
.fiche-meta .fl em { font-style: normal; }  /* no italic mono: <em> in data fields (e.g. Elle) stays upright here */
.fiche-meta .fl:last-child { margin-bottom: 0; }
.fiche-meta .fiche-title.doc { margin-bottom: 10px; }

.fiche-credit { font-family: var(--ui); font-size: 0.7rem; color: var(--mut); line-height: 1.55; margin: 16px 0 0; }
.fiche-credit-top { margin: 0 0 14px; }

.fiche-text { font-family: var(--body); font-size: var(--fs-body); line-height: 1.7; margin: 16px 0 0; }

.fiche-ext { margin: 16px 0 0; }
.fiche-ext a { color: var(--accent); border-bottom: 1px solid transparent; }
.fiche-ext a:hover { border-bottom-color: var(--accent); }

.fiche-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 18px 0 0; font-size: var(--fs-meta); font-family: var(--ui); }
.fiche-dl dt { color: var(--mut); }
.fiche-dl dd { margin: 0; }

/* relation chip groups (FR-2 / FR-10) */
.fiche-rel { margin-top: clamp(26px,4vw,38px); display: flex; flex-direction: column; gap: 20px; }
.rel-group .rel-label {
  font-family: var(--ui);
  font-size: var(--fs-meta); letter-spacing: .02em;
  color: var(--mut); margin: 0 0 10px;
}
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-family: var(--ui); font-size: var(--fs-meta); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 60%, #fff);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 6px 11px; color: var(--ink); text-align: left; line-height: 1.4;
  transition: border-color .16s, background .16s;
}
.chip:hover { border-color: var(--ink); background: #fff; }
.chip em { font-family: var(--display); font-style: italic; }  /* work titles inside mono chips render Mercure italic, never mono italic */
.rel-stub {
  display: inline-block; font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
  border: 1px dashed var(--ph-line); border-radius: 2px; padding: 6px 11px;
  background: var(--ph);
}

/* clickable objects on the page */
[data-obj] { cursor: pointer; }
.exh-card[data-obj]:hover .exh-title { color: var(--hover); }
/* clickable lists everywhere share the facing-home rollover: wash + slide */
.row[data-obj], .pub-entry[data-obj] {
  cursor: pointer;
  transition: background .12s ease, padding-left .12s ease;
}
.row[data-obj]:hover, .row[data-obj]:focus-visible,
.pub-entry[data-obj]:hover, .pub-entry[data-obj]:focus-visible {
  background: var(--wash);
  padding-left: 12px;
}

/* ---- actualités toolbar + dual sort + status badges (FR-4) ---- */
.exh-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 24px;
  margin-bottom: clamp(30px,4vw,52px);
}
.exh-toolbar .filter-row { margin-bottom: 0; }
.sort-row { display: flex; align-items: center; gap: 14px; font-family: var(--ui); }
.sort-row .sort-label {
  font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut);
}
.sort-row button {
  font: inherit; font-size: var(--fs-meta); background: none; border: 0; cursor: pointer;
  color: var(--mut); padding: 0 0 4px; letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}
.sort-row button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.sort-row .sort-hint { letter-spacing: 0.04em; color: var(--mut); }

.exh-badges { display: flex; gap: 8px; align-items: center; margin: 2px 0 -2px; font-family: var(--ui); }
.pill {
  font-family: var(--ui);
  font-size: 0.66rem; letter-spacing: .02em;
  padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--mut);
}
.pill-encours { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.pill-avenir { color: var(--mut); }
.pill-type.solo { color: var(--ink); border-color: var(--ink); }

.time-group.hide { display: none; }

/* FR-6: demote the Index FAB while a fiche is open (top nav stays the persistent menu) */
body.has-fiche .fab { opacity: 0; pointer-events: none; }

/* FR-9: route every title through the single --display swap-point (staged for the
   Ludovic Balland custom cut; currently resolves to Mercure). */
.display, .year-head, .exh-title, .fiche-title, .cy-head, .subhead .display { font-family: var(--display); }

/* ============================================================
   FR-13 — CHRONOLOGIE correspondence (synced dual-scroll)
   left = year narrative · right = that year's linked objects.
   ============================================================ */
.chrono-corr-hint { margin: 2px 0 8px; max-width: none; font-family: var(--ui); }

.chrono-corr {
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(100vh - 104px); min-height: 440px;
  border-top: 1px solid var(--rule);
}
.chrono-narrative, .chrono-related {
  position: relative;              /* make year blocks' offsetTop pane-relative (FR-13 sync) */
  overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.chrono-narrative::-webkit-scrollbar, .chrono-related::-webkit-scrollbar { width: 8px; }
.chrono-narrative::-webkit-scrollbar-thumb, .chrono-related::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.chrono-narrative { padding: 0 clamp(24px,3vw,52px) 0 var(--side); border-right: 1px solid var(--rule); }
.chrono-narrative .year-section {
  padding-block: clamp(30px,5vh,58px); scroll-margin-top: 0;
  border-bottom: 1px solid var(--rule); max-width: 640px;
}
.chrono-narrative .year-section:last-child { border-bottom: 0; }
.chrono-narrative .measure { max-width: none; }

.chrono-related { padding: 0 var(--side) 0 clamp(24px,3vw,52px); background: color-mix(in srgb, var(--bg) 55%, #fff); }
.cy-block { padding-block: clamp(30px,5vh,58px); border-bottom: 1px solid var(--rule); }
.cy-block:last-child { border-bottom: 0; }
.cy-head {
  font-size: clamp(1.1rem,2vw,1.45rem); font-weight: 300; letter-spacing: 0.03em;
  color: var(--mut); margin: 0 0 20px; font-family: var(--display);
}
.cy-empty {
  font-family: var(--ui);
  font-size: var(--fs-meta); color: var(--mut);
  border: 1px dashed var(--ph-line); background: var(--ph);
  padding: 10px 13px; border-radius: 2px;
}

.rel-cards { display: flex; flex-direction: column; gap: 14px; }
.rel-card {
  display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 3px; align-items: center;
  text-align: left; font: inherit; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 10px;
  transition: border-color .16s, background .16s, padding-left .16s;
}
.rel-card:hover, .rel-card:focus-visible { border-color: var(--ink); background: var(--wash); padding-left: 22px; }
.rc-ph {
  grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3/4;
  background: var(--ph); border: 1px solid var(--ph-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px;
}
.rc-ph-label { font-family: var(--ui); font-size: 0.5rem; color: var(--ph-ink); letter-spacing: .02em; line-height: 1.3; text-align: center; }
.rc-kicker { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); }
.rc-title { grid-column: 2; grid-row: 2; align-self: start; font-size: var(--fs-body); line-height: 1.4; }
.rc-title em { font-style: italic; }

/* inline related objects, shown only when stacked (< 900px) */
.cy-related-inline { display: none; }
.cy-inline-label { font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .02em; color: var(--mut); margin: clamp(22px,3vw,32px) 0 12px; }

@media (max-width: 899px) {
  .chrono-corr { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .chrono-related { display: none; }
  .chrono-narrative { overflow: visible; border-right: 0; padding: 0 var(--side); }
  .chrono-narrative .year-section { max-width: none; }
  .cy-related-inline { display: block; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: clamp(20px,4vw,30px); }
}

/* ============================================================
   Client retours 2026-07-21 (pg 2): "utiliser le moins possible les capitales —
   privilégier les bas de casse, surtout pour les mentions et textes à lire."
   Lowercase the reading / mention / meta / label layer. Page titles
   (.subhead .display), section labels (.label), the top nav and the image
   placeholder chrome deliberately keep their caps. text-transform:none reveals
   the underlying proper-case content (venues, credits, country codes stay correct).
   ============================================================ */
.meta,
.foot-block .ft-label,
.exh-card .exh-dates,
.row .yr, .row .loc, .row .cc,
.year-head .y-sub,
.exh-list .el-label,
.index-panel .ip-title,
.fiche-kicker, .fiche-context-tag,
.rel-label,
.pill,
.rc-kicker, .cy-inline-label {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ============================================================
   Chronologie — data-driven from the estate CMS (2026-07-27):
   real archive-document images in the right column + injected
   bilingual narrative prose in the left column.
   ============================================================ */
.yc-narr p { font-family: var(--body); font-size: var(--fs-body); line-height: 1.7; margin: 0 0 1em; text-wrap: pretty; }
.yc-narr p:last-child { margin-bottom: 0; }
.yc-narr em { font-style: italic; }

.cy-docs { display: flex; flex-direction: column; gap: clamp(18px,3vw,26px); }
.cy-doc { margin: 0; }
.cy-doc img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ph-line); background: var(--ph);
}
.cy-doc figcaption {
  font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
  line-height: 1.5; margin-top: 8px;
}

/* Real installation-view image on exhibition/actualité cards (CMS pull, 2026-07-27) */
.exh-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border: 1px solid var(--ph-line); background: var(--ph); }

/* Biographie: a centred prose column (Seba's draft). Its portrait went at v105: the home's cover
   is that photograph (credit in the colophon). Full width on small screens. */
@media (min-width: 700px) {
  #biographie .measure { max-width: 54ch; margin-left: auto; margin-right: auto; }
}

/* ---- ACTUALITÉS QUICK ACCESS (meeting 1 Oct, v112; built by tweaks-apply.js) ----
   "Actualités (n)" at the bottom right, on the site's 10px edge; its list opens above it, in the
   paper, hairline and shadow of the bar's type menu. Hidden — faded, not removed — over an open
   record or the phone menu; on the home until the bar has docked (on the first screen the bar is
   at the bottom) and while the Actualités stage is in view. --qa-lift: the Chronologie's rail. */
.qa { position: fixed; right: 10px; bottom: calc(14px + var(--qa-lift, 0px)); z-index: 19;   /* under a list's floating preview (20) — it covered the end of the text being read (review 03.10) */
  font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .05em;
  transition: opacity .2s ease, visibility .2s ease; }
.qa[hidden], .qa-panel[hidden] { display: none; }
body.xopen .qa, body.nav-open .qa, body.has-fiche .qa, body:not(.bar-docked) .qa.qa-home, .qa.qa-stage {
  opacity: 0; visibility: hidden; pointer-events: none; }
.qa-btn { font: inherit; letter-spacing: inherit; color: var(--ink); cursor: pointer; padding: 8px 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(26,26,26,.10); }
.qa-btn:hover, .qa-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--mut); }
.qa-panel { position: absolute; right: 0; bottom: calc(100% + 8px); box-sizing: border-box;
  width: min(340px, calc(100vw - 20px));
  max-height: calc(100vh - var(--topbar-h, 53px) - 90px - var(--qa-lift, 0px));
  max-height: calc(100svh - var(--topbar-h, 53px) - 90px - var(--qa-lift, 0px)); overflow-y: auto;
  padding: 12px 16px 14px; background: var(--bg); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(26,26,26,.10); }
.qa-h { margin: 4px 0 8px; color: var(--mut); }
.qa-panel ul { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--rule); }
.qa-panel li { border-bottom: 1px solid var(--rule); }
.qa-panel li a { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; color: var(--ink); text-decoration: none;
  transition: background-color .16s ease; }
.qa-panel li a:hover, .qa-panel li a:focus-visible { background: var(--wash); }
.qa-d, .qa-p { color: var(--mut); letter-spacing: .02em; }
.qa-t { font-family: var(--body); font-size: .95rem; letter-spacing: 0; line-height: 1.3; }
.qa-all { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .qa { transition: none; } }
/* in the Chronologie's year rail (desktop): part of the rail, so no shadow, a little slimmer */
.qa.qa-rail { z-index: 31; }   /* in the Chronologie's rail (30) */
.qa.qa-open { z-index: 60; }   /* its list open: above the page (wins over the two above) */
.qa.qa-rail .qa-btn { padding: 5px 12px; box-shadow: none; background: var(--bg); }
.qa.qa-rail .qa-panel { bottom: calc(100% + 20px); }   /* its list opens above the rail, not over its edge */
@media print { .qa { display: none !important; } }   /* fixed, it was stamped on every printed page */