/* ==========================================================================
   gallery.css — galerie de projet + visionneuse modale (lot 9).
   Variables sémantiques uniquement (compatible 6 thèmes). Sans JS, seules la
   miniature (lien) et le bouton s'affichent ; la modale est pilotée par JS.
   ========================================================================== */

/* --- Dans la carte projet ------------------------------------------------ */
.project__gallery { display: flex; flex-direction: column; }
.project__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: var(--bw) solid var(--border);
}
.project__thumb img { width: 100%; height: 100%; object-fit: cover; }
.project__thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.project__thumb-count {
  position: absolute;
  right: var(--space-2); bottom: var(--space-2);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--on-primary); background: var(--primary);
  border-radius: var(--radius-sm); padding: 0.15rem 0.45rem;
}
.project__gallery-open { align-self: flex-start; margin: var(--space-4) var(--space-5); }
.gallery-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-tag); }
/* Pas d'anneau de focus au clic souris ; conservé au clavier (RGAA). */
.project__gallery-open:focus:not(:focus-visible) { outline: none; }

/* --- Visionneuse modale -------------------------------------------------- */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 2rem);
  padding-bottom: calc(clamp(0.75rem, 2vw, 2rem) + env(safe-area-inset-bottom, 0px));
}
.gallery-modal[hidden] { display: none; }

.gallery-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 18, 0.72);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.gallery-modal.is-open .gallery-modal__backdrop { opacity: 1; }

.gallery-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(100%, 62rem);
  max-height: 100%;
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  opacity: 0;
  transform: translateY(0.5rem) scale(0.99);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.gallery-modal.is-open .gallery-modal__dialog { opacity: 1; transform: none; }

.gallery-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.gallery-modal__title { font-size: var(--fs-h3); font-weight: 700; }
.gallery-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--text); cursor: pointer;
}
.gallery-modal__close:hover { background: var(--accent); }
.gallery-modal__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery-modal__close svg { width: 1.25rem; height: 1.25rem; }

.gallery-modal__stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  background: var(--surface-2);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-modal__img {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  width: auto; height: auto;
  object-fit: contain;
}
.gallery-modal__error {
  padding: var(--space-6);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-small);
}

.gallery-modal__caption { color: var(--muted); font-size: var(--fs-small); max-width: 70ch; }

.gallery-modal__controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.gallery-modal__counter { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--faint); }
.gallery-modal__nav { display: flex; gap: var(--space-2); }
.gallery-modal__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0.4rem 0.8rem;
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--text); font-weight: 600; font-size: 0.8125rem;
  cursor: pointer;
}
.gallery-modal__btn:hover:not(:disabled) { background: var(--accent); }
.gallery-modal__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery-modal__btn:disabled { color: var(--faint); border-color: var(--border); cursor: not-allowed; }
.gallery-modal__btn svg { width: 1.1rem; height: 1.1rem; }

/* Le bouton « Retour en haut » ne doit jamais passer devant la visionneuse. */
.gallery-open .back-to-top { display: none !important; }

@media (max-width: 599.98px) {
  .gallery-modal__dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .gallery-modal__img { max-height: 62vh; }
  .gallery-modal__btn span.gallery-modal__btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-modal__backdrop,
  .gallery-modal__dialog { transition: none; }
}