/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
      font-family: 'medieval';
      src: url(/fonts/Augusta.ttf);
    }
@font-face {                  
font-family: 'Jacquard12';
src: url(https://humantooth.neocities.org/fonts/Jacquard12-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 


body {
  background: url('/images/backgrounds/starback.jpg') repeat;
  color: white;  /*Couleur du texte sur la page */
  font-family: Verdana;
  padding-top:50px;
  cursor: url('/images/cursor/wizard_.gif'), auto;
}

hr{
  border: 1px solid red;
  width: 60%; 
  max-width: 800px; 
}

 h1 {
    font-family: 'medieval', sans-serif;
    text-align: center;
    font-size: 50px;
    color:red;
}

.accueil-img img {
  display: block;
  margin: 0 auto;
  width: 25%;        /* ✅ agrandis ici selon ce que tu veux */
  max-width: 600px;  /* ✅ garde une limite sur grand écran */
  height: auto;
  padding-bottom: 50px;
  transition: all 0.3s ease; /* animation douce si tu veux tester */
}
.titrepartie img{
  margin:auto;
  display: block;
  padding-bottom:30px;
  padding-top:75px;
  width:30%;
  height:auto;
}
.titrepartie2 img{
  margin:auto;
  display: block;
  padding-bottom:30px;
  padding-top:75px;
  width:20%;
  height:auto;
}

.multicolor-text {
  text-align: center;
  max-width:60%;
   margin: 0 auto; /* pour centrer le bloc */
}


.imagecentre{
 text-align: center;
  margin: 0 auto; 
  margin-bottom: 5px;
}


.textelien{
  text-decoration: underline;
  text-align:center;
  margin: 0 auto;
  color: white;
  font-size: 35px;
  font-family: 'medieval', sans-serif;
  margin-top: 5px; /* espace au-dessus du texte */
}

a {
  color: white;
  text-decoration: underline;
}

a:hover {
  color: red;
  text-shadow: 0 0 6px red;
}





nav#sidebar {
  z-index: 99;
 background: url('/images/backgrounds/rock01.jpg') 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/redemboss.jpg') 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;
}




::selection {
/* Change highlight background color */
background: red;
/* Change highlight text color */
color: black;
}

/* --- GIF flottant sur le côté droit --- */
.floating-gif {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999;           /* au besoin, augmente pour être sûr */
  pointer-events: auto;   /* ← important : autorise le hover sur le conteneur */
}

/* images empilées */
.floating-gif {
  pointer-events: auto;
}

.floating-gif img {
  width: 250px;
  transition: opacity 0.25s ease;
  animation: drift 10s ease-in-out infinite alternate;
}

/* change l'image au hover */
.floating-gif:hover img {
  content: url('/images/accueil/sergehover.png');
}


/* --- Animation flottante --- */
@keyframes drift {
  0% {
    transform: translate(0, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -40%) rotate(3deg);
  }
  50% {
    transform: translate(10px, -55%) rotate(-3deg);
  }
  75% {
    transform: translate(-15px, -60%) rotate(2deg);
  }
  100% {
    transform: translate(0, -50%) rotate(0deg);
  }
}





















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


/* 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;
  }

  h1 {
    font-size: 300%;
  }

  hr {
    width: 90%;
    border: 2px solid red;
  }

  .accueil-img img {
    width: 60%;
    max-width: none;
  }

  .titrepartie img {
    width: 80%;
  }
  
   .titrepartie2 img {
    width: 50%;
  }
 
 .floating-gif {
  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/rock01.jpg') repeat;
    border-top: 10px solid #e2d3e2;
    border-image: url('/images/backgrounds/redemboss.jpg') 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;
}