/**
 * Plazur — Galerie de réalisations
 * Grille produit responsive + visionneuse accessible. Portée limitée aux blocs .plz-gal*.
 */

.plz-gal { margin: 0; }

.plz-gal__intro { max-width: 62ch; margin: 0 0 2rem; }

/* --- Grille : nombre de colonnes explicite, cartes de taille homogène --- */
.plz-gal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px)  { .plz-gal__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .plz-gal__grid { grid-template-columns: repeat(4, 1fr); } }

/* Bandeaux compacts (accueil, expertise) : cartes plus petites, plus nombreuses. */
.plz-gal__grid--compact { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px)  { .plz-gal__grid--compact { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .plz-gal__grid--compact { grid-template-columns: repeat(5, 1fr); } }

.plz-gal__item { margin: 0; }

/* --- Carte produit -------------------------------------------------------
   Les photographies portent déjà un fond clair (#F2F2F0) incrusté : un simple
   fond de carte clair ne détache donc pas les produits blancs ou crème.
   La carte joue le rôle de passe-partout, dans un ton plus soutenu que la
   photographie, et la photographie est posée dessus comme un panneau lumineux
   avec une ombre de contact. Le produit pâle retrouve ainsi une limite lisible.
   Aucune retouche n'est appliquée aux images. */
.plz-gal__btn {
  position: relative;
  display: block; width: 100%; cursor: zoom-in;
  padding: clamp(7px, 1.1vw, 11px);
  border: 1px solid rgba(24,28,32,.12);
  border-radius: 14px;
  background: linear-gradient(180deg, #edebe6 0%, #e5e2dc 100%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plz-gal__btn:hover { border-color: rgba(24,28,32,.28); box-shadow: 0 6px 20px -10px rgba(20,24,28,.38); }
.plz-gal__btn:focus-visible { outline: 3px solid #b8332a; outline-offset: 3px; }

/* Scène : le panneau clair qui reçoit la photographie. */
.plz-gal__stage {
  position: relative; display: block; overflow: hidden;
  border-radius: 8px; background: #f2f2f0;
  box-shadow: 0 1px 2px rgba(20,24,28,.13), 0 8px 16px -12px rgba(20,24,28,.30);
}
/* Assombrissement très léger des bords de la scène : donne une limite au
   produit clair sans toucher aux pixels de la photographie. */
.plz-gal__stage::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(24,28,32,.10), inset 0 0 44px rgba(24,28,32,.085);
}

.plz-gal__btn img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; background: #f2f2f0;
  transition: transform .2s ease;
}
@media (hover: hover) {
  .plz-gal__btn:hover img { transform: scale(1.022); }
}

/* Pastille « N vues » : discrète, hors du centre du produit. */
.plz-gal__badge {
  position: absolute; right: 14px; top: 14px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(16,20,24,.60); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  line-height: 1.55; pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- visionneuse ---------- */
.plz-lb[hidden] { display: none; }
.plz-lb {
  position: fixed; inset: 0; z-index: 9999; background: rgba(12,13,14,.96);
  display: flex; flex-direction: column;
}
.plz-lb__bar {
  display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem;
  color: #d6dade; font-size: .82rem; border-bottom: 1px solid #26292c;
}
.plz-lb__count { flex: 1; }
.plz-lb__close, .plz-lb__nav {
  background: #1e2124; color: #eceef0; border: 1px solid #33373b;
  border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
}
.plz-lb__close { padding: .45rem .9rem; }
.plz-lb__close:focus-visible, .plz-lb__nav:focus-visible { outline: 3px solid #b8332a; outline-offset: 2px; }

.plz-lb__stage {
  flex: 1; position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 0; padding: 1rem;
}
/* Dans la visionneuse, la photographie garde son fond clair : posée sur le
   fond sombre avec un liseré et une ombre de contact, un produit blanc ou
   transparent conserve une silhouette lisible. Aucune retouche d'image. */
.plz-lb__stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: #f2f2f0; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 18px 46px -22px rgba(0,0,0,.85);
}
.plz-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 76px; font-size: 1.6rem; line-height: 1;
}
.plz-lb__nav[hidden] { display: none; }
.plz-lb__nav--prev { left: 12px; } .plz-lb__nav--next { right: 12px; }
.plz-lb__cap {
  padding: .8rem 1.1rem; color: #cfd3d7; font-size: .86rem; line-height: 1.5;
  border-top: 1px solid #26292c; text-align: center;
}
@media (max-width: 640px) {
  .plz-lb__nav { width: 40px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .plz-gal__btn, .plz-gal__btn img, .plz-gal__item { transition: none !important; animation: none !important; }
  .plz-gal__btn:hover img { transform: none; }
}

/* --- Révélation progressive « Voir plus de réalisations » --- */
.plz-gal__more { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.plz-gal__more-actions {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; flex-wrap: wrap; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
.plz-gal__more-btn {
  padding: .78rem 1.6rem; border: 1px solid rgba(0,0,0,.28); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-weight: 600;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.plz-gal__more-btn:hover { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.5); }
.plz-gal__more-btn:focus-visible { outline: 3px solid #b8332a; outline-offset: 3px; }
.plz-gal__more-btn[hidden] { display: none; }
.plz-gal__more-count { font-size: .88rem; opacity: .68; }
.plz-gal__item[hidden] { display: none; }

/* Bandeau réalisations page d accueil */
.plz-home-real { padding: clamp(3rem,6vw,5rem) 0; background: #f7f7f5; }
.plz-home-real .plz-gal__intro { margin-bottom: 1.6rem; }

/* Cible tactile : minimum 44px de hauteur sur mobile. */
.plz-gal__more-btn{min-height:44px;}

/* --- Fin de page « Nos réalisations » --------------------------------------
   Cette page réutilise les classes .plz-expind__* dont les styles sont déclarés
   dans un bloc <style> propre au partiel « Notre expertise industrielle » : ils
   ne sont donc jamais émis ici. Le bloc CTA final arrivait sans aucune marge,
   d'où le bouton « Nous contacter » posé contre le pied de page sombre.
   Ces règles ne rétablissent que la fin de page, sans toucher au reste du
   gabarit — les sections sont pleine largeur sur cette page et un habillage
   en carte y déborderait. */
.plz-gal-page .plz-expind__sec { margin-bottom: clamp(48px, 6vw, 70px); }
.plz-gal-page .plz-expind__cta {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.plz-gal-page .plz-expind__cta h2 { margin-top: 0; }
.plz-gal-page .plz-expind__cta p  { max-width: 60ch; }