.carte{
  position:relative;
  height:320vh;
  background:var(--noir);
}

.carte__colle{
  position:sticky; top:0;
  height:100svh; height:100lvh;
  overflow:hidden;
}

.carte__toile{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

.carte__voile{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.35) 42%, rgba(10,10,10,0) 62%),
    linear-gradient(0deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 30%);
}

.carte__metier{
  position:absolute; z-index:2;
  left:var(--marge); top:clamp(6.5rem,15vh,8.5rem);
  margin:0;
  max-width:26ch;
  font:500 .9rem/1.45 var(--texte);
  color:var(--or);
  letter-spacing:.01em;
}

.carte__etapes{
  position:absolute; z-index:2;
  left:var(--marge); top:34%;
  width:min(640px, calc(100% - 2 * var(--marge)));
}

.carte__phrase{
  position:absolute; left:0; top:0; width:100%;
  margin:0;
  font-family:var(--titre); font-weight:300;
  font-size:clamp(2.3rem,1.5rem + 3.4vw,4.6rem);
  line-height:1.06; letter-spacing:-.02em;
  color:var(--creme);
  opacity:0;
  will-change:opacity,transform,filter;
}
.carte__phrase[data-etape="0"]{ opacity:1; }
.carte__phrase em{ font-style:normal; color:var(--or); }

.carte__chiffre{ margin:0 0 1.2rem; }
.carte__source{
  margin:0 0 2.2rem;
  font:400 .8rem/1.5 var(--texte);
  letter-spacing:0;
  color:var(--gris);
}
.carte__source a{ color:var(--gris); text-underline-offset:3px; }
.carte__source a:hover{ color:var(--or); }

.carte__molette{
  position:absolute; z-index:2;
  left:50%; bottom:clamp(1.6rem,4vh,2.6rem);
  width:22px; height:36px; margin-left:-11px;
  border:1px solid var(--trait);
  border-radius:12px;
  transition:opacity .4s ease;
}
.carte__molette span{
  position:absolute; left:50%; top:7px;
  width:2px; height:7px; margin-left:-1px;
  border-radius:2px;
  background:var(--or);
  animation:carte-molette 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes carte-molette{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  70%{ transform:translateY(12px); opacity:0; }
  100%{ transform:translateY(12px); opacity:0; }
}

.carte__credit{
  position:absolute; z-index:2;
  right:var(--marge); bottom:1rem;
  margin:0;
  font:400 .68rem/1.4 var(--texte);
  color:var(--gris);
  opacity:.75;
}

.surtitre{
  letter-spacing:.02em;
  text-transform:none;
  font-size:.85rem;
}

@media (max-width:860px){
  .carte__voile{
    background:linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,0) 70%);
  }
  .carte__etapes{ top:auto; bottom:clamp(5rem,14vh,7rem); transform:none; }
  .carte__phrase{ top:auto; bottom:0; }
  .carte__credit{ right:auto; left:var(--marge); }
}

@media (prefers-reduced-motion:reduce){
  .carte{ height:auto; }
  .carte__colle{ position:relative; height:auto; min-height:100svh; padding:10rem var(--marge) 5rem; }
  .carte__etapes{ position:relative; left:0; top:0; transform:none; }
  .carte__phrase{ position:relative; opacity:1; margin-bottom:2.5rem; }
  .carte__molette{ display:none; }
  .carte__molette span{ animation:none; }
}