/*
 * footer.css — v1.1
 * SENIRIS — Styles du pied de page
 * Extrait de index.php
 *
 * Dépend des variables CSS définies dans le fichier principal (:root).
 * Ces variables sont reproduites ici pour usage standalone si nécessaire.
 */

/* ── VARIABLES (référence) ─────────────────────────────────────────── */
/*
:root {
  --navy:  #0F1E35;
  --teal:  #0A8C6E;
}
*/

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer {
  flex-shrink: 0;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 42px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── BRAND ─────────────────────────────────────────────────────────── */
.footer-brand {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .04em;
  color: white;
}

.footer-brand span {
  color: var(--teal);
}

.footer-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .2);
  margin-top: 5px;
}

/* ── LIENS ─────────────────────────────────────────────────────────── */
.footer-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.footer-links a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, .3);
  text-decoration: none;
  transition: color .2s;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, .65);
}

/* ── MENTIONS ──────────────────────────────────────────────────────── */
.footer-right {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .18);
  text-align: right;
  line-height: 2.2;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  footer {
    padding: 36px 24px;
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
  .footer-right {
    text-align: center;
  }
}

@media (max-width: 960px) and (min-width: 721px) {
  footer {
    padding: 36px 36px;
    flex-wrap: wrap;
    gap: 20px;
  }
}