/*! cr-galerie | Quelle: 06i-galerie.css */
@layer pages {
.albums { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.albums li { margin: 0; }
.albums--row { grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 1.2rem 0.8rem; scrollbar-width: thin; }
.albums--row li { scroll-snap-align: start; }
.album { display: grid; gap: 1rem; color: var(--ink); text-decoration: none; }
.album__stack { position: relative; display: block; aspect-ratio: 4 / 3; margin-block-start: 0.8rem; }
.album__cover, .album__peek { position: absolute; inset: 0; border-radius: var(--r-l); overflow: hidden; background: var(--img-color); box-shadow: var(--shadow-1); transition: rotate 500ms var(--ease-spring), translate 500ms var(--ease-spring), box-shadow var(--dur-2); }
.album__cover img, .album__peek img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.album__peek { inset: 4% 6%; opacity: 0.9; }
.album__peek--0 { rotate: -4deg; translate: -2% -4%; }
.album__peek--1 { rotate: 3.5deg; translate: 3% -6%; }
.album__cover { z-index: 1; border: 4px solid var(--surface); }
.album:hover .album__peek--0 { rotate: -9deg; translate: -9% -7%; }
.album:hover .album__peek--1 { rotate: 8deg; translate: 9% -9%; }
.album:hover .album__cover { box-shadow: var(--shadow-3); }
.album:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-l); }
.album__meta { display: grid; gap: 0.25rem; }
.album__count { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); }
.album__count svg { inline-size: 1rem; }
.album__title { font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: calc(var(--display-wdth) * 1%); font-size: var(--step-2); line-height: 1.1; }
.album__text { color: var(--ink-2); }
.gal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; --row: 15rem; }
@media (width < 40rem) { .gal { --row: 9rem; gap: 0.35rem; } }
.gal::after { content: ""; flex-grow: 1000; } 
.gal__item { margin: 0; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row)); position: relative; aspect-ratio: var(--ar); border-radius: var(--r-m); overflow: hidden; background: var(--img-color); }
.gal__item a { position: absolute; inset: 0; display: block; }
.gal__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 700ms var(--ease-out), filter var(--dur-2); }
.gal__item a:hover img { scale: 1.04; }
.gal__item a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-m); }
.gal__n { display: inline-block; margin-inline-start: 0.4rem; padding: 0.1rem 0.6rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-ink); font-size: 0.85em; font-weight: 700; }
.lightbox {
inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0;
background: rgb(8 12 18 / .94); color: #fff; overflow: hidden; overscroll-behavior: contain;
opacity: 0; transition: opacity 280ms, display 280ms allow-discrete, overlay 280ms allow-discrete;
}
.lightbox[open] { opacity: 1; display: grid; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox__fig { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; block-size: 100dvh; padding: clamp(0.5rem, 3vw, 2.5rem) clamp(0.5rem, 6vw, 5.5rem) 0; }
.lightbox__img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); opacity: 0; scale: 0.98; transition: opacity 380ms var(--ease-out), scale 480ms var(--ease-out), translate 480ms var(--ease-out); }
.lightbox[data-dir="next"] .lightbox__img:not(.is-in) { translate: 2.5rem 0; }
.lightbox[data-dir="prev"] .lightbox__img:not(.is-in) { translate: -2.5rem 0; }
.lightbox__img.is-in { opacity: 1; scale: 1; translate: 0 0; }
.lightbox__cap { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: center; align-items: baseline; padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom)); text-align: center; font-size: 0.95rem; }
.lightbox__num { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .7); font-weight: 700; }
.lightbox__credit { color: rgb(255 255 255 / .7); font-size: 0.85rem; }
.lightbox__btn {
position: absolute; z-index: 2; inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .25);
background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background-color 200ms, scale 300ms var(--ease-spring);
}
.lightbox__btn:hover { background: rgb(255 255 255 / .22); scale: 1.06; }
.lightbox__btn:focus-visible { outline: 3px solid #ffe95c; outline-offset: 2px; }
.lightbox__btn svg { inline-size: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__prev { left: clamp(0.4rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__next { right: clamp(0.4rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__close { right: clamp(0.4rem, 2vw, 1.5rem); top: clamp(0.4rem, 2vw, 1.5rem); }
@media (width < 40rem) { .lightbox__prev, .lightbox__next { top: auto; bottom: 3.6rem; translate: none; } }
}