body {
  margin: 0;
  background-color: #121212;
  color: #00ffd5;
  font-family: 'Segoe UI', sans-serif, Tahoma, Geneva, Verdana;
  /* Suppression de flex centré verticalement */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Retire justify-content: center pour que ce soit en haut */
  /* Justement : place le contenu en haut */
  justify-content: flex-start;
  height: 100vh;
  gap: 30px;
  padding-top: 20px; /* un peu d’espace au dessus */
}

#countdown {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.1em;
  background: #001f24;
  padding: 40px 60px;
  border-radius: 15px;
  box-shadow: 0 0 20px #00ffd5aa;
  user-select: none;

  /* Pour être bien collé en haut, on peut forcer une marge */
  margin-top: 0;
}
  #event {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #00aaa5;
    font-weight: 600;
  }
  .time-section {
    display: inline-block;
    margin: 0 15px;
  }
  .time-section span {
    display: block;
    font-size: 1.2rem;
    color: #00897b;
  }

    h1 {
      color: #ffffff;
      text-shadow: 0 0 10px #00ffe0;
      font-size: 2.5em;
    }

    h2 {
      color: #ffffff;
      text-shadow: 0 0 10px #00ffe0;
      font-size: 2.5em;
    }
    .clock {
      font-size: 2em;
      background: #1e1e1e;
      padding: 20px 40px;
      border-radius: 20px;
      box-shadow: 0 0 20px #00ffe0;
      min-width: 300px;
      text-align: center;
    }
    .label {
      font-size: 1.2em;
      margin-bottom: 10px;
      color: #ffffffa0;
    }

.clock-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* Pseudo cyan néon */
#chatBox strong {
  color: #00ffe0; /* ton cyan actuel */
}

/* Liens en orange clair, bien distincts */
#chatBox a {
  color: #ffb86c;           /* orange clair néon */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
  word-break: break-word;
}

/* Survol avec glow orange plus vif */
#chatBox a:hover,
#chatBox a:focus {
  color: #ffa500;           /* orange vif */
  text-decoration: underline;
  text-shadow:
    0 0 8px #ffb86c,
    0 0 15px #ffb86c;
  outline: none;
}

/* Focus clavier */
#chatBox a:focus-visible {
  box-shadow:
    0 0 8px 2px #ffb86c;
  border-radius: 3px;
}

/* Clic */
#chatBox a:active {
  color: #cc8400;
  text-shadow: none;
  transition: none;
}

.side-link {
  background: #1e1e1e;
  color: #00ffe0;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #00ffe066;
  transition: all 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
  border: 2px solid transparent;
  white-space: nowrap;
  width: 100%; 
  box-sizing: border-box;
}

/* Effet au survol */
.side-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ffe0cc;
}

/* Liens personnalisés */
.side-link.twitch {
  border-left: 4px solid #9146FF;
}
.side-link.youtube {
  border-left: 4px solid #FF0000;
}
.side-link.timelapse {
  border-left: 4px solid #00bcd4;
}
.side-link.vrc {
  border-left: 4px solid #ffd700;
  background-color: #262626;
}

/* Bloc VRC */
.vrc-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1a1a1a;
  border-left: 4px solid #ffd700;
  padding: 10px 10px 10px 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffd70055;
  width: 100%;
  box-sizing: border-box;
}

.vrc-title {
  height: 40px; /* Hauteur réduite pour bien cadrer le logo */
  margin-bottom: 8px;
  background-image: url('https://virtualracingchampionship.com/wp-content/uploads/2022/12/VRCWebSiteLogo1.png');
  background-repeat: no-repeat;
  background-size: 160px auto; /* Redimensionné pour voir le "VRC" */
  background-position: left center;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 0 8px #ffd700aa;
}

.side-links {
  position: fixed;
  top: 50%;
  left: -240px;
  transform: translateY(-50%);
  transition: left 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.side-links.visible {
  left: 10px;
}

.toggle-side-links {
  position: fixed;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
  background-color: #00ffe0;
  color: #000;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 0 8px #00ffe066;
  transition: background-color 0.3s ease;
  animation: pulseGlow 2s infinite ease-in-out;
}

.toggle-side-links:hover {
  background-color: #00ccbb;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 8px #00ffe0;
  }
  50% {
    box-shadow: 0 0 20px #00ffe0;
  }
  100% {
    box-shadow: 0 0 8px #00ffe0;
  }
}

.official-link {
  color: #00ffe0;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 0 5px #00ffe0aa;
  transition: all 0.3s ease;
  display: inline-block;
}

.official-link:hover {
  transform: translateY(-2px);
  color: #00fff7;
  text-shadow: 
    0 0 6px #00ffe0,
    0 0 12px #00ffe0;
}