.fnpg-wrap,.fnpg-editor{width:100%}

/* Bloc dans son conteneur, sans décalage horizontal. */
.fnpg-wrap{
  position:relative;
  left:auto;
  width:100%;
  max-width:100%!important;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
}

.fnpg-title{text-align:center;margin:0 0 1.25rem;font-weight:400}
.fnpg-tabs{display:flex;justify-content:center;align-items:center;gap:clamp(1.25rem,4vw,3.25rem);margin:0 auto 2rem;overflow-x:auto;overflow-y:visible;padding:.5rem .5rem .6rem;scrollbar-width:none}
.fnpg-tabs::-webkit-scrollbar{display:none}
.fnpg-tab{position:relative;flex:0 0 auto;border:0;background:none;padding:.2rem 0 .45rem;color:inherit;font:inherit;line-height:1.4;height:auto;min-height:0;overflow:visible;opacity:.55;cursor:pointer}
.fnpg-tab:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:currentColor;transform:translateX(-50%);transition:width .25s}
.fnpg-tab.is-active{color:inherit;opacity:1}
.fnpg-tab.is-active:after{width:100%}
.fnpg-panel[hidden]{display:none!important}

/* Une seule ligne : 4 photos visibles, les suivantes défilent horizontalement. */
.fnpg-grid{
  --fnpg-gap:6px;
  --fnpg-visible:4;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--fnpg-gap);
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x;
}
.fnpg-grid::-webkit-scrollbar{display:none}
.fnpg-grid.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}

.fnpg-card{
  display:block;
  flex:0 0 calc((100% - (var(--fnpg-visible) - 1) * var(--fnpg-gap)) / var(--fnpg-visible));
  min-width:0;
  overflow:hidden;
  background:#f2f2f2;
  scroll-snap-align:start;
}

.fnpg-image{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  height:auto;
  object-fit:cover;
  object-position:center;
}

.fnpg-message,.fnpg-editor-note{text-align:center}

@media(max-width:800px){
  .fnpg-grid{--fnpg-visible:2;--fnpg-gap:5px}
}

@media(max-width:520px){
  .fnpg-tabs{justify-content:flex-start;gap:1.25rem}
  .fnpg-grid{--fnpg-visible:2;--fnpg-gap:4px}
}