@charset "UTF-8";
@font-face {
  font-family: "Bitcount Prop Single Regular Square";
  src: url("../Font/Bitcount_Prop_Single_Bold_Square.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Bitcount Prop Single Regular Square";
  src: url("../Font/Bitcount_Prop_Single_Regular_Square.ttf")
    format("truetype");
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: "MNKYMaurice-Regular";
  src: url("../Font/MNKYMaurice_Regular.otf") format("truetype");
  font-weight: medium;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: rgb(255, 238, 0);
  font-family: "Bitcount Prop Single Bold Square", sans-serif;
  text-align: center;
  background-color: rgb(0, 0, 0);
  height: 1300vh;
}

body {
  z-index: 1000;
  cursor: url("../image/Curseur_up.png"), auto;
}

/* Réduction de la taille de la souris pour les petites fenêtres */
@media (max-width: 768px) {
  body {
    cursor: url("../image/Abeille_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

@media (max-width: 480px) {
  body {
    cursor: url("../image/Abeille_small.png"), auto; /* Curseur de petite taille */
  }
}
img {
  cursor: url("../image/Abeille_2.png"), auto;
}

@keyframes blink-cursor {
  0%,
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.blink img:hover {
  cursor: url("image/Abeille_2.png"), auto;
  animation: blink-cursor 0.1s infinite;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  transform-origin: center top;
  background-color: transparent;
  z-index: 1;
  font-family: "Bitcount Prop Single Bold Square", sans-serif;
  font-weight: bold;

  animation: shrink-title linear forwards;
  animation-timeline: scroll();
  animation-range: 0 3000px;
}



@keyframes shrink-title {
  0% {
    transform: scale(1) translateY(0);
    height: 100vh;
  }
  100% {
    transform: scale(0.2) translateY(-40vh);
    height: auto;
  }
}

h1 {
  font-size: 18vw;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.line1 {
  display: block;
  text-align: center;
  padding-left: 5%;
}

.line2 {
  display: block;
  text-align: center;
  padding-left: 2.5%;
}

@keyframes shrink-title {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.2);
  }
}

.half-visible-image {
  position: absolute;
  top: 360vh;
  right: 0;
  width: 40vw;
  height: 40vw;
  left: 10%;
  z-index: 2;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
}

.half-visible-image:hover {
  cursor: url("../image/Curseur_up_blue_big.png"), auto; /* Change le curseur en abeille bleue */
  transform: scale(1.1); /* Agrandit légèrement la fleur */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

/* Réduction de la taille du curseur pour les fenêtres moyennes */
@media (max-width: 768px) {
  .half-visible-image:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

/* Réduction de la taille du curseur pour les petites fenêtres */
@media (max-width: 480px) {
  .half-visible-image:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de petite taille */
  }
}

.half-visible-image4 {
  position: absolute;
  top: 470%;
  right: 0;
  width: 60vw;
  height: 60vh;
  left: 40%;
  z-index: 2;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
}
.half-visible-image4:hover {
  cursor: url("../image/Curseur_up_blue_big.png"), auto; /* Change le curseur en abeille bleue */
  transform: scale(1.1); /* Agrandit légèrement la fleur */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

@media (max-width: 768px) {
  .half-visible-image4:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

/* Réduction de la taille du curseur pour les petites fenêtres */
@media (max-width: 480px) {
  .half-visible-image4:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de petite taille */
  }
}

.half-visible-image7 {
  position: absolute;
  top: 580%;
  right: 0;
  width: 60vw;
  height: 60vh;
  left: -5%;
  z-index: 2;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
}
.half-visible-image7:hover {
  cursor: url("../image/Curseur_up_blue_big.png"), auto; /* Change le curseur en abeille bleue */
  transform: scale(1.1); /* Agrandit légèrement la fleur */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

@media (max-width: 768px) {
  .half-visible-image7:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

/* Réduction de la taille du curseur pour les petites fenêtres */
@media (max-width: 480px) {
  .half-visible-image7:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de petite taille */
  }
}

.half-visible-image10 {
  position: absolute;
  top: 680%;
  right: 0;
  width: 60vw;
  height: 60vh;
  left: 35%;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
}
.half-visible-image10:hover {
  cursor: url("../image/Curseur_up_blue_big.png"), auto; /* Change le curseur en abeille bleue */
  transform: scale(1.1); /* Agrandit légèrement la fleur */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

@media (max-width: 768px) {
  .half-visible-image10:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

/* Réduction de la taille du curseur pour les petites fenêtres */
@media (max-width: 480px) {
  .half-visible-image10:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de petite taille */
  }
}

.half-visible-image13 {
  position: absolute;
  top: 780%;
  right: 0;
  width: 60vw;
  height: 60vh;
  left: 5%;
  z-index: 2;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
}
.half-visible-image13:hover {
  cursor: url("../image/Curseur_up_blue_big.png"), auto; /* Change le curseur en abeille bleue */
  transform: scale(1.1); /* Agrandit légèrement la fleur */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
}

.half-visible-image14 {
  position: absolute;
  top: 1262%;
  right: 0;
  width: 60vw;
  
  left: 20%;
  z-index: 2;
}


@keyframes pulse {
  0% {
    transform: scale(1); /* Taille normale */
  }
  50% {
    transform: scale(1.1); /* Agrandit légèrement */
  }
  100% {
    transform: scale(1); /* Retour à la taille normale */
  }
}

.half-visible-image,
.half-visible-image4,
.half-visible-image7,
.half-visible-image10,
.half-visible-image13 {
  animation: pulse 3s infinite ease-in-out; /* Animation de pulsation */
  transition: transform 0.3s ease; /* Transition fluide pour les interactions */
}




@media (max-width: 768px) {
  .half-visible-image13:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de taille moyenne */
  }
}

/* Réduction de la taille du curseur pour les petites fenêtres */
@media (max-width: 480px) {
  .half-visible-image13:hover {
    cursor: url("../image/Curseur_up_blue_medium.png"), auto; /* Curseur de petite taille */
  }
}


.overlay {
  position: fixed;
  top: -110%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(255, 238, 0);
  opacity: 100%;
  color: rgb(0, 0, 0);
  transition: top 0.6s ease;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

:target.overlay {
  top: 0;
}

.overlay-content {
  font-family: "MNKYMaurice-Regular";
  position: relative;
  text-align: center;
  padding: 2rem 7rem;
  font-size: clamp(1.5rem, 5vw, 4rem);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.close-btn {
  font-family: "Bitcount Prop Single Regular Square";
  position: absolute;
  bottom: 50px;
  font-size: clamp(1.5rem, 5vw, 8rem);
  color: rgb(0, 0, 0);
  text-decoration: none;
  background: none;
  border: none;
}
.close-btn:hover {
  color: blue;
}

.Plan_2 {
  position: fixed;
  bottom: 0;
  left: 0%;
  /* transform: translateX(-50%); */
  width: 100vw;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.Plan_1 {
  position: fixed;
  bottom: 0;
  left: 0%;
  /* transform: translateX(-50%); */
  width: 100vw;
  height: auto;
  z-index: 100;
  pointer-events: none;
}
.Plan_3 {
  position: fixed;
  bottom: 0;
  left: 0%;
  /* transform: translateX(-50%); */
  width: 100vw;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* #overlayPage {
  z-index: 100;
} */

.image-group1 {
  position: relative; /* Nécessaire pour positionner le bouton par rapport à l'image */
}

.flower-button {
  position: absolute;
  top: 399%; /* Place le bouton au centre verticalement */
  left: 30.2%; /* Place le bouton au centre horizontalement */
  transform: translate(-50%, -50%); /* Centre précisément le bouton */
  background-color: yellow;
  color: rgb(25, 0, 255);
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2; /* Assure que le bouton est au-dessus de l'image */
  font-family: "Bitcount Prop Single Bold Square", sans-serif; /* Applique la fonte Bitcount */
}

.save-the-bees {
  position: absolute;
  top: 780%;
  right: 0;
  width: 60vw;
  height: 60vh;
  left: 5%;
  z-index: 2;
  transition: transform 0.3s ease; /* Ajoute une transition fluide pour l'entrée et la sortie */
  
}


/* Responsive pour iPhone 14 en mode portrait */
@media screen and (max-width: 390px) {

  
  body {
    font-size: 14px; /* Ajuste la taille de la police pour les petits écrans */
    height: 100vh;
  }

  .title {
    height: 70vh; /* Réduit la hauteur du titre */
  }

  h1 {
    font-size: 12vw; /* Réduit la taille du texte du titre */
  }

  .half-visible-image,
  .half-visible-image4,
  .half-visible-image7,
  .half-visible-image10,
  .half-visible-image13 {
    width: 80vw; /* Réduit la largeur des images */
    height: auto; /* Maintient les proportions */
    left: 10%; /* Centre les images horizontalement */
  }

  .save-the-bees {
    width: 80vw; /* Réduit la largeur de l'élément */
    left: 10%; /* Centre horizontalement */
    font-size: 1.5rem; /* Ajuste la taille du texte */
  }

  .Plan_1,
  .Plan_2,
  .Plan_3 {
    position: fixed; /* Assure que les éléments restent fixes */
    bottom: 0; /* Place les éléments en bas de l'écran */
    left: 0; /* Aligne les éléments à gauche */
    width: 100vw; /* Occupe toute la largeur de l'écran */
    height: auto; /* Ajuste la hauteur automatiquement */
    pointer-events: none; /
  }
  .overlay.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Assure que l'overlay occupe toute la largeur de l'écran */
  max-width: 100vw; /* Empêche l'overlay de dépasser la largeur de l'écran */
  height: 100vh; /* Assure que l'overlay occupe toute la hauteur de l'écran */
  background: rgb(255, 238, 0);
  opacity: 1;
  color: rgb(0, 0, 0);
  transition: top 0.6s ease;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Empêche le contenu de déborder */
}
  .overlay-content {
    font-size: 1rem; /* Réduit la taille du texte dans les overlays */
    padding: 1rem;
  }

  .close-btn {
    font-size: 3rem; /* Ajuste la taille du bouton de fermeture */
  }
}

/* Responsive pour iPhone 14 en mode paysage */
@media screen and (max-width: 844px) and (orientation: landscape) {
  body {
    font-size: 16px; /* Ajuste la taille de la police pour le mode paysage */
  }

  .title {
    height: 60vh; /* Réduit la hauteur du titre */
  }

  h1 {
    font-size: 10vw; /* Réduit la taille du texte du titre */
  }

  .half-visible-image,
  .half-visible-image4,
  .half-visible-image7,
  .half-visible-image10,
  .half-visible-image13 {
    width: 60vw; /* Réduit la largeur des images */
    height: auto; /* Maintient les proportions */
    left: 20%; /* Centre les images horizontalement */
  }

  .save-the-bees {
    width: 60vw; /* Réduit la largeur de l'élément */
    left: 20%; /* Centre horizontalement */
    font-size: 2rem; /* Ajuste la taille du texte */
  }

  .Plan_1,
  .Plan_2,
  .Plan_3 {
    position: fixed;
    width: 100%; /* Assure que les plans occupent toute la largeur */
    left: 0; /* Supprime le décalage horizontal */
    transform: none; /* Supprime les transformations */
  }

  .overlay-content {
    font-size: 1.2rem; /* Ajuste la taille du texte dans les overlays */
  }

  .close-btn {
    font-size: 2.5rem; /* Ajuste la taille du bouton de fermeture */
  }
}