/* Effet néon sur tout le groupe de recherche au hover */
.search-group:hover {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488 !important;
  background: #232733;
}
/* === NEWS PAGINATION === */
.news-pagination-divider {
  border: none;
  border-top: 2px solid #ccc;
  margin: 32px 0 18px 0;
}
.pagination-selector {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.page-btn {
  background: none;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.25em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  opacity: 0.85;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.page-btn.active {
  background: #323336;
  color: #fff;
  font-weight: 800;
  opacity: 1;
  text-shadow: 0 2px 8px #000a;
}
.page-btn.next {
  background: #323336;
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
}
.page-btn.next:hover,
.page-btn:hover:not(.active) {
  background: #1a8cff;
  color: #fff;
  opacity: 1;
}

.page-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-ellipsis {
  color: #fff;
  font-size: 1.35em;
  opacity: 0.7;
  padding: 0 4px;
  user-select: none;
}

/* Pagination info */
.pagination-info {
  position: absolute;
  left: 0;
  color: #ccc;
  font-size: 0.9em;
  opacity: 0.8;
}

.news-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}
/* === NEWS GRID (3 cards) === */
.news-grid-section {
  margin: 48px 0 32px 0;
}
.news-grid {
  display: flex;
  gap: 32px;
}
.news-grid-card {
  border-radius: 16px;
  overflow: hidden;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.news-grid-card img {
  width: 100%;
  height: 18vw;
  object-fit: cover;
  display: block;
}
.news-grid-content {
  padding: 18px 18px 12px 18px;
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 1.48em;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-grid-content h4 {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
}
.news-list-section {
  margin: 48px 0 0 0;
}
.news-list-item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
}
.news-list-item img {
  width: 20vw;
  height: 12vw;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.news-list-content {
  flex: 1;
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 1.48em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-list-content h4 {
  margin: 0 0 8px 0;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
}
.news-list-section hr {
  border: none;
  border-top: 1.5px solid #bdbdbd33;
  margin: 0 0 32px 0;
}
@media (max-width: 1400px) {
  .news-grid {
    flex-direction: column;
    gap: 24px;
  }
  .news-list-item {
    flex-direction: column;
    gap: 18px;
  }
  .news-list-item img {
    width: 100%;
    height: 180px;
  }
}

/* Mobile exact match tweaks (small phones) */
@media (max-width: 1480px) {
  /* Hero: tighter padding and slightly smaller text */
  .news-hero-bg {
    padding: 0 12px 20px 12px !important;
    min-height: 26vw !important;
    border-radius: 12px !important;
  }
  .news-hero-bg h1 {
    font-size: 1.6rem !important;
    padding-bottom: 6px !important;
    margin-left: 2px !important;
  }
  .news-hero-bg .from { font-size: 0.9rem !important; }

  /* Top news cards: horizontal scroller showing two cards side-by-side */
  .news-cards-row {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }
  .news-card {
    flex: 0 0 48% !important;
    min-width: 48% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .news-card img {
    height: 32vw !important;
    border-radius: 8px !important;
    width: calc(100% - 8px) !important;
    margin: 4px !important;
    object-fit: cover !important;
  }
  .news-card-content { padding: 12px !important; font-size: 0.96rem !important; }
  /* Reduce text sizes inside the top news cards for small phones */
  .news-card-content { padding: 10px !important; font-size: 0.82rem !important; }
  .news-card-content h2 { font-size: 0.95rem !important; }
  .news-card-content h3 { font-size: 0.85rem !important; }
  .news-card-content p { font-size: 0.78rem !important; line-height: 1.25 !important; }
  .news-card .read-more { font-size: 0.78rem !important; }

  /* Grid section: make cards horizontally scrollable (2-per-view) */
  .news-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }
  .news-grid-card {
    flex: 0 0 46% !important;
    min-width: 46% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .news-grid-card img { height: 30vw !important; border-radius: 8px !important; }

  /* List items: compact two-column feel with thumbnail left and text right */
  .news-list-section {
    padding: 0 8px !important;
  }
  .news-list-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
  }
  .news-list-item img {
    width: 44% !important;
    height: 70vw !important; /* increased height for more prominent thumbnails */
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .news-list-content {
    font-size: 0.95rem !important;
    gap: 6px !important;
  }
  .news-list-content h4 { font-size: 0.95rem !important; margin-bottom: 6px !important; }
  .news-list-content p { font-size: 0.86rem !important; line-height: 1.3 !important; }

  /* Mobile: add subtle separator between list cards */
  .news-grid-card {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding-bottom: 12px !important;
    border-radius: 0px !important;
    margin-bottom: 18px !important;
  }
  .news-card-content {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }

  /* Pagination: center and compress spacing */
  .news-pagination { margin-bottom: 18px !important; }
  .pagination-selector { gap: 6px !important; }
  .page-btn { width: 34px !important; height: 34px !important; font-size: 1em !important; }

}
/* === NEWS PAGE === */
body {
  background: linear-gradient(90deg,rgba(36,40,42,1) 0%, rgba(44,41,46,1) 50%, rgba(75,43,50,1) 100%); 
}
.news-main {
  max-width: 95vw;
  margin: 0 auto;
  padding: 40px 0 60px 0;
}
.news-hero {
  margin-bottom: 38px;
}
.news-hero-bg {
  background: url('../image/b564929098bbbb3575dc32f29068958c1c846457.png') center 10%/cover no-repeat;
  border-radius: 18px;
  min-height: 30vw;
  display: flex;
  align-items: flex-end;
  padding: 0 0 38px 48px;
  position: relative;
}
.news-hero-bg h1 {
  color: #fff;
  font-size: 2.6em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 16px #000a;
}
.news-hero-bg .from {
  font-style: italic;
  font-size: 1.2em;
  font-weight: 700;
}
.news-cards-row {
  display: flex;
  gap: 32px;
  margin-top: 18px;
}
.news-card {

  border-radius: 16px;
  overflow: hidden;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.news-card img {
  width: 100%;
  height: 20vw;
  object-fit: cover;
  display: block;
}
.news-card-content {
  padding: 24px 22px 18px 22px;
  color: #fff;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 1.08em;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-card-content h2 {
  margin: 0 0 8px 0;
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: 1px;
}
.news-card-content h3 {
  margin: 0 0 4px 0;
  font-size: 1.1em;
  font-weight: 600;
  color: #e0e0e0;
}
.read-more {
  color:white;
  font-weight: 700;
 
  margin-top: 8px;
  align-self: flex-start;
  transition: color 0.2s;
}
.read-more:hover {
  color: #bf780e;
}
/* Neon Button Effect */
.btn, button {
  box-shadow: 0 0 8px #863434, 0 0 24px #86343444;
  transition: box-shadow 0.3s, background 0.2s;
}
.btn:hover, button:hover {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
  background: #863434;
  color: #fff;
}

/* Neon Card Hover Effect */
.game-card.card-animate {
  box-shadow: 0 0 24px #863434, 0 0 48px #86343488;
  border-color: #863434;
  transform: scale(1.04) translateY(-8px);
}

/* Barre de recherche effet néon au survol */
.search-bar {
  box-shadow: none !important;
}
.search-bar:hover, .search-bar:focus {
  box-shadow: none !important;
 
}

/* Bouton de recherche effet néon au survol */
.search-btn {
  box-shadow: none !important;
  transition: background 0.2s, box-shadow 0.3s;
}
.search-btn:hover {
  box-shadow: none !important;
  background: #232733;
}

/* Desktop: nudge search text slightly to the right (global, not inside media query) */
.search-group .search-bar, .search-group .available-search-bar {
  padding-left: 25px !important;
}

/* Mobile-specific: add subtle rounded border for clarity */
@media (max-width: 768px) {
  .search-group .search-bar,
  .search-group .available-search-bar {
    
    border-radius: 12px !important;
    background-clip: padding-box !important;
  }
  .search-group.mobile-search-open .search-bar,
	.search-group.mobile-search-open .available-search-bar {
		display: block !important;
		/* wider on small screens: use viewport width but cap to a reasonable max */
		width: 55vw !important;
		max-width: 100vwv !important;
		opacity: 1 !important;
		transition: opacity 160ms ease-in-out !important;
	}
  .search-group.mobile-search-open {
			position: relative;
			z-index: 1500 !important;
			/* shift left so the active search bar is more centered on small screens */
			transform: translateX(-5vw) !important;
			transition: transform 180ms ease-out !important;
	}
  .search-group .search-btn { pointer-events: auto !important; }
  .mobile-search-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 1400;
	}
	.mobile-search-backdrop.open { display: block; }
}

/* Ensure the site-wide hamburger (.menu-btn) is only visible on small screens
   for the news page. Default: hidden; on mobile: show. Use !important so this
   file's rule wins when news.html includes shared css files. */
.menu-btn {
  display: none !important;
}

@media (max-width: 1468px) {
  .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile: pin the header to top and add body padding to prevent content from being covered */
@media (max-width: 1468px) {
  .header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1600 !important;

  }
  body {
    padding-top: 72px !important;
  }
}