/* ==========================================================================
   Monde Apicole — Logo (navbar) + Preloader / transitions de chargement.
   Chargé dans le <head> de chaque page (indépendant de style.css) pour
   éviter tout flash au chargement.
   ========================================================================== */

/* ── Logo image dans la navbar ── */
.nav-logo-img {
  height: 46px; width: auto; display: block; border-radius: 10px;
}
@media (max-width: 768px) { .nav-logo-img { height: 40px; } }

/* ── Preloader plein écran (logo animé) ── */
.ma-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
  background: #0B0B0A;
  opacity: 1; visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.ma-loader.ma-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.ma-loader__logo {
  width: clamp(120px, 28vw, 168px); height: auto; display: block; border-radius: 18px;
  animation: maLogoPulse 1.9s ease-in-out infinite;
}
@keyframes maLogoPulse {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 10px 30px rgba(245,166,35,.22)); }
  50%      { transform: scale(1.045); filter: drop-shadow(0 12px 48px rgba(245,166,35,.5)); }
}
.ma-loader__bar {
  width: 150px; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(245,166,35,.16);
}
.ma-loader__bar::after {
  content: ""; display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FFD46B, #F5A623, #E08E0F);
  animation: maBar 1.05s ease-in-out infinite;
}
@keyframes maBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }

/* ── Mini-spinner réutilisable (chargements de données inline) ── */
.ma-spin {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(245,166,35,.22); border-top-color: #F5A623;
  animation: maSpin .8s linear infinite; vertical-align: middle;
}
@keyframes maSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ma-loader__logo { animation: none; }
  .ma-loader__bar::after { animation-duration: 2.4s; }
  .ma-spin { animation-duration: 1.6s; }
}