/* =============================================
   Block: Galerie Modulo (modulo/gallery)
   Grille · Mosaïque · Justifiée · Vedette
   + visionneuse (styles .mt-lb, injectée par view.js)
   ============================================= */

.mt-gallery {
    --_cols: var(--mt-gal-cols-d, 3);
    --_gap: var(--mt-gal-gap, 8px);
    --_row: var(--mt-gal-row, 220px);
    box-sizing: border-box;
}
@media (max-width: 980px) { .mt-gallery { --_cols: var(--mt-gal-cols-t, 2); } }
@media (max-width: 600px) { .mt-gallery { --_cols: var(--mt-gal-cols-m, 2); --_row: calc(var(--mt-gal-row, 220px) * .6); } }

.mt-gallery *, .mt-gallery *::before, .mt-gallery *::after { box-sizing: border-box; }
.mt-gallery-empty {
    padding: 24px;
    text-align: center;
    color: #6b7280;
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
}

.mt-gallery__list { list-style: none; margin: 0; padding: 0; }
.mt-gallery__item { margin: 0; padding: 0; min-width: 0; }
.mt-gallery__item::before, .mt-gallery__item::marker { content: none; }
.mt-gallery__figure { margin: 0; height: 100%; display: flex; flex-direction: column; }

/* ─── Vignette ─── */
.mt-gallery__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mt-gal-radius, 6px);
    border: var(--mt-gal-bw, 0) solid var(--mt-gal-bc, color-mix(in srgb, var(--mb-c-text) 12%, transparent));
    box-shadow: var(--mt-gal-shadow, none);
    background: color-mix(in srgb, var(--mb-c-text) 5%, transparent);
    isolation: isolate;
    flex: 1;
}
a.mt-gallery__link { cursor: zoom-in; }
.mt-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease, filter .3s ease;
}
.mt-gallery__link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* ─── Grille ─── */
.mt-gallery--grid .mt-gallery__list {
    display: grid;
    gap: var(--_gap);
    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
}
.mt-gallery--grid:not(.mt-gallery--ratio-original) .mt-gallery__link { aspect-ratio: var(--mt-gal-ratio, 4/3); flex: none; }
.mt-gallery--grid.mt-gallery--ratio-original .mt-gallery__list { align-items: start; }
.mt-gallery--grid.mt-gallery--ratio-original .mt-gallery__img { height: auto; aspect-ratio: var(--r, auto); }

/* ─── Alignement et largeur maximale ───
   Largeur max : le bloc se place à gauche, au centre ou à droite.
   Grille : une rangée incomplète (ex. 2 images sur 3 colonnes) suit l'alignement. */
.mt-gallery.mt-gallery--has-maxw { max-width: min(var(--mt-gal-maxw), 100%) !important; }
.mt-gallery.mt-gallery--has-maxw.mt-gallery--align-left   { margin-left: 0 !important; margin-right: auto !important; }
.mt-gallery.mt-gallery--has-maxw.mt-gallery--align-center { margin-left: auto !important; margin-right: auto !important; }
.mt-gallery.mt-gallery--has-maxw.mt-gallery--align-right  { margin-left: auto !important; margin-right: 0 !important; }
.mt-gallery--grid.mt-gallery--align-center .mt-gallery__list,
.mt-gallery--grid.mt-gallery--align-right .mt-gallery__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.mt-gallery--grid.mt-gallery--align-center .mt-gallery__list { justify-content: center; }
.mt-gallery--grid.mt-gallery--align-right .mt-gallery__list { justify-content: flex-end; }
.mt-gallery--grid.mt-gallery--align-center .mt-gallery__item,
.mt-gallery--grid.mt-gallery--align-right .mt-gallery__item {
    flex: 0 0 calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
}
.mt-gallery--grid.mt-gallery--ratio-original.mt-gallery--align-center .mt-gallery__list,
.mt-gallery--grid.mt-gallery--ratio-original.mt-gallery--align-right .mt-gallery__list { align-items: flex-start; }

/* ─── Largeur d'image fixe (px) ───
   Les images gardent la largeur choisie, autant que possible par rangée,
   placées selon l'alignement ; elles se réduisent si l'écran est plus étroit. */
.mt-gallery--grid.mt-gallery--fixed-w .mt-gallery__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--_gap);
}
.mt-gallery--grid.mt-gallery--fixed-w .mt-gallery__item { flex: 0 0 min(var(--mt-gal-iw), 100%); }
.mt-gallery--grid.mt-gallery--fixed-w.mt-gallery--align-center .mt-gallery__list { justify-content: center; }
.mt-gallery--grid.mt-gallery--fixed-w.mt-gallery--align-right .mt-gallery__list { justify-content: flex-end; }
.mt-gallery--masonry.mt-gallery--fixed-w .mt-gallery__list { column-count: auto; column-width: var(--mt-gal-iw); }

/* ─── Mosaïque (colonnes, proportions d'origine) ─── */
.mt-gallery--masonry .mt-gallery__list {
    column-count: var(--_cols);
    column-gap: var(--_gap);
}
.mt-gallery--masonry .mt-gallery__item {
    break-inside: avoid;
    margin-bottom: var(--_gap);
}
.mt-gallery--masonry .mt-gallery__img { height: auto; }

/* ─── Justifiée (rangées de hauteur égale, CSS pur) ───
   Chaque vignette grandit en proportion de son ratio largeur/hauteur (--r) :
   toutes les images d'une rangée ont la même hauteur et la rangée remplit la
   largeur. Le pseudo-élément final empêche d'étirer la dernière rangée. */
.mt-gallery--justified .mt-gallery__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--_gap);
}
.mt-gallery--justified .mt-gallery__list::after { content: ""; flex-grow: 999999; }
.mt-gallery--justified .mt-gallery__item {
    flex-grow: calc(var(--r, 1.5) * 100);
    flex-basis: calc(var(--r, 1.5) * var(--_row));
}
.mt-gallery--justified .mt-gallery__link { aspect-ratio: var(--r, 1.5); flex: none; }

/* ─── Vedette (première image en grand) ─── */
.mt-gallery--featured .mt-gallery__list {
    display: grid;
    gap: var(--_gap);
    grid-template-columns: repeat(max(var(--_cols), 2), minmax(0, 1fr));
    grid-auto-flow: dense;
}
.mt-gallery--featured .mt-gallery__item.is-first { grid-column: span 2; grid-row: span 2; }
.mt-gallery--featured .mt-gallery__link { aspect-ratio: var(--mt-gal-ratio, 4/3); flex: none; }
.mt-gallery--featured .mt-gallery__item.is-first .mt-gallery__link { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.mt-gallery--featured.mt-gallery--ratio-original .mt-gallery__link { aspect-ratio: 1/1; }
@media (max-width: 600px) {
    .mt-gallery--featured .mt-gallery__item.is-first { grid-column: 1 / -1; grid-row: auto; }
    .mt-gallery--featured .mt-gallery__item.is-first .mt-gallery__link { aspect-ratio: var(--mt-gal-ratio, 4/3); height: auto; }
}

/* ─── « +N » sur la dernière vignette affichée ─── */
.mt-gallery__more {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-gal-more-bg, color-mix(in srgb, var(--mb-c-overlay) 55%, transparent));
    color: var(--mt-gal-more-c, var(--mb-c-on-overlay));
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: .02em;
}

/* ─── Légendes ─── */
.mt-gallery__caption {
    margin: 6px 2px 0;
    font-size: var(--mt-gal-cap-fs, .875rem);
    line-height: 1.4;
    color: var(--mt-gal-cap-c, inherit);
    opacity: .85;
}
.mt-gallery--cap-below .mt-gallery__caption { background: var(--mt-gal-cap-bg, transparent); }
.mt-gallery--cap-align-center .mt-gallery__caption,
.mt-gallery--cap-align-center .mt-gallery__overlay-cap { text-align: center; }
.mt-gallery--cap-align-right .mt-gallery__caption,
.mt-gallery--cap-align-right .mt-gallery__overlay-cap { text-align: right; }
.mt-gallery__overlay-cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 24px 12px 10px;
    font-size: var(--mt-gal-cap-fs, .875rem);
    line-height: 1.35;
    color: var(--mt-gal-cap-c, var(--mb-c-on-overlay));
    background: var(--mt-gal-cap-bg, linear-gradient(to top, color-mix(in srgb, var(--mb-c-overlay) 70%, transparent), transparent));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.mt-gallery__link:hover .mt-gallery__overlay-cap,
.mt-gallery__link:focus-visible .mt-gallery__overlay-cap { opacity: 1; transform: none; }
@media (hover: none) { .mt-gallery__overlay-cap { opacity: 1; transform: none; } }

/* ─── Effets au survol ─── */
@media (hover: hover) {
    .mt-gallery--hover-zoom a.mt-gallery__link:hover .mt-gallery__img { transform: scale(1.06); }
    .mt-gallery--hover-darken a.mt-gallery__link:hover .mt-gallery__img { filter: brightness(.75); }
    .mt-gallery--hover-lighten a.mt-gallery__link:hover .mt-gallery__img { filter: brightness(1.12); }
}

.mt-gallery .screen-reader-text,
.mt-lb .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================
   Visionneuse
   ============================================= */
html.mt-lb-open { overflow: hidden; }
.mt-lb {
    --_ui: var(--mb-c-on-overlay);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    color: var(--_ui);
    opacity: 0;
    transition: opacity .2s ease;
}
.mt-lb.is-open { opacity: 1; }
.mt-lb[hidden] { display: none; }
.mt-lb__backdrop { position: absolute; inset: 0; z-index: -1; }
/* Léger flou de la page derrière la visionneuse (si le navigateur le permet). */
.mt-lb { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.mt-lb__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: .875rem;
}
.mt-lb__counter { font-variant-numeric: tabular-nums; opacity: .85; min-width: 4em; }
.mt-lb__tools { display: flex; gap: 6px; margin-left: auto; }

.mt-lb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--_ui, currentColor) 18%, transparent);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease;
}
.mt-lb__btn:hover { background: color-mix(in srgb, var(--_ui, currentColor) 32%, transparent); }
.mt-lb__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mt-lb__btn svg { width: 22px; height: 22px; }
.mt-lb__btn[hidden] { display: none; }

.mt-lb__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px;
    touch-action: pan-y pinch-zoom;
    overflow: hidden;
}
.mt-lb__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mt-lb__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.mt-lb--thumbs .mt-lb__img { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); }
.mt-lb__caption {
    margin: 10px 0 0;
    max-width: 70ch;
    text-align: center;
    font-size: .9375rem;
    line-height: 1.5;
}
.mt-lb__caption a { color: inherit; }
.mt-lb__caption:empty { display: none; }

.mt-lb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.mt-lb__nav--prev { left: 10px; }
.mt-lb__nav--next { right: 10px; }

/* Transitions */
.mt-lb__figure.is-enter-fade { animation: mt-lb-fade .25s ease; }
.mt-lb__figure.is-enter-next { animation: mt-lb-next .3s ease; }
.mt-lb__figure.is-enter-prev { animation: mt-lb-prev .3s ease; }
@keyframes mt-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mt-lb-next { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes mt-lb-prev { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

.mt-lb__loader {
    position: absolute;
    width: 36px; height: 36px;
    border: 3px solid color-mix(in srgb, var(--_ui, currentColor) 35%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: mt-lb-spin .8s linear infinite;
}
@keyframes mt-lb-spin { to { transform: rotate(360deg); } }

/* Miniatures */
.mt-lb__thumbs {
    display: flex;
    gap: 6px;
    padding: 10px 12px 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    justify-content: safe center;
}
.mt-lb__thumb {
    flex: none;
    width: 64px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    opacity: .55;
    overflow: hidden;
    transition: opacity .2s ease, border-color .2s ease;
}
.mt-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-lb__thumb:hover { opacity: .85; }
.mt-lb__thumb[aria-current="true"] { opacity: 1; border-color: currentColor; }
.mt-lb__thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

@media (max-width: 600px) {
    .mt-lb__stage { padding: 0 8px; }
    .mt-lb__nav { display: none; } /* On glisse au doigt. */
    .mt-lb__img { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
}

@media (prefers-reduced-motion: reduce) {
    .mt-gallery__img, .mt-gallery__overlay-cap, .mt-lb { transition: none !important; }
    .mt-lb__figure { animation: none !important; }
    .mt-gallery a.mt-gallery__link:hover .mt-gallery__img { transform: none !important; }
}