/*
 Theme Name:     Formalis
 Author:         Ormone
 Author URI:     https://www.ormone.fr
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

.gradient {
    background: linear-gradient(90deg, rgb(115, 88, 245) 0%, rgb(107, 22 ,253) 100%);
    color: #fff;
}

.gradient-text {
  background: linear-gradient(90deg, #7358F5, #6B16FD);
  -webkit-background-clip: text;
  color: transparent;
}

/* Conteneur */
.hero-grid {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* pour gérer les z-index proprement */
}

/* Calque de grille + halos violets */
/* Le conteneur qui reçoit la classe hero-grid dans Divi */
.hero-grid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Grille visible sur fond foncé */
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* lignes horizontales / verticales en blanc translucide */
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    /* halos doux violets */
    radial-gradient(600px circle at 70% 20%, rgba(124,58,237,0.18) 0%, transparent 60%),
    radial-gradient(800px circle at 10% 80%, rgba(124,58,237,0.14) 0%, transparent 60%);
  background-size: 100px 100px, 100px 100px, auto, auto;
  background-position: top left, top left, center, center;
  pointer-events: none;
}

/* Contenu au-dessus */
.hero-grid > * { position: relative; z-index: 1; }



.ia-blur-bg {
  position: relative;
  overflow: hidden;
}
.ia-blur-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px at 20% 30%, #6366f120 0%, transparent 70%),
    radial-gradient(700px at 80% 70%, #0ea5e920 0%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
}
.ia-blur-bg > * { position: relative; z-index: 1; }


.formalis-bg {
  position: relative;
  overflow: hidden;
  background: #f9fafc;
}

.formalis-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#00000005 1px, transparent 1px),
    linear-gradient(90deg, #00000005 1px, transparent 1px),
    radial-gradient(600px circle at 80% 30%, #6366f115 0%, transparent 60%),
    radial-gradient(800px circle at 10% 80%, #0ea5e915 0%, transparent 60%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  pointer-events: none;
  z-index: 0;
}

.formalis-bg > * {
  position: relative;
  z-index: 1;
}


.hero-halo {
  position: relative;
  overflow: hidden;
  background-color: #000; /* fond noir */
  background-image: url('/wp-content/uploads/ia.svg'); /* remplace par ton chemin */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* ou cover selon ton image */
}

/* Halo violet animé */
.hero-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--x, 60%) var(--y, 40%),
    rgba(124, 58, 237, 0.25) 0%,
    transparent 70%
  );
  animation: moveHalo 12s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

/* Animation fluide du halo */
@keyframes moveHalo {
  0% {
    --x: 70%;
    --y: 30%;
  }
  50% {
    --x: 30%;
    --y: 60%;
  }
  100% {
    --x: 80%;
    --y: 50%;
  }
}

/* Ton contenu au-dessus */
.hero-halo > * {
  position: relative;
  z-index: 1;
}


.hero-lottie {
  position: relative;
  background-color: #000;                     /* fond noir */
  background-image: url('/wp-content/uploads/ia.svg'); /* ton image */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* ou cover */
  overflow: hidden;
  isolation: isolate;
}

/* Calque Lottie */
.hero-lottie .lottie-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-lottie .lottie-overlay lottie-player {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;   /* “éclaire” sur fond noir */
  opacity: 0.85;            /* ajuste la force de l’effet */
}

/* Ton contenu passe au-dessus */
.hero-lottie > * { position: relative; z-index: 1; }


/* === SECTION FORMALIS : FOND ANIMÉ === */
.hero-circuit {
  position: relative;
  overflow: hidden;
  background-color: #0A0A1A; /* fond sombre */
  isolation: isolate;
}

/* Le SVG animé vient en pseudo-élément ::before */
.hero-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/wp-content/uploads/circuit-animated.svg'); /* ton SVG animé */
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  animation: glowShift 18s ease-in-out infinite alternate;
}

/* Animation subtile du glow */
@keyframes glowShift {
  0%   { filter: brightness(0.9) blur(0px); }
  50%  { filter: brightness(1.15) blur(3px); }
  100% { filter: brightness(0.9) blur(0px); }
}

/* Contenu au-dessus du fond */
.hero-circuit > * {
  position: relative;
  z-index: 1;
}