/* ══════════════════════════════════════════════════════════
   LE VOYAGE — six étapes plein écran, traversées à l'horizontale.
   Chaque étape porte sa couleur : le bouton, le numéro, le décor.
   La scène n'a pas de fond : c'est la nuit de la page, dont le halo
   prend la couleur de l'étape. Un seul canevas porte tous les décors,
   et le voile qui protège le texte s'efface avant les bords : il n'y a
   aucune arête, ni entre deux étapes, ni à l'entrée, ni à la sortie.
   ══════════════════════════════════════════════════════════ */
.voyage { position: relative; }
.voyage__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
}
.voyage__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.voyage__voile {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(38% 46% at 18% 54%, rgba(8, 10, 18, .86), rgba(8, 10, 18, .5) 55%, rgba(8, 10, 18, 0) 100%);
}
.voyage__piste { position: relative; display: flex; height: 100%; width: max-content; will-change: transform; pointer-events: none; }

.vp { position: relative; flex: none; width: 100vw; height: 100%; }
.vp__texte, .vp__intro { pointer-events: auto; }
.vp__texte {
  position: absolute; z-index: 2;
  left: calc(var(--g) + 1vw);
  top: calc(var(--nav-h) + 2vh); bottom: 11vh;
  width: min(36vw, 540px);
  display: flex; flex-direction: column; justify-content: center;
}
.vp__num { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.vp__num span { color: var(--lumiere-3); font-weight: 450; }
.vp__accroche { margin-top: 14px; font-style: italic; font-size: 20px; line-height: 1.35; color: var(--lumiere-2); }
.vp__titre {
  margin: 6px 0 20px;
  font-family: var(--sans); font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: 120px;              /* recalculée par le script pour remplir la colonne */
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--lumiere);
}
.vp__titre span { display: inline-block; }
.vp__lien { font-size: 19px; line-height: 1.6; color: var(--lumiere-2); max-width: 31em; }

.vp__action { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; margin-top: 30px; }
.vp__jouer {
  display: inline-flex; align-items: center; gap: 12px;
  height: 62px; padding: 0 32px 0 24px;
  border-radius: 999px;
  background: var(--accent); color: #07080E;
  font-family: var(--sans); font-weight: 750; font-size: 19px;
  font-variation-settings: 'wdth' 112;
  box-shadow: 0 22px 60px -22px rgba(var(--accent-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.vp__jouer:hover { transform: translateY(-3px) scale(1.035); box-shadow: 0 34px 90px -24px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .45); }
.vp__jouer:active { transform: scale(.98); }
.vp__play { width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 2px; }
.vp__consigne { font-family: var(--sans); font-size: 14.5px; line-height: 1.4; color: var(--lumiere-2); max-width: 17em; }

.vp__records { display: grid; grid-template-columns: repeat(3, auto); gap: 30px; width: max-content; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--filet-nuit); }
.vp__records dt { font-family: var(--sans); font-size: 12px; color: var(--lumiere-3); }
.vp__records dd { margin: 3px 0 0; font-family: var(--sans); font-weight: 700; font-variation-settings: 'wdth' 115; font-size: 17px; font-variant-numeric: tabular-nums; }
.vp__records dd span { font-weight: 450; font-variation-settings: 'wdth' 100; color: var(--lumiere-3); }
.vp__pips { display: flex; gap: 4px; padding-top: 8px; }
.vp__pips i { width: 18px; height: 4px; border-radius: 4px; background: rgba(238, 241, 248, .14); }
.vp__pips i.bronze { background: var(--bronze); }
.vp__pips i.argent { background: var(--argent); }
.vp__pips i.or { background: var(--or); }

/* l'introduction */
.vp--intro { display: grid; align-items: center; }
.vp__intro { padding: 0 var(--g) 0 calc(var(--marge-x) + var(--R)); max-width: 1100px; }
.vp__intro-titre { font-weight: 300; font-size: clamp(56px, 9.2vw, 168px); line-height: .94; letter-spacing: -.04em; font-variation-settings: 'opsz' 72; }
.vp__intro-texte { margin-top: 30px; max-width: 30em; font-size: 21px; line-height: 1.55; color: var(--lumiere-2); }
.vp__suite, .vp__consigne-intro { display: none; }
.vp--intro .vp__consigne { display: flex; align-items: center; gap: 14px; margin-top: 44px; font-family: var(--sans); font-size: 14px; color: var(--lumiere-2); max-width: none; }
.vp--intro .vp__consigne i { position: relative; width: 90px; height: 1px; background: var(--filet-nuit); overflow: hidden; }
.vp--intro .vp__consigne i::after { content: ''; position: absolute; inset: 0; background: var(--lumiere); transform: translateX(-100%); animation: suite 2.2s var(--ease) infinite; }
@keyframes suite { 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* le guide : les six étapes et la barre de progression */
.voyage__guide { position: absolute; z-index: 5; left: var(--g); right: var(--g); bottom: calc(18px + env(safe-area-inset-bottom)); font-family: var(--sans); }
.voyage__etapes { display: flex; justify-content: space-between; gap: 8px; }
.voyage__etapes button {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--lumiere-3);
  padding: 6px 0;
  transition: color .4s var(--ease);
}
.voyage__etapes i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: background-color .4s, transform .5s var(--ease), box-shadow .4s; }
.voyage__etapes button:hover { color: var(--lumiere-2); }
.voyage__etapes button.est-actif { color: var(--lumiere); }
.voyage__etapes button.est-actif i { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 14px var(--accent); }
.voyage__barre { height: 2px; margin-top: 10px; background: rgba(238, 241, 248, .1); border-radius: 2px; overflow: hidden; }
.voyage__barre i { display: block; height: 100%; background: var(--lumiere); transform: scaleX(0); transform-origin: left; }

/* ─────────── mobile : le décor en haut, les mots en bas ─────────── */
.voyage__etapes button[aria-disabled="true"] { opacity: .35; cursor: default; }

/* les écrans bas : tout doit tenir entre la barre du haut et le guide */
@media (min-width: 861px) and (max-height: 760px) {
  .vp__texte { top: calc(var(--nav-h) + 2px); bottom: 64px; }
  .vp__accroche { margin-top: 8px; font-size: 18px; }
  .vp__titre { margin: 2px 0 12px; }
  .vp__lien { font-size: 17px; line-height: 1.5; }
  .vp__action { margin-top: 20px; }
  .vp__jouer { height: 54px; font-size: 17px; }
  .vp__records { display: none; }
}
@media (min-width: 861px) and (max-height: 600px) {
  .vp__consigne { display: none; }
  .vp__lien { font-size: 16px; }
}
.voyage__etapes button[aria-disabled="true"]:hover { color: var(--lumiere-3); }

@media (max-width: 860px) {
  .voyage__voile { background: radial-gradient(130% 62% at 50% 100%, rgba(8, 10, 18, .95), rgba(8, 10, 18, .8) 50%, rgba(8, 10, 18, 0) 100%); }
  .vp__texte { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); justify-content: flex-end; }
  .vp__accroche { font-size: 16.5px; margin-top: 8px; }
  .vp__titre { margin: 4px 0 12px; }
  .vp__lien { font-size: 15.5px; line-height: 1.5; }
  .vp__action { margin-top: 18px; }
  .vp__jouer { height: 54px; font-size: 17px; padding: 0 26px 0 20px; }
  .vp__consigne { display: none; }
  .vp__records { gap: 20px; margin-top: 18px; padding-top: 12px; }
  .vp__records dd { font-size: 15px; }
  .vp__intro { padding: 0 var(--g); }
  .vp__intro-texte { font-size: 17px; }
  .voyage__etapes span { display: none; }
  .voyage__etapes button.est-actif span { display: inline; }
  .voyage__etapes { justify-content: flex-start; gap: 14px; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .vp__lien { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vp__records { display: none; }
}

/* ─────────── sans animation : les étapes s'empilent ─────────── */
.voyage-statique .voyage { height: auto !important; }
.voyage-statique .voyage__scene { position: relative; height: auto; overflow: visible; }
.voyage-statique .voyage__piste { flex-direction: column; width: 100%; }
.voyage-statique .vp { height: 100vh; height: 100svh; overflow: hidden; }
.voyage-statique .vp__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.voyage-statique :is(.voyage__guide, .voyage__voile, .voyage__cv) { display: none; }