/* =============================================================================
   FOOTER.CSS – 🔗 Icônes sociales & signature
   Harmonisé le 2025-07-04
   -----------------------------------------------------------------------------
   ✔ Couleurs via variables globales : var(--text-color), var(--accent), var(--primary)
   ✔ Animation réutilise @keyframes fadeInUp (déjà défini dans animations.css)
   ✔ Indentation & commentaires uniformisés
   ✔ Aucune classe renommée (compatibilité HTML intacte)
   ---------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
   1 · CONTENEUR PRINCIPAL
   ------------------------------------------------------------------------ */
footer.social-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem 1rem;
  background: transparent; /* géré par le thème */

  /* Animation d'entrée */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

/* ---------------------------------------------------------------------------
   2 · LIGNE DE SÉPARATION
   ------------------------------------------------------------------------ */
footer.social-footer::before {
  content: '';
  display: block;
  width: 80%;
  max-width: 960px;
  height: 1px;
  margin-bottom: 1.5rem;
  background-color: rgb(255 255 255 / .20);
}
html.light footer.social-footer::before { background-color: rgb(0 0 0 / .10); }

/* ---------------------------------------------------------------------------
   3 · ICÔNES SOCIALES
   ------------------------------------------------------------------------ */
.social-icon {
  font-size: 1.8rem;
  color: var(--text-color);
  text-decoration: none;
  transition: transform .3s ease, color .3s ease, text-shadow .3s ease;
  outline: none;
}

.social-icon:is(:hover, :focus) {
  transform: scale(1.2);
  color: var(--accent);
  text-shadow: 0 0 5px rgb(0 170 255 / .60);
}

.social-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Thème clair */
html.light .social-icon          { color: var(--text-light); }
html.light .social-icon:is(:hover, :focus) {
  color: var(--primary);
  text-shadow: 0 0 5px rgb(0 123 255 / .40);
}

/* ---------------------------------------------------------------------------
   4 · TEXTE DE SIGNATURE / COPYRIGHT
   ------------------------------------------------------------------------ */
.footer-text {
  font-size: .85rem;
  opacity: .6;
  margin-top: 1.5rem;
  text-align: center;
  color: var(--text-muted, #ccc);
}
html.light .footer-text { color: #333; }

/* ---------------------------------------------------------------------------
   5 · RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .footer-text { font-size: .75rem; padding: 0 1rem; }
}