/*
Theme Name: Retro Raiders
Theme URI: https://retro-raiders.com
Author: Retro Raiders
Author URI: https://retro-raiders.com
Description: Thème WordPress sur-mesure pour Retro Raiders, boutique de jeux vidéo rétro, consoles, accessoires et cartes Pokémon. Design "cartouche rétro néon" : fond nuit d'arcade, dégradés violet/bleu néon/magenta, cartes en forme de cartouche.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: retro-raiders
*/

/* =========================================================
   RETRO RAIDERS — Design system
   Palette : nuit d'arcade + néon violet/bleu + accent magenta
   Typo     : Press Start 2P (display, usage restreint)
              Space Grotesk (texte courant)
              JetBrains Mono (labels, prix, méta, "étiquettes cartouche")
   Signature visuelle : cartes en forme de cartouche de jeu
   ========================================================= */

:root {
  /* Couleurs */
  --bg: #0a0912;
  --bg-elevated: #120f1f;
  --surface: #17142b;
  --surface-2: #1e1a38;
  --violet: #8b2fe0;
  --violet-deep: #5b21b6;
  --neon-blue: #2dd4ff;
  --magenta: #ff2d95;
  --text: #f1edff;
  --text-muted: #a79fc7;
  --text-dim: #766e93;
  --border: rgba(139, 47, 224, 0.35);
  --border-soft: rgba(241, 237, 255, 0.08);
  --success: #4ade80;

  /* Typo */
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Échelle */
  --radius-s: 4px;
  --radius-m: 10px;
  --container: 1200px;
  --header-h: 72px;

  /* Espacement de section, resserré sur grand écran (voir .section) */
  --section-pad: 48px;
}
@media (min-width: 1280px) {
  :root { --section-pad: 56px; }
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(139,47,224,0.16), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(45,212,255,0.10), transparent 40%),
    linear-gradient(180deg, #0a0912 0%, #0a0912 100%);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-body); font-weight: 700; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Focus visible accessible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--neon-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--neon-blue);
  color: #0a0912;
  padding: 10px 16px;
  z-index: 999;
  font-family: var(--font-mono);
  font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------- Utilitaires typo -------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
  flex: none;
}
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin-top: 10px;
  letter-spacing: -0.01em;
}
.section-lede {
  color: var(--text-muted);
  max-width: 62ch;
  margin-top: 14px;
  font-size: 1.05rem;
}
.text-gradient {
  background: linear-gradient(90deg, var(--neon-blue), var(--violet) 55%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------------------- Boutons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 26px;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 45, 149, 0.25);
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(255, 45, 149, 0.4); }
.btn-secondary {
  background: transparent;
  color: var(--neon-blue);
  border-color: rgba(45, 212, 255, 0.5);
}
.btn-secondary:hover { background: rgba(45, 212, 255, 0.08); }
.btn-block { width: 100%; }

/* -------------------- Header / nav -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 9, 18, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text);
  flex: none;
}
.logo .logo-mark { color: var(--magenta); filter: drop-shadow(0 0 6px rgba(255,45,149,0.6)); }
.logo .logo-accent { color: var(--neon-blue); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.site-header__cta { display: none; }

/* Bouton hamburger — 3 barres explicites, sans pseudo-éléments */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau de navigation mobile — plein écran, accessible */
.main-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 360px);
  height: 100vh;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  box-shadow: 30px 0 60px -20px rgba(0,0,0,0.5);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 18px 22px 28px;
  overflow-y: auto;
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.main-nav[data-state="open"] { transform: translateX(0); }

.main-nav__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.main-nav__panel-header .logo { font-size: 12px; }
.nav-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  color: var(--text);
  cursor: pointer;
}

.main-nav ul { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.main-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 6px;
  font-size: 1.08rem;
  border-bottom: 1px solid var(--border-soft);
}
.main-nav a[aria-current="page"] { color: var(--neon-blue); }
.main-nav__cta {
  margin-top: 20px;
  width: 100%;
  justify-content: center;
  min-height: 50px;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 18, 0.6);
  z-index: 80;
}
.nav-overlay[hidden] { display: none; }

/* Verrouillage du scroll quand le menu mobile est ouvert */
body.nav-is-open { overflow: hidden; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-overlay { display: none !important; }
  .site-header__cta { display: inline-flex; }

  .main-nav {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    border-right: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    z-index: auto;
    display: block;
  }
  .main-nav__panel-header, .main-nav__cta { display: none !important; }
  .main-nav ul { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
  .main-nav a {
    border-bottom: none;
    padding: 6px 2px;
    font-size: 0.9rem;
    position: relative;
    white-space: nowrap;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -4px;
    height: 2px;
    background: var(--neon-blue);
    transition: right 0.2s ease;
  }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
}


/* -------------------- Hero -------------------- */
.hero {
  padding: 56px 0 40px;
}
.hero-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px),
    linear-gradient(160deg, var(--surface), var(--bg-elevated));
  padding: 44px 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(139,47,224,0.08), 0 30px 80px -30px rgba(139,47,224,0.35);
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--neon-blue), transparent 30%, var(--magenta) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  animation: hero-glow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-glow { 0%,100% { opacity: 0.35; } 50% { opacity: 0.7; } }

/* -------------------- Hero (accueil) : grille 2 colonnes -------------------- */
.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
}

.hero-copy { position: relative; }

.hero-visual {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface), var(--bg-elevated));
  box-shadow: 0 0 0 1px rgba(139,47,224,0.08), 0 30px 80px -30px rgba(139,47,224,0.35);
  aspect-ratio: 1 / 1;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--neon-blue), transparent 30%, var(--magenta) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-visual::after { animation: hero-glow 6s ease-in-out infinite; }
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 859px) {
  .hero-visual { max-width: 420px; margin: 0 auto; }
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neon-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero h1 {
  margin-top: 16px;
  font-size: clamp(2rem, 6.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero-sub {
  margin-top: 20px;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}
.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-tags {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 14px;
}
.hero-tag strong { color: var(--text); }

/* -------------------- Sections génériques -------------------- */
.section { padding: var(--section-pad) 0; }
.section-head { max-width: 720px; }
.section-alt { background: linear-gradient(180deg, transparent, rgba(139,47,224,0.06), transparent); }

/* -------------------- Présentation (accueil) -------------------- */
.presentation-grid {
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 860px) {
  .presentation-grid { grid-template-columns: 1.3fr 0.7fr; gap: 48px; }
}
.trust-stats {
  display: grid;
  gap: 16px;
}
.trust-stats li {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 18px 20px;
}
.trust-stats__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--neon-blue);
  margin-bottom: 4px;
}
.trust-stats__label {
  display: block;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* -------------------- Cartes "cartouche" (signature) -------------------- */
.cart-grid {
  margin-top: 32px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cart-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cart-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .cart-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cart-grid { gap: 24px; } }

/* Grille de services plus dense : icône + titre alignés, texte resserré */
.cart-grid.cols-3 .cart-card,
.cart-grid.cols-4 .cart-card { padding: 22px 20px 26px; }

.cart-card {
  --notch: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  padding: 26px 22px 30px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cart-card:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
  background: var(--surface-2);
}
.cart-card .cart-icon {
  width: 44px;
  height: 44px;
  color: var(--neon-blue);
}
.cart-card h3 {
  margin-top: 16px;
  font-size: 1.15rem;
}
.cart-card p {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.cart-card__link {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--neon-blue);
}
.cart-card__link:hover { color: var(--magenta); }
.cart-card .cart-label {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* connecteur type cartouche en bas de carte */
.cart-card::after {
  content: "";
  position: absolute;
  left: 22px; right: 40px; bottom: 12px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--border-soft) 0 4px, transparent 4px 8px);
  opacity: 0.8;
}

/* -------------------- Liste features (pourquoi nous choisir) -------------------- */
.feature-list {
  margin-top: 36px;
  display: grid;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.feature-item {
  background: var(--bg-elevated);
  padding: 22px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.feature-item .num {
  font-family: var(--font-mono);
  color: var(--magenta);
  font-size: 0.85rem;
}
.feature-item h3 { font-size: 1.05rem; }
.feature-item p { margin-top: 6px; color: var(--text-muted); font-size: 0.95rem; }
@media (min-width: 780px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }

/* -------------------- CTA band -------------------- */
.cta-band {
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(139,47,224,0.18), rgba(45,212,255,0.1));
  padding: 40px 28px;
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); }
.cta-band p { margin-top: 12px; color: var(--text-muted); max-width: 60ch; margin-inline: auto; }
.cta-band .hero-cta { justify-content: center; margin-top: 26px; }

/* -------------------- Formulaire contact -------------------- */
.contact-grid {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; } }

.form-card, .info-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 28px 24px;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  color: var(--text);
  font-size: 0.98rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--neon-blue);
}
.field textarea { resize: vertical; min-height: 140px; }
.form-note { margin-top: 14px; font-size: 0.85rem; color: var(--text-dim); }
.form-success {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--success);
  border-radius: var(--radius-s);
  color: var(--success);
  font-size: 0.9rem;
  font-family: var(--font-mono);
}
.form-success.is-visible { display: block; }

.info-card h3 { font-size: 1.05rem; }
.info-list { margin-top: 18px; display: grid; gap: 16px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; }
.info-list .ico { color: var(--neon-blue); flex: none; width: 22px; height: 22px; margin-top: 2px; }
.info-list .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.info-list .val { color: var(--text); font-size: 0.98rem; }
.corner-box {
  margin-top: 22px;
  padding: 16px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.corner-box strong { color: var(--text); }

/* -------------------- Réseaux sociaux -------------------- */
.social-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
}
.social-links__item {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.social-links__item:hover {
  color: var(--neon-blue);
  border-color: var(--neon-blue);
  transform: translateY(-2px);
}

/* -------------------- Carte Google Maps (iframe lazy) -------------------- */
.rr-map-wrapper {
  margin-top: 28px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}
.rr-map-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(1.05);
}
@media (max-width: 600px) {
  .rr-map-wrapper { aspect-ratio: 4 / 5; }
}

/* -------------------- Blog -------------------- */
.blog-hero { padding: 48px 0 20px; }

.archive-hero__desc p { margin: 0; }
.archive-hero__count {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------------------- Pastilles de catégories (hero d'archive) -------------------- */
.archive-pills {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.archive-pill {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 16px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.archive-pill:hover {
  border-color: var(--neon-blue);
  color: var(--neon-blue);
}
.archive-pill.is-active {
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  border-color: transparent;
  color: #fff;
}

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.article-card:hover { transform: translateY(-4px); border-color: var(--violet); }
.article-thumb {
  height: 150px;
  background: linear-gradient(135deg, var(--violet-deep), var(--bg-elevated) 60%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 5px);
}
.article-thumb svg { width: 40px; height: 40px; color: var(--neon-blue); opacity: 0.9; }
.article-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.article-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--magenta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------------------- Grille éditoriale (accueil : 1 article + 4) -------------------- */
.editorial-grid {
  margin-top: 32px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .editorial-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
  }
  .editorial-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .editorial-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.featured-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.featured-article:hover { transform: translateY(-4px); border-color: var(--violet); }
.featured-article .featured-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--violet-deep), var(--bg-elevated) 65%);
  flex: none;
}
.featured-article .featured-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.featured-article .featured-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,9,18,0.9));
}
.featured-article .featured-thumb .thumb-placeholder {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  color: var(--neon-blue);
  opacity: 0.8;
}
.featured-article .featured-body { padding: 24px 26px 30px; }
.featured-article .article-cat { font-size: 12px; }
.featured-article h3 {
  margin-top: 12px;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.25;
}
.featured-article .article-excerpt { margin-top: 12px; font-size: 1rem; max-width: 60ch; }
.featured-article .article-meta { margin-top: 18px; }

.article-card.is-secondary {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
}
.article-card.is-secondary .article-thumb { height: 100%; min-height: 88px; }
.article-card.is-secondary .article-body { padding: 14px 16px 14px 0; }
.article-card.is-secondary h3 { font-size: 0.98rem; line-height: 1.3; }
.article-card.is-secondary .article-excerpt { display: none; }
.article-card.is-secondary .article-meta { margin-top: 8px; gap: 10px; }
.article-body h3 { margin-top: 10px; font-size: 1.08rem; line-height: 1.35; }
.article-excerpt { margin-top: 10px; color: var(--text-muted); font-size: 0.92rem; }
.article-meta {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  gap: 14px;
}

/* -------------------- Article (template) -------------------- */

/* Utilisé uniquement par page.php (pages statiques génériques, hors
   articles de blog qui utilisent désormais .article-hero ci-dessous). */
.article-header { padding: 44px 0 24px; }
.article-header h1 {
  font-size: clamp(1.7rem, 4.8vw, 2.6rem);
  line-height: 1.2;
}

/* -------------------- Hero premium -------------------- */
.article-hero {
  position: relative;
  margin-top: 20px;
  min-height: clamp(360px, 52vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(160deg, var(--violet-deep), var(--bg-elevated));
}
.article-hero--no-image {
  background:
    radial-gradient(circle at 20% 20%, rgba(139,47,224,0.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(45,212,255,0.2), transparent 45%),
    linear-gradient(160deg, var(--surface-2), var(--bg-elevated));
}
.article-hero__media {
  position: absolute;
  inset: 0;
}
.article-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,18,0.35) 0%, rgba(10,9,18,0.55) 45%, rgba(10,9,18,0.96) 100%);
}
.article-hero__inner {
  position: relative;
  z-index: 1;
  padding: 40px 20px 36px;
  max-width: 900px;
}
.article-hero__cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  padding: 6px 14px;
  border-radius: 999px;
}
.article-hero__title {
  margin-top: 18px;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.article-hero__subtitle {
  margin-top: 16px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(241,237,255,0.85);
  max-width: 68ch;
}
.article-hero__meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,0.88);
}
.article-hero__views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-hero__updated {
  color: rgba(255,255,255,0.6);
  margin-left: 4px;
}

/* -------------------- Layout 2 colonnes : contenu + rail sticky -------------------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 20px;
}
@media (min-width: 1100px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    /* max-content plutôt que le "auto" implicite : empêche les lignes
       toc/sidebar de gonfler pour accompagner la hauteur du contenu, qui
       s'étend sur les deux lignes. Sans ça, les deux blocs sticky restent
       actifs simultanément sur une trop grande plage de scroll et se
       chevauchent. */
    grid-template-rows: max-content max-content;
    grid-template-areas:
      "content toc"
      "content sidebar";
    column-gap: 56px;
    align-items: start;
  }
  .article-main { grid-area: content; }
  .article-toc { grid-area: toc; }
  .article-sidebar { grid-area: sidebar; }
}

/* -------------------- Sommaire (TOC) -------------------- */
.article-toc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 18px 20px;
}
@media (min-width: 1100px) {
  .article-toc {
    position: sticky;
    top: 90px;
    margin-bottom: 24px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}
.article-toc__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}
.article-toc__toggle svg { transition: transform 0.2s ease; flex: none; }
.article-toc[data-open="true"] .article-toc__toggle svg { transform: rotate(180deg); }
.article-toc__list {
  margin-top: 14px;
  display: grid;
  gap: 4px;
  max-height: none;
  overflow: hidden;
}
@media (max-width: 1099px) {
  .article-toc__list {
    max-height: 0;
    margin-top: 0;
    transition: max-height 0.25s ease, margin-top 0.25s ease;
  }
  .article-toc[data-open="true"] .article-toc__list {
    max-height: min(60vh, 480px);
    margin-top: 14px;
    overflow-y: auto;
  }
}
.article-toc__item a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--border-soft);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.35;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-toc__item--h3 a { padding-left: 26px; font-size: 0.82rem; }
.article-toc__item a:hover { color: var(--neon-blue); }
.article-toc__item a.is-active {
  color: var(--neon-blue);
  border-left-color: var(--neon-blue);
  font-weight: 600;
}

/* -------------------- Corps de l'article -------------------- */
.article-content {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 20px 0;
  font-size: 1.08rem;
}
.article-content > *:first-child { margin-top: 0; }

.article-content h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin-top: 52px;
  margin-bottom: 6px;
  scroll-margin-top: 100px;
  line-height: 1.3;
}
.article-content h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin-top: 38px;
  scroll-margin-top: 100px;
  line-height: 1.35;
}
.article-content h4 {
  font-size: 1.05rem;
  margin-top: 28px;
  color: var(--neon-blue);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.article-content p {
  margin-top: 20px;
  color: #d8d3ee;
  line-height: 1.8;
}
.article-content ul, .article-content ol {
  margin-top: 20px;
  padding-left: 24px;
  color: #d8d3ee;
  line-height: 1.75;
}
.article-content li { margin-bottom: 10px; }
.article-content li > ul, .article-content li > ol { margin-top: 10px; }
.article-content a { color: var(--neon-blue); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--magenta); }
.article-content strong { color: var(--text); }

.article-content img,
.article-content video,
.article-content iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s);
}
.article-content figure { margin: 32px 0; }
.article-content figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.article-content blockquote {
  margin: 32px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--magenta);
  background: var(--surface);
  color: var(--text-muted);
  font-style: italic;
  font-size: 1.1rem;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.article-content blockquote p { margin-top: 0; color: inherit; }

.article-content table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 0.94rem;
  overflow-x: auto;
  display: block;
}
.article-content table th,
.article-content table td {
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  text-align: left;
}
.article-content table th {
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.article-content table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

.article-content pre {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  overflow-x: auto;
}
.article-content pre code,
.article-content code {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--neon-blue);
}
.article-content :not(pre) > code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Vidéo YouTube / oEmbed responsive (natif WordPress) */
.article-content .wp-embed-responsive .wp-block-embed__wrapper,
.article-content .video-responsive {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 32px 0;
  border-radius: var(--radius-s);
  overflow: hidden;
}
.article-content .wp-embed-responsive iframe,
.article-content .video-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-s);
}

/* Galerie */
.article-content .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 32px 0;
}
.article-content .gallery img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------- Encadrés réutilisables -------------------- */
.article-content .callout {
  margin: 32px 0;
  padding: 22px 24px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--surface);
}
.article-content .callout h3,
.article-content .callout h4 { margin-top: 0; }
.article-content .callout p:first-of-type { margin-top: 8px; }

.article-content .callout--tip {
  border-color: rgba(45,212,255,0.4);
  background: linear-gradient(150deg, rgba(45,212,255,0.08), var(--surface) 60%);
}
.article-content .callout--info {
  border-color: rgba(139,47,224,0.4);
  background: linear-gradient(150deg, rgba(139,47,224,0.1), var(--surface) 60%);
}
.article-content .callout--warning {
  border-color: rgba(255,45,149,0.45);
  background: linear-gradient(150deg, rgba(255,45,149,0.09), var(--surface) 60%);
}
.article-content .callout--deal {
  border-color: rgba(74,222,128,0.4);
  background: linear-gradient(150deg, rgba(74,222,128,0.08), var(--surface) 60%);
}
.article-content .callout__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* -------------------- FAQ (accordéon natif <details>) -------------------- */
.article-content .faq-block {
  margin: 36px 0;
  display: grid;
  gap: 10px;
}
.article-content .faq-item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 4px 20px;
  transition: border-color 0.2s ease;
}
.article-content .faq-item[open] { border-color: var(--violet); }
.article-content .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  position: relative;
  font-weight: 600;
  color: var(--text);
}
.article-content .faq-item summary::-webkit-details-marker { display: none; }
.article-content .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.3rem;
  color: var(--neon-blue);
  transition: transform 0.2s ease;
}
.article-content .faq-item[open] summary::after { transform: rotate(45deg); }
.article-content .faq-answer { padding: 0 0 18px; color: var(--text-muted); }
.article-content .faq-answer p:first-child { margin-top: 0; }

/* -------------------- Boîtes d'affiliation (rappel premium) -------------------- */
.affiliate-box { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.affiliate-box:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -20px rgba(139,47,224,0.5); }
.affiliate-box .btn { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.affiliate-box .btn:hover { transform: scale(1.03); }

/* -------------------------------------------------------------
   Encart affilié automatique (rr-affiliate-box) — nouveau système
   piloté par métadonnées (rr_affiliate_type / rr_affiliate_platform).
   Sobre par nature : pas de couleurs criardes, pas d'imitation des
   marques, cohérent avec le reste de l'identité Retro Raiders.
   ------------------------------------------------------------- */
.rr-affiliate-box {
  margin: 40px 0;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rr-affiliate-box:hover {
  transform: translateY(-2px);
}
.rr-affiliate-box__content {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rr-affiliate-box__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.rr-affiliate-box__title {
  margin-top: 8px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
}
.rr-affiliate-box__text {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 60ch;
}
.rr-affiliate-box__button {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.rr-affiliate-box__button:hover {
  transform: translateY(-2px) scale(1.02);
}
.rr-affiliate-box__disclosure {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Couleur d'accent pilotée par la plateforme, pas par le revendeur —
   chaque teinte reste discrète (jamais saturée façon pub), cohérente avec
   l'identité nuit/néon du site plutôt qu'une reprise des couleurs de marque. */

/* Nintendo — rouge discret */
.rr-affiliate-box--nintendo {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(150deg, rgba(239, 68, 68, 0.08), var(--surface) 65%);
}
.rr-affiliate-box--nintendo:hover {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 16px 40px -22px rgba(239, 68, 68, 0.4);
}
.rr-affiliate-box--nintendo .rr-affiliate-box__button {
  background: linear-gradient(90deg, #ef4444, var(--magenta));
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
}

/* Steam / PC — orange, cohérent avec la teinte "bon plan" déjà utilisée sur le site */
.rr-affiliate-box--steam {
  border-color: rgba(255, 159, 67, 0.35);
  background: linear-gradient(150deg, rgba(255, 159, 67, 0.08), var(--surface) 65%);
}
.rr-affiliate-box--steam:hover {
  border-color: rgba(255, 159, 67, 0.55);
  box-shadow: 0 16px 40px -22px rgba(255, 159, 67, 0.45);
}
.rr-affiliate-box--steam .rr-affiliate-box__button {
  background: linear-gradient(90deg, #ff9f43, var(--magenta));
  box-shadow: 0 6px 20px rgba(255, 159, 67, 0.25);
}

/* PlayStation — bleu, distinct du cyan néon déjà très présent sur le site */
.rr-affiliate-box--playstation {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(150deg, rgba(59, 130, 246, 0.09), var(--surface) 65%);
}
.rr-affiliate-box--playstation:hover {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 16px 40px -22px rgba(59, 130, 246, 0.4);
}
.rr-affiliate-box--playstation .rr-affiliate-box__button {
  background: linear-gradient(90deg, #3b82f6, var(--violet));
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
}

/* Xbox — vert */
.rr-affiliate-box--xbox {
  border-color: rgba(74, 222, 128, 0.35);
  background: linear-gradient(150deg, rgba(74, 222, 128, 0.09), var(--surface) 65%);
}
.rr-affiliate-box--xbox:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 16px 40px -22px rgba(74, 222, 128, 0.35);
}
.rr-affiliate-box--xbox .rr-affiliate-box__button {
  background: linear-gradient(90deg, #4ade80, var(--neon-blue));
  color: #0a0912;
  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.25);
}

/* Accessoires / Amazon général — repli neutre (violet, cohérent avec le
   reste du thème) pour toute plateforme sans couleur dédiée. */
.rr-affiliate-box--accessories,
.rr-affiliate-box--general {
  border-color: var(--border);
  background: linear-gradient(150deg, rgba(139, 47, 224, 0.1), var(--surface) 65%);
}
.rr-affiliate-box--accessories:hover,
.rr-affiliate-box--general:hover {
  border-color: rgba(139, 47, 224, 0.55);
  box-shadow: 0 16px 40px -22px rgba(139, 47, 224, 0.4);
}
.rr-affiliate-box--accessories .rr-affiliate-box__button,
.rr-affiliate-box--general .rr-affiliate-box__button {
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  box-shadow: 0 6px 20px rgba(139, 47, 224, 0.25);
}

/* Warhammer — même rouge que la page dédiée (assets/css/warhammer.css),
   dupliqué ici en valeur brute car ce fichier est global (chargé sur tous
   les articles) alors que warhammer.css ne charge que sur /warhammer/. */
.rr-affiliate-box--warhammer {
  border-color: rgba(214, 40, 40, 0.35);
  background: linear-gradient(150deg, rgba(214, 40, 40, 0.1), var(--surface) 65%);
}
.rr-affiliate-box--warhammer:hover {
  border-color: rgba(214, 40, 40, 0.55);
  box-shadow: 0 16px 40px -22px rgba(214, 40, 40, 0.4);
}
.rr-affiliate-box--warhammer .rr-affiliate-box__button {
  background: linear-gradient(90deg, #d62828, #8f1c1c);
  box-shadow: 0 6px 20px rgba(214, 40, 40, 0.25);
}

@media (max-width: 640px) {
  .rr-affiliate-box { margin: 28px 0; }
  .rr-affiliate-box__content { padding: 20px 18px; gap: 2px; }
  .rr-affiliate-box__title { font-size: 1.1rem; }
  .rr-affiliate-box__text { font-size: 0.9rem; }
  .rr-affiliate-box__button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
  }
  .rr-affiliate-box__disclosure { margin-top: 12px; font-size: 10px; }
}

/* -------------------------------------------------------------
   En-tête de section partagé (vidéo + fiche rapide du jeu)
   ------------------------------------------------------------- */
.rr-section-heading { margin-bottom: 18px; }
.rr-section-heading__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neon-blue);
}
.rr-section-heading__title {
  margin-top: 8px;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text);
}

/* -------------------------------------------------------------
   Vidéo officielle (YouTube, intégration respectueuse de la vie privée)
   ------------------------------------------------------------- */
.rr-article-video { margin: 40px 0; }
.rr-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}
.rr-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------------------
   Fiche rapide du jeu
   ------------------------------------------------------------- */
.rr-game-facts { margin: 40px 0; }
.rr-game-facts__grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .rr-game-facts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .rr-game-facts__grid { grid-template-columns: repeat(3, 1fr); }
}
.rr-game-facts__item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 16px 18px;
}
.rr-game-facts__item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.rr-game-facts__item dd {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.5;
  word-break: break-word;
}

/* -------------------------------------------------------------
   Bloc "À retenir"
   ------------------------------------------------------------- */
.rr-key-points {
  margin: 40px 0;
  padding: 24px 26px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: linear-gradient(150deg, rgba(139,47,224,0.1), var(--bg-elevated) 65%);
}
.rr-key-points__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--magenta);
}
.rr-key-points__title {
  margin-top: 8px;
  font-size: 1.2rem;
  color: var(--text);
}
.rr-key-points__list {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.rr-key-points__list li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.5;
}
.rr-key-points__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(45, 212, 255, 0.12);
  border: 1px solid rgba(45, 212, 255, 0.4);
}
.rr-key-points__list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--neon-blue);
  border-bottom: 2px solid var(--neon-blue);
  transform: rotate(-45deg);
}

@media (max-width: 480px) {
  .rr-key-points { padding: 20px 20px; }
}

/* -------------------- Partage -------------------- */
.article-share {
  margin-top: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.article-share__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn--facebook:hover { background: #1877f2; }
.share-btn--x:hover { background: #000; }
.share-btn--reddit:hover { background: #ff4500; }
.share-btn--discord:hover { background: #5865f2; }
.share-btn--copy {
  width: auto;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.share-btn--copy:hover { background: var(--violet); }
.share-btn--copy.is-copied { background: var(--success); border-color: var(--success); }
.share-btn__copy-label { white-space: nowrap; }

/* Variante utilisée en pied d'article (fond clair du thème, pas sur l'image du hero) */
.article-content + .article-share,
.article-main .article-share {
  margin-top: 40px;
}
.article-main .share-btn {
  background: var(--bg-elevated);
  border-color: var(--border-soft);
  color: var(--text);
}
.article-main .article-share__label { color: var(--text-dim); }

/* -------------------- Carte auteur -------------------- */
/* -------------------- Tags / balises -------------------- */
.article-tags {
  margin-top: 40px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-tags a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 14px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-tags a:hover {
  color: var(--neon-blue);
  border-color: var(--neon-blue);
}

.author-card {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.author-card__avatar { border-radius: 50%; flex: none; }
.author-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.author-card__name { margin-top: 4px; font-weight: 700; font-size: 1.05rem; }
.author-card__bio { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; max-width: 56ch; }
.author-card__link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--neon-blue);
}
.author-card__link:hover { color: var(--magenta); }

/* -------------------- Articles similaires -------------------- */
.related-posts { padding-top: 0; }

/* -------------------- Commentaires -------------------- */
.comments-area {
  margin-top: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}
.comments-area__title { font-size: 1.3rem; }
.comment-list { margin-top: 24px; list-style: none; padding: 0; display: grid; gap: 20px; }
.comment-list .children { list-style: none; margin-top: 20px; padding-left: 28px; display: grid; gap: 20px; border-left: 2px solid var(--border-soft); }
.comment-body {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 18px 20px;
}
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 700; font-size: 0.94rem; }
.comment-metadata { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.comment-content { margin-top: 12px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.comment-content p { margin-top: 10px; }
.comment-content p:first-child { margin-top: 0; }
.reply { margin-top: 10px; }
.comment-reply-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--neon-blue);
  text-transform: uppercase;
}
.comments-area__closed { margin-top: 20px; color: var(--text-dim); font-size: 0.92rem; }

.comment-respond { margin-top: 36px; }
.comment-reply-title { font-size: 1.15rem; }
#commentform .field { margin-top: 16px; }
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
#commentform textarea { min-height: 130px; resize: vertical; }
#commentform input:focus, #commentform textarea:focus { border-color: var(--neon-blue); }
#commentform .form-submit { margin-top: 18px; }

/* -------------------- Sidebar -------------------- */
.article-sidebar { display: none; }
@media (min-width: 1100px) {
  .article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: 10px;
  }
}
/* Sur mobile/tablette, la sidebar repasse sous l'article en flux normal */
@media (max-width: 1099px) {
  .article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
  }
}

.sidebar-block {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 20px;
}
.sidebar-block__title {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.sidebar-search { display: flex; gap: 8px; }
.sidebar-search input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.9rem;
}
.sidebar-search input:focus { border-color: var(--neon-blue); }
.sidebar-search button {
  flex: none;
  width: 40px;
  background: var(--violet);
  border: none;
  border-radius: var(--radius-s);
  color: #fff;
  cursor: pointer;
}

.sidebar-list { display: grid; gap: 4px; }
.sidebar-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-radius: var(--radius-s);
  transition: background 0.15s ease;
}
.sidebar-list__item:hover { background: var(--bg-elevated); }
.sidebar-list__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--magenta);
  width: 18px;
}
.sidebar-list__text { font-size: 0.88rem; color: var(--text-muted); line-height: 1.35; }
.sidebar-list--categories .sidebar-list__item { justify-content: space-between; }
.sidebar-list__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.sidebar-block__more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neon-blue);
}
.sidebar-block__more:hover { color: var(--magenta); }

.sidebar-block--guide {
  border-color: var(--border);
  background: linear-gradient(150deg, rgba(139,47,224,0.1), var(--surface) 60%);
}
.sidebar-guide__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-s);
  margin-bottom: 12px;
}
.sidebar-guide__title { font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.4; }

/* -------------------- Breadcrumb -------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 18px 0 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--neon-blue); }

/* -------------------- Footer -------------------- */
.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--border-soft);
  padding: 44px 0 30px;
  background: var(--bg-elevated);
}
.footer-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid a:hover { color: var(--neon-blue); }
.footer-brand p { margin-top: 12px; color: var(--text-muted); max-width: 42ch; font-size: 0.92rem; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* -------------------- Pagination blog -------------------- */
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.pagination a, .pagination span {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  color: var(--text-muted);
}
.pagination a:hover { border-color: var(--neon-blue); color: var(--neon-blue); }
.pagination .is-current { border-color: var(--magenta); color: var(--text); }

/* -------------------- Divers -------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------- Compatibilité WordPress core -------------------- */
.alignleft { float: left; margin: 6px 24px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 24px; }
.aligncenter { display: block; margin: 20px auto; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.sticky { border-color: var(--magenta) !important; }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 24px 0; }
.article-content img { border-radius: var(--radius-s); margin: 20px 0; }
.article-content figure { margin: 26px 0; }
.wp-block-quote, .article-content blockquote { border-left: 3px solid var(--magenta); background: var(--surface); padding: 18px 20px; color: var(--text-muted); font-style: italic; }

/* Pagination WordPress native (the_posts_pagination) */
.nav-links { display: flex; gap: 10px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.nav-links .page-numbers {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  color: var(--text-muted);
}
.nav-links .page-numbers:hover { border-color: var(--neon-blue); color: var(--neon-blue); }
.nav-links .page-numbers.current { border-color: var(--magenta); color: var(--text); }

/* Formulaire de commentaires natif (désactivé par défaut sur les articles, gardé pour compatibilité) */
.comment-form .field { margin-bottom: 18px; }

/* Logo personnalisé (Apparence > Personnaliser > Identité du site) */
.logo-custom img { max-height: 50px; width: auto; }

/* -------------------------------------------------------------
   Boîtes d'affiliation réutilisables
   ------------------------------------------------------------- */
.affiliate-box {
  position: relative;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
}
.affiliate-box .affiliate-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.affiliate-box h3 { font-size: 1.15rem; }
.affiliate-box p { color: var(--text-muted); font-size: 0.94rem; }
.affiliate-box .btn { align-self: flex-start; margin-top: 6px; }
.affiliate-box .affiliate-disclosure {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
}

.affiliate-box--instant-gaming {
  border-color: rgba(45, 212, 255, 0.45);
  background: linear-gradient(150deg, rgba(45,212,255,0.10), var(--surface) 60%);
}
.affiliate-box--instant-gaming .affiliate-kicker { color: var(--neon-blue); }
.affiliate-box--instant-gaming .btn { background: linear-gradient(90deg, var(--neon-blue), var(--violet)); color: #0a0912; font-weight: 700; box-shadow: 0 6px 20px rgba(45,212,255,0.25); }

.affiliate-box--amazon {
  border-color: rgba(255, 199, 0, 0.4);
  background: linear-gradient(150deg, rgba(255,199,0,0.09), var(--surface) 60%);
}
.affiliate-box--amazon .affiliate-kicker { color: #ffc700; }
.affiliate-box--amazon .btn { background: linear-gradient(90deg, #ffc700, var(--magenta)); color: #0a0912; font-weight: 700; box-shadow: 0 6px 20px rgba(255,199,0,0.2); }

.affiliate-row {
  margin-top: 32px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .affiliate-row { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------
   Section boutique physique
   ------------------------------------------------------------- */
.shop-section {
  display: grid;
  gap: 28px;
  margin-top: 32px;
}
@media (min-width: 900px) { .shop-section { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; } }

.shop-visual {
  border-radius: var(--radius-m);
  border: 1px solid var(--border-soft);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px),
    linear-gradient(150deg, var(--surface-2), var(--bg-elevated));
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.shop-visual svg { width: 100%; max-width: 220px; color: var(--neon-blue); opacity: 0.9; }

.shop-info { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.shop-info .info-list { display: grid; gap: 14px; }

/* -------------------------------------------------------------
   Section réparations récentes
   ------------------------------------------------------------- */
.repair-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 22px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.repair-card:hover { transform: translateY(-4px); border-color: var(--neon-blue); }
.repair-card .repair-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neon-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.repair-card h3 { margin-top: 10px; font-size: 1.05rem; }
.repair-card p { margin-top: 10px; color: var(--text-muted); font-size: 0.92rem; }
.repair-card .repair-date { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* -------------------------------------------------------------
   Bloc Gutenberg "Retro Raiders — Derniers articles"
   ------------------------------------------------------------- */
.rr-block-latest-articles { margin: 32px 0; }
.rr-block-empty {
  padding: 20px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-s);
  color: var(--text-dim);
  font-size: 0.9rem;
  text-align: center;
}

/* -------------------------------------------------------------
   Guide associé — carte éditoriale, distincte des encarts d'affiliation
   (violet/cyan plutôt que les teintes par plateforme de l'affiliation).
   ------------------------------------------------------------- */
.rr-related-guide {
  margin: 36px 0;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(139,47,224,0.14), rgba(45,212,255,0.08));
  overflow: hidden;
}
.rr-related-guide__content {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rr-related-guide__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neon-blue);
}
.rr-related-guide__title {
  margin-top: 8px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
}
.rr-related-guide__text {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 60ch;
}
.rr-related-guide .btn {
  align-self: flex-start;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .rr-related-guide__content { padding: 20px 18px; }
  .rr-related-guide .btn { width: 100%; justify-content: center; }
}