/* ==========================================================================
   FlashFit — footer (thème bleu foncé)
   Balisage : footer.html — comportement : footer.js
   ========================================================================== */
#ff-footer {
  --f-ink:    #FFFFFF;
  --f-muted:  #A9B6CF;
  --f-faint:  #8796B3;
  --f-blue:   #60A5FA;
  --f-line:   #1B2C4C;
  --f-canvas: #0E1F3B;

  background: var(--ink, #0A1628);
  color: var(--f-muted);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
#ff-footer * { box-sizing: border-box; }

#ff-footer .f-wrap {
  width: 100%;
  max-width: var(--max, 1360px);
  margin-inline: auto;
  padding-inline: var(--gutter, 16px);
}

/* --- Logo ---------------------------------------------------------------- */
#ff-footer .f-brand { padding-top: clamp(40px, 5vw, 60px); }
#ff-footer .f-logo { display: inline-block; border-radius: 6px; }
#ff-footer .f-logo img {
  display: block;
  height: 26px; width: auto;
  filter: brightness(0) invert(1);   /* logo sombre → blanc sur fond foncé */
}
#ff-footer .f-brand + .f-main { padding-top: 32px; }

/* --- Colonnes (mobile d'abord : 1 → 2 → 4 colonnes) ---------------------- */
#ff-footer .f-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: clamp(44px, 5vw, 68px);
}

#ff-footer .f-col h2 {
  margin: 0 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--f-ink);
}

#ff-footer .f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
#ff-footer .f-col li a {
  font-size: 13.5px;
  color: var(--f-muted);
  text-decoration: none;
  transition: color .15s ease;
}
#ff-footer .f-col li a:hover { color: var(--f-blue); text-decoration: underline; }
#ff-footer a:focus-visible { outline: 2px solid var(--f-blue); outline-offset: 3px; border-radius: 4px; }

/* Réseaux */
#ff-footer .f-socials { display: flex; gap: 9px; margin-top: 20px; }
#ff-footer .f-socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--f-line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--f-muted);
  transition: border-color .15s ease, color .15s ease;
}
#ff-footer .f-socials a:hover { border-color: var(--f-blue); color: var(--f-blue); }
#ff-footer .f-socials svg { width: 15px; height: 15px; fill: currentColor; }

/* --- Bas de page --------------------------------------------------------- */
#ff-footer .f-bottom {
  border-top: 1px solid var(--f-line);
  padding-block: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
#ff-footer .f-bottom p { margin: 0; font-size: 12.5px; color: var(--f-faint); }

/* Moyens de paiement */
#ff-footer .f-pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#ff-footer .f-pay svg { display: block; width: 44px; height: 28px; }
#ff-footer .f-pay rect:first-child { fill: #fff; stroke: var(--f-line); }
#ff-footer .f-pay__chip { fill: #E2B85C; stroke: none; }
#ff-footer .f-pay__line { stroke: #94A3B8; stroke-width: 1.6; stroke-linecap: round; }
#ff-footer .f-pay__mc1 { fill: #EB001B; }
#ff-footer .f-pay__mc2 { fill: #F79E1B; fill-opacity: .9; }
#ff-footer .f-pay__txt { fill: #0A1628; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; }
#ff-footer .f-pay__txt--it { fill: #1A1F71; font-size: 10px; font-style: italic; letter-spacing: .02em; }
#ff-footer .f-pay__txt--sm { font-size: 7.5px; }

/* --- Responsive ---------------------------------------------------------- */
@media (min-width: 560px) {
  #ff-footer .f-main { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  #ff-footer .f-bottom { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  #ff-footer .f-main { grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 56px); }
}