/* ============================================================
   RÉHABITER STRASBOURG — FOOTER
   S'applique à TOUTES les pages du site (pas seulement l'Accueil),
   car il est collé dans la page de configuration du footer du
   thème margot, pas dans PageAccueil.
   Utilise les mêmes variables (couleurs, espacements) que
   accueil.css — les deux fichiers doivent être collés ENSEMBLE
   dans PageCss (accueil.css en premier, footer.css à la suite),
   car les variables :root sont définies dans accueil.css.
   ============================================================ */

.site-footer-content {
  background: #E7F1F1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px var(--section-padding-x);
  text-align: left;
}

.site-footer-content > br,
.footer-top > br,
.footer-brand > br {
  display: none !important;
}

/* --- Ligne du haut : logo/réseaux + 2 colonnes de liens, étalé sur la largeur --- */
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 32px;
}

.footer-brand {
  flex: 0 0 auto;
}

.footer-logo {
  height: 96px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.footer-social-link {
  white-space: nowrap;
  border: 1.5px solid var(--color-teal) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  color: var(--color-teal) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.footer-social-link:hover {
  background: var(--color-teal) !important;
  color: #ffffff !important;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-col a {
  color: var(--color-text) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.footer-col a:hover {
  color: var(--color-teal) !important;
  text-decoration: underline !important;
}

/* --- Ligne du bas : copyright + crédit YesWiki --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  border-top: 1px solid rgba(65,62,60,0.15);
  padding-top: 24px;
}

.footer-copyright,
.footer-credit {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--color-text-clair) !important;
  margin: 0 !important;
}


/* ======================================================
   RESPONSIVE — TABLETTE & MOBILE
   ====================================================== */

@media (max-width: 768px) {

  .site-footer-content {
    padding: 40px var(--section-padding-x-mobile);
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }

  .footer-col {
    align-items: center;
  }
}