/* ========================================
   Ucoopia Patterns
   Composants SVG réutilisables
   ======================================== */

/* ========================================
   Zigzag Wave Pattern
   ======================================== */
.pattern-wave {
  position: relative;
  height: 123px;
  overflow: hidden;
  width: 100%;
  line-height: 0;
}

.pattern-wave svg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Position: top (pattern en haut, pointe vers le bas) */
.pattern-wave--top svg {
  bottom: 0;
}

/* Position: bottom (pattern en bas, retourné, pointe vers le haut) */
.pattern-wave--bottom {
  transform: scaleY(-1);
}

.pattern-wave--bottom svg {
  bottom: 0;
}

/* ========================================
   Couleurs helper classes
   Pour utilisation sans Twig (HTML statique)
   ======================================== */
.pattern-wave--green-primary svg path {
  fill: var(--ucoopia-green-primary, #006666);
}

.pattern-wave--green-secondary svg path {
  fill: var(--ucoopia-green-secondary, #004444);
}

.pattern-wave--yellow-primary svg path {
  fill: var(--ucoopia-yellow-primary, #F4A323);
}

.pattern-wave--white svg path {
  fill: var(--ucoopia-white, #FFFFFF);
}

.pattern-wave--red svg path {
  fill: var(--ucoopia-red, #A80039);
}

.pattern-wave--menthe svg path {
  fill: var(--ucoopia-menthe, #5FA4B0);
}

.pattern-wave--bleu svg path {
  fill: var(--ucoopia-bleu, #003087);
}

.pattern-wave--pourpre svg path {
  fill: var(--ucoopia-pourpre, #64027D);
}

.pattern-wave--vert svg path {
  fill: var(--ucoopia-vert, #4AAB27);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .pattern-wave {
    height: 80px;
  }
}

@media (max-width: 480px) {
  .pattern-wave {
    height: 60px;
  }
}