/* assets/css/icons.css */
/* Lucide icons — style cohérent KGD (dark, gradient accent) */

.kgd-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: linear-gradient(
    135deg,
    rgba(30, 95, 232, 0.14),
    rgba(123, 63, 228, 0.1)
  );
  border: 1px solid rgba(123, 63, 228, 0.22);
  color: #a78bfa;
}

.city-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 0.625rem;
  background: rgba(123, 63, 228, 0.12);
  border: 1px solid rgba(123, 63, 228, 0.18);
  color: #a78bfa;
  font-size: unset;
  line-height: 1;
}

.kgd-icon--benefit {
  display: block;
}

.contact-aside-card__icon {
  color: #a78bfa;
}

.contact-aside-card__icon .kgd-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* assets/css/homepage-effects.css */
/* Homepage — étoiles parallax + bouton shiny (couleurs KGD) */

@keyframes animStar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes shiny-cta-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ── Champ d'étoiles (hero) ── */
.kgd-stars-field {
  z-index: 1;
}

.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-radius: 50%;
  will-change: transform;
}

.stars-1 {
  width: 1px;
  height: 1px;
  box-shadow:
    234px 124px rgba(255, 255, 255, 0.85),
    654px 345px rgba(255, 255, 255, 0.7),
    876px 12px rgba(167, 139, 250, 0.75),
    1200px 800px rgba(255, 255, 255, 0.8),
    400px 1500px rgba(255, 255, 255, 0.65),
    1800px 200px rgba(123, 63, 228, 0.6),
    100px 1000px rgba(255, 255, 255, 0.75),
    900px 1900px rgba(255, 255, 255, 0.7),
    500px 600px rgba(30, 95, 232, 0.55),
    1400px 100px rgba(255, 255, 255, 0.8),
    300px 400px rgba(255, 255, 255, 0.6),
    1600px 1200px rgba(214, 51, 168, 0.5),
    750px 2200px rgba(255, 255, 255, 0.55),
    1100px 450px rgba(255, 255, 255, 0.7),
    200px 1800px rgba(167, 139, 250, 0.65),
    1700px 1600px rgba(255, 255, 255, 0.6);
  animation: animStar 50s linear infinite;
}

.stars-2 {
  width: 2px;
  height: 2px;
  opacity: 0.75;
  box-shadow:
    123px 456px rgba(255, 255, 255, 0.9),
    789px 234px rgba(123, 63, 228, 0.7),
    456px 890px rgba(255, 255, 255, 0.75),
    1100px 300px rgba(255, 255, 255, 0.8),
    200px 1200px rgba(30, 95, 232, 0.65),
    1500px 500px rgba(255, 255, 255, 0.7),
    600px 1700px rgba(214, 51, 168, 0.55),
    1300px 900px rgba(255, 255, 255, 0.85),
    950px 1400px rgba(255, 90, 54, 0.45),
    350px 750px rgba(255, 255, 255, 0.65),
    1450px 1850px rgba(167, 139, 250, 0.6);
  animation: animStar 80s linear infinite;
}

/* Ligne de temps process — rail centré, fill scaleY, pastilles synchronisées */
#process .kgd-process-line-rail {
  pointer-events: none;
  z-index: 1;
  left: 50% !important;
  margin-left: -0.5px;
  transform: none !important;
}

#process .kgd-process-line {
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}

#process .kgd-process-line-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 22px rgba(123, 63, 228, 0.75),
    0 0 36px rgba(30, 95, 232, 0.4);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.25s ease;
}

#process .kgd-process-dot {
  z-index: 2;
  left: 50% !important;
  top: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: -0.625rem;
  scale: var(--kgd-dot-scale, 0.35);
  opacity: var(--kgd-dot-opacity, 0.2);
  transform: none;
  transform-origin: center;
  transition:
    scale 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease,
    box-shadow 0.4s ease;
  box-shadow: 0 0 0 transparent;
}

#process .kgd-process-dot--active {
  --kgd-dot-scale: 1.12;
  --kgd-dot-opacity: 1;
  box-shadow:
    0 0 18px rgba(123, 63, 228, 0.65),
    0 0 6px rgba(255, 255, 255, 0.25);
  animation: kgd-process-dot-pulse 1.6s ease-in-out infinite;
}

#process .kgd-process-dot--passed {
  --kgd-dot-scale: 1;
  --kgd-dot-opacity: 1;
  box-shadow: 0 0 10px rgba(123, 63, 228, 0.35);
  animation: none;
}

#process.kgd-timeline-ready .kgd-process-step-content {
  opacity: 0;
  transform: translateX(var(--kgd-step-shift, 40px));
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

#process.kgd-timeline-ready .kgd-process-step-content--from-left {
  --kgd-step-shift: -40px;
}

#process.kgd-timeline-ready .kgd-process-step-content--from-right {
  --kgd-step-shift: 40px;
}

#process.kgd-timeline-ready .kgd-process-step-content--visible {
  opacity: 1;
  transform: translateX(0);
}

@keyframes kgd-process-dot-pulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(123, 63, 228, 0.65),
      0 0 6px rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow:
      0 0 28px rgba(123, 63, 228, 0.9),
      0 0 12px rgba(30, 95, 232, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  #process .kgd-process-line,
  #process .kgd-process-line-head,
  #process.kgd-timeline-ready .kgd-process-step-content {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #process .kgd-process-dot {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    --kgd-dot-scale: 1;
    --kgd-dot-opacity: 1;
  }
}

/* ── Bouton shiny — bordure tournante (compatible tous navigateurs) ── */
#top .shiny-cta,
a.shiny-cta,
button.shiny-cta {
  position: relative !important;
  z-index: 0;
  isolation: isolate;
  overflow: hidden !important;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 28px rgba(123, 63, 228, 0.35);
}

#top .shiny-cta::before,
a.shiny-cta::before,
button.shiny-cta::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    #1e5fe8 0deg,
    #7b3fe4 90deg,
    #d633a8 180deg,
    #ff5a36 270deg,
    #1e5fe8 360deg
  );
  animation: shiny-cta-spin 2.5s linear infinite;
}

#top .shiny-cta::after,
a.shiny-cta::after,
button.shiny-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  border-radius: inherit;
  background-color: var(--bg-primary, #08080c);
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.35) 0.5px,
    transparent 0
  );
  background-size: 4px 4px;
}

#top .shiny-cta:hover,
a.shiny-cta:hover,
button.shiny-cta:hover {
  box-shadow: 0 0 36px rgba(123, 63, 228, 0.55);
}

#top .shiny-cta > span,
#top .shiny-cta .relative.z-10,
a.shiny-cta > span,
button.shiny-cta > span {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .stars-1,
  .stars-2,
  .shiny-cta::before {
    animation: none;
  }
}

/* Stats — comptage progressif (fallback visible sans JS) */
#stats:not(.kgd-stats-ready) .grid > div[style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

#stats.kgd-stats-ready .kgd-stats-card {
  will-change: opacity, transform;
}

.kgd-testimonial-avatar {
  background: linear-gradient(
    135deg,
    rgba(30, 95, 232, 0.22),
    rgba(123, 63, 228, 0.28)
  );
}

/* assets/css/footer-grid.css */
/* Footer 5 colonnes — lg:grid-cols-5 absent du bundle Tailwind purgé */
@media (min-width: 1024px) {
  footer .container > .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* assets/css/perf-overrides.css */
/* Overrides performance & accessibilité — homepage */

.gradient-text {
  animation: none !important;
  background-size: 100% auto !important;
  will-change: auto;
}

/* Contraste footer / textes subtils (audit a11y) */footer .text-fg-subtle,
.text-xs.text-fg-subtle {
  color: #a1a1aa;
}

.city-hero__badge,
.contact-hero__badge {
  color: #a1a1aa;
}

/* Footer 5 colonnes (lg:grid-cols-5 non généré par Tailwind) */
@media (min-width: 1024px) {
  footer .container > .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}