/* ==========================================================================
   /css/expo.css
   Expo - Tableau seul + titre dessous + navigation + swipe (effet "photo")
   ========================================================================== */

:root{
  --expo-bg:#f5f5f5;
  --expo-card:#ffffff;
  --expo-border:#ddd;
  --expo-ink:#111;
  --expo-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* Page */
.expo-body{
  background: var(--expo-bg);
  color: var(--expo-ink);
}

/* IMPORTANT : navbar fixed-top => padding juste nécessaire */
.expo-container{
  padding-top: 92px; /* ajuster si besoin: 85-105 */
}

/* Cadre principal (compact) */
.expo-stage{
  background: var(--expo-card);
  border: 1px solid var(--expo-border);
  padding: 12px;
  margin-top: 0;
}

/* Layout : image + titre en dessous */
.expo-layout{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: center;
}

/* Zone image */
.expo-painting-area{
  position: relative;
  display: grid;
  place-items: center;
  padding: 6px;

  /* indispensable pour l'effet balayage : masque sortie/entrée */
  overflow: hidden;
}

/* Wrapper interne pour positionner l'image "fantôme" */
.expo-swipe-track{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

/* Image principale */
#expoPainting{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 210px); /* navbar + marges + titre */
  display: block;
  box-shadow: var(--expo-shadow);
}

/* Ajustements selon orientation (classes mises par JS) */
.expo-landscape #expoPainting{
  max-width: 92%;
}
.expo-portrait #expoPainting{
  max-width: 78%;
}

/* Titre sous le tableau */
.expo-caption{
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  padding: 4px 6px 0 6px;
  margin: 0;
  font-size: 1rem;
}

/* Flèches discrètes sur le tableau */
.expo-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 7;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  color:#111;

  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  user-select:none;

  opacity: .35;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}

.expo-arrow.prev{ left: 8px; }
.expo-arrow.next{ right: 8px; }

.expo-painting-area:hover .expo-arrow{
  opacity: .85;
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.18);
}

.expo-arrow:focus{
  outline: 2px solid rgba(220, 53, 69, .35);
  outline-offset: 2px;
  opacity: .95;
}

@media (prefers-reduced-motion: reduce){
  .expo-arrow{ transition: none; }
}

/* ==========================================================
   Transition "balayage photo" (sans disparition)
   ========================================================== */

/* l'image principale reste #expoPainting mais on l'anime via transform */
#expoPainting.expo-anim,
.expo-ghost.expo-anim{
  will-change: transform;
  transition: transform 260ms ease;
}

/* image "fantôme" (la prochaine/précédente) */
.expo-ghost{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* base, + translateX via JS */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 210px);
  display: block;
  box-shadow: var(--expo-shadow);
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce){
  #expoPainting.expo-anim,
  .expo-ghost.expo-anim{
    transition: none !important;
  }
}

/* Mobile : un peu plus compact + flèches plus petites */
@media (max-width: 576px){
  .expo-container{ padding-top: 88px; }
  .expo-stage{ padding: 10px; }
  #expoPainting{ max-height: calc(100vh - 225px); }
  .expo-ghost{ max-height: calc(100vh - 225px); }

  .expo-arrow{
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}