@font-face {
  font-family: 'Yuyu Short';
  src: url('YuyuShort-Regular.ttf');
}

body {
  background-image: url("ojos.gif");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Yuyu Short', monospace;
  font-size: 48px;
  margin: 0;
  padding: 0;
}

/* Style du menu de gauche */
.sidebar {
  height: 100%;
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  padding-top: 30px;
  border-right: 2px dashed #ffffff;
  display: flex;
  flex-direction: column; 
  gap: 15px;
}

.sidebar h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 50px;
}

.sidebar a {
  padding: 10px 20px;
  text-decoration: none;
  font-size: 30px;
  color: #ffffff;
  display: block;
}

.sidebar a:hover {
  background-color: #ffffff;
  color: #000000;
}

/* Style du contenu à droite */
.content {
  margin-left: 220px;
  padding: 20px;
}

/* Conteneur pour grouper une catégorie et ses sous-liens */
.category-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Style spécifique pour le bloc des sous-catégories */
.sub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 25px; /* Décale les sous-catégories vers la droite */
}

/* Style des liens de sous-catégories */
.sub-sidebar a {
  font-size: 20px; /* Un poil plus petit pour la hiérarchie */
  color: #bbbbbb;  /* Un gris clair pour les différencier du blanc principal */
  padding: 5px 20px;
}

/* Effet au survol des sous-catégories */
.sub-sidebar a:hover {
  background-color: #ffffff;
  color: #000000;
}
/* --- ADAPTATION POUR TÉLÉPHONE (ÉCRANS DE MOINS DE 768px) --- */
@media screen and (max-width: 768px) {
  
  /* Le menu passe en haut et prend toute la largeur */
  .sidebar {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 2px dashed #ffffff;
    padding: 15px !important;
    box-sizing: border-box;
  }

  /* Le contenu se remet en dessous du menu au lieu d'être bloqué à droite */
  .content {
    margin-left: 0 !important;
    padding: 20px !important;
    padding-bottom: 120px !important; /* Laisse de l'espace pour pas que le player cache le texte */
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Le player s'adapte en bas de l'écran */
  #player-container {
    left: 0 !important; /* Aligné sur le bord gauche sur mobile */
    padding: 15px 10px !important;
    flex-direction: column !important; /* Le texte et la barre se superposent si l'écran est trop petit */
    gap: 10px !important;
  }

  /* Ajuste la taille du texte du player sur mobile pour éviter que ça dépasse */
  #player-container div:first-child {
    font-size: 16px !important; /* Un poil plus petit sur tel */
    min-width: 100% !important;
    justify-content: space-between;
  }
}