/* =========================================================
   BLUUPI — PHOTOS DES FICHES (hôtels et restaurants)
   Carrousel et pop-up plein écran, mobile et ordinateur
   Fichier : /app/assets/styles/pages/fiche-photos.css
========================================================= */

/* Carrousel : le cadre .hotel-hero fixe le format, la page ne saute pas. */
.fiche-track,
.fiche-viewer-track{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.fiche-track::-webkit-scrollbar,
.fiche-viewer-track::-webkit-scrollbar{
  display:none;
}

.fiche-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  cursor:zoom-in;
}

.fiche-slide:focus-visible,
.fiche-arrow:focus-visible,
.fiche-viewer-close:focus-visible,
.hotel-thumb:focus-visible{
  outline:3px solid var(--light-blue);
  outline-offset:-3px;
}

.fiche-arrow{
  position:absolute;
  top:50%;
  z-index:2;
  width:44px;
  height:44px;
  display:none;
  place-items:center;
  padding:0 0 3px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--primary);
  font-size:28px;
  line-height:1;
  transform:translateY(-50%);
  box-shadow:var(--soft-shadow);
  cursor:pointer;
}

.fiche-arrow-prev{
  left:14px;
}

.fiche-arrow-next{
  right:14px;
}

.fiche-arrow:disabled{
  opacity:0;
  pointer-events:none;
}

/* Flèches à l'écran : avec une souris, ou sur grand écran. */
@media (hover:hover) and (pointer:fine),(min-width:1200px){
  .fiche-arrow{
    display:grid;
  }
}

.fiche-counter{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:2;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(8,24,38,.68);
  color:#fff;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

.hotel-hero .hotel-hero-actions{
  z-index:2;
  pointer-events:none;
}

.hotel-hero .hotel-round-btn{
  pointer-events:auto;
}


/* =========================================================
   POP-UP PLEIN ÉCRAN
========================================================= */

/* La page ne défile pas derrière et garde sa position. */
html.fiche-locked{
  overflow:hidden;
}

.fiche-viewer{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:#050f19;
  color:#fff;
  overflow:hidden;
}

.fiche-viewer::backdrop{
  background:#050f19;
}

.fiche-viewer-track{
  touch-action:pan-x pinch-zoom;
}

.fiche-viewer-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.fiche-viewer-slide img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}

.fiche-viewer-close{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  z-index:3;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0 0 3px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.fiche-viewer .fiche-counter{
  right:auto;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
}