/* NeuroHack Theme - Cyberpunk Style */

/* Import des polices hacker */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Variables CSS Cyberpunk */
:root {
  /* Couleurs néon */
  --neon-green: #00ff41;
  --neon-pink: #ff0080;
  --neon-cyan: #00d4ff;
  --neon-orange: #ffaa00;
  --neon-purple: #8b00ff;
  
  /* Couleurs de base */
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --bg-card: rgba(17, 17, 17, 0.9);
  --bg-glass: rgba(0, 255, 65, 0.05);
  
  /* Texte */
  --text-primary: #00ff41;
  --text-secondary: #a0ffa0;
  --text-muted: #666666;
  --text-inverse: #000000;
  
  /* Bordures */
  --border-neon: 1px solid var(--neon-green);
  --border-subtle: 1px solid #333333;
  --border-glow: 0 0 10px var(--neon-green);
  
  /* Ombres */
  --shadow-neon: 0 0 20px rgba(0, 255, 65, 0.5);
  --shadow-pink: 0 0 20px rgba(255, 0, 128, 0.5);
  --shadow-cyan: 0 0 20px rgba(0, 212, 255, 0.5);
  
  /* Polices */
  --font-primary: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'Courier New', monospace;
  --font-display: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Animations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* Reset et base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 14px;
  overflow-x: hidden;
  position: relative;
}

/* Effet Matrix en arrière-plan */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* DERRIÈRE le contenu principal pour ne pas gêner */
  opacity: 0.8; /* Peut être plus opaque maintenant qu'il est derrière */
  pointer-events: none;
  display: block;
  overflow: hidden;
}

/* Matrix plus visible en mode terminal */
.terminal-mode .matrix-bg {
  z-index: 5; /* Même niveau devant */
  opacity: 0.7; /* Visible en mode terminal */
}

.matrix-column {
  position: absolute;
  top: -300px;
  color: var(--neon-green);
  font-family: var(--font-primary);
  font-size: 16px; /* Plus gros par défaut */
  white-space: pre-line;
  animation: matrix-fall linear infinite;
  line-height: 1.2;
  will-change: transform;
  text-shadow: 0 0 5px var(--neon-green); /* Ajout d'une lueur */
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-300px);
    opacity: 1;
  }
  20% {
    opacity: 1; /* Reste parfaitement visible */
  }
  80% {
    opacity: 1; /* Toujours visible */
  }
  95% {
    opacity: 0.8; /* Commence à disparaître très tard */
  }
  100% {
    transform: translateY(calc(100vh + 300px));
    opacity: 0;
  }
}

/* Code binaire en arrière-plan */
.binary-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Au-dessus de Matrix (-1) mais sous le contenu */
  opacity: 0.3; /* Légèrement réduit car au-dessus de Matrix */
  font-family: var(--font-primary);
  font-size: 12px; /* Légèrement plus grand */
  color: var(--neon-green);
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.binary-line {
  position: absolute;
  white-space: nowrap;
  animation: binary-scroll 20s linear infinite;
}

@keyframes binary-scroll {
  0% {
    transform: translateX(100vw); /* Commence complètement à droite de l'écran */
  }
  100% {
    transform: translateX(-100%); /* Sort complètement à gauche */
  }
}

/* Lignes de scan CRT */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  background: linear-gradient(
    transparent 50%, 
    rgba(0, 255, 65, 0.05) 50%
  );
  background-size: 100% 4px;
  animation: scanlines 0.1s linear infinite;
  display: block;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* ===============================
   STYLES DES LIENS TERMINAL RÉTRO
   =============================== */

/* Styles de base pour tous les liens */
a {
  color: var(--neon-green);
  text-decoration: none;
  position: relative;
  transition: all var(--transition-normal);
  border-radius: 2px;
}

/* Liens par défaut avec effet néon */
a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a) {
  text-shadow: 0 0 5px currentColor;
}

a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a):hover {
  text-shadow: 0 0 10px currentColor;
  filter: brightness(1.2);
}

/* Style terminal rétro (activé par classe sur body) */
.terminal-links-active a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a) {
  background: var(--link-highlight-color);
  color: var(--link-text-color);
  padding: 2px 4px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(0, 20, 0, 0.3);
  font-family: var(--font-primary);
  letter-spacing: 0.3px;
}

/* États hover et focus pour style terminal */
.terminal-links-active a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a):hover,
.terminal-links-active a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a):focus {
  background: color-mix(in srgb, var(--link-highlight-color) 90%, #ffffff 10%);
  color: var(--link-text-color);
  box-shadow: 
    inset 0 0 0 1px rgba(0, 20, 0, 0.5),
    0 0 15px var(--link-highlight-color),
    0 0 5px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  text-shadow: none;
}

/* Animation de scintillement pour style terminal */
.terminal-links-active a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a):hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: terminal-link-shine 0.6s ease-out;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

@keyframes terminal-link-shine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Liens dans le contenu avec style terminal */
.terminal-links-active .post-content a,
.terminal-links-active .page-content a {
  font-family: var(--font-primary);
  letter-spacing: 0.5px;
}

/* Style spécial pour les liens dans les blocs de code */
code a,
pre a {
  background: rgba(0, 255, 65, 0.2) !important;
  color: var(--neon-green) !important;
  padding: 1px 3px !important;
  border-radius: 3px;
  font-family: inherit;
}

/* Liens visités avec style terminal */
.terminal-links-active a:visited:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a) {
  background: color-mix(in srgb, var(--link-highlight-color) 70%, #666666 30%);
  color: color-mix(in srgb, var(--link-text-color) 80%, #000000 20%);
}

/* Fallback pour navigateurs ne supportant pas color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue 50%)) {
  .terminal-links-active a:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a):hover {
    background: var(--link-highlight-color);
    filter: brightness(1.1) saturate(1.1);
  }
  
  .terminal-links-active a:visited:not(.nav-menu a):not(.social-link):not(.logo a):not(.article-title a) {
    background: var(--link-highlight-color);
    opacity: 0.8;
  }
}

/* ===============================
   FIN STYLES LIENS TERMINAL RÉTRO
   =============================== */

/* Layout principal */
#wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar hacker */
#sidebar {
  width: 300px;
  background: linear-gradient(135deg, rgba(17, 17, 17, 0.9) 0%, rgba(13, 17, 23, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-right: var(--border-neon);
  box-shadow: inset -1px 0 0 rgba(0, 255, 65, 0.2);
  position: static; /* Position normale, défile avec la page */
  height: auto; /* Hauteur automatique selon le contenu */
  min-height: 100vh; /* Au minimum la hauteur de l'écran */
  overflow-y: visible; /* Pas de scrollbar interne */
  z-index: 15; /* AU-DESSUS de Matrix pour rester lisible */
  transform: translateX(0);
  transition: transform var(--transition-normal);
}

.sidebar-content {
  padding: 1.5rem;
}

/* Logo/Titre avec effet glitch */
.site-title, .typing, .post-title, .terminal-title {
  position: relative; /* Nécessaire pour les pseudo-éléments */
}

.site-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--neon-green);
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Effet glitch ponctuel - non permanent */
.glitch {
  position: relative;
  color: var(--text-color);
}

.glitch.active {
  animation: glitch-main 0.5s ease-in-out;
}

.glitch.active::before,
.glitch.active::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.glitch.active::before {
  color: var(--neon-pink);
  text-shadow: -2px 0 var(--neon-pink);
  animation: glitch-noise-1 0.5s ease-in-out;
  left: -2px;
  z-index: 1;
}

.glitch.active::after {
  color: var(--neon-cyan);
  text-shadow: 2px 0 var(--neon-cyan);
  animation: glitch-noise-2 0.5s ease-in-out;
  left: 2px;
  z-index: 2;
}

@keyframes glitch-main {
  0% { transform: rotateX(0deg) skewX(0deg); }
  10% { transform: rotateX(10deg) skewX(70deg); }
  20% { transform: rotateX(0deg) skewX(0deg); }
  30% { transform: rotateX(5deg) skewX(40deg); }
  40% { transform: rotateX(0deg) skewX(0deg); }
  50% { transform: rotateX(15deg) skewX(80deg); }
  60% { transform: rotateX(0deg) skewX(0deg); }
  100% { transform: rotateX(0deg) skewX(0deg); }
}

@keyframes glitch-noise-1 {
  0% { clip-path: inset(40% 0 61% 0); }
  20% { clip-path: inset(92% 0 1% 0); }
  40% { clip-path: inset(43% 0 1% 0); }
  60% { clip-path: inset(25% 0 58% 0); }
  80% { clip-path: inset(54% 0 7% 0); }
  100% { clip-path: inset(0% 0 0% 0); }
}

@keyframes glitch-noise-2 {
  0% { clip-path: inset(26% 0 46% 0); }
  20% { clip-path: inset(22% 0 5% 0); }
  40% { clip-path: inset(91% 0 2% 0); }
  60% { clip-path: inset(88% 0 4% 0); }
  80% { clip-path: inset(84% 0 10% 0); }
  100% { clip-path: inset(0% 0 0% 0); }
}

/* Effet Cyberpunk 2077 authentique - Reverse Engineering du code source */
.cyberpunk-glitch-effect {
  --primary: transparent;
  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
  --primary-hue: 0;
  --primary-lightness: 50;
  --color: hsl(0, 0%, 100%);
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
  --border: 4px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  
  /* Bouton de base - TRANSPARENT comme vous voulez */
  color: var(--color);
  cursor: pointer;
  background: transparent;
  text-transform: uppercase;
  outline: transparent;
  letter-spacing: 2px;
  position: relative;
  font-weight: 700;
  border: 0;
  min-width: 120px;
  height: 40px;
  line-height: 40px;
  transition: background 0.2s;
  display: inline-block;
  padding: 0.5rem 1rem;
}

.cyberpunk-glitch-effect:hover {
  --primary: transparent;
}

.cyberpunk-glitch-effect:active {
  --primary: transparent;
}

/* Pseudo-éléments pour créer le contour cyberpunk permanent */
.cyberpunk-glitch-effect:after,
.cyberpunk-glitch-effect:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

/* Contour principal cyan */
.cyberpunk-glitch-effect:before {
  background: var(--shadow-primary);
  transform: translate(0, 0);
}

/* Intérieur transparent qui masque le centre */
.cyberpunk-glitch-effect:after {
  background: var(--bg-primary, #1a1a1a);
  transform: translate(2px, 2px);
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
}

/* Layer de glitch - exactement comme l'original */
.cyberpunk-glitch-layer {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: rgba(0, 255, 255, 0.1);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
  z-index: 1;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  min-width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: left;
}

.cyberpunk-glitch-layer:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: transparent;
  z-index: -1;
}

/* Animation déclenchée au hover - CSS pur comme l'original */
.cyberpunk-glitch-effect:hover .cyberpunk-glitch-layer {
  display: block;
}

/* Animation glitch - exactement copiée de l'original */
@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }
  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }
  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }
  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }
  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }
  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }
  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }
  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}

/* Statistiques hacker */
.hacker-stats {
  background: var(--bg-glass);
  border: var(--border-neon);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(5px);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 12px;
  font-family: var(--font-primary);
}

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

.stat-value {
  color: var(--neon-green);
  font-weight: 600;
}

.stat-value.warning {
  color: var(--neon-orange);
}

.stat-value.critical {
  color: var(--neon-pink);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Horloge système */
.system-clock {
  text-align: center;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--neon-cyan);
  border: var(--border-subtle);
  border-radius: 4px;
  padding: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(0, 212, 255, 0.05);
}

.clock-date {
  font-size: 12px;
  opacity: 0.8;
}

/* Menu navigation */
.nav-menu {
  list-style: none;
  margin-bottom: 2rem;
}

.nav-menu li {
  margin-bottom: 0.5rem;
}

.nav-menu a {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  transition: all var(--transition-fast);
  font-family: var(--font-primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.nav-menu a::before {
  content: '> ';
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.active {
  background: var(--bg-glass);
  color: var(--neon-green);
  border-left: 3px solid var(--neon-green);
  box-shadow: var(--border-glow);
  transform: translateX(5px);
}

.nav-menu a:hover::before,
.nav-menu a.active::before {
  opacity: 1;
}

/* Styles pour les éléments du menu */
.menu-icon {
  color: var(--neon-green);
  margin-right: 0.5rem;
  font-family: monospace;
}
/* === Overrides visibilité boutons de partage ===
  Un CSS externe (probablement script de consentement / extension) applique
  display:none !important sur .post-share, .share-buttons, .share-btn.
  On rétablit l'affichage ici avec une spécificité supérieure + !important. */
/* Nouveau namespace pour éviter conflits: nh-share */
.nh-share { margin-bottom:2rem; }
.nh-share-buttons { display:flex; flex-wrap:wrap; gap:1rem; }
.nh-share-btn { display:inline-flex; align-items:center; gap:0.5rem; background:transparent; border:var(--border-subtle); color:var(--text-secondary); padding:0.8rem 1.5rem; border-radius:4px; font-family:var(--font-primary); font-size:13px; cursor:pointer; transition:all var(--transition-fast); }
.nh-share-btn:hover { border-color:var(--neon-green); color:var(--neon-green); box-shadow:0 0 10px rgba(0,255,65,0.3); }
.nh-share-btn.nh-twitter:hover { border-color:#1da1f2; color:#1da1f2; box-shadow:0 0 10px rgba(29,161,242,0.3); }
.nh-share-btn.nh-linkedin:hover { border-color:#0077b5; color:#0077b5; box-shadow:0 0 10px rgba(0,119,181,0.3); }
.nh-share-btn.nh-telegram:hover { border-color:#0088cc; color:#0088cc; box-shadow:0 0 10px rgba(0,136,204,0.3); }

.menu-text {
  color: inherit;
}

.menu-scan {
  margin-left: auto;
  opacity: 0;
  color: var(--neon-cyan);
  transition: opacity var(--transition-fast);
  font-size: 10px;
}

.nav-menu a:hover .menu-scan {
  opacity: 1;
}

.nav-menu a:hover .menu-scan::after {
  content: '[OK]';
}

/* Liens sociaux style terminal */
.social-links {
  border-top: var(--border-subtle);
  padding-top: 1.5rem;
}

.social-links h3 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 0.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-subtle);
  border-radius: 4px;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  text-decoration: none;
  font-size: 16px;
}

.social-link:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: var(--border-glow);
  transform: scale(1.1);
}

.social-link.github:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: var(--shadow-cyan);
}

.social-link.discord:hover {
  border-color: var(--neon-purple);
  color: var(--neon-purple);
  box-shadow: 0 0 20px rgba(139, 0, 255, 0.5);
}

.social-link.mastodon:hover {
  border-color: #6364ff;
  color: #6364ff;
  box-shadow: 0 0 20px rgba(99, 100, 255, 0.5);
}

.social-link.twitter:hover {
  border-color: #1da1f2;
  color: #1da1f2;
  box-shadow: 0 0 20px rgba(29, 161, 242, 0.3);
}

.social-link.linkedin:hover {
  border-color: #0077b5;
  color: #0077b5;
  box-shadow: 0 0 20px rgba(0, 119, 181, 0.3);
}

.social-link.telegram:hover {
  border-color: #0088cc;
  color: #0088cc;
  box-shadow: 0 0 20px rgba(0, 136, 204, 0.3);
}

/* Contenu principal */
#main {
  flex: 1;
  margin-left: 0; /* Supprime la marge pour coller à la sidebar */
  min-height: 100vh;
  position: relative;
  z-index: 1; /* EN DESSOUS de Matrix */
}

/* Fond sombre uniquement pour les articles et pages */
.post-single,
.page-single {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 2rem;
  margin: 1rem 0; /* Supprime les marges latérales */
  width: calc(100% - 2rem); /* Utilise toute la largeur disponible moins un peu d'espace */
}

.inner {
  padding: 2rem;
  max-width: var(--content-width, 1200px); /* Largeur configurable depuis le thème */
  margin: 0 auto; /* Centrage automatique avec marges égales */
  text-align: left;
}

/* Header du contenu */
#header {
  border-bottom: var(--border-subtle);
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  position: relative;
}

/* Styles pour le logo */
#header .logo {
  display: block;
  margin-bottom: 1.5rem;
}

#header .logo img {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
}

#header .logo img:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
  transform: scale(1.02);
}

#header h1 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--neon-green);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
}

#header .subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  font-style: italic;
}

/* Terminal prompt - uniquement en mode terminal */
.terminal-mode .terminal-prompt {
  font-family: var(--font-primary);
  color: var(--neon-green);
  font-size: 14px;
  margin-bottom: 1rem;
}

.terminal-mode .terminal-prompt::before {
  content: '[singe@quantique ~]$ ';
  color: var(--neon-cyan);
}

/* Style normal pour le prompt quand terminal-mode est désactivé */
.normal-prompt {
  font-family: var(--font-primary);
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 1rem;
  font-style: italic;
}

.terminal-prompt {
  font-family: var(--font-primary);
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 1rem;
  font-style: italic;
}

/* Articles */
.article-card {
  background: rgba(17, 17, 17, 0.4); /* Plus transparent */
  backdrop-filter: none; /* Pas de flou pour voir Matrix devant */
  border: var(--border-subtle);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  z-index: 1; /* En dessous de Matrix */
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan), var(--neon-pink));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.article-card:hover {
  border-color: var(--neon-green);
  box-shadow: var(--shadow-neon);
  transform: translateY(-5px);
}

.article-card:hover::before {
  opacity: 1;
}

.article-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--neon-green);
}

.article-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article-title a:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px currentColor;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-primary);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-item::before {
  content: '▶';
  color: var(--neon-green);
  font-size: 8px;
}

.article-excerpt {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background: rgba(0, 255, 65, 0.1);
  color: var(--neon-green);
  padding: 0.25rem 0.8rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 65, 0.3);
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
}

.tag:hover {
  background: rgba(0, 255, 65, 0.2);
  border-color: var(--neon-green);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

/* Boutons style hacker */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: transparent;
  border: var(--border-neon);
  color: var(--neon-green);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
  transition: left var(--transition-normal);
}

.btn:hover {
  box-shadow: var(--border-glow);
  color: #000000 !important; /* Force le texte noir - priorité absolue */
  background: var(--neon-green);
}

.btn:hover::before {
  left: 100%;
}

.btn.secondary {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.btn.secondary:hover {
  background: var(--neon-cyan);
  box-shadow: var(--shadow-cyan);
}

.btn.warning {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
}

.btn.warning:hover {
  background: var(--neon-orange);
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.5);
}

/* Pagination cyberpunk */
.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
}

.pagination .btn {
  min-width: 50px;
  text-align: center;
}

.pagination .current {
  background: var(--neon-green);
  color: var(--bg-primary);
  box-shadow: var(--shadow-neon);
}

/* Mode terminal */
.terminal-mode {
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent pour voir Matrix derrière */
  color: var(--neon-green);
}

.terminal-mode .article-card {
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent aussi */
  border: 1px solid #333333;
  border-radius: 0;
  position: relative;
  z-index: 10; /* Au-dessus de Matrix */
}

.terminal-mode .article-title::before {
  content: '> ';
  color: var(--neon-cyan);
}

/* Contenu principal au-dessus de Matrix */
.terminal-mode #main,
.terminal-mode #sidebar {
  position: relative;
  z-index: 10;
}

/* Curseur clignotant uniquement en mode terminal */
.terminal-mode .cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
  #wrapper {
    flex-direction: column; /* Stack sidebar et main verticalement sur mobile */
  }
  
  #sidebar {
    width: 100%; /* Pleine largeur sur mobile */
    min-height: auto; /* Hauteur automatique sur mobile */
    transform: none; /* Pas de transformation sur mobile */
    position: static; /* Position normale sur mobile aussi */
  }
  
  #sidebar.active {
    transform: none; /* Supprime les transformations */
  }
  
  #main {
    margin-left: 0;
  }
  
  .inner {
    padding: 1rem;
    max-width: none; /* Sur mobile, utilise toute la largeur */
    margin: 0 1rem; /* Petites marges sur mobile */
  }
  
  .post-single,
  .page-single {
    margin: 0.5rem 0; /* Supprime les marges latérales sur mobile */
    padding: 1.5rem;
    width: calc(100% - 1rem); /* Ajuste la largeur sur mobile */
  }
  
  .inner {
    padding: 1rem;
    max-width: none; /* Sur très petits écrans, utilise toute la largeur */
    margin: 0 1rem; /* Petites marges sur très petits écrans */
  }
  
  #header h1 {
    font-size: 2rem;
  }
  
  .menu-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 2001;
    background: var(--bg-secondary);
    border: var(--border-neon);
    color: var(--neon-green);
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  
  .menu-toggle:hover {
    box-shadow: var(--border-glow);
  }
}

@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}

/* Animations d'entrée */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.6s ease forwards;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Effet de typing */
.typing {
  overflow: hidden;
  border-right: 2px solid var(--neon-green);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--neon-green); }
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--neon-green);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}

/* Sélection de texte */
::selection {
  background: var(--neon-green);
  color: var(--bg-primary);
}

::-moz-selection {
  background: var(--neon-green);
  color: var(--bg-primary);
}

/* Style des parenthèses humoristiques dans les articles */
.parentheses-highlight {
  color: var(--parentheses-color, #0b7e39); /* Vert par défaut si variable non définie */
  font-style: italic;
  opacity: 0.9;
  transition: all var(--transition-fast);
  position: relative;
}

.parentheses-highlight:hover {
  opacity: 1;
  text-shadow: 0 0 8px currentColor;
  transform: scale(1.02);
}

/* Animation subtile pour les parenthèses */
.parentheses-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  background: linear-gradient(45deg, transparent 40%, currentColor 50%, transparent 60%);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-fast);
}

.parentheses-highlight:hover::before {
  opacity: 0.1;
}

/* Responsive pour les parenthèses */
@media (max-width: 768px) {
  .parentheses-highlight {
    font-size: 0.95em;
  }
}

/* =================================
   AMÉLIORATION AFFICHAGE SOURCES
   ================================= */

/* Formatage des lignes de sources individuelles */
.source-line {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  padding-left: 0.5rem;
  border-left: 2px solid var(--neon-green);
  color: var(--text-light);
  font-size: 0.9rem;
}

/* Style spécial pour les éléments avec tooltip JS uniquement */
[data-tooltip] {
  cursor: help;
}

.source-line:last-child {
  margin-bottom: 0;
}

/* Animation d'apparition pour les sources */
.source-line {
  opacity: 0;
  animation: sourceAppear 0.5s ease forwards;
}

.source-line:nth-child(1) { animation-delay: 0.1s; }
.source-line:nth-child(2) { animation-delay: 0.2s; }
.source-line:nth-child(3) { animation-delay: 0.3s; }
.source-line:nth-child(4) { animation-delay: 0.4s; }
.source-line:nth-child(5) { animation-delay: 0.5s; }
.source-line:nth-child(6) { animation-delay: 0.6s; }

@keyframes sourceAppear {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Amélioration du container source-text */
.source-text {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

/* Responsive pour les sources */
@media (max-width: 768px) {
  .source-line {
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
  }
}

.fullwidth-audio {
  display: block;     
  width: 100%;
  max-width: 100%;
}

/* =============================================================================
   ACCORDÉONS CYBERPUNK - Éléments <details>
   ============================================================================= */

/* Conteneur principal de l'accordéon */
details {
  margin: 1.5rem 0;
  background: var(--bg-secondary);
  border: 1px solid var(--neon-green);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 
    0 0 10px rgba(0, 255, 65, 0.2),
    inset 0 0 20px rgba(0, 255, 65, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

/* Effet de lueur quand ouvert */
details[open] {
  background: rgba(0, 255, 65, 0.03);
  border-color: var(--neon-cyan);
  box-shadow: 
    0 0 20px rgba(0, 212, 255, 0.3),
    inset 0 0 30px rgba(0, 212, 255, 0.08);
}

/* Barre néon animée en haut */
details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--neon-green), 
    var(--neon-cyan), 
    var(--neon-green), 
    transparent
  );
  background-size: 200% 100%;
  animation: neon-flow 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

details[open]::before {
  opacity: 1;
}

/* Titre cliquable */
summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-primary);
  color: var(--neon-green);
  padding: 1.2rem 1.5rem;
  margin: 0;
  outline: none;
  list-style: none;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 255, 65, 0.2);
  transition: all 0.3s ease;
  user-select: none;
}

/* Suppression des chevrons natifs */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  display: none;
  content: '';
}

/* Effet hover sur le summary */
summary:hover {
  background: rgba(0, 255, 65, 0.08);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px currentColor;
}

/* Chevron personnalisé cyberpunk */
summary::after {
  content: '⟩';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--neon-cyan);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 0 6px currentColor;
  font-family: 'Fira Code', monospace;
}

/* Rotation du chevron quand ouvert */
details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
  color: var(--neon-green);
}

/* Effet de scan line sur le summary */
summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 65, 0.1), 
    transparent
  );
  transition: left 0.5s ease;
}

summary:hover::before {
  left: 100%;
}

/* Contenu de l'accordéon */
details[open] summary {
  border-bottom-color: var(--neon-cyan);
  background: rgba(0, 212, 255, 0.05);
}

/* Zone de contenu */
details > *:not(summary) {
  padding: 1.5rem;
  margin: 0;
  background: rgba(0, 0, 0, 0.3);
  animation: accordion-expand 0.3s ease-out;
}

/* Animation d'ouverture */
@keyframes accordion-expand {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style pour le contenu texte */
details p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

details p:last-child {
  margin-bottom: 0;
}

/* Support pour les listes dans les accordéons */
details ul,
details ol {
  color: var(--text-secondary);
  padding-left: 1.5rem;
}

details li {
  margin-bottom: 0.5rem;
}

/* Support pour les liens dans les accordéons */
details a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

details a:hover {
  color: var(--neon-green);
  border-bottom-color: var(--neon-green);
  text-shadow: 0 0 4px currentColor;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  details {
    margin: 1rem 0;
  }
  
  summary {
    padding: 1rem 1.2rem;
    font-size: 0.95rem;
  }
  
  summary::after {
    right: 1.2rem;
    font-size: 1rem;
  }
  
  details > *:not(summary) {
    padding: 1.2rem;
  }
}

/* Accordéons imbriqués */
details details {
  margin: 1rem 0;
  border-color: rgba(0, 255, 65, 0.4);
}

details details summary {
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.4);
}

details details[open] {
  border-color: rgba(255, 170, 0, 0.6);
}

details details[open] summary {
  color: var(--neon-orange);
  border-bottom-color: rgba(255, 170, 0, 0.3);
}

/* =============================================================================
   ANIMATIONS CYBERPUNK pour les accordéons
   ============================================================================= */

/* Animation de la barre néon qui parcourt */
@keyframes neon-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Animation de clignotement néon */
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.7;
  }
}

/* Animation de pulsation douce */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(0, 255, 65, 0.2),
      inset 0 0 20px rgba(0, 255, 65, 0.05);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(0, 255, 65, 0.4),
      inset 0 0 30px rgba(0, 255, 65, 0.1);
  }
}

/* Amélioration des effets visuels pour une meilleure visibilité */
details:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 25px rgba(0, 255, 65, 0.3),
    inset 0 0 25px rgba(0, 255, 65, 0.1);
}

/* Effet de glitch subtil au clic */
details[open] {
  animation: accordion-glitch 0.2s ease-out;
}

@keyframes accordion-glitch {
  0% { 
    transform: translateX(0); 
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: translateX(-2px); 
    filter: hue-rotate(90deg);
  }
  75% { 
    transform: translateX(2px); 
    filter: hue-rotate(-90deg);
  }
  100% { 
    transform: translateX(0); 
    filter: hue-rotate(0deg);
  }
}

/* Amélioration de l'effet scan line */
summary:active::before {
  left: 100%;
  transition: left 0.1s ease;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 255, 65, 0.3), 
    transparent
  );
}