/* Vol au-dessus du Royaume — section scroll-driven de la landing.
   Préfixe rf- pour ne pas entrer en collision avec les styles de la page.
   S'appuie sur les jetons de la landing (--px, --gold, --ink, --line…). */

#rf-wrap { position: relative; }
/* Épinglage JS (translateY posé par flight.js) : un ancêtre de la page a
   overflow:hidden, ce qui neutralise position:sticky. */
#rf-stage {
  position: absolute; top: 0; left: 0; right: 0; overflow: hidden;
  /* iOS Safari : 100vh varie avec la barre d'URL → svh (petit viewport) stable. */
  height: 100vh; height: 100svh;
  will-change: transform;
  background: linear-gradient(180deg, #f4ecdb, #efe4cd);
}
#rf-world {
  position: absolute; left: 0; top: 0;
  width: 1672px; height: 941px;
  transform-origin: 0 0; will-change: transform;
}
#rf-world img.rf-map {
  position: absolute; inset: 0; width: 1672px; height: 941px;
  image-rendering: pixelated; user-select: none; -webkit-user-drag: none;
  box-shadow: var(--shadow-deep, 0 30px 64px -28px rgba(28, 42, 80, .42));
}
.rf-sprite {
  position: absolute; image-rendering: pixelated;
  transform: translate(-50%, -50%); pointer-events: none;
}
@keyframes rf-frameswap { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.rf-hydre-1 { animation: rf-frameswap .9s steps(1) infinite; }
.rf-hydre-0 { animation: rf-frameswap .9s steps(1) infinite reverse; }
@keyframes rf-glow { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
.rf-campfire-glow {
  position: absolute; width: 120px; height: 70px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 170, 70, .55), rgba(255, 120, 30, .18) 55%, transparent 72%);
  animation: rf-glow 1.2s ease-in-out infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .rf-hydre-1, .rf-hydre-0, .rf-campfire-glow { animation: none; }
  .rf-hydre-1 { opacity: 0; }
}
#rf-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 160px 40px rgba(122, 90, 30, .28);
}

.rf-card {
  position: absolute; left: 40px; bottom: 46px; z-index: 20;
  max-width: 360px; padding: 20px 24px;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-card, 0 14px 32px -20px rgba(28, 42, 80, .28));
  opacity: 0; translate: 0 18px;
  transition: opacity .35s ease, translate .35s ease;
  pointer-events: none;
}
.rf-card.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.rf-card .rf-kicker {
  font-family: var(--px); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: #bd8a2a; margin: 0 0 8px;
}
.rf-card h3 {
  font-family: var(--px); font-weight: 700; font-size: 27px; line-height: 1.08;
  margin: 0 0 9px; text-wrap: balance; color: #16223f;
}
.rf-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #46577e; }
.rf-card p b { color: #bd8a2a; font-weight: 700; }
/* CTA autonome (les classes de boutons diffèrent entre les pages FR et EN). */
.rf-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 12px 22px;
  font-family: var(--px); font-size: 15px; text-decoration: none;
  color: #1a1206; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold2, #e8b552), var(--gold, #bd8a2a));
  box-shadow: 0 14px 30px -10px rgba(232, 181, 82, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .25s ease;
}
.rf-cta:hover { transform: translateY(-2px); }

#rf-dots {
  position: absolute; right: 26px; top: 50%; translate: 0 -50%; z-index: 20;
  display: flex; flex-direction: column; gap: 14px;
}
#rf-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(28, 42, 80, .22); transition: background .3s, scale .3s;
}
#rf-dots i.on { background: var(--gold); scale: 1.5; }

@media (max-width: 640px) {
  .rf-card { left: 16px; right: 16px; bottom: 22px; max-width: none; }
}