/* ============================================================
   footer.css — pied de page unifié SOS Imprévus (palette Cobalt)
   Source unique : balisage dans partials/footer.html, recopié dans
   les pages par scripts/build-footer.js (npm run build). Comme
   header.css, la palette --p-* est propre au pied pour qu'il rende
   à l'identique sur toutes les pages. Ne pas dupliquer en inline.
   ============================================================ */

.pied {
  --p-blue: #1e57d2;
  --p-ink: #0f1a30;
  --p-soft: #4a5872;
  --p-card: #ffffff;
  --p-line: rgba(15, 26, 48, 0.08);
  --p-hover: rgba(30, 87, 210, 0.07);
  padding: 32px 0 48px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
[data-theme="dark"] .pied {
  --p-blue: #6ea8ff;
  --p-ink: #e9eefb;
  --p-soft: rgba(233, 238, 251, 0.66);
  --p-card: #141d33;
  --p-line: rgba(233, 238, 251, 0.10);
  --p-hover: rgba(110, 168, 255, 0.12);
}

.pied-wrap {
  box-sizing: border-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 80px;
}

.pied-carte {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 40px;
  background: var(--p-card);
  border-radius: 28px;
  padding: 36px 40px;
  box-shadow: 0 8px 24px rgba(31, 63, 134, 0.07);
}

.pied-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.pied-logo-img { width: 56px; height: 65px; object-fit: contain; flex-shrink: 0; display: block; }
[data-theme="dark"] .pied-logo-img { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.55)); }
.pied-logo-texte { display: flex; flex-direction: column; line-height: 1.15; }
.pied-logo-texte strong { font-size: 18px; font-weight: 900; color: var(--p-ink); letter-spacing: 0.02em; text-transform: uppercase; }
.pied-logo-texte span { font-size: 12px; font-weight: 600; color: var(--p-soft); }
.pied-accroche {
  margin: 16px 0 0;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--p-soft);
}

.pied-plan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pied-titre {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-soft);
}
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col li { margin: 0 0 4px; }

.pied-col a,
.pied-bouton {
  display: inline-block;
  margin-left: -8px;
  padding: 5px 8px;
  border-radius: 8px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--p-ink);
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pied-col a:hover,
.pied-col a:focus-visible,
.pied-bouton:hover,
.pied-bouton:focus-visible {
  background: var(--p-hover);
  color: var(--p-blue);
}
.pied-col a[aria-current="page"] { color: var(--p-blue); font-weight: 800; }
.pied-bouton[hidden] { display: none; }

.pied-copyright {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-soft);
}

@media (max-width: 1100px) {
  .pied-wrap { padding: 0 40px; }
}
@media (max-width: 900px) {
  /* La barre de navigation basse (app-nav.css) est fixe sous 900px :
     le pied garde sa hauteur de marge pour ne pas passer dessous. */
  .pied { padding-bottom: calc(48px + 72px + env(safe-area-inset-bottom)); }
  .pied-wrap { padding: 0 16px; }
  .pied-carte { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .pied-accroche { max-width: none; }
  .pied-plan { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pied-plan { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pied-col a, .pied-bouton { transition: none; }
}

/* responsive.css force `h2 { font-size / line-height }` sous 900px et
   `footer { text-align }` + `footer > div { flex-direction, gap, align-items }`
   sous 480px pour tout le site : ces règles génériques écrasent la
   typographie et l'alignement du pied. On les neutralise ici plutôt que
   dans responsive.css, qui reste générique. */
@media (max-width: 900px) {
  .pied .pied-titre { font-size: 12px !important; line-height: normal !important; }
}
@media (max-width: 480px) {
  .pied { text-align: left !important; }
  .pied .pied-wrap { flex-direction: row !important; gap: inherit !important; align-items: normal !important; }
}

/* anim.css fait léviter tout <button> non « card » de 2px au survol (souris) :
   le bouton du pied doit rester au même niveau que les liens voisins. */
.pied .pied-bouton:hover { transform: none !important; }