:root {
  --primary-cyan: #00bcd4;
  --secondary-cyan: #00acc1;
  --dark-cyan: #00838f;
  --light-cyan: #4dd0e1;
}

body {
  padding-left: 0;
  padding-top: 0;
  background: url(../img/bg.webp) no-repeat center center fixed;
  background-size: cover;
}

.bg-primary-cyan {
  background-color: var(--primary-cyan);
}

.bg-secondary-cyan {
  background-color: var(--secondary-cyan);
}

.bg-dark-cyan {
  background-color: var(--dark-cyan);
}

.text-primary-cyan {
  color: var(--primary-cyan);
}

.text-secondary-cyan {
  color: var(--secondary-cyan);
}

.text-dark-cyan {
  color: var(--dark-cyan);
}

.border-primary-cyan {
  border-color: var(--primary-cyan);
}

.gradient-bg-1 {
  background: linear-gradient(135deg, #3F51B5, rgba(31, 41, 55, 0.98))
}

.gradient-bg-2 {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.gradient-inactive {
  background: linear-gradient(135deg, #7f1d1d, #dc2626, #ea580c);
}

.gradient-bg {
  background: linear-gradient(135deg, var(--dark-cyan), var(--primary-cyan));
}

.gradient-alliance {
  background: linear-gradient(
    135deg,
    var(--dark-cyan),
    var(--primary-cyan),
    #1e40af
  );
}

.gradient-search {
  background: linear-gradient(
    135deg,
    var(--dark-cyan),
    var(--primary-cyan),
    #1e40af
  );
}

.gradient-ranking {
  background: linear-gradient(
    135deg,
    var(--dark-cyan),
    var(--primary-cyan),
    #fbbf24
  );
}

.legal-content {
  line-height: 1.7;
}

.section-nav {
  position: sticky;
  top: 2rem;
}

.nav-animation:hover {
  transform: translateX(5px);
  transition: all 0.3s ease-in-out;
  color: var(--primary-cyan);
}

.invisible-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Styles pour le menu mobile */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  display: block;
}

#mobile-menu.show {
  max-height: 500px;
  opacity: 1;
}

/* Cacher le menu mobile sur desktop */
@media (min-width: 768px) {
  #mobile-menu {
    display: none !important;
  }
}

/* Animation pour l'icône hamburger */
#mobile-menu-button i {
  transition: transform 0.3s ease-in-out;
}

#mobile-menu-button.active i {
  transform: rotate(90deg);
}

/* Amélioration du responsive pour le logo */
@media (max-width: 768px) {
  .logo img {
    height: 2.5rem;
  }
}

/* Menu latéral desktop */
#desktop-sidebar {
  position: fixed;
  left: 0;
  top: 80px;
  height: calc(100vh - 80px);
  width: 250px;
  background-color: #1f2937;
  border-right: 2px solid var(--primary-cyan);
  z-index: 30;
  display: none;
}

@media (min-width: 768px) {
  #desktop-sidebar {
    display: block;
  }
}

/* Bannière de cookies */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(31, 41, 55, 0.98);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--primary-cyan);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

#cookie-banner.show {
  transform: translateY(0);
}

/* Style pour les filtres classements */
.filter-button {
  width: 52px;
  height: 53px;
  /*background-image: url('../img/icons.png');*/
  background-image: url('../img/statistics-buttons.gif');
  background-repeat: no-repeat;
}

.filter-button.player {
  background-position: 0px 0px;
}

.filter-button.alliance {
  background-position: -55px 0px;
}

.filter-button.points {
  background-position: -109px 0px;
}

.filter-button.building {
  background-position: -271px 0px;
}

.filter-button.research {
  background-position: -217px 0px;
}

.filter-button.fleet {
  background-position: -163px 0px;
}

.filter-button.defense {
  background-position: -325px 0px;
}