/* ============================================
   JOYSTICK FM — style.css
   Palette : noir profond + bleu néon + violet
   Typographie : VT323 (pixel) + Orbitron (tech)
   ============================================ */

/*
  Ce fichier contient les styles CSS principaux du site Joystick FM, définissant l'apparence globale, la typographie, les couleurs et les styles de base pour tous les éléments. Il est conçu pour créer une esthétique rétro-futuriste inspirée des années 80, avec une palette de couleurs sombre et des accents néon.

  Les styles sont organisés en sections thématiques pour faciliter la lecture et la maintenance. Chaque section commence par un commentaire clair indiquant son objectif, suivi des règles CSS correspondantes. Les variables CSS sont utilisées pour centraliser les couleurs, les polices et les effets de glow, permettant une personnalisation facile et cohérente à travers tout le site.

  Ce fichier doit être chargé avant le fichier responsive.css pour garantir que les styles de base sont appliqués avant d'ajuster la mise en page et les éléments pour différentes tailles d'écran.
*/

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ── Variables CSS ── */
:root {
  --noir:        #0a0a0f;
  --noir-card:   #12121a;
  --noir-border: #1e1e2e;
  --bleu-neon:   #00f5ff;
  --violet:      #b44fff;
  --violet-dark: #7b2fbf;
  --rose-neon:   #ff2d78;
  --vert-neon:   #39ff14;
  --texte:       #c8c8d4;
  --texte-dim:   #6b6b7f;
  --blanc:       #f0f0ff;

  --font-pixel:  'VT323', monospace;
  --font-tech:   'Orbitron', sans-serif;
  --font-mono:   'Share Tech Mono', monospace;

  --glow-bleu:   0 0 8px var(--bleu-neon), 0 0 20px var(--bleu-neon), 0 0 40px rgba(0,245,255,0.3);
  --glow-violet: 0 0 8px var(--violet), 0 0 20px var(--violet), 0 0 40px rgba(180,79,255,0.3);
  --glow-rose:   0 0 8px var(--rose-neon), 0 0 20px var(--rose-neon);

  --transition:  0.3s cubic-bezier(0.4,0,0.2,1);
  --radius:      8px;
  --radius-lg:   16px;

  /* Hauteur du floating player — utilisée pour le padding-bottom de main */
  --fp-height: 72px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Accélération matérielle pour les éléments lourds en animation */
.floating-player, 
.egg-xp-fill, 
.pixel-particle, 
.btn {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force le rendu GPU */
}

body {
  background-color: var(--noir);
  color: var(--texte);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='8' y='0' width='4' height='20' fill='%2300f5ff'/%3E%3Crect x='0' y='8' width='20' height='4' fill='%2300f5ff'/%3E%3C/svg%3E") 10 10, crosshair;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Bloque le scroll pendant le boot — classe ajoutée/retirée par JS */
body.boot-loading {
  overflow: hidden;
  touch-action: none;
}

/* ── Scrollbar gaming ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--noir-card); }
::-webkit-scrollbar-thumb {
  background: var(--violet);
  border-radius: 3px;
  box-shadow: var(--glow-violet);
}

/* ── Sélection ── */
::selection {
  background: var(--violet);
  color: var(--blanc);
}

/* ── Scanline overlay global ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

main {
  flex: 1;
  isolation: isolate;
  position: relative;
  z-index: 0;
  /* Compense la hauteur du floating player quand visible */
  padding-bottom: 0;
  transition: padding-bottom 0.3s ease;
}
main.fp-visible {
  padding-bottom: var(--fp-height);
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-tech);
  color: var(--blanc);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }

p { margin-bottom: 1rem; }

a {
  color: var(--bleu-neon);
  text-decoration: none;
  transition: color var(--transition), text-shadow var(--transition);
}
a:hover {
  color: var(--blanc);
  text-shadow: var(--glow-bleu);
}

/* ── Label pixel style ── */
.pixel-label {
  font-family: var(--font-pixel);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--bleu-neon);
}

/* ============================================
   LAYOUT UTILITAIRES
   ============================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section { padding: 5rem 0; }

.section-title {
  text-align: center;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
  z-index: 1;
}

.section-title::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--bleu-neon), var(--violet), transparent);
  margin-top: 0.5rem;
  border-radius: 2px;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.neon-text-blue  { color: var(--bleu-neon);  text-shadow: var(--glow-bleu); }
.neon-text-violet{ color: var(--violet);      text-shadow: var(--glow-violet); }
.neon-text-rose  { color: var(--rose-neon);   text-shadow: var(--glow-rose); }

/* ============================================
   HEADER / NAV
   ──────────────────────────────────────────
   CORRECTIF BUG 2 : sélecteurs restreints
   à "body > header" pour ne PAS cibler les
   <header class="section-header"> à l'intérieur
   des sections de contenu.
   ============================================ */

/* Fond flouté isolé dans un pseudo-élément */
body > header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--noir-border);
  z-index: -1;
  pointer-events: none;
}

body > header {
  position: sticky;
  top: 0;
  /* isolation: isolate crée un stacking context propre sans les
     side-effects de composition causés par backdrop-filter direct */
  isolation: isolate;
  z-index: 999999;
  padding: 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--bleu-neon), var(--violet));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--glow-bleu);
  animation: logoPulse 3s ease-in-out infinite;
}
.logo-text {
  font-family: var(--font-tech);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--blanc);
  letter-spacing: 0.1em;
}
.logo-text span { color: var(--bleu-neon); text-shadow: var(--glow-bleu); }

/* Nav links */
nav ul {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  align-items: center;
}
nav ul li a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-tech);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte);
  border: 1px solid transparent;
  transition: all var(--transition);
}
nav ul li a:hover,
nav ul li a.active {
  color: var(--bleu-neon);
  border-color: var(--bleu-neon);
  background: rgba(0,245,255,0.07);
  text-shadow: var(--glow-bleu);
  box-shadow: 0 0 10px rgba(0,245,255,0.1);
}

/* Live badge in nav */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--rose-neon);
  color: var(--blanc);
  font-family: var(--font-tech);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  letter-spacing: 0.1em;
  box-shadow: var(--glow-rose);
  animation: livePulse 1.5s ease-in-out infinite;
  cursor: pointer;
  text-decoration: none;
}
.live-badge .dot {
  width: 6px; height: 6px;
  background: var(--blanc);
  border-radius: 50%;
  animation: blink 1s step-end infinite;
}

/* ── Statut EN DIRECT — dot clignotant ── */
.stream-status.status-live {
  color: var(--rose-neon);
  border-color: var(--rose-neon);
  animation: livePulse 1.5s ease-in-out infinite;
}

.stream-status.status-live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--rose-neon);
  border-radius: 50%;
  margin-right: 0.4rem;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
}
.burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--bleu-neon);
  border-radius: 2px;
  transition: all var(--transition);
  box-shadow: var(--glow-bleu);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,245,255,0.12) 0%, transparent 70%),
              radial-gradient(ellipse 60% 50% at 80% 60%, rgba(180,79,255,0.1) 0%, transparent 60%),
              var(--noir);
}

/* Grid animée en arrière-plan */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridScroll 20s linear infinite;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  color: var(--bleu-neon);
  margin-bottom: 1.5rem;
  letter-spacing: 0.15em;
}
.hero-eyebrow::before {
  content: '▶';
  animation: blink 1s step-end infinite;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  color: var(--blanc);
  line-height: 1;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 40px rgba(0,245,255,0.2);
}
.hero-title .highlight {
  color: var(--bleu-neon);
  text-shadow: var(--glow-bleu);
  display: block;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--texte);
  max-width: 540px;
  margin-bottom: 2.5rem;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Stats hero */
.hero-stats {
  position: absolute;
  right: 2rem;
  bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 1;
}
.stat-item {
  text-align: right;
}
.stat-number {
  font-family: var(--font-tech);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--bleu-neon);
  text-shadow: var(--glow-bleu);
  display: block;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--texte-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================
   BOUTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.4s;
}
.btn:hover::before { transform: translateX(100%); }

.btn-primary {
  background: linear-gradient(135deg, var(--bleu-neon), var(--violet));
  color: var(--noir);
  box-shadow: 0 4px 20px rgba(0,245,255,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,245,255,0.5);
  color: var(--noir);
  text-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--bleu-neon);
  border-color: var(--bleu-neon);
  box-shadow: inset 0 0 0 0 var(--bleu-neon);
}
.btn-secondary:hover {
  background: rgba(0,245,255,0.1);
  box-shadow: var(--glow-bleu);
  color: var(--blanc);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--texte);
  border-color: var(--noir-border);
}
.btn-ghost:hover {
  border-color: var(--violet);
  color: var(--violet);
  box-shadow: 0 0 12px rgba(180,79,255,0.2);
  transform: translateY(-2px);
}

/* ============================================
   CARDS
   ──────────────────────────────────────────
   CORRECTIF BUG 1 : "opacity:1" au hover
   pour contrer le style inline "opacity:0"
   injecté par initScrollAnimations() en JS.
   Plus de "animation: cardGlow" ici (elle
   écrasait l'animation slideUp et réinitia-
   lisait opacity à 0 via fill-mode).
   ============================================ */
.card {
  background: var(--noir-card);
  border: 1px solid var(--noir-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition),
              box-shadow var(--transition),
              transform var(--transition),
              opacity var(--transition);
  position: relative;
}

.card:hover {
  border-color: var(--bleu-neon);
  box-shadow: 0 0 20px rgba(0,245,255,0.12),
              0 8px 30px rgba(0,0,0,0.4),
              inset 0 0 15px rgba(180,79,255,0.15);
  transform: translateY(-4px);
  opacity: 1; /* ← Verrou : empêche la régression vers opacity:0 du style inline JS */
}

.card-body {
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}
.card-title {
  font-family: var(--font-tech);
  font-size: 1rem;
  color: var(--blanc);
  margin-bottom: 0.5rem;
}
.card-meta {
  font-size: 0.8rem;
  color: var(--texte-dim);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.card-tag {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-family: var(--font-tech);
  letter-spacing: 0.08em;
  font-weight: 700;
}
.tag-gaming  { background: rgba(0,245,255,0.12);  color: var(--bleu-neon);  border: 1px solid rgba(0,245,255,0.3); }
.tag-humour  { background: rgba(57,255,20,0.12);  color: var(--vert-neon);  border: 1px solid rgba(57,255,20,0.3); }
.tag-debat   { background: rgba(180,79,255,0.12); color: var(--violet);     border: 1px solid rgba(180,79,255,0.3); }
.tag-retro   { background: rgba(255,45,120,0.12); color: var(--rose-neon);  border: 1px solid rgba(255,45,120,0.3); }
.tag-theorie { background: rgba(255,165,0,0.12);  color: #ffa500;           border: 1px solid rgba(255,165,0,0.3); }

/* ============================================
   PODCAST CARDS
   ============================================ */
.podcast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.podcast-card .card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--noir-card), var(--noir-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  overflow: hidden;
}
.podcast-card .card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--noir-card));
}

.podcast-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--vert-neon);
}

/* Lecteur audio mini */
.audio-player-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0,245,255,0.05);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

/* Titre de la piste dans le mini lecteur (Blog OST) */
.player-track-name {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  color: var(--bleu-neon);
  flex-shrink: 0;
  width: 170px; /* Largeur fixe pour aligner tous les lecteurs */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--noir-border);
  padding-right: 0.75rem;
}

.play-btn-mini {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--bleu-neon), var(--violet));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transition);
  flex-shrink: 0;
  color: var(--noir);
}
.play-btn-mini:hover {
  transform: scale(1.1);
  box-shadow: var(--glow-bleu);
}
.progress-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--noir-border);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bleu-neon), var(--violet));
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}
.time-display {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  color: var(--texte-dim);
  white-space: nowrap;
}

/* ============================================
   BLOG
   ============================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.article-img {
  width: 100%; height: 200px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, var(--noir-card) 0%, var(--noir-border) 100%);
}

#article-body img {
  max-width: 100%;       /* Empêche l'image de dépasser de son conteneur */
  height: auto;          /* Garde les proportions intactes */
  display: block;        /* Retire l'espace fantôme sous l'image */
  margin: 1.5rem auto;   /* Centre l'image et ajoute de l'espace en haut et en bas */
  border-radius: var(--radius); /* Ajoute des bords arrondis pour coller au design */
  border: 1px solid var(--noir-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Ajoute une légère ombre de profondeur */
}

/* ============================================
   RADIO PAGE
   ============================================ */
.radio-player-main {
  background: var(--noir-card);
  border: 1px solid var(--bleu-neon);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(0,245,255,0.1);
  position: relative;
  overflow: hidden;
}
.radio-player-main::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(0,245,255,0.05) 0%, transparent 60%);
  animation: rotateBg 15s linear infinite;
  pointer-events: none;
}

.radio-visualizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin: 1.5rem 0;
}
.viz-bar {
  width: 6px;
  background: linear-gradient(to top, var(--bleu-neon), var(--violet));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: vizBounce var(--dur, 0.8s) ease-in-out infinite alternate;
  box-shadow: 0 0 6px var(--bleu-neon);
}

.now-playing {
  text-align: center;
  padding: 1rem;
  background: rgba(0,245,255,0.05);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: var(--radius);
  margin: 1rem 0;
}
.now-playing-label {
  font-size: 0.7rem;
  font-family: var(--font-tech);
  color: var(--texte-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.25rem;
}
.now-playing-title {
  font-family: var(--font-pixel);
  font-size: 1.5rem;
  color: var(--bleu-neon);
  text-shadow: var(--glow-bleu);
  display: block;
}

.radio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.ctrl-btn {
  background: none;
  border: none;
  color: var(--texte);
  font-size: 1.3rem;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0.5rem;
  border-radius: 50%;
}
.ctrl-btn:hover { color: var(--bleu-neon); text-shadow: var(--glow-bleu); transform: scale(1.15); }

.play-btn-main {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, var(--bleu-neon), var(--violet));
  border: none;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: var(--glow-bleu);
  color: var(--noir);
}
.play-btn-main:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0,245,255,0.7);
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--texte-dim);
  font-size: 1rem;
}
.volume-row input[type=range] {
  flex: 1;
  appearance: none;
  height: 4px;
  background: var(--noir-border);
  border-radius: 2px;
  cursor: pointer;
}
.volume-row input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px;
  background: var(--bleu-neon);
  border-radius: 50%;
  box-shadow: var(--glow-bleu);
}

/* ============================================
   FORMULAIRE CONTACT
   ============================================ */
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--texte-dim);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--noir-card);
  border: 1px solid var(--noir-border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  color: var(--texte);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--bleu-neon);
  box-shadow: 0 0 0 3px rgba(0,245,255,0.1);
}
.form-group textarea {
  min-height: 140px;
  resize: vertical;
}
.form-group .error-msg {
  display: none;
  font-size: 0.8rem;
  color: var(--rose-neon);
  margin-top: 0.35rem;
  padding-left: 0.25rem;
}
.form-group.invalid input,
.form-group.invalid textarea {
  border-color: var(--rose-neon);
  box-shadow: 0 0 0 3px rgba(255,45,120,0.1);
}
.form-group.invalid .error-msg { display: block; }
.form-group.valid input,
.form-group.valid textarea {
  border-color: var(--vert-neon);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--noir-card);
  border-top: 1px solid var(--noir-border);
  padding: 3rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-brand p {
  font-size: 0.9rem;
  color: var(--texte-dim);
  margin-top: 0.75rem;
  max-width: 260px;
}
.footer-col h4 {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--texte-dim);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a {
  color: var(--texte);
  font-size: 0.9rem;
  transition: all var(--transition);
}
.footer-col ul li a:hover { color: var(--bleu-neon); padding-left: 4px; }

.footer-bottom {
  border-top: 1px solid var(--noir-border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--texte-dim);
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ============================================
   SECTIONS SPÉCIALES
   ============================================ */

/* Console boot overlay */
#console-boot {
  position: fixed;
  inset: 0;
  background: var(--noir);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
.boot-logo {
  font-family: var(--font-pixel);
  font-size: clamp(2rem, 8vw, 5rem);
  color: var(--bleu-neon);
  text-shadow: var(--glow-bleu);
  letter-spacing: 0.2em;
}
.boot-bar-wrap {
  width: min(400px, 80vw);
  height: 8px;
  background: var(--noir-border);
  border-radius: 4px;
  overflow: hidden;
}
.boot-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bleu-neon), var(--violet));
  border-radius: 4px;
  width: 0%;
  box-shadow: var(--glow-bleu);
  transition: width 0.1s linear;
}
.boot-text {
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  color: var(--vert-neon);
  letter-spacing: 0.1em;
}


/* Easter egg modal */
#easter-egg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999999; /* <-- Ligne corrigée : force la modale tout devant */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
#easter-egg-modal.show { display: flex; }
.egg-content {
  background: var(--noir-card);
  border: 2px solid var(--violet);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  max-width: 500px;
  box-shadow: var(--glow-violet);
  animation: eggPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.egg-close {
  margin-top: 1.5rem;
  background: none;
  border: 1px solid var(--violet);
  color: var(--violet);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-tech);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  transition: all var(--transition);
}
.egg-close:hover { background: rgba(180,79,255,0.2); box-shadow: var(--glow-violet); }

/* Filter pills */
.filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}
.filter-pill {
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--noir-border);
  background: transparent;
  color: var(--texte);
  font-family: var(--font-tech);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-pill:hover,
.filter-pill.active {
  border-color: var(--bleu-neon);
  color: var(--bleu-neon);
  background: rgba(0,245,255,0.08);
  box-shadow: 0 0 8px rgba(0,245,255,0.15);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.page-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--noir-border);
  background: var(--noir-card);
  color: var(--texte);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-tech);
  font-size: 0.85rem;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-btn:hover,
.page-btn.active {
  border-color: var(--bleu-neon);
  color: var(--bleu-neon);
  box-shadow: 0 0 10px rgba(0,245,255,0.15);
}

/* Konami hint */
#konami-hint {
  position: fixed;
  bottom: 1rem; right: 1rem;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  color: var(--texte-dim);
  opacity: 0.4;
  z-index: 100;
  pointer-events: none;
}

/* ============================================
   FLOATING AUDIO PLAYER
   Barre persistante fixée en bas de page.
   Slide-in depuis le bas quand un audio joue.
   ============================================ */
.floating-player {
  position: fixed;
  bottom: calc(-1 * var(--fp-height) - 20px); /* caché sous le viewport */
  left: 0; right: 0;
  height: var(--fp-height);
  z-index: 99998; /* sous le header (999999) mais au-dessus de tout le reste */
  background: rgba(10, 10, 15, 0.97);
  border-top: 1px solid var(--bleu-neon);
  box-shadow: 0 -4px 30px rgba(0,245,255,0.2), 0 -1px 0 rgba(0,245,255,0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide-in */
.floating-player.fp-visible {
  bottom: 0;
}

/* — Infos piste (gauche) — */
.fp-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.fp-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.fp-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fp-title {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--blanc);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-subtitle {
  font-size: 0.7rem;
  color: var(--texte-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* — Contrôles centraux — */
.fp-center {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  min-width: 320px;
}
.fp-play-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--bleu-neon), var(--violet));
  color: var(--noir);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 0 10px rgba(0,245,255,0.3);
}
.fp-play-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--glow-bleu);
}
.fp-progress-wrap {
  flex: 1;
  height: 5px;
  background: var(--noir-border);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.fp-progress-wrap:hover { height: 7px; }
.fp-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--bleu-neon), var(--violet));
  border-radius: 3px;
  width: 0%;
  transition: width 0.3s linear;
  pointer-events: none;
}
.fp-time {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  color: var(--texte-dim);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

/* — Volume + fermer (droite) — */
.fp-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}
.fp-btn {
  background: none;
  border: none;
  color: var(--texte-dim);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.3rem;
  border-radius: 4px;
  transition: color var(--transition), text-shadow var(--transition);
  flex-shrink: 0;
}
.fp-btn:hover { color: var(--bleu-neon); text-shadow: var(--glow-bleu); }
.fp-close-btn {
  font-size: 0.85rem;
  border: 1px solid var(--noir-border);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  color: var(--texte-dim);
}
.fp-close-btn:hover { border-color: var(--rose-neon); color: var(--rose-neon); text-shadow: var(--glow-rose); }
.fp-vol-slider {
  width: 80px;
  appearance: none;
  height: 3px;
  background: var(--noir-border);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.fp-vol-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  background: var(--bleu-neon);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--bleu-neon);
}

/* ── Responsive floating player ── */
@media (max-width: 768px) {
  :root { --fp-height: 100px; }

  .floating-player {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: var(--fp-height);
    padding: 0.5rem 1rem;
    gap: 0.4rem;
  }
  .fp-info {
    display: none; /* Masqué sur mobile pour économiser l'espace */
  }
  .fp-center {
    min-width: 0;
    width: 100%;
  }
  .fp-right {
    justify-content: center;
  }
  .fp-vol-slider { width: 60px; }
}

@media (max-width: 480px) {
  :root { --fp-height: 90px; }
  .fp-vol-slider { display: none; }
}