/** Un fil graphique unique ; les mouvements restent subordonnés à la lecture. */
@keyframes title-arrival {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(-10% -2% -15% -2%);
  }
}

@keyframes photograph-opening {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .has-editorial-motion .is-revealed .reveal-item {
    animation: title-arrival 850ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) both;
  }

  .has-editorial-motion .stays-stage.is-revealed .stay-panel img,
  .has-editorial-motion .estate.is-revealed > img {
    animation: photograph-opening 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .has-editorial-motion .stays-stage.is-revealed .stay-panel:nth-of-type(2) img {
    animation-delay: 120ms;
  }
}

/* Ligne décorative : elle ne modifie ni les hauteurs ni les zones cliquables. */
.journey-line {
  display: none;
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--color-ink);
}

.journey-line path {
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.48;
}

.journey-line circle {
  fill: currentColor;
  opacity: 0;
}

.journey-line--estate,
.journey-line--separator {
  color: var(--color-white);
}

.journey-line--separator {
  left: var(--stay-split, 50%);
  width: 1px;
  transform: translateX(-0.5px);
}

.journey-line--separator path {
  opacity: 0.65;
}

@media (min-width: 1100px) and (min-height: 700px) {
  .has-graphic-journey .journey-line {
    display: block;
  }
}

/* Le panneau survolé gagne 15 % ; aucune distance de scroll supplémentaire. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .stays-stage {
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
    transition: grid-template-columns 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .stays-stage:not(.is-hover-pending, .is-split-balanced):has(.stay-panel:nth-of-type(1):hover),
  .stays-stage:not(.is-hover-pending, .is-split-balanced):has(.stay-panel:nth-of-type(1):focus-visible) {
    --stay-split: 65%;
    grid-template-columns: minmax(0, 65%) minmax(0, 1fr);
  }

  .stays-stage:not(.is-hover-pending, .is-split-balanced):has(.stay-panel:nth-of-type(2):hover),
  .stays-stage:not(.is-hover-pending, .is-split-balanced):has(.stay-panel:nth-of-type(2):focus-visible) {
    --stay-split: 35%;
    grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  }

  .journey-line--separator {
    transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Même transition pour les panneaux et leur séparateur au retour à 50/50. */
  .stays-stage.is-split-balanced {
    --stay-split: 50%;
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  }
}

/* Réserver un couloir au repère et au tracé dans le chapitre le plus dense. */
@media (min-width: 1100px) {
  .contact {
    padding-right: max(var(--gutter), 120px);
  }
}

/* Rail de chapitre : l’allongement suit sa progression réelle. */
.screen-progress {
  display: none;
}

@media (min-width: 1100px) {
  .has-editorial-motion .screen-progress {
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48px;
    padding: 0.75rem 0;
    color: var(--color-ink);
    transform: translateY(-50%);
    transition: color 300ms ease;
  }

  .screen-progress.on-photograph {
    color: var(--color-white);
    text-shadow: 0 1px 5px #13251b;
  }

  .screen-progress-count {
    margin-bottom: 0.625rem;
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .screen-progress a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    text-decoration: none;
  }

  .screen-progress-mark {
    width: 10px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transition: width 150ms linear, opacity 350ms ease;
  }

  .screen-progress .is-complete .screen-progress-mark {
    width: 26px;
    opacity: 0.7;
  }

  .screen-progress [aria-current] .screen-progress-mark {
    width: calc(14px + 18px * var(--chapter-progress, 0));
    opacity: 1;
  }

  .screen-progress a:hover .screen-progress-mark,
  .screen-progress a:focus-visible .screen-progress-mark {
    width: 32px;
    opacity: 1;
  }

  .screen-progress-label {
    position: absolute;
    right: 100%;
    padding: 0.25rem 0.625rem;
    color: var(--color-white);
    background: #28392f;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(4px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .screen-progress a:hover .screen-progress-label,
  .screen-progress a:focus-visible .screen-progress-label {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-editorial-motion .reveal-item,
  .has-editorial-motion .stay-panel img,
  .has-editorial-motion .estate > img {
    transform: none;
    clip-path: none;
    opacity: 1;
  }
}