.elementor-6 .elementor-element.elementor-element-57e289d{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}/* Start custom CSS for container, class: .elementor-element-57e289d */<!--
  MD CRISPY — animation dyal les pages dyal menu
  ------------------------------------------------
  1. F Elementor: khtar le Conteneur li fih les 8 Images
     -> Avancé -> Classes CSS -> ktb:  md-menu
  2. Zid widget "HTML" dakhl (wla t7t) dak conteneur
  3. Copier / coller had lcode kaml f dak lwidget
-->

<style>
/* ============ 1. RÉVÉLATION : blanc + flou mn lfoq ============ */

.md-menu {
  position: relative;
  overflow: hidden;              /* bach les éléments volants ma ykhrjouch */
  isolation: isolate;
}

/* état de départ dyal kola image */
.md-menu .elementor-widget-image {
  opacity: 0;
  transform: translateY(-70px) scale(1.03);
  filter: blur(18px) brightness(2.4) saturate(0.2);
  transition:
    opacity   .95s cubic-bezier(.16,.84,.44,1),
    transform 1.15s cubic-bezier(.16,.84,.44,1),
    filter    1.05s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform, filter;
}

/* état final — kayt7tt melli l'image tban f l'écran */
.md-menu .elementor-widget-image.md-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) brightness(1) saturate(1);
}

/* voile abyad kayemsa7 mn lfoq l t7t */
.md-menu .elementor-widget-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.75) 45%,
      rgba(255,255,255,0)  100%);
  opacity: 1;
  transition: opacity 1.1s ease .12s;
  pointer-events: none;
  z-index: 2;
}
.md-menu .elementor-widget-image.md-in::after { opacity: 0; }

.md-menu .elementor-widget-image { position: relative; }
.md-menu .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(90,46,20,.16);
}

/* décalage (stagger) — kola image kat3ttal chwiya 3la li 9blha */
.md-menu .elementor-widget-image:nth-child(1) { transition-delay: .00s; }
.md-menu .elementor-widget-image:nth-child(2) { transition-delay: .07s; }
.md-menu .elementor-widget-image:nth-child(3) { transition-delay: .14s; }
.md-menu .elementor-widget-image:nth-child(4) { transition-delay: .21s; }
.md-menu .elementor-widget-image:nth-child(5) { transition-delay: .28s; }
.md-menu .elementor-widget-image:nth-child(6) { transition-delay: .35s; }
.md-menu .elementor-widget-image:nth-child(7) { transition-delay: .42s; }
.md-menu .elementor-widget-image:nth-child(8) { transition-delay: .49s; }


/* ============ 2. ÉLÉMENTS VOLANTS ============ */

.md-fly {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.md-fly i {
  position: absolute;
  bottom: -90px;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(90,46,20,.22));
  animation: md-float linear infinite;
}

@keyframes md-float {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(.85);   opacity: 0; }
  12%  { opacity: .85; }
  50%  { transform: translate3d(38px,-52vh,0) rotate(160deg) scale(1.05); }
  88%  { opacity: .7; }
  100% { transform: translate3d(-26px,-108vh,0) rotate(345deg) scale(.9); opacity: 0; }
}

/* position / vitesse / taille dyal kola 7aja */
.md-fly i:nth-child(1){ left: 6%;  font-size:34px; animation-duration:17s; animation-delay:0s;   }
.md-fly i:nth-child(2){ left: 21%; font-size:24px; animation-duration:22s; animation-delay:-4s;  }
.md-fly i:nth-child(3){ left: 37%; font-size:30px; animation-duration:19s; animation-delay:-9s;  }
.md-fly i:nth-child(4){ left: 52%; font-size:22px; animation-duration:25s; animation-delay:-2s;  }
.md-fly i:nth-child(5){ left: 66%; font-size:36px; animation-duration:16s; animation-delay:-12s; }
.md-fly i:nth-child(6){ left: 79%; font-size:26px; animation-duration:21s; animation-delay:-6s;  }
.md-fly i:nth-child(7){ left: 90%; font-size:31px; animation-duration:18s; animation-delay:-15s; }
.md-fly i:nth-child(8){ left: 14%; font-size:20px; animation-duration:27s; animation-delay:-19s; }

/* ============ 3. MOBILE + accessibilité ============ */
@media (max-width: 767px) {
  .md-menu .elementor-widget-image { transform: translateY(-40px) scale(1.02); }
  .md-fly i { font-size: 20px !important; }
  .md-fly i:nth-child(n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .md-menu .elementor-widget-image {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .md-menu .elementor-widget-image::after { display: none; }
  .md-fly { display: none; }
}
</style>


<script>
(function () {
  function boot() {
    var wrap = document.querySelector('.md-menu');
    if (!wrap || wrap.dataset.mdReady) return;
    wrap.dataset.mdReady = '1';

    /* --- éléments volants --- */
    var fly = document.createElement('div');
    fly.className = 'md-fly';
    var items = ['🍗','🍟','🍔','🌶️','🧀','🍗','🍟','🌮'];
    fly.innerHTML = items.map(function (e) { return '<i>' + e + '</i>'; }).join('');
    wrap.insertBefore(fly, wrap.firstChild);

    /* --- révélation au scroll --- */
    var imgs = wrap.querySelectorAll('.elementor-widget-image');
    if (!('IntersectionObserver' in window)) {
      imgs.forEach(function (el) { el.classList.add('md-in'); });
      return;
    }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) {
          en.target.classList.add('md-in');
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    imgs.forEach(function (el) { io.observe(el); });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
  window.addEventListener('elementor/frontend/init', boot);
})();
</script>/* End custom CSS */