/* ═══════════════════════════════════════════════════════════
   KLAMPAC — Pied de page
   Toutes les classes commencent par .klf- pour éviter les conflits.
   ═══════════════════════════════════════════════════════════ */
:root {
  --klf-ink: #111A33;
  --klf-muted: #677087;
  --klf-line: rgba(17, 26, 51, .12);
  --klf-bg: #FFFFFF;
  --klf-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

.klf {
  background: var(--klf-bg); color: var(--klf-ink); font-family: var(--klf-font);
  border-top: 1px solid var(--klf-line);
  padding: clamp(48px, 6vw, 84px) clamp(16px, 4vw, 52px) 28px;
}
.klf-inner { max-width: 1440px; margin: 0 auto }

/* 4 colonnes sur ordinateur → logo en pleine largeur + 2 colonnes sur mobile */
.klf-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px }
@media (max-width: 860px) {
  .klf-top { grid-template-columns: 1fr 1fr; gap: 32px 20px }
  .klf-brand { grid-column: 1 / -1 }
}

.klf-logo { display: block; height: 64px; width: auto; margin-bottom: 20px }
.klf-tagline { margin: 0; max-width: 36ch; color: var(--klf-muted); font-size: 14px; line-height: 1.55 }

.klf-title { margin: 0 0 16px; font-size: 16px; font-weight: 500; color: var(--klf-ink) }
.klf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--klf-muted) }
.klf-list a { color: inherit; text-decoration: none; position: relative; display: inline-block }
.klf-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.klf-list a:hover { color: var(--klf-ink) }
.klf-list a:hover::after { transform: scaleX(1); transform-origin: left }
.klf-list b { color: var(--klf-ink); font-weight: 600; user-select: all }
.klf-copy { user-select: all }

.klf-bottom {
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--klf-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--klf-muted);
}

/* Si votre site a une barre de navigation fixe en bas sur mobile, laissez de la place */
@media (max-width: 760px) { .klf.has-bottom-bar { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) } }