/* Bloc Galerie : maquette docs/i4s-actualite-salon.html (.ga), plus les variantes à une, deux, trois et quatre photos.
   La visionneuse vient de produit/visionneuse.css. */
.ga{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,220px);gap:2px;
  background:var(--line)}
.ga__i{position:relative;display:block;border:0;padding:0;margin:0;background:var(--navy);overflow:hidden;
  cursor:zoom-in;min-width:0}
.ga__i:first-child{grid-column:span 2;grid-row:span 2}
.ga__i picture{display:block;width:100%;height:100%}
.ga__i img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ga__i:hover img{transform:scale(1.04)}
.ga__i:focus-visible{outline-offset:-4px;outline-color:#fff}
.ga__n{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:8px;background:var(--navy);
  color:#fff;font-family:var(--ui);font-weight:800;font-size:.78rem;padding:10px 14px}

/* Moins de cinq photos : la grille se referme sans case vide */
.ga--1{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(260px,38vw,560px)}
.ga--1 .ga__i:first-child{grid-column:auto;grid-row:auto}
.ga--1 .ga__i img{object-fit:contain}
/* Photo seule et très large (panoramique) : la rangée prend sa hauteur, sans aplat au-dessus ni au-dessous */
.ga--1.ga--pano{grid-auto-rows:auto}
.ga--1.ga--pano .ga__i img{height:auto}
.ga--2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(220px,26vw,420px)}
.ga--2 .ga__i:first-child{grid-column:auto;grid-row:auto}
.ga--3 .ga__i:not(:first-child){grid-column:span 2}
.ga--4 .ga__i:nth-child(2){grid-column:span 2}

@media (max-width:1000px){
  .ga{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga--1{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ga--2{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(200px,60vw,320px)}
}