/* ============================================================
   LEVEAYITI.ORG V3.2 — CSS overlays + animations premium
   ✓ Image maître jamais modifiée
   ✓ pointer-events: none sur toutes les couches animation
   ✓ z-index : animation(1) < hotspots(10)
   ✓ FATIMA intacte — halo solaire positionné à y≥66% (horizon)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: #081A34; overflow-x: hidden; }

/* ── Wrapper ── */
.page-wrapper {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* ── Image maître — source absolue, jamais touchée ── */
.master-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ══════════════════════════════════════════════════════════
   COUCHES D'ANIMATION — pointer-events: none obligatoire
   ══════════════════════════════════════════════════════════ */

#hero-animation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Canvas unique : réseau · étoiles · shooting stars · particules */
#anim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   ANIMATION 2 — HALO SOLAIRE VIVANT

   Position : x=64%, y=66% (horizon sous le corps de FATIMA)
   Technique : radial-gradient en mix-blend-mode screen
               → ajoute uniquement de la lumière, ne couvre jamais
   Layers :
     #sun-glow-layer          = halo principal chaud
     #sun-glow-layer::before  = shimmer / micro-pulsation des rayons
     #sun-glow-layer::after   = couronne externe atmosphérique
     #sun-corona              = anneau corona subtil
     #atmo-glow               = lueur atmosphérique diffuse
   ══════════════════════════════════════════════════════════ */

/* ── Halo principal ── */
#sun-glow-layer {
  position: absolute;
  left: 64%;
  top:  66%;
  width: 16%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 205, 90,  0.26) 0%,
    rgba(255, 170, 50,  0.14) 28%,
    rgba(255, 145, 30,  0.06) 55%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: sunBreath 5.5s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ── Shimmer / micro-pulsation ─────────────────────────────
   Couche ::before : simule le frémissement des rayons solaires
   Rotation très lente + oscillation de luminosité              */
#sun-glow-layer::before {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent          0deg,
    rgba(255,195,80,0.04) 18deg,
    transparent          36deg,
    rgba(255,210,90,0.03) 54deg,
    transparent          72deg,
    rgba(255,195,80,0.04) 90deg,
    transparent         108deg,
    rgba(255,210,90,0.03)126deg,
    transparent         144deg,
    rgba(255,195,80,0.04)162deg,
    transparent         180deg,
    rgba(255,210,90,0.03)198deg,
    transparent         216deg,
    rgba(255,195,80,0.04)234deg,
    transparent         252deg,
    rgba(255,210,90,0.03)270deg,
    transparent         288deg,
    rgba(255,195,80,0.04)306deg,
    transparent         324deg,
    rgba(255,210,90,0.03)342deg,
    transparent         360deg
  );
  animation: raysRotate 38s linear infinite, raysShimmer 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ── Couronne externe ── */
#sun-glow-layer::after {
  content: '';
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 175, 55, 0.07) 0%,
    rgba(255, 145, 30, 0.02) 50%,
    transparent 72%
  );
  animation: sunBreath 5.5s ease-in-out infinite reverse;
}

/* ── Corona (anneau lumineux discret) ── */
#sun-corona {
  position: absolute;
  left: 64%;
  top:  66%;
  width: 28%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    transparent 42%,
    rgba(255, 185, 60, 0.05) 52%,
    rgba(255, 165, 40, 0.02) 65%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: coronaPulse 7s ease-in-out infinite;
  will-change: opacity;
}

/* ── Lueur atmosphérique horizon ── */
#atmo-glow {
  position: absolute;
  left:   44%;
  top:    60%;
  width:  56%;
  height: 32%;
  background: radial-gradient(ellipse 65% 55% at 50% 25%,
    rgba(255, 168, 58, 0.07) 0%,
    rgba(255, 138, 32, 0.03) 55%,
    transparent 82%
  );
  mix-blend-mode: screen;
  animation: atmoBreath 10s ease-in-out infinite;
  will-change: opacity;
}

/* ══════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════ */

/* Respiration principale du soleil — noble, lente */
@keyframes sunBreath {
  0%   { transform: translate(-50%,-50%) scale(1.00); opacity: 0.68; }
  30%  { transform: translate(-50%,-50%) scale(1.06); opacity: 0.88; }
  50%  { transform: translate(-50%,-50%) scale(1.10); opacity: 1.00; }
  70%  { transform: translate(-50%,-50%) scale(1.06); opacity: 0.90; }
  100% { transform: translate(-50%,-50%) scale(1.00); opacity: 0.68; }
}

/* Rotation douce des rayons */
@keyframes raysRotate {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Shimmer des rayons — micro-oscillation */
@keyframes raysShimmer {
  0%, 100% { opacity: 0.60; }
  50%       { opacity: 1.00; }
}

/* Corona — anneau subtil */
@keyframes coronaPulse {
  0%, 100% { opacity: 0.50; }
  50%       { opacity: 1.00; }
}

/* Lueur atmosphérique */
@keyframes atmoBreath {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1.00; }
}

/* ══════════════════════════════════════════════════════════
   HOTSPOTS — toujours au-dessus (z-index: 10)
   ══════════════════════════════════════════════════════════ */
.hotspot {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50px;
  transition: background 0.2s;
}
.hotspot:hover        { background: rgba(255,255,255,0.06); }
.hotspot:focus-visible {
  outline: 2px solid rgba(217,166,46,0.7);
  outline-offset: 2px;
}
.hotspot.social { border-radius: 8px; }

/* ── DEBUG mode ── */
.debug .hotspot {
  border: 2px dashed rgba(255,220,0,0.75);
  background: rgba(255,220,0,0.08);
  border-radius: 4px;
}
.debug .hotspot::after {
  content: attr(aria-label);
  position: absolute;
  top: -20px; left: 0;
  font: 700 9px/1 monospace;
  color: #FFD700;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .hotspot           { display: none; }
  #sun-glow-layer    { opacity: 0.55; }
  #sun-corona        { opacity: 0.45; }
  #atmo-glow         { opacity: 0.40; }
}

/* ── RÉDUCTION DE MOUVEMENT ── */
@media (prefers-reduced-motion: reduce) {
  #sun-glow-layer,
  #sun-glow-layer::before,
  #sun-glow-layer::after,
  #sun-corona,
  #atmo-glow {
    animation: none;
    opacity: 0.45;
  }
}