/* ==========================================================================
   LIGHTBOX DES IMAGES D'ARTICLE — public/assets/css/pe-lightbox.css
   Pilotée par assets/js/pe-lightbox.js. Fond = celui du site (--bg-deep, bleu nuit
   Prométhée), image centrée, légende à droite de l'image (sous l'image sur petit
   écran), bouton « réduire » en haut à droite. Les positions sont posées par le
   script (l'animation d'ouverture part de la miniature) ; ce fichier ne décrit que
   l'apparence.
   ========================================================================== */

/* Images agrandissables dans le texte. */
img[data-pe-zoomable], [data-pe-lightbox] { cursor: zoom-in; }
img[data-pe-zoomable]:focus-visible, [data-pe-lightbox]:focus-visible {
    outline: 2px solid #7fb8ff; outline-offset: 3px;
}
/* L'image d'origine disparaît pendant que son double voyage : aucun doublon à l'écran. */
.pe-lb-origin { visibility: hidden !important; }

html.pe-lb-open { overflow: hidden; padding-right: var(--pe-lb-sbw, 0); }

.pe-lb {
    position: fixed; inset: 0; z-index: 100000;
    color: #cbd5e1; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pe-lb[hidden] { display: none; }
.pe-lb__bg { position: absolute; inset: 0; background: var(--bg-deep, #020617); }

.pe-lb__frame {
    position: absolute; overflow: hidden; background: var(--bg-surface, #0f172a);
    will-change: left, top, width, height;
}
.pe-lb__img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; user-select: none; -webkit-user-drag: none;
}

.pe-lb__cap {
    position: absolute; margin: 0; z-index: 1;
    font-size: .76rem; line-height: 1.55; letter-spacing: .005em; color: #cbd5e1;
    text-align: left; text-wrap: pretty;
    max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin;
}
.pe-lb__cap:empty { display: none; }
.pe-lb__cap-text { margin: 0; }
.pe-lb__cap em { font-style: italic; color: #f1f5f9; }
.pe-lb__cap a { color: #7fb8ff; text-decoration: underline; text-underline-offset: 2px; }
/* Sous l'image (écran étroit) : un peu plus lisible. */
.pe-lb__cap.is-below { font-size: .82rem; }

.pe-lb__btn {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #e2e8f0; cursor: pointer;
    transition: background-color .15s linear, opacity .15s linear;
}
.pe-lb__btn:hover { background: rgba(148, 163, 184, .16); }
.pe-lb__btn:focus-visible { outline: 2px solid #7fb8ff; outline-offset: -2px; }
.pe-lb__btn[hidden] { display: none; }
.pe-lb__close { top: 12px; right: 16px; }
.pe-lb__nav { top: 50%; margin-top: -23px; opacity: .6; }
.pe-lb__nav:hover { opacity: 1; }
.pe-lb__prev { left: 10px; }
.pe-lb__next { right: 10px; }

@media (max-width: 700px) {
    .pe-lb__close { top: 6px; right: 8px; }
    .pe-lb__nav { top: auto; bottom: 10px; margin-top: 0; }
    .pe-lb__prev { left: 8px; }
    .pe-lb__next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .pe-lb__btn { transition: none; }
}