/* ============================================================
   ALINA SZAPOCZNIKOW — Home "la luce alpina" stage
   One shared image strip travels horizontally, driven by the
   ACTIVE column (Actualités ⇄ Chronologie). Scroll/click hands
   the strip to a column; image-less entries hold the previous
   image, dimmed. Below 900px the two columns collapse to a tab
   bar. The stage is one viewport; Biographie · Collections ·
   Publications · Colophon follow below (a full-width "Biographie
   ↓" bar exits the stage). Engine: home.js. Data: AS_ACTU / AS_CHRONO.
   ============================================================ */
  /* HERO: the stage fills the whole viewport and the nav OVERLAYS the top of the strip
     (transparent, no bar) so the images run edge-to-edge; the nav turns solid on scroll. */
  .hz-stage {
    position: relative; height: 100vh; height: 100dvh;   /* dvh: keep the "Biographie ↓" exit bar above the mobile browser chrome */
    display: flex; flex-direction: column; border-bottom: 1px solid var(--rule);
  }
  /* home only (this file loads on index.html): the nav floats over the images */
  .topbar {
    position: fixed; left: 0; right: 0; top: 0;
    background: transparent; backdrop-filter: none; border-bottom: 0;
    transition: background .25s ease, border-color .25s ease;
  }
  .topbar.solid {   /* restored once the hero is scrolled past, so it stays readable over content */
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
  }
  /* #colophon is now the site footer (no longer a full-viewport nav target) */

  /* ---- shared strip ------------------------------------------------------ */
  .hz-strip {
    flex: 1 1 0; position: relative; min-height: 190px;   /* shares the stage 50/50 with the streams below — balanced, bigger images */
    background: color-mix(in srgb, var(--bg) 55%, #fff);
    border-bottom: 1px solid var(--rule); overflow: hidden;
  }
  .hz-track {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 14px;
    padding: 0; will-change: transform;   /* edge-to-edge (no outer gutter), but a little space between images */
    opacity: 0; pointer-events: none; transition: opacity .4s ease;
  }
  .hz-track.live { opacity: 1; pointer-events: auto; }
  .hz-strip.dim .hz-track.live { opacity: .38; }
  .hz-fig { flex: 0 0 auto; height: 100%; margin: 0; position: relative; cursor: pointer; }
  .hz-fig img {
    display: block; height: 100%; width: auto; max-width: none;
    border: 0; background: var(--ph);
    opacity: .4; transition: opacity .3s ease;
  }
  .hz-fig:hover img { opacity: .78; }          /* rollover feedback (does NOT take the strip) */
  .hz-fig.on img { opacity: 1; }

  .hz-cap, .hz-tag {
    position: absolute; z-index: 3; font-family: var(--ui); font-size: 0.6rem;
    letter-spacing: .05em; background: var(--bg); padding: 2px 7px; color: var(--mut);
  }
  .hz-cap { left: var(--side); bottom: 8px; max-width: 58%; line-height: 1.5; color: var(--ink); }
  .hz-tag { display: none; }   /* driver tag removed — the caption + nav/tab already identify the stream (Seba) */

  /* ---- mobile tabs (switch between the two streams; hidden ≥900px) ------- */
  .hz-tabs { display: none; flex: 0 0 auto; }
  .hz-tabs button {
    flex: 1; background: none; border: 0; cursor: pointer; padding: 12px;
    border-bottom: 2px solid transparent; font-family: var(--ui);
    font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
  }
  .hz-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

  /* ---- two independent streams ------------------------------------------ */
  .hz-cols { flex: 1 1 0; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  /* position:relative → children's offsetTop is pane-relative (the sync depends on it) */
  .hz-col {
    position: relative; overflow-y: auto; min-height: 0;
    /* NO overscroll-behavior: contain — so reaching a column's end chains the wheel to
       the page and continues down into Biographie (Seba). */
    scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
    padding: 0 clamp(16px,1.8vw,24px) 12vh;   /* inner reading gutter; outer edges pulled to 10px below (Seba: full width) */
  }
  /* full width — outer edges to 10px to match the new lists (.xsheet); inner keeps a gutter */
  @media (min-width: 900px) {
    .hz-col[data-col="actualites"] { padding-left: 10px; }
    .hz-col[data-col="chrono"] { padding-right: 10px; }
  }
  .hz-col::-webkit-scrollbar { width: 8px; }
  .hz-col::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
  .hz-col + .hz-col { border-left: 1px solid var(--rule); }

  .hz-head {
    position: sticky; top: 0; z-index: 5; background: var(--bg);
    padding: 16px 0 12px; border-bottom: 1px solid var(--rule);
    display: flex; align-items: baseline; gap: 12px;
    opacity: .45; transition: opacity .25s ease;
  }
  .hz-col.driving .hz-head { opacity: 1; }
  /* same size/weight as the section bars (.hz-down) so every section title matches (Seba) */
  .hz-head h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-body); margin: 0; }
  .hz-head .hz-sub { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); }
  .hz-head a { display: none; }   /* "Voir plus →" removed — the nav/menu links to the full pages (Seba) */

  /* ---- collapsible entry ------------------------------------------------- */
  .hz-item {
    border-bottom: 1px solid var(--rule); padding-left: 12px;
    opacity: .45; transition: opacity .2s ease, background .2s ease, padding-left .2s ease;
  }
  .hz-item:hover { opacity: .85; }             /* rollover restored */
  .hz-item.on { opacity: 1; background: var(--wash, #eef0f6); padding-left: 18px; }
  .hz-item.open { opacity: 1; }
  .hz-row { position: relative; padding: 14px 26px 14px 0; cursor: pointer; transition: padding-left .2s ease; }
  .hz-row:hover { padding-left: 6px; }
  .hz-row::after {                      /* +/– marker: signals it opens in place */
    content: "+"; position: absolute; right: 4px; top: 13px;
    font-family: var(--ui); font-size: 0.8rem; color: var(--mut); transition: color .2s ease;
  }
  .hz-row:hover::after { color: var(--ink); }
  .hz-item.open .hz-row::after { content: "–"; color: var(--ink); }
  .hz-d { font-family: var(--ui); font-size: var(--fs-meta); color: var(--ink); margin-bottom: 6px; }
  /* entry text at the same body size as Biographie / Collections (was 0.98rem) */
  .hz-t {
    font-family: var(--display); font-size: var(--fs-body); line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  /* on the Chronologie side the teaser IS the opening of the narrative shown in the open panel,
     so hide it once expanded to avoid repeating that sentence (Seba). Actualités keep their title. */
  #colChrono .hz-item.open .hz-t { display: none; }
  .hz-m { font-family: var(--ui); font-size: 0.62rem; color: var(--mut); margin-top: 5px; line-height: 1.5; }

  .hz-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
  .hz-item.open .hz-panel { grid-template-rows: 1fr; }
  .hz-panel-in { overflow: hidden; }
  .hz-detail { padding: 2px 26px 22px 0; }

  .hz-dmeta { font-family: var(--ui); font-size: 0.64rem; color: var(--mut); line-height: 1.7; margin-bottom: 14px; }
  .hz-dbody { font-family: var(--body); font-size: var(--fs-body); line-height: 1.7; max-width: 62ch; }
  .hz-dbody p { margin: 0 0 1em; }
  .hz-dbody p:last-child { margin-bottom: 0; }
  .hz-dbody em { font-style: italic; }
  .hz-dnone { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); }
  .hz-dlabel {
    font-family: var(--ui); font-size: var(--fs-meta); letter-spacing: .14em;
    color: var(--mut); margin: 22px 0 4px;
  }
  .hz-doc {
    border-top: 1px solid var(--rule); padding: 11px 0 11px 12px; cursor: pointer;
    font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut); line-height: 1.55;
    opacity: .7; transition: opacity .2s ease, background .2s ease, padding-left .2s ease;
  }
  .hz-doc:hover { opacity: 1; background: var(--wash, #eef0f6); padding-left: 18px; }
  .hz-doc.on { opacity: 1; color: var(--ink); background: var(--wash, #eef0f6); padding-left: 18px; }

  /* ---- full-width label bar ----------------------------------------------
     Used for the stage's "Biographie ↓" exit AND, for visual consistency, as the
     header of every section below the stage (Collections · Publications · Colophon)
     — as <a> anchors, hence text-decoration:none. */
  .hz-down {
    flex: 0 0 auto; width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 13px 10px; cursor: pointer; text-align: left; text-decoration: none;   /* label at the 10px edge to align with every other section title (Seba) */
    border: 0; border-top: 1px solid var(--rule);
    background: color-mix(in srgb, var(--bg) 45%, #fff);
    font-family: var(--display); font-size: 0.95rem; color: var(--ink);
    transition: background .2s ease;
  }
  .hz-down:hover { background: var(--wash, #eef0f6); }
  .hz-down .ar { font-family: var(--ui); font-size: 0.8rem; color: var(--mut); transition: transform .25s ease; }
  .hz-down:hover .ar { transform: translateY(3px); color: var(--ink); }

  @media (max-width: 899px) {
    /* stage stays one viewport; ONE stream shows at a time, chosen by the tabs */
    .hz-strip { flex: 1 1 0; }   /* keep the 50/50 balance on mobile too */
    .hz-head { display: none; }  /* head redundant on mobile — the tab bar labels the stream, the menu links to the full page (Seba) */
    .hz-tabs { display: flex; border-bottom: 1px solid var(--rule); }
    .hz-cols { grid-template-columns: 1fr; }
    .hz-col { display: none; padding-left: 0; padding-right: 0; }   /* full-width entries on mobile only (Seba) */
    .hz-col.show { display: block; }
    .hz-col + .hz-col { border-left: 0; }
    .hz-down { padding: 13px 10px; }
  }
  @media (prefers-reduced-motion: reduce) { .hz-panel { transition: none; } }

  /* ============================================================
     COLLECTIONS PUBLIQUES — Liste + side fiche
     Reuses the expo-index.css kit (.xlist/.xrow/.xitem/.xrev/.xfiche), loaded on
     index.html. This block is the home-only adaptation: the institution rows,
     their hover quick-look (a strip of work thumbnails) and the fiche body (the
     institution's works as a grid). Engine: wireframe.js. Data: window.AS_COLL.
     ============================================================ */
  .xlist.coll .xrow {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 3.2rem 6.5rem 1rem;
  }
  .xlist.coll .xttl { font-family: var(--body); font-size: var(--fs-body); }
  .xlist.coll .xcity,
  .xlist.coll .xcc,
  .xlist.coll .xcount {
    font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
    text-transform: uppercase; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .xlist.coll .xcount { text-align: right; }

  /* Hover quick-look — up to 3 IDENTIFIED works at the shared --xthumb scale (was a
     6-up strip of 92px thumbnails, which is why it read small next to Expositions).
     Artist is deliberately subordinate: it is "Alina Szapocznikow" on all 110 works,
     so the varying information — title, date — carries the line. */
  .xcoll-quick { padding: 8px 4px 18px; }
  .xq-works { display: flex; gap: clamp(18px, 2vw, 30px); align-items: flex-start; flex-wrap: wrap; }
  .xq-work { margin: 0; max-width: 300px; }
  .xq-work img {
    height: var(--xthumb, 240px); width: auto; object-fit: contain;
    background: var(--ph); display: block;
  }
  .xq-work figcaption { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; }
  .xq-artist {
    font-family: var(--ui); font-size: .6rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ph-ink);
  }
  .xq-title { font-family: var(--body); font-size: var(--fs-meta); color: var(--ink); line-height: 1.45; }
  .xq-title em { font-style: italic; }
  .xq-more {
    align-self: center; font-family: var(--ui); font-size: var(--fs-meta);
    letter-spacing: .04em; color: var(--mut);
  }
  .xcoll-open { display: inline-block; margin-top: 12px; font-family: var(--ui); font-size: .6rem;
    letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }

  /* place (ville · pays) sits UNDER the title, not above it — see wireframe.js */
  .xfiche-place {
    font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
    text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 0;
  }
  /* fiche body: the institution's works as a grid (fills #xfiche via wireframe.js) */
  .xcoll-sub { font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
    text-transform: uppercase; letter-spacing: .05em; margin: 20px 0 0; }
  .xcoll-ext { margin: 14px 0 0; font-family: var(--ui); font-size: var(--fs-meta); }
  .xcoll-ext a { color: var(--accent); border-bottom: 1px solid var(--rule); }
  .xcoll-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 30px 26px; margin-top: 30px; align-items: start; }
  .xcoll-work { margin: 0; }
  .xcoll-work img { width: 100%; height: auto; display: block; background: var(--ph); }
  .xcoll-work figcaption { font-family: var(--ui); font-size: .62rem; color: var(--mut);
    line-height: 1.55; margin-top: 8px; }
  .xcoll-work figcaption em { font-style: italic; }

  @media (max-width: 900px) {
    /* Phone: institution name ONLY — same rule as the Expositions list (year + title).
       The city column was taking half the width and wrapping long institution names
       ("Musée national d'art moderne - Centre Pompidou") over three lines; ville, pays
       and the work count are all in the fiche one tap away. */
    .xlist.coll .xrow { grid-template-columns: minmax(0, 1fr); }
    .xlist.coll .xcity, .xlist.coll .xcc, .xlist.coll .xcount { display: none; }
  }

  /* ---- Publications list (same kit; rows title · year · tick; fiche reuses .xfiche-body) ---- */
  .xlist.pub .xrow { grid-template-columns: minmax(0, 3fr) 5rem 1rem; }
  .xlist.pub .xttl { font-family: var(--body); font-size: var(--fs-body); }
  .xlist.pub .xcount {
    font-family: var(--ui); font-size: var(--fs-meta); color: var(--mut);
    text-transform: uppercase; letter-spacing: .04em; text-align: right;
  }
  @media (max-width: 900px) {
    .xlist.pub .xrow { grid-template-columns: minmax(0, 1fr) 4rem; }
  }

  /* ============================================================
     SITE FOOTER — was the §7 Colophon section; now a plain footer at the very
     bottom (removed from the nav + index panel). Reduced height (the old
     #colophon min-height:100vh is gone) + two columns like the reference.
     ============================================================ */
  .site-foot {
    border-top: 1px solid var(--rule);
    padding: clamp(40px, 6vh, 72px) 0 clamp(28px, 4vh, 46px);
  }
  .site-foot .foot-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px;
  }
  @media (max-width: 700px) {
    .site-foot .foot-cols { grid-template-columns: 1fr; gap: 30px; }
  }