/* Import Google Fonts avec tous les weights nécessaires */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;800;900&family=Share+Tech+Mono&display=swap');

/*
  Gregoryen.fr — Thème Cyberpunk Retro-Futuriste
  - Palette néon: cyan, magenta, vert
  - Effets: scanlines, grille, glow, glitch léger
  - Inspiré par les images dans /REFERENCES
*/

/* (supprimé) @import Google Fonts remplacé par import local ci-dessus */

/* Reset minimal */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
  min-height: 100%; /* Changer height: 100% en min-height: 100% pour permettre l'expansion */
  overflow-x: hidden; 
  /* Stabilise la mise en page entre pages avec/sans scrollbar (corrige shift ~7px sous Firefox) */
  scrollbar-gutter: stable; 
}

/* Fallback si scrollbar-gutter n'est pas supporté (certains anciens navigateurs) */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* Mise en avant du lien "École Étoilée" dans la navbar */
.nav-menu .cta-ecole-etoile {
  position: relative;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(255, 225, 125, 0.8), 0 0 12px rgba(255, 200, 0, 0.5);
}
.nav-menu .cta-ecole-etoile i {
  color: #ffd54a;
  filter: drop-shadow(0 0 6px rgba(255, 214, 74, 0.9));
  animation: star-twinkle 2.2s ease-in-out infinite;
}
.nav-menu .cta-ecole-etoile::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 10px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 230, 120, 0.20) 0%, rgba(255, 214, 74, 0.10) 35%, rgba(255, 214, 74, 0) 70%);
  pointer-events: none;
  /* halo statique (animation retirée) */
}
@keyframes star-twinkle {
  0%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 4px rgba(255, 214, 74, 0.7)); }
  40% { transform: rotate(8deg) scale(1.12); filter: drop-shadow(0 0 10px rgba(255, 224, 140, 1)); }
  60% { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 7px rgba(255, 214, 74, 0.9)); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* (barre lumineuse supprimée à la demande, on conserve seulement le halo et le scintillement de l'icône) */

/* Mobile: garder l'effet, mais réduit pour ne pas gêner */
@media (max-width: 768px) {
  .nav-menu .cta-ecole-etoile::before { inset: -4px -6px; opacity: 0.35; }
  .nav-menu .cta-ecole-etoile i { animation-duration: 2.8s; }
}

/* Override final pour s'assurer que les containers d'astéroïdes restent fixés
   au viewport — règle à haute spécificité pour écraser les définitions conflictuelles. */
#site-root #asteroids-background,
#site-root #asteroids-container,
#site-root #asteroids-foreground {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  transform: none !important;
  overflow: hidden !important;
}

/* Prévention du scroll horizontal global */
.container, .social-grid, .social-container { 
  max-width: 100%; 
  overflow-x: hidden; 
}

/* --- Responsive amélioré --- */
@media (max-width: 768px) {
  /* Masquer le curseur personnalisé SEULEMENT sur les vrais appareils tactiles */
  @media (hover: none) and (pointer: coarse) {
    .cyberpunk-cursor-main,
    .cyberpunk-cursor-dot {
      display: none !important;
      visibility: hidden !important;
    }
    
    /* Rétablir le curseur par défaut sur les vrais appareils tactiles */
    * {
      cursor: auto !important;
    }
    
    /* Forcer le curseur par défaut même sur les éléments interactifs */
    .asteroid-large,
    .asteroid-large:hover,
    button,
    a,
    input {
      cursor: auto !important;
    }
  }
  
  /* Supprimer tous les indicateurs tactiles emoji sur mobile */
  .asteroid-large::after,
  .asteroid-large:hover::after,
  .asteroid-large:active::after {
    display: none !important;
    content: '' !important;
    opacity: 0 !important;
  }
  
  /* Corriger les problèmes de scroll et d'overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
    height: auto !important; /* Forcer la hauteur automatique */
  }
  
  body.homepage {
    overflow-x: hidden;
    /* SUPPRIMER overflow-y - laisser par défaut */
    min-height: 100vh;
    width: 100%;
    height: auto !important; /* Forcer la hauteur automatique */
    position: relative !important; /* Pas de position fixed */
  }
  
  .container {
    padding: 12px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    height: auto !important; /* Forcer la hauteur automatique */
  }
  
  /* S'assurer que le contenu principal peut scroller */
  .main-content {
    position: relative;
    z-index: 1;
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Conteneur des astéroïdes : garder position fixed pour rester ancré à l'écran
     même lorsque la page défile — évite que les astéroïdes "suivent" le scroll. */
  #asteroids-container {
    position: fixed; /* Rester fixé à l'écran */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Utiliser la hauteur de la fenêtre */
    pointer-events: none;
    z-index: 5; /* Au-dessus du fond mais sous l'interface */
    overflow: hidden;
  }

  /* Autres containers d'astéroïdes : maintenir fixed également */
  #asteroids-background,
  #asteroids-foreground {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    overflow: hidden;
  }
  
  /* Adapter les astéroïdes pour mobile */
  .asteroid-large {
    width: 60px !important;
    height: 50px !important;
  }
  
  /* Optimiser les étoiles filantes sur mobile */
  .real-shooting-star {
    width: 2px !important;
    height: 2px !important;
    box-shadow: 0 0 6px 2px rgba(255,255,255,0.6), 0 0 12px 4px rgba(0,234,255,0.3) !important;
    filter: brightness(0.7) !important; /* Réduire l'intensité */
  }
  
  /* Assurer que les animations ne perturbent pas le scroll */
  .space-background,
  .crt-overlay {
    position: fixed;
    pointer-events: none;
  }
  
  /* Les containers d'astéroïdes utilisent position absolute sur mobile */
  #asteroids-container,
  #asteroids-background,
  #asteroids-foreground {
    position: absolute;
    pointer-events: none;
  }
  
  /* CORRECTION CRITIQUE: S'assurer que le contenu n'est pas limité en hauteur */
  .social-container,
  .social-grid {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* S'assurer que tous les liens sociaux sont visibles */
  .social-link {
    position: relative !important;
    display: flex !important;
    height: auto !important;
    max-height: none !important;
  }
  .container {
    padding: 12px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  
  .social-container {
    margin-top: 18px;
    padding: 28px 16px 20px 16px;
  }
  
  .social-container::before {
    top: -11px;
    left: 12px;
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .social-link {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 16px 14px;
    padding: 6px 12px;
    min-height: 65px;
  }
  
  .social-content {
    /* Allow emoji/content to be visible on small screens instead of being clipped */
    overflow: visible;
    line-height: 1.4;
  }
  
  .social-name {
    font-size: 13px;
    letter-spacing: 0.15em;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .social-handle {
    font-size: 11px;
    white-space: normal;
    word-wrap: break-word;
  }
  
  .hero-title {
    font-size: clamp(28px, 8vw, 64px);
  }
  
  .hero-subtitle {
    font-size: 12px;
    letter-spacing: 0.2em;
  }
  
  .navbar {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    gap: 10px;
  }
  
  .navbar-left {
    width: 100%;
    justify-content: center;
  }
  
  .navbar-score {
    order: 2;
    align-self: center;
  }
  
  .navbar-right {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }
  
  .nav-menu {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
  }
  
  .nav-menu li {
    display: inline-block;
    margin-right: 8px;
  }
  
  .nav-link {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .admin-panel {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .admin-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .stat-card {
    padding: 12px;
  }
  
  .stat-card h3 {
    font-size: 20px;
  }
  
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .admin-table {
    font-size: 12px;
    min-width: 100%;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 8px 6px;
    white-space: nowrap;
  }
  
  .form-control {
    font-size: 16px; /* Évite le zoom sur iOS */
  }
  
  .btn {
    font-size: 11px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: clamp(24px, 7vw, 48px);
  }
  
  .social-link {
    padding: 14px 12px;
    min-height: 60px;
  }
  
  .social-content {
    overflow: visible;
    line-height: 1.3;
  }
  
  .social-name {
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  
  .social-handle {
    font-size: 10px;
  }
}

:root {
  /* Couleurs néon */
  --c-cyan: #00eaff;
  --c-magenta: #ff47ff;
  --c-green: #00ff9c;
  --c-yellow: #f8ff7a;
  --c-red: #ff3b59;

  /* Neutres */
  --bg-0: #07080b;         /* fond profond */
  --bg-1: rgba(10,14,20,0.82); /* panneau verre dépoli */
  --ink-0: #e8f8ff;
  --ink-1: #bcd7e0;
  --ink-dim: #7a8a93;

  /* Décorations */
  --border: rgba(0,234,255,0.35);
  --shadow-soft: 0 10px 30px rgba(0,234,255,0.08);
  --glow-cyan: 0 0 4px rgba(0,234,255,0.6), 0 0 12px rgba(0,234,255,0.24);
  --glow-magenta: 0 0 4px rgba(255,71,255,0.6), 0 0 12px rgba(255,71,255,0.24);
  --glow-green: 0 0 4px rgba(0,255,156,0.6), 0 0 12px rgba(0,255,156,0.24);

  /* Typo */
  --font-title: 'Orbitron', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, monospace;
}

/* --- Animations --- */
/* Animation de pulsation douce pour les titres */
@keyframes softPulse {
  0%, 100% { 
    text-shadow: 0 0 8px rgba(0,234,255,0.6), 0 0 16px rgba(0,234,255,0.3); 
  }
  50% { 
    text-shadow: 0 0 12px rgba(0,234,255,0.8), 0 0 24px rgba(0,234,255,0.4); 
  }
}

/* Animation de typing effect */
@keyframes typeWriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes glitchX { 0% { transform: translateX(0) } 50% { transform: translateX(1px) } 100%{ transform: translateX(0) } }

/* --- Styles globaux pour tous les champs de formulaire --- */
/* Style cyberpunk unifié pour tous les inputs et textareas */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="tel"], 
input[type="url"], 
input[type="search"],
textarea {
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 30, 50, 0.9);
    border: 1px solid var(--c-cyan);
    color: var(--c-cyan);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
    box-shadow: 
        inset 0 0 15px rgba(0, 234, 255, 0.15),
        0 0 10px rgba(0, 234, 255, 0.3);
    position: relative;
    caret-color: var(--c-cyan);
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
input[type="number"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--c-green);
    background: rgba(0, 40, 20, 0.9);
    color: var(--c-green);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.7);
    box-shadow: 
        inset 0 0 15px rgba(0, 255, 65, 0.2),
        0 0 15px rgba(0, 255, 65, 0.4),
        0 0 25px rgba(0, 255, 65, 0.2);
    transform: scale(1.02);
    caret-color: var(--c-green);
}

input[type="text"]::placeholder, 
input[type="email"]::placeholder, 
input[type="password"]::placeholder, 
input[type="number"]::placeholder, 
input[type="tel"]::placeholder, 
input[type="url"]::placeholder, 
input[type="search"]::placeholder,
textarea::placeholder {
    color: rgba(0, 234, 255, 0.8);
    text-shadow: 0 0 5px rgba(0, 234, 255, 0.4);
    font-weight: 500;
}

input[type="text"]:focus::placeholder, 
input[type="email"]:focus::placeholder, 
input[type="password"]:focus::placeholder, 
input[type="number"]:focus::placeholder, 
input[type="tel"]:focus::placeholder, 
input[type="url"]:focus::placeholder, 
input[type="search"]:focus::placeholder,
textarea:focus::placeholder {
    color: rgba(0, 255, 65, 0.8);
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
}

/* Style pour quand l'input a une valeur ET qu'il est en focus */
input[type="text"]:focus:not(:placeholder-shown), 
input[type="email"]:focus:not(:placeholder-shown), 
input[type="password"]:focus:not(:placeholder-shown), 
input[type="number"]:focus:not(:placeholder-shown), 
input[type="tel"]:focus:not(:placeholder-shown), 
input[type="url"]:focus:not(:placeholder-shown), 
input[type="search"]:focus:not(:placeholder-shown),
textarea:focus:not(:placeholder-shown) {
    color: var(--c-green);
    text-shadow: 0 0 12px rgba(0, 255, 65, 0.9);
}

/* --- Forcer le style quand le navigateur pré-remplit (autofill) --- */
/* WebKit (Chrome / Edge / Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-cyan) !important;
  caret-color: var(--c-cyan) !important;
  border: 1px solid var(--c-cyan) !important;
  /* Peindre l'intérieur de l'input pour neutraliser le jaune du navigateur */
  -webkit-box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.6) !important;
  background-color: rgba(0, 30, 50, 0.9) !important;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-green) !important;
  caret-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.7) !important;
}

/* Spécification :autofill (progressive enhancement) */
input:autofill,
textarea:autofill,
select:autofill {
  color: var(--c-cyan) !important;
  caret-color: var(--c-cyan) !important;
  border: 1px solid var(--c-cyan) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
  background-color: rgba(0, 30, 50, 0.9) !important;
}

input:autofill:focus,
textarea:autofill:focus,
select:autofill:focus {
  color: var(--c-green) !important;
  caret-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
  background-color: rgba(0, 40, 20, 0.9) !important;
}

/* WebKit (Chrome/Safari/Edge) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  color: var(--c-cyan) !important;
  caret-color: var(--c-cyan) !important;
  border: 1px solid var(--c-cyan) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
  background-color: rgba(0, 30, 50, 0.9) !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  color: var(--c-green) !important;
  caret-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
  box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
  background-color: rgba(0, 40, 20, 0.9) !important;
}

/* Firefox uniquement - encapsulé pour éviter les warnings sur Chrome */
@-moz-document url-prefix() {
  input:-moz-autofill,
  textarea:-moz-autofill,
  select:-moz-autofill {
    color: var(--c-cyan) !important;
    caret-color: var(--c-cyan) !important;
    border: 1px solid var(--c-cyan) !important;
    box-shadow: inset 0 0 0 1000px rgba(0, 30, 50, 0.9), 0 0 10px rgba(0, 234, 255, 0.3) !important;
    background-color: rgba(0, 30, 50, 0.9) !important;
  }

  input:-moz-autofill:focus,
  textarea:-moz-autofill:focus,
  select:-moz-autofill:focus {
    color: var(--c-green) !important;
    caret-color: var(--c-green) !important;
    border-color: var(--c-green) !important;
    box-shadow: inset 0 0 0 1000px rgba(0, 40, 20, 0.9), 0 0 15px rgba(0, 255, 65, 0.4) !important;
    background-color: rgba(0, 40, 20, 0.9) !important;
  }
}

/* --- Fond global --- */
body {
  font-family: var(--font-mono);
  background-color: var(--bg-0);
  color: var(--ink-0);
  line-height: 1.5;
  overflow-x: hidden;
  
  /* Empêcher la sélection de texte sur toute l'interface */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  /* Fond uni sans gradients colorés */
  background-image: none;
}

/* Police interface unifiée (texte principal et UI) */
body, input, button, textarea, select {
  font-family: var(--font-mono) !important;
}

/* Grille + scanlines overlay */
/* Aurora animé subtil - SUPPRIME */
body::before{
  display: none;
}

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 20px; 
  position: relative; 
  z-index: 1000; 
  overflow-x: clip; 
  pointer-events: none; /* Permet aux clics de passer aux astéroïdes derrière */
}

/* S'assurer que tous les éléments interactifs restent cliquables */
a, button, input, textarea, select, .nav-link, .social-link, .btn, .logo {
  pointer-events: auto !important;
  position: relative;
  z-index: 1002 !important;
}

/* Permettre les clics sur le contenu principal aussi */
.main-content, .auth-card, .contact-form, .hero-title, .hero-subtitle {
  pointer-events: auto;
}

/* --- Navbar --- */
.navbar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; margin-bottom: 28px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  z-index: 1001;
  backdrop-filter: blur(10px) saturate(140%);
  pointer-events: none; /* Permet aux clics de passer aux astéroïdes derrière */
}

/* Container pour la navbar + panneau */
.site-header {
  position: relative;
  pointer-events: auto;
  z-index: 10000030;
}

.site-header, .site-header * {
  pointer-events: auto !important;
}

/* --- Navbar avec score centré ---*/
.navbar {
  position: relative; 
  display: flex;
  align-items: center;
  padding: 12px 18px; 
  margin-bottom: 28px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  z-index: 1001;
  backdrop-filter: blur(10px) saturate(140%);
  pointer-events: none;
}

/* Conteneurs gauche et droite de la navbar */
.navbar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  justify-content: center; /* Centrer le contenu par défaut */
}

/* Score dans la navbar-right, centré sur desktop */
.navbar-score {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.navbar-score-placeholder {
  visibility: hidden;
  pointer-events: none !important;
  display: flex !important;
  min-width: 330px;
  height: 34px;
  padding: 6px 12px;
  box-sizing: border-box;
  flex: 0 0 330px;
}

@media (max-width: 768px) {
  .navbar-score-placeholder {
    display: none !important;
    min-width: 0;
    flex: 0 0 auto;
  }
}

/* Le nav-toggle se positionne à droite */
.nav-toggle {
  margin-left: auto;
}

/* Bordure animée progressive */
.navbar-score::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  height: calc(100% + 2px);
  width: 0%;
  border: 1px solid rgba(0, 255, 156, 0.5);
  border-right: none;
  border-radius: 4px 0 0 4px;
  transition: width 2.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}

.navbar-score.animating::after {
  width: 100%;
  opacity: 1;
  border-right: 1px solid rgba(0, 255, 156, 0.5);
  border-radius: 4px;
}

/* Quand le panneau est ouvert, le bouton devient pleinement visible */
.navbar-score.panel-open {
  opacity: 1;
  background: transparent;
}

/* Réactiver les pointer-events sur les éléments interactifs de la navbar */
.navbar *, .navbar a, .navbar button, .nav-toggle, .logo, .nav-link, .navbar-score {
  pointer-events: auto;
}

/* Barre d'animation verte */
.navbar-score::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(0, 255, 156, 0.2), rgba(0, 212, 255, 0.15));
  transition: width 2.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: -2; /* Derrière la bordure */
  border-radius: 4px;
  opacity: 0; /* Invisible par défaut */
}

.navbar-score.animating::before {
  width: 100%;
  opacity: 1; /* Visible seulement pendant l'animation */
}

/* S'assurer que le contenu du score reste au-dessus */
.navbar-score > * {
  position: relative;
  z-index: 1; /* Au-dessus des deux pseudo-éléments */
}

.score-icon {
  font-size: 16px;
  color: var(--c-cyan);
  text-shadow: 0 0 5px rgba(0, 255, 156, 0.6);
}

.score-content {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  min-width: 0; /* allow flex children to shrink properly */
}

.score-label {
  font-size: 12px;
  color: var(--ink-1);
  text-transform: uppercase;
  flex: 0 0 auto;
  letter-spacing: 0.05em;
}

.score-value {
  font-size: 14px;
  color: var(--c-green);
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 255, 156, 0.4);
  white-space: nowrap; /* avoid breaking the label into multiple lines */
  min-width: 40px;
  text-align: right;
}

.score-toggle {
  font-size: 10px;
  color: var(--c-cyan);
  transition: all 0.3s ease;
  margin-left: 8px;
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Remplacer le ▼ par une flèche CSS stylée */
.score-toggle::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--c-cyan);
  filter: drop-shadow(0 0 3px rgba(0, 234, 255, 0.6));
  transition: all 0.3s ease;
}

/* Effet hover sur la flèche */
.score-toggle:hover::before {
  border-top-color: var(--c-green);
  filter: drop-shadow(0 0 5px rgba(0, 255, 156, 0.8));
  transform: scale(1.1);
}

/* Animation de rotation quand le panneau s'ouvre */
.score-toggle.rotated::before {
  transform: rotate(180deg);
  border-top-color: var(--c-green);
  filter: drop-shadow(0 0 5px rgba(0, 255, 156, 0.8));
}

/* Titre animé à droite du score */
.score-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-cyan);
  letter-spacing: 0.1em;
  margin-left: 12px;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.6);
  min-width: 120px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.score-title.visible {
  opacity: 1;
}

/* Panneau extensible des scores */
.score-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(7, 8, 11, 0.98);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(15px);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 10000020;
  max-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

.score-panel.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  max-height: 200px; /* Réduit encore pour compenser les marges réduites */
}

.score-panel-content {
  padding: 8px; /* Réduit pour une fine bordure */
  overflow: visible; /* Permet l'affichage complet */
  pointer-events: auto;
}

.score-panel h3 {
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 16px; /* Remis à la taille originale */
  margin: 4px 0 4px 0; /* Marges réduites et égales */
  text-align: center;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.6);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.score-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; /* Réduit l'espace entre les éléments */
  margin-bottom: 4px; /* Même marge que le haut */
  overflow: visible; /* Permet l'affichage complet */
}

.score-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px; /* Augmenté pour plus de lisibilité */
  padding: 8px 12px; /* Plus de padding pour plus d'espace */
  background: rgba(0, 255, 156, 0.05);
  border: 1px solid rgba(0, 255, 156, 0.15);
  border-radius: 4px;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.score-stat:hover {
  background: rgba(0, 255, 156, 0.1);
  border-color: rgba(0, 255, 156, 0.3);
}

.score-stat span:first-child {
  color: var(--ink-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-weight: bold;
  text-shadow: 0 0 2px currentColor;
}

.stat-value.current-score {
  color: var(--c-green);
}

.stat-value.best-score {
  color: var(--c-yellow);
}

.stat-value.combo {
  color: var(--c-purple);
}

.stat-value.accuracy {
  color: var(--c-cyan);
}

.score-stat.rank {
  color: var(--c-orange);
}

/* Bouton leaderboard intégré dans la grille */
.score-stat.leaderboard-btn {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.1), rgba(0, 212, 255, 0.1));
  border-color: rgba(0, 255, 156, 0.3);
  transition: all 0.3s ease;
}

.score-stat.leaderboard-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.2), rgba(0, 212, 255, 0.2));
  border-color: rgba(0, 255, 156, 0.5);
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.3);
}

.score-stat.leaderboard-btn span:first-child {
  color: var(--c-cyan);
  font-weight: bold;
}

.score-stat.leaderboard-btn .stat-value {
  color: var(--c-green);
}

.leaderboard-link {
  text-decoration: none;
  display: flex;
  width: 100%;
  position: relative;
  z-index: 10000031;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.score-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.score-btn {
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.1), rgba(0, 212, 255, 0.1));
  border: 1px solid rgba(0, 255, 156, 0.3);
  color: var(--c-green);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
}

.score-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 156, 0.2), rgba(0, 212, 255, 0.2));
  border-color: rgba(0, 255, 156, 0.5);
  color: var(--ink-0);
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.3);
}

.score-btn.secondary {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.1), rgba(255, 150, 100, 0.1));
  border-color: rgba(255, 100, 100, 0.3);
  color: var(--c-red);
}

.score-btn.secondary:hover {
  background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(255, 150, 100, 0.2));
  border-color: rgba(255, 100, 100, 0.5);
  box-shadow: 0 0 8px rgba(255, 100, 100, 0.3);
}
.nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--ink-0); padding: 8px 10px; cursor: pointer; }
.nav-toggle:hover { border-color: rgba(0,255,156,.45); box-shadow: 0 0 0 1px rgba(0,255,156,.1) inset; color: var(--c-green); }
.navbar::after{
  content: 'NETWORK_ACCESS_GRANTED'; position: absolute; top: -10px; left: 14px;
  font: 12px var(--font-mono); color: var(--c-cyan); letter-spacing: .12em; padding: 0 8px;
  background: #05080c; border: 1px solid var(--border); box-shadow: var(--glow-cyan);
}
.logo { display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--ink-0); text-decoration: none; }
.logo-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid var(--c-cyan); color: var(--c-cyan); font-weight: 700;
  background: #000; box-shadow: var(--glow-cyan);
}
.logo-text { font-family: var(--font-title) !important; font-weight: 800; letter-spacing: .08em; }

.nav-menu { list-style: none; display: flex; gap: 6px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--ink-1); text-transform: uppercase; font-size: 13px; letter-spacing: .14em;
  padding: 10px 14px; border: 1px solid transparent; transition: .25s ease; position: relative;
}
.nav-link i{ color: var(--ink-dim); transition: .25s; }
.nav-link:hover, .nav-link.active { color: var(--c-green); border-color: var(--border); background: rgba(0,255,156,0.06); box-shadow: 0 0 0 1px rgba(0,255,156,0.08) inset; }
.nav-link:hover i, .nav-link.active i{ color: var(--c-green); text-shadow: var(--glow-green); }

/* --- Hero --- */
.main-content { text-align: center; padding: 48px 0; }
.hero-title {
  font-family: var(--font-title) !important; font-weight: 800; letter-spacing: .14em;
  font-size: clamp(36px, 9vw, 96px); text-transform: uppercase; position: relative;
  text-shadow: 0 0 10px rgba(0,234,255,.18);
  transition: all 0.3s ease;
}
.hero-title:hover {
  transform: scale(1.02);
  text-shadow: 0 0 15px rgba(0,234,255,.3), 0 0 30px rgba(0,234,255,.15);
}
/* Effet soulignement doux au lieu du clignotement/glitch */
.hero-title::before, .hero-title::after { content: none; }
.hero-title::selection { background: rgba(0,234,255,.25); color: var(--ink-0); }

.hero-subtitle {
  margin-top: 8px; margin-bottom: 36px; color: var(--ink-1); letter-spacing: .36em; text-transform: uppercase; font-size: 14px;
}

/* Suppression de l'ancien effet typewriter - maintenant géré par JavaScript */

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

/* Curseur typewriter clignotant */
.typewriter-cursor {
  color: var(--c-cyan);
  text-shadow: 0 0 10px var(--c-cyan);
  animation: blink 1s infinite;
}

/* --- Carte de liens sociaux --- */
.social-container {
  background: var(--bg-1); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
  padding: 30px 24px 24px 24px; position: relative; overflow: visible; backdrop-filter: blur(8px) saturate(140%);
  margin-top: 15px; /* Espace pour le label */
}
.social-container::before{
  content: 'INTERFACE_LINK_MATRIX'; position: absolute; top: -12px; left: 16px; font: 11px var(--font-mono);
  color: var(--c-green); background: #06060a; border: 1px solid rgba(0,255,156,0.35); 
  padding: 2px 8px; box-shadow: var(--glow-green); text-shadow: var(--glow-green);
  z-index: 10;
}

.social-grid{ 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  gap: 18px; 
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.social-grid--compact{ 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 14px; 
  overflow: visible;
}

.social-link{
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink-0);
  background: linear-gradient(135deg, rgba(0,234,255,0.05), rgba(0,0,0,0.8));
  border: 1px solid var(--border);
  padding: 18px 16px; position: relative; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  width: 100%;
  overflow: visible;
  min-height: 70px; /* Assure une hauteur minimale pour éviter la coupure */
}
.social-link::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: transparent; opacity: 0; transition: opacity .25s ease;
}

/* Arrière-plan hover avec couleur spécifique par marque */
.social-link.twitter::after {
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.08));
}
.social-link.linkedin::after {
  background: linear-gradient(90deg, rgba(0,119,181,.08), transparent 30%, rgba(0,119,181,.08));
}
.social-link.discord::after {
  background: linear-gradient(90deg, rgba(91,126,255,.08), transparent 30%, rgba(91,126,255,.08));
}
.social-link.youtube::after {
  background: linear-gradient(90deg, rgba(255,59,89,.08), transparent 30%, rgba(255,59,89,.08));
}
.social-link.twitch::after {
  background: linear-gradient(90deg, rgba(169,112,255,.08), transparent 30%, rgba(169,112,255,.08));
}
.social-link.instagram::after {
  background: linear-gradient(90deg, rgba(255,156,85,.08), transparent 30%, rgba(255,156,85,.08));
}
.social-link.tiktok::after {
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.08));
}
.social-link.contact::after {
  background: linear-gradient(90deg, rgba(0,234,255,.08), transparent 30%, rgba(0,234,255,.08));
}
.social-link:hover{ 
  transform: translateY(-2px); 
}

/* Couleurs hover spécifiques par marque - pas de rose générique ! */
.social-link.twitter:hover{ 
  border-color: rgba(255,255,255,0.35); 
  box-shadow: 0 8px 18px rgba(255,255,255,0.16); 
}
.social-link.linkedin:hover{ 
  border-color: rgba(0,119,181,0.35); 
  box-shadow: 0 8px 18px rgba(0,119,181,0.16); 
}
.social-link.discord:hover{ 
  border-color: rgba(91,126,255,0.35); 
  box-shadow: 0 8px 18px rgba(91,126,255,0.16); 
}
.social-link.youtube:hover{ 
  border-color: rgba(255,59,89,0.35); 
  box-shadow: 0 8px 18px rgba(255,59,89,0.16); 
}
.social-link.twitch:hover{ 
  border-color: rgba(169,112,255,0.35); 
  box-shadow: 0 8px 18px rgba(169,112,255,0.16); 
}
.social-link.instagram:hover{ 
  border-color: rgba(255,156,85,0.35); 
  box-shadow: 0 8px 18px rgba(255,156,85,0.16); 
}
.social-link.tiktok:hover{ 
  border-color: rgba(255,255,255,0.35); 
  box-shadow: 0 8px 18px rgba(255,255,255,0.16); 
}
.social-link.contact:hover{ 
  border-color: rgba(0,234,255,0.35); 
  box-shadow: 0 8px 18px rgba(0,234,255,0.16); 
}
.social-link:hover::after{ opacity: 1; }

.social-link--badge .social-content{ align-items: center; }
.social-link--badge .social-name{ font-size: 13px; letter-spacing: .16em; }
.social-link--badge .social-handle{ font-size: 11px; }
.social-link--badge .social-icon{ width: 40px; height: 40px; font-size: 18px; }

.social-icon{ 
  width: 48px; height: 48px; display: grid; place-items: center; 
  color: var(--c-cyan); font-size: 22px; text-shadow: var(--glow-cyan); 
  flex-shrink: 0; /* Empêche la réduction de l'icône */
}
.social-content{ 
  display: grid; 
  flex: 1; 
  overflow: visible;
  line-height: 1.3;
}
.social-name{ 
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 14px; 
  margin-bottom: 2px;
}
.social-handle{ 
  color: var(--ink-1); font-size: 12px; letter-spacing: .06em; 
}
.social-link:hover .social-handle{ color: var(--ink-0); }

/* Variante badge compacte */
.social-link--badge{ justify-content: center; padding: 14px 12px; text-align: center; gap: 10px; }
.social-link--badge .social-content{ align-items: center; }
.social-link--badge .social-name{ font-size: 13px; letter-spacing: .16em; }
.social-link--badge .social-handle{ font-size: 11px; }
.social-link--badge .social-icon{ width: 40px; height: 40px; font-size: 18px; }

.social-icon{ width: 48px; height: 48px; display: grid; place-items: center; color: var(--c-cyan); font-size: 22px; text-shadow: var(--glow-cyan); }
.social-content{ display: grid; }
.social-name{ font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 14px; }
.social-handle{ color: var(--ink-1); font-size: 12px; letter-spacing: .06em; }
.social-link:hover .social-handle{ color: var(--ink-0); }

/* Logo X personnalisé - vrai logo X de x.com */
.social-link.twitter .social-icon .fa-x-twitter::before {
  content: "𝕏";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 1.2em;
}

/* Alternative avec le caractère X stylisé */
.social-link.twitter .social-icon .fa-x-twitter {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* Variantes par marque (légère) */
.social-link.twitter   .social-icon{ color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.35); }
.social-link.linkedin  .social-icon{ color: #0077b5; text-shadow: 0 0 6px rgba(0,119,181,.9), 0 0 18px rgba(0,119,181,.35); }
.social-link.discord   .social-icon{ color: #5b7eff; text-shadow: 0 0 6px rgba(91,126,255,.9), 0 0 18px rgba(91,126,255,.35); }
.social-link.youtube   .social-icon{ color: var(--c-red);  text-shadow: 0 0 6px rgba(255,59,89,.9),  0 0 18px rgba(255,59,89,.35); }
.social-link.twitch    .social-icon{ color: #a970ff; text-shadow: 0 0 6px rgba(169,112,255,.9), 0 0 18px rgba(169,112,255,.35); }
.social-link.instagram .social-icon{ color: #ff9c55; text-shadow: 0 0 6px rgba(255,156,85,.9), 0 0 18px rgba(255,156,85,.35); }
.social-link.tiktok    .social-icon{ color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.35); }
.social-link.contact   .social-icon{ color: var(--c-cyan); text-shadow: var(--glow-cyan); }
.social-link.remiforest::after {
  background: linear-gradient(90deg, rgba(46,204,113,.08), transparent 30%, rgba(46,204,113,.08));
}
.social-link.remiforest:hover {
  border-color: rgba(46,204,113,0.35);
  box-shadow: 0 8px 18px rgba(46,204,113,0.16);
}
.social-link.remiforest .social-icon {
  color: #2ecc71;
  text-shadow: 0 0 6px rgba(46,204,113,.9), 0 0 18px rgba(46,204,113,.35);
}
.social-link.remiforest .social-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(46,204,113,.6));
}

/* Les animations CSS sont remplacées par du JavaScript pour un vrai chaos aléatoire */

/* --- Footer terminal --- */
.footer { 
  margin-top: 36px; 
  background: var(--bg-1); 
  border: 1px solid var(--border); 
  text-align: center; 
  padding: 14px; 
  font: 14px var(--font-mono); 
  color: var(--ink-1);
  z-index: 1001;
  position: relative;
  pointer-events: none; /* Permet aux clics de passer aux astéroïdes derrière */
}

/* Réactiver les pointer-events sur les liens du footer */
.footer a {
  pointer-events: auto;
}
.terminal-line .prompt { color: var(--c-cyan); text-shadow: var(--glow-cyan); }
.terminal-line .command{ color: var(--ink-0); }

/* --- Utilitaires --- */
@media (max-width: 720px){
  .navbar{ 
    flex-direction: column; /* Navigation verticale en mobile */
    gap: 8px; /* Gap réduit pour plus de compacité */
    padding: 8px 12px; /* Padding réduit */
    display: flex;
    align-items: stretch; /* Étirer les éléments sur toute la largeur */
    min-height: auto; /* Hauteur variable selon le contenu */
  }
  
  /* Logo en haut */
  .navbar-left {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    justify-content: center; /* Centrer le logo */
  }
  
  /* Menu principal au centre */
  .nav-menu {
    order: 2;
    flex: 1;
  }
  
  /* Score et auth en bas */
  .navbar-right {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  
  .navbar-score {
    order: 1 !important; /* Score en premier dans navbar-right */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 8px 12px !important; 
    gap: 6px !important; 
    font-size: 11px !important; 
    flex: 0 0 auto !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 150px !important; 
    margin: 0 !important; 
    overflow: hidden !important;
    height: 40px !important; 
    box-sizing: border-box !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-1) !important;
    border-radius: 4px !important;
  }
  
  /* Auth box styling pour mobile */
  .auth-box {
    order: 2 !important;
    flex: 0 0 auto !important;
  }
  
  .auth-link {
    padding: 8px 12px !important;
    font-size: 11px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-1) !important;
    border-radius: 4px !important;
    color: var(--ink-0) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
  }
  
  .auth-link:hover {
    border-color: var(--c-cyan) !important;
    background: rgba(0, 234, 255, 0.1) !important;
    color: var(--c-cyan) !important;
  }
  
  .logo-text { font-size: 18px; }
  .logo-icon { width: 28px; height: 28px; font-size: 14px; }
  
  /* Masquer le bouton hamburger en mobile */
  .nav-toggle { 
    display: none !important;
  }
  
  .nav-menu { 
    position: static !important; /* Position normale */
    width: 100% !important; /* Prendre toute la largeur */
    flex-direction: row !important; /* Disposition horizontale */
    flex-wrap: wrap !important; /* Permettre le retour à la ligne */
    gap: 4px !important; /* Espacement réduit entre les boutons */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important; /* Toujours visible */
    visibility: visible !important;
    transition: none !important;
    pointer-events: auto !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    justify-content: space-between !important; /* Répartir uniformément */
  }
  
  .nav-link { 
    padding: 8px 6px !important; /* Padding réduit */
    font-size: 10px !important; /* Taille de police réduite */
    width: auto !important; /* Largeur automatique */
    min-width: 60px !important; /* Largeur minimale pour la lisibilité */
    max-width: 85px !important; /* Largeur maximale augmentée pour les longs textes */
    flex: 1 1 auto !important; /* Flexibilité pour s'adapter */
    border-radius: 3px !important;
    text-align: center !important; /* Centrer le texte */
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important; /* Espacement réduit entre icône et texte */
    border: 1px solid var(--border) !important;
    background: var(--bg-1) !important;
    color: var(--ink-0) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important; /* Éviter le débordement */
  }
  
  /* Largeur spéciale pour le bouton École Étoilée qui a un texte plus long */
  .nav-link.cta-ecole-etoile {
    max-width: 95px !important; /* Plus d'espace pour "École Étoilée" */
    min-width: 75px !important;
  }
  
  .nav-link:hover, .nav-link.active {
    border-color: var(--c-cyan) !important;
    background: rgba(0, 234, 255, 0.1) !important;
    color: var(--c-cyan) !important;
  }
  
  .nav-link i {
    font-size: 12px !important; /* Icône plus petite */
  }
  
  .nav-link span {
    font-size: 8px !important; /* Texte encore plus petit */
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important; /* Éviter le retour à la ligne */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Points de suspension si trop long */
  }
  
  .score-icon {
    font-size: 12px !important; /* Réduit */
  }
  
  .score-label {
    font-size: 9px !important; /* Plus petit */
  }
  
  .score-value {
    font-size: 10px !important; /* Plus petit */
    min-width: 25px !important; /* Largeur réduite */
  }
  
  .score-toggle {
    width: 10px !important; /* Plus petit */
    height: 10px !important;
    margin-left: 4px !important; /* Marge réduite */
  }
  
  .score-toggle::before {
    border-left-width: 2px !important; /* Plus petit */
    border-right-width: 2px !important;
    border-top-width: 3px !important;
  }
  
  /* Panneau de score mobile - repositionné pour éviter les conflits */
  .score-panel {
    position: static;
    transform: none;
    margin-top: 10px; /* Un peu d'espace au-dessus */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease;
    order: 10; /* Après tout le contenu de la navbar */
    width: 100%;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-basis: 100%; /* Force une nouvelle ligne complète */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .score-panel.open {
    max-height: 280px; /* Plus d'espace pour mobile */
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  
  .score-panel-content {
    padding: 8px; /* Fine bordure égale sur mobile */
  }
  
  .score-panel h3 {
    font-size: 16px;
    margin: 4px 0 4px 0; /* Marges réduites et égales */
  }
  
  .score-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px; /* Espacement réduit */
    margin-bottom: 4px; /* Même marge que le haut */
  }
  
  .score-stat {
    font-size: 12px;
    padding: 10px 12px; /* Plus de padding sur mobile pour les doigts */
  }
  
  .score-btn {
    font-size: 10px;
    padding: 6px 12px;
  }
  
  /* S'assurer que la navbar ne déborde pas */
  .navbar {
    position: relative;
    overflow: visible;
  }
  
  /* Lune adaptée pour mobile */
  .moon-large {
    width: 45vw; /* Plus grosse sur mobile pour maintenir l'impact */
    height: 45vw;
    max-width: 300px; /* Limite adaptée au mobile */
    max-height: 300px;
    z-index: -2; /* Même z-index que desktop : derrière les astéroïdes */
    left: -50vw; /* Ajusté pour la taille mobile */
  pointer-events: none; /* Décoratif seulement */
  cursor: default;
  }
  
  /* Satellites adaptés pour mobile */
  .satellite-large {
    width: 70px; /* Même proportion que les astéroïdes sur mobile */
    height: 60px;
  }
  
  @keyframes moonCrossing {
    0% {
      left: -50vw; /* Position de départ mobile */
      opacity: 0;
      transform: scale(0.8);
    }
    5% {
      opacity: 0.8;
      transform: scale(0.9);
    }
    15% {
      opacity: 0.9;
      transform: scale(1);
    }
    85% {
      opacity: 0.9;
      transform: scale(1);
    }
    95% {
      opacity: 0.7;
      transform: scale(0.9);
    }
    100% {
      left: 100vw;
      opacity: 0;
      transform: scale(0.8);
    }
  }
}

/* --- Panneaux & Formulaires (pour contact et autres pages) --- */
.panel { background: var(--bg-1); border: 1px solid var(--border); box-shadow: var(--shadow-soft); padding: 20px; }

.form-group { display: grid; gap: 6px; margin-bottom: 14px; }
.form-group label { font: 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-1); }

.form-control {
  width: 100%; color: var(--ink-0);
  background: #0b1016; border: 1px solid var(--border);
  padding: 10px 12px; font: 14px var(--font-mono); border-radius: 2px;
  outline: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus { border-color: rgba(0,234,255,.55); box-shadow: 0 0 0 2px rgba(0,234,255,.12); background: #0f141c; }
.form-control::placeholder { color: #7e8a93; }

textarea.form-control { min-height: 120px; resize: vertical; }

.form-actions { display: flex; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .14em; font: 12px var(--font-mono);
  padding: 10px 14px; border: 1px solid var(--border); color: var(--ink-0); text-decoration: none; background: linear-gradient(135deg, rgba(0,234,255,.06), rgba(0,0,0,.8)); transition: .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,234,255,.15); border-color: rgba(0,255,156,.45); }
.btn-primary { border-color: rgba(0,255,156,.45); background: linear-gradient(135deg, rgba(0,255,156,.12), rgba(0,0,0,.8)); }
.btn-secondary { border-color: rgba(255,71,255,.35); background: linear-gradient(135deg, rgba(255,71,255,.12), rgba(0,0,0,.8)); }

.alert { padding: 10px 12px; border: 1px solid var(--border); margin-bottom: 14px; font: 13px var(--font-mono); }
.alert-success { border-color: rgba(0,255,156,.45); color: var(--ink-0); }
.alert-danger { border-color: rgba(255,59,89,.6); color: #ffd0d6; }
.alert-info { border-color: rgba(0,234,255,.45); color: var(--ink-0); }

/* --- Cards / Grilles pour École Étoilée & Accueil --- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; }
.card{ background: linear-gradient(135deg, rgba(0,0,0,.8), rgba(0,234,255,.06)); border:1px solid var(--border); padding:18px; position:relative; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); border-color: rgba(0,255,156,.35); box-shadow: 0 10px 20px rgba(0,255,156,.14); }
.card h3{ font-family: var(--font-title); letter-spacing:.08em; margin-bottom:8px; }
.card p{ color: var(--ink-1); font-size:14px; }
.card .card-actions{ margin-top:12px; display:flex; gap:8px; }

/* --- Admin (tables/badges) --- */
.admin-panel { 
  background: var(--bg-1); 
  border: 1px solid var(--border); 
  box-shadow: var(--shadow-soft); 
  padding: 24px; 
  margin-bottom: 20px; 
  border-radius: 4px;
}

.admin-panel h2 { 
  font-family: var(--font-title); 
  font-size: 22px;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
  margin-bottom: 16px; 
  min-width: 32px;
  letter-spacing: 0.1em;
}

/* Ajustements spécifiques pour petits écrans pour éviter le chevauchement emoji/texte */
@media (max-width: 720px) {
  .navbar-score {
    left: 50%; /* recentrer proprement sur mobile */
    transform: translate(-50%, -50%);
    padding: 4px 8px;
  }

  .score-icon { font-size: 14px; }
  .score-label { font-size: 10px; letter-spacing: 0.03em; }
  .score-value { font-size: 12px; min-width: 28px; }
  .score-content { gap: 4px; }
}

.admin-panel h3 {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--c-green);
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: 0.05em;
}

.admin-stats { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); 
  gap: 16px; 
  margin-bottom: 24px;
}

.stat-card { 
  background: linear-gradient(135deg, rgba(0,234,255,0.03), rgba(0,0,0,0.9)); 
  border: 1px solid var(--border); 
  padding: 18px; 
  text-align: center; 
  border-radius: 4px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-cyan);
  box-shadow: 0 4px 12px rgba(0,234,255,0.15);
}

.stat-card h3 { 
  font-size: 28px; 
  color: var(--c-green); 
  text-shadow: var(--glow-green); 
  margin-bottom: 8px;
  font-family: var(--font-title);
}

.stat-card p { 
  color: var(--ink-1); 
  text-transform: uppercase; 
  letter-spacing: 0.08em; 
  font-size: 12px;
  font-family: var(--font-mono);
}

.admin-table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 14px; 
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.5);
}

.admin-table th, 
.admin-table td { 
  border: 1px solid var(--border); 
  padding: 12px 8px; 
  text-align: left;
}

.admin-table th {
  background: linear-gradient(135deg, rgba(0,234,255,0.1), rgba(0,0,0,0.8));
  color: var(--c-cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: bold;
}

.admin-table tr:nth-child(even) {
  background: rgba(0,234,255,0.02);
}

.admin-table tr:hover {
  background: rgba(0,255,156,0.05);
}

.badge { 
  padding: 4px 8px; 
  border: 1px solid var(--border); 
  font: 11px var(--font-mono); 
  text-transform: uppercase; 
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.badge-success { border-color: rgba(0,255,156,.5); color: var(--c-green); background: rgba(0,255,156,0.1); }
.badge-danger { border-color: rgba(255,59,89,.6); color: var(--c-red); background: rgba(255,59,89,0.1); }
.badge-warning { border-color: rgba(248,255,122,.6); color: var(--c-yellow); background: rgba(248,255,122,0.1); }

/* Actions dans les tables */
.admin-table .btn {
  font-size: 10px;
  padding: 6px 10px;
  margin: 0 2px;
}

/* Formulaires admin */
.admin-panel .form-group {
  margin-bottom: 16px;
}

.admin-panel .form-control {
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  color: var(--ink-0);
}

.admin-panel .form-control:focus {
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 2px rgba(0,234,255,0.2);
}

/* --- Accessibilité & tables --- */
.table-responsive{ width:100%; overflow-x:auto; }
.container{ overflow-x: clip; }
.admin-table input[type="text"]{ max-width:100%; }

/* --- Panneau Matrix léger pour le contact --- */

/* Animation Matrix Rain pour la page contact */
@keyframes matrixRain {
  0% { 
    transform: translateY(-300px); 
    opacity: 0; 
  }
  20% { 
    opacity: 0.1; 
  }
  25% { 
    opacity: 0.3; 
  }
  30% { 
    opacity: 0.5; 
  }
  70% { 
    opacity: 0.4; 
  }
  80% { 
    opacity: 0.2; 
  }
  90% { 
    opacity: 0.1; 
  }
  100% { 
    transform: translateY(calc(100vh + 200px)); 
    opacity: 0; 
  }
}

@keyframes matrixGlow {
  0% { 
    text-shadow: 0 0 3px rgba(0, 255, 65, 0.8); 
    color: #00ff41;
  }
  33% { 
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.9); 
    color: #00dd33;
  }
  66% { 
    text-shadow: 0 0 3px rgba(0, 204, 51, 0.8); 
    color: #00cc33;
  }
  100% { 
    text-shadow: 0 0 3px rgba(0, 255, 65, 0.8); 
    color: #00ff41;
  }
}

/* Conteneur Matrix pour la page contact */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1; /* Au-dessus du fond mais sous le contenu */
  overflow: hidden;
  opacity: 0.8; /* Plus visible */
}

.matrix-column {
  position: absolute;
  top: -300px;
  width: 22px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: #00ff41;
  text-shadow: 0 0 2px rgba(0, 255, 65, 0.6);
  animation: matrixRain linear infinite;
  white-space: nowrap;
  line-height: 1.1;
  will-change: transform;
  opacity: 0.7;
  font-weight: normal;
  letter-spacing: 0.02em;
}

.matrix-char {
  display: block;
  animation: matrixGlow 1.5s infinite alternate;
}

/* S'assurer que le contenu reste au-dessus - uniquement sur la page contact */
body.contact-page .container {
  position: relative;
  z-index: 2;
  background: transparent; /* Supprimer le fond carré */
}

/* Améliorer la visibilité du contenu sur la page contact */
body.contact-page .hero-section {
  position: relative;
  z-index: 3;
  background: transparent; /* Supprimer le fond carré */
  padding: 20px;
  margin-bottom: 20px;
}

/* Animation Matrix autorisée sur la page contact */
body.contact-page .matrix-column {
  animation: matrixRain linear infinite !important;
}

body.contact-page .matrix-char {
  animation: matrixGlow 1.5s infinite alternate !important;
}

/* Supprimer TOUS les effets colorés sur la page contact */
body.contact-page .form-control:focus {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
  background: #0f141c !important;
}

body.contact-page .btn:hover {
  transform: none !important;
  box-shadow: var(--shadow-soft) !important;
  border-color: var(--border) !important;
}

body.contact-page .card:hover {
  transform: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* S'assurer que le contenu reste au-dessus - uniquement sur la page contact */
body.contact-page .container {
  position: relative;
  z-index: 2;
  background: transparent; /* Supprimer le fond carré */
}

/* Améliorer la visibilité du contenu sur la page contact */
body.contact-page .hero-section {
  position: relative;
  z-index: 3;
  background: transparent; /* Supprimer le fond carré */
  padding: 20px;
  margin-bottom: 20px;
}

/* Animation Matrix autorisée sur la page contact */
body.contact-page .matrix-column {
  animation: matrixRain linear infinite !important;
}

body.contact-page .matrix-char {
  animation: matrixGlow 1.5s infinite alternate !important;
}

/* Animation de typing pour les messages */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 50% { border-color: transparent; }
  51%, 100% { border-color: var(--c-cyan); }
}

.typing-message {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--c-cyan);
  animation: typing 2s steps(30, end), blink 1s step-end infinite;
  font-family: var(--font-mono);
  color: var(--c-cyan);
  margin: 10px 0;
}

.panel--matrix{ position: relative; overflow: hidden; }
.popup-window{ 
  background:#0b1016; border:1px solid var(--border); box-shadow: var(--shadow-soft); padding:16px; position:relative;
}
.popup-window::before{ 
  content:'SECURE_CHANNEL'; position:absolute; top:-10px; left:12px; font:11px var(--font-mono); 
  color: var(--c-cyan); background:#05080c; border:1px solid var(--border); padding:0 6px; 
  box-shadow: var(--glow-cyan); 
}

/* Styles pour l'effet terminal et typing */
.terminal-line {
  font-family: var(--font-mono);
  color: var(--c-green);
  font-size: 14px;
  margin: 5px 0;
}

.prompt {
  color: var(--c-cyan);
  font-weight: bold;
}

.command {
  color: var(--c-yellow);
  margin-left: 5px;
}

#typing-line {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: 16px;
  min-height: 24px;
  letter-spacing: 0.1em;
}

/* Lisibilité admin */
.admin-panel h2{ text-transform:none; letter-spacing:.06em; }
.stat-card p{ color: var(--ink-1); text-transform:none; letter-spacing:.04em; }

/* --- Auth Card --- */
.auth-card{ 
  max-width: 440px; margin: 40px auto; background: var(--bg-1); border: 1px solid var(--border); 
  box-shadow: var(--shadow-soft); padding: 24px; position: relative; border-radius: 4px;
}
.auth-title{ 
  text-align: center; font-family: var(--font-title); letter-spacing: .14em; margin-bottom: 8px; 
  color: var(--c-cyan); text-shadow: var(--glow-cyan);
}
.auth-subtitle{ 
  text-align: center; color: var(--ink-1); font-size: 14px; letter-spacing: .12em; margin-bottom: 20px; 
}
.auth-actions{ 
  display: flex; gap: 10px; justify-content: space-between; align-items: center; 
  margin-top: 16px; flex-wrap: wrap; 
}

/* Lien mot de passe oublié */
.auth-helper {
  text-align: center;
  margin: 16px 0 8px 0;
}

.forgot-password-link {
  color: var(--c-cyan);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  letter-spacing: 0.08em;
}

.forgot-password-link:hover {
  color: var(--c-green);
  text-shadow: var(--glow-green);
  text-decoration: underline;
}

.forgot-password-link i {
  margin-right: 6px;
}

/* Message d'inscription qui s'ouvre */
.inscription-info {
  margin-top: 20px;
  padding: 0;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.inscription-info .popup-window {
  background: linear-gradient(135deg, rgba(0,234,255,0.03), rgba(0,0,0,0.9));
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 4px;
}

.inscription-info .typing-message {
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
  border: none;
  white-space: normal;
  min-height: 20px;
  letter-spacing: 0.05em;
  position: relative;
}

/* Curseur clignotant avec CSS pendant l'animation */
.typing-message.typing::after {
  content: '|';
  color: var(--c-cyan);
  animation: blink 1s infinite;
  position: absolute;
}

.typing-message.finished::after {
  display: none;
}

/* === ANIMATION 1: CRT SCANLINES + NÉON CASSÉ + PLANÈTE HOLOGRAMME === */
body.homepage {
  position: relative;
  overflow: hidden;
}

/* === ANIMATION 1: CRT SCANLINES + NÉON CASSÉ + PLANÈTE HOLOGRAMME === */
body.homepage {
  position: relative;
  overflow: hidden;
}

/* === ANIMATION 1: CRT SCANLINES + FOND SPATIAL + CEINTURE D'ASTÉROÏDES === */
body.homepage {
  position: relative;
  overflow-x: hidden;
  /* SUPPRIMER: overflow-y: auto; - laisse le navigateur gérer */
  min-height: 100vh;
  width: 100%;
}

/* Fond spatial avec étoiles scintillantes dynamiques */
.space-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: 
    /* Fond espace profond */
    radial-gradient(circle at 50% 50%, rgba(0, 10, 25, 0.8) 0%, rgba(0, 5, 15, 0.95) 100%);
}

/* Étoiles scintillantes avec variantes de bleu */
.star {
  background: #fff;
  position: absolute;
  border-radius: 50%;
  animation: blinkAnim 5s infinite;
  z-index: -3; /* Derrière tout, y compris la lune */
}

.star.blue-light {
  background: #87ceeb;
  box-shadow: 0 0 3px #87ceeb;
}

.star.blue-cyan {
  background: #00bfff;
  box-shadow: 0 0 3px #00bfff;
}

.star.blue-electric {
  background: #1e90ff;
  box-shadow: 0 0 3px #1e90ff;
}

.star.blue-deep {
  background: #4169e1;
  box-shadow: 0 0 3px #4169e1;
}

.star.blue-navy {
  background: #6495ed;
  box-shadow: 0 0 3px #6495ed;
}

@keyframes blinkAnim {
  0% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.1; transform: scale(0.6); }
  75% { opacity: 0.7; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Gros astéroïdes qui traversent l'écran - Styles de base */
.asteroid-large {
  position: absolute;
  width: 80px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: -1;
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
  opacity: 0; /* Commencer invisible */
  left: 100vw; /* Commencer hors écran à droite */
  image-rendering: crisp-edges; /* Améliorer le rendu */
  backface-visibility: hidden; /* Optimiser les performances */
  will-change: transform, left, opacity; /* Optimiser les animations */
  pointer-events: auto !important; /* TOUJOURS cliquables */
  cursor: crosshair; /* Curseur de visée sur les astéroïdes */
}

/* === COUCHES D'ASTÉROÏDES === */

/* Astéroïdes d'arrière-plan (derrière les interfaces) */
.asteroid-large.background {
  z-index: 50 !important;
  opacity: 1 !important; /* Opacité normale */
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6)); /* Filtre normal */
}

/* Astéroïdes normaux (au niveau des interfaces) */
.asteroid-large.normal {
  z-index: 1500 !important;
  opacity: 1 !important;
}

/* Astéroïdes de premier plan (devant les interfaces) */
.asteroid-large.foreground {
  z-index: 1050 !important; /* Juste au-dessus des UI, pas trop haut */
  opacity: 1 !important; /* Opacité normale */
  filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.8)) brightness(1.1);
}

/* Containers pour les différentes couches - fixés au viewport pour rester
   au même emplacement lors du scroll (les astéroïdes ne bougent pas avec la page) */
#asteroids-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -3; /* Derrière la plupart des éléments */
  overflow: hidden;
}

#asteroids-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0; /* Conteneur neutre ; les astéroïdes définissent leur propre z-index */
  overflow: hidden;
}

#asteroids-foreground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2000; /* Devant la plupart des UI si nécessaire */
  overflow: hidden;
}

@keyframes moonCrossing {
  0% {
    left: -40vw; /* Ajusté pour la nouvelle taille */
    opacity: 0;
    transform: scale(0.8);
  }
  5% {
    opacity: 1; /* Opacité complète pour masquer les étoiles */
    transform: scale(0.9);
  }
  15% {
    opacity: 1; /* Opacité complète */
    transform: scale(1);
  }
  85% {
    opacity: 1; /* Opacité complète */
    transform: scale(1);
  }
  95% {
    opacity: 1; /* Opacité complète */
    transform: scale(0.9);
  }
  100% {
    left: 100vw;
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Satellites qui traversent l'écran comme des astéroïdes */
.satellite-large {
  position: absolute;
  width: 80px; /* Même taille que les astéroïdes */
  height: 70px; /* Même taille que les astéroïdes */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: -1;
  filter: drop-shadow(2px 2px 8px rgba(0, 234, 255, 0.4));
  opacity: 0;
  left: 100vw;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  will-change: transform, left, opacity;
}

/* Fallback pour les astéroïdes sans image */
.asteroid-large:not([style*="background-image"]) {
  background: radial-gradient(circle, rgba(120,120,120,0.8) 20%, rgba(80,80,80,0.6) 60%, transparent 100%);
  border-radius: 40%;
}

/* Animation d'apparition douce pour les astéroïdes */
@keyframes asteroidFadeIn {
  0% { 
    opacity: 0; 
    transform: translateX(50px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Les configurations spécifiques et animations sont générées dynamiquement par JavaScript */

/* Étoile filante style GIF - traînée cyan fine avec pulsation subtile */
.simple-shooting-star {
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 12px #00eaff;
  position: relative;
  animation: starPulse 4.5s linear forwards;
}

.simple-shooting-star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, 
    rgba(255,255,255,0.9) 0%, 
    rgba(0,234,255,0.8) 20%, 
    rgba(0,234,255,0.4) 60%, 
    transparent 100%);
  transform: translateY(-50%);
  box-shadow: 0 0 3px rgba(0,234,255,0.6);
  animation: trailStretch 4.5s linear forwards;
}

@keyframes starPulse {
  0% { 
    transform: scale(0.5);
    box-shadow: 0 0 6px #fff, 0 0 12px #00eaff;
  }
  10% { 
    transform: scale(1);
    box-shadow: 0 0 6px #fff, 0 0 12px #00eaff;
  }
  45% { 
    transform: scale(1.3);
    box-shadow: 0 0 8px #fff, 0 0 16px #00eaff, 0 0 24px rgba(0,234,255,0.5);
  }
  55% { 
    transform: scale(1.3);
    box-shadow: 0 0 8px #fff, 0 0 16px #00eaff, 0 0 24px rgba(0,234,255,0.5);
  }
  90% { 
    transform: scale(0.8);
    box-shadow: 0 0 4px #fff, 0 0 8px #00eaff;
  }
  100% { 
    transform: scale(0.6);
    box-shadow: 0 0 2px #fff, 0 0 4px #00eaff;
  }
}

@keyframes trailStretch {
  0% { 
    width: 0; 
    opacity: 1;
    height: 1px;
  }
  20% { 
    width: 80px; 
    opacity: 1;
    height: 1px;
  }
  45% { 
    width: 120px; 
    opacity: 1;
    height: 1.5px;
  }
  55% { 
    width: 120px; 
    opacity: 1;
    height: 1.5px;
  }
  90% { 
    width: 140px; 
    opacity: 0.6;
    height: 1px;
  }
  100% { 
    width: 140px; 
    opacity: 0;
    height: 0.5px;
  }
}

@keyframes simpleStarCrossing {
  0% {
    right: -10px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: calc(100vw + 160px);
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Les configurations spécifiques et animations sont générées dynamiquement par JavaScript */

/* Animations générales */
@keyframes asteroidCrossing {
  0% {
    left: 100vw;
    transform: rotate(0deg);
  }
  100% {
    left: -100px;
    transform: rotate(360deg);
  }
}

@keyframes spaceFloat {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes cityLights {
  0%, 100% { 
    opacity: 1;
    filter: brightness(1) hue-rotate(0deg);
  }
  10% { 
    opacity: 0.7;
    filter: brightness(0.8) hue-rotate(5deg);
  }
  15% { 
    opacity: 1.2;
    filter: brightness(1.3) hue-rotate(-3deg);
  }
  25% { 
    opacity: 0.8;
    filter: brightness(0.9) hue-rotate(8deg);
  }
  35% { 
    opacity: 1.1;
    filter: brightness(1.2) hue-rotate(-5deg);
  }
  45% { 
    opacity: 0.9;
    filter: brightness(1) hue-rotate(3deg);
  }
  55% { 
    opacity: 1.3;
    filter: brightness(1.4) hue-rotate(-8deg);
  }
  65% { 
    opacity: 0.6;
    filter: brightness(0.7) hue-rotate(10deg);
  }
  75% { 
    opacity: 1.1;
    filter: brightness(1.1) hue-rotate(-2deg);
  }
  85% { 
    opacity: 0.8;
    filter: brightness(0.9) hue-rotate(6deg);
  }
  95% { 
    opacity: 1.2;
    filter: brightness(1.3) hue-rotate(-4deg);
  }
}

.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 9999999;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 4px
    );
  opacity: 0.6;
  animation: crtScanlines 0.1s linear infinite;
}

.crt-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0.8;
}

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

/* Animation néon cassé - Une icône à la fois */
body.homepage .social-link {
  position: relative;
}

body.homepage .social-link:nth-child(1) {
  animation: neonFlicker1 24s infinite;
}

body.homepage .social-link:nth-child(2) {
  animation: neonFlicker2 24s infinite;
}

body.homepage .social-link:nth-child(3) {
  animation: neonFlicker3 24s infinite;
}

body.homepage .social-link:nth-child(4) {
  animation: neonFlicker4 24s infinite;
}

body.homepage .social-link:nth-child(5) {
  animation: neonFlicker5 24s infinite;
}

body.homepage .social-link:nth-child(6) {
  animation: neonFlicker6 24s infinite;
}

/* Clignotement de l'icône 1 (0-4s) */
@keyframes neonFlicker1 {
  0%, 12.5%, 100% { opacity: 1; }
  13% { opacity: 0.2; }
  13.5% { opacity: 1; }
  14% { opacity: 0.1; }
  14.3% { opacity: 0.8; }
  14.8% { opacity: 0.3; }
  15% { opacity: 1; }
  16.5%, 100% { opacity: 1; }
}

/* Clignotement de l'icône 2 (4-8s) */
@keyframes neonFlicker2 {
  0%, 16.6%, 25%, 100% { opacity: 1; }
  25.5% { opacity: 0.3; }
  26% { opacity: 1; }
  26.2% { opacity: 0.1; }
  26.8% { opacity: 0.9; }
  27% { opacity: 0.2; }
  27.5% { opacity: 1; }
  29%, 100% { opacity: 1; }
}

/* Clignotement de l'icône 3 (8-12s) */
@keyframes neonFlicker3 {
  0%, 33.3%, 41.6%, 100% { opacity: 1; }
  42% { opacity: 0.2; }
  42.3% { opacity: 0.8; }
  42.8% { opacity: 0.1; }
  43% { opacity: 1; }
  43.5% { opacity: 0.4; }
  44% { opacity: 1; }
  45.8%, 100% { opacity: 1; }
}

/* Animations pour les effets de clic/toucher */
@keyframes laserPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes laserExplosion {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

@keyframes laserParticle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Clignotement de l'icône 4 (12-16s) */
@keyframes neonFlicker4 {
  0%, 50%, 58.3%, 100% { opacity: 1; }
  58.8% { opacity: 0.1; }
  59% { opacity: 0.9; }
  59.5% { opacity: 0.2; }
  60% { opacity: 1; }
  60.2% { opacity: 0.3; }
  60.8% { opacity: 1; }
  62.5%, 100% { opacity: 1; }
}

/* Clignotement de l'icône 5 (16-20s) */
@keyframes neonFlicker5 {
  0%, 66.6%, 75%, 100% { opacity: 1; }
  75.3% { opacity: 0.3; }
  75.8% { opacity: 1; }
  76% { opacity: 0.1; }
  76.5% { opacity: 0.7; }
  77% { opacity: 0.2; }
  77.3% { opacity: 1; }
  79.1%, 100% { opacity: 1; }
}

/* Clignotement de l'icône 6 (20-24s) */
@keyframes neonFlicker6 {
  0%, 83.3%, 91.6%, 100% { opacity: 1; }
  92% { opacity: 0.2; }
  92.2% { opacity: 0.8; }
  92.8% { opacity: 0.1; }
  93.2% { opacity: 1; }
  93.5% { opacity: 0.4; }
  94% { opacity: 1; }
  95.8%, 100% { opacity: 1; }
}

/* Titre avec lueur verte fixe (sans clignotement) */
body.homepage .hero-title,
body.maintenance .hero-title {
  text-shadow: 
    0 0 5px rgba(0, 255, 65, 0.8),
    0 0 10px rgba(0, 255, 65, 0.6),
    0 0 20px rgba(0, 255, 65, 0.4);
}

/* Titre avec lueur bleue pour la page contact */
body.contact-page .hero-title {
  text-shadow: 
    0 0 10px rgba(0, 150, 255, 1),
    0 0 20px rgba(0, 150, 255, 0.8),
    0 0 30px rgba(0, 150, 255, 0.6),
    0 0 40px rgba(0, 150, 255, 0.4) !important;
}

/* === CURSEUR CYBERPUNK PERSONNALISÉ === */

/* Masquer le curseur par défaut */
* {
  cursor: none !important;
}

body {
  cursor: none !important;
}

/* Classes pour les éléments du curseur JavaScript */
.cyberpunk-cursor-main {
  position: fixed;
  pointer-events: none;
  z-index: 10000003 !important; /* au-dessus de la sidebar et de l'overlay CRT */
  mix-blend-mode: screen;
}

.cyberpunk-cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 10000003 !important; /* au-dessus de la sidebar et de l'overlay CRT */
  mix-blend-mode: screen;
}

/* Animation de pulsation du curseur */
@keyframes cursorPulse {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(0, 234, 255, 0.8),
      0 0 20px rgba(0, 234, 255, 0.4),
      inset 0 0 10px rgba(0, 234, 255, 0.2);
  }
  50% {
    box-shadow: 
      0 0 15px rgba(0, 234, 255, 1),
      0 0 30px rgba(0, 234, 255, 0.6),
      inset 0 0 15px rgba(0, 234, 255, 0.3);
  }
}

/* Animation hover spéciale */
@keyframes cursorHoverPulse {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(0, 255, 156, 0.8),
      0 0 25px rgba(0, 255, 156, 0.4),
      inset 0 0 15px rgba(0, 255, 156, 0.2);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(0, 255, 156, 1),
      0 0 35px rgba(0, 255, 156, 0.6),
      inset 0 0 20px rgba(0, 255, 156, 0.3);
  }
}

/* Animation clignotement pour mode texte */
@keyframes textCursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Animation pour le titre héro */
@keyframes heroHoverPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Animation de trail fade */
@keyframes trailFade {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

/* Animations pour les effets laser */
@keyframes laserPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes explosionExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* Masquer sur les appareils tactiles */
@media (hover: none) and (pointer: coarse) {
  .cyberpunk-cursor-main,
  .cyberpunk-cursor-dot {
    display: none !important;
  }
  
  * {
    cursor: auto !important;
  }
  
  body {
    cursor: auto !important;
  }
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
  .cyberpunk-cursor-main {
    width: 16px !important;
    height: 16px !important;
  }
  
  .cyberpunk-cursor-dot {
    width: 3px !important;
    height: 3px !important;
  }
}

/* === SYSTÈME DE DESTRUCTION D'ASTÉROÏDES === */

/* Curseur spécial sur les astéroïdes */
.asteroid-large {
  cursor: crosshair !important;
  transition: all 0.2s ease;
  position: relative;
  pointer-events: auto !important;
  z-index: 5 !important;
}

.asteroid-large:hover {
  filter: drop-shadow(0 0 15px rgba(255, 0, 80, 0.8)) 
          drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
  transform: scale(1.05);
}

/* Effet de visée sur l'astéroïde */
.asteroid-target {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--c-red);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: targetLock 0.5s ease-out forwards;
}

@keyframes targetLock {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-width: 1px;
  }
  50% {
    opacity: 1;
    border-width: 3px;
  }
  100% {
    width: 40px;
    height: 40px;
    opacity: 0.8;
    border-width: 2px;
  }
}

/* Croix de visée */
.asteroid-target::before,
.asteroid-target::after {
  content: '';
  position: absolute;
  background: var(--c-red);
  box-shadow: 0 0 5px rgba(255, 59, 89, 0.8);
}

.asteroid-target::before {
  top: 50%;
  left: -10px;
  right: -10px;
  height: 2px;
  transform: translateY(-50%);
}

.asteroid-target::after {
  left: 50%;
  top: -10px;
  bottom: -10px;
  width: 2px;
  transform: translateX(-50%);
}

/* Animation de pulsation du target */
.asteroid-target {
  animation: targetLock 0.5s ease-out forwards, targetPulse 1.5s ease-in-out infinite 0.5s;
}

@keyframes targetPulse {
  0%, 100% {
    border-color: var(--c-red);
    box-shadow: 0 0 5px rgba(255, 59, 89, 0.5);
  }
  50% {
    border-color: var(--c-yellow);
    box-shadow: 0 0 15px rgba(248, 255, 122, 0.8);
  }
}

/* Effet de destruction */
.asteroid-destruction {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999; /* Au-dessus de tous les astéroïdes et de l'interface */
}

/* Container global pour tous les effets d'explosion */
#explosion-effects-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998; /* Juste en dessous des explosions individuelles */
  overflow: hidden;
}

/* Particules de destruction */
.destruction-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--c-yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(248, 255, 122, 1);
  animation: particleExplode 1s ease-out forwards;
}

@keyframes particleExplode {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* Flash de destruction */
.destruction-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, 
    rgba(248, 255, 122, 0.8) 0%,
    rgba(255, 59, 89, 0.6) 30%,
    rgba(0, 234, 255, 0.4) 60%,
    transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: destructionFlash 0.5s ease-out forwards;
}

@keyframes destructionFlash {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Onde de choc */
.shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border: 3px solid var(--c-cyan);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: shockwaveExpand 0.8s ease-out forwards;
}

@keyframes shockwaveExpand {
  0% {
    width: 50px;
    height: 50px;
    opacity: 1;
    border-width: 3px;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
    border-width: 1px;
  }
}

/* Débris d'astéroïde */
.asteroid-debris {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #8B4513;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(139, 69, 19, 0.8);
  animation: debrisFloat 2s ease-out forwards;
}

@keyframes debrisFloat {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(720deg);
  }
}

/* Score popup */
.score-popup {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-green);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0, 255, 156, 1);
  pointer-events: none;
  z-index: 25;
  animation: scoreRise 1.5s ease-out forwards;
}

@keyframes scoreRise {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  20% {
    transform: translateX(-50%) translateY(-10px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(0.8);
  }
}

/* Responsive pour le système de destruction */
@media (max-width: 768px) {
  .asteroid-hud {
    top: 70px;
    left: 10px;
    padding: 10px 15px;
    min-width: 160px;
  }
  
  .asteroid-hud h3 {
    font-size: 14px;
  }
  
  .hud-stat {
    font-size: 12px;
  }
  
  .asteroid-target {
    width: 30px;
    height: 30px;
  }
  
  /* Ajustements pour les explosions - mêmes effets sur tous les appareils */
  .asteroid-destruction {
    position: fixed !important;
    width: 100px;
    height: 100px;
    z-index: 10000;
    pointer-events: none;
  }
  
  .destruction-flash {
    width: 100px;
    height: 100px;
  }
  
  .shockwave {
    width: 50px;
    height: 50px;
  }
  
  .destruction-particle {
    width: 4px;
    height: 4px;
  }
  
  .asteroid-debris {
    width: 8px;
    height: 8px;
  }
  
  .score-popup {
    font-size: 18px;
    top: -30px;
  }
}

/* Améliorations tactiles pour mobile */
.mobile-asteroid-game .asteroid-large {
  /* Zone de tap plus grande */
  padding: 10px;
  margin: -10px;
  /* Feedback visuel immédiat */
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 0, 80, 0.3);
}

.mobile-asteroid-game .asteroid-large:active {
  transform: scale(0.95);
  filter: drop-shadow(0 0 20px rgba(255, 0, 80, 1)) 
          drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
}

.mobile-asteroid-game .asteroid-target {
  /* Cible plus visible sur mobile */
  width: 35px;
  height: 35px;
  border-width: 3px;
  animation: targetLock 0.3s ease-out forwards, targetPulse 1s ease-in-out infinite 0.3s;
}

/* Indicateur tactile supprimé pour mobile - plus d'emoji de main */
.mobile-asteroid-game .asteroid-large::after {
  display: none !important;
}

.mobile-asteroid-game .asteroid-large:hover::after {
  display: none !important;
}

/* Animation bounceHint supprimée - plus d'indicateur tactile */

/* Animations pour l'explosion de la lune */
@keyframes megaFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  60% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes megaParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}

/* === SYSTÈME DE TIROIR HUD === */

/* HUD avec système de tiroir */
.asteroid-hud {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(7, 8, 11, 0.95);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding: 0;
  z-index: 500;
  min-width: 220px;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* État fermé du tiroir */
.asteroid-hud.collapsed {
  height: 45px;
}

/* État ouvert du tiroir */
.asteroid-hud.expanded {
  height: auto;
  min-height: 200px;
}

/* En-tête du HUD (toujours visible) */
.hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background: rgba(0, 234, 255, 0.05);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease;
}

.hud-header:hover {
  background: rgba(0, 234, 255, 0.1);
}

.hud-title {
  font-size: 14px;
  color: var(--c-cyan);
  text-shadow: 0 0 5px rgba(0, 234, 255, 0.8);
  font-weight: 700;
}

.hud-toggle {
  font-size: 12px;
  color: var(--c-green);
  transition: transform 0.3s ease;
}

.asteroid-hud.expanded .hud-toggle {
  transform: rotate(180deg);
}

/* Contenu du HUD (masqué quand fermé) */
.hud-content {
  padding: 15px;
  opacity: 0;
  max-height: 0;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  overflow: hidden;
}

.asteroid-hud.expanded .hud-content {
  opacity: 1;
  max-height: 300px;
}

.hud-content h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.8);
  color: var(--c-cyan);
}

.hud-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 15px;
}

.hud-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-1);
}

.hud-value {
  color: var(--c-green);
  font-weight: 700;
  text-shadow: 0 0 5px rgba(0, 255, 156, 0.8);
}

.hud-value.best-score {
  color: var(--c-yellow);
  text-shadow: 0 0 5px rgba(248, 255, 122, 0.8);
}

.hud-value.rank {
  color: var(--c-cyan);
  text-shadow: 0 0 5px rgba(0, 234, 255, 0.8);
}

/* Animation nouveau record */
.asteroid-hud.new-record {
  animation: newRecordPulse 2s ease-in-out;
  border-color: var(--c-yellow) !important;
  box-shadow: 0 0 20px rgba(248, 255, 122, 0.6) !important;
}

@keyframes newRecordPulse {
  0%, 100% {
    transform: scale(1);
    border-color: var(--border);
  }
  25% {
    transform: scale(1.05);
    border-color: var(--c-yellow);
  }
  50% {
    transform: scale(1.02);
    border-color: var(--c-yellow);
  }
  75% {
    transform: scale(1.05);
    border-color: var(--c-yellow);
  }
}

/* Actions du HUD */
.hud-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.hud-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid var(--border);
  color: var(--ink-0);
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-mono);
}

.hud-btn:hover {
  background: rgba(0, 255, 156, 0.15);
  border-color: var(--c-green);
  color: var(--c-green);
  text-shadow: 0 0 5px rgba(0, 255, 156, 0.8);
  transform: translateY(-1px);
}

.hud-btn-full {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 150px;
}

/* Animation du HUD lors d'un impact */
.hud-impact {
  animation: hudShake 0.3s ease-in-out;
}

@keyframes hudShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Responsive pour le système de tiroir */
@media (max-width: 768px) {
  .asteroid-hud {
    top: 80px;
    left: 15px;
    right: auto;
    transform: none;
    min-width: 180px;
    max-width: calc(100vw - 30px);
  }
  
  .asteroid-hud.collapsed {
    height: 42px;
  }
  
  .hud-header {
    padding: 11px 14px;
  }
  
  .hud-title {
    font-size: 12px;
  }
  
  .hud-content {
    padding: 12px;
  }
  
  .hud-content h3 {
    font-size: 14px;
  }
  
  .hud-stat {
    font-size: 11px;
  }
  
  .hud-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .hud-btn {
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* ===============================================
   ADMIN GLOBAL SIDEBAR - Taille réduite (WordPress style)
   =============================================== */

/* Barre latérale d'administration globale - Priorité élevée */
.admin-global-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: -160px !important; /* Masquée par défaut, largeur réduite comme WordPress */
  width: 160px !important; /* Taille réduite inspirée de WordPress */
  height: 100vh !important;
  background: rgba(0, 20, 40, 0.95) !important;
  border-right: 1px solid var(--purple-2) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 10000001 !important; /* au-dessus de l'overlay CRT (9999999) */
  transition: all 0.3s ease !important;
  overflow: hidden !important; /* Pas de scroll sur la sidebar elle-même */
  display: flex !important;
  flex-direction: column !important;
  transform: none !important; /* Remplacer le transform par left */
}

/* Sidebar repliée (collapsed) - comme WordPress */
.admin-global-sidebar.collapsed {
  width: 36px !important; /* Largeur ultra-réduite pour icônes seulement */
  transform: translateX(-100%) !important; /* Masquer complètement */
}

.admin-global-sidebar.collapsed.active {
  transform: translateX(0) !important; /* Afficher quand active */
}

/* S'assurer que la sidebar repliée reste visible en frontend */
body:not(.admin-page) .admin-global-sidebar.collapsed.active {
  transform: translateX(0) !important;
  width: 36px !important;
}

/* Masquer le texte en mode collapsed */
.admin-global-sidebar.collapsed span {
  display: none !important;
}

/* Ajuster le header en mode collapsed */
.admin-global-sidebar.collapsed .admin-sidebar-header {
  padding: 0.5rem 0.25rem !important;
  text-align: center;
}

.admin-global-sidebar.collapsed .admin-sidebar-header h3,
.admin-global-sidebar.collapsed .admin-sidebar-header .site-dropdown {
  display: none !important;
}

/* Centrer les icônes en mode collapsed */
.admin-global-sidebar.collapsed .admin-menu-link {
  justify-content: center !important;
  padding: 0.75rem 0.5rem !important;
}

.admin-global-sidebar.collapsed .admin-sidebar-status {
  display: none !important;
}

/* Ajuster l'espacement du contenu quand sidebar collapsed */
body.admin-page.sidebar-collapsed .admin-layout,
body.admin-page.sidebar-collapsed main,
body.admin-page.sidebar-collapsed .container {
  padding-left: 36px !important;
  margin-left: 0 !important;
}

/* Spécifique pour les pages admin */
body.admin-page.sidebar-collapsed .admin-layout,
body.sidebar-collapsed.admin-page .admin-layout {
  padding-left: 36px !important;
  margin-left: 0 !important;
}

/* S'assurer que le contenu utilise tout l'espace disponible */
body.admin-page.sidebar-collapsed .admin-content,
body.admin-page.sidebar-collapsed .admin-main,
body.admin-page.sidebar-collapsed .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
}

/* Règle ultra-spécifique pour forcer l'espacement */
html body.admin-page.sidebar-collapsed .admin-layout,
html body.admin-page.sidebar-collapsed main,
html body.admin-page.sidebar-collapsed .container {
  padding-left: 36px !important;
  margin-left: 0 !important;
  transition: padding-left 0.3s ease !important;
}

/* Override pour tous les éléments potentiellement problématiques */
body.sidebar-collapsed * {
  box-sizing: border-box !important;
}

/* Sidebar ouverte - utiliser la classe 'active' qui est déjà utilisée */
.admin-global-sidebar.active {
  left: 0 !important;
  transform: none !important;
}

/* Header de la sidebar */
.admin-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--purple-2);
  background: rgba(0, 10, 30, 0.8);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-sidebar-header h3 {
  margin: 0;
  color: var(--purple-1);
  font-size: 1rem; /* Légèrement plus petit */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admin-sidebar-close {
  background: transparent;
  border: none;
  color: var(--ink-1);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: color 0.3s ease;
}

.admin-sidebar-close:hover {
  color: var(--purple-1);
}

/* Navigation */
.admin-sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
}

/* Statut sidebar - minimal pour ne pas prendre trop de place */
.admin-sidebar-status {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--purple-2);
  background: rgba(0, 10, 30, 0.6);
  font-size: 0.75rem;
  max-height: 60px; /* Limiter la hauteur */
  overflow: hidden;
}

.admin-sidebar-status .status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  color: var(--ink-2);
  line-height: 1.2;
}

.admin-sidebar-status .status-item:last-child {
  margin-bottom: 0;
}

.admin-sidebar-status i {
  width: 12px;
  font-size: 0.7rem;
}

.admin-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-menu-item {
  margin: 0;
}

.admin-menu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Espace réduit */
  padding: 0.75rem 1rem; /* Padding réduit */
  color: var(--ink-1);
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  font-size: 0.9rem; /* Texte légèrement plus petit */
}

.admin-menu-link:hover {
  background: rgba(87, 13, 248, 0.1);
  color: var(--purple-1);
  border-left-color: var(--purple-1);
}

.admin-menu-link.active {
  background: rgba(87, 13, 248, 0.2);
  color: var(--purple-1);
  border-left-color: var(--purple-1);
}

.admin-menu-link i {
  width: 16px; /* Icônes plus petites */
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Style spécifique pour le lien "Replier le menu" */
.collapse-menu-link {
  font-size: 0.75rem !important; /* Police plus petite pour afficher le texte en entier */
  padding: 0.6rem 1rem !important; /* Padding légèrement réduit */
}

.collapse-menu-link span {
  white-space: nowrap; /* Empêcher le retour à la ligne */
}

.admin-menu-divider {
  height: 1px;
  background: var(--purple-2);
  margin: 0.5rem 1rem;
}

/* Bouton de toggle */
.admin-sidebar-toggle-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000002; /* au-dessus de la sidebar */
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid var(--purple-2);
  color: var(--purple-1);
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 1.1rem;
}

.admin-sidebar-toggle-btn:hover {
  background: rgba(87, 13, 248, 0.2);
  transform: scale(1.05);
}

.admin-sidebar-toggle-btn .tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.admin-sidebar-toggle-btn:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Overlay pour fermer la sidebar */
.admin-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000000; /* sous la sidebar, au-dessus du contenu */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.admin-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Ajustements pour les pages admin */
body.admin-page {
  transition: margin-left 0.3s ease;
}

/* Espacement du contenu géré par admin-styles.css avec padding-left */

/* Responsive */
@media (max-width: 768px) {
  .admin-global-sidebar {
    width: 280px; /* Plus large sur mobile pour la lisibilité */
    left: -280px;
  }
  
  /* Mode collapsed sur mobile - un peu plus large pour les doigts */
  .admin-global-sidebar.collapsed {
    width: 48px !important;
    transform: translateX(-100%) !important;
  }
  
  .admin-global-sidebar.collapsed.active {
    transform: translateX(0) !important;
  }
  
  /* Ajuster l'espacement du contenu mobile collapsed */
  body.admin-page.sidebar-collapsed .admin-layout {
    padding-left: 48px !important;
  }
  
  /* Masquer le bouton "Replier le menu" sur très petit écran */
  @media (max-width: 480px) {
    .collapse-menu-link {
      display: none !important;
    }
  }
  
  body.admin-page.sidebar-open,
  body.sidebar-open {
    margin-left: 0; /* Pas de décalage sur mobile */
  }
  
  .admin-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}