/* ==========================================================================
   10-footer.css : Footer Pixidia (identique itinerary-single)
   Glassmorphism - Colonnes - Social - Legal
   ========================================================================== */

/* --- RESET --- */
.pxd-footer *,
.pxd-footer *::before,
.pxd-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pxd-footer {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  color: #F4F8FB;
  background: linear-gradient(135deg, #0D2328 0%, #183B3E 100%);
  position: relative;
  overflow: hidden;
  line-height: 1.6;
  z-index: 1;
  margin-top: 64px;
}

/* --- CONTAINER --- */
.pxd-footer__container {
  /* Meme axe que le contenu Discover (00-tokens.css) : le footer etait cappe a
     1350px, soit un 3e bord gauche apres le pill (1600) et le contenu (1440). */
  width: min(100% - 2 * var(--pxd-disc-gutter), var(--pxd-disc-content));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* --- GLASSMORPHISM TOP --- */
.pxd-footer__top {
  background: rgba(34, 56, 68, 0.70);
  border-radius: 36px 36px 0 0;
  box-shadow: 0 12px 60px 0 rgba(17, 44, 60, 0.25), 0 1.5px 0 0 rgba(255,255,255,0.03) inset;
  border: 1.5px solid rgba(122, 230, 177, 0.19);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  padding: 64px 48px 44px;
  display: grid;
  /* auto-fit + minmax(250px) donnait 3 colonnes egales de ~440px : la colonne
     logo etait surdimensionnee et un grand vide restait en bas a droite. */
  grid-template-columns: minmax(240px, 1.1fr) repeat(2, minmax(160px, 1fr));
  gap: clamp(28px, 3vw, 48px);
  position: relative;
  z-index: 5;
  transition: background 0.3s;
}

/* --- SHINE --- */
.pxd-footer__glass-shine {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 70%);
  pointer-events: none;
  z-index: -1;
}

/* --- LOGO --- */
.pxd-footer__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pxd-footer__logo img {
  height: 50px;
  /* width:auto est INDISPENSABLE : le <img> porte width/height en attributs (anti-CLS),
     et sans cette regle la largeur d'attribut (518) est simplement rabotee par le
     max-width:100% du reset, ce qui etire le logo au lieu de le redimensionner. */
  width: auto;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 12px rgba(24,219,138,0.11));
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), filter 0.3s;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.pxd-footer__logo:hover img {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 4px 18px #18db8a55) brightness(1.2);
}

.pxd-footer__tagline {
  font-size: 1.08rem;
  color: rgba(244,248,251, 0.82);
  margin-bottom: 18px;
  font-weight: 300;
  letter-spacing: 0.01em;
  max-width: 285px;
  line-height: 1.6;
}

/* --- SOCIAL --- */
.pxd-footer__social {
  display: flex;
  gap: 18px;
  margin-top: 6px;
}

.pxd-footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(248, 251, 255, 0.11);
  border: 1.5px solid rgba(122, 230, 177, 0.22);
  color: #18DB8A;
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 3px 16px 0 rgba(24,219,138,0.08);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  font-size: 1.2em;
}

.pxd-footer__social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 0;
}

.pxd-footer__social-icon:hover {
  color: #FDFDFD;
  border-color: #18DB8A;
  background: rgba(24, 219, 138, 0.17);
  box-shadow: 0 12px 24px rgba(24,219,138,0.20), 0 2px 12px rgba(236,171,0,0.08);
  transform: scale(1.13) translateY(-4px);
}

.pxd-footer__social-icon:hover::before {
  opacity: 1;
}

.pxd-footer__social-icon i {
  font-size: 22px;
  z-index: 1;
}

/* --- COLUMN HEADINGS --- */
.pxd-footer__col-title {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 22px;
  color: #FDFDFD;
  letter-spacing: 0.01em;
  padding-bottom: 10px;
  position: relative;
}

.pxd-footer__col-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ECAB00 0%, #18db8a 100%);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
  transform-origin: left;
}
.pxd-footer__col:hover .pxd-footer__col-title::after {
  transform: scaleX(1.25);
}

/* --- LINKS --- */
.pxd-footer__links {
  list-style: none;
  padding: 0; margin: 0;
}
.pxd-footer__link {
  margin-bottom: 14px;
}
.pxd-footer__link a {
  color: rgba(244,248,251,0.73);
  font-size: 1.05rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(.34,1.56,.64,1);
  position: relative;
  padding-left: 0;
  border-bottom: none;
}

.pxd-footer__link a:hover {
  color: #18DB8A;
  transform: translateX(7px) scale(1.05);
}

.pxd-footer__link a::before {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #ECAB00 0%, #18db8a 100%);
  transition: width 0.22s cubic-bezier(.34,1.56,.64,1);
}
.pxd-footer__link a:hover::before {
  width: 100%;
}

/* --- BOTTOM --- */
.pxd-footer__bottom {
  background: rgba(10, 37, 36, 0.97);
  border-top: 1.5px solid rgba(122, 230, 177, 0.09);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding: 26px 10px 10px;
  text-align: center;
  z-index: 4;
  position: relative;
}

/* --- COPYRIGHT --- */
.pxd-footer__copyright {
  font-size: 1rem;
  color: rgba(244,248,251,0.68);
  margin-bottom: 8px;
  font-weight: 400;
}

/* --- LEGAL LINKS --- */
.pxd-footer__legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 12px;
}

.pxd-footer__legal a {
  color: rgba(244,248,251,0.58);
  font-size: 0.98rem;
  text-decoration: none;
  transition: color 0.22s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.pxd-footer__legal a:hover {
  color: #ECAB00;
}
.pxd-footer__legal a::before {
  content: "";
  position: absolute;
  width: 0; left: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,#18db8a 0%, #ECAB00 100%);
  transition: width 0.23s;
}
.pxd-footer__legal a:hover::before {
  width: 100%;
}

/* --- FONT AWESOME FIX --- */
.pxd-footer .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
  .pxd-footer__top { padding: 46px 24px 26px;}
}
@media (max-width: 768px) {
  .pxd-footer__top {
    grid-template-columns: repeat(2, 1fr);
    padding: 36px 18px 22px;
    gap: 24px;
    border-radius: 28px 28px 0 0;
  }
  .pxd-footer__logo { grid-column: 1 / -1; margin-bottom: 8px;}
  .pxd-footer__col-title { font-size: 1.12rem; margin-bottom: 15px;}
  .pxd-footer__social-icon { width: 40px; height: 40px;}
}
@media (max-width: 576px) {
  .pxd-footer {
    margin-top: 40px;
  }
  .pxd-footer__top {
    grid-template-columns: 1fr;
    padding: 32px 16px;
    gap: 8px;
    border-radius: 19px 19px 0 0;
  }
  .pxd-footer__logo, .pxd-footer__tagline, .pxd-footer__col-title, .pxd-footer__links {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pxd-footer__social { justify-content: center;}
  .pxd-footer__col-title {
    font-size: 1.05rem;
    margin-top: 24px;
  }
  .pxd-footer__col-title::after { left: 50%; transform: translateX(-50%);}
  .pxd-footer__col:hover .pxd-footer__col-title::after {
    transform: translateX(-50%) scaleX(1.25);
  }
  .pxd-footer__links { text-align: center;}
  /* Larger touch targets for links */
  .pxd-footer__link a {
    padding: 8px 0;
    display: inline-block;
  }
  .pxd-footer__link a:hover { transform: scale(1.05);}
  .pxd-footer__link {
    margin-bottom: 4px;
  }
  /* Bottom bar: stack vertically */
  .pxd-footer__bottom {
    padding: 20px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .pxd-footer__copyright {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  .pxd-footer__legal {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .pxd-footer__legal a {
    padding: 4px 0;
  }
}


/* ==========================================================================
   Icones sociales : trois adversaires selon la page, tous plus specifiques que
   .pxd-footer__social-icon (0,1,0).
     .site-footer a                      (0,1,1) -> couleur de lien de pied BuddyX,
                                          soit #111 au repos, presque invisible sur
                                          le fond sombre (pages a footer Elementor)
     .site-footer a:hover, :active       (0,2,1) -> #ef5455, le rouge BuddyX (motif P23)
     .pxd-mag-page [class*="pxd-mag-"] a (0,3,1) color:inherit !important -> sur les
                                          pages magazine, la couleur est figee sur
                                          l'heritee au repos ET au survol : le hover
                                          ne se voit plus.
   On repasse devant en (0,4,1) / (0,5,1), avec !important puisque l'adversaire
   magazine en porte un.
   ========================================================================== */
body[class*="elementor-kit"] .pxd-footer .pxd-footer__social .pxd-footer__social-icon {
  color: #18DB8A !important;
}
body[class*="elementor-kit"] .pxd-footer .pxd-footer__social .pxd-footer__social-icon:hover,
body[class*="elementor-kit"] .pxd-footer .pxd-footer__social .pxd-footer__social-icon:focus,
body[class*="elementor-kit"] .pxd-footer .pxd-footer__social .pxd-footer__social-icon:focus-visible,
body[class*="elementor-kit"] .pxd-footer .pxd-footer__social .pxd-footer__social-icon:active {
  color: #FDFDFD !important;
  border-color: #18DB8A;
  background: rgba(24, 219, 138, 0.17);
}