/* mosaïque photographique pleine largeur */
.mo{position:relative;display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);
  grid-template-rows:1fr 1fr;gap:2px;background:var(--line);
  height:clamp(340px,41vw,590px)}
.mo__i{position:relative;display:block;overflow:hidden;background:var(--navy);border:0;
  padding:0;margin:0;cursor:zoom-in;min-width:0;min-height:0}
.mo__i:first-of-type{grid-row:1/3}
.mo__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.mo__i:hover img{transform:scale(1.035)}
.mo__i:focus-visible{outline-offset:-4px;outline-color:#fff}
.mo__all{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;border:0;cursor:pointer;font-family:var(--ui);
  font-weight:800;font-size:.8rem;letter-spacing:.04em;padding:13px 18px;
  transition:background .16s}
.mo__all:hover{background:var(--blue)}

/* L'image est dans un <picture> (WebP et JPEG) : il remplit la case comme l'image de la maquette */
.mo__i picture{display:block;width:100%;height:100%}
/* Moins de trois photos : une seule case, ou deux colonnes pleine hauteur */
.mo--1{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr}
.mo--2 .mo__i{grid-row:1/3}
.mo--petite{background:var(--wash)}
.mo--petite .mo__i{background:var(--wash)}
.mo--petite .mo__i img{object-fit:contain;padding:clamp(14px,2.4vw,34px) clamp(14px,2.4vw,34px) clamp(60px,7vw,104px)}
.mo--petite .mo__i:hover img{transform:none}
@media (max-width:700px){
  .mo{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;height:clamp(250px,68vw,420px)}
  .mo__i:not(:first-of-type){display:none}
}