/**
 * Regarder une image de pres (cf. assets/js/lightbox.js).
 *
 * Sobre a dessein : l'image doit occuper la place, tout le reste
 * s'efface. Fond sombre pour que l'aquarelle ressorte, comme sur un
 * mur de galerie.
 */

/* Le declencheur : un bouton qui ne doit ressembler a rien. */
.mdm-zoomable {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: zoom-in;
}

.mdm-zoomable:focus-visible {
    outline: 2px solid var(--m-gold, #d8a85f);
    outline-offset: 3px;
}

/* La page ne defile plus derriere la superposition. */
.mdm-lightbox-ouverte,
.mdm-lightbox-ouverte body {
    overflow: hidden;
}

.mdm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 20, 18, 0.92);
    padding: 24px 56px 72px;
}

.mdm-lightbox[hidden] {
    display: none;
}

.mdm-lightbox__scene {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.mdm-lightbox__img {
    max-width: min(1200px, 92vw);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    background: #fff;
}

.mdm-lightbox__legende {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    margin: 0;
    text-align: center;
    color: #f6f1ea;
    font-size: 15px;
    letter-spacing: 0.01em;
    padding: 0 24px;
}

.mdm-lightbox__compteur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    color: rgba(246, 241, 234, 0.7);
    font-size: 12px;
}

.mdm-lightbox__fermer,
.mdm-lightbox__nav {
    position: absolute;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease;
}

.mdm-lightbox__fermer:hover,
.mdm-lightbox__nav:hover,
.mdm-lightbox__fermer:focus-visible,
.mdm-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.26);
}

.mdm-lightbox__fermer {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    font-size: 26px;
}

.mdm-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    font-size: 30px;
}

.mdm-lightbox__nav--prec {
    left: 12px;
}

.mdm-lightbox__nav--suiv {
    right: 12px;
}

.mdm-lightbox__nav[hidden] {
    display: none;
}

/* Telephone : les fleches descendent en bas, l'image prend tout. */
@media (max-width: 640px) {
    .mdm-lightbox {
        padding: 12px 12px 96px;
    }

    .mdm-lightbox__img {
        max-width: 96vw;
        max-height: 74vh;
    }

    .mdm-lightbox__nav {
        top: auto;
        bottom: 56px;
        transform: none;
    }

    .mdm-lightbox__nav--prec {
        left: 24px;
    }

    .mdm-lightbox__nav--suiv {
        right: 24px;
    }

    .mdm-lightbox__legende {
        bottom: 30px;
        font-size: 14px;
    }

    .mdm-lightbox__compteur {
        bottom: 12px;
    }
}