/* ============================================================================
   ELI TECH — V2 GRAPHIC AMBIENT LAYER
   Couche graphique premium et discrète.
   Halos doux, réseau électrique fin, points lumineux, mouvement très lent.
   100% CSS. Aucun JS, aucune image lourde, aucune librairie.
   Respecte prefers-reduced-motion. Allégé sur mobile.
   ============================================================================ */

:root{
  --amb-blue: 72, 130, 255;
  --amb-blue-soft: 130, 165, 255;
  --amb-violet: 162, 89, 255;
  --amb-violet-soft: 178, 150, 255;
  --amb-line: rgba(72, 130, 255, .08);
  --amb-line-soft: rgba(72, 130, 255, .05);
  --amb-line-violet: rgba(162, 89, 255, .06);
  --amb-glow-blue: rgba(72, 130, 255, .18);
  --amb-glow-violet: rgba(162, 89, 255, .14);
}

/* ----------------------------------------------------------------------------
   Animations — durées 18s à 28s, transform & opacity uniquement
   ---------------------------------------------------------------------------- */
@keyframes ambBreathe{
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@keyframes ambDrift{
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(8px, -6px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes ambPulse{
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}
@keyframes ambFlow{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 240px -180px, -200px 220px; }
}

/* ============================================================================
   HERO HOME — halos respirants + réseau fin + points lumineux
   ============================================================================ */
.hero.tech-ambient{ position: relative; }

.hero.tech-ambient::before,
.hero.tech-ambient::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Couche 1 : halos radiaux bleu nuit + violet doux qui respirent lentement */
.hero.tech-ambient::before{
  background:
    radial-gradient(58% 48% at 22% 18%, rgba(var(--amb-blue), .16) 0%, rgba(var(--amb-blue), 0) 65%),
    radial-gradient(50% 45% at 80% 78%, rgba(var(--amb-violet), .14) 0%, rgba(var(--amb-violet), 0) 65%),
    radial-gradient(35% 38% at 50% 52%, rgba(var(--amb-blue), .05) 0%, rgba(var(--amb-blue), 0) 70%);
  animation: ambBreathe 22s ease-in-out infinite;
  will-change: opacity, transform;
}

/* Couche 2 : réseau de lignes diagonales fines + points-signaux */
.hero.tech-ambient::after{
  background-image:
    repeating-linear-gradient(115deg, transparent 0 84px, var(--amb-line) 84px 85px),
    repeating-linear-gradient(65deg, transparent 0 120px, var(--amb-line-violet) 120px 121px),
    radial-gradient(2px 2px at 18% 32%, rgba(var(--amb-blue), .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 28%, rgba(var(--amb-violet), .55), transparent 60%),
    radial-gradient(2px 2px at 88% 62%, rgba(var(--amb-blue), .50), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 78%, rgba(var(--amb-violet), .50), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 16%, rgba(var(--amb-blue), .45), transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 0%, transparent 78%);
  animation: ambDrift 26s ease-in-out infinite;
  will-change: transform;
  opacity: .9;
}

.hero.tech-ambient .hero-inner{ position: relative; z-index: 3; }

/* ============================================================================
   PROOF — engagements connectés par un courant fin
   ============================================================================ */
.has-ambient-net{ position: relative; overflow: hidden; }

/* Halo très doux + maillage fin sur toute la section */
.has-ambient-net::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(var(--amb-blue), .055) 0%, rgba(var(--amb-blue), 0) 70%),
    repeating-linear-gradient(0deg,   transparent 0 96px, var(--amb-line-soft) 96px 97px),
    repeating-linear-gradient(90deg,  transparent 0 96px, var(--amb-line-soft) 96px 97px);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  animation: ambBreathe 24s ease-in-out infinite;
  will-change: opacity;
}

.has-ambient-net > .wrap{ position: relative; z-index: 1; }

/* Fil lumineux horizontal qui relie les 4 cards d'engagement (desktop) */
.has-ambient-net .proof-grid{ position: relative; isolation: isolate; }
.has-ambient-net .proof-grid::before{
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--amb-blue), .22) 18%,
    rgba(var(--amb-violet), .26) 50%,
    rgba(var(--amb-blue), .22) 82%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
  animation: ambPulse 18s ease-in-out infinite;
}
.has-ambient-net .commit-card{ background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.90)); }

@media (max-width: 900px){
  .has-ambient-net .proof-grid::before{ display: none; }
}

/* ============================================================================
   SERVICES — trois leviers reliés par un fil lumineux + halo commun
   ============================================================================ */
.has-ambient-orbit{ position: relative; overflow: hidden; }

.has-ambient-orbit::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 35%; height: 60%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(var(--amb-blue), .08) 0%, rgba(var(--amb-blue), 0) 70%),
              radial-gradient(45% 55% at 50% 50%, rgba(var(--amb-violet), .06) 0%, rgba(var(--amb-violet), 0) 70%);
  animation: ambBreathe 26s ease-in-out infinite;
  will-change: opacity, transform;
}

.has-ambient-orbit::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 26%, rgba(var(--amb-blue), .50), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(var(--amb-violet), .50), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 12%, rgba(var(--amb-blue), .40), transparent 60%);
  opacity: .9;
}

.has-ambient-orbit > .wrap{ position: relative; z-index: 1; }

/* Fil lumineux horizontal entre les 3 cards de services */
.has-ambient-orbit .services-grid{ position: relative; isolation: isolate; }
.has-ambient-orbit .services-grid::before{
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 64px; /* aligne sous l'icône */
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--amb-blue), .25) 25%,
    rgba(var(--amb-violet), .28) 50%,
    rgba(var(--amb-blue), .25) 75%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
  animation: ambPulse 20s ease-in-out infinite;
}

@media (max-width: 980px){
  .has-ambient-orbit .services-grid::before{ display: none; }
}

/* ============================================================================
   CUSTOM (Au-delà du site vitrine) — fond plus futuriste, sombre
   ============================================================================ */
.has-ambient-deep{ position: relative; overflow: hidden; }

.has-ambient-deep::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(99, 102, 241, .22) 0%, rgba(99, 102, 241, 0) 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(var(--amb-violet), .20) 0%, rgba(var(--amb-violet), 0) 60%),
    radial-gradient(40% 50% at 50% 50%, rgba(125, 98, 200, .10) 0%, rgba(125, 98, 200, 0) 70%);
  animation: ambBreathe 24s ease-in-out infinite;
  will-change: opacity, transform;
}

.has-ambient-deep::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 92px, rgba(165, 180, 252, .07) 92px 93px),
    repeating-linear-gradient(25deg,  transparent 0 140px, rgba(165, 180, 252, .05) 140px 141px),
    radial-gradient(1.5px 1.5px at 14% 28%, rgba(165, 180, 252, .65), transparent 60%),
    radial-gradient(2px 2px   at 84% 72%, rgba(165, 180, 252, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 88%, rgba(165, 180, 252, .50), transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 82%);
  animation: ambDrift 28s ease-in-out infinite;
  will-change: transform;
}

.has-ambient-deep > .wrap{ position: relative; z-index: 1; }

/* ============================================================================
   PAGE /sur-mesure — version plus premium et plus technique
   ============================================================================ */

/* Hero sur-mesure : ambiance studio tech */
.sm-hero.tech-ambient{ position: relative; overflow: hidden; }

.sm-hero.tech-ambient::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(50% 55% at 18% 12%, rgba(var(--amb-blue), .16) 0%, rgba(var(--amb-blue), 0) 65%),
    radial-gradient(45% 50% at 88% 80%, rgba(var(--amb-violet), .15) 0%, rgba(var(--amb-violet), 0) 65%);
  animation: ambBreathe 22s ease-in-out infinite;
  will-change: opacity, transform;
}

.sm-hero.tech-ambient::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 88px, rgba(var(--amb-blue), .055) 88px 89px),
    repeating-linear-gradient(65deg,  transparent 0 124px, rgba(var(--amb-violet), .045) 124px 125px),
    radial-gradient(1.5px 1.5px at 22% 30%, rgba(var(--amb-blue), .50), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 70%, rgba(var(--amb-violet), .50), transparent 60%),
    radial-gradient(2px 2px at 60% 18%, rgba(var(--amb-blue), .40), transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
  animation: ambDrift 28s ease-in-out infinite;
}

.sm-hero.tech-ambient > .wrap{ position: relative; z-index: 1; }

/* Carte budget sur-mesure : halo premium et bordure lumineuse */
.sm-budget-card.has-premium-glow{
  position: relative;
  box-shadow:
    var(--shadow-md),
    0 28px 70px -32px rgba(var(--amb-blue), .26),
    0 14px 38px -22px rgba(var(--amb-violet), .20);
}
.sm-budget-card.has-premium-glow::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(var(--amb-blue), .35) 0%,
    rgba(var(--amb-violet), .28) 50%,
    rgba(var(--amb-blue), .30) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Carte contact sombre : électricité douce */
.sm-contact-card.has-ambient-deep-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sm-contact-card.has-ambient-deep-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(50% 60% at 15% 0%, rgba(99, 102, 241, .22) 0%, rgba(99, 102, 241, 0) 65%),
    radial-gradient(60% 70% at 95% 100%, rgba(var(--amb-violet), .20) 0%, rgba(var(--amb-violet), 0) 65%);
  animation: ambBreathe 22s ease-in-out infinite;
}
.sm-contact-card.has-ambient-deep-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(165, 180, 252, .07) 90px 91px),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(165, 180, 252, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 70%, rgba(165, 180, 252, .50), transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 82%);
  animation: ambDrift 26s ease-in-out infinite;
}
.sm-contact-card.has-ambient-deep-card > *{ position: relative; z-index: 1; }

/* ============================================================================
   FORMULAIRE CONTACT — halo doux autour de la carte (lisibilité préservée)
   ============================================================================ */
.contact-card.has-soft-glow{
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 1px 2px rgba(15, 23, 42, .04),
    0 24px 60px -28px rgba(var(--amb-blue), .22),
    0 12px 32px -20px rgba(var(--amb-violet), .18);
  border-color: rgba(var(--amb-blue), .18);
  transition: box-shadow .4s ease, border-color .4s ease;
}
.contact-card.has-soft-glow:focus-within{
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 1px 2px rgba(15, 23, 42, .04),
    0 24px 70px -24px rgba(var(--amb-blue), .30),
    0 14px 36px -18px rgba(var(--amb-violet), .22);
  border-color: rgba(var(--amb-blue), .28);
}

/* ============================================================================
   MOBILE — réduire l'intensité (effets plus discrets, moins de mouvement)
   ============================================================================ */
@media (max-width: 720px){
  .hero.tech-ambient::before{ opacity: .75; }
  .hero.tech-ambient::after{ opacity: .55; }
  .has-ambient-net::after,
  .has-ambient-orbit::before,
  .has-ambient-orbit::after,
  .has-ambient-deep::before,
  .has-ambient-deep::after,
  .sm-hero.tech-ambient::before,
  .sm-hero.tech-ambient::after{ opacity: .65; }
  .has-ambient-net .proof-grid::before,
  .has-ambient-orbit .services-grid::before{ display: none; }
}

/* ============================================================================
   ACCESSIBILITÉ — désactivation totale des animations décoratives
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .hero.tech-ambient::before,
  .hero.tech-ambient::after,
  .has-ambient-net::after,
  .has-ambient-net .proof-grid::before,
  .has-ambient-orbit::before,
  .has-ambient-orbit::after,
  .has-ambient-orbit .services-grid::before,
  .has-ambient-deep::before,
  .has-ambient-deep::after,
  .sm-hero.tech-ambient::before,
  .sm-hero.tech-ambient::after,
  .sm-contact-card.has-ambient-deep-card::before,
  .sm-contact-card.has-ambient-deep-card::after{
    animation: none !important;
  }
}