/* ==========================================================================
   /css/expo.css
   Expo - Tableau seul + titre dessous + navigation + swipe (effet "photo")
   + Masquage footer iPhone (Expo Caravage)
   IMPORTANT : TOUT est scopé sous body.expo-body pour éviter tout effet de bord
   ========================================================================== */

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

/* ==========================================================
   Base (scopé)
   ========================================================== */
body.expo-body{
  background: var(--expo-bg);
  color: var(--expo-ink);
}

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

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

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

/* Zone image */
body.expo-body .expo-painting-area{
  position: relative;
  display: grid;
  place-items: center;
  padding: 6px;
  overflow: hidden; /* indispensable pour l'effet balayage */
}

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

/* Image principale */
body.expo-body #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) */
body.expo-body.expo-landscape #expoPainting{
  max-width: 92%;
}
body.expo-body.expo-portrait #expoPainting{
  max-width: 78%;
}

/* Titre sous le tableau */
body.expo-body .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 */
body.expo-body .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;
}

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

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

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

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

/* ==========================================================
   Transition "balayage photo"
   ========================================================== */
body.expo-body #expoPainting.expo-anim,
body.expo-body .expo-ghost.expo-anim{
  will-change: transform;
  transition: transform 260ms ease;
}

/* image "fantôme" (la prochaine/précédente) */
body.expo-body .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);
}

@media (prefers-reduced-motion: reduce){
  body.expo-body #expoPainting.expo-anim,
  body.expo-body .expo-ghost.expo-anim{
    transition: none !important;
  }
}

/* ==========================================================
   iPhone : MASQUER le footer (Expo Caravage)
   - nécessite class="expo-footer" sur le bloc footer dans les HTML
   ========================================================== */
@media (max-width: 767px){
  body.expo-body .expo-footer{
    display: none !important;
  }
}

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

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

/* ==========================================================
   iPhone : MASQUER le footer sur les pages Expo Caravage
   (galerie + défilé)
   - sans impact ordinateur
   - ne dépend pas d’une classe ajoutée au footer
   ========================================================== */
@media (max-width: 767px){

  /* Si vous avez la classe expo-footer : */
  body.caravage-expo-galerie .expo-footer,
  body.caravage-expo-defile  .expo-footer{
    display: none !important;
  }

  /* Sécurité : même si la classe expo-footer n’est pas présente,
     on masque le dernier bloc footer standard (container-fluid bg-light) */
  body.caravage-expo-galerie > .container-fluid.bg-light:last-of-type,
  body.caravage-expo-defile  > .container-fluid.bg-light:last-of-type{
    display: none !important;
  }
}