/* =============================================
   HERO — CODE BACKGROUND
   ============================================= */

/* Canvas plein écran derrière le contenu */
.esic-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

/* Code snippets flottants */
.esic-hero__code-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.esic-code-tag {
  position: absolute;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(2px);
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  animation: codeFloat 12s ease-in-out infinite;
}

/* Couleurs syntaxe */
.esic-code-kw  { color: #93C5FD; } /* bleu clair — keywords */
.esic-code-str { color: #6EE7B7; } /* vert — strings */
.esic-code-fn  { color: #FCA5A5; } /* rose — functions */
.esic-code-num { color: #FCD34D; } /* jaune — numbers */

/* Positions et délais décalés */
.esic-code-tag--1 { top: 12%;  left: 3%;   animation-delay: 0s;    animation-duration: 14s; }
.esic-code-tag--2 { top: 28%;  right: 4%;  animation-delay: 2s;    animation-duration: 16s; }
.esic-code-tag--3 { top: 55%;  left: 2%;   animation-delay: 4s;    animation-duration: 13s; }
.esic-code-tag--4 { top: 70%;  right: 6%;  animation-delay: 1s;    animation-duration: 15s; }
.esic-code-tag--5 { top: 18%;  right: 2%;  animation-delay: 5s;    animation-duration: 17s; }
.esic-code-tag--6 { top: 42%;  left: 1%;   animation-delay: 3s;    animation-duration: 14s; }
.esic-code-tag--7 { top: 80%;  left: 5%;   animation-delay: 6s;    animation-duration: 18s; }
.esic-code-tag--8 { top: 88%;  right: 3%;  animation-delay: 7s;    animation-duration: 12s; }

@keyframes codeFloat {
  0%   { opacity: 0;    transform: translateY(10px); }
  15%  { opacity: 0.7; }
  50%  { opacity: 0.5;  transform: translateY(-8px); }
  85%  { opacity: 0.7; }
  100% { opacity: 0;    transform: translateY(10px); }
}

/* Cacher les snippets sur mobile pour ne pas gêner */
@media (max-width: 767px) {
  .esic-hero__code-deco { display: none; }
}

/* S'assurer que le contenu hero passe au-dessus du canvas */
.esic-hero__inner { position: relative; z-index: 1; }