/*
 * POPUP MEDIA KRAFT (image) — système réutilisable
 * ============================================================
 * Styles de la popup déclenchée par js/popup-media.js sur les liens
 * vers images (.jpg .jpeg .png .webp .gif .svg).
 *
 * Les liens vers .pdf gardent leur comportement natif (téléchargement
 * ou affichage selon la config navigateur de l'utilisateur).
 *
 * Réutilise .ps-popup-overlay, .ps-popup-wrap, .ps-popup,
 * .ps-popup-cadre, .ps-popup-close, .ps-popup-inner du glossaire.
 * Définit seulement le modifieur spécifique :
 *   .ps-popup-wrap--media-image : compact, juste image + close
 */

/* ── Modifieur --media-image ───────────────────────────── */

/* Boîte image — largeur auto (cf. 3 zones plus bas), hauteur plafonnée à l'écran.
   Plafond de BASE = 95vh : c'est le cas ≤750px (popup CENTRÉE, top:50% de base).
   Au-dessus de 750, l'ancrage haut (query plus bas) ramène ce plafond à 88vh. */
.ps-popup-wrap--media-image .ps-popup {
    width: auto;
    max-width: 95vw;
    max-height: 95vh;
}

.ps-popup-wrap--media-image .ps-popup-cadre {
    max-height: 95vh;
    padding: 1rem;
}

.ps-popup-wrap--media-image .ps-popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Réparation ascenseur (toutes tailles) : la base .ps-popup-inner cape à
       calc(80vh - 3.6rem) avec overflow-y:auto, plus bas que le plafond de
       l'image → une image portrait débordait l'inner et déclenchait un scroll
       interne. On aligne l'inner sur le plafond de l'image, et visible. */
    max-height: calc(95vh - 4rem);
    overflow: visible;
}

.ps-popup-wrap--media-image .ps-popup-media-img {
    display: block;
    max-width: 100%;
    max-height: calc(95vh - 4rem);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ancrage HAUT — AU-DESSUS de 750px UNIQUEMENT. Sous 750, la popup hérite du
   centrage de base (top:50% + translate(-50%,-50%)) → plus de débordement en
   haut. transform en !important + sélecteur 2 classes (0,2,0) : nécessaire pour
   battre, dans la bande 751-768, le `.ps-popup-wrap { transform: translate(...)
   !important }` de glossaire @media(max-width:768px) (sinon le translateY
   réapparaît et la popup sort par le haut). Budget réduit à 88vh (6vh haut +
   6vh bas) pour que l'ancrage à 6vh ne sorte jamais en bas. */
@media (min-width: 751px) {
    .ps-popup-wrap.ps-popup-wrap--media-image {
        top: 6vh;
        transform: translateX(-50%) !important;
    }
    .ps-popup-wrap--media-image .ps-popup,
    .ps-popup-wrap--media-image .ps-popup-cadre {
        max-height: 88vh;
    }
    .ps-popup-wrap--media-image .ps-popup-inner,
    .ps-popup-wrap--media-image .ps-popup-media-img {
        max-height: calc(88vh - 4rem);
    }
}

/* Largeur de la popup image — 3 zones (découpage validé Mikou). Scope strict
   --media-image : glossaire (680px) et vidéo (natif) intouchés.
   · >1100px      : inchangé — width:auto (règle de base ci-dessus), le cadre
                    épouse l'image, plafond 95vw.
   · 1100–751px   : élargie mais réduite → 88vw (6vw d'air de chaque côté).
   · ≤750px       : quasi pleine largeur → 95vw (~2.5vw d'air de chaque côté). */
@media (max-width: 1100px) and (min-width: 751px) {
    .ps-popup-wrap--media-image .ps-popup {
        width: 88vw;
        max-width: 88vw;
    }
}
@media (max-width: 750px) {
    .ps-popup-wrap--media-image .ps-popup {
        width: 95vw;
        max-width: 95vw;
    }
}