:root {
  --bg: #0b0b0b;
  --fg: #f2efe9;
  --fab-bg: rgba(20, 20, 20, .38);
  --fab-fg: #fff;
  --panel-bg: rgba(16, 16, 16, .72);
  --gap: 14px;
  --fab: 42px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 15px/1.5 ui-sans-serif, -apple-system, "Helvetica Neue", "Hiragino Sans", "PingFang SC", sans-serif;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

/* Le scroller vertical est fixé sur la zone visible : sa hauteur suit le viewport
   réel (barres du navigateur, rotation) sans calcul de 100vh. */
#v { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: none; scrollbar-width: none; outline: none; }
#v::-webkit-scrollbar, .h::-webkit-scrollbar { display: none; }
#vtrack { will-change: transform; }

.row { height: 100vh; height: 100cqh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
#v { container-type: size; }

.h { height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: none; scrollbar-width: none;
  touch-action: pan-x pan-y; }
.htrack { display: flex; height: 100%; flex: none; will-change: transform; }

.slide { flex: none; width: 100cqw; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; position: relative; margin: 0; overflow: hidden; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.slide.zoomable img { cursor: zoom-in; }
/* Légende de chaque photo, à droite du bouton (i), lisible sur fond clair comme sombre */
.slide figcaption { position: absolute; z-index: 1; pointer-events: none;
  left: calc(max(var(--gap), env(safe-area-inset-left)) + var(--fab) + 10px);
  bottom: max(var(--gap), env(safe-area-inset-bottom));
  max-width: calc(100% - 2 * (var(--gap) + var(--fab) + 10px));
  display: grid; gap: 1px; color: #fff; font-size: 12px; line-height: 1.35;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.7); }
.slide figcaption b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.slide figcaption span { opacity: .85; }
body.page-open .slide figcaption { visibility: hidden; }

.slide.text { padding: max(72px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right))
  max(72px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
.slide.text p { max-width: 34em; margin: 0; white-space: pre-line;
  font: 400 clamp(15px, 1.1vmax + .5vmin, 21px)/1.6 ui-serif, Georgia, "Hiragino Mincho ProN", "Songti SC", serif;
  color: #e9e4da; }

/* FAB */
.fab { position: fixed; z-index: 20; width: var(--fab); height: var(--fab); border-radius: 50%;
  border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--fab-bg); color: var(--fab-fg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 8px rgba(0,0,0,.25); transition: opacity .3s, transform .2s; }
.fab:active { transform: scale(.94); }
.fab svg, .arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
#fab-menu   { top: max(var(--gap), env(safe-area-inset-top));     left: max(var(--gap), env(safe-area-inset-left)); }
#fab-legend { bottom: max(var(--gap), env(safe-area-inset-bottom)); left: max(var(--gap), env(safe-area-inset-left)); }
#fab-share  { bottom: max(var(--gap), env(safe-area-inset-bottom)); right: max(var(--gap), env(safe-area-inset-right)); }
body.zoomed .fab, body.zoomed .arrow { opacity: 0; pointer-events: none; }

.panel { position: fixed; z-index: 19; background: var(--panel-bg); color: var(--fg);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 14px; padding: 14px 18px; box-shadow: 0 6px 30px rgba(0,0,0,.35); }
.panel[hidden] { display: none !important; }
#panel-menu { top: calc(max(var(--gap), env(safe-area-inset-top)) + var(--fab) + 8px);
  left: max(var(--gap), env(safe-area-inset-left)); display: grid; gap: 10px; min-width: 200px; }
#panel-menu a { color: inherit; text-decoration: none; font-size: 17px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; }
.logo { width: 28px; height: 28px; border-radius: 50%; display: block; }
#panel-menu .brand { font-size: 15px; }

/* Accueil : écran plein, remonte comme un rideau vers la première collection */
#intro { --copper: #b98a5a; position: fixed; inset: 0; z-index: 35; background: #120f0d; color: #f2efe9;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  padding: max(48px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .7s; touch-action: none; }
#intro.gone { transform: translateY(-100%); opacity: .4; pointer-events: none; }
#intro.hidden { display: none; }
.intro-brand { display: grid; justify-items: center; gap: 10px; }
.intro-logo { width: clamp(72px, 14vmin, 104px); height: auto; border-radius: 50%; }
.intro-name { font: 400 clamp(18px, 3.4vmin, 24px)/1 ui-serif, Georgia, serif; letter-spacing: .45em;
  text-transform: uppercase; margin-right: -.45em; margin-top: 8px; }
.intro-role { font: 400 12px/1 ui-serif, Georgia, serif; letter-spacing: .5em; text-transform: uppercase;
  color: var(--copper); margin-right: -.5em; }
.intro-title { font: 400 clamp(48px, 14vw, 92px)/1.02 ui-serif, Georgia, "Hiragino Mincho ProN", serif;
  margin: 0; letter-spacing: -.01em; }
.intro-title em { color: var(--copper); }
/* Pas d'italique en japonais ni en chinois : la couleur suffit */
:lang(ja) .intro-title em, :lang(zh) .intro-title em { font-style: normal; }
.intro-sub { max-width: 30em; margin: 0; color: #d9d2c6;
  font: 400 clamp(17px, 4.4vw, 20px)/1.7 ui-serif, Georgia, serif; }
.intro-go { background: none; border: 0; color: #a9a39a; cursor: pointer; display: grid; justify-items: center; gap: 14px;
  font: 400 12px/1 ui-serif, Georgia, serif; letter-spacing: .4em; text-transform: uppercase; margin-right: -.4em; }
.intro-go span { width: 1px; height: 56px; background: linear-gradient(var(--copper), transparent);
  animation: intro-line 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes intro-line { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { #intro { transition: none; } .intro-go span { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  #intro { padding-top: max(20px, env(safe-area-inset-top)); }
  .intro-logo { width: 56px; } .intro-sub { display: none; } }
.langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.langs button { background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; opacity: .65; }
.langs button.on { opacity: 1; font-weight: 700; }
.intro-go b { font-weight: inherit; }
#panel-legend { bottom: max(var(--gap), env(safe-area-inset-bottom));
  left: calc(max(var(--gap), env(safe-area-inset-left)) + var(--fab) + 8px);
  max-width: min(70vw, 460px); padding: 10px 16px; }
.l-col { font-weight: 600; }
.l-title { font-size: 13px; opacity: .85; }
.l-title:empty { display: none; }
.l-pos { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; }
#panel-share { bottom: calc(max(var(--gap), env(safe-area-inset-bottom)) + var(--fab) + 8px);
  right: max(var(--gap), env(safe-area-inset-right)); display: grid; gap: 8px; }
#panel-share a, #panel-share button { color: inherit; text-decoration: none; background: none; border: 0;
  font: inherit; text-align: left; padding: 0; cursor: pointer; }

/* Pages Infos / Expos : calque plein écran à défilement vertical libre, au-dessus de la galerie */
#page { position: fixed; inset: 0; z-index: 28; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); outline: none; -webkit-overflow-scrolling: touch; }
#page[hidden] { display: none; }
#page-close { position: fixed; top: max(var(--gap), env(safe-area-inset-top));
  right: max(var(--gap), env(safe-area-inset-right)); z-index: 29; }
.page-body { max-width: 40em; margin: 0 auto;
  padding: calc(max(var(--gap), env(safe-area-inset-top)) + var(--fab) + 24px) max(24px, env(safe-area-inset-right))
    max(64px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.page-body h1 { font: 600 28px/1.2 ui-serif, Georgia, serif; margin: 0 0 24px; letter-spacing: .01em; }
.page-body h2 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6;
  margin: 48px 0 16px; }
.page-body p { margin: 0 0 16px; white-space: pre-line; color: #e9e4da;
  font: 400 17px/1.65 ui-serif, Georgia, "Hiragino Mincho ProN", "Songti SC", serif; }
.page-body a { color: inherit; text-underline-offset: 3px; }
.page-body .meta { font: 14px/1.5 ui-sans-serif, -apple-system, sans-serif; opacity: .7; }
.page-body h3 { font-size: 16px; margin: 0 0 4px; }
.expo { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.expo .year { font-variant-numeric: tabular-nums; opacity: .6; font-size: 13px; }
.expo .now { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor;
  border-radius: 99px; padding: 1px 8px; margin-left: 8px; opacity: .8; vertical-align: 2px; }
.expo p { font-size: 15px; margin: 4px 0 0; }
.press { list-style: none; padding: 0; margin: 0; }
.press li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); }
.press .media { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
body.page-open .fab:not(#page-close), body.page-open .arrow { opacity: 0; pointer-events: none; }

/* Flèches : seulement avec un pointeur précis (souris, trackpad) */
.arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .arrow { display: grid; place-items: center; position: fixed; z-index: 15; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: var(--fab-bg); color: #fff; cursor: pointer; opacity: 0;
    transition: opacity .25s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  body.show-arrows .arrow:not([disabled]) { opacity: .85; }
  .arrow[disabled] { opacity: 0 !important; pointer-events: none; }
  .arrow[data-dir=left]  { left: 18px; top: 50%; translate: 0 -50%; }
  .arrow[data-dir=right] { right: 18px; top: 50%; translate: 0 -50%; }
  .arrow[data-dir=up]    { top: 18px; left: 50%; translate: -50% 0; }
  .arrow[data-dir=down]  { bottom: 18px; left: 50%; translate: -50% 0; }
}

/* Zoom */
#zoom { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: var(--bg);
  touch-action: none; cursor: zoom-out; }
#zoom[hidden] { display: none; }
#zoom img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform;
  max-width: none; user-select: none; -webkit-user-drag: none; }
#zoom.dragging { cursor: grabbing; }

/* Indice de zoom */
#pulse { position: fixed; z-index: 25; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 10px rgba(0,0,0,.25);
  pointer-events: none; opacity: 0; }

#debug { position: fixed; z-index: 50; top: 4px; right: 4px; font: 11px/1.3 ui-monospace, monospace;
  background: rgba(0,0,0,.7); color: #9f9; padding: 4px 6px; border-radius: 4px; pointer-events: none;
  white-space: pre; }