/* Progression Atelier Aube : images superposées, puis manifeste sur la même piste. */
.horizon {height: auto; background: var(--ivory); color: var(--navy);}
.horizon__sticky {position: relative; top: auto; height: auto; min-height: 100svh; overflow: hidden;}
.horizon__window {position: relative; width: 100%; overflow: hidden;}
.horizon__rail {display: flex; flex-direction: column; gap: 8vh;}
.horizon__panel {position: relative; width: 100%; flex: none;}
.horizon__panel--photo {min-height: 76vh;}
.horizon__main {display: block; width: 78%; height: 71vh; overflow: hidden;}
.horizon__main img,.horizon__flip img {width: 100%; height: 100%; object-fit: cover;}
.horizon__flip {position: absolute; top: 30%; right: 2%; width: 54%; height: 37vh; display: grid; grid-template-columns: 1fr 1fr; gap: 7px;}
.horizon__flip > a {display: block; min-width: 0; height: 100%; overflow: hidden;}
.horizon__panel--duo {display: flex; align-items: center; gap: 2vw; padding: 10vh 4vw; background: #11100f;}
.horizon__duo {position: relative; width: 50%; height: min(55vh, 34vw); overflow: hidden;}
.horizon__duo > a {position: absolute; inset: 0; display: block; overflow: hidden;}
.horizon__duo img {width: 100%; height: 100%; object-fit: cover;}
.horizon__duo .horizon__flip-down {z-index: 1;}
.horizon__duo .horizon__flip-up {z-index: 2;}
.horizon:not(.horizon--animated) .horizon__duo {display: grid; grid-template-columns: 1fr 1fr; gap: 7px;}
.horizon:not(.horizon--animated) .horizon__duo > a {position: relative; height: 100%;}
.horizon__panel--photo .section-top {z-index: 6; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.65);}
.horizon__track {position: absolute; z-index: 5; top: 17vh; left: 50%; display: block; width: max-content; max-width: 100%; margin: 0; transform: translateX(-50%); white-space: nowrap; font: 400 clamp(52px, 7.1vw, 138px)/.88 var(--serif); letter-spacing: -.087em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); pointer-events: none;}
.horizon--animated .horizon__track {max-width: none; opacity: var(--horizon-title-opacity, 1); transform: translate3d(calc(-50% + var(--horizon-title-x, 0vw)), var(--horizon-title-y, 0vh), 0);}
.horizon__intro {position: absolute; z-index: 5; left: 13vw; bottom: 6vh; max-width: 30ch; font: 400 20px/1.15 var(--serif); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.75);}
.horizon__visit {position: absolute; z-index: 6; left: 7vw; bottom: 7vh; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding-bottom: .4rem; border-bottom: 1px solid currentColor; color: #fff; font: 700 clamp(12px, 1vw, 15px)/1.2 var(--sans); letter-spacing: .08em; text-decoration: none; text-shadow: 0 1px 8px #000;}
.horizon__visit small {font: 500 9px/1.2 var(--sans); letter-spacing: .12em;}
.horizon__visit:hover,.horizon__visit:focus-visible {opacity: .7;}
.horizon__panel--text {min-height: 100svh; background: var(--ivory);}
.horizon__text-wrap {position: relative; width: 100%; min-height: 100svh; padding: 9vh 8vw 8vh 13vw;}
.horizon__text-label {font: 400 21px/1.2 var(--serif);}
.horizon__statement {margin: 11vh 0 0; font: 400 clamp(70px, 8vw, 146px)/.85 var(--serif); letter-spacing: -.067em; text-transform: uppercase;}
.horizon__statement span {display: block;}
.horizon__statement i {display: block; font-style: normal;}
.horizon--animated .horizon__statement span {overflow: hidden;}
.horizon--animated .horizon__statement i {transform: translate3d(0, var(--line-y, 110%), 0);}
.horizon--animated .horizon__text-body,.horizon--animated .horizon__text-status {opacity: var(--horizon-body-opacity, 0); transform: translate3d(0, var(--horizon-body-y, 24px), 0);}
.horizon__statement span:nth-child(2) {padding-left: 13vw;}
.horizon__statement span:nth-child(4) {text-align: right;}
.horizon__text-body {position: absolute; right: 10vw; bottom: 15vh; width: min(300px, 27vw); font: 400 13px/1.6 var(--sans);}
.horizon__text-status {position: absolute; right: 10vw; bottom: 6vh; width: min(300px, 27vw); font: 700 9px/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase;}
.horizon__panel--text .orbit-button.horizon__all {position: absolute; left: 13vw; right: auto; bottom: 5vh; width: 132px; height: 132px; margin: 0;}

@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .horizon.horizon--animated {height: 590svh;}
  .horizon--animated .horizon__sticky {position: sticky; top: 0; height: 100svh; min-height: 620px;}
  .horizon--animated .horizon__window {position: absolute; inset: 0; width: 100vw;}
  .horizon--animated .horizon__rail {width: 400vw; height: 100%; flex-direction: row; gap: 0; transform: translate3d(calc(-300vw * var(--horizon-progress, 0)),0,0); will-change: transform;}
  .horizon--animated .horizon__panel {width: 100vw; height: 100%; min-height: 0;}
  .horizon--animated .horizon__main {position: absolute; left: 0; top: 0; width: min(100vw, 133.23vh); height: 100svh;}
  .horizon--animated .horizon__flip {display: block; top: 50%; right: 0; width: 48vw; height: auto; max-height: 58vh; aspect-ratio: 835 / 557; overflow: hidden; transform: translateY(-50%);}
  .horizon--animated .horizon__flip > a {position: absolute; inset: 0; display: block; height: 100%;}
  .horizon--animated .horizon__flip-down {z-index: 1;}
  .horizon--animated .horizon__flip-down img {transform: translateY(var(--flip-parallax, -10%)) scale(1.1);}
  .horizon--animated .horizon__flip-up {z-index: 2; transform: translateY(var(--flip-translate, 0%));}
  .horizon--animated .horizon__duo--left .horizon__flip-up {clip-path: inset(0 0 0 var(--flip-clip, 0%));}
  .horizon--animated .horizon__duo--right .horizon__flip-up {clip-path: inset(0 var(--flip-clip, 0%) 0 0);}
  .horizon--animated .horizon__duo .horizon__flip-down img {transform: scale(var(--flip-scale, 1.2));}
}

@media (max-width: 700px) {
  .horizon__panel--photo {min-height: 64vh;}
  .horizon__main {width: 100%; height: 48vh;}
  .horizon__flip {top: 34vh; right: 4vw; width: 63vw; height: 25vh;}
  .horizon__panel--duo {display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 7vh 5vw 16vh;}
  .horizon__duo {width: 100%; height: 24vh;}
  .horizon__track {top: 15vh; font-size: 8.35vw; letter-spacing: -.08em;}
  .horizon__intro {left: 5vw; bottom: 14vh; max-width: 55vw; font-size: 14px;}
  .horizon__visit {left: 5vw; bottom: 5vh;}
  .horizon__panel--text {min-height: 0;}
  .horizon__text-wrap {min-height: 0; padding: 8vh 5vw 10vh;}
  .horizon__text-label {text-align: center; font-size: 15px;}
  .horizon__statement {margin-top: 5vh; font-size: 9vw; line-height: .95; letter-spacing: -.04em;}
  .horizon__statement span:nth-child(2) {padding-left: 12vw;}
  .horizon__text-body,.horizon__text-status {position: relative; right: auto; bottom: auto; width: min(320px, 90vw); margin: 6vh 0 0 auto; font-size: 12px;}
  .horizon__text-status {margin-top: 3vh; font-size: 9px;}
  .horizon__panel--text .orbit-button.horizon__all {position: relative; left: auto; right: auto; bottom: auto; display: flex; margin: 6vh 0 0; width: 126px; height: 126px;}
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .horizon--animated .horizon__flip {display: block; overflow: hidden;}
  .horizon--animated .horizon__flip > a {position: absolute; inset: 0; height: 100%;}
  .horizon--animated .horizon__flip-down {z-index: 1;}
  .horizon--animated .horizon__flip-down img {transform: translateY(var(--flip-parallax, -10%)) scale(1.1);}
  .horizon--animated .horizon__flip-up {z-index: 2; transform: translateY(var(--flip-translate, 0%));}
  .horizon--animated .horizon__duo--left .horizon__flip-up {clip-path: inset(0 0 0 var(--flip-clip, 0%));}
  .horizon--animated .horizon__duo--right .horizon__flip-up {clip-path: inset(0 var(--flip-clip, 0%) 0 0);}
  .horizon--animated .horizon__duo .horizon__flip-down img {transform: scale(var(--flip-scale, 1.2));}
}