body {
  margin: 0;
  background-color: #f9f9f9;
  font-family: sans-serif;
  overflow-x: hidden;
  height: 200vh;
}

/* Grille de fond */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 21px 60px;
  z-index: 0;
  pointer-events: none;
}

/* Barres audio like */
.chart-bars.equalizer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0;

  z-index: 0;
  pointer-events: none;
}

.chart-bars.equalizer .bar {
  width: 55px;
  background-color: rgba(0, 0, 0, 0.01);
  border-radius: 0px;
  animation: pulseBar 0.8s ease-in-out infinite;
  transform-origin: bottom;
  animation-delay: calc(var(--i) * 0.05s);
  margin-right:10px; 
}

@keyframes pulseBar {
  0%, 100% { height: 20%; }
  50% { height: var(--h); }
}

/* Lignes metrics linéaires */
.line-metrics {
  position: relative;
  top: 750px;
  left: 0;
  width: 100%;
  height: 130px;
  z-index: 1;
  pointer-events: none;
}

.line-metrics svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
}

/*Points angles*/
.points circle {
  r: 3; /* rayon = 10px → 20px de diamètre */
  fill: currentColor;
  opacity: 1;
  transition: transform 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsePoint 1s ease-in-out infinite;

}

#points1 circle { fill: #3232aa; }
#points2 circle { fill: #df2f85; }
#points3 circle { fill: #878786; }
#points4 circle { fill: #3232aa; }


.points rect {
  fill: currentColor;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsePoint 1s ease-in-out infinite;
}

#points1 rect { fill: #3232aa; }
#points2 rect { fill: #df2f85; }
#points3 rect { fill: #878786; }
#points4 rect { fill: #3232aa; }

/* Animation de pulsation */
@keyframes pulsePoint {
  /*0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }*/
	
  0%   { transform: scale(0.5); opacity: 0.6; }
  30%  { transform: scale(1); opacity: 1; }
  60%  { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(0.8); opacity: 1; }
}

/* Positions parallax */
/*#line1 {--speed: 0.1;}
#line2 { --speed: 0.2; }
#line3 { --speed: 0.5; }*/


/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2rem; margin-top: 40vh; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
}