.neon-text {
  /* La couleur de base du texte (très claire, presque blanche) */
  color: #ccffcc; 
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  
  /* C'est ici que la magie opère : on empile les ombres en les séparant par des virgules */
  text-shadow: 
    0 0 2px #fff,       /* Cœur blanc brillant */
    0 0 5px #fff,       /* Halo blanc proche */
    0 0 10px #00ff41,   /* Début du halo vert */
    0 0 20px #00ff41,   /* Halo vert moyen */
    0 0 40px #00ff41;   /* Halo vert large */
}

.neon-box {
  background-color: #050a0500; /* Fond très sombre */
  border: 2px solid #ceffda; /* Bordure verte de base */
  padding: 20px;
  width: 300px;
  
  box-shadow: 
    0 0 10px #00ff41,         /* Ombre extérieure */
    inset 0 0 10px #00ff41;   /* Ombre intérieure */
}

.neon-flicker {
  color: #ccffcc;
  animation: flicker 2s infinite alternate;
}

/* On définit l'animation qui fait varier l'intensité de l'ombre */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 
      0 0 2px #fff,
      0 0 10px #00ff41,
      0 0 20px #00ff41;
  }
  20%, 24%, 55% {
    /* Le néon s'éteint presque une fraction de seconde */
    text-shadow: none;
    color: #003300; 
  }
}

/* 1. Le style de base de tes liens */
a.neon-link {
  color: #ccffcc; 
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  
  /* C'est ici que la magie opère : on empile les ombres en les séparant par des virgules */
  text-shadow: 
    0 0 2px #fff,       /* Cœur blanc brillant */
    0 0 5px #fff,       /* Halo blanc proche */
    0 0 10px #00ff41,   /* Début du halo vert */
    0 0 20px #00ff41,   /* Halo vert moyen */
    0 0 40px #00ff41;   /* Halo vert large */
}

/* 2. L'effet au survol (Hover) */
a.neon-link:hover {
  /* On change légèrement la couleur principale pour marquer l'interaction */
  color: #ffffff; 
  /* On applique une animation TRES rapide (0.15s) qui boucle à l'infini */
  animation: glitch-flicker 0.15s infinite;
}

/* 3. L'animation de grésillement (Glitch/Flicker) */
@keyframes glitch-flicker {
  0% {
    text-shadow: 0 0 2px #fff, 0 0 10px #00ff41, 0 0 20px #00ff41;
    opacity: 1;
  }
  25% {
    /* Le néon "saute", l'ombre disparaît et le texte s'assombrit */
    text-shadow: none;
    opacity: 0.4;
  }
  50% {
    /* Il revient faiblement */
    text-shadow: 0 0 2px #fff, 0 0 5px #00ff41;
    opacity: 0.8;
  }
  75% {
    /* Une surcharge d'énergie (flash plus fort) */
    text-shadow: 0 0 5px #fff, 0 0 15px #00ff41, 0 0 40px #00ff41;
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 2px #fff, 0 0 10px #00ff41, 0 0 20px #00ff41;
    opacity: 1;
  }
}

.neon-button {
  background-color: transparent; /* Fond transparent pour voir le noir derrière */
  border: 2px solid #ccffd9;
  color: #b8ffca;
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 24px;
  text-transform: uppercase; /* Toujours en majuscules pour l'autorité */
  cursor: pointer;
  letter-spacing: 2px; /* Espace un peu les lettres pour le style terminal */
  outline: none; /* Enlève la bordure bleue par défaut des navigateurs */

  /* Le double halo (intérieur et extérieur) */
  box-shadow: 
    0 0 5px #00ff41,
    inset 0 0 5px #00ff41;
    
  /* Le léger glow sur le texte */
  text-shadow: 0 0 5px #00ff41;

  /* Une transition très rapide pour que l'effet soit sec mais fluide */
  transition: all 0.1s ease-in-out;
}

/* 2. L'effet au survol (Hover) : L'inversion de couleurs */
.neon-button:hover {
  background-color: #b2ffc5; /* Le bouton se remplit de lumière */
  color: #050a05; /* Le texte devient sombre (couleur de ton fond) */
  
  /* On intensifie le halo extérieur */
  box-shadow: 
    0 0 15px #00ff41,
    0 0 30px #00ff41,
    inset 0 0 10px #00ff41;
  
  /* On enlève l'ombre du texte car il est devenu foncé */
  text-shadow: none; 
}

/* 3. L'effet au clic (Active) : L'enfoncement */
.neon-button:active {
  /* Réduit très légèrement la taille pour donner l'illusion d'appuyer sur une touche */
  transform: scale(0.96); 
  box-shadow: 
    0 0 5px #00ff41,
    inset 0 0 5px #00ff41;
}

/*Zone de recherche*/

/* Le conteneur pour aligner le " > " et l'input */
.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: rgba(0, 51, 0, 0);
  padding: 10px;
  border: 1px solid #bdffcd;
}

/* Le faux curseur/prompt avant l'input */
.prompt-symbol {
  color: #b5ffc8;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  margin-right: 10px;
  text-shadow: 0 0 5px #00ff41;
}

/* Le champ de saisie (Input) */
.terminal-input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #9effb6; /* Seulement une ligne en bas */
  color: #ccffcc;
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  padding: 5px;
  outline: none; /* Enlève le contour bleu par défaut du navigateur */
  text-shadow: 0 0 2px #fff, 0 0 5px #00ff41;
}

.terminal-input:focus {
  border-bottom: 2px solid #fff; /* S'illumine quand on tape dedans */
}

/*Tableau résultat*/

/* Le tableau complet */
.data-table {
  width: 100%;
  border-collapse: collapse; /* Fusionne les bordures pour un effet quadrillage parfait */
  margin-top: 15px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  color: #85ffa3;
}

/* Cellules et En-têtes */
.data-table th, .data-table td {
  border: 1px solid #9bffb4;
  padding: 10px;
  text-align: left;
}

/* En-têtes du tableau */
.data-table th {
  background-color: rgba(0, 255, 65, 0.2); /* Fond légèrement vert */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Effet au survol d'une ligne de la base de données (Inversion) */
.data-table tbody tr:hover {
  background-color: #00ff41;
  color: #050a05;
  cursor: crosshair; /* Le curseur devient une cible */
  font-weight: bold;
}

/*Panel SQL*/

/* La zone de texte SQL */
.sql-textarea {
  width: 100%;
  min-height: 150px;
  background-color: #020502; /* Noir encore plus profond */
  border: 1px solid #00ff41;
  color: #00ff41;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  padding: 15px;
  resize: vertical; /* Empêche de redimensionner en largeur, seulement en hauteur */
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.2);
  margin-bottom: 15px;
}

/* Un conteneur pour aligner les boutons de structure en dessous */
.action-buttons-row {
  display: flex;
  gap: 15px; /* Espace entre les boutons */
}

/*Profil Agent*/

.profile-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 200px pour la photo, le reste pour les infos */
  gap: 30px;
  padding: 20px;
  border: 1px solid #00ff41;
  background-color: rgba(0, 51, 0, 0.1);
}

/* L'emplacement de la photo */
.profile-avatar {
  width: 100%;
  height: 250px;
  border: 2px dashed #00ff41; /* Bordure en pointillés pour un style "dossier" */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #00ff41;
  font-weight: bold;
}

/* Les lignes d'informations (Clé / Valeur) */
.info-line {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 65, 0.3);
  padding-bottom: 5px;
}

.info-label {
  width: 150px;
  color: #88ff88; /* Vert un peu plus terne pour le libellé */
  font-weight: bold;
}

.info-data {
  color: #fff; /* La donnée brute ressort en blanc/lumineux */
  text-shadow: 0 0 5px #00ff41;
}

/*additionnel*/

/* Message d'erreur critique (Rouge) */
.alert-error {
  border: 2px solid #ff0000;
  background-color: rgba(255, 0, 0, 0.1);
  color: #ff0000;
  padding: 15px;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ff0000;
  box-shadow: inset 0 0 10px #ff0000;
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% { opacity: 0.8; }
  50% { opacity: 1; box-shadow: inset 0 0 20px #ff0000; }
  100% { opacity: 0.8; }
}

/* Texte de chargement clignotant */
.loading-blink {
  color: #ffff00; /* Jaune pour les processus en cours */
  font-family: 'Courier New', Courier, monospace;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}


/* --- LE CONTENEUR GLOBAL --- */
.terminal-wrapper {
    display: flex;
    height: 100vh; /* Remplit tout l'écran */
    padding: 20px; /* Un peu d'espace avec les bords de ton écran physique */
    box-sizing: border-box;
    gap: 20px; /* L'écart entre ton menu et ta zone de droite */
}

/* --- LE MENU DE GAUCHE --- */
.sidebar {
    width: 250px;
    border: 2px solid #00ff41;
    box-shadow: 0 0 10px #00ff41, inset 0 0 10px rgba(0, 255, 65, 0.2);
    padding: 20px;
    /* Optionnel : S'il y a trop de liens un jour, il pourra scroller aussi */
    overflow-y: auto; 
}

/* --- LA ZONE DYNAMIQUE (LE COEUR DU PROBLÈME) --- */
.dynamic-content-zone {
    flex-grow: 1; /* Dit à la zone de prendre TOUTE la largeur restante */
    height: 100%; /* Prend 100% de la hauteur du .terminal-wrapper */
    
    border: 2px solid #00ff41; /* Ta bordure néon */
    box-shadow: 0 0 10px #00ff41, inset 0 0 10px rgba(0, 255, 65, 0.2);
    padding: 20px;
    box-sizing: border-box;
    
    /* LA MAGIE EST ICI */
    overflow-y: auto; /* Active le scroll INTERNE vertical */
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

/* --- DESIGN DE L'ASCENSEUR (SCROLLBAR) --- */
.dynamic-content-zone::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 8px;
}
.dynamic-content-zone::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 20, 0, 0.5); 
    border-left: 1px solid #004400;
}
.dynamic-content-zone::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: #00ff41; 
    border-radius: 4px;
    box-shadow: 0 0 5px #00ff41;
}