/* La capture du Salon devient le repère de Montpellier.
   Le globe se tourne vers Palawan, la lumière de l'accueil revient sur Pangatalan,
   puis un cadre de localisation s'ouvre sur la photographie qui commence la cartographie. */

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.salon-track{--passage-len:300svh;
  height:calc(max(100svh - var(--top-h,64px),var(--scene-min,590px)) + min(22svh,180px) + var(--passage-len));
  background:var(--passage-bg,#061d24);overflow-x:clip}
.passage-measure{position:absolute;left:0;top:0;width:1px;height:var(--passage-len);visibility:hidden;pointer-events:none}
.step-mark{position:absolute;left:0;width:1px;height:1px;top:calc(100% - .8*var(--passage-len) - 58svh);pointer-events:none}

/* Pendant le passage, la scène s'étend sous l'en-tête pour que le ciel occupe tout l'écran. */
.project-salon[data-passage-on="true"] .project-stage{overflow:visible;clip-path:inset(calc(-1*var(--top-h,64px)) 0 0 0)}
.salon-gallery{position:relative;z-index:2}
.salon-gallery .f-salon-figure{position:relative}
.salon-track[data-passage-on="true"] .f-salon-band{opacity:var(--pass-context,1)}
.salon-track[data-passage-on="true"] .f-salon-figure{
  transform:translate3d(var(--pass-card-x,0px),var(--pass-card-y,0px),0) scale(var(--pass-card-scale,1));
  transform-origin:var(--pass-card-ox,50%) var(--pass-card-oy,50%);
  opacity:var(--pass-card,1)}

.passage{position:absolute;inset:0;z-index:1;pointer-events:none;visibility:hidden;color:#e9f2ef;
  --map-intro:0;--map-end:0;--photo-scale:1.08;--photo-veil:0}
.project-salon[data-passage-on="true"] .passage{visibility:visible}
.passage-sky{position:absolute;left:0;top:calc(-1*var(--top-h,64px));width:100%;height:calc(100% + var(--top-h,64px));display:block}

.passage-copy{position:absolute;left:5.5vw;top:clamp(48px,10svh,110px);width:min(31vw,30rem);margin:0;opacity:var(--pass-copy,0);z-index:3}
.passage-kicker{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:#a6ceca}
.passage-title{display:block;margin:.45em 0 .5em;font-size:clamp(2.4rem,4.4vw,4.6rem);line-height:.98;letter-spacing:-.045em;font-weight:550;text-wrap:balance}
.passage-lede{display:block;max-width:26em;font-size:clamp(.98rem,1.2vw,1.15rem);line-height:1.5;color:#b4cfce}

.passage-label{position:absolute;left:0;top:0;margin:0;display:flex;flex-direction:column;gap:2px;white-space:nowrap;z-index:3;
  font-size:.82rem;line-height:1.3;color:#cfe4e0;text-shadow:0 1px 14px #01090d;will-change:transform,opacity;opacity:0}
.passage-label strong{font-size:1.02rem;font-weight:600;color:#f3f8f6;letter-spacing:-.01em}
.passage-label.is-left{text-align:right;align-items:flex-end}

/* La photographie est déjà à sa taille finale : seul son cadre change d'échelle, ce qui garantit
   que la dernière image du passage est exactement la première de la cartographie. */
.passage .passage-photo{z-index:2;opacity:var(--pass-photo,0);transform:translate3d(var(--pass-dx,0px),var(--pass-dy,0px),0) scale(var(--pass-k,1));transform-origin:50% 50%;
  outline:calc(2px / var(--pass-k,1)) solid rgb(240 105 74 / var(--pass-frame,0));outline-offset:0;will-change:transform}
.passage .passage-photo>img{filter:brightness(var(--pass-bright,1))}
.passage .passage-photo figcaption{opacity:var(--map-intro,0)}
.passage .passage-overview{z-index:3}
.passage .passage-overview .maps-kicker{opacity:var(--map-intro,0)}
.passage-source{position:absolute;right:4vw;bottom:24px;margin:0;max-width:30rem;text-align:right;font-size:.66rem;line-height:1.45;color:#8fb5b0;opacity:var(--pass-source,0);z-index:3}

/* La carte de la cartographie se superpose au Salon au moment exact où celui-ci se termine. */
.maps-chapter{margin-top:calc(-1*max(100svh - var(--top-h,64px), 590px));pointer-events:none;
  background:linear-gradient(transparent max(100svh - var(--top-h,64px), 590px),#061d24 0)}
.maps-chapter .maps-pin{min-height:590px}
.maps-chapter:not([data-pinned="true"]) .maps-pin{visibility:hidden}
.maps-chapter[data-pinned="true"] .maps-pin,.maps-outro,.maps-dialog{pointer-events:auto}

@media(max-width:720px){
  .salon-track{--passage-len:270svh}
  .maps-chapter{margin-top:calc(-1*max(100svh - var(--top-h,56px), 600px));background:linear-gradient(transparent max(100svh - var(--top-h,56px), 600px),#061d24 0)}
  .maps-chapter .maps-pin{min-height:600px}
  .passage-copy{left:20px;right:20px;top:24px;width:auto}
  .passage-title{font-size:clamp(2rem,9vw,2.6rem);margin:.4em 0 .45em}
  .passage-lede{font-size:.95rem}
  .passage-label{font-size:.74rem}
  .passage-label strong{font-size:.92rem}
  .passage-source{left:20px;right:20px;bottom:14px;text-align:left;font-size:.6rem}
}

/* Mouvements réduits : une planche fixe entre le Salon et la cartographie. */
html.calm .salon-track{height:auto;background:#061d24}
html.calm .salon-track .project-stage{padding:0}
html.calm .passage{position:relative;inset:auto;visibility:visible;height:min(86svh,780px);min-height:560px;margin:44px 0 0;background:#03161b}
html.calm .passage-sky{top:0;height:100%}
html.calm .passage .passage-photo,html.calm .passage .passage-overview{display:none}
html.calm .passage-copy{opacity:1}
html.calm .passage-source{opacity:1}
html.calm .maps-chapter{margin-top:0;background:#061d24;pointer-events:auto}
html.calm .step-mark{top:auto;bottom:0}
@media(max-width:720px){html.calm .passage{margin:32px 0 0;height:auto;min-height:0;aspect-ratio:9/15}}
/* Une fois la cartographie arrimée, la scène du Salon s'efface : rien ne doit réapparaître sous l'en-tête. */
.project-salon[data-released="true"] .project-stage,.project-salon[data-released="true"] .passage{visibility:hidden}
.passage-label.is-below{text-align:center;align-items:center}