/* Empêche le scroll sur toute la page */
body {
  overflow: hidden; /* Désactive le défilement global */
}

/* Section principale alignée horizontalement */
.videos-archive {
  display: flex; /* Aligne les éléments horizontalement */
  height: calc(
    100vh - 20vh
  ); /* Hauteur totale entre le header (10vh) et le footer (10vh) */
  margin-top: 10vh; /* Espace sous le header */
  margin-bottom: 10vh; /* Espace au-dessus du footer */
  padding: 20px;
  gap: 20px; /* Espace entre les colonnes */
  overflow: hidden; /* Empêche le scroll dans cette section */
}

/* Conteneur vidéo à gauche */
.video-container {
  flex: 2; /* Prend plus d'espace que le filtre */
  max-width: 60%; /* Limite la largeur de la vidéo */
  height: 90%; /* S'adapte à la hauteur de .videos-archive */
  margin: 0;
}

.video-container iframe {
  width: 100%; /* La vidéo occupe toute la largeur disponible */
  height: 100%; /* La vidéo occupe toute la hauteur disponible */
  border-radius: 10px; /* Coins arrondis */
}

/* Conteneur des filtres à droite */
.filter-container {
  flex: 1; /* Prend moins d'espace que la vidéo */
  background-color: rgba(0, 0, 0, 0.1); /* Fond légèrement transparent */
  padding: 15px; /* Ajoute un espace interne */
  border-radius: 10px; /* Coins arrondis */
  overflow-y: scroll; /* Active le défilement vertical */
  height: 100%; /* S'adapte à la hauteur de .videos-archive */
  scrollbar-width: none; /* Masque la barre de défilement pour Firefox */
}

.filter-container::-webkit-scrollbar {
  display: none; /* Masque la barre de défilement pour Chrome, Safari et Edge */
}

.filter-container h3 {
  margin-bottom: 15px; /* Espace sous le titre */
  font-size: 18px;
  color: #f3f3d1;
}

.filter-container label {
  display: block; /* Chaque label sur une nouvelle ligne */
  margin-bottom: 5px;
  font-size: 14px;
}

.filter-container select,
.filter-container button {
  width: 100%; /* Les éléments prennent toute la largeur */
  margin-bottom: 10px; /* Espace entre les éléments */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Conteneur des groupes de filtres */
.filter-group {
  display: flex; /* Active Flexbox */
  flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
  gap: 10px; /* Espace entre les boutons */
  align-items: center; /* Aligne les éléments verticalement */
  margin-bottom: 20px; /* Espace sous chaque groupe */
}

.filter-group h4 {
  margin: 0; /* Supprime les marges */
  margin-right: 10px; /* Espace entre le titre et les boutons */
  font-size: 16px;
  color: #f3f3d1; /* Assurez-vous que la couleur est visible */
  white-space: nowrap; /* Empêche le titre de passer à la ligne */
}

/* Boutons de filtre */
.filter-button {
  display: inline-block;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #f3f3d1;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  min-width: 80px; /* Largeur minimale pour uniformiser les boutons */
  text-align: center;
}

.filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

/* Effet visuel pour le bouton sélectionné */
.filter-button.selected {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Couleur différente pour le bouton sélectionné */
  border-color: #fff; /* Bordure blanche pour indiquer la sélection */
  transform: scale(1); /* Légèrement agrandi */
}

/* Liste des vidéos */
#video-list {
  display: grid; /* Active le mode grille */
  grid-template-columns: repeat(4, 1fr); /* Deux colonnes de largeur égale */
  gap: 20px; /* Espace entre les vidéos */
  margin-top: 20px; /* Espace au-dessus de la liste */
}

#video-list .video-item {
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  align-items: center; /* Centre les éléments horizontalement */
  background-color: rgba(0, 0, 0, 0.1); /* Fond légèrement transparent */
  padding: 10px;
  border-radius: 10px; /* Coins arrondis */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Ombre légère */
  cursor: pointer;
  transition: transform 0.2s ease; /* Animation au survol */
}

#video-list .video-item:hover {
  transform: scale(1.05); /* Agrandit légèrement au survol */
}

#video-list .video-item img {
  width: 100%; /* L'image occupe toute la largeur disponible */
  border-radius: 5px; /* Coins arrondis */
  margin-bottom: 10px; /* Espace sous l'image */
}

#video-list .video-item h4 {
  margin: 0;
  font-size: 14px;
  color: #f3f3d1;
  text-align: center; /* Centre le texte */
}

/* Styles spécifiques à la page nosvideo.php */
.nosvideo-page .videos-archive {
  display: flex; /* Aligne les deux colonnes horizontalement */
  gap: 10px; /* Ajoute un espace entre les colonnes */
  padding: 10px; /* Ajoute un espace autour de la section */
}

.nosvideo-page .video-container {
  flex: 1; /* La vidéo occupe la majeure partie de l'espace */
  max-width: 60%; /* Limite la largeur de la vidéo */
}

.nosvideo-page .video-container iframe {
  width: 100%; /* La vidéo occupe toute la largeur disponible */
  height: 300px; /* Hauteur fixe pour la vidéo */
}

.nosvideo-page .filter-container {
  flex: 0.4; /* La colonne du filtre occupe moins d'espace */
  background-color: rgba(0, 0, 0, 0.1); /* Fond légèrement transparent */
  padding: 15px; /* Ajoute un espace interne */
  border-radius: 10px; /* Coins arrondis */
}

.nosvideo-page .filter-container h3 {
  margin-bottom: 15px; /* Espace sous le titre */
  font-size: 18px;
  color: #f3f3d1;
}

.nosvideo-page .filter-container label {
  display: block; /* Chaque label sur une nouvelle ligne */
  margin-bottom: 5px;
  font-size: 14px;
}

.nosvideo-page .filter-container select,
.nosvideo-page .filter-container button {
  width: 100%; /* Les éléments prennent toute la largeur */
  margin-bottom: 10px; /* Espace entre les éléments */
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Affiche les boutons sur une seule ligne */
#year-buttons,
#month-buttons,
#category-buttons {
  display: flex; /* Active Flexbox */
  flex-wrap: nowrap; /* Empêche le retour à la ligne */
  gap: 10px; /* Espace entre les boutons */
  align-items: center; /* Aligne les éléments verticalement */
  overflow-x: auto; /* Active le défilement horizontal si nécessaire */
}

#year-buttons::-webkit-scrollbar,
#month-buttons::-webkit-scrollbar,
#category-buttons::-webkit-scrollbar {
  display: none; /* Masque la barre de défilement pour un design épuré */
}

#month-buttons {
  display: flex; /* Active Flexbox */
  flex-wrap: wrap; /* Permet de revenir à la ligne si nécessaire */
  gap: 10px; /* Espace entre les boutons */
  align-items: center; /* Aligne les éléments verticalement */
  justify-content: flex-start; /* Aligne les éléments au début */
}

#month-buttons .filter-button {
  flex: 1 1 calc(22% - 5px); /* Réduit la largeur à 20% pour afficher plus de boutons */
  max-width: calc(22% - 5px); /* Limite la largeur à 20% moins le gap */
  padding: 5px 10px; /* Réduit le padding pour des boutons plus compacts */
  font-size: 15px; /* Réduit la taille de la police pour s'adapter à la taille des boutons */
  text-align: center; /* Centre le texte dans le bouton */
}