/* ===========================================================
   WAVES.CSS – 🌊 Superposition SVG avec animation fluide
   Harmonisé le 2025-07-12
   -----------------------------------------------------------
   Defines a CSS custom property (--wave-color) that adapts
   to light/dark modes, then uses it for all wave fills.
   ========================================================== */

/* 0 · THEME-BASED COLOR VARIABLE */
  /* fallback to your accent color if --accent is missing */
:root  { --wave-color: var(--accent, #00aaff); }   /* default */
html.light { --wave-color: #a0d8f1; }              /* light theme */
html.dark { --wave-color: color-mix(in srgb, var(--accent) 15%, black); }

/* ---------------------------------------------------------------------------
   1 · CONTAINER
   ------------------------------------------------------------------------ */
.wave-section {
  position: relative;
  width: 100vw;
  height: 200px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
  z-index: 0;
}

/* ---------------------------------------------------------------------------
   2 · GENERIC WAVE LAYER
   ------------------------------------------------------------------------ */
.wave {
  position:absolute; bottom:0; left:0;
  width:100vw; height:100%;
  pointer-events:none;
  transform:translateY(0);
  will-change:transform;
  z-index:1;
  /* opacity only – colour handled on the <path> itself */
  fill-opacity:.4;
  transition:fill-opacity .3s ease;
}

/* slightly more opaque on light mode */
html.light .wave {
  fill-opacity: .5;
}

/* 🔑 NEW — actually colour the paths (overrides inline fill) */
.wave path          { fill:var(--wave-color) !important; }
.wave *[fill]       { fill:var(--wave-color) !important; }  /* safety net */

/* ---------------------------------------------------------------------------
   3 · PARALLAX LAYERS & ANIMATIONS
   ------------------------------------------------------------------------ */
.wave1 {
  z-index: 3;
  animation: float1 4s ease-in-out infinite;
}
.wave2 {
  z-index: 2;
  animation: float2 6s ease-in-out infinite;
}
.wave3 {
  z-index: 1;
  animation: float3 8s ease-in-out infinite;
}

/* keyframes for each layer */
@keyframes float1 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(5px); }
}
@keyframes float2 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}
@keyframes float3 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(10px); }
}

/* respect user’s “reduce motion” setting */
@media (prefers-reduced-motion: reduce) {
  .wave1, .wave2, .wave3 {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   4 · RESPONSIVE ADJUSTMENT
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .wave-section {
    height: 150px;
  }
}