/* ═════════════════════════════════════════════════════════════
   FOOTER.CSS
   Pied de page fixe : copyright, liens, compteur de visites,
   badges de validation (W3C). Fond coloré pleine largeur.
   ═════════════════════════════════════════════════════════════ */

/* ─ FOOTER PRINCIPAL ───────────────────────────────────────────── */
footer {
  width: 100%; /* Pleine largeur de l'écran */
  padding: var(--spacing-xl) var(--spacing-xxl); /* 32px haut/bas, 40px côtés */
  margin-top: var(--spacing-xxl); /* 40px d'écart avant le footer */
  border-top: var(--border); /* Ligne grise au-dessus */
  display: flex; /* Empilement vertical des éléments */
  flex-direction: column;
  align-items: center; /* Centré horizontalement */
  gap: var(--spacing-sm); /* 8px entre chaque élément */
  box-sizing: border-box;
  background: var(--color-bg-secondary); /* Fond gris foncé (navbar color) */
}

/* ─ TEXT COPYRIGHT ────────────────────────────────────────────── */
.copyright {
  font-size: var(--font-size-xs); /* Très petit (12px) */
  color: var(--color-text-quaternary); /* Gris foncé discret */
  text-align: center;
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em; /* Très léger espacement */
  max-width: 1000px; /* Limité pour ne pas être trop large */
  width: 100%;
}

/* Liens dans le copyright */
.copyright a {
  color: var(--color-text-tertiary); /* Gris moyen */
  text-decoration: none;
  transition: color var(--transition); /* Animation 0.2s */
}

.copyright a:hover {
  color: var(--color-accent); /* Au survol : bleu */
}

/* ─ COMPTEUR DE VISITES ────────────────────────────────────────– */
.visit-counter {
  margin-top: var(--spacing-sm); /* 8px d'écart */
  font-size: var(--font-size-xs); /* Petit texte */
  color: var(--color-text-quaternary); /* Gris discret */
}

/* ─ RESPONSIVE MOBILE ──────────────────────────────────────────– */
@media (max-width: 600px) {
  footer {
    padding: var(--spacing-md); /* Moins d'espace sur mobile (16px) */
  }
}

/* ─ BADGES W3C ────────────────────────────────────────────────── */
.w3c-badge img {
  height: 28px; /* Petite taille */
  opacity: 0.4; /* Très discret (40% visible) */
  transition: opacity var(--transition); /* Animation d'opacité 0.2s */
}
.w3c-badge img:hover {
  opacity: 0.8; /* Plus visible au survol (80%) */
}