/* ==========================================================================
   MAFOTO — Visionneuse « on tire la carte »
   ==========================================================================
   Le geste : la carte visée est tirée hors de la pile, se redresse face à
   l'écran, et grandit au centre. Le fond passe derrière un voile noir dégradé
   et un flou — le vocabulaire d'une fenêtre modale, pas d'une page.

   Techniquement : on ne déplace pas la vraie carte (elle vit dans une scène
   `preserve-3d`, la sortir casserait la pile). On anime un CLONE positionné en
   `fixed` sur la boîte projetée de l'original — technique FLIP.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.lightbox[data-open='true'] { visibility: visible; pointer-events: auto; }

/* --------------------------------------------------------------------------
   L'ÉTAT « closing » — ET C'EST TOUT LE BUG DU RETOUR
   La fermeture posait `data-open="false"` dès la première ligne, donc
   `visibility: hidden` s'appliquait AU MÊME MOMENT que le lancement de
   l'animation de retour. `visibility` n'est pas interpolée ici : la carte
   disparaissait à l'image près, et le vol de retour se jouait dans le vide.
   D'où l'impression qu'il n'y en avait pas — il y en avait un, invisible.

   On garde donc la visionneuse VISIBLE pendant tout le retour, en coupant
   seulement les clics, et on ne la masque qu'à l'arrivée de la carte.
   -------------------------------------------------------------------------- */
.lightbox[data-open='closing'] { visibility: visible; pointer-events: none; }
.lightbox[data-open='closing'] .lightbox__veil { opacity: 0; }
.lightbox[data-open='closing'] .lightbox__ui { opacity: 0; transition-delay: 0ms; }

/* Le voile : dégradé noir plus dense en bas + flou d'arrière-plan.
   `backdrop-filter` vit ici, HORS de la scène 3D — aucune interférence. */
.lightbox__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 6, 8, .58), rgba(6, 6, 8, .86));
  backdrop-filter: blur(22px) saturate(.85);
  -webkit-backdrop-filter: blur(22px) saturate(.85);
  opacity: 0;
  transition: opacity 460ms var(--ease);
  cursor: zoom-out;
}
.lightbox[data-open='true'] .lightbox__veil { opacity: 1; }

/* La carte tirée. `transform-origin: 0 0` pour que le calcul FLIP reste simple :
   translate déplace le coin haut-gauche, scale grandit vers le bas-droite. */
.lightbox__card {
  position: fixed;
  top: 0;
  left: 0;
  /* La carte est AJOUTÉE au DOM après l'interface : sans z-index explicite,
     deux éléments positionnés se départagent par l'ordre d'écriture et la
     photo passerait devant le bouton Fermer dès qu'elle le touche. */
  z-index: 1;
  transform-origin: 0 0;
  border-radius: var(--radius);   /* les angles arrondis ne changent jamais */
  overflow: hidden;
  background: #0b0b0c;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .3),
    0 40px 120px rgba(0, 0, 0, .55);
  will-change: transform;
}
.lightbox__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Légende et commandes — apparaissent APRÈS l'atterrissage de la carte,
   sinon elles volent l'attention pendant le mouvement. */
.lightbox__ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  opacity: 0;
  transition: opacity 320ms var(--ease) 380ms;
  pointer-events: none;
}
.lightbox[data-open='true'] .lightbox__ui { opacity: 1; }
.lightbox__ui > * { pointer-events: auto; }

.lightbox__caption {
  align-self: end;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 16px;
  max-width: 62ch;
  padding-bottom: 8px;
  text-align: center;
  color: #fff;
}
.lightbox__name { font-size: var(--t-lead); font-weight: var(--w-medium); }
.lightbox__cat {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--beam);
}
.lightbox__desc { flex-basis: 100%; font-size: var(--t-body); color: rgba(255,255,255,.7); }
.lightbox__count { font-size: var(--t-meta); color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }

.lightbox__btn {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
/* Le libellé n'existe qu'au doigt : sur un bureau, une croix en haut à droite
   se comprend sans mot. Sur un téléphone, elle se cherche. */
.lightbox__label { display: none; }
.lightbox__btn:hover { background: var(--beam); border-color: var(--beam); color: #121212; }
.lightbox__btn:active { transform: scale(.94); }
.lightbox__close { top: var(--gutter); right: var(--gutter); }
.lightbox__prev  { top: 50%; left: var(--gutter);  margin-top: -23px; }
.lightbox__next  { top: 50%; right: var(--gutter); margin-top: -23px; }

/* ==========================================================================
   REPLI TÉLÉPHONE
   ==========================================================================
   Trois corrections, et la première est la plus importante :

   1. LE BOUTON FERMER SE DIT. Une croix de 46 px posée sur une photo
      plein écran, sans fond franc et sans mot, ne se voit pas — c'est
      exactement ce qui a été remonté : « il n'y a pas le bouton retour ».
      Il devient une pastille pleine, avec le mot « Fermer » écrit dessus, et
      il se cale sous l'encoche.

   2. LES FLÈCHES QUITTENT LA PHOTO. À 8 px des bords elles se posaient SUR
      l'image (une photo 3/4 occupe 88 % de la largeur) : on tapait la photo
      en croyant tourner la page. Elles descendent aux deux coins du bas,
      de part et d'autre de la légende.

   3. La légende laisse la place à cette rangée.

   Le glissement reste le geste principal — voir js/ui/lightbox.js.
   ========================================================================== */
@media (max-width: 620px) {
  .lightbox__btn { width: 46px; height: 46px; }

  .lightbox__close {
    top: max(var(--gutter), env(safe-area-inset-top));
    right: var(--gutter);
    width: auto;
    height: 46px;
    grid-auto-flow: column;
    gap: 8px;
    padding: 0 17px 0 14px;
    border-radius: var(--radius-pill);
    border-color: rgba(255, 255, 255, .34);
    background: rgba(10, 10, 14, .72);
    font-size: var(--t-body);
    font-weight: var(--w-medium);
  }
  .lightbox__label { display: inline; }

  .lightbox__prev,
  .lightbox__next {
    top: auto;
    margin-top: 0;
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
  }
  .lightbox__prev { left: var(--gutter); }
  .lightbox__next { right: var(--gutter); }

  .lightbox__caption {
    gap: 4px 12px;
    padding: 0 66px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .lightbox__name { font-size: 17px; }
  /* Deux lignes de description au maximum : au-delà, le texte mange la photo
     qu'il est censé légender. */
  .lightbox__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Sans animation demandée : la carte apparaît simplement à sa place finale. */
@media (prefers-reduced-motion: reduce) {
  .lightbox__veil, .lightbox__ui { transition-duration: 1ms; }
}