/* screen97 - éventail d'images des quatre étapes (inspiré de la Fan Gallery de ReactDrops, version maison).
   Position, rotation et survol sont calculés par assets/js/fan-gallery.js ; --e (0 à 1) vient du défilement. */
.fan {
  --cw: 180px;
  position: relative; width: 100%; max-width: 800px;
  height: calc(var(--cw) * 1.25 + 90px);
  scale: calc(0.9 + var(--e, 1) * 0.1);
  opacity: calc(0.35 + var(--e, 1) * 0.65);
}
.fan-card {
  --bx: 0; --by: 0; --br: 0; --px: 0; --py: 0; --on: 0; --sc: 1; --z: 1;
  position: absolute; left: 50%; top: 56px;
  width: var(--cw); aspect-ratio: 0.8; margin-left: calc(var(--cw) / -2);
  border-radius: 18px; overflow: hidden; z-index: var(--z);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transform:
    translate(calc((var(--bx) * var(--e, 1) + var(--px)) * 1px), calc((var(--by) * var(--e, 1) + var(--py)) * 1px))
    rotate(calc(var(--br) * var(--e, 1) * (1 - var(--on)) * 1deg))
    scale(var(--sc));
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform; cursor: pointer;
}
.fan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fan-card picture, .fan-card img { display: block; width: 100%; height: 100%; }
.fan-card img { object-fit: cover; -webkit-user-drag: none; user-select: none; }
.fan-card.is-active {
  border-color: var(--accent-bright, var(--accent));
  box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent-bright, var(--accent)) 50%, transparent);
}
.fan-cap {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 8px;
  padding: 28px 12px 11px; color: #fff; font-weight: bold; font-size: 0.92rem; white-space: nowrap;
  background: linear-gradient(to top, rgba(8, 18, 22, 0.82), transparent);
}
.fan-cap b {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-bright, var(--accent)); color: #08161b; font-size: 0.8rem;
}
@media (max-width: 1000px) {
  .fan { max-width: 480px; height: calc(var(--cw) * 1.25 + 50px); }
  .fan-card { top: 28px; border-radius: 14px; }
  .fan-cap { font-size: 0.78rem; padding: 20px 8px 8px; }
  .fan-cap b { width: 20px; height: 20px; font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fan, .fan-card { transition: none; }
}