/* Audiovisuel : la mosaïque photo */

/* Mosaïque justifiée, sans calcul JS : chaque tuile grandit en proportion de son rapport
   largeur/hauteur (--r), donc toutes les tuiles d'une rangée finissent à la même hauteur et
   remplissent la largeur. Le recadrage (object-fit) ne mange que l'arrondi : quelques pixels.
   --h : la hauteur visée d'une rangée ; la dernière rangée ne s'étire pas (::after). */
.mosaique { --h: clamp(160px, 16vw, 300px); --espace: 10px;   /* les rangées grandissent avec l'écran */
  display: flex; flex-wrap: wrap; gap: var(--espace); }
.mosaique::after { content: ""; flex: 999 1 0; }
.tuile {
  flex: var(--r) 1 calc(var(--r) * var(--h));
  aspect-ratio: var(--r);
  margin: 0; border-radius: 3px; background: var(--fond-carte);   /* cadre : .cadre-double (base.css) */
}
.tuile a { display: block; height: 100%; cursor: zoom-in; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .8, .3, 1), filter .6s ease; }
.tuile a:hover img, .tuile a:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.tuile a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* En attendant les photos : un emplacement au trait, du format de la future image */
.tuile-vide { display: grid; place-items: center; }
.tuile-vide span { font: 12px/1 var(--police-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }

@media (max-width: 700px) { .mosaique { --h: 120px; --espace: 6px; } .tuile-vide span { font-size: 10px; letter-spacing: .08em; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .tuile img { transition: none; } }