/* ============================================================
   DIFFÉRENCIEL — Introduction de la page d'accueil
   Trois temps pilotés par le défilement : hublot, plein ciel, globe.
   Sans JavaScript ou avec « réduire les animations » : version fixe.
   ============================================================ */

.intro{position:relative;background:#06142e;color:#fff}
.intro__stage{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;
}

/* ---------- Ciel (photo réelle) ---------- */
.intro__sky{position:absolute;inset:0;overflow:hidden;background:#0a2350}
.intro__skybox{position:absolute;inset:0;will-change:transform}
.intro__skybox picture,.intro__skybox img{display:block;width:100%;height:100%}
.intro__skybox img{object-fit:cover;object-position:50% 45%;max-width:none}
.intro__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,40,.55),rgba(4,16,40,0) 24%),linear-gradient(90deg,rgba(4,16,40,.5),rgba(4,16,40,.1) 58%,rgba(4,16,40,0) 78%)}

.intro:not(.intro--live) .intro__shade{
  background:linear-gradient(180deg,rgba(4,16,40,.6),rgba(4,16,40,.1) 26%),linear-gradient(90deg,rgba(4,16,40,.86),rgba(4,16,40,.5) 46%,rgba(4,16,40,0) 78%)}

/* ---------- Textes ---------- */
.intro__copy{position:relative;z-index:5;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);padding-top:6rem}
.intro__copy .eyebrow{color:var(--or-clair)}
.intro__copy .eyebrow::before{background:var(--or-clair)}
.intro h1{color:#fff;margin-bottom:1.4rem;max-width:15ch}
.intro h1 .tag{display:block;font-style:italic;font-weight:400;color:var(--or-clair);font-size:.52em;margin-top:1.1rem;letter-spacing:0}
.intro__sub{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:#CBD6E4;max-width:44ch;margin-bottom:2.3rem}
.intro__cta{display:flex;flex-wrap:wrap;gap:1rem}
.intro__title{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em;color:#fff;
  font-size:clamp(2rem,1.35rem + 2.7vw,3.5rem);max-width:14ch;margin-bottom:1.3rem;text-wrap:balance}
.intro__title em{font-style:italic;font-weight:400;color:var(--or-clair)}

/* Éléments propres à la version animée : masqués par défaut */
.intro__cabin,.intro__veil,.intro__globe,.intro__copy--2,.intro__copy--3,.intro__skyline,.intro__ui{display:none}

/* ============================================================
   VERSION ANIMÉE (classe posée par intro.js)
   ============================================================ */
.intro--live{height:425vh}
.intro--live .intro__stage{position:sticky;top:0;height:100vh;height:100lvh;min-height:0;display:block}
.intro--live .intro__shade{opacity:var(--shade,0)}
.intro--live .intro__skybox{inset:auto;left:0;top:0}
.intro--live .intro__skybox img{object-fit:fill}

.intro--live .intro__veil{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 70% 45%,#0a2a5e 0%,#061a3d 46%,#040f26 100%)}

.intro--live .intro__globe{display:block;position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden}
.intro__globe canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.intro__globe canvas.is-grabbing{cursor:grabbing !important}

.intro--live .intro__cabin{display:block;position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}

.intro--live .intro__copy{position:absolute;z-index:5;left:0;right:0;margin-inline:auto;padding-top:0;
  top:50%;transform:translateY(calc(var(--anchor,-50%) + var(--dy,0px)));pointer-events:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.intro--live .intro__copy > *{pointer-events:auto}
.intro--live .intro__copy--1{opacity:1;visibility:visible}
.intro--live .intro__copy--1 h1{max-width:13ch}
.intro--live .intro__copy--1 .intro__sub{max-width:36ch}
.intro--live .intro__copy--2,.intro--live .intro__copy--3{display:block}
.intro--live .intro__copy--3 .intro__sub{max-width:38ch}
.intro--live .intro__copy--3 .intro__title{max-width:19ch}
.intro__copy--3 .intro__title em{display:block}

/* Villes à l'horizon : monuments en 3D qui défilent derrière l'aile, fondus dans la brume */
.intro--live .intro__skyline{display:block;position:absolute;overflow:hidden;pointer-events:none;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 91%,transparent 100%)}
.intro__strip{position:absolute;left:0;top:0;bottom:0;width:100%;will-change:transform}
.intro__city{position:absolute;bottom:0;margin:0}
.intro__city img{display:block;width:100%;height:100%;max-width:none}
.intro__city-label{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:1.25rem;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:clamp(.93rem,.81rem + .45vw,1.2rem);letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 10px rgba(4,20,52,.8)}
.intro__city-label::after{content:"";position:absolute;left:50%;bottom:.3rem;width:1px;height:.7rem;background:var(--or-clair);opacity:.9}
.intro__mist{position:absolute;left:0;right:0;bottom:0;height:20%;pointer-events:none;
  background:linear-gradient(180deg,rgba(176,196,224,0),rgba(190,206,228,.5) 62%,rgba(190,206,228,0))}

/* Aides : défilement, passer */
.intro--live .intro__ui{display:flex;position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:1.6rem;
  bottom:calc(100lvh - 100dvh + 1.6rem);justify-content:space-between;align-items:flex-end;gap:1rem;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(4,20,52,.8)}
.intro__skip{color:inherit;white-space:nowrap;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.28);transition:color var(--t),border-color var(--t),opacity var(--t)}
.intro__skip:hover,.intro__skip:focus-visible{color:#fff;border-color:var(--or)}
.intro__hint{display:flex;align-items:center;gap:.6rem;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;padding:.4rem 0;transition:opacity var(--t),color var(--t)}
.intro__hint:hover,.intro__hint:focus-visible{color:#fff}
.intro__hint .dot{width:7px;height:7px;border-radius:50%;background:var(--or);animation:pulse 2s infinite}
.intro__hint.is-hidden,.intro__skip.is-hidden{opacity:0;pointer-events:none}
.intro :focus-visible{outline:2px solid var(--or-clair);outline-offset:4px;border-radius:4px}

/* En-tête transparent tant que l'introduction est à l'écran */
.site-header.over-intro{background:rgba(255,255,255,0);box-shadow:none;backdrop-filter:none}

/* ---------- Ordinateur : texte à gauche, image à droite ---------- */
@media (min-width:901px){
  .intro--live .intro__copy--2{top:34%}
}

/* ---------- Mobile et formats verticaux ---------- */
@media (max-width:900px), (orientation:portrait){
  .intro--live .intro__copy--1{top:auto;bottom:calc(100lvh - 100dvh + 5.2rem);--anchor:0%}
  .intro--live .intro__copy--1 h1{max-width:none;font-size:clamp(1.9rem,1.2rem + 3.6vw,2.8rem);margin-bottom:.9rem}
  .intro--live .intro__copy--1 .intro__sub{display:none}
  .intro--live .intro__copy--1 .intro__cta .btn--ghost{display:none}
  .intro--live .intro__copy--2{top:6.2rem;--anchor:0%}
  .intro--live .intro__copy--2 .intro__title{max-width:12ch}
  .intro--live .intro__copy--3{top:auto;bottom:calc(100lvh - 100dvh + 2.4rem);--anchor:0%}
  .intro--live .intro__copy--3 .intro__title{font-size:clamp(1.7rem,1.2rem + 3vw,2.4rem);margin-bottom:.8rem;max-width:16ch}
  .intro--live .intro__copy--3 .intro__sub{font-size:1rem;margin-bottom:1.3rem}
  .intro--live .intro__veil{background:radial-gradient(120% 70% at 50% 36%,#0a2a5e 0%,#061a3d 50%,#040f26 100%)}
  .intro__city-label{letter-spacing:.14em;padding-bottom:1rem}
  .intro--live .intro__ui{font-size:.66rem;letter-spacing:.13em;bottom:1.1rem;bottom:calc(100lvh - 100dvh + 1.1rem)}
  .intro__hint{white-space:nowrap}
}
@media (max-height:620px) and (min-width:901px){
  .intro--live .intro__copy--1 .intro__sub{display:none}
}

/* ============================================================
   VERSION CALME (animations réduites) : accueil fixe, puis globe fixe
   ============================================================ */
.intro--calm .intro__stage{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(100svh,auto) auto;min-height:0}
.intro--calm .intro__sky{position:relative;grid-row:1;grid-column:1;inset:auto;min-height:100svh}
.intro--calm .intro__copy--1{grid-row:1;grid-column:1;align-self:center}
.intro--calm .intro__globe{display:block;position:relative;grid-row:2;grid-column:1;height:min(86vh,760px);
  background:radial-gradient(120% 90% at 70% 45%,#0a2a5e 0%,#061a3d 46%,#040f26 100%)}
.intro--calm .intro__copy--3{display:block;grid-row:2;grid-column:1;align-self:center;padding-top:0;pointer-events:none}
.intro--calm .intro__copy--3 > *{pointer-events:auto}
@media (max-width:900px), (orientation:portrait){
  .intro--calm .intro__stage{grid-template-rows:minmax(100svh,auto) auto auto;background:#040f26}
  .intro--calm .intro__globe{grid-row:2;height:min(96vw,540px);background:radial-gradient(90% 80% at 50% 50%,#0a2a5e 0%,#061a3d 55%,#040f26 100%)}
  .intro--calm .intro__copy--3{grid-row:3;align-self:start;padding-top:.5rem;padding-bottom:3rem}
}