.impressionen {
  margin: 0 auto;
  max-width: 1050px;
  scroll-margin-top: 20px;
}
.home .impressionen { max-width: none; }
.impressions-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}
.impressions-heading h1, .impressions-heading h2 {
  font-size: clamp(37px, 7vw, 84px);
  line-height: .92;
  letter-spacing: -.01em;
}
.sujet-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 750;
}
.sujet-filter select {
  min-width: 0;
  max-width: 180px;
  min-height: 42px;
  padding: 0 7px 0 9px;
  border: 1px solid #9fa9ba;
  border-radius: 6px;
  background: #fffdfa;
  color: var(--ink);
  color-scheme: light;
  font: inherit;
}
.film { overflow: hidden; border-radius: 12px; background: #11223d; color: white; }
.film-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(230px, 48svh, 510px);
  background: radial-gradient(ellipse at center, #263b59, #0d1a2e);
  touch-action: pan-y pinch-zoom;
}
.film-image:focus-visible { outline: 3px solid #a9d3ff; outline-offset: -5px; }
.film-image img, .film-viewer-photo img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.film-expand, .film-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #92a4bf;
  border-radius: 50%;
  background: #11223d;
  color: white;
}
.film-expand {
  position: absolute;
  right: 14px;
  bottom: 14px;

}
.film-expand svg { width: 24px; height: 24px; }
.film-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 18px;
  min-height: 86px;
  padding: 12px clamp(14px, 2.5vw, 34px);
  border-top: 1px solid #63789570;
}
.film-sujet { color: #a9d3ff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.film-title { margin-top: 4px; font-size: clamp(16px, 2.2vw, 26px); font-weight: 750; line-height: 1.15; }
.film-controls { display: flex; flex: none; align-items: center; gap: 8px; }
.film-count { margin-right: 7px; color: #d4e4fb; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-button { cursor: pointer; touch-action: manipulation; }
.film-button:hover, .film-image:hover .film-expand { background: #d5e8ff; color: #102541; }
.film-button:disabled { opacity: .45; cursor: default; }
.film-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.film-button [hidden], .sujet-filter[hidden], .film-controls[hidden], .film-strip[hidden] { display: none; }
.film-strip {
  display: flex;
  gap: 8px;
  padding: 8px clamp(14px, 2.5vw, 34px) 12px;
  overflow-x: auto;
  scrollbar-color: #7898c3 #11223d;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.film-thumb {
  flex: 0 0 76px;
  height: 60px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.film-thumb img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.film-thumb[aria-current="true"] { border-color: #a9d3ff; }
.film-viewer {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #080f20;
  color: white;
}
.film-viewer-layout { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.film-viewer form { justify-self: end; margin-bottom: 8px; }
.film-viewer-photo { display: grid; place-items: center; min-height: 0; touch-action: pan-y pinch-zoom; }
.film-viewer-bar { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 62px; }
.film-viewer-bar p { min-width: 0; text-align: center; color: #e0eaff; font-size: 14px; }
.film-viewer-bar button { flex: 0 0 44px; }
body:has(.film-viewer[open]) { overflow: hidden; }

@media (max-width: 740px) {
  .sujet-filter > span { display: none; }
  .sujet-filter select { max-width: 118px; }
  .film-caption { flex-wrap: wrap; }
  .film-caption > div:first-child { flex-basis: 100%; }
  .film-controls { width: 100%; }
  .film-count { margin-inline-end: auto; }
  .film-thumb { flex-basis: 63px; height: 54px; }
}