/* ════════════════════════════════════════════════════════════
   NOVIA — « L'expérience » : visite 3D au défilement
   (experience.js / experience-scene.js) et manifeste lumineux.
   ════════════════════════════════════════════════════════════ */

.xp {
  --xp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  background: var(--novia-bg, #07070d);
  color: var(--novia-text, #c8c7dc);
}

/* ── Mode vivant : section haute, scène épinglée ── */
.xp.xp-live { height: calc(var(--xp-units, 5) * 120vh + 40vh); }
.xp-stage { position: relative; }
.xp-live .xp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.xp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: -2;
}
.xp.is-ready .xp-canvas { opacity: 1; }

/* Fond de secours (avant le chargement ou sans WebGL) : faisceaux dessinés en CSS. */
.xp-live .xp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 18% 70% at 62% 0%, rgba(255, 226, 194, 0.14), transparent 70%),
    radial-gradient(ellipse 30% 22% at 64% 78%, rgba(124, 92, 255, 0.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(59, 42, 32, 0.25) 0 6px, transparent 6px 16px),
    var(--novia-bg, #07070d);
}

.xp-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--novia-bg, #07070d) 0%, rgba(7, 7, 13, 0) 14%, rgba(7, 7, 13, 0) 84%, var(--novia-bg, #07070d) 100%);
}
/* Voile de lecture : à gauche pendant la visite, en bas pour le final. */
.xp-veil::before, .xp-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
}
.xp-veil::before { background: linear-gradient(90deg, rgba(7, 7, 13, 0.88) 0%, rgba(7, 7, 13, 0.55) 30%, rgba(7, 7, 13, 0) 56%); }
.xp-veil::after { opacity: 0; background: linear-gradient(180deg, rgba(7, 7, 13, 0) 45%, rgba(7, 7, 13, 0.85) 78%, rgba(7, 7, 13, 0.95) 100%); }
.xp.is-final .xp-veil::before { opacity: 0; }
.xp.is-final .xp-veil::after { opacity: 1; }

/* ── Chapitres ── */
.xp-chapters { position: relative; }
.xp-live .xp-chapters { position: absolute; inset: 0; pointer-events: none; }
/* Ticket NOVIA-20261013-01 : chapitres masqués le temps du chargement des polices (motion-boot.js). */
.xp-live.xp-fonts-wait .xp-chapters { visibility: hidden; }

.xp-chapter { max-width: 560px; }
.xp-live .xp-chapter {
  position: absolute;
  left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.xp-live .xp-chapter.is-active { opacity: 1; pointer-events: auto; transition-duration: 0.3s; }
/* Final : texte centré sous la galerie entière. */
.xp-live .xp-chapter:last-child {
  left: 50%;
  top: auto;
  bottom: 9vh;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 48px));
  max-width: none;
  text-align: center;
}
.xp-live .xp-chapter:last-child .xp-actions { justify-content: center; }

.xp-live .xp-chapter > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.5s ease, transform 0.6s var(--xp-ease), filter 0.5s ease;
}
.xp-live .xp-chapter.is-past > * { transform: translateY(-28px); }
.xp-live .xp-chapter.is-active > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s ease, transform 1.1s var(--xp-ease), filter 0.9s ease;
}
.xp-live .xp-chapter.is-active > :nth-child(2) { transition-delay: 0.08s; }
.xp-live .xp-chapter.is-active > :nth-child(3) { transition-delay: 0.16s; }
.xp-live .xp-chapter.is-active > :nth-child(4) { transition-delay: 0.24s; }
.xp-live .xp-chapter.is-active > :nth-child(5) { transition-delay: 0.32s; }
.xp-live .xp-chapter.is-active > :nth-child(6) { transition-delay: 0.4s; }
.xp-live .xp-chapter.is-active > :nth-child(7) { transition-delay: 0.48s; }

.xp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--novia-gold, #f0b429);
}
.xp-kicker span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(240, 180, 41, 0.45);
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.xp-title {
  margin: 0 0 20px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
}
.xp-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--novia-accent-3, #a98bff), var(--novia-gold, #f0b429));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.xp-text {
  margin: 0 0 22px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--novia-text, #c8c7dc);
}
.xp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.xp-tags li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: #e6e5f3;
}
.xp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 4px;
  transition: gap 0.3s var(--xp-ease), border-color 0.3s ease;
}
.xp-link::after { content: "→"; }
.xp-link:hover, .xp-link:focus-visible { gap: 16px; border-color: var(--novia-gold, #f0b429); }
.xp-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Chapitre d'ouverture : le hero de la page, dans la scène 3D ── */
.xp-chapter--hero { max-width: 620px; }
.xp-chapter--hero .xp-title { font-size: clamp(2.5rem, 5vw, 4.6rem); }
.xp-chapter--hero .xp-actions { margin-bottom: 26px; }
.xp-extra { margin: 0 0 24px; }
.xp-extra .hero-kpis { margin-top: 0; }
.xp-scroll-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(200, 199, 220, 0.6);
}
.xp-scroll-note::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--novia-gold, #f0b429), transparent);
}
/* À l'ouverture, l'invitation « Défiler » du bas d'écran ferait doublon. */
.xp-live:not(.is-started) .xp-hint { opacity: 0.55; }

/* ── Rail des chapitres, progression, invitation à défiler ── */
.xp-rail { display: none; }
.xp-live .xp-rail {
  position: absolute;
  right: max(18px, calc((100vw - 1200px) / 2 - 20px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
}
.xp-rail button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 4px 0;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease;
}
.xp-rail button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: transform 0.4s var(--xp-ease), background 0.3s ease;
}
.xp-rail button span { opacity: 0; transform: translateX(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.xp-rail:hover button span, .xp-rail button:focus-visible span { opacity: 1; transform: none; }
.xp-rail button:hover, .xp-rail button:focus-visible { color: #fff; }
.xp-rail button[aria-current] { color: var(--novia-gold, #f0b429); }
.xp-rail button[aria-current]::after { background: currentColor; transform: scale(1.35); }

.xp-progress { display: none; }
.xp-live .xp-progress {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.xp-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--novia-accent-2, #7c5cff), var(--novia-gold, #f0b429));
}

/* Pièce manipulable : glisser à la souris, glissé horizontal au doigt. */
.xp-live .xp-stage { touch-action: pan-y pinch-zoom; }
.xp.is-over-piece .xp-stage { cursor: grab; }
.xp.is-grabbing .xp-stage { cursor: grabbing; user-select: none; }
.xp-spin-hint {
  position: absolute;
  right: max(24px, calc((100vw - 1200px) / 2 + 24px));
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 7, 13, 0.55);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.8s var(--xp-ease);
}
.xp-spin-hint svg { flex: none; animation: xp-spin-hint 2.4s var(--xp-ease) infinite; }
.xp-spin-hint.is-visible { opacity: 1; transform: none; }
@keyframes xp-spin-hint {
  0%, 15% { transform: rotate(0); }
  60%, 100% { transform: rotate(360deg); }
}
@media (max-width: 820px) {
  .xp-spin-hint { left: 50%; right: auto; top: calc(80px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -10px); white-space: nowrap; }
  .xp-spin-hint.is-visible { transform: translateX(-50%); }
}

.xp-hint { display: none; }
.xp-live .xp-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: opacity 0.6s ease;
}
.xp-hint::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  animation: xp-hint 1.8s ease-in-out infinite;
  transform-origin: top;
}
.xp.is-started .xp-hint { opacity: 0; }
@keyframes xp-hint {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Mode statique (animations réduites) : chapitres empilés ── */
.xp-static { padding: var(--space-2xl, 120px) 0; }
.xp-static .xp-canvas, .xp-static .xp-veil { display: none; }
.xp-static .xp-chapters {
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.xp-static .xp-chapter {
  max-width: none;
  padding: 32px;
  border: 1px solid var(--novia-border, rgba(255, 255, 255, 0.07));
  border-radius: var(--radius-lg, 24px);
  background: var(--novia-bg-2, #0f0f1a);
}
.xp-static .xp-chapter:first-child, .xp-static .xp-chapter:last-child { grid-column: 1 / -1; }
.xp-static .xp-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.xp-static .xp-scroll-note { display: none; }

/* ── Écrans étroits : texte en bas, pièce au-dessus ── */
@media (max-width: 820px) {
  .xp.xp-live { height: calc(var(--xp-units, 5) * 104vh + 40vh); }
  .xp-veil {
    background: linear-gradient(180deg, var(--novia-bg, #07070d) 0%, rgba(7, 7, 13, 0) 12%, rgba(7, 7, 13, 0) 40%, rgba(7, 7, 13, 0.82) 64%, rgba(7, 7, 13, 0.96) 100%);
  }
  .xp-live .xp-chapter,
  .xp-live .xp-chapter:last-child {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
  }
  .xp-title { font-size: clamp(2rem, 9vw, 2.8rem); margin-bottom: 14px; }
  .xp-chapter--hero .xp-title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .xp-chapter--hero .xp-text { font-size: 0.95rem; line-height: 1.6; }
  .xp-chapter--hero .xp-actions { margin-bottom: 16px; }
  .xp-chapter--hero .xp-actions > * { flex: 1 1 auto; justify-content: center; text-align: center; }
  .xp-extra { margin-bottom: 14px; }
  .xp-extra .hero-kpis { gap: 14px; }
  .xp-scroll-note { display: none; }
  .xp-text { font-size: 1rem; margin-bottom: 16px; }
  .xp-tags { margin-bottom: 18px; }
  /* Sur téléphone, le haut de l'écran reste à la barre de navigation : pas de rail
     ni d'invitation « Défiler » (la barre de progression du bas suffit). */
  .xp-live .xp-rail, .xp-live .xp-hint { display: none; }
}

/* Écrans peu hauts (portable 13", fenêtre réduite, téléphone à l'horizontale) :
   le texte se centre sous la barre de navigation et se resserre. */
@media (min-width: 821px) and (max-height: 820px) {
  .xp-live .xp-chapter:not(:last-child) { top: calc(50% + 36px); }
  .xp-chapter--hero .xp-title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-bottom: 14px; }
  .xp-title { font-size: clamp(2rem, 3.6vw, 3.1rem); }
  .xp-text { margin-bottom: 18px; }
}
@media (min-width: 821px) and (max-height: 700px) {
  .xp-chapter--hero .xp-extra, .xp-scroll-note { display: none; }
}
@media (min-width: 821px) and (max-height: 520px) {
  .xp-kicker { margin-bottom: 10px; }
  .xp-chapter--hero .xp-title, .xp-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
  .xp-text { font-size: 0.92rem; line-height: 1.5; margin-bottom: 12px; }
  .xp-tags { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Manifeste : les mots s'allument au défilement, lampe torche.
   ════════════════════════════════════════════════════════════ */
.xp-manifesto {
  position: relative;
  padding: clamp(110px, 18vh, 200px) 0;
  overflow: hidden;
  background: var(--novia-bg, #07070d);
  isolation: isolate;
}
.xp-manifesto-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 340px at var(--fx, 50%) var(--fy, 50%), rgba(255, 226, 194, 0.16), rgba(124, 92, 255, 0.06) 45%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(92, 66, 50, 0.55) 0 7px, rgba(20, 15, 12, 0.4) 7px 9px, transparent 9px 20px);
  -webkit-mask-image: radial-gradient(circle 420px at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  mask-image: radial-gradient(circle 420px at var(--fx, 50%) var(--fy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
}
.xp-manifesto .container { max-width: 1100px; }
.xp-manifesto-kicker {
  margin: 0 0 28px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--novia-gold, #f0b429);
}
.xp-manifesto-text {
  margin: 0;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
}
.m-scrub-word { opacity: 0.16; transition: opacity 0.35s ease, color 0.35s ease; }
.m-scrub-word.is-lit { opacity: 1; }
.m-scrub-word.is-accent.is-lit { color: var(--novia-accent-3, #a98bff); }

@media (prefers-reduced-motion: reduce) {
  .m-scrub-word { opacity: 1; transition: none; }
  .xp-hint::after { animation: none; }
}
.xp-manifesto-text em { font-style: normal; }