/*
 * Studio Thil — Footer, Neuro WebGL et quadrillage
 * Version optimisée issue du bloc V146.
 */

html.st-neuro-mounted,
html.st-neuro-mounted body {
  background: transparent;
}

#neuro-bg {
  position: fixed;
  inset: 0;
  z-index: -9999;
  display: block;
  pointer-events: none;
  background: #000;
}

.st-neuro-viewport {
  position: fixed;
  inset: 0;
  z-index: -8888;
  overflow: hidden;
  pointer-events: none;
}

#neuro {
  position: absolute;
  top: -9%;
  right: auto;
  bottom: -9%;
  left: -9%;
  display: block;
  width: 118%;
  height: 120%;
  pointer-events: none;
  filter: blur(44px);
}

html.st-neuro-fallback #neuro {
  display: none;
}

/* ---------------------------------------------------------
 * Effet imagepara historique
 * La promotion en calque est désormais appliquée uniquement
 * pendant que l'image est proche du viewport.
 * --------------------------------------------------------- */

.imagepara {
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .imagepara img,
  .imagepara picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.12s ease-out;
  }

  img.imagepara {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.12s ease-out;
  }
}

@media (max-width: 767px) {
  .imagepara img,
  .imagepara picture img,
  img.imagepara {
    transform: scale(1) !important;
  }
}

/* ---------------------------------------------------------
 * Quadrillage fixe
 * --------------------------------------------------------- */

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  opacity: 0.26;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.grid-layer {
  --grid-color: #ffcc00;
  --line-thickness: 1px;
  --cross-thickness: 1px;
  --cross-size: 12px;
  --line-alpha: 0.72;
  --cross-alpha: 0.92;

  position: absolute;
  inset: 0;
}

.grid-overlay .vline,
.grid-overlay .hline,
.grid-overlay .cross::before,
.grid-overlay .cross::after {
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.08);
}

.grid-overlay .vline,
.grid-overlay .hline {
  position: absolute;
  opacity: var(--line-alpha);
}

.grid-overlay .vline {
  top: 0;
  bottom: 0;
  width: var(--line-thickness);
  background: linear-gradient(
    to bottom,
    rgba(255, 204, 0, 0) 0%,
    rgba(255, 204, 0, 0.18) 5%,
    rgba(255, 204, 0, 0.84) 14%,
    rgba(255, 204, 0, 0.84) 86%,
    rgba(255, 204, 0, 0.18) 95%,
    rgba(255, 204, 0, 0) 100%
  );
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
}

.grid-overlay .hline {
  right: 0;
  left: 0;
  height: var(--line-thickness);
  background: linear-gradient(
    to right,
    rgba(255, 204, 0, 0) 0%,
    rgba(255, 204, 0, 0.18) 5%,
    rgba(255, 204, 0, 0.84) 14%,
    rgba(255, 204, 0, 0.84) 86%,
    rgba(255, 204, 0, 0.18) 95%,
    rgba(255, 204, 0, 0) 100%
  );
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}

.grid-overlay .cross {
  position: absolute;
  width: var(--cross-size);
  height: var(--cross-size);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
}

.grid-overlay .cross::before,
.grid-overlay .cross::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  border-radius: 999px;
  background: rgba(255, 204, 0, var(--cross-alpha));
  transform: translate(-50%, -50%);
}

.grid-overlay .cross::before {
  width: var(--cross-size);
  height: var(--cross-thickness);
}

.grid-overlay .cross::after {
  width: var(--cross-thickness);
  height: var(--cross-size);
}

.grid-overlay.is-drawing .vline {
  animation: stGridDrawVertical 2.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.grid-overlay.is-drawing .hline {
  animation: stGridDrawHorizontal 2.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.grid-overlay.is-drawing .cross {
  animation: stGridPopCross 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.grid-overlay.is-erasing .vline {
  animation: stGridEraseVertical 0.9s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.grid-overlay.is-erasing .hline {
  animation: stGridEraseHorizontal 0.9s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.grid-overlay.is-erasing .cross {
  animation: stGridHideCross 0.22s ease forwards;
}

.grid-overlay.is-drawing .v1 { animation-delay: 0s; }
.grid-overlay.is-drawing .v2 { animation-delay: 0.08s; }
.grid-overlay.is-drawing .h1 { animation-delay: 0.16s; }
.grid-overlay.is-drawing .h2 { animation-delay: 0.24s; }
.grid-overlay.is-drawing .c1 { animation-delay: 1.42s; }
.grid-overlay.is-drawing .c2 { animation-delay: 1.48s; }
.grid-overlay.is-drawing .c3 { animation-delay: 1.54s; }
.grid-overlay.is-drawing .c4 { animation-delay: 1.60s; }

.grid-overlay.is-erasing .h2 { animation-delay: 0.04s; }
.grid-overlay.is-erasing .h1 { animation-delay: 0.08s; }
.grid-overlay.is-erasing .v2 { animation-delay: 0.12s; }
.grid-overlay.is-erasing .v1 { animation-delay: 0.16s; }

@keyframes stGridDrawVertical {
  from { transform: translateX(-50%) scaleY(0); }
  to { transform: translateX(-50%) scaleY(1); }
}

@keyframes stGridDrawHorizontal {
  from { transform: translateY(-50%) scaleX(0); }
  to { transform: translateY(-50%) scaleX(1); }
}

@keyframes stGridPopCross {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes stGridEraseVertical {
  from { transform: translateX(-50%) scaleY(1); }
  to { transform: translateX(-50%) scaleY(0); }
}

@keyframes stGridEraseHorizontal {
  from { transform: translateY(-50%) scaleX(1); }
  to { transform: translateY(-50%) scaleX(0); }
}

@keyframes stGridHideCross {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@media (max-width: 991px) {
  .grid-overlay { opacity: 0.20; }
  .grid-layer { --cross-size: 10px; }
}

@media (max-width: 767px) {
  .grid-overlay { opacity: 0.14; }
  .grid-layer { --cross-size: 9px; }
}