@font-face {                  
font-family: 'Jacquard12';
src: url(https://humantooth.neocities.org/fonts/Jacquard12-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 




::selection {
/* Change highlight background color */
background: darkblue;
/* Change highlight text color */
color: white;
}


body {
  background: url('/images/backgrounds/282.gif') repeat;
  color: white;  /*Couleur du texte sur la page */
  font-family: Verdana;
  padding-top:50px;
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=124210'), auto; 
}

iframe {
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=124210'), auto;
}

.musicplayer:hover {
  cursor: url('http://www.rw-designer.com/cursor-extern.php?id=124210'), auto;
  z-index: 2;
}


.musicplayer{
  text-align: center;
  margin: 0 auto;
  padding-bottom:40px;
}

.coquillagegif {
  position: fixed;     /* la fixe sur l’écran */
  top: 15%;        /* distance du bas, ajuste selon ton goût */
  right: 10%;         /* distance du bord droit */
  z-index: 10;         /* au-dessus du fond mais sous le reste si besoin */
  pointer-events: none; /* empêche les clics dessus */
}

.coquillagegif img{
  width: 150%;
}



@media screen and (max-width: 768px) {
  .coquillagegif {
    display: none !important;
  }}

/* --- Premier poisson --- */
.floating-gif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.floating-gif img {
  position: absolute;
  width: 180px;
  animation: swim 40s ease-in-out infinite;
}

/* --- Deuxième poisson --- */
.floating-gif2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 998; /* légèrement derrière le premier */
}

.floating-gif2 img {
  position: absolute;
  width: 160px;
  opacity: 0.9;
  animation: swim2 45s ease-in-out infinite;
}

/* --- Animation du premier poisson --- */
@keyframes swim {
  0% {
    transform: translate(0vw, 10vh) scaleX(1);
  }
  25% {
    transform: translate(80vw, 30vh) scaleX(-1);
  }
  50% {
    transform: translate(10vw, 70vh) scaleX(1);
  }
  75% {
    transform: translate(70vw, 50vh) scaleX(-1);
  }
  100% {
    transform: translate(0vw, 10vh) scaleX(1);
  }
}

/* --- Animation du deuxième poisson (part de la droite) --- */
@keyframes swim2 {
  0% {
    transform: translate(100vw, 70vh) scaleX(-1); /* face à droite */
  }
  25% {
    transform: translate(20vw, 40vh) scaleX(1); /* nage vers la gauche */
  }
  50% {
    transform: translate(90vw, 20vh) scaleX(-1); /* revient à droite */
  }
  75% {
    transform: translate(30vw, 80vh) scaleX(1); /* repart à gauche */
  }
  100% {
    transform: translate(100vw, 70vh) scaleX(-1); /* boucle */
  }
}


/* 🌊 Forêt dense d'algues */
.seaweed-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* Derrière tout, mais devant le fond */
}

/* Toutes les algues partagent cette base */
.seaweed {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  animation: sway 6s ease-in-out infinite alternate;
  image-rendering: pixelated;
  opacity: 0.8;
}

/* Animation de balancement */
@keyframes sway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

/* 🌿 Variations aléatoires */
.seaweed1  { left: 3%;  height: 230px; animation-duration: 7s;  opacity: 0.8; }
.seaweed2  { left: 8%;  height: 260px; animation-duration: 6.5s; opacity: 0.7; }
.seaweed3  { left: 13%; height: 190px; animation-duration: 5.5s; opacity: 0.85; }
.seaweed4  { left: 18%; height: 210px; animation-duration: 7.5s; opacity: 0.9; }
.seaweed5  { left: 23%; height: 240px; animation-duration: 8s;   opacity: 0.75; }
.seaweed6  { left: 30%; height: 220px; animation-duration: 6.8s; opacity: 0.7; }
.seaweed7  { left: 36%; height: 250px; animation-duration: 9s;   opacity: 0.8; }
.seaweed8  { left: 42%; height: 270px; animation-duration: 5.8s; opacity: 0.9; }
.seaweed9  { left: 49%; height: 180px; animation-duration: 7s;   opacity: 0.65; }
.seaweed10 { left: 55%; height: 260px; animation-duration: 8.5s; opacity: 0.85; }
.seaweed11 { left: 62%; height: 210px; animation-duration: 6s;   opacity: 0.8; }
.seaweed12 { left: 69%; height: 240px; animation-duration: 7.8s; opacity: 0.7; }
.seaweed13 { left: 75%; height: 270px; animation-duration: 9s;   opacity: 0.9; }
.seaweed14 { left: 82%; height: 190px; animation-duration: 6.2s; opacity: 0.75; }
.seaweed15 { left: 90%; height: 250px; animation-duration: 7.4s; opacity: 0.8; }

.seaweed3, .seaweed6, .seaweed9, .seaweed12, .seaweed15 {
  transform: scaleX(-1);
}




/* Par défaut, la barre mobile est cachée sur PC */
.mobile-nav {
  display: none !important;
}

nav#sidebar {
  z-index: 99;
 background: url('/images/backgrounds/navbarmusique.gif') repeat;
      background-repeat: repeat;
  position: fixed;        /* ← CHANGE ici : absolute → fixed */
  top: 0;                 /* ← colle au haut de la fenêtre */
  left: 20px;
  bottom: 600px;
  padding: 10px;
  height: 100vh;          /* ← 100% de la hauteur de la fenêtre */
  width: 250px;
  box-sizing: border-box;
   border-right: 15px solid #e2d3e2;
  border-left: 15px solid #e2d3e2;
      border-radius: 5px;
      border-image: url('/images/backgrounds/borduremusique.gif') 15 round;
}
  
.nav-image-button {
    background: transparent;
  width: 150px;
  height: auto;
  display: block;
  margin: 8px auto;
  image-rendering: pixelated;
}  


.nav-image-musique {
    background: transparent;
  width: 125px;
  height: auto;
  display: block;
  margin: 8px auto;
  image-rendering: pixelated;
} 

.navlink{
  background-color: white;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
  width:200px; 
  height: auto;
}

.nav-image-stamp {
    background: transparent;
  width: 125px;
  height: auto;
  display: block;
  margin: 8px auto;
  image-rendering: pixelated;
} 

	
.nav-image-container {
  background: none; /* 🔥 aucun fond */
  padding: 0;
  margin: 8px auto;
  text-align: center;
}

.navtitre {
  font-family: 'Jacquard12', sans-serif;
  font-size: 45px;
  color: #FF1717;
  text-align: center;
  text-shadow: 
    0 0 5px #B80909,
    0 0 10px #B80909,
    0 0 15px #B80909;
}

/* Version mobile */
/*Le but c'est de cacher la barre et ajouter des boutons en bas qui se voient uniquement sur mobile */
@media screen and (max-width: 768px) {
  nav {
    display: none !important;
  }
/* --- NAVIGATION MOBILE --- */
@media screen and (max-width: 768px) {

  /* Masque seulement la sidebar */
  #sidebar {
    display: none !important;
  }

  /* Barre mobile horizontale */
  .mobile-nav {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: url('/images/backgrounds/navbarmusique.gif') repeat;
    border-top: 10px solid #e2d3e2;
    border-image: url('/images/backgrounds/borduremusique.gif') 15 round;
    z-index: 200;
  }

  /* Par défaut, tous les boutons sont plus grands */
  .mobile-nav img {
    width: 75px;
    height: auto;
    image-rendering: pixelated;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  }

  /* EXCEPTIONS : musique + home (restent petits) */
  .mobile-nav img[src*="musique"],
  .mobile-nav img[src*="home"] {
    width: 55px;
  }

  /* Hover et tap : effet rebond + glow old web */
  .mobile-nav img:hover {
    transform: scale(1.15);
    filter: brightness(1.3) contrast(1.2) drop-shadow(0 0 5px red);
  }

  .mobile-nav a:active img {
    transform: scale(1.05);
    filter: brightness(1.4);
  }

  body {
    padding-bottom: 90px;
  }
}

/* --- Effet hover rebond aussi sur desktop --- */
.nav-image-button:hover,
.nav-image-musique:hover,
.nav-image-stamp:hover {
  transform: scale(1.1);
  filter: brightness(1.3) drop-shadow(0 0 6px red);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}
}