@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
* {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}
body {
  font-family: "Ubuntu", sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgb(79, 79, 79);
  overflow: auto;
}

#cards-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 100px;
}

#background-image-container {
  position: fixed; /* Ou 'absolute' si vous ne voulez pas qu'elle soit fixe */
  top: 0;
  left: 0;
  width: 100vw; /* Largeur de 100% du viewport */
  height: 100vh; /* Hauteur de 100% du viewport */
  background-color: black;
  background-image: url("dam.png"); /* Remplacez avec votre image */
  background-size: cover; /* Couvre le conteneur sans déformer l'image */
  background-position: center; /* Centre l'image dans le conteneur */
  z-index: -1; /* Assure que le conteneur est derrière tout autre contenu */
}

.card,
.card-container {
  position: relative;
  z-index: 1; /* Assurez-vous que le contenu est au-dessus de l'effet d'opacité */
}
.card-container {
  padding: 20px; /* Ajustez cette valeur pour changer l'espace à l'intérieur du conteneur */
  margin: 20px; /* Ajustez cette valeur pour changer l'espace à l'extérieur du conteneur */
}

.country {
  color: #0075be;
  font-weight: bold;
  font-size: 20px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.card {
  /* Propriétés existantes */
  width: 85%;
  height: 330px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background: white;
  border-radius: 25px !important;
  padding: 20px;
  padding-top: 60px;
  text-align: center;
  position: relative;
  margin: 60px auto;
  margin-bottom: 70px;
  cursor: pointer;
  transition: height 0.5s ease; /* Ajoute une animation à la propriété height */
}

.card-visible {
  opacity: 1;
  transform: translateY(0);
}

.card.clicked {
  width: 85%; /* Taille après le clic */
  height: 610px; /* Taille après le clic */
  transition: height 0.5s ease; /* Ajoute une animation à la propriété height */
}

.card .profile-pic {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: rgb(2, 117, 190);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Ajoute une ombre portée */
}
.search-container {
  padding: 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

#searchInput {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}
.card h2 {
  font-family: "Ubuntu", sans-serif;

  margin: 18px 0 13px;
  color: #0075be;
  font-weight: bold;
  font-size: 26px;
}
h3 {
  color: #0075be;
  font-weight: 400;
}

.card p.country {
  font-family: "Ubuntu", sans-serif;

  margin-top: -10px;
  color: #0075be;
  font-size: 18px;
  font-style: italic;
  font-weight: normal;
}

.card p,
.stats div p {
  font-family: "Ubuntu", sans-serif;

  color: #0075be;
  font-weight: 550;
  font-size: 40px;
}

.icon {
  width: 100px;
  height: auto;
  margin-right: 5px;
}

.stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px; /* Ajustez cette valeur pour changer l'espace entre les éléments */
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.item p {
  margin-top: 10px; /* Ajustez l'espace au-dessus du paragraphe */
  margin-bottom: 10px; /* Ajustez l'espace en dessous du paragraphe */
}

.item img {
  max-width: 100%;
  height: 80px; /* Ajustez cette valeur pour changer la hauteur des images */
  object-fit: cover;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10vh;
}

.card-content {
  display: flex;
  justify-content: center;
}

#logorotate {
  position: absolute;
  right: 20px; /* Ajustez selon l'espacement désiré */
  top: -9px; /* Ajustez selon la hauteur de votre navbar */
  cursor: pointer; /* Indique qu'il est cliquable */
  transition: transform 0.5s ease-in-out;
  right: 0; /* ou `right: 0;` selon où vous voulez le positionner */
  z-index: -1; /* S'assure que le logo est derrière le bouton */
  rotate: 180deg; /* Ajustez selon l'angle initial */
}
.card img.profile-pic {
  transition: opacity 0.5s ease;
}

.card img.card-image {
  display: none; /* L'image est cachée par défaut */
  opacity: 0; /* L'image est complètement transparente par défaut */
}
.card.clicked img.card-image {
  display: block; /* L'image est visible après le clic */
  animation: fadeIn 1s ease forwards; /* L'image devient complètement opaque après le clic avec une animation */
}
.card .content {
  display: block; /* Le contenu est visible par défaut */
  opacity: 1; /* Le contenu est complètement opaque par défaut */
  transition: opacity 0.5s ease; /* Ajoute une animation à la propriété opacity */
}

.card.clicked .content {
  opacity: 0; /* Le contenu devient complètement transparent après le clic */
  transition: opacity 0.5s ease; /* Ajoute une animation à la propriété opacity */
}

.card:active,
.card:focus {
  outline: none;
  box-shadow: none;
  /* Ajoutez d'autres styles ici pour réinitialiser les styles indésirables */
}
header {
  position: fixed; /* Changez de sticky à fixed */
  top: 0;
  left: 0;
  width: 100%; /* Assurez-vous que la navbar s'étend sur toute la largeur */
  background-color: #fff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1050; /* Augmentez si nécessaire pour s'assurer qu'elle est au-dessus du contenu */
}

/* Votre CSS existant ici... */
header img {
  width: 50px; /* Taille par défaut */
  height: auto;
  margin: 10px; /* Espacement autour du logo */
}
@media (min-width: 768px) {
  header img {
    width: 100px; /* Taille plus grande sur les écrans larges */
  }
}
#chronometer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#timer-container {
  text-align: center;
  width: 100%;
}

#timer {
  font-weight: bold;
  color: #0075be;

  font-size: 2em; /* Ajustez cette valeur selon vos préférences */
}

#buttons-container {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding-top: 20px;
}
#buttons-container button {
  font-size: 1.2em; /* Augmente la taille du texte dans les boutons */
  padding: 10px 20px; /* Ajoute plus d'espace à l'intérieur des boutons */
  margin: 5px; /* Ajoute un peu d'espace autour des boutons */
  border-radius: 5px; /* Rend les coins des boutons légèrement arrondis pour un look moderne */
}
.faded-out {
  opacity: 0; /* Ou toute autre valeur d'opacité souhaitée */
  transition: opacity 0.5s ease; /* Assure une transition douce */
}
.chronometer-container {
  position: relative;
  background-color: #f0f0f0; /* Couleur de fond claire pour l'exemple */
  padding-left: 20px; /* Ajoute un peu d'espace à gauche pour l'image */
  padding-right: 20px; /* Ajoute un peu d'espace à droite pour le texte */
  padding-top: 20px; /* Ajoute de l'espace en haut pour l'image */
  padding-bottom: 60px; /* Ajoute de l'espace en bas pour le texte */
  margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous du conteneur du chronomètre */
  border-radius: 10px; /* Arrondit les coins du conteneur pour un look plus doux */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute une légère ombre pour un effet de profondeur */
}

.image-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px; /* Ajustez la taille selon le besoin */
  height: auto;
}

.image-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px; /* Ajustez la taille selon le besoin */
  height: auto;
  rotate: 180deg; /* Faites pivoter l'image de 180 degrés pour la placer dans le coin inférieur droit */
}
.rotate-normal {
  transform: rotate(0deg);
  transition: transform 0.5s ease-in-out;
}

.rotate-180 {
  transform: rotate(720deg);
  transition: transform 0.5s ease-in-out;
}
#menu-text {
  display: block; /* Assure que le texte est sur une nouvelle ligne */
  text-align: center; /* Centre le texte sous le logo */
  color: #0075be; /* Couleur du texte, ajustez selon votre palette de couleurs */
  font-family: "Ubuntu", sans-serif; /* La police d'écriture */
  font-size: 1rem; /* La taille de la police */
  margin-top: 5px; /* Espacement entre le logo et le texte */
}
.chronometer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Permet aux éléments de s'empiler si l'espace horizontal est limité */
  width: 100%; /* Assure que le conteneur utilise toute la largeur disponible */
  max-width: 1200px; /* Ajustez selon le besoin */
  margin: auto; /* Centre le conteneur horizontalement */
}

@media (max-width: 768px) {
  .chronometer-container {
    flex-direction: column; /* Empile les éléments verticalement sur les petits écrans */
  }
}
.timer-image-container {
  display: flex;
  align-items: center;
  gap: 20px; /* Ajustez l'espacement entre le timer et l'image */
}

#chronometer-image-img {
  rotate: 180deg; /* Faites pivoter l'image de 180 degrés pour la placer dans le coin inférieur droit */
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes rotateImageReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate-reverse {
  animation: rotateImageReverse 0.5s linear infinite;
}

.rotate {
  animation: rotateImage 0.5s linear infinite;
}
#version {
  position: fixed;
  right: 10px; /* ou left: 10px; si vous préférez le côté gauche */
  top: 20%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: right center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  padding: 10px 5px;
  border-radius: 5px;
  font-size: 16px; /* ajustez selon vos besoins */
  z-index: 1000; /* assurez-vous qu'il est au-dessus des autres éléments */
}
.hidden {
  display: none;
}
/* Style pour centrer la div */
#chronometerDiv {
  position: fixed; /* Position fixe par rapport à la fenêtre de visualisation */
  top: 50%; /* Positionnement à 50% du haut de la fenêtre de visualisation */
  left: 50%; /* Positionnement à 50% de la gauche de la fenêtre de visualisation */
  transform: translate(
    -50%,
    -50%
  ); /* Décalage de la moitié de sa propre taille pour centrer */
  width: auto; /* Largeur automatique selon le contenu */
  z-index: 1050; /* S'assurer que la div est au-dessus des autres contenus */
  display: flex; /* Utiliser flexbox pour aligner les éléments internes */
  flex-direction: column; /* Les éléments internes s'alignent verticalement */
  align-items: center; /* Centrer les éléments horizontalement */
  justify-content: center; /* Centrer les éléments verticalement */
  background-color: white; /* Fond blanc pour la visibilité */
  padding: 2px; /* Un peu de padding autour du contenu */
  border-radius: 10px; /* Bordures arrondies */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour un effet élévé */
}

.highlight {
  border: 2px solid #0075be;
  box-shadow: 0 0 10px #0075be;
}
.card-image {
  transition: opacity 0.3s ease;
}

/* Styles pour le bouton hamburger */
.navbar-toggler {
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  position: relative;
  background: transparent;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Masquer l'icône par défaut */
.navbar-toggler-icon {
  display: none;
}

/* Créer les trois barres */
.navbar-toggler::before,
.navbar-toggler::after,
.navbar-toggler span {
  content: '';
  display: block;
  position: absolute;
  width: 24px;
  height: 2px;
  left: 8px;
  background: #000;
  transition: all 0.3s ease;
}

.navbar-toggler::before {
  top: 12px;
}

.navbar-toggler span {
  top: 19px;
}

.navbar-toggler::after {
  top: 26px;
}

/* Animation quand le menu est ouvert */
.navbar-toggler[aria-expanded="true"]::before {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] span {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"]::after {
  transform: translateY(-7px) rotate(-45deg);
}
.popup {
  position: relative;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  max-width: 80%;
  width: 400px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 50%;
  color: #333;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #e0e0e0;
  color: #000;
  transform: scale(1.1);
}