/* Rail de galerie */

.rail { --rail-pad: var(--gutter); }

.rail__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-inline: var(--rail-pad);
  margin-bottom: var(--sp-4);
}
.chip {
  min-height: var(--btn-h);
  padding: 0 1.5rem;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.rail__viewport {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--rail-pad);
  scroll-padding-inline: var(--rail-pad);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rail__viewport:focus-visible { outline-offset: -3px; }

.rail__track {
  display: flex;
  align-items: flex-start;
  gap: var(--rail-gap);
  width: max-content;
  padding-right: var(--rail-pad);
}
.rail__item { flex: none; scroll-snap-align: start; }
.rail__img {
  height: var(--rail-h);
  width: auto;
  max-width: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: var(--panel);
}
.rail__item figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rail__num { color: var(--brass-text); font-weight: 600; }

.rail__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--rail-pad);
  margin-top: var(--sp-4);
}
.rail__progress {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.rail__bar {
  position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0.05);
  transition: transform 120ms linear;
}
.rail__count {
  margin: 0;
  max-width: none;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  min-width: 5ch;
  text-align: center;
}

/* Rail de la galerie */
.rail--full { --rail-h: min(68vh, 620px); }
@media (max-width: 899px) { .rail--full { --rail-h: min(62vh, 520px); } }

/* Rail de l'accueil : 3 photos visibles sans défiler */
.rail--home {
  --rail-h: clamp(240px, calc(100svh - 470px), 560px);
  --rail-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
@media (max-width: 599px) {
  .rail--home { --rail-h: 160px; --rail-gap: 0.6rem; }
  .rail--home .rail__item figcaption { display: none; }
  .rail--home .rail__controls { margin-top: var(--sp-2); gap: var(--sp-2); }
  .rail--home .btn-round { width: 3.5rem; height: 3.5rem; }
}

/* Bouton qui ouvre la visionneuse */
.rail__open { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: inherit; line-height: 0; }
.rail__open:focus-visible { outline: var(--focus); outline-offset: 4px; }

/* Visionneuse */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; grid-template-rows: 1fr auto; padding: var(--sp-3) var(--gutter) var(--sp-3); gap: var(--sp-2); animation: lb-in 220ms var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb__img { min-height: 0; display: grid; place-items: center; }
.lb__img picture, .lb__img img { max-height: calc(100dvh - 11rem); width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.lb__img img { object-fit: contain; }
.lb__bar { display: grid; gap: 0.25rem var(--sp-3); align-items: center; }
.lb__cap { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-small); font-variant-numeric: tabular-nums; max-width: none; }
.lb__alt { color: var(--ink-2); font-size: var(--fs-small); max-width: 60ch; }
.lb__btns { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); }
@media (min-width: 800px) {
  .lb__bar { grid-template-columns: auto 1fr auto; }
  .lb__btns { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }