/* Design System Cyberpunk 2077 HUD - K.E.V.I.N */
/* Surcharges Bootstrap 5 avec angles coupés (clip-path) et couleurs néons jaune/cyan/rouge */

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

:root {
  /* Cyberpunk 2077 Color Palette */
  --bg-primary: hsl(240, 20%, 3%);
  --bg-secondary: hsl(240, 25%, 1.5%);
  --bg-glass: hsla(240, 20%, 4%, 0.85);
  
  /* Signature Accents */
  --accent-yellow: hsl(57, 100%, 51%);      /* Jaune Cyberpunk 2077 signature */
  --accent-cyan: hsl(188, 100%, 50%);        /* Cyan HUD */
  --accent-red: hsl(350, 100%, 50%);         /* Rouge alerte / glitch */
  
  --accent-primary: var(--accent-yellow);
  --accent-secondary: var(--accent-cyan);
  --accent-glow: hsla(57, 100%, 51%, 0.25);
  
  --border-glass: hsla(188, 100%, 50%, 0.15);
  --border-glass-focus: hsla(188, 100%, 50%, 0.5);

  --text-main: hsl(188, 30%, 92%);
  --text-muted: hsl(188, 20%, 65%);
  --text-dark: #000000;

  /* Typography */
  --font-family-title: 'Orbitron', sans-serif;
  --font-family-body: 'Space Grotesk', sans-serif;
  --font-family-mono: 'Share Tech Mono', monospace;

  /* Spacing & Borders (Cyberpunk uses sharp 0px corners, and clips them manually) */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --transition-smooth: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body {
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(at 0% 0%, hsla(350, 60%, 5%, 0.5) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(188, 60%, 5%, 0.5) 0px, transparent 50%),
    /* Grille de données HUD */
    linear-gradient(rgba(188, 100%, 50%, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(188, 100%, 50%, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 25px 25px, 25px 25px;
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-family-body);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* Effet Scanline CRT subtil sur l'ensemble de l'écran */
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.015), rgba(0, 255, 0, 0.005), rgba(0, 0, 255, 0.015));
  background-size: 100% 4px, 6px 100%;
  z-index: 99999;
  pointer-events: none;
}

/* Texte atténué style terminal */
.text-muted {
  color: var(--text-muted) !important;
  font-family: var(--font-family-mono);
  letter-spacing: 0.5px;
}

/* Header style HUD Cyberpunk */
header {
  backdrop-filter: blur(20px);
  background: hsla(240, 25%, 2%, 0.95);
  border-bottom: 2px solid var(--accent-yellow);
  padding: 1rem 0;
  z-index: 1000;
  position: relative;
}

header::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 10%;
  width: 80px;
  height: 4px;
  background: var(--accent-red);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

/* Logo HUD */
.logo-icon {
  background: var(--accent-yellow);
  clip-path: polygon(0px 0px, 24px 0px, 32px 8px, 32px 32px, 8px 32px, 0px 24px);
  height: 32px;
  width: 32px;
  border: 1px solid #000;
  box-shadow: 0 0 8px var(--accent-glow);
}

.logo-text {
  font-family: var(--font-family-title);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 10px hsla(57, 100%, 51%, 0.4);
}

.logo-text span {
  color: var(--accent-yellow);
}

/* Boutons de navigation style HUD Cyberpunk (Coins coupés et surbrillance jaune) */
.nav-pills .nav-link {
  border-radius: 0px !important;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-family-title);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

.nav-pills .nav-link:hover {
  background: hsla(57, 100%, 51%, 0.1);
  color: var(--accent-yellow);
  border-color: rgba(252, 238, 10, 0.3);
}

.nav-pills .nav-item.active .nav-link, 
.nav-pills .nav-link.active {
  background: var(--accent-yellow) !important;
  color: #000 !important;
  font-weight: 900;
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 15px hsla(57, 100%, 51%, 0.45);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Cartes Glassmorphism avec bande latérale jaune */
.glass-card {
  backdrop-filter: blur(20px);
  background: var(--bg-glass) !important;
  border: 1px solid var(--border-glass) !important;
  border-left: 4px solid var(--accent-yellow) !important;
  border-radius: 0px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
  color: var(--text-main) !important;
  transition: var(--transition-smooth);
  position: relative;
}

.glass-card::after {
  content: 'SECURE_DATA_NODE';
  position: absolute;
  top: -8px;
  right: 15px;
  font-family: var(--font-family-mono);
  font-size: 0.6rem;
  background: var(--accent-red);
  color: #fff;
  padding: 0px 5px;
  letter-spacing: 1px;
}

.glass-card:hover {
  border-color: hsla(188, 100%, 50%, 0.35) !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7), 0 0 20px hsla(188, 100%, 50%, 0.1) !important;
}

.card-title {
  font-family: var(--font-family-title);
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}

/* Contrôles de formulaires (Inputs/Textareas) */
.form-control, .form-control:focus {
  background-color: hsla(240, 20%, 1%, 0.9) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: 0px !important;
  color: var(--text-main) !important;
  font-family: var(--font-family-mono);
  transition: var(--transition-smooth);
}

.form-control:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 15px hsla(188, 100%, 50%, 0.3) !important;
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.4;
}

.form-label {
  color: var(--accent-cyan);
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Boutons de contrôle (Bouton Jaune, police noire) */
.btn-primary {
  background: var(--accent-yellow) !important;
  border: none !important;
  border-radius: 0px !important;
  box-shadow: 0 0 10px hsla(57, 100%, 51%, 0.2) !important;
  color: #000 !important;
  font-family: var(--font-family-title);
  font-weight: 900 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: var(--transition-smooth) !important;
}

.btn-primary:hover {
  background: var(--accent-cyan) !important;
  box-shadow: 0 0 25px hsla(188, 100%, 50%, 0.6) !important;
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) !important;
}

/* Boutons d'icône Cyberpunk (ex: Afficher/masquer mot de passe) */
.btn-cyber-icon {
  background-color: hsla(240, 20%, 1%, 0.9) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: 0px !important;
  color: var(--accent-cyan) !important;
  transition: var(--transition-smooth);
}

.btn-cyber-icon:hover {
  color: var(--accent-yellow) !important;
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 10px hsla(57, 100%, 51%, 0.3) !important;
}

/* Zone de discussion (Chat) */
.chat-messages {
  background: hsla(240, 20%, 1%, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: 0px;
}

.chat-bubble {
  max-width: 80%;
  font-size: 0.95rem;
  border-radius: 0px !important;
  transition: var(--transition-smooth);
}

.chat-bubble.user {
  background: hsla(188, 100%, 50%, 0.08) !important;
  border: 1px solid var(--accent-cyan) !important;
  border-right: 4px solid var(--accent-cyan) !important;
  color: #fff;
  margin-left: auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  box-shadow: 0 0 15px hsla(188, 100%, 50%, 0.08);
}

.chat-bubble.kevin {
  background: hsla(57, 100%, 51%, 0.04) !important;
  border: 1px solid rgba(252, 238, 10, 0.3) !important;
  border-left: 4px solid var(--accent-yellow) !important;
  color: var(--text-main);
  margin-right: auto;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

/* Cartes de souvenirs */
.memory-card {
  transition: var(--transition-smooth);
  border-left: 3px solid var(--accent-cyan) !important;
  border-radius: 0px !important;
}

.memory-card:hover {
  transform: translateY(-4px);
  border-left-color: var(--accent-yellow) !important;
  box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.7), 0 0 20px hsla(57, 100%, 51%, 0.1) !important;
}

/* Cartes de recommandations */
.rec-card {
  position: relative;
  transition: var(--transition-smooth);
  border-radius: 0px !important;
}

.rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.7), 0 0 20px hsla(188, 100%, 50%, 0.1) !important;
}

.rec-card::before {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-red));
  content: '';
  height: 3px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  box-shadow: 0 0 10px var(--accent-cyan);
}

/* Badges de tags style HUD */
.badge {
  border-radius: 0px !important;
  background: hsla(188, 100%, 50%, 0.08) !important;
  border: 1px solid var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-glass);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-yellow);
}

/* Écran de Connexion (Login Overlay) */
.ecran-connexion {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(at 0% 0%, hsla(350, 60%, 6%, 0.98) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(57, 60%, 4%, 0.98) 0px, transparent 50%),
    linear-gradient(rgba(188, 100%, 50%, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(188, 100%, 50%, 0.015) 1px, transparent 1px),
    var(--bg-primary);
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
  backdrop-filter: blur(25px);
  z-index: 9999;
  overflow: hidden;
}

.login-card {
  animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  border-left: 4px solid var(--accent-red) !important;
}

.login-card::after {
  content: 'RESTRICTED_ACCESS_PORTAL';
  background: var(--accent-red);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- RESPONSIVE DESIGNS --- */
@media (max-width: 768px) {
  /* Aligner la navigation et le logo verticalement sur mobile */
  .nav-container {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  header {
    padding: 0.8rem 0 !important;
  }
  
  .logo {
    margin-bottom: 0.2rem;
  }

  .nav-pills {
    width: 100%;
    justify-content: center;
    gap: 0.5rem !important;
  }

  /* Ajuster la hauteur de la zone de discussion sur petit écran */
  .chat-container {
    height: 480px !important;
  }

  /* Rendre les boutons plus compacts */
  .nav-pills .nav-link {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.7rem !important;
  }
}