/* ===== OSS 117 — Diaporama (top→bottom), zoom cover→contain, NB→couleur, mobile-first ===== */

:root{
  --bg: #000;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.55);

  --enter-ms: 900ms;   /* slide in */
  --reveal-ms: 900ms;  /* NB -> couleur */
  --exit-ms: 600ms;    /* sortie */
  --zoom-ms: 1100ms;   /* zoom doux sur la couche cover (≈ 0.9s→2.0s) */
}

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  overflow: hidden;
  cursor: none; /* kiosque desktop; réactivé sur mobile */
}

.oss2-root {
  position: fixed; inset: 0;
  background: var(--bg);
  overflow: hidden;
}

.oss2-stage { position: absolute; inset: 0; overflow: hidden; }

/* ---- Carte ---- */
.oss2-card {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  background: #000;            /* bandes noires autour du "contain" */
  --enter-delay: 0ms;          /* fourni par JS (stagger par rangée) */
}

/* Deux calques image superposés */
.oss2-card .layer {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-position: 50% 50%;
  filter: grayscale(1) saturate(0) contrast(.95) brightness(.95);
  transition: filter var(--reveal-ms) ease, opacity 420ms ease, transform var(--zoom-ms) ease;
}

/* Calque COVER (remplit, recadré) */
.oss2-card .img-cover {
  object-fit: cover;
  opacity: 1;
  transform: scale(1.05);  /* léger zoom-in à l'arrivée */
}

/* Calque CONTAIN (image complète, bandes noires si besoin) */
.oss2-card .img-contain {
  object-fit: contain;
  opacity: 0;              /* caché au début */
  transform: scale(1.0);
}

/* Passage en couleur */
.oss2-card.live .layer {
  filter: grayscale(0) saturate(1) contrast(1) brightness(1);
}

/* Cross-fade vers image complète + arrêt du zoom */
.oss2-card.show-contain .img-cover  { opacity: 0; transform: scale(1.00); }
.oss2-card.show-contain .img-contain{ opacity: 1; }

/* Entrée top→bottom (toujours), avec délai par rangée */
@keyframes in-top {
  from { opacity:0; transform: translate3d(0,-60px,0) rotate(-0.8deg); }
  to   { opacity:1; transform: translate3d(0,0,0) rotate(0); }
}
.oss2-card.enter-top { animation: in-top var(--enter-ms) cubic-bezier(.2,.7,.2,1) var(--enter-delay) forwards; }

/* Sortie */
@keyframes out-fade { to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.995); } }
.oss2-card.exit { animation: out-fade var(--exit-ms) ease forwards; }

/* UI discrète */
.oss2-ui {
  position: fixed; left: 16px; bottom: 16px; z-index: 10;
  display: flex; gap: 8px;
  opacity: 0; transition: opacity .25s ease;
}
.oss2-root.show-ui .oss2-ui { opacity: 1; }
.oss2-btn {
  appearance: none; border: none; border-radius: 999px;
  padding: 10px 14px;
  background: rgba(0,0,0,.45); color: #fff;
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.oss2-btn:focus { outline: 2px solid rgba(255,255,255,.35); }


/* === Transitions douces entre cover et contain === */

/* Calques préparés */
.oss2-card .img-cover,
.oss2-card .img-contain {
  transition: opacity 1.2s ease, transform 1.5s ease;
  will-change: opacity, transform;
}

/* Quand on passe à contain → fade in + léger zoom-out */
.oss2-card .img-contain.active {
  opacity: 1;
  transform: scale(1);
}

/* Par défaut (caché avant activation) */
.oss2-card .img-contain {
  opacity: 0;
  transform: scale(1.05); /* petit zoom pour éviter flash */
}

/* Le cover, lui, s'efface doucement */
.oss2-card .img-cover.fadeout {
  opacity: 0;
  transform: scale(1.02);
}

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  :root{ --radius: 14px; --enter-ms: 780ms; --reveal-ms: 780ms; --exit-ms: 520ms; }
}
@media (max-width: 640px){
  html, body { cursor: auto; }
  .oss2-btn { padding: 12px 16px; font-size: 15px; }
  .oss2-ui { left: 12px; bottom: 12px; }
  :root{ --shadow: 0 16px 48px rgba(0,0,0,.5); --enter-ms: 720ms; --reveal-ms: 680ms; --exit-ms: 480ms; }
}
@media (max-width: 420px){
  :root{ --radius: 12px; --shadow: 0 12px 36px rgba(0,0,0,.48); }
  .oss2-btn { padding: 10px 14px; font-size: 14px; }
}