.zoomable {
  transition: transform 0.3s ease;
}

.zoomable:hover {
  transform: scale(1.075); /* Zoom léger */
}

/* Blocs animés en fade + slide bas */
.scroll-animate-bas {
  opacity: 0;
  transform: translateY(60px);
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* Blocs animés en fade + slide haut */
.scroll-animate-haut {
  opacity: 0;
  transform: translateY(-60px);
  animation: fadeInDown 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.scroll-wavy-loop-updown,
.scroll-wavy-loop-downup {
  transition: none;
}

.scroll-wavy-loop-updown {
  animation: floatWaveUpDown 3s ease-in-out infinite;
}

.scroll-wavy-loop-downup {
  animation: floatWaveDownUp 3s ease-in-out infinite;
}

@keyframes floatWaveUpDown {
  0% { transform: translateY(-0.00px); }
  1% { transform: translateY(-0.63px); }
  2% { transform: translateY(-1.25px); }
  3% { transform: translateY(-1.87px); }
  4% { transform: translateY(-2.49px); }
  5% { transform: translateY(-3.09px); }
  6% { transform: translateY(-3.68px); }
  7% { transform: translateY(-4.26px); }
  8% { transform: translateY(-4.82px); }
  9% { transform: translateY(-5.36px); }
  10% { transform: translateY(-5.88px); }
  11% { transform: translateY(-6.37px); }
  12% { transform: translateY(-6.85px); }
  13% { transform: translateY(-7.29px); }
  14% { transform: translateY(-7.71px); }
  15% { transform: translateY(-8.09px); }
  16% { transform: translateY(-8.44px); }
  17% { transform: translateY(-8.76px); }
  18% { transform: translateY(-9.05px); }
  19% { transform: translateY(-9.30px); }
  20% { transform: translateY(-9.51px); }
  21% { transform: translateY(-9.69px); }
  22% { transform: translateY(-9.82px); }
  23% { transform: translateY(-9.92px); }
  24% { transform: translateY(-9.98px); }
  25% { transform: translateY(-10.00px); }
  26% { transform: translateY(-9.98px); }
  27% { transform: translateY(-9.92px); }
  28% { transform: translateY(-9.82px); }
  29% { transform: translateY(-9.69px); }
  30% { transform: translateY(-9.51px); }
  31% { transform: translateY(-9.30px); }
  32% { transform: translateY(-9.05px); }
  33% { transform: translateY(-8.76px); }
  34% { transform: translateY(-8.44px); }
  35% { transform: translateY(-8.09px); }
  36% { transform: translateY(-7.71px); }
  37% { transform: translateY(-7.29px); }
  38% { transform: translateY(-6.85px); }
  39% { transform: translateY(-6.37px); }
  40% { transform: translateY(-5.88px); }
  41% { transform: translateY(-5.36px); }
  42% { transform: translateY(-4.82px); }
  43% { transform: translateY(-4.26px); }
  44% { transform: translateY(-3.68px); }
  45% { transform: translateY(-3.09px); }
  46% { transform: translateY(-2.49px); }
  47% { transform: translateY(-1.87px); }
  48% { transform: translateY(-1.25px); }
  49% { transform: translateY(-0.63px); }
  50% { transform: translateY(-0.00px); }
  51% { transform: translateY(0.63px); }
  52% { transform: translateY(1.25px); }
  53% { transform: translateY(1.87px); }
  54% { transform: translateY(2.49px); }
  55% { transform: translateY(3.09px); }
  56% { transform: translateY(3.68px); }
  57% { transform: translateY(4.26px); }
  58% { transform: translateY(4.82px); }
  59% { transform: translateY(5.36px); }
  60% { transform: translateY(5.88px); }
  61% { transform: translateY(6.37px); }
  62% { transform: translateY(6.85px); }
  63% { transform: translateY(7.29px); }
  64% { transform: translateY(7.71px); }
  65% { transform: translateY(8.09px); }
  66% { transform: translateY(8.44px); }
  67% { transform: translateY(8.76px); }
  68% { transform: translateY(9.05px); }
  69% { transform: translateY(9.30px); }
  70% { transform: translateY(9.51px); }
  71% { transform: translateY(9.69px); }
  72% { transform: translateY(9.82px); }
  73% { transform: translateY(9.92px); }
  74% { transform: translateY(9.98px); }
  75% { transform: translateY(10.00px); }
  76% { transform: translateY(9.98px); }
  77% { transform: translateY(9.92px); }
  78% { transform: translateY(9.82px); }
  79% { transform: translateY(9.69px); }
  80% { transform: translateY(9.51px); }
  81% { transform: translateY(9.30px); }
  82% { transform: translateY(9.05px); }
  83% { transform: translateY(8.76px); }
  84% { transform: translateY(8.44px); }
  85% { transform: translateY(8.09px); }
  86% { transform: translateY(7.71px); }
  87% { transform: translateY(7.29px); }
  88% { transform: translateY(6.85px); }
  89% { transform: translateY(6.37px); }
  90% { transform: translateY(5.88px); }
  91% { transform: translateY(5.36px); }
  92% { transform: translateY(4.82px); }
  93% { transform: translateY(4.26px); }
  94% { transform: translateY(3.68px); }
  95% { transform: translateY(3.09px); }
  96% { transform: translateY(2.49px); }
  97% { transform: translateY(1.87px); }
  98% { transform: translateY(1.25px); }
  99% { transform: translateY(0.63px); }
  100% { transform: translateY(-0.00px); }
}


@keyframes floatWaveDownUp {
  0% { transform: translateY(0.00px); }
  1% { transform: translateY(0.63px); }
  2% { transform: translateY(1.25px); }
  3% { transform: translateY(1.87px); }
  4% { transform: translateY(2.49px); }
  5% { transform: translateY(3.09px); }
  6% { transform: translateY(3.68px); }
  7% { transform: translateY(4.26px); }
  8% { transform: translateY(4.82px); }
  9% { transform: translateY(5.36px); }
  10% { transform: translateY(5.88px); }
  11% { transform: translateY(6.37px); }
  12% { transform: translateY(6.85px); }
  13% { transform: translateY(7.29px); }
  14% { transform: translateY(7.71px); }
  15% { transform: translateY(8.09px); }
  16% { transform: translateY(8.44px); }
  17% { transform: translateY(8.76px); }
  18% { transform: translateY(9.05px); }
  19% { transform: translateY(9.30px); }
  20% { transform: translateY(9.51px); }
  21% { transform: translateY(9.69px); }
  22% { transform: translateY(9.82px); }
  23% { transform: translateY(9.92px); }
  24% { transform: translateY(9.98px); }
  25% { transform: translateY(10.00px); }
  26% { transform: translateY(9.98px); }
  27% { transform: translateY(9.92px); }
  28% { transform: translateY(9.82px); }
  29% { transform: translateY(9.69px); }
  30% { transform: translateY(9.51px); }
  31% { transform: translateY(9.30px); }
  32% { transform: translateY(9.05px); }
  33% { transform: translateY(8.76px); }
  34% { transform: translateY(8.44px); }
  35% { transform: translateY(8.09px); }
  36% { transform: translateY(7.71px); }
  37% { transform: translateY(7.29px); }
  38% { transform: translateY(6.85px); }
  39% { transform: translateY(6.37px); }
  40% { transform: translateY(5.88px); }
  41% { transform: translateY(5.36px); }
  42% { transform: translateY(4.82px); }
  43% { transform: translateY(4.26px); }
  44% { transform: translateY(3.68px); }
  45% { transform: translateY(3.09px); }
  46% { transform: translateY(2.49px); }
  47% { transform: translateY(1.87px); }
  48% { transform: translateY(1.25px); }
  49% { transform: translateY(0.63px); }
  50% { transform: translateY(0.00px); }
  51% { transform: translateY(-0.63px); }
  52% { transform: translateY(-1.25px); }
  53% { transform: translateY(-1.87px); }
  54% { transform: translateY(-2.49px); }
  55% { transform: translateY(-3.09px); }
  56% { transform: translateY(-3.68px); }
  57% { transform: translateY(-4.26px); }
  58% { transform: translateY(-4.82px); }
  59% { transform: translateY(-5.36px); }
  60% { transform: translateY(-5.88px); }
  61% { transform: translateY(-6.37px); }
  62% { transform: translateY(-6.85px); }
  63% { transform: translateY(-7.29px); }
  64% { transform: translateY(-7.71px); }
  65% { transform: translateY(-8.09px); }
  66% { transform: translateY(-8.44px); }
  67% { transform: translateY(-8.76px); }
  68% { transform: translateY(-9.05px); }
  69% { transform: translateY(-9.30px); }
  70% { transform: translateY(-9.51px); }
  71% { transform: translateY(-9.69px); }
  72% { transform: translateY(-9.82px); }
  73% { transform: translateY(-9.92px); }
  74% { transform: translateY(-9.98px); }
  75% { transform: translateY(-10.00px); }
  76% { transform: translateY(-9.98px); }
  77% { transform: translateY(-9.92px); }
  78% { transform: translateY(-9.82px); }
  79% { transform: translateY(-9.69px); }
  80% { transform: translateY(-9.51px); }
  81% { transform: translateY(-9.30px); }
  82% { transform: translateY(-9.05px); }
  83% { transform: translateY(-8.76px); }
  84% { transform: translateY(-8.44px); }
  85% { transform: translateY(-8.09px); }
  86% { transform: translateY(-7.71px); }
  87% { transform: translateY(-7.29px); }
  88% { transform: translateY(-6.85px); }
  89% { transform: translateY(-6.37px); }
  90% { transform: translateY(-5.88px); }
  91% { transform: translateY(-5.36px); }
  92% { transform: translateY(-4.82px); }
  93% { transform: translateY(-4.26px); }
  94% { transform: translateY(-3.68px); }
  95% { transform: translateY(-3.09px); }
  96% { transform: translateY(-2.49px); }
  97% { transform: translateY(-1.87px); }
  98% { transform: translateY(-1.25px); }
  99% { transform: translateY(-0.63px); }
  100% { transform: translateY(0.00px); }

@keyframes zoomInOutSmooth {
  0% { transform: scale(1.0000); }
  1% { transform: scale(1.0063); }
  2% { transform: scale(1.0125); }
  3% { transform: scale(1.0187); }
  4% { transform: scale(1.0249); }
  5% { transform: scale(1.0309); }
  6% { transform: scale(1.0368); }
  7% { transform: scale(1.0426); }
  8% { transform: scale(1.0482); }
  9% { transform: scale(1.0536); }
  10% { transform: scale(1.0588); }
  11% { transform: scale(1.0637); }
  12% { transform: scale(1.0685); }
  13% { transform: scale(1.0729); }
  14% { transform: scale(1.0771); }
  15% { transform: scale(1.0809); }
  16% { transform: scale(1.0844); }
  17% { transform: scale(1.0876); }
  18% { transform: scale(1.0905); }
  19% { transform: scale(1.0930); }
  20% { transform: scale(1.0951); }
  21% { transform: scale(1.0969); }
  22% { transform: scale(1.0982); }
  23% { transform: scale(1.0992); }
  24% { transform: scale(1.0998); }
  25% { transform: scale(1.1000); }
  26% { transform: scale(1.0998); }
  27% { transform: scale(1.0992); }
  28% { transform: scale(1.0982); }
  29% { transform: scale(1.0969); }
  30% { transform: scale(1.0951); }
  31% { transform: scale(1.0930); }
  32% { transform: scale(1.0905); }
  33% { transform: scale(1.0876); }
  34% { transform: scale(1.0844); }
  35% { transform: scale(1.0809); }
  36% { transform: scale(1.0771); }
  37% { transform: scale(1.0729); }
  38% { transform: scale(1.0685); }
  39% { transform: scale(1.0637); }
  40% { transform: scale(1.0588); }
  41% { transform: scale(1.0536); }
  42% { transform: scale(1.0482); }
  43% { transform: scale(1.0426); }
  44% { transform: scale(1.0368); }
  45% { transform: scale(1.0309); }
  46% { transform: scale(1.0249); }
  47% { transform: scale(1.0187); }
  48% { transform: scale(1.0125); }
  49% { transform: scale(1.0063); }
  50% { transform: scale(1.0000); }
  51% { transform: scale(0.9937); }
  52% { transform: scale(0.9875); }
  53% { transform: scale(0.9813); }
  54% { transform: scale(0.9751); }
  55% { transform: scale(0.9691); }
  56% { transform: scale(0.9632); }
  57% { transform: scale(0.9574); }
  58% { transform: scale(0.9518); }
  59% { transform: scale(0.9464); }
  60% { transform: scale(0.9412); }
  61% { transform: scale(0.9363); }
  62% { transform: scale(0.9315); }
  63% { transform: scale(0.9271); }
  64% { transform: scale(0.9229); }
  65% { transform: scale(0.9191); }
  66% { transform: scale(0.9156); }
  67% { transform: scale(0.9124); }
  68% { transform: scale(0.9095); }
  69% { transform: scale(0.9070); }
  70% { transform: scale(0.9049); }
  71% { transform: scale(0.9031); }
  72% { transform: scale(0.9018); }
  73% { transform: scale(0.9008); }
  74% { transform: scale(0.9002); }
  75% { transform: scale(0.9000); }
  76% { transform: scale(0.9002); }
  77% { transform: scale(0.9008); }
  78% { transform: scale(0.9018); }
  79% { transform: scale(0.9031); }
  80% { transform: scale(0.9049); }
  81% { transform: scale(0.9070); }
  82% { transform: scale(0.9095); }
  83% { transform: scale(0.9124); }
  84% { transform: scale(0.9156); }
  85% { transform: scale(0.9191); }
  86% { transform: scale(0.9229); }
  87% { transform: scale(0.9271); }
  88% { transform: scale(0.9315); }
  89% { transform: scale(0.9363); }
  90% { transform: scale(0.9412); }
  91% { transform: scale(0.9464); }
  92% { transform: scale(0.9518); }
  93% { transform: scale(0.9574); }
  94% { transform: scale(0.9632); }
  95% { transform: scale(0.9691); }
  96% { transform: scale(0.9751); }
  97% { transform: scale(0.9813); }
  98% { transform: scale(0.9875); }
  99% { transform: scale(0.9937); }
  100% { transform: scale(1.0000); }
}

.zoom-loop {
  animation: zoomInOutSmooth 15s linear infinite;
  will-change: transform;
}

@keyframes zoomInOutCycle {
  0% { transform: scale(1.0000); }
  1% { transform: scale(0.9960); }
  2% { transform: scale(0.9920); }
  3% { transform: scale(0.9880); }
  4% { transform: scale(0.9840); }
  5% { transform: scale(0.9800); }
  6% { transform: scale(0.9760); }
  7% { transform: scale(0.9720); }
  8% { transform: scale(0.9680); }
  9% { transform: scale(0.9640); }
  10% { transform: scale(0.9600); }
  11% { transform: scale(0.9560); }
  12% { transform: scale(0.9520); }
  13% { transform: scale(0.9480); }
  14% { transform: scale(0.9440); }
  15% { transform: scale(0.9400); }
  16% { transform: scale(0.9360); }
  17% { transform: scale(0.9320); }
  18% { transform: scale(0.9280); }
  19% { transform: scale(0.9240); }
  20% { transform: scale(0.9200); }
  21% { transform: scale(0.9160); }
  22% { transform: scale(0.9120); }
  23% { transform: scale(0.9080); }
  24% { transform: scale(0.9040); }
  25% { transform: scale(0.9000); }
  26% { transform: scale(0.9080); }
  27% { transform: scale(0.9160); }
  28% { transform: scale(0.9240); }
  29% { transform: scale(0.9320); }
  30% { transform: scale(0.9400); }
  31% { transform: scale(0.9480); }
  32% { transform: scale(0.9560); }
  33% { transform: scale(0.9640); }
  34% { transform: scale(0.9720); }
  35% { transform: scale(0.9800); }
  36% { transform: scale(0.9840); }
  37% { transform: scale(0.9880); }
  38% { transform: scale(0.9920); }
  39% { transform: scale(0.9960); }
  40% { transform: scale(1.0000); }
  41% { transform: scale(1.0040); }
  42% { transform: scale(1.0080); }
  43% { transform: scale(1.0120); }
  44% { transform: scale(1.0160); }
  45% { transform: scale(1.0200); }
  46% { transform: scale(1.0240); }
  47% { transform: scale(1.0280); }
  48% { transform: scale(1.0320); }
  49% { transform: scale(1.0360); }
  50% { transform: scale(1.0400); }
  51% { transform: scale(1.0440); }
  52% { transform: scale(1.0480); }
  53% { transform: scale(1.0520); }
  54% { transform: scale(1.0560); }
  55% { transform: scale(1.0600); }
  56% { transform: scale(1.0640); }
  57% { transform: scale(1.0680); }
  58% { transform: scale(1.0720); }
  59% { transform: scale(1.0760); }
  60% { transform: scale(1.0800); }
  61% { transform: scale(1.0840); }
  62% { transform: scale(1.0880); }
  63% { transform: scale(1.0920); }
  64% { transform: scale(1.0960); }
  65% { transform: scale(1.1000); }
  66% { transform: scale(1.0960); }
  67% { transform: scale(1.0920); }
  68% { transform: scale(1.0880); }
  69% { transform: scale(1.0840); }
  70% { transform: scale(1.0800); }
  71% { transform: scale(1.0760); }
  72% { transform: scale(1.0720); }
  73% { transform: scale(1.0680); }
  74% { transform: scale(1.0640); }
  75% { transform: scale(1.0600); }
  76% { transform: scale(1.0560); }
  77% { transform: scale(1.0520); }
  78% { transform: scale(1.0480); }
  79% { transform: scale(1.0440); }
  80% { transform: scale(1.0400); }
  81% { transform: scale(1.0360); }
  82% { transform: scale(1.0320); }
  83% { transform: scale(1.0280); }
  84% { transform: scale(1.0240); }
  85% { transform: scale(1.0200); }
  86% { transform: scale(1.0160); }
  87% { transform: scale(1.0120); }
  88% { transform: scale(1.0080); }
  89% { transform: scale(1.0040); }
  90% { transform: scale(1.0000); }
  91% { transform: scale(0.9960); }
  92% { transform: scale(0.9920); }
  93% { transform: scale(0.9880); }
  94% { transform: scale(0.9840); }
  95% { transform: scale(0.9800); }
  96% { transform: scale(0.9760); }
  97% { transform: scale(0.9720); }
  98% { transform: scale(0.9680); }
  99% { transform: scale(0.9640); }
  100% { transform: scale(1.0000); }
}

.zoom-loop-2 {
  animation: zoomInOutCycle 15s linear infinite;
  will-change: transform;
}