@font-face {
  font-family: "Elephant";
  src: url("fonts/ELEPHNT.TTF") format("truetype");  /* ou "fonts/ELEPHNT.TTF" si dans un dossier */
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #000000;   
  --text: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Elephant", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  overflow: hidden; 
}

/* titre */
header.site-title {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
}
header.site-title h1 {
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
  letter-spacing: 2px;
}

/* scène plein écran */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* image en bas de la page */
.image-section {
  position: absolute;
  bottom: -10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* image */
#sleeper {
  width: min(800px, 80vw);
  height: auto;
  display: block;
}

/* calque des bulles (repère écran) */
#bubbles {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* bulles (liens) */
#bubbles a.bubble {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items:left;
  justify-content:left;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #050093, #020970);
  color: #06142c;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: auto;
  user-select: none;
  transition: filter .2s ease;
}

#bubbles a.bubble:hover {
  filter: brightness(1.1);
}

/* flottement vertical doux */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--amp, 12px)); }
}

/* nav source masquée */
nav#bubbleBar {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  #bubbles a.bubble { 
    animation: none !important; 
    transition: none !important; 
  }
}