/**
 * Mur d'images (template « Mur »)
 * Rangées justifiées en CSS : chaque vignette grandit proportionnellement à son ratio (--r = largeur / hauteur),
 * toutes les images d'une rangée ont donc la même hauteur.
 */

.mur-page {
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xl);
}

.mur-titre {
  font-size: 1.4em;
  font-weight: 400;
  margin: 0 0 var(--spacing-md);
  color: var(--color-text-dark);
}

.mur-titre span {
  font-size: .75em;
  color: var(--color-text);
}

.mur {
  --h: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* Dernière rangée : les vignettes gardent leur taille de base au lieu d'être étirées */
.mur::after {
  content: "";
  flex-grow: 1000000;
}

.mur__item {
  display: block;
  flex-grow: calc(var(--r) * 100);
  flex-basis: calc(var(--r) * var(--h));
  overflow: hidden;
  background: var(--border-color);
}

.mur__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow), opacity var(--transition-normal);
}

.mur__item:hover img,
.mur__item:focus-visible img {
  transform: scale(1.04);
  opacity: .92;
}

.mur__item:focus-visible {
  outline: 3px solid #282A65;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .mur {
    --h: 150px;
    gap: var(--spacing-xs);
  }
}

/* ---------- Visionneuse ---------- */

html.visionneuse-ouverte {
  overflow: hidden;
}

.visionneuse {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: transparent;
  overscroll-behavior: contain;
}

.visionneuse::backdrop {
  background: rgba(255, 255, 255, .9);
}

.visionneuse[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visionneuse figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: calc(100vw - 140px);
}

.visionneuse__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  width: auto;
  height: auto;
  background: var(--bg-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: visionneuse-apparition var(--transition-normal);
}

.visionneuse figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: 16px;
}

.visionneuse__compteur {
  color: var(--color-text);
}

.visionneuse__lien,
.visionneuse__partager {
  padding: 4px 14px 5px;
  border: 1px solid #282A65;
  border-radius: 5px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.visionneuse__lien {
  color: #FFF;
  background: #282A65;
}

.visionneuse__partager {
  color: #282A65;
  background: var(--bg-white);
}

.visionneuse__lien:hover,
.visionneuse__lien:focus-visible {
  color: #282A65;
  background: var(--bg-white);
}

.visionneuse__partager:hover,
.visionneuse__partager:focus-visible {
  color: #FFF;
  background: #282A65;
}

.visionneuse__bouton {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #282A65;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.visionneuse__bouton:hover,
.visionneuse__bouton:focus-visible {
  background: #282A65;
  color: #FFF;
}

.visionneuse__fermer {
  top: 15px;
  right: 15px;
}

.visionneuse__prec,
.visionneuse__suiv {
  top: 50%;
  transform: translateY(-50%);
}

.visionneuse__prec {
  left: 15px;
}

.visionneuse__suiv {
  right: 15px;
}

@media (max-width: 767px) {
  .visionneuse[open] {
    padding-bottom: 70px;
  }

  .visionneuse figure {
    max-width: calc(100vw - 20px);
  }

  .visionneuse__image {
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
  }

  .visionneuse__prec,
  .visionneuse__suiv {
    top: auto;
    bottom: 15px;
    transform: none;
  }
}

@keyframes visionneuse-apparition {
  from {
    opacity: 0;
    transform: scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mur__item img,
  .visionneuse__image {
    transition: none;
    animation: none;
  }

  .mur__item:hover img {
    transform: none;
  }
}