@keyframes move {
  0% {
      transform: translate3d(var(--start-x), var(--start-y), 0);
      -webkit-transform: translate3d(var(--start-x), var(--start-y), 0);
  }
  50% {
      transform: translate3d(var(--end-x), var(--end-y), 0);
      -webkit-transform: translate3d(var(--end-x), var(--end-y), 0);
  }
  100% {
      transform: translate3d(var(--start-x), var(--start-y), 0);
      -webkit-transform: translate3d(var(--start-x), var(--start-y), 0);
  }
}

/* Safari-specific fixes for particle animations */
@supports (-webkit-appearance:none) {
  .particle {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  padding-top: 60px; /* Necessary for navbar on mobile screens */
}

#chart {
  margin-top: 0; /* Necessary for the svg not to move when the navbar is opened on mobile */
}

/* Safari-specific fixes for SVG foreignObject */
foreignObject {
  overflow: visible;
}

.particle-container {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}


/*///////////////////////// NAVBAR ///////////////////////////*/  

.navbar {
  position: fixed; /* Keeps the navbar at the top */
  top: 0;
  width: 100%; /* Ensures full-width coverage */
  z-index: 1050; /* Keeps it above other content */
}


.nav-image {
  height: 40px; /* Adjust the height to match the text items */
}


/* Media query for mobile devices */
@media (max-width: 991.98px) {
  .navbar-nav {
      margin-left: 10px; /* Add a larger left margin for mobile devices */
  }
}


/*///////////////////////// NODES //////////////////////////*/



.node-text-notion {
  font-size: 16px; /* Example size for "notion" group */
}

.node-text-default {
  font-size: 13px; /* Default size for other groups */
}

@media (max-width: 900px) {
  .node-text-notion {
      font-size: 11px;
  }

  .node-text-default {
      font-size: 11px;
  }

  .particle {
    display: none;
  }
}

@media (max-width: 600px) {
  .node-text-notion {
      font-size: 9px;
  }

  .node-text-default {
      font-size: 8px;
  }

  .particle {
    display: none;
  }
}


/*///////////////////////// TEXT CARD //////////////////////////*/


.title-presentation {
  font-weight: bold;
  color: #000000;
  font-size: large;
}


.info-card {
  position: absolute;
  top: 13.5%;
  right: 10.5%;
  width: 22%;
  max-height: 70%;
  opacity: 0.9;
  min-width: 300px; /* Adjusted for smaller devices */
  background-color: white;
  border-color: #333;
  /* padding: 1em; */
  pointer-events: auto;
  font-family: Arial, sans-serif;
  transition: border-color 0.3s ease;
  z-index: 1040; /* Lower than .navbar */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Ensure content is aligned to the bottom */
  overflow: auto; /* Ensure the triangle stays within the card */
}

.info-card .overflow-triangle {
  position: sticky;  /* Sticky positioning */
  bottom: 0;          /* Stick to the bottom of the .info-card */
  right: 0;           /* Stick to the right side of the .info-card */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333; /* Color of the triangle */
  display: none;      /* Initially hidden */
  pointer-events: auto;  /* Prevent interaction with the triangle */
  margin-left: auto;
  margin-bottom: -10px;
  cursor: pointer;   
}

.info-card.overflowing .overflow-triangle {
  display: block; /* Show triangle when overflow occurs */
}

.triangle-toggle-presentation-card {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333; /* Triangle color */
  top : 10%;
  right: 2%;
  position: absolute;
  cursor: pointer;
  display:none;
}



/* For mobile and smaller screens */
@media (max-width: 1600px) {
  .info-card {
      right: 8.2%;
      width: 28%; 
      max-height: 65%;
  }

  .triangle-toggle-presentation-card {
    top : 13%;
  }
}

@media (max-width: 1300px) {
  .triangle-toggle-presentation-card {
    top : 15%;
  }
}

@media (max-width: 1150px) {
  .info-card {
      width: 90%;
      max-height: 40%;
      right:8%;
      top: 11%;
  }

  .triangle-toggle-presentation-card {
    top : 10%;
  }
}

@media (max-width: 500px) {
  .info-card {
      position: fixed; /* Use fixed for consistent placement relative to the viewport */
      width: 96%; /* Adjust width to ensure near-full screen usage */
      top: auto; /* Remove top positioning */
      bottom: 2%; /* Slight space from the bottom */
      left: 2%; /* Small margin on the left */
      right: 2%; /* Small margin on the right */
      height: 45%; /* Adjust height for content */
      max-height: none;
      overflow-y: auto; /* Enable scrolling if content overflows */
      padding: 1em; /* Maintain consistent padding */
      opacity: 1;
  }

  .triangle-toggle-presentation-card {
    top : 50%;
  }
}


/* Text colors for each group */
.épistémé-card .card-header, 
.épistémé-card,
.épistémé-card .id-text { 
  color: #be0862; 
}

.champ-card .card-header, 
.champ-card ,
.champ-card .id-text { 
  color: #deb100; 
}

.notion-card .card-header, 
.notion-card ,
.notion-card .id-text { 
  color: #122a7a; 
}

.card-content {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}

.info-card .group-text {
  margin: 0 0 10px;
  font-size: 1.3em;
  color: black;
}

.info-card .id-text {
  margin: 0 0 15px;
  font-size: 2em;
  /* font-weight: bold; */
}

.info-card p {
  margin: 0 0 20px;
  color: #555;
  line-height: 1.5;
  font-size: small;
}

.info-card a {
  color: #333; /* Dark gray text for readability */
  text-decoration: none;
  font-family: 'Arial', sans-serif; /* Clean and simple font */
  font-weight: bold; /* Bold text for emphasis */
  transition: color 0.3s ease; /* Smooth color transition */
  padding: 0; /* Remove padding */
  border: none; /* Remove border */
  background-color: transparent; /* No background */
  border-radius: 0; /* Remove rounded edges */
}

/* Hover effect */
.info-card a:hover {
  color: #666; /* Slightly lighter color on hover */
  text-decoration: underline;
}





#infoCard {
  overflow: auto; /* Enable scrolling for content */
  scrollbar-width: thin; /* Firefox: Thin scrollbar */
  scrollbar-color: #c7c7c7 #f4f4f4; /* Firefox: Thumb color and track color */
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
#infoCard::-webkit-scrollbar {
  width: 8px; /* Scrollbar width */
  height: 8px; /* Horizontal scrollbar height */
}

#infoCard::-webkit-scrollbar-track {
  background: #f4f4f4; /* Light gray track background */
  border-radius: 10px; /* Rounded corners for track */
}

#infoCard::-webkit-scrollbar-thumb {
  background: #a0a0a0; /* Subtle gray thumb */
  border-radius: 10px; /* Rounded corners for thumb */
}

#infoCard::-webkit-scrollbar-thumb:hover {
  background: #808080; /* Darker gray on hover */
}

/* Responsive scrollbar for tablet view */
@media (max-width: 768px) {
  #infoCard {
    scrollbar-width: thin;
    scrollbar-color: #909090 #f4f4f4; /* Slightly darker thumb for tablet */
  }

  #infoCard::-webkit-scrollbar {
    width: 6px; /* Thinner scrollbar for smaller screens */
    height: 6px;
  }

  #infoCard::-webkit-scrollbar-thumb {
    background: #909090;
  }
}






/*///////////////////////// NAVBAR //////////////////////////*/




.clickable-text {
  cursor: pointer;
}






/*///////////////////////// 3 DOTS CARD //////////////////////////*/


.group-card {
  position: absolute;
  bottom: 4%;
  right: 1.5%;
  display: none;
  width: 40px; /* Default width for dots only */
  background-color: none;
  padding: 10px;
  border-radius: 8px;
  transition: width 0.3s ease, height 0.3s ease; /* Smooth expand/collapse */
  opacity: 0.8;
}

/* Expanded card styles */
.group-card.expanded {
  width: 26%; 
}

/* Group-specific content positioning */
.group-card-content {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: justify;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  right: 60px;
}


@media (max-width: 1600px) {
  .group-card.expanded {
    width: 30%;
  }
  
  .group-card-content {
    font-size: 12px;
    width: 95%;
  }
  
}

@media (max-width: 1400px) {
  .group-card.expanded {
    width: 40%;
  }
  
  .group-card-content {
    font-size: 12px;
    width: 68%;
  }
}

@media (max-width: 1100px) {
  .group-card {
    bottom: 1%;
  }
  .group-card.expanded {
    width: 80%;
  }

}

/* For mobile devices */
@media (max-width: 768px) {
  .group-card.expanded {
    width: 80%; /* Take most of the screen width on smaller devices */
  }

  .group-card-content {
    font-size: 10px;
    width: 95%;
  }
}

.group-card.collapsed {
  width: 40px; /* Collapsed size */
}

.group-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px; 
  padding: 10px;
  position: relative;
}

.group-card-header .group-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  /* opacity: 0.6; */
}

.group-card-header .group-dot.pink {
  background-color: #be0862;
}

.group-card-header .group-dot.yellow {
  background-color: #deb100;
}

.group-card-header .group-dot.blue {
  background-color: #122a7a;
}


.pink {
  color: #be0862;
}

.yellow {
  color:#deb100;
}

.blue {
  color: #122a7a;
}