/* ═══════════════════════════════════════════════════════════════
   PRIORITÉ 1 · L'AVENTURE PREND VIE
   Scène Three.js paresseuse, pilotée au scroll par Anime.js.
   Ce fichier est isolé afin de ne pas modifier les styles historiques.
   ═══════════════════════════════════════════════════════════════ */

/* `overflow-x: hidden` crée un conteneur de défilement dans certains
   navigateurs et annule alors position: sticky. `clip` conserve la coupe
   horizontale sans devenir un ancêtre scrollable. */
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}


.experience-table {
  --exp-gold: #d4ac5e;
  --exp-deep: #171320;
  --exp-ink: #f7f4ed;
  position: relative;
  min-height: 440vh;
  background:
    radial-gradient(ellipse 90% 85% at 50% 40%, rgba(104,132,192,.14), transparent 62%),
    linear-gradient(180deg, #1d1830 0%, var(--exp-deep) 68%);
  color: var(--exp-ink);
  isolation: isolate;
}

.experience-table__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 78% 68% at 58% 42%, rgba(122, 170, 234, .22), transparent 68%),
    radial-gradient(circle at 30% 70%, rgba(226, 177, 91, .12), transparent 35%),
    linear-gradient(150deg, #342641, #151726 76%);
}

.experience-table__viewport,
.experience-table__canvas,
.experience-table__fallback,
.experience-table__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.experience-table__viewport {
  z-index: 0;
  overflow: hidden;
  /* Fond atmosphérique statique : les zones transparentes de WebGL gagnent
     en profondeur sans image supplémentaire ni décor 3D à calculer. */
  background:
    radial-gradient(ellipse 62% 72% at 66% 50%, rgba(158, 91, 38, .22), transparent 68%),
    radial-gradient(ellipse 68% 78% at 8% 12%, rgba(77, 86, 148, .28), transparent 72%),
    radial-gradient(ellipse 48% 62% at 100% 78%, rgba(19, 78, 103, .2), transparent 72%),
    linear-gradient(135deg, #171426 0%, #0d101c 48%, #171019 100%);
}

.experience-table__viewport::before,
.experience-table__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Une très fine trame d'encre donne du relief aux aplats sombres. */
.experience-table__viewport::before {
  z-index: 0;
  opacity: .36;
  background-image:
    radial-gradient(rgba(244, 232, 205, .12) .55px, transparent .72px),
    radial-gradient(rgba(212, 172, 94, .09) .45px, transparent .66px);
  background-position: 0 0, 5px 7px;
  background-size: 13px 13px, 17px 17px;
  mix-blend-mode: soft-light;
}

/* Vignette douce : elle guide le regard vers le plateau sans l'assombrir. */
.experience-table__viewport::after {
  z-index: 1;
  background:
    radial-gradient(ellipse 72% 70% at 57% 52%, transparent 35%, rgba(4, 5, 11, .18) 76%, rgba(3, 4, 9, .48) 100%),
    linear-gradient(to bottom, rgba(3, 4, 10, .18), transparent 23%, transparent 74%, rgba(3, 4, 10, .34));
}

.experience-table__canvas {
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity .7s ease;
  touch-action: pan-y;
}

.experience-table.is-ready .experience-table__canvas { opacity: 1; }

.experience-table__fallback {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: .82;
  transform: scale(1.035);
  transition: opacity .7s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}

.experience-table.is-ready .experience-table__fallback {
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
}

.experience-table.is-fallback .experience-table__fallback {
  opacity: .9;
  transform: none;
}

.experience-table__veil {
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,11,23,.62) 0%, rgba(17,14,29,.33) 26%, rgba(20,16,29,.035) 55%, rgba(13,12,22,.17) 100%),
    linear-gradient(to bottom, rgba(12,11,24,.16), transparent 20%, transparent 76%, rgba(8,9,17,.34));
}

.experience-table__veil::before,
.experience-table__veil::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.experience-table__veil::before {
  inset: 0;
  background:
    radial-gradient(circle at 84% 15%, rgba(212,172,94,.12), transparent 25%),
    radial-gradient(circle at 42% 86%, rgba(75,151,222,.12), transparent 27%);
  mix-blend-mode: screen;
}

.experience-table__veil::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(212,172,94,.2), rgba(212,172,94,.65), rgba(212,172,94,.2), transparent 96%);
  box-shadow: 0 0 24px rgba(212,172,94,.16);
}

.experience-table__loading {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(280px, calc(100vw - 48px));
  font-family: system-ui, sans-serif;
  color: rgba(247,244,237,.68);
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

.experience-table.is-ready .experience-table__loading,
.experience-table.is-fallback .experience-table__loading {
  opacity: 0;
  visibility: hidden;
}

.experience-table__loading-ring {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(212,172,94,.22);
  box-shadow: inset 0 0 20px rgba(93,171,232,.08), 0 0 24px rgba(212,172,94,.08);
}

.experience-table__loading-ring::before,
.experience-table__loading-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 8px;
  border: 1px dashed rgba(212,172,94,.58);
  animation: expSpin 6s linear infinite;
}

.experience-table__loading-ring::after {
  inset: 18px;
  border-style: solid;
  border-color: rgba(139,199,239,.72) transparent rgba(139,199,239,.72) transparent;
  animation-duration: 2.8s;
  animation-direction: reverse;
}

@keyframes expSpin { to { rotate: 360deg; } }

.experience-table__loading-copy {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.experience-table__loading-bar {
  width: 180px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

.experience-table__loading-bar span {
  display: block;
  height: 100%;
  width: var(--experience-load, 0%);
  background: linear-gradient(90deg, #6faedd, var(--exp-gold));
  box-shadow: 0 0 12px rgba(212,172,94,.4);
  transition: width .2s linear;
}

.experience-table__copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  max-width: none;
  pointer-events: none;
}

.experience-table__intro {
  position: absolute;
  left: clamp(24px, 5vw, 84px);
  top: clamp(88px, 13vh, 144px);
  width: min(470px, 39vw);
  text-shadow: 0 3px 20px rgba(0,0,0,.64);
}

.experience-table__eyebrow {
  margin-bottom: 18px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--exp-gold);
  display: flex;
  align-items: center;
  gap: 11px;
}

.experience-table__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(212,172,94,.35);
}

.experience-table__title {
  margin: 0 0 20px;
  font-family: 'BlackChancery', Georgia, serif;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  color: #fff;
}

.experience-table__lead {
  max-width: 42ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.72;
  color: rgba(247,244,237,.82);
}

.experience-table__steps {
  position: absolute;
  right: clamp(22px, 4.5vw, 76px);
  bottom: clamp(54px, 8vh, 90px);
  width: min(375px, 31vw);
  list-style: none;
  display: grid;
  gap: 8px;
  counter-reset: exp-step;
}

.experience-table__step {
  counter-increment: exp-step;
  position: relative;
  min-height: 76px;
  padding: 14px 18px 14px 56px;
  border-left: 1px solid rgba(212,172,94,.16);
  background: linear-gradient(90deg, rgba(12,11,20,.8), rgba(12,11,20,.22));
  opacity: .28;
  transform: translateX(14px) scale(.985);
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .35s ease, background .35s ease;
}

.experience-table__step::before {
  content: counter(exp-step, upper-roman);
  position: absolute;
  left: 15px;
  top: 50%;
  translate: 0 -50%;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212,172,94,.35);
  transform: rotate(45deg);
  font-family: Georgia, serif;
  font-size: 10px;
  color: var(--exp-gold);
}

.experience-table__step::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--exp-gold), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}

.experience-table__step strong {
  display: block;
  margin-bottom: 3px;
  font-family: 'BlackChancery', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}

.experience-table__step span {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(247,244,237,.68);
}

.experience-table__step.is-active {
  opacity: 1;
  transform: none;
  border-color: rgba(212,172,94,.55);
  background: linear-gradient(90deg, rgba(31,27,39,.96), rgba(31,27,39,.38));
}

.experience-table__step.is-active::after { opacity: 1; }
.experience-table__step.is-done { opacity: .48; transform: none; }

.experience-table__scrollmark {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 5vw, 84px);
  bottom: clamp(34px, 6vh, 70px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,244,237,.34);
  pointer-events: none;
}

.experience-table__scrollmark::before {
  content: '';
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--exp-gold), transparent);
}

.experience-table__progress {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 0;
  width: 2px;
  height: var(--experience-progress, 0%);
  background: linear-gradient(to bottom, #74b8e5, var(--exp-gold));
  box-shadow: 0 0 12px rgba(212,172,94,.38);
  pointer-events: none;
}

.experience-table__status {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 19px;
  translate: -50% 0;
  padding: 6px 10px;
  border: 1px solid rgba(212,172,94,.22);
  background: rgba(8,8,15,.55);
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,244,237,.5);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.experience-table.is-fallback .experience-table__status { opacity: 1; }

@media (max-width: 960px) {
  .experience-table { min-height: 390vh; }
  .experience-table__sticky { min-height: 0; }
  .experience-table__viewport::before {
    opacity: .14;
    mix-blend-mode: normal;
  }
  .experience-table__veil {
    background:
      linear-gradient(to bottom, rgba(7,7,14,.9) 0%, rgba(7,7,14,.28) 34%, rgba(7,7,14,.14) 54%, rgba(7,7,14,.92) 100%),
      radial-gradient(ellipse at center, transparent 30%, rgba(5,5,10,.4) 100%);
  }
  .experience-table__intro {
    left: 22px;
    right: 22px;
    top: 78px;
    width: auto;
  }
  .experience-table__title { font-size: clamp(38px, 10vw, 58px); max-width: 8.5ch; }
  .experience-table__lead { max-width: 35ch; font-size: 14.5px; }
  .experience-table__steps {
    left: 18px;
    right: 18px;
    bottom: 34px;
    width: auto;
    display: block;
    min-height: 92px;
  }
  .experience-table__step {
    position: absolute;
    inset: auto 0 0;
    min-height: 86px;
    padding: 16px 18px 16px 58px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    background: linear-gradient(95deg, rgba(15,13,23,.97), rgba(15,13,23,.76));
    border: 1px solid rgba(212,172,94,.22);
  }
  .experience-table__step.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .experience-table__step.is-done { opacity: 0; visibility: hidden; }
  .experience-table__scrollmark { display: none; }
}

@media (max-width: 520px) {
  .experience-table { min-height: 360vh; }
  .experience-table__sticky { min-height: 0; }
  .experience-table__intro { top: 70px; }
  .experience-table__title { margin-bottom: 12px; font-size: clamp(34px, 11vw, 48px); }
  .experience-table__lead { max-width: 31ch; font-size: 13.5px; line-height: 1.6; }
  .experience-table__steps { bottom: 18px; }
  .experience-table__step strong { font-size: 18px; }
  .experience-table__step span { font-size: 10.5px; }
  .experience-table__loading { top: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-table {
    min-height: auto;
    padding: 72px 0 52px;
    background:
      linear-gradient(rgba(8,8,15,.42), rgba(8,8,15,.7)),
      url('../assets/experience/fallback.webp') center/cover no-repeat #0d0c15;
  }
  .experience-table__sticky {
    position: relative;
    height: auto;
    min-height: auto;
    overflow: visible;
    background: transparent;
  }
  .experience-table__viewport,
  .experience-table__progress,
  .experience-table__scrollmark,
  .experience-table__loading { display: none; }
  .experience-table__copy {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 40px;
  }
  .experience-table__intro,
  .experience-table__steps {
    position: relative;
    inset: auto;
    width: auto;
  }
  .experience-table__title { font-size: clamp(38px, 6vw, 58px); }
  .experience-table__steps { display: grid; gap: 8px; }
  .experience-table__step,
  .experience-table__step.is-active,
  .experience-table__step.is-done {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .experience-table__copy { grid-template-columns: 1fr; }
}

/* Dissout le dernier plan sombre dans le parchemin des formules. */
.experience-table::after {
  content: '';
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(247,244,237,.16) 55%, #f7f4ed 100%);
}

/* Repli déterministe si Three.js, le CDN ou WebGL ne sont pas disponibles. */
.experience-table.is-fallback {
  min-height: auto;
  padding: 76px 0 56px;
  background:
    linear-gradient(rgba(8,8,15,.2), rgba(8,8,15,.62)),
    url('../assets/experience/fallback.webp') center/cover no-repeat #0d0c15;
}
.experience-table.is-fallback .experience-table__sticky {
  position: relative;
  height: auto;
  min-height: auto;
  overflow: visible;
  background: transparent;
}
.experience-table.is-fallback .experience-table__viewport,
.experience-table.is-fallback .experience-table__progress,
.experience-table.is-fallback .experience-table__scrollmark,
.experience-table.is-fallback .experience-table__loading { display: none; }
.experience-table.is-fallback .experience-table__copy {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
}
.experience-table.is-fallback .experience-table__intro,
.experience-table.is-fallback .experience-table__steps {
  position: relative;
  inset: auto;
  width: auto;
  opacity: 1 !important;
  transform: none !important;
}
.experience-table.is-fallback .experience-table__steps { display: grid; gap: 8px; }
.experience-table.is-fallback .experience-table__step,
.experience-table.is-fallback .experience-table__step.is-active,
.experience-table.is-fallback .experience-table__step.is-done {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.experience-table.is-fallback .experience-table__status {
  position: relative;
  left: auto;
  bottom: auto;
  translate: none;
  width: max-content;
  max-width: calc(100% - 36px);
  margin: 28px auto 0;
}
@media (max-width: 760px) {
  .experience-table.is-fallback .experience-table__copy { grid-template-columns: 1fr; }
  .experience-table.is-fallback .experience-table__title { max-width: none; }
}