/* =========================
   MAIN OFFSET
========================= */

main {
  padding-top: 0px;
}


/* =============================================
   SECTION STACK (photos empilées, effet scroll)
   ============================================= */

.stack-section {
  padding: 0 80px;
  background: var(--bg);
}

/* Chaque carte se "colle" en haut lors du scroll (effet d'empilement) */
.photo-card {
  position: sticky;
  top: 100px;                     /* Distance depuis le haut de la fenêtre quand elle "colle" */
  height: calc(var(--vh) * 80);   /* 80% de la hauteur visible */
  margin-bottom: 100px;           /* Espace pour déclencher l'empilement de la carte suivante */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5); /* Ombre vers le haut pour simuler la profondeur */
}

/* Badge texte en haut à droite de chaque carte */
.card-label {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  background: rgba(0, 0, 0, 0.5);  /* Fond semi-transparent pour lisibilité */
  padding: 8px 12px;
  border-radius: 4px;
  backdrop-filter: blur(5px);       /* Flou de l'arrière-plan derrière le badge */
}

/* L'image remplit toute la carte */
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* Recadre sans déformer */
  transition: transform 0.5s ease;
  cursor: pointer;
}


/* =========================
   IMAGE OVERLAY
========================= */

.image-overlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.85);
}

#full-image {
  max-width: 90%;
  max-height: 90%;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .photo-card {
    position: relative;
    height: auto;        /* 🔥 clé du fix */
    margin-bottom: 20px;
    aspect-ratio: 3 / 4; /* même ratio que desktop */
  }

  .photo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🔥 image ENTIEREMENT visible */
    background: black;   /* évite les bandes blanches */
  }

}