/* album-grille.css — pages d'albums (Nature, Mes préférées, Manifs) : rangées justifiées.
   Chaque rangée a une seule hauteur et remplit exactement la largeur ; chaque photo garde
   son format entier (pas de recadrage) ; l'ordre est celui de la lecture, ligne par ligne. */

.g-grille{
  --hauteur: 140px;                     /* hauteur visée d'une rangée (le réglage principal) */
  --ecart: 8px;                         /* espace entre les photos */
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecart);
}
@media (max-width: 999px){ .g-grille{ --hauteur: 110px; } }
@media (max-width: 699px){ .g-grille{ --hauteur: 90px; --ecart: 6px; } }
@media (max-width: 479px){ .g-grille{ --hauteur: 75px;  --ecart: 5px; } }

/* La dernière rangée n'est pas étirée : cet élément invisible absorbe la place restante */
.g-grille::after{ content: ""; flex-grow: 999999; }

/* Une case = un bouton (cliquable au clavier comme à la souris).
   --r = largeur / hauteur de la photo (1.5 avant chargement, puis la vraie valeur).
   Largeur de départ = --r × --hauteur ; puis chaque case grandit en proportion de --r,
   donc toutes les photos d'une rangée gardent la même hauteur. */
.g-case{
  --r: 1.5;
  flex-grow: var(--r);
  flex-basis: calc(var(--r) * var(--hauteur));
  min-width: 0;
  padding: 0; margin: 0; border: 0; background: none;
  cursor: zoom-in; line-height: 0;
}
.g-case img{
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--r);
  background: #ece9e3;
  opacity: 0; transition: opacity 0.4s ease;
}
.g-case img.loaded{ opacity: 1; background: none; }
.g-case:hover img.loaded{ opacity: 0.82; }
.g-case:focus-visible{ outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* Pleine largeur : la zone qui contient la grille s'étend d'un bord à l'autre de la fenêtre */
.g-section:has(> .g-grille){ max-width: none; padding-left: 8px; padding-right: 8px; }