/*
 * footer.css -- Footer du site
 * Commune de Silly -- Theme custom
 *
 * Structure fidele au template Routena.
 * Fond sombre #1A1A2E, texte clair.
 * Convention BEM stricte.
 *
 * @package Silly
 */

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}

/* ============================================
   FOOTER MAIN CONTENT
   ============================================ */
.site-footer__main {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 63px var(--container-padding, 24px) 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

/* ============================================
   BRAND COLUMN (logo + description + social)
   ============================================ */
.site-footer__brand {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__logo {
  display: inline-flex;
  width: 165px;
  transition: opacity var(--transition-base);
}

.site-footer__logo:hover {
  opacity: 0.8;
}

.site-footer__logo img {
  height: 72px;
  width: auto;
  max-width: 280px;
}

.site-footer__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: rgba(255, 255, 255, 0.64);
}

/* ============================================
   SOCIAL LINKS
   ============================================ */
.site-footer__social {
  display: flex;
  gap: 15px;
  margin-top: 8px;
}

.site-footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

.site-footer__social-link:hover {
  background: var(--color-primary);
}

.site-footer__social-link svg {
  width: 18px;
  height: 18px;
  fill: var(--color-bg-dark);
  transition: fill var(--transition-base);
}

.site-footer__social-link:hover svg {
  fill: var(--color-text-light);
}

/* ============================================
   LINKS COLUMNS
   ============================================ */
.site-footer__links {
  display: flex;
  gap: 48px;
  flex: 1;
  justify-content: flex-end;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23.4px;
  letter-spacing: -0.54px;
  color: var(--color-text-light);
}

/* Liste de liens dans les colonnes */
.site-footer__col-list,
.site-footer__col .menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col-list li a,
.site-footer__col-link,
.site-footer__col .menu li a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: rgba(255, 255, 255, 0.64);
  padding-bottom: 4px;
  transition: color var(--transition-base);
  text-decoration: none;
  display: inline-block;
}

.site-footer__col-list li a:hover,
.site-footer__col-link:hover,
.site-footer__col .menu li a:hover {
  color: var(--color-text-light);
}

/* ============================================
   CONTACT COLUMN (address)
   ============================================ */
.site-footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.site-footer__address-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: rgba(255, 255, 255, 0.64);
}

.site-footer__address-line a {
  color: rgba(255, 255, 255, 0.64);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__address-line a:hover {
  color: var(--color-text-light);
}

.site-footer__address-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  fill: var(--color-primary);
}

/* Lien « Itinéraire » sous l'adresse (silly_itineraire_lien(…, ['sombre' =>
   true]), composant .adresse-itineraire de components.css). La règle
   `.site-footer__address-line a` ci-dessus lui ôterait son soulignement et
   l'éteindrait à 64 % : ce lien-là reste souligné, à 85 % (12:1 sur le fond). */
.site-footer__address-line .adresse-itineraire__lien {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  letter-spacing: 0;
}

.site-footer__address-line .adresse-itineraire__lien:hover {
  color: var(--color-text-light);
}

/* Le nom d'un interlocuteur au-dessus de ses coordonnées : le pied de page
   du PCDR en a deux (la Fondation Rurale de Wallonie et l'Administration
   communale). Le second se détache du premier. */
.site-footer__address-nom {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--color-text-light);
}

.site-footer__address-line + .site-footer__address-nom {
  margin-top: 12px;
}

/* Sous le nom, qui répond (mini-site du développement rural : « Nathalie Remy
   et Mélanie Vandendriessche, agents de développement ») — sans icône. */
.site-footer__address-line--fonction {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================
   FOOTER BOTTOM BAR (copyright + legal + scroll top)
   ============================================ */
.site-footer__bottom {
  background: rgba(255, 255, 255, 0.08);
  padding: 16px 0;
}

/* La bulle de Sillya est fixée en bas à droite : jusqu'à 1024 px, elle
   recouvrait entièrement « Retour en haut de page » (un toucher ouvrait
   l'assistante) et la bulle d'accueil les liens légaux (WCAG 2.4.11). La
   dernière rangée du pied de page se termine donc au-dessus d'elle. */
@media (max-width: 1024px) {
  body:has(#chatbot) .site-footer__bottom {
    padding-bottom: 96px;
  }
}

.site-footer__bottom-inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.42px;
  color: rgba(255, 255, 255, 0.64);
  margin: 0;
}

.site-footer__copyright a {
  color: rgba(255, 255, 255, 0.64);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__copyright a:hover {
  color: var(--color-text-light);
}

/* ============================================
   LEGAL LINKS
   ============================================ */
.site-footer__legal-list,
.site-footer__legal .menu {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal-list li a,
.site-footer__legal-link,
.site-footer__legal .menu li a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.42px;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__legal-list li a:hover,
.site-footer__legal-link:hover,
.site-footer__legal .menu li a:hover {
  color: var(--color-text-light);
}

/* Separateur entre les liens legaux */
.site-footer__legal-list li + li::before,
.site-footer__legal .menu li + li::before {
  content: '|';
  margin-right: 16px;
  color: rgba(255, 255, 255, 0.24);
  font-size: 14px;
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.site-footer__scroll-top {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.site-footer__scroll-top:hover {
  transform: translateY(-2px);
}

.site-footer__scroll-top svg {
  width: 16px;
  height: 16px;
  color: var(--color-text);
}

/* ============================================
   RESPONSIVE -- TABLETTE (1024px)
   ============================================ */
@media (max-width: 1024px) {
  .site-footer__main {
    flex-direction: column;
    gap: 48px;
    padding: 48px var(--container-padding, 24px);
  }

  .site-footer__brand {
    width: 100%;
    max-width: 400px;
  }

  .site-footer__links {
    flex-wrap: wrap;
    gap: 32px;
    justify-content: flex-start;
    width: 100%;
  }

  .site-footer__col {
    min-width: 140px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
  .site-footer__main {
    padding: 40px var(--container-padding, 24px);
    gap: 40px;
  }

  .site-footer__links {
    flex-direction: column;
    gap: 32px;
  }

  .site-footer__col {
    min-width: auto;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    gap: 16px;
    padding: 16px var(--container-padding, 24px);
    text-align: center;
  }

  .site-footer__legal-list,
  .site-footer__legal .menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .site-footer__legal-list li + li::before,
  .site-footer__legal .menu li + li::before {
    margin-right: 8px;
  }
}