/* ======================
   🌙 Style global
====================== */
body {
  font-family: 'Arial', sans-serif;
  background: #0A1A2A;
  color: #fff;
  margin: 0;
  height: 100%;
  overflow-x: hidden;
}

/* ======================
   🎯 Container principal
====================== */
.container-neurons {
  position: relative;
  z-index: 0;                 /* plan de référence pour les z-index internes */

  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 100dvh pour mobiles (barres d'URL dynamiques) */
  min-height: 100dvh;
  height: auto;

  box-sizing: border-box;
  overflow-x: hidden;         /* pas de scroll horizontal */
  overflow-y: visible;        /* éviter le clipping des labels/glow */
}

/* ======================
   🧠 SVG - Réseau neuronal
====================== */
.container-neurons svg {
  position: relative;
  display: block;
  margin: auto;
  width: min(100%, 900px);
  height: auto;

  /* important pour un vrai responsive SVG */
  max-height: none;           /* libère la hauteur si besoin */
  overflow: visible;          /* ne pas clipper les ombres/labels */

  z-index: 1;                 /* au-dessus des particules */
  pointer-events: none;       /* ← le SVG est traversable par défaut */
  --core-stroke: 1;
}

/* (AJOUT) Rendre cliquables UNIQUEMENT les éléments interactifs du SVG */
.container-neurons svg a,
.container-neurons svg .svg-btn,
.container-neurons svg [data-interactive="true"],
.container-neurons svg .neuron {
  pointer-events: auto;       /* ← réactive les events sur les boutons */
  cursor: pointer;
}

/* (AJOUT) Empêcher les calques décoratifs de bloquer la souris entre les boutons */
.container-neurons svg .line,
.container-neurons svg #central-polygon,
.container-neurons svg .label-group,
.container-neurons svg .label-rect,
.container-neurons svg .label-text {
  pointer-events: none;
}

/* Lignes de liaison */
.line {
  stroke: #00FFFF;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.4;
  animation: pulseLine 3s infinite alternate;
}

@keyframes pulseLine {
  from { stroke-opacity: 0.2; }
  to   { stroke-opacity: 1; }
}

@keyframes pulseGlow {
  0%   { filter: drop-shadow(0 0 4px #00ffff); opacity: 0.75; }
  50%  { filter: drop-shadow(0 0 6px #00ffff); opacity: 1; }
  100% { filter: drop-shadow(0 0 4px #00ffff); opacity: 0.75; }
}

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

.label-group.active { animation: fadeInZoom 1.8s ease-out both; }
#central-polygon   { animation: pulseGlow 6s infinite; }

/* ======================
   🔷 Neurones hexagonaux
====================== */
.neuron {
  cursor: pointer;
  transition: filter 0.3s ease;
}

.neuron:hover {
  filter: drop-shadow(0 0 8px #00FFFF);
}

.neuron.active {
  stroke: #00ccff;
  stroke-width: 2.5;
  fill: #a0ffff;
  filter: drop-shadow(0 0 10px #00f0ff);
}

/* ======================
   🧠 Labels des neurones
====================== */
.label-group {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.neuron-group:hover .label-group,
.label-group.active {
  opacity: 1;
  pointer-events: auto;
}

.neuron-group:hover .label-rect {
  filter: drop-shadow(0 0 10px #00ffff);
  fill: #b5efff;
  stroke: #ffffff;
}

/* Boîte label (couleurs) */
.label-rect {
  fill: #a9d5f5;
  stroke: #147bb1;
  stroke-width: 1.2;
  rx: 8;
  ry: 8;
  transition: all 0.3s ease;
}

/* Texte du label — responsive via clamp */
.label-text {
  fill: #0c2438;
  font-family: Arial, sans-serif;
  font-weight: bold;
  pointer-events: none;
  font-size: clamp(12px, 2.5vw, 16px);
}

.label-group.active .label-rect {
  fill: #e0faff;
  stroke: #00ccff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 10px #00f0ff);
}

.label-group.active .label-text { fill: #00334d; }

/* ======================
   📄 Sections de contenu
====================== */
.section {
  min-height: 60vh;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
  background: #fff;
  color: #333;
}

.section:nth-of-type(even) {
  background: #f0f6ff;
}

/* ======================
   Canvas particules (derrière)
====================== */
#particles-js {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 1;               /* sous le SVG, au-dessus du fond de page */
  pointer-events: auto;     /* ← capte le hover/canvas pour repulse */
}

/* ======================
   Compteur (non bloquant)
====================== */
.count-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* ne bloque rien */
  z-index: 0;                /* même plan que les particules (ou inférieur) */
  color: transparent;        /* invisible si non utilisé */
}

/* ======================
   Touch-friendly
====================== */
@media (hover: none) and (pointer: coarse) {
  .neuron:hover { filter: none; }
}