*{
  cursor: none !important;
}
body {
  overflow: hidden;
  background-image: url("../images/PINK.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  
 cursor: none;
}

/* baisser la scène */
#scene {
  position: relative;
  top: 10px; /* ajuster ici*/
}

#maintitle {
  max-width: 24vw;
  white-space: nowrap;

  position: fixed;
  top: 30px;
  left: 30px;

  font-size: 35px;
  color: rgb(0, 0, 0);
  font-family: "BBB-JURAge";

  z-index: 10;
  pointer-events: none;
}


#maintitle,
#contact-info {
  transition: opacity 0.25s ease;
}

#site-logo {

  position: fixed;

  top: -10px;
  right: -10px;

  width: 150px; /* taille */
  height: auto;

  z-index: 20;
opacity: 0.8;
}

#qrcode {

  position: fixed;

  top: 380px;
 right: 50px;

  width: 250px;

  z-index: 1;

}

/* curseur custom */
#custom-cursor {
  position: fixed;
  width: 50px; /* tu changes ici */
  height: 50px;

  background: url("../images/cursor.png") no-repeat center;
  background-size: contain;

  pointer-events: none; /* ultra important */
  z-index: 9999;

  transform: translate(-50%, -50%);
}

@font-face {
  font-family: "BBB-JURAge";
  src: url("../typoz/BBB-JURAge.woff2") format("woff2"),
       url("../typoz/BBB-JURAge.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

#titre-page {
    max-width: 24vw;          
  white-space: normal;
  word-break: none;
  overflow-wrap: break-word;
  position: fixed;
  top: 30px;
  left: 30px;
  font-size: 35px;
  color: rgb(0, 0, 0);
  font-family: "BBB-JURAge";
  z-index: 3;
  pointer-events: none;
}

.star-container {
    position: relative;
    width: 800px;
    height: 800px;
}

/* Animation "détachement" */
.branch.detached {
    transform: translate(-50%, -50%) translateY(-60px); /* déplace vers le haut */
    transition: transform 0.5s ease;
}

/* animation hover */
.branch {
    position: absolute;
    transition: transform 0.5s ease;
}

.branch1:hover {
  transform: translate(-55%, -50%)  translateY(-40px);
}

.branch2:hover {
  transform: translate(-30%, -50%) translateY(-40px);
}

.branch3:hover {
  transform: translate(-20%, -10%) translateY(-40px);
}

.branch4:hover {
  transform: translate(-48%, 0%) translateY(-40px);
}

.branch5:hover {
  transform: translate(-80%, 0%) translateY(-40px);
}

.branch6:hover {
  transform: translate(-70%, -37%) translateY(-40px);
}

/* BRANCHES */

.branch1 {
    width: 115px;
    top: 113px;
    left: 775px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

.branch2 {
    width: 170px;
    top: 243px;
    left: 1003px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

.branch3 {
    width: 130px;
    top: 465px;
    left: 1014px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

.branch4 {
    width: 164px;
     top: 639px;
    left: 820px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

.branch5 {
    width: 128px;
     top: 509px;
    left: 639px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

.branch6 {
    width: 159px;
     top: 317px;
    left: 612px;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 2;
}

/* CENTRE */
.center {
    position: absolute;
    width: 600px;              /* taille */
    top: 390px;                /* position verticale */
    left: 800px;               /* position horizontale */
    transform: translate(-50%, -50%) rotate(0deg); /* rotation */
    transform-origin: center;
    z-index: 1;
}

.star-face{
  position:absolute;
  width: 280px;
  left: 101%;
  top: 45%;
  transform:translate(-50%, -50%);
  cursor: url("../images/curseur.png") 16 16, auto;
  z-index:5;
}

 /*animation étoile hover*/
.star-face{
  cursor: none
}

.star-face.boing{
  animation: boing 0.35s ease;
}

@keyframes boing{

  0%{
    transform: translate(-50%, -50%) scale(1);
  }

  40%{
    transform: translate(-50%, -50%) scale(0.9);
  }

  70%{
    transform: translate(-50%, -50%) scale(0.96);
  }

  100%{
    transform: translate(-50%, -50%) scale(1);
  }

}

 /* gif */
#gif-popup{
 display: none;
  position:fixed;
  bottom:auto;
  right:auto;
  left: 970px;
  top: 550px;
  cursor: none;
  z-index:100;
}

#gif-popup:active{
  cursor: none;
}

#gif-content{
  width:550px; /*modifier taille du popup*/
  height:auto;
  display:block;
}

#gif-close{
  position:absolute;
  top:-10px;
  right:-10px;

  background:black;
  color:white;

  width:25px;
  height:25px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  cursor: none;
  font-size:14px;
}


/*contacts */

#contact-info {

  position: fixed;

  bottom: 25px;
  left: 30px;

  z-index: 20;

  font-family: "BBB-JURAge";
  font-size: 20px;

  line-height: 1.4;

}

.contact-link {

  color: black;

  text-decoration: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}

.contact-link:hover {

  opacity: 0.6;

  transform: translateX(4px);

}

#credits {

  position: fixed;

  right: 30px;
  bottom: 25px;

  z-index: 20;

  font-family: "BBB-JURAge";
  font-size: 14px;

  line-height: 1.3;

  color: black;

  text-align: right;

  pointer-events: none;

  opacity: 0.8;
}