/* =====================================================================
   Visual Memories — expérience au défilement (vm-experience.js)
   Couche indépendante : chaque effet n'est actif que si sa classe
   « fx-… » est posée par le script. Sans JS ou en mouvement réduit,
   le site reste exactement tel qu'il est.
   ===================================================================== */

/* ---------- Transitions entre pages (navigateurs récents) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vm-vt-out .5s cubic-bezier(.65, .05, .36, 1) both; }
::view-transition-new(root) { animation: vm-vt-in .8s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes vm-vt-out { to { opacity: 0; transform: scale(.992); } }
@keyframes vm-vt-in { from { opacity: 0; transform: scale(1.008); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- 1. L'arche qui s'ouvre ---------- */
.fx-arch .fx-arch-track { position: relative; }
.fx-arch .fx-arch-track > .hero { position: sticky; top: 0; }
.fx-arch .hero__media.fx-open {
  inset: auto;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  will-change: clip-path;
  --py: 0px !important;
}
.fx-arch .hero__media.fx-open::after { display: none; }
.fx-arch .hero__media.fx-open .media__ph { right: auto; bottom: auto; transform: none; transition: opacity .8s; }
.fx-arch .hero__media.fx-open .hero__poster,
.fx-arch .hero__media.fx-open .hero__video { inset: 0; height: 100%; scale: var(--fx-zoom, 1); }
.fx-arch .hero.fx-on .hero__arch::before { opacity: calc(1 - var(--fx-p, 0) * 2.4); }
.fx-arch .hero.fx-on .seal { opacity: calc(1 - var(--fx-p, 0) * 2.6); }
.fx-arch .hero.fx-on .hero__scroll { opacity: calc(1 - var(--fx-p, 0) * 6); }
.fx-arch .hero.fx-on .hero__content { will-change: transform, opacity; }

/* ---------- 2. Le fil d'or (bureau) ---------- */
.fx-thread {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.fx-thread path {
  fill: none;
  stroke: url(#fx-thread-grad);
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: .8;
}
.fx-thread circle {
  fill: #FFF8EA;
  stroke: #B8955E;
  stroke-width: 1;
  filter: drop-shadow(0 0 5px rgba(214, 180, 120, .95)) drop-shadow(0 0 14px rgba(214, 180, 120, .55));
  transition: opacity .4s;
}

/* ---------- 3. Le développement photo ---------- */
.fx-dev .media__img,
.fx-dev .media__ph {
  filter: brightness(1.42) contrast(.62) saturate(.15) sepia(.28) blur(3px);
}
.fx-dev.is-dev .media__img,
.fx-dev.is-dev .media__ph {
  filter: none;
  transition: filter 2.6s cubic-bezier(.25, .6, .15, 1) .1s, opacity 1.2s, transform 1.8s cubic-bezier(.2, .7, .1, 1);
}
@media (pointer: coarse) { /* plus léger sur téléphone : pas de flou */
  .fx-dev .media__img, .fx-dev .media__ph { filter: brightness(1.38) contrast(.66) saturate(.2) sepia(.25); }
}
.fx-leak {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 244, 222, 0) 32%, rgba(255, 238, 205, .78) 48%, rgba(255, 248, 232, .35) 56%, rgba(255, 244, 222, 0) 70%);
  background-size: 260% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  opacity: 0;
}
.fx-dev.is-dev .fx-leak { animation: fx-leak 2.4s cubic-bezier(.4, .1, .2, 1) .05s both; }
@keyframes fx-leak {
  0% { opacity: 0; background-position: 120% 0; }
  20% { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

/* ---------- 4. Le jour J, heure par heure ---------- */
.journey {
  --j-bg: #FBF6EE;
  position: relative;
  background: linear-gradient(180deg, #FBF6EE, #F6EBDD);
  color: var(--encre);
}
.journey__inner { position: relative; padding-block: var(--section-y); }
.journey__head { margin-bottom: clamp(28px, 5vh, 56px); }
.journey__head .eyebrow { margin-bottom: 1rem; }
.journey__head .title { max-width: 16ch; }
.fx-journey .journey__head .title { max-width: none; font-size: clamp(2.2rem, 3.4vw, 3.5rem); }
.fx-journey .journey__head { margin-bottom: clamp(18px, 3vh, 36px); }
.journey__track {
  display: flex;
  gap: clamp(20px, 4vw, 72px);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.journey__track::-webkit-scrollbar { display: none; }
.journey__panel {
  flex: 0 0 auto;
  width: min(82vw, 380px);
  scroll-snap-align: center;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.journey__media {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 34px 70px -48px rgba(122, 96, 60, .5);
}
.journey__media::after { border-radius: 999px 999px 0 0; }
.journey__time {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 8vw, 6.4rem);
  line-height: .9;
  color: var(--or);
  font-variant-numeric: lining-nums;
}
.journey__time em { font-size: .42em; font-style: italic; }
.journey__name {
  margin: .2rem 0 .5rem;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
}
.journey__text p { margin: 0; max-width: 34ch; color: var(--encre-douce); }
.journey__clock {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: clamp(22px, 3.5vh, 40px) var(--gutter) 0;
  padding-top: 18px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.journey__clock::before, .journey__clock i {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 1px;
  background: var(--filet-fort, rgba(169, 134, 79, .35));
}
.journey__clock::before { right: 0; }
.journey__clock i { width: 100%; background: var(--or); transform-origin: 0 50%; transform: scaleX(var(--j-p, 0)); }
.journey__clock span { position: relative; opacity: .55; transition: opacity .5s, color .5s; }
.journey__clock span::before {
  content: "";
  position: absolute; left: 50%; top: -22px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ivoire);
  box-shadow: 0 0 0 1px var(--or);
  transform: translateX(-50%);
  transition: background .5s;
}
.journey__clock span:first-child::before { left: 0; transform: none; }
.journey__clock span:last-child::before { left: auto; right: 0; transform: none; }
.journey__clock span.is-on { opacity: 1; color: var(--encre); }
.journey__clock span.is-on::before { background: var(--or); }

/* Mode « épinglé » (bureau / tablette) : le défilement vertical fait glisser la journée */
.fx-journey .journey { background: var(--j-bg); }
.fx-journey .journey__inner { padding-block: 0; }
.fx-journey .journey__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-h);
  overflow: hidden;
}
.fx-journey .journey__track {
  overflow: visible;
  scroll-snap-type: none;
  padding-inline: var(--gutter) 30vw;
  gap: clamp(48px, 7vw, 140px);
  will-change: transform;
}
.fx-journey .journey__panel {
  width: auto;
  grid-template-columns: auto minmax(0, 22rem);
  align-items: end;
  gap: clamp(24px, 3vw, 48px);
}
.fx-journey .journey__media { height: min(46vh, 500px); height: min(46svh, 500px); width: auto; }
.fx-journey .journey__panel:nth-child(even) .journey__media { height: min(38vh, 420px); height: min(38svh, 420px); align-self: start; }
.fx-journey .journey__text { padding-bottom: 1rem; }
.fx-journey .journey__panel .journey__text > * { opacity: .35; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2, .7, .1, 1), transform .9s cubic-bezier(.2, .7, .1, 1); }
.fx-journey .journey__panel.is-active .journey__text > * { opacity: 1; transform: none; }
.fx-journey .journey__panel.is-active .journey__text > :nth-child(2) { transition-delay: .06s; }
.fx-journey .journey__panel.is-active .journey__text > :nth-child(3) { transition-delay: .12s; }
@media (max-width: 899px) {
  .journey__panel .journey__text { padding-inline: .2rem; }
}

/* ---------- 5. Citation qui s'allume ---------- */
.fx-scrub .w { opacity: var(--lit, 1); transition: opacity .35s linear; }

/* ---------- 6. Curseur (souris uniquement) ---------- */
.fx-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 400;
  pointer-events: none;
  width: 0; height: 0;
  opacity: 0;
  transition: opacity .4s;
}
.fx-cursor.is-on { opacity: 1; }
.fx-cursor__ring {
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(169, 134, 79, .7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: width .45s cubic-bezier(.2, .7, .1, 1), height .45s cubic-bezier(.2, .7, .1, 1), margin .45s cubic-bezier(.2, .7, .1, 1), background-color .45s, border-color .45s;
}
.fx-cursor__label {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--encre);
  opacity: 0;
  transition: opacity .3s;
  padding-left: .24em;
}
.fx-cursor.is-link .fx-cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(169, 134, 79, .08); }
.fx-cursor.is-media .fx-cursor__ring {
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: rgba(251, 248, 242, .82);
  border-color: rgba(169, 134, 79, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fx-cursor.is-media .fx-cursor__label { opacity: 1; }
.fx-cursor.is-text .fx-cursor__ring { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--or); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .fx-cursor, .fx-thread { display: none !important; }
  .fx-dev .media__img, .fx-dev .media__ph { filter: none !important; }
}