/* =========================
   Intro / Top page
========================= */
.gj-top-page { max-width:960px; margin:2rem auto; font-family:"Inter","Segoe UI",sans-serif; }
.gj-intro-2025 { background:linear-gradient(135deg,#0f2027,#203a43,#2c5364); padding:2rem; border-radius:16px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); margin-bottom:2rem; }
.gj-intro-2025 h1 { text-align:center; font-size:2rem; margin-bottom:1rem; color:#8fdc9f; }
.gj-intro-2025 .lead { text-align:center; font-size:1.1rem; margin-bottom:1.5rem; color:#eee; }
.gj-intro-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.gj-intro-block { background:rgba(255,255,255,0.05); padding:1rem; border-radius:12px; color:#fff; }
.gj-intro-block.highlight { border:2px solid #8fdc9f; }
.gj-intro-block h2 { margin-top:0; color:#8fdc9f; }
.gj-intro-2025 .conclusion { text-align:center; font-weight:600; margin-top:1rem; }
.gj-intro-cta { text-align:center; margin-top:1.5rem; }
.gj-btn-quiz { display:inline-block; background:linear-gradient(135deg,#00e676,#1de9b6); color:#111; padding:.8rem 1.6rem; border-radius:50px; font-weight:700; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.3); transition:all .3s ease; }
.gj-btn-quiz:hover { background:linear-gradient(135deg,#69f0ae,#00e5ff); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.4); }

/* =========================
   Top 9 slider
========================= */
.gj-top9-slider { max-width:940px; margin:2rem auto; font-family:"Inter","Segoe UI",sans-serif; position:relative; }
.gj-top9-slider h3 { text-align:center; font-size:1.6rem; margin-bottom:1rem; color:#8fdc9f; }
.gj-slider { display:flex; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; gap:.5rem; -webkit-overflow-scrolling:touch; }
.gj-slider::-webkit-scrollbar { display:none; }
.gj-slide { flex:0 0 210px; margin:.25rem; border-radius:12px; padding:.75rem; color:#fff; text-decoration:none; background:linear-gradient(135deg,#0f2027,#203a43,#2c5364); box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; align-items:center; }
.gj-slide:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.35); }
.gj-thumb { width:100%; height:120px; display:flex; align-items:center; justify-content:center; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.15); margin-bottom:.5rem; }
.gj-thumb img { width:100%; height:100%; object-fit:cover; }
.gj-placeholder { font-size:1.4rem; color:#9fd8a5; }
.gj-info { display:flex; flex-direction:column; align-items:center; gap:.25rem; width:100%; }
.gj-name { font-weight:700; font-size:1rem; color:#fff; }
.gj-count { font-weight:600; font-variant-numeric:tabular-nums; color:#cfe7d3; }
.gj-bar { width:100%; height:8px; background:rgba(255,255,255,0.15); border-radius:4px; overflow:hidden; margin-top:.3rem; }
.gj-bar-fill { height:100%; background:linear-gradient(90deg,#8fdc9f,#00e5ff); width:0; }
.gj-progress { font-size:.85rem; }
.trend-badge { background:#ff5722; color:#fff; padding:0.1rem 0.4rem; border-radius:6px; font-size:.7rem; }

/* Arrows */
.gj-nav {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.gj-nav-btn {
  pointer-events: auto;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 20px; line-height: 36px;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  backdrop-filter: blur(2px);
}
.gj-nav-btn:hover { background: rgba(0,0,0,0.5); transform: translateY(-1px); }
.gj-nav-prev { margin-left: 6px; }
.gj-nav-next { margin-right: 6px; }
.gj-slider.is-dragging { cursor: grabbing; user-select: none; }

@media (max-width: 560px) {
  .gj-nav-btn { width: 32px; height: 32px; font-size: 18px; line-height: 32px; }
}
.gj-sparkline {
  margin-top:.3rem;
  width:80px;
  height:30px;
}
.gj-sparkline svg {
  display:block;
}
.trend-badge.pulse {
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.2); opacity:.7; }
  100% { transform: scale(1); opacity:1; }
}

/* =========================
   Top 10 détaillé
========================= */
.gj-top10-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.gj-card10 {
  background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  border-radius:12px;
  padding:1rem;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gj-card10:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.gj-card10 .rank { font-weight:700; font-size:1.2rem; color:#8fdc9f; margin-bottom:.5rem; }
.gj-card10 .name { font-weight:700; font-size:1.1rem; margin-bottom:.25rem; }
.gj-card10 .count { font-weight:600; font-variant-numeric:tabular-nums; color:#cfe7d3; }
.gj-card10 .progress { font-size:.85rem; margin-top:.3rem; }
.progress-up { color:#8fdc9f; font-weight:600; }
.progress-down { color:#ff5252; font-weight:600; }
.gj-card10 .excerpt { font-size:.85rem; color:#ddd; margin-top:.4rem; text-align:center; }
.gj-btn-fiche {
  display:inline-block;
  margin-top:.5rem;
  padding:.4rem .8rem;
  background:#8fdc9f;
  color:#111;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease;
}
.gj-btn-fiche:hover { background:#00e5ff; transform:translateY(-2px); }