/* --- ID 226: footer --- */
/* ===== FOOTER HOMERENTAI – VERSION FINALE ===== */

/* Bloc footer bleu uni */
.site-footer {
  background: #1d2850 !important;
  padding-top: 32px;   /* moins d’espace haut */
  padding-bottom: 36px;/* moins d’espace bas  */
  position: relative;
  z-index: 2;
}

/* Centrage du widget logo */
.site-footer .footer-widgets {
  text-align: center;
  margin-bottom: 16px; /* petit espace avec la nav */
}

/* Logo footer : petit, propre, en blanc */
.site-footer .widget_media_image img {
  max-height: 70px;       /* ajuste entre 60–80px si tu veux */
  width: auto;
  height: auto;
  display: inline-block;
  filter: brightness(0) invert(1); /* passe le logo en blanc */
}

/* Menu du footer */
.site-footer .footer-navbar {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 16px;
  padding-top: 16px;
}

/* Liens du footer */
.site-footer .footer-navbar__menu .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.site-footer .footer-navbar__menu .menu li {
  position: relative;
}

.site-footer .footer-navbar__menu .menu li a {
  color: #ffffff !important;
  font-size: 14px;
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.1s ease;
}

.site-footer .footer-navbar__menu .menu li a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Point séparateur discret entre les liens */
.site-footer .footer-navbar__menu .menu li::after {
  content: "•";
  margin-left: 12px;
  color: rgba(255,255,255,0.4);
}

.site-footer .footer-navbar__menu .menu li:last-child::after {
  content: none;
}

/* Responsive : passer en 2 lignes sur mobile si besoin */
@media (max-width: 768px) {
  .site-footer .footer-navbar__menu .menu {
    gap: 10px 16px;
  }

  .site-footer .footer-navbar__menu .menu li a {
    font-size: 13px;
  }
}





/* =========================================
   FOOTER LOGO — Glow blanc pulsé (AI breathing)
   ========================================= */

/* Logo footer */
.footer-widgets .widget_media_image img{
  display: block;
  margin: 0 auto;
  transform-origin: center;
  animation: footerLogoBreath 9s ease-in-out infinite;
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.25))
    drop-shadow(0 0 32px rgba(255,255,255,0.18));
}

/* Hover = respiration un peu plus intense */
.footer-widgets .widget_media_image img:hover{
  filter:
    drop-shadow(0 0 20px rgba(255,255,255,0.35))
    drop-shadow(0 0 46px rgba(255,255,255,0.28));
  transform: translateY(-2px) scale(1.02);
}

/* Animation "respiration" */
@keyframes footerLogoBreath{
  0%{
    filter:
      drop-shadow(0 0 12px rgba(255,255,255,0.18))
      drop-shadow(0 0 26px rgba(255,255,255,0.14));
    transform: scale(1);
  }

  45%{
    filter:
      drop-shadow(0 0 18px rgba(255,255,255,0.32))
      drop-shadow(0 0 44px rgba(255,255,255,0.26));
    transform: scale(1.03);
  }

  100%{
    filter:
      drop-shadow(0 0 12px rgba(255,255,255,0.18))
      drop-shadow(0 0 26px rgba(255,255,255,0.14));
    transform: scale(1);
  }
}












/* ==========================================================
   FOOTER LOGO — blanc + glow premium pulsé (effet "respiration")
   Cible: widget Media Image id #media_image-5
   ========================================================== */

#media_image-5 img{
  /* Rend le PNG "blanc" (si logo monochrome) */
  filter: grayscale(1) brightness(0) invert(1);

  /* Glow blanc premium */
  -webkit-filter: grayscale(1) brightness(0) invert(1)
                  drop-shadow(0 0 10px rgba(255,255,255,.20))
                  drop-shadow(0 0 28px rgba(255,255,255,.14))
                  drop-shadow(0 0 60px rgba(255,255,255,.10));
  filter: grayscale(1) brightness(0) invert(1)
          drop-shadow(0 0 10px rgba(255,255,255,.20))
          drop-shadow(0 0 28px rgba(255,255,255,.14))
          drop-shadow(0 0 60px rgba(255,255,255,.10));

  transform: translateZ(0);
  animation: hr-logo-breathe 3.6s ease-in-out infinite;
  will-change: filter, transform;
}

/* Optionnel: au hover, un peu plus présent */
#media_image-5 img:hover{
  animation-duration: 2.8s;
}

@keyframes hr-logo-breathe{
  0%, 100%{
    transform: scale(1);
    -webkit-filter: grayscale(1) brightness(0) invert(1)
                    drop-shadow(0 0 10px rgba(255,255,255,.16))
                    drop-shadow(0 0 26px rgba(255,255,255,.12))
                    drop-shadow(0 0 56px rgba(255,255,255,.08));
    filter: grayscale(1) brightness(0) invert(1)
            drop-shadow(0 0 10px rgba(255,255,255,.16))
            drop-shadow(0 0 26px rgba(255,255,255,.12))
            drop-shadow(0 0 56px rgba(255,255,255,.08));
  }
  50%{
    transform: scale(1.015);
    -webkit-filter: grayscale(1) brightness(0) invert(1)
                    drop-shadow(0 0 14px rgba(255,255,255,.28))
                    drop-shadow(0 0 36px rgba(255,255,255,.18))
                    drop-shadow(0 0 80px rgba(255,255,255,.12));
    filter: grayscale(1) brightness(0) invert(1)
            drop-shadow(0 0 14px rgba(255,255,255,.28))
            drop-shadow(0 0 36px rgba(255,255,255,.18))
            drop-shadow(0 0 80px rgba(255,255,255,.12));
  }
}