/* ─────────────────────────────────────────────
   14-galerie.css — Galerie souvenirs (cartes polaroid)

   Paradigme : une vraie pile de polaroids qu'on feuillette
   une carte à la fois. Les piles gauche ("déjà vues") et
   droite ("à voir") montrent les vraies photos voisines,
   en réduit et rapprochées — pas de carte décorative.
   Les photos actives sont légèrement agrandies et portent
   une ombre plus large, comme "soulevées" de la pile.

   Media queries : voir 13-responsive.css.
───────────────────────────────────────────────── */

.polaroid-gallery {
  position: relative;
  background: var(--bg-alt);
  padding: var(--space-2xl) 0;
}

.polaroid-gallery__header {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.polaroid-gallery__header h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--text);
  margin: 0;
}

/* ── Géométrie du carrousel : tout est piloté par ces custom
      properties, lues telles quelles par galerie.js ── */

.polaroid-carousel {
  --active-count:  3;
  --card-w:        200px;
  --active-gap:    26px;
  --pile-gap:      10px;
  --stack-step:    8px;
  --shadow-active: 0 22px 36px rgba(31, 46, 42, 0.26);
  --shadow-pile-1: 0 4px 10px rgba(31, 46, 42, 0.14);
  --shadow-pile-2: 0 3px 7px rgba(31, 46, 42, 0.10);
  --shadow-pile-3: 0 2px 4px rgba(31, 46, 42, 0.07);

  position: relative;
  /* capture la pile de z-index internes (jusqu'à 500 pour les flèches) dans
     un contexte d'empilement local, pour ne jamais dépasser la sticky nav
     (.site-nav, z-index:100) qui vit dans un contexte parent différent */
  z-index: 1;
  /* full-bleed à tous les breakpoints : le stage doit atteindre les bords
     de la viewport pour que les piles et leur ombre ne soient jamais
     rognées par le container — plus naturel que des piles "en boîte" */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* évite qu'une sélection de texte parasite ne bloque la détection du drag */
  user-select: none;
  -webkit-user-select: none;
}

.polaroid-carousel__stage {
  --stage-scale: 1.5;

  position: relative;
  overflow: hidden;
  width: 100vw;
  margin: 0 auto;
  min-height: 360px;
  touch-action: pan-y;
  cursor: grab;
  transform: scale(var(--stage-scale));
}

.polaroid-carousel__stage:active {
  cursor: grabbing;
}

.polaroid-carousel__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ── Cartes : position/rotation/échelle calculées en JS,
      seule la transition + l'apparence restent en CSS ── */

.polaroid-carousel__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  margin: 0;
  transition: transform 0.45s cubic-bezier(.22, .68, 0, 1), opacity 0.3s ease;
}

.polaroid-carousel.is-dragging .polaroid-carousel__item {
  transition: none;
}

.polaroid-carousel__item.is-active {
  cursor: grab;
}

.polaroid-carousel__item.is-pile {
  cursor: pointer;
}

.polaroid-carousel__item.is-hidden {
  pointer-events: none;
}

/* ── Carte polaroid ── */

.polaroid {
  margin: 0;
  width: 100%;
  background: var(--white);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pile-1);
  transition: box-shadow 0.35s ease;
  pointer-events: none;
}

.polaroid-carousel__item.is-active .polaroid  { box-shadow: var(--shadow-active); }
.polaroid-carousel__item.is-pile-depth-1 .polaroid { box-shadow: var(--shadow-pile-1); }
.polaroid-carousel__item.is-pile-depth-2 .polaroid { box-shadow: var(--shadow-pile-2); }
.polaroid-carousel__item.is-pile-depth-3 .polaroid,
.polaroid-carousel__item.is-pile-depth-4 .polaroid { box-shadow: var(--shadow-pile-3); }

.polaroid__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-alt);
}

.polaroid__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}

.polaroid__caption {
  margin-top: var(--space-md);
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
  padding: 0 var(--space-xs);
  text-wrap: nowrap;
}

.polaroid-carousel__item.is-pile .polaroid__caption {
  opacity: 0.7;
}

/* ── Flèches de navigation (pas-à-pas précis) ── */

.polaroid-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(31, 46, 42, 0.12);
  background: var(--white);
  color: var(--text-sec);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  z-index: 500;
  transition: box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

.polaroid-carousel__nav--prev { left: clamp(12px, 4vw, 48px); }
.polaroid-carousel__nav--next { right: clamp(12px, 4vw, 48px); }

.polaroid-carousel__nav:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(calc(-50% - 2px));
}

.polaroid-carousel__nav:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
  transform: translateY(-50%);
}

/* ── Pied de section : dots (mobile) + mention manuscrite ── */

.polaroid-gallery__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.polaroid-gallery__dots {
  display: none;
  justify-content: center;
  gap: var(--space-xs);
}

.polaroid-gallery__dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(56, 104, 107, 0.25);
  transition: background var(--transition-base), transform var(--transition-base);
}

.polaroid-gallery__dots .dot--active {
  background: var(--accent2);
  transform: scale(1.3);
}

/* Mention manuscrite — simple incitation décorative, pas un lien
   (la flèche .galerie-arrow porte seule l'indication de direction) */

.galerie-mention {
  margin: 0;
  font-family: var(--font-script);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--hero-bg);
  text-align: center;
}

/* ── Flèche manuscrite à cheval entre la galerie et le contact ── */

.galerie-arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

.galerie-arrow img {
  display: block;
  width: 44px;
  height: auto;
}