/*
 * custom.css — Mazirab Compagnie
 * Uniquement le CSS que les contrôles natifs Elementor ne permettent pas
 * de gérer facilement (voir documentation/CUSTOM-CSS.md pour le détail
 * de chaque règle et pourquoi elle est ici plutôt que dans un contrôle
 * Elementor "CSS personnalisé" par widget).
 */

/* --- Fade-in au scroll (reproduit les animations du site source) ---
   Alternative recommandée : activer nativement "Entrance Animation"
   sur chaque section/colonne depuis l'onglet Avancé d'Elementor.
   Ce fallback CSS pur est fourni pour les cas où l'animation native
   ne suffit pas (ex. apparition groupée d'une grille de cartes). */
.mzb-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.mzb-fade-in.mzb-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Effet sticky + ombre au scroll sur le header --- */
.mzb-header-scrolled {
  box-shadow: 0 4px 20px rgba(8, 27, 48, 0.12);
}

/* --- Cartes secteurs : overlay sombre + zoom léger au survol --- */
.mzb-sector-card {
  position: relative;
  overflow: hidden;
}
.mzb-sector-card img {
  transition: transform .4s ease;
}
.mzb-sector-card:hover img {
  transform: scale(1.06);
}

/* --- Compteurs : légère animation de "pulse" à l'apparition ---
   Le comptage lui-même (0 -> valeur finale) est natif au widget
   Elementor "Counter", ne pas dupliquer en JS. */
@keyframes mzb-pulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.elementor-widget-counter.mzb-visible .elementor-counter-number-wrapper {
  animation: mzb-pulse .4s ease-out;
}

/* --- Menu mobile (hamburger) : transition douce d'ouverture ---
   Le comportement (ouverture/fermeture) est géré nativement par le
   widget Nav Menu d'Elementor Pro ; ceci n'ajuste que la transition visuelle. */
.elementor-nav-menu--dropdown {
  transition: max-height .3s ease, opacity .3s ease;
}

/* --- Empêche tout débordement horizontal sur mobile (priorité #13) --- */
@media (max-width: 480px) {
  .e-con, .elementor-container {
    max-width: 100vw;
    overflow-x: hidden;
  }
}