/* ==========================================================================
WONDERFUL TV — GENAP PREMIUM PRELOADER
Bible → Lumière → Monde
========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
  
  :root {
  --royal-purple: #4B0F5C;
  --royal-purple-dark: #17051f;
  --royal-purple-deep: #08030c;
  
 
  --gold: #D0AC51;
  --gold-light: #ffe9a0;
  --gold-bright: #fff3bd;
  --gold-dark: #8d661e;
  
  --white: #ffffff;
  
  
  }
  
  /* ==========================================================================
  PRELOADER
  ========================================================================== */
  
  #genap-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
 
  display: flex;
  align-items: center;
  justify-content: center;
  
  z-index: 999999;
  
  overflow: hidden;
  
  background:
      radial-gradient(
          circle at 50% 44%,
          rgba(75, 15, 92, .72) 0%,
          rgba(32, 7, 42, .92) 34%,
          var(--royal-purple-deep) 72%,
          #030106 100%
      );
  
  opacity: 1;
  visibility: visible;
  
  transition:
      opacity .65s ease,
      visibility .65s ease;
  
  isolation: isolate;
  
  }
  
  /* texture lumineuse très légère */
  #genap-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  

  background:
      radial-gradient(
          circle at 50% 40%,
          rgba(208, 172, 81, .08),
          transparent 35%
      );
  
  pointer-events: none;

  }
  
  /* ==========================================================================
  CONTENEUR
  ========================================================================== */
  
  .loader-container {
  position: relative;
  
  width: min(430px, 92vw);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  text-align: center;
  
  transform: translateZ(0);

  }
  
  /* ==========================================================================
  SCÈNE CENTRALE
  ========================================================================== */
  
  .divine-loader {
  position: relative;
  
  width: 300px;
  height: 430px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  transform: translateZ(0);
  
  }
  
  /* Aura générale */
  .divine-aura {
  position: absolute;
  
  width: 250px;
  height: 250px;
  
  left: 50%;
  top: 45%;
  
  transform: translate(-50%, -50%);
  
  border-radius: 50%;
  
  background:
      radial-gradient(
          circle,
          rgba(208,172,81,.13) 0%,
          rgba(208,172,81,.055) 35%,
          transparent 70%
      );
  
  filter: blur(8px);
  
  animation: auraBreath 4s ease-in-out infinite;
  
  }
  
  /* ==========================================================================
  GLOBE
  ========================================================================== */
  
  .earth-wrapper {
  position: absolute;
  
  top: 32px;
  left: 50%;
  
  width: 165px;
  height: 165px;
  
  transform:
      translateX(-50%)
      translateZ(0);
  
  z-index: 5;

  }
  
  .earth-svg {
  width: 100%;
  height: 100%;
  
  overflow: visible;
  
  transform:
      translateZ(0);
  
  animation:
      earthFloat 4.8s ease-in-out infinite;

  }
  
  /* halo autour du globe */
  .earth-glow {
  position: absolute;
  
  width: 145px;
  height: 145px;
  
  left: 50%;
  top: 50%;
  
  transform:
      translate(-50%, -50%)
      translateZ(0);
  
  border-radius: 50%;
  
  background:
      radial-gradient(
          circle,
          rgba(208,172,81,.22) 0%,
          rgba(208,172,81,.08) 42%,
          transparent 72%
      );
  
  filter: blur(8px);
  
  animation:
      earthGlow 3.2s ease-in-out infinite;
  
  }
  
  .earth-sphere {
  filter:
  drop-shadow(0 0 7px rgba(208,172,81,.8))
  drop-shadow(0 0 22px rgba(208,172,81,.35));
  }
  
  .earth-grid {
  fill: none;
  
  stroke:
      rgba(255,243,189,.28);
  
  stroke-width: .65;
  
  opacity: .75;

  }
  
  .earth-land {
  fill:
  rgba(255,239,157,.88);

  opacity: .95;
  }
  
  .earth-highlight {
  fill:
  rgba(255,255,255,.25);
  
  filter:
      blur(4px);
  
  }
  
  .earth-outline {
  fill: none;

  stroke:
      rgba(255,239,157,.85);
  
  stroke-width: 1;
  
  opacity: .9;
  
  }
  
  .earth-atmosphere {
  animation:
  atmospherePulse 3.5s ease-in-out infinite;
  }
  
  /* ==========================================================================
  LUMIÈRE DIVINE
  ========================================================================== */
  
  .divine-light {
  position: absolute;

  left: 50%;
  top: 168px;
  
  width: 190px;
  height: 145px;
  
  transform:
      translateX(-50%)
      translateZ(0);
  
  z-index: 3;
  
  pointer-events: none;
  
  }
  
  /*
  Les faisceaux sont positionnés dans l'espace
  entre la Bible et le globe.
  */
  
  .light-beam {
  position: absolute;
  
  left: 50%;
  bottom: 0;
  
  width: 2px;
  height: 135px;
  
  transform-origin: bottom center;
  
  border-radius: 100%;
  
  background:
      linear-gradient(
          to top,
          rgba(255,235,150,.0),
          rgba(255,235,150,.8),
          rgba(255,255,255,.08)
      );
  
  filter:
      blur(.15px)
      drop-shadow(0 0 5px rgba(208,172,81,.8));
  
  opacity: .55;
  
  animation:
      lightBreath 2.4s ease-in-out infinite;
  }
  
  .beam-1 {
  transform:
  translateX(-50%)
  rotate(-28deg)
  scaleY(.82);
  }
  
  .beam-2 {
  transform:
  translateX(-50%)
  rotate(-14deg)
  scaleY(.95);
  
  animation-delay: -.4s;
  
  }
  
  .beam-3 {
  width: 3px;
  
  transform:
      translateX(-50%)
      rotate(0deg);
  
  opacity: .95;
  
  filter:
      blur(.5px)
      drop-shadow(0 0 9px rgba(255,224,119,.95));
  
  animation-delay: -.8s;

  }
  
  .beam-4 {
  transform:
  translateX(-50%)
  rotate(14deg)
  scaleY(.95);
  
  animation-delay: -1.2s;

  }
  
  .beam-5 {
  transform:
  translateX(-50%)
  rotate(28deg)
  scaleY(.82);
  
  animation-delay: -1.6s;
  
  }
  
  /* Particules */
  .light-particle {
  position: absolute;
  
  width: 4px;
  height: 4px;
  
  border-radius: 50%;
  
  background:
      #ffe9a0;
  
  box-shadow:
      0 0 8px #D0AC51,
      0 0 15px rgba(208,172,81,.7);
  
  opacity: 0;
  
  animation:
      particleRise 2.8s linear infinite;
  
  }
  
  .particle-1 {
  left: 42%;
  bottom: 8px;
  
  animation-delay: -.3s;
  
  }
  
  .particle-2 {
  left: 53%;
  bottom: 20px;
  
  animation-delay: -1.1s;
  
  }
  
  .particle-3 {
  left: 61%;
  bottom: 3px;
  
  animation-delay: -1.8s;
  
  }
  
  .particle-4 {
  left: 34%;
  bottom: 28px;
  animation-delay: -2.2s;
  
  }
  
  /* ==========================================================================
  BIBLE
  ========================================================================== */
  
  .bible-wrapper {
  position: absolute;
  left: 50%;
  bottom: 38px;
  
  width: 245px;
  height: 170px;
  
  transform:
      translateX(-50%)
      rotate(-6deg)
      translateZ(0);
  
  z-index: 4;
  
  animation:
      bibleFloat 4.2s ease-in-out infinite;
  }
  
  .bible-svg {
  width: 100%;
  height: 100%;

  overflow: visible;
  
  filter:
      drop-shadow(0 12px 18px rgba(0,0,0,.55))
      drop-shadow(0 0 15px rgba(208,172,81,.35));
  }
  
  /* halo de la Bible */
  .bible-halo {
  position: absolute;
  
  width: 190px;
  height: 100px;
  
  left: 50%;
  bottom: 20px;
  
  transform:
      translateX(-50%)
      translateZ(0);
  
  border-radius: 50%;
  
  background:
      radial-gradient(
          ellipse,
          rgba(208,172,81,.48) 0%,
          rgba(208,172,81,.18) 38%,
          transparent 72%
      );
  
  filter: blur(10px);
  
  z-index: -1;
  
  animation:
      bibleGlow 2.4s ease-in-out infinite;
  
  }
  
  .bible-shadow {
  fill:
  rgba(0,0,0,.45);

  filter:
      blur(3px);

  }
  
  .bible-lines {
  fill: none;
  stroke:
      rgba(139,100,30,.58);
  
  stroke-width: 1;
  
  stroke-linecap: round;
  }
  
  /* ==========================================================================
  MARQUE
  ========================================================================== */
  
  .loader-brand {
  position: relative;
  
  margin-top: -24px;
  
  font-family:
      Inter,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  
  font-size: 15px;
  
  font-weight: 800;
  
  letter-spacing: 5px;
  
  white-space: nowrap;
  
  color: #fff;
  
  text-shadow:
      0 0 12px rgba(208,172,81,.35);
  
  animation:
      brandPulse 2.2s ease-in-out infinite;
  
  }
  
  .loader-brand span {
  color:
  rgba(255,255,255,.92);
  }
  
  .loader-brand strong {
  color:
  var(--gold-light);
  

  font-weight: 900;
  margin-left: 5px;
  text-shadow:
      0 0 10px rgba(208,172,81,.65);

  }
  
  /* ==========================================================================
  PETITS POINTS DE CHARGEMENT
  ========================================================================== */
  
  .loader-loading {
  display: flex;
  
  gap: 6px;
  
  margin-top: 13px;

  
  }
  
  .loader-loading span {
  width: 4px;
  height: 4px;
  
  border-radius: 50%;
  
  background:
      var(--gold);
  
  box-shadow:
      0 0 8px rgba(208,172,81,.75);
  
  animation:
      loadingDot 1.2s ease-in-out infinite;
  
  }
  
  .loader-loading span:nth-child(2) {
  animation-delay: .15s;
  }
  
  .loader-loading span:nth-child(3) {
  animation-delay: .3s;
  }
  
  /* ==========================================================================
  ANIMATIONS
  ========================================================================== */
  
  @keyframes earthFloat {
  
  0%, 100% {
      transform:
          translate3d(0,0,0)
          scale(1);
  }
  
  50% {
      transform:
          translate3d(0,-6px,0)
          scale(1.015);
  }
  
  }
  
  @keyframes earthGlow {
  
  0%, 100% {
      opacity: .55;
      transform:
          translate(-50%,-50%)
          scale(.92)
          translateZ(0);
  }
  
  50% {
      opacity: 1;
      transform:
          translate(-50%,-50%)
          scale(1.08)
          translateZ(0);
  }

  }
  
  @keyframes atmospherePulse {
  
  0%, 100% {
      opacity: .55;
  }
  
  50% {
      opacity: .9;
  }
  }
  
  @keyframes lightBreath {
  
  0%, 100% {
      opacity: .3;
      transform-origin: bottom center;
  }
  
  50% {
      opacity: .95;
  }
  
  }
  
  @keyframes particleRise {

  0% {
      opacity: 0;
      transform:
          translate3d(0,30px,0)
          scale(.4);
  }
  
  20% {
      opacity: 1;
  }
  
  75% {
      opacity: .8;
  }
  
  100% {
      opacity: 0;
      transform:
          translate3d(0,-120px,0)
          scale(1);
  }
  
  }
  
  @keyframes bibleFloat {
  
  0%, 100% {
      transform:
          translate3d(-50%,0,0)
          rotate(-6deg);
  }
  
  50% {
      transform:
          translate3d(-50%,-4px,0)
          rotate(-4deg);
  }
  
  }
  
  @keyframes bibleGlow {
  
  0%, 100% {
      opacity: .45;
      transform:
          translateX(-50%)
          scale(.88)
          translateZ(0);
  }
  
  50% {
      opacity: .95;
      transform:
          translateX(-50%)
          scale(1.08)
          translateZ(0);
  }

  }
  
  @keyframes auraBreath {

  0%, 100% {
      opacity: .55;
      transform:
          translate(-50%,-50%)
          scale(.9)
          translateZ(0);
  }
  
  50% {
      opacity: 1;
      transform:
          translate(-50%,-50%)
          scale(1.08)
          translateZ(0);
  }
  
  }
  
  @keyframes brandPulse {
  
  0%, 100% {
      opacity: .7;
  }
  
  50% {
      opacity: 1;
  }

  }
  
  @keyframes loadingDot {
  0%, 100% {
      opacity: .25;
      transform: scale(.75);
  }
  
  50% {
      opacity: 1;
      transform: scale(1.2);
  }
  }
  
  /* ==========================================================================
  SORTIE DU PRELOADER
  ========================================================================== */
  
  #genap-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  }
  
  /* ==========================================================================
  ACCESSIBILITÉ — REDUCED MOTION
  ========================================================================== */
  
  @media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
  }

  
  }
  
  /* ==========================================================================
  MOBILE
  ========================================================================== */
  
  @media (max-width: 480px) {

  .divine-loader {
      width: 280px;
      height: 400px;
  }
  
  .earth-wrapper {
      top: 28px;
      width: 150px;
      height: 150px;
  }
  
  .divine-light {
      top: 155px;
      width: 175px;
      height: 135px;
  }
  
  .bible-wrapper {
      bottom: 30px;
      width: 225px;
  }
  
  .loader-brand {
      font-size: 13px;
      letter-spacing: 4px;
  }
  
  }