/* Hero pattern tech — fond non-uni discret thème "nouvelles technologies"
 *
 * 3 variantes disponibles, à activer via la classe .hero-tech-* sur le wrapper hero
 * Toutes les variantes utilisent les couleurs em-navy (#1f2a44) et em-cyan (#00FFFF)
 * pour rester dans la charte. Opacité très basse (3-5%) pour rester discret.
 */

/* ─────────────────────────────────────────────────────────────
   Variante 1 : GRILLE HEXAGONALE (style PCB / circuit imprimé)
   ───────────────────────────────────────────────────────────── */
.hero-tech-hex {
  position: relative;
  background-color: #1f2a44;
  background-image:
    /* Hexagones SVG inline en URL data */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52' width='60' height='52'><path d='M30 0L60 17V35L30 52L0 35V17z' fill='none' stroke='%2300FFFF' stroke-width='0.6' stroke-opacity='0.08'/></svg>");
  background-repeat: repeat;
  background-position: center;
}

/* ─────────────────────────────────────────────────────────────
   Variante 2 : PARTICULES CONNECTÉES (style IA / data points)
   Cercles + lignes de connexion ultra-fines
   ───────────────────────────────────────────────────────────── */
.hero-tech-particles {
  position: relative;
  background-color: #1f2a44;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(0,255,255,0.04) 0, transparent 1.2px),
    radial-gradient(circle at 38% 70%, rgba(0,255,255,0.05) 0, transparent 1.5px),
    radial-gradient(circle at 65% 30%, rgba(0,255,255,0.04) 0, transparent 1.2px),
    radial-gradient(circle at 85% 80%, rgba(0,255,255,0.05) 0, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(0,255,255,0.06) 0, transparent 2px),
    radial-gradient(circle at 22% 90%, rgba(0,255,255,0.04) 0, transparent 1.2px),
    radial-gradient(circle at 78% 12%, rgba(0,255,255,0.05) 0, transparent 1.5px);
  background-size: 800px 600px;
  background-position: center;
}
.hero-tech-particles::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><line x1='120' y1='150' x2='304' y2='420' stroke='%2300FFFF' stroke-width='0.4' stroke-opacity='0.06'/><line x1='304' y1='420' x2='520' y2='180' stroke='%2300FFFF' stroke-width='0.4' stroke-opacity='0.06'/><line x1='520' y1='180' x2='680' y2='480' stroke='%2300FFFF' stroke-width='0.4' stroke-opacity='0.06'/><line x1='400' y1='300' x2='624' y2='72' stroke='%2300FFFF' stroke-width='0.4' stroke-opacity='0.06'/><line x1='400' y1='300' x2='176' y2='540' stroke='%2300FFFF' stroke-width='0.4' stroke-opacity='0.06'/></svg>");
  background-size: 800px 600px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─────────────────────────────────────────────────────────────
   Variante 3 : CODE BINAIRE FLOU (style matrix discret)
   Texte binaire répété en très basse opacité
   ───────────────────────────────────────────────────────────── */
.hero-tech-binary {
  position: relative;
  background-color: #1f2a44;
  overflow: hidden;
}
.hero-tech-binary::before {
  content: "01001001 01000001 00100000 01001101 01000101 01001110 01010100 01000001 01001100 01001001 01010011 01001101 01000101 00100000 01000010 00110010 01000010 00100000 01000011 01000001 01001100 01001001 01011000 00100000 01001100 01011001 01001111 01001110 00001010 00110001 00110000 00110001 00110000 00110000 00110000 00110001 00110001 00100000 00110001 00110001 00110000 00110000 00110001 00110001 00110000 00110001 00100000 00110001 00110001 00110000 00110001 00110000 00110000 00110001 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001";
  position: absolute;
  inset: -10%;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #00FFFF;
  opacity: 0.045;
  word-spacing: 8px;
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: normal;
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────
   Modificateur : intensifier ou atténuer
   ───────────────────────────────────────────────────────────── */
.hero-tech-subtle::before,
.hero-tech-subtle::after,
.hero-tech-subtle {
  opacity: 0.6 !important;
}

.hero-tech-strong::before,
.hero-tech-strong::after,
.hero-tech-strong {
  opacity: 1.4 !important;
}