/* ══════════════════════════════════════════════
   VOYAGE — Anneau 3D des temples (scroll-driven)
   Desktop only. Mobile = timeline seule.
   ══════════════════════════════════════════════ */

.voyage-layout{
  display:block;
  max-width:920px;
  margin-inline:auto;
  padding-inline:0;
}
@media (min-width:980px){
  .voyage-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(260px, .7fr);
    gap:clamp(1.5rem, 3vw, 3rem);
    max-width:1180px;
    padding-inline:var(--pad-x);
    align-items:start;
  }
  .voyage-layout .timeline{
    max-width:none;
    margin-inline:0;
    padding-inline:0;
  }
  .voyage-layout .timeline::before,
  .voyage-layout .timeline-fill{
    left:3.1rem;
  }
}

.voyage-scene{ display:none; }
@media (min-width:980px){
  .voyage-scene{
    display:block;
    position:sticky;
    top:clamp(5.5rem, 12vh, 7rem);
    height:min(68vh, 32rem);
    perspective:1100px;
    perspective-origin:50% 42%;
  }
}
.voyage-scene-inner{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
}
.temple-ring{
  position:absolute;
  left:50%; top:44%;
  width:10.5rem; height:14.5rem;
  margin-left:-5.25rem; margin-top:-7.25rem;
  transform-style:preserve-3d;
  will-change:transform;
}
.temple-face{
  position:absolute; inset:0;
  border-radius:1.1rem;
  overflow:hidden;
  backface-visibility:hidden;
  border:1px solid color-mix(in srgb, var(--encre) 18%, transparent);
  box-shadow:0 18px 40px rgba(41,31,22,.22);
  background:var(--osiris);
  transform:
    rotateY(calc(var(--i) * 36deg))
    translateZ(13.5rem);
}
.temple-face img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:brightness(.78) saturate(.92);
  transition:filter .4s ease;
}
.temple-face.is-front img{
  filter:brightness(1.02) saturate(1.05);
}
.temple-face .tf-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.9rem .85rem 1rem;
  background:linear-gradient(0deg, rgba(23,19,16,.92), transparent);
  color:var(--calcaire);
  text-align:center;
}
.temple-face .tf-nom{
  display:block;
  font-family:var(--f-display);
  font-size:1.1rem; font-weight:500; line-height:1.1;
}
.temple-face .tf-verbe{
  display:block; margin-top:.3em;
  font-family:var(--f-display); font-style:italic;
  font-size:.95rem; color:var(--ocre-clair);
  line-height:1.2;
}

.voyage-scene-caption{
  position:absolute; left:0; right:0; bottom:0;
  text-align:center;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ocre); opacity:.85;
  padding-inline:.5rem;
}
.voyage-scene-caption strong{
  display:block;
  margin-top:.35em;
  font-family:var(--f-display); font-style:italic;
  font-weight:400; font-size:1.05rem;
  letter-spacing:0; text-transform:none;
  color:var(--encre); opacity:1;
  line-height:1.3;
}

@media (prefers-reduced-motion: reduce){
  .temple-ring{ transition:none !important; }
}