body {
  position: relative; /* sert de repère pour .main-frame, sinon son "bottom" se cale sur la hauteur de l'écran et non sur celle de la page */
  cursor : url('../assets/cursors/real_hand_cursor.cur'), auto; /* curseur personnalisé */
  background-image: url('../assets/gif/space_wallpaper_hd.gif');
  background-repeat: repeat; /* motif répété */
  background-size: 128px 128px; /* garde la taille d'origine */
  image-rendering: pixelated; /* garde l'effet pixel rétro */
  margin: 0; /* enlève la marge par défaut */
  min-height: 100vh;
  color: #eee; /* texte gris clair */
  font-family: monospace; /* style rétro */
}

/* titre centré en haut test*/
#titre img {
  display: block;     /* rend l'image un bloc pour que margin auto fonctionne */
  margin: 0 auto;     /* centre horizontalement */
  max-width: 100%;    /* responsive : l'image ne dépasse pas le conteneur */
  height: auto;       /* conserve les proportions */
  margin-top : 2rem;  /* 1rem = la taille de la police par défaut */
  position : relative;
  z-index : 2;
}

/* boutons de navigation façon vieux bouton Windows/pixel */
.retro-button {
  display: inline-block;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  color: #000;
  background: #c0c0c0;
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 0.6rem 1.2rem;
  box-shadow: 3px 3px 0 #000;
  image-rendering: pixelated;
}

.retro-button:hover {
  background: #d8d8d8;
}

.retro-button:active {
  border-color: #808080 #fff #fff #808080;
  box-shadow: none;
  transform: translate(3px, 3px);
}

/* texte qui clignote façon geocities */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink {
  animation: blink 1s steps(1) infinite;
  color: #ff0;
  font-weight: bold;
}

/* bandeau under construction avec marquee, sous le titre */
#under-construction {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

#blurtext {
  width: min(90vw, 500px);
  margin: 1rem auto 2rem;
  padding: 0.5rem 1rem;
  background: #333333;
  color: #fff;
  text-shadow: -9px -7px 11px #EDEDED;
  text-align: center;
  border: 2px solid #000;
  outline: 2px solid #ccc;
  font-family: monospace;
}

#blurtext marquee {
  display: block;
  margin-top: 0.3rem;
}

/* compteur de visiteurs façon vieux compteur LCD */
.visitor-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem auto 6rem;
  font-family: monospace;
  color: #eee;
  position: relative;
  z-index: 2;
}

.visitor-counter-digits {
  background: #000;
  color: #0f0;
  padding: 0.3rem 0.6rem;
  border: 2px solid #444;
  letter-spacing: 3px;
  font-weight: bold;
  text-shadow: 0 0 5px #0f0;
}

/* cadre */
.frame {
  border: 2px solid #ccc;       /* bordure claire */
  outline: 4px solid #000;      /* espace noir */
  box-shadow: 0 0 0 6px #ccc;   /* deuxième cadre */
  padding: 2rem;
  max-width: 600px;             /* largeur max */
  text-align: center;           /* texte centré */
  margin: 4rem auto;            /* centre horizontalement et espace en haut/bas */
  background-image: url('../assets/gif/space_wallpaper_hd.gif');
  position : relative;
  z-index : 2;
}

/* Main Frame  */

.main-frame {
  position: absolute;                 /* pour pouvoir contrôler top/bottom */
  top: -50px;                         /* dépassement en haut pour cacher la bordure */
  left: 250px;                         /* marge à gauche */
  right: 250px;                        /* marge à droite */
  bottom: 10px;                        /* 10px du bas de la fenêtre */

  z-index: 1;                          /* couche 1, tout le reste au-dessus */
  
  background: url('../assets/textures/rockwall8/rockwall8.png') repeat;

  border-left: 2px solid #ccc;         /* bord gauche */
  border-right: 2px solid #ccc;        /* bord droit */
  border-bottom: 2px solid #ccc;       /* bord bas */
  /* pas de border-top */

  outline: 4px solid #000;             /* cadre noir autour */
  box-shadow: 0 0 0 6px #ccc;          /* deuxième cadre */

  padding: 2rem;                       /* espace interne */
  text-align: center;
  box-sizing: border-box;              /* inclut padding et border */


}



.ours_img {
  display: flex;              /* mets ours et frame côte à côte */
  justify-content: center;    /* centre le bloc global horizontalement */
  align-items: center;        /* aligne verticalement l’ours et la frame */
  position : relative;      /* pour le positionnement absolu du gif avec z-index */
  z-index : 2;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0));
    transition: filter 0.01s linear; /* transition très rapide pour fluidité */
  }


  


.aligner {
  display: flex;              /* mets les éléments côte à côte */
  justify-content: center;    /* centre horizontalement */
  align-items: center;        /* aligne verticalement */
  gap: 2rem;                  /* espace entre les éléments */
}