/* CSS DU BODY */
body {
    margin: 15px;
    overflow: auto; /* Ajout de défilement pour le contenu dépassant l'écran */
    display: block; /* Modifier l'affichage en bloc pour les appareils mobiles */
    align-items: stretch; /* Ajuster les éléments de façon étirée */
    justify-content: center; /* Centrer horizontalement */
    height: auto; /* Ajuster la hauteur automatiquement */
    background-color: #f0f0f0;
}

/* CSS DU CONTENEUR DES LOGOS */
.image-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%; /* Prendre la largeur totale de l'écran */
    height: auto; /* Ajuster la hauteur automatiquement */
}

/* CSS DES LOGOS */
.image {
    width: 20%; /* Prendre 20% de la largeur totale du conteneur */
    height: auto;
    cursor: pointer; /* Ajouter un curseur pointeur sur les images */
    margin: 5px; /* Ajouter une marge pour séparer les images */
}

/* CSS DE LA V1 DE LA CASQUETTE QUAND ON CLIQUE */
#expanded-image {
    position: fixed;
    top: 50%; /* Ajuster la position verticale au centre de l'écran */
    left: 50%; /* Ajuster la position horizontale au centre de l'écran */
    transform: translate(-50%, -50%); /* Centrer l'élément */
    max-width: 90%; /* Ajuster la taille de l'image agrandie */
    height: auto;
    display: none;
    z-index: 7;
}



  /* 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: relative; /* Modifier la position en fonction de l'écran mobile */
    font-family: 'Amiamie-BlackRound';
    top: 0; /* Ajuster la position du haut à 0 */
    left: 0; /* Ajuster la position de gauche à 0 */
    width: 100%; /* Prendre la largeur totale de l'écran */
    max-width: none; /* Ajuster la largeur maximale à aucune limite */
    max-height: none; /* Ajuster la hauteur maximale à aucune limite */
    min-width: none; /* Ajuster la largeur minimale à aucune limite */
    font-size: 18px;
    color: #0e0e0e;
    background-color: rgba(255, 255, 255, 0.0); /* Fond semi-transparent */
    padding: 10px;
    border-radius: 0; /* Ajuster le rayon de la bordure à 0 */
    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 {
    position: fixed;
  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;
    }
  }

  .new-page-content {
    padding: 20px; /* Augmentation de la marge intérieure */
    margin: 20px; /* Ajout de marges extérieures */
    width: calc(100% - 40px); /* Retrait des bords intérieurs */
    background-color: rgb(255, 0, 0);
    z-index: 5;
    display: none;
    font-family: 'Amiamie-BlackRound';
    font-size: 3vh;
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100% - 40px); /* Retrait des bords intérieurs */
   
    word-wrap: break-word;
}

#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(0, 0, 0);
    filter: drop-shadow(5px 5px 5px #222);
    display: none;
    align-items: center;
    justify-content: center;
    bottom: 35px;
    left: 220px;
    z-index: 4;
}