/* lightbox.css — lightbox (zoom image). Son markup vit dans index.html en
   dehors de #app, pour survivre aux changements de page (voir
   js/lightbox.js). */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 40px;
    box-sizing: border-box;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Boutons précédent/suivant : simple glyphe blanc (plus de carré noir), à
   côté de l'image plutôt que sur elle ou collés aux bords de l'écran — un
   écart fixe (CONTROL_GAP, js/lightbox.js) de son bord réel, mesuré à chaque
   image (elle ne fait pas toujours la largeur de la lightbox entière : image
   étroite/haute, ratio différent...). `top`/`left` ci-dessous sont donc juste
   une position de repli, le temps que l'image affichée ait une taille connue
   (positionControls, js/lightbox.js, prend le relais dès qu'elle charge, et
   à chaque redimensionnement). Position:fixed (coordonnées d'écran) plutôt
   qu'à l'intérieur d'un conteneur, puisque la lightbox recouvre toute la
   page. Masqués (voir plus bas) quand une seule image est ouverte :
   openLightbox pose "single-item" sur #lightbox dans ce cas (ex. fiche
   print, pas de galerie). */
.lightbox-prev,
.lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: var(--bg);
    border: 0;
    font-family: "dazzle-unicase", sans-serif;
    font-size: 32px;
    font-weight: 300;
    padding: 6px 4px;
    cursor: pointer;
    z-index: 101;
    transition: opacity .15s ease;
}

.lightbox-prev {
    left: 14px;
}

.lightbox-next {
    right: 14px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: .65;
}

.lightbox.single-item .lightbox-prev,
.lightbox.single-item .lightbox-next {
    display: none;
}

/* Glyphe blanc sans fond, comme .lightbox-prev/-next — mais en SVG plutôt
   qu'un caractère de police : un texte reste soumis aux métriques de la
   police (hauteur de ligne, position de la ligne de base), qui laissent un
   espace variable au-dessus du glyphe et empêchent d'aligner précisément son
   bord haut sur celui de l'image (demandé) — une boîte SVG, elle, a une
   taille exacte et connue. `stroke-width` (index.html) réglé à l'œil pour
   retomber sur l'épaisseur de trait réelle des flèches (la police des
   flèches, en 300, est plus épaisse qu'un trait de contour "par défaut") —
   un `stroke-width` donné se traduit en pixels réels proportionnellement à
   `width`/`height` (le viewBox reste 0 0 24 24) : le rapport entre les deux
   attributs, pas seulement `stroke-width` seul, détermine le poids visuel
   final si l'un des deux est retouché. Pas de padding-top
   ni -left : sans eux, cet espace se rajouterait au-dessus/à gauche du SVG et
   son bord ne correspondrait plus à celui de l'image/de la flèche. `top`/
   `right` ci-dessous ne sont qu'une position de repli, positionControls
   (js/lightbox.js) aligne le bord gauche de la croix sur le bord gauche de la
   flèche "suivant" et cale son bord haut à elle sur le bord haut réel de
   l'image dès que sa taille est connue.
   z-index comme .lightbox-prev/.lightbox-next : sans lui, l'image (opacity < 1
   pendant son fondu d'apparition, .fade-img) crée temporairement son propre
   contexte d'empilement et passe devant ce bouton (z-index:auto) tant qu'elle
   charge — la croix disparaît derrière l'image le temps du fondu, puis
   repasse devant une fois l'image chargée (opacity:1 ne crée plus ce
   contexte). */
.lightbox-close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 101;
    display: block;
    background: none;
    color: var(--bg);
    border: 0;
    padding: 0 6px 6px 0;
    cursor: pointer;
    transition: opacity .15s ease;
}

.lightbox-close svg {
    display: block;
}

.lightbox-close:hover {
    opacity: .65;
}