.mz-footer-noise {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.55;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    }

    .mz-footer-link { position: relative; }
    .mz-footer-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.2em;
      height: 1px;
      background: currentColor;
      opacity: 0.55;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
    }
    .mz-footer-link:hover::after { transform: scaleX(1); }

    .mz-footer-wordmark {
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.92;
      font-size: 19vw;
      background-image:
        linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%),
        linear-gradient(to top, rgba(255,255,255,0.26), rgba(255,255,255,0.13) 55%, rgba(255,255,255,0.07));
      background-size: 260% 100%, 100% 100%;
      background-position: -50% 0, 0 0;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: mz-sheen 8s ease-in-out infinite;
    }
    @keyframes mz-sheen {
      0%, 50% { background-position: -50% 0, 0 0; }
      100%    { background-position: 210% 0, 0 0; }
    }

    /* ============================================================
       Navbar frontend - MbwaZone
       Glassmorphisme sombre, cohérent avec le header/footer.
       ============================================================ */
    .mz-nav-shell {
      background-color: rgba(2, 20, 44, 0.82);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      border-bottom-color: rgba(255, 255, 255, 0.06);
      transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .mz-nav-scrolled {
      background-color: rgba(2, 20, 44, 0.93);
      border-bottom-color: rgba(255, 255, 255, 0.09);
      box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.55);
    }
    .mz-nav-link {
      position: relative;
    }
    .mz-nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 4px;
      height: 2px;
      border-radius: 9999px;
      background: linear-gradient(90deg, #2dc70e, #a3e635);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s cubic-bezier(.22,1,.36,1);
    }
    .mz-nav-link:hover::after { transform: scaleX(1); }
    .mz-nav-link.is-active::after { transform: scaleX(1); }

    .mz-nav-glass {
      background-color: rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
    }
    .mz-nav-icon {
      transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }
    .mz-nav-icon:hover {
      background-color: rgba(255, 255, 255, 0.10);
      transform: translateY(-1px);
    }

    /* Ambiance des menus : halos radiaux discrets */
    .mz-nav-backdrop {
      background-image:
        radial-gradient(circle at 12% 15%, rgba(45,199,14,0.10), transparent 42%),
        radial-gradient(circle at 85% 90%, rgba(56,93,246,0.10), transparent 42%);
    }

    /* Tiroir mobile : fond quasi opaque pour une bonne lecture */
    .mz-nav-drawer {
      background-color: rgba(2, 20, 44, 0.965);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    /* ============================================================
       Méga-menus & dropdowns - style "SaaS pro"
       Panneau solide, profondeur marquée, entrée séquencée.
       ============================================================ */
    .mz-mega-panel {
      background:
        radial-gradient(120% 90% at 100% 0%, rgba(45,199,14,0.07), transparent 45%),
        radial-gradient(130% 100% at 0% 100%, rgba(56,93,246,0.09), transparent 50%),
        linear-gradient(180deg, #102847 0%, #071934 55%, #041020 100%);
      border: 1px solid rgba(255, 255, 255, 0.11);
      box-shadow:
        0 34px 80px -28px rgba(0, 0, 0, 0.8),
        0 12px 28px -12px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .mz-mega-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.7rem 0.75rem;
      min-height: 3.5rem;
      border-radius: 0.8rem;
      border: 1px solid transparent;
      transition: background-color .18s ease, border-color .18s ease;
      animation: mz-mega-in .38s cubic-bezier(.22,1,.36,1) both;
    }
    .mz-mega-item:nth-child(1) { animation-delay: .02s; }
    .mz-mega-item:nth-child(2) { animation-delay: .05s; }
    .mz-mega-item:nth-child(3) { animation-delay: .08s; }
    .mz-mega-item:nth-child(4) { animation-delay: .11s; }
    .mz-mega-item:nth-child(5) { animation-delay: .14s; }
    .mz-mega-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.09);
    }

    .mz-mega-item-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.15rem;
      height: 2.15rem;
      flex: none;
      border-radius: 0.6rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #2dc70e;
      transition: all .18s ease;
    }
    .mz-mega-item:hover .mz-mega-item-ico {
      background: #2dc70e;
      border-color: #2dc70e;
      color: #02142c;
      box-shadow: 0 8px 18px -8px rgba(45, 199, 14, 0.75);
    }

    .mz-mega-item-arrow {
      margin-left: auto;
      color: #2dc70e;
      opacity: 0;
      transform: translateX(-4px);
      transition: all .18s ease;
    }
    .mz-mega-item:hover .mz-mega-item-arrow {
      opacity: 1;
      transform: translateX(0);
    }

    .mz-mega-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.25rem;
      padding: 0.85rem 1.25rem;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #2dc70e;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      background: rgba(255, 255, 255, 0.02);
      transition: background-color .18s ease, color .18s ease;
    }
    .mz-mega-cta:hover {
      background: rgba(45, 199, 14, 0.10);
      color: #a3e635;
    }

    @keyframes mz-mega-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .mz-mega-item { animation: none; }
    }

    /* ============================================================
       Page d'accueil - vidéo hero, reveal, navigation
       ============================================================ */

    /* Défilement fluide + compensation du header fixe pour les ancres. */
    html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

    /* Focus clavier cohérent (les boutons disposant déjà d'un anneau
       Tailwind focus-visible:ring-* gardent leur style contextuel). */
    :focus-visible:not([class*='ring-']) {
      outline: 2px solid #2dc70e;
      outline-offset: 3px;
      border-radius: 6px;
    }

    /* Vidéo hero : TOUJOURS visible - aucune dépendance au JS. L'entrée en
       scène est un simple fondu CSS (progressif, sans masquer le contenu).
       Pendant le chargement, le dégradé situé derrière sert de fond. */
    .mz-video-hero {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      will-change: transform;
      animation:
        mz-video-fade .8s ease .1s both,
        mz-kenburns 28s ease-in-out 1s infinite alternate;
    }
    @keyframes mz-video-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes mz-kenburns {
      from { transform: scale(1.02); }
      to   { transform: scale(1.14) translateY(-1.5%); }
    }

    /* Contrôle lecture/pause de la vidéo (bonus accessibilité). */
    .mz-hero-video-toggle {
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
    }
    .js .mz-hero-video-toggle {
      opacity: 1;
      pointer-events: auto;
    }
    .mz-hero-video-toggle .fa-play { display: none; }
    .mz-hero-video-toggle.is-paused .fa-pause { display: none; }
    .mz-hero-video-toggle.is-paused .fa-play { display: inline-block; }

    /* Apparition au scroll : éléments masqués UNIQUEMENT quand le JS est
       actif (progressive enhancement - pas de contenu perdu sans JS). */
    .js .mz-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
      will-change: opacity, transform;
    }
    .js .mz-reveal.is-inview {
      opacity: 1;
      transform: translateY(0);
    }

    /* Ranges horizontales (races) : scroll fluide sans scrollbar visible. */
    .mz-scroll-x {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .mz-scroll-x::-webkit-scrollbar { display: none; }

    .mz-dot-grid {
      opacity: 0.06;
      background-image: radial-gradient(#02142C 1px, transparent 1px);
      background-size: 22px 22px;
    }

    /* Grille de points clairs (texture des bannières sur fond navy). */
    .mz-dot-grid-light {
      opacity: 0.06;
      background-image: radial-gradient(#fff 1px, transparent 1px);
      background-size: 22px 22px;
    }

    /* Repère grain (grain fin sur la couverture du profil pro). */
    .mz-grain {
      background-image: radial-gradient(#fff 1px, transparent 1px);
      background-size: 26px 26px;
    }

    /* Bouton retour en haut (visible seulement après défilement). */
    .mz-to-top {
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
    }
    .mz-to-top.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .mz-video-hero {
        animation: none;
        opacity: 1;
      }
      .js .mz-reveal { opacity: 1; transform: none; transition: none; }
    }