/* MS STAPS NICE — Galerie (masonry + modal + buttons) */
:root{ --ms-primary:#0ea5e9; }

.g-masonry{column-gap:1rem}
@media(min-width:1140px){.g-masonry{column-count:4}}
@media(min-width:720px) and (max-width:1139px){.g-masonry{column-count:3}}
@media(max-width:719px){.g-masonry{column-count:1}}

.g-card{break-inside:avoid;margin:0 0 1rem;border-radius:1rem;overflow:hidden;background:#fff}
.g-card img{display:block;width:100%;height:auto;border-radius:1rem;object-fit:cover}
.g-card img.is-fallback{aspect-ratio:1/1;background:#f1f5f9;padding:12%} /* carré 1:1 pour fallback */

.g-card__open,.g-card__open-collection{display:block;background:none;border:0;padding:0;width:100%;cursor:pointer}

.g-loadmore{display:flex;justify-content:center;margin:1.25rem 0}
.g-btn{display:inline-flex;align-items:center;gap:.65rem;border:1px solid rgba(0,0,0,.08);padding:.7rem 1rem;border-radius:1rem;text-decoration:none;background:#fff;color:#0f172a;font-weight:600;line-height:1;min-width:240px}
.g-btn:focus{outline:3px solid var(--ms-primary);outline-offset:2px}

.g-nores{border:1px solid rgba(0,0,0,.08);border-radius:1.25rem;padding:1rem;background:#f8fafc}

/* HERO — reste 100% indépendant du grid/modale */
#hero-img{display:block;width:100%;height:100%;object-fit:cover}

/* Modale */
.g-modal{position:fixed;inset:0;background:rgba(2,6,23,.78);display:none;align-items:center;justify-content:center;padding:1rem;z-index:1000}
.g-modal.open{display:flex}
.g-modal__box{position:relative;max-width:min(96vw,1240px);max-height:92vh}
.g-modal__img{display:block;max-width:100%;max-height:92vh;border-radius:1rem;background:#0b1120}
.g-modal__meta{position:absolute;left:0;right:0;bottom:-.5rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;opacity:.96}
.g-modal__btn{position:absolute;top:.5rem;background:rgba(15,23,42,.55);color:#fff;border:none;border-radius:.6rem;padding:.4rem .6rem;cursor:pointer}
.g-modal__close{right:.5rem}
.g-modal__prev{left:.5rem}
.g-modal__next{right:3.2rem}
.g-modal__btn:focus{outline:3px solid var(--ms-primary)}
.g-badge{background:rgba(15,23,42,.72);color:#fff;border:1px solid rgba(255,255,255,.25);padding:.28rem .55rem;border-radius:.55rem;font-size:.9rem}

/* Placeholder modale (chargement) */
.g-modal__placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:1rem;background:#0b1120;color:#cbd5e1;gap:.6rem;
}
.g-modal__spinner{
  width:34px;height:34px;border-radius:50%;border:3px solid #475569;border-top-color:#e2e8f0;
  animation:gspin 1s linear infinite;
}
.g-modal__text{font-size:.95rem;opacity:.9}
@keyframes gspin{to{transform:rotate(360deg)}}

/* A11Y */
a:focus, button:focus, select:focus, input:focus{outline:3px solid var(--ms-primary);outline-offset:2px}

/* Espace sous la mosaïque (évite qu’elle colle le footer) */
#results { padding-bottom: 2.5rem; }
@media (min-width: 720px)  { #results { padding-bottom: 3rem; } }
@media (min-width: 1140px) { #results { padding-bottom: 4rem; } }