/* CSS DU BODY*/
body {
    margin: 15px;
    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Ancrer à droite */
    height: 100vh;
    background-color: #f0f0f0;
  }
/* CSS DU CONTENEUR DES LOGOS */
  .image-container {
    position: relative;
    width: 66.66%; /* Deux tiers de la largeur de la fenêtre */
    height: 100%;
    overflow: visible;
  }

  /* CSS DES LOGOS*/
  .image {
    position: absolute;
    transition: transform 0.3s ease;
    width: 10%; /* Utilisation des pourcentages pour garder le même rapport */
    height: auto;
    cursor: pointer; /* Ajouter un curseur pointeur sur les images */
  }
/* CSS DE LA V1 DE LA CASQUETTE QUAND ON CLIQUE */
  #expanded-image {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 30%; /* Ajuster la taille de l'image agrandie */
    height: auto;
    display: none;
    z-index: 1;
  }



  /* CSS DES PETITS CERCLES*/
  .color-circle {
  position: fixed;
  bottom: 20px;
  left: 520px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid transparent; /* Changez la couleur selon vos préférences */
  
  cursor: pointer;
  z-index: 2;
  clip-path: polygon(50% 0%, 61.8% 38.2%, 100% 44.1%, 70.9% 70.9%, 76.4% 100%, 50% 81.8%, 23.6% 100%, 29.1% 70.9%, 0% 44.1%, 38.2% 38.2%);
   
  }

/* CSS DU TEXTE D'INFORMATIONS*/
  .text-block {
    
    position: absolute;
    font-family: 'Amiamie-BlackRound';
    top: 20px; /* Distance du haut */
    left: 20px; /* Distance de la gauche */
    width: 30%; /* Un quart de la largeur de l'écran */
    max-width: 500px;
    max-height: 300px;
    min-width: 200px;
    font-size: 18px;
    color: #0e0e0e;
    background-color: rgba(255, 255, 255, 0.0); /* Fond semi-transparent */
    padding: 10px;
    border-radius: 5px;
    z-index: 3; /* Mettre une z-index supérieure aux éléments */
  }


  /* Ajoutez une marge inférieure pour l'élément .instructions */
.instructions {
    margin-bottom: 20px; /* Ajustez cette valeur selon vos besoins */
}


/* CSS DE LA PONCTUATION*/
.punctuation {
            
  font-size: 24px;
  line-height: 1px;
  font-family: 'Mess-Light';
  /* Additional styles for the punctuation marks */
}


@font-face {
  font-family: 'Amiamie-BlackRound';
  src: url(FONTS/Amiamie-BlackRound.ttf);
  
}

@font-face {
font-family: 'Mess-Light';
src: url(FONTS/Mess-Light.ttf);
}
  
       
  @keyframes rotateImage {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* CSS DE LA FLEUR ET TEXTE */
.text-image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Centre horizontalement à droite */
  justify-content: flex-start; /* Centre verticalement en haut */
  text-align: center; /* Centre le texte dans le conteneur */
  margin-top: 20px; /* Espacement entre le texte et l'image */
  width: 150px; /* Largeur de l'image */
  position: relative; /* Permet de positionner le texte par rapport à ce conteneur */
}


/* CSS DE LA FLEUR*/
.text-image {
  width: 100%; /* Ajuste la largeur de l'image au conteneur */
  animation: rotateImage 20s linear infinite; /* Animation de rotation */
  overflow: hidden;
  margin-top: 10px; /* Espacement entre l'image et le texte */
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
  
  
}

/* CSS DU TEXTE WANT TO BUY*/
.blink-text {
  font-size: 18px;
  color: rgb(255, 255, 255);
  position: absolute; /* Position par rapport au conteneur parent (text-image-container) */
  bottom: 60px; /* Ajuste la position verticale du texte par rapport à l'image */
  left: 50%; /* Centre horizontalement dans le conteneur parent */
  transform: translateX(-50%); /* Centre horizontalement par rapport à son propre contenu */
  cursor: pointer;
  width: 120%;
  -webkit-text-stroke: #78da00;
    -webkit-text-stroke-width: 1px;
}


  @keyframes blinkText {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }



/* Effet de survol pour la croix rouge */
#close-button:hover {
  
  color: rgb(255, 0, 195);
}

/* CSS DE LA PAGE D'INFORMATIONS*/
 
.new-page-content {
  
    padding: 3%; /* Ajout de rembourrage à l'intérieur du contenu */
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 20px);
  
    background-color: rgb(255, 0, 0);
    z-index: 5;
    display: none;
    font-family: 'Amiamie-BlackRound';
    font-size: 4.5vh;
  
  
  }
   
    #goBackLink {
      color: rgb(6, 71, 221);
      text-decoration: underline;
      cursor: pointer;
    }
    
    
  /* CSS pour le bouton de fermeture (croix rouge) */
  #close-button {
    font-family: 'Amiamie-BlackRound';
    position: fixed;
    width: 10px;
    height: 10px;
    cursor: pointer;
    font-size: 18px;
    color: rgb(255, 255, 255);
    filter: drop-shadow(5px 5px 5px #222);
    display: none;
    align-items: center;
    justify-content: center;
    
    bottom: 35px;
    left: 220px;
      z-index: 4;
  }