/*
Theme Name: Evolve Geek Enfant
Theme URI: https://actu-geek.com
Description: Thème enfant personnalisé pour Evolve, optimisé pour un site geek / high-tech / jeux vidéos.
Author: TonNom
Author URI: https://tonsite.com
Template: evolve
Version: 1.0
*/

/* ================================
   Polices
================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@400;600&display=swap');

/* --- RESET DE BASE --- */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #111;
  color: #f0f0f0;
}
a {
  color: #ffaa00;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- ARTICLES HOVER --- */
.articles-slider {
  display: flex;
  gap: 15px;
  overflow: hidden; /* ✅ empêche tout scroll */
  padding: 10px 0;
  max-width: 1200px;    /* même largeur que la grille */
  margin: 0 auto;       /* centre le slider */
  transition: transform 0.3s ease; /* ➝ pour l'effet de descente */
  position: relative;
  margin-bottom: 60px; /* Donne de l’air pour que .matrix-text s'affiche bien */
  z-index: 5;
}

/* ➝ Cache la scrollbar */
.articles-slider::-webkit-scrollbar {
  display: none;
}
.articles-slider {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}

.articles-slider .article {
  position: relative;
  flex: 0 0 200px;
}

.articles-slider .matrix-text {
  position: absolute;
  bottom: -40px; /* décale le titre sous le cadre */
  left: 0;
  width: 100%;
  text-align: center;
}


.article {
  width: 220px;
  height: 375px;
  overflow: visible;
  filter: grayscale(100%);
  transition: all 0.4s ease;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
}

.article:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
  z-index: 2;
}

.article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  z-index: 1;
}
.article:nth-child(1) {
  margin-top: 60px;
}
.article:nth-child(2) {
  margin-top: 30px;
}
.article:nth-child(3) {
  margin-top: 0;
}
.article:nth-child(4) {
  margin-top: 20px;
}
.article:nth-child(5) {
  margin-top: 50px;
}

.matrix-text {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-size: 20px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #00ff00;
  text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
  font-family: monospace;
  text-align: center;
  position: relative;
  z-index: 2;
}

.matrix-text.show {
  opacity: 1;
}

.matrix-column {
  display: flex;
  flex-direction: column;
 /* color: #00ff00;
  font-size: 16px;
  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
  opacity: 0.7;
  animation: fall 0.6s forwards;
  animation-delay: var(--delay);*/
}

.matrix-letter {
  opacity: 0.9;
}

.reveal {
 /* font-weight: bold;
  opacity: 1;
  animation: none;*/
  color:#0f0;
}

/* Animation de pluie */
/*@keyframes fall {
  0% { transform: translateY(-950px); opacity: 0.1; }
  100% { transform: translateY(0); opacity: 1; }
}*/
.falling {
  animation: fall 0.4s linear forwards;
}

@keyframes fall {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- GRILLE D'ARTICLES --- */
.articles-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.card-article {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 1rem;
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.card-article:hover {
  box-shadow: 0 0 20px #00ffe1;
  transform: translateY(-4px);
}
.card-article img {
  width: 100%;
  border-radius: 8px;
}
.card-article h2 {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}
.post-meta {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.5rem;
}
.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  border: 2px solid #ffaa00;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s;
}
.read-more:hover {
  background: #ffaa00;
  color: #000;
}

/* --- ANIMATION DE DESCENTE DE LA GRILLE --- */
.articles-grid {
  transition: transform 0.3s ease;
}

.articles-grid.grid-shifted {
  transform: translateY(40px); /* ajuste la distance */
}


/* --- PAGINATION --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5rem auto 3rem;
  font-family: 'Orbitron', sans-serif;
}

.pagination ul {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  display: inline-block;
}

.pagination a,
.pagination .current {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #111;
  border: 1px solid #222;
  color: #ccc;
  transition: all 0.25s ease;
  box-shadow:
    0 0 6px rgba(0, 255, 200, 0.08),
    inset 0 0 4px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(6px);
}

.pagination a:hover {
  color: #00ffe1;
  background: #1a1a1a;
  border-color: #00ffe1;
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.4),
    inset 0 0 10px rgba(0, 255, 255, 0.2);
  transform: scale(1.05);
}

.pagination .current {
  color: #0ff;
  background: #000;
  border: 1px solid #0ff;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.3),
    inset 0 0 10px rgba(0, 255, 255, 0.3);
}


/* --- DARK MODE EXTENSIONS --- */
body.dark-mode {
  background: #000;
  color: #eee;
}
body.dark-mode .card-article {
  background: #111;
}
body.dark-mode .read-more {
  border-color: #00f3ff;
  color: #00f3ff;
}
body.dark-mode .read-more:hover {
  background: #00f3ff;
  color: #111;
}

body.dark-mode header {
  background-color: #000 !important;
}
body.dark-mode a {
  color: #00f3ff !important;
}
body.dark-mode .slide-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}
body.dark-mode .slider-wrapper::-webkit-scrollbar {
  display: none;
}

/* Forcer fond sombre même si thème parent applique un fond blanc */
body,
body .content,
body .site-content,
body .main-content,
body .wrapper,
body .container {
  background-color: #111 !important;
  color: #f0f0f0 !important;
}

body.dark-mode,
body.dark-mode .content,
body.dark-mode .site-content,
body.dark-mode .main-content,
body.dark-mode .wrapper,
body.dark-mode .container {
  background-color: #000 !important;
  color: #eee !important;
}


/* --- RESPONSIVE --- */
@media screen and (max-width: 768px) {
  .slider-wrapper {
    padding: 1rem 0.5rem;
  }
  .slide {
    width: 250px;
  }
}

.top-highlights {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.highlight-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.highlight-thumb {
  position: relative;
}
.highlight-thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.highlight-thumb:hover img {
  transform: scale(1.05);
}
.highlight-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  transition: opacity 0.3s ease;
}
.highlight-card:hover .highlight-overlay {
  opacity: 1;
}
.highlight-overlay h2 {
  font-size: 1.1rem;
  margin: 0;
}

.ias-noneleft {
  display: none !important;
}

/* ✅ MENU PRINCIPAL EN LIGNE (horizontal centré) */
.menu-2025 {
  display: flex !important;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 15px 0;
}

.menu-2025 li {
  display: inline-block !important;
  margin: 0;
  padding: 0;
}

.menu-2025 li a {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: #00ffe1;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.menu-2025 li a:hover,
.menu-2025 .current-menu-item > a {
  background-color: #00ffe1;
  color: #111;
  box-shadow: 0 0 10px #00ffe1;
  transform: translateY(-2px);
}

/* Article contenue */

#primary > nav:nth-child(1){
  display: none;
}