/* ─────────────────────────────────────────────────────────────────────────
   Vélo Shop Obernai — C1, 20/09/2026.
   Couche posée APRÈS hf.css / hdr.css / prod-clair.css. Elle ne fait que deux
   choses : le pied de page à CINQ colonnes (maquette du 20/09) et le logo
   TEXTE de l'en-tête (décision : « Vélo Shop » 800 + « Obernai » jaune).
   RETOUR ARRIÈRE : retirer l'appel wp_enqueue_style('veloshop-hf5') du bout
   n°22 et remettre hf-pied.html.avant-20260920_HHMM — rien d'autre à défaire.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══ 1 · LE PIED À CINQ COLONNES ═══════════════════════════════════════ */

footer.vsf5 .vsf-top{
  grid-template-columns:minmax(0,1.45fr) repeat(5,minmax(0,1fr));
  gap:clamp(22px,2.4vw,44px);
}
footer.vsf5 .vsf-links a{font-size:13.5px;line-height:1.35}
footer.vsf5 .vsf-t{margin:0 0 13px}

/* la note Google du bloc magasin (repères, jamais en dur) */
footer.vsf5 .vsf-note{
  margin:18px 0 0;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.8)
}
footer.vsf5 .vsf-note b{font-weight:800;color:#fff}
footer.vsf5 .vsf-et{color:#f0c417;letter-spacing:1px;font-size:12px}
footer.vsf5 .vsf-wa{display:inline-block;margin-top:5px;font-size:13.5px;color:rgba(255,255,255,.72)}
footer.vsf5 .vsf-wa:hover{color:#f0c417}

/* ═══ 2 · LA LIGNE DU BAS ═══════════════════════════════════════════════ */

footer.vsf5 .vsf-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 26px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08)
}
footer.vsf5 .vsf-bas-c{
  font-family:Archivo,Inter,system-ui,sans-serif;font-size:15px;font-weight:600;
  color:rgba(255,255,255,.82)
}
footer.vsf5 .vsf-bas .vsf-pay{padding:0;border:0;gap:10px 14px}
footer.vsf5 .vsf-bas .vsf-pay-x{flex-wrap:wrap}
footer.vsf5 .vsf-legal{border-top:1px solid rgba(255,255,255,.08)}

/* ═══ 3 · AUX LARGEURS INTERMÉDIAIRES ═══════════════════════════════════ */

@media(max-width:1440px){
  footer.vsf5 .vsf-top{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));row-gap:34px}
  footer.vsf5 .vsf-col-ressources,footer.vsf5 .vsf-col-legal{grid-column:auto}
}
@media(max-width:1023px){
  footer.vsf5 .vsf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px clamp(24px,5vw,56px)}
  footer.vsf5 .vsf-store{grid-column:1/-1;max-width:520px}
  footer.vsf5 .vsf-col-services{grid-column:auto}
}
@media(max-width:600px){
  footer.vsf5 .vsf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:40px}
  footer.vsf5 .vsf-col-services{grid-column:auto}
  footer.vsf5 .vsf-col-services .vsf-links{grid-template-columns:1fr}
  footer.vsf5 .vsf-bas{flex-direction:column;align-items:flex-start}
}

/* ═══ 4 · LE LOGO TEXTE DE L'EN-TÊTE ════════════════════════════════════
   Décision du 20/09 : l'en-tête validé du .fr, en TEXTE — pas l'image
   « VéloSHOP ». Le balisage est posé par le bout n°22 (.vsh-logo) ; ici, son
   habillage. L'image d'origine n'est plus demandée au serveur : elle n'est
   plus dans le HTML, donc 0 octet de moins à charger sur chaque page.        */

.vsh-logo{
  display:inline-flex;align-items:baseline;gap:.28em;
  font-family:Archivo,Inter,system-ui,sans-serif;font-weight:800;
  font-size:clamp(20px,1.55vw,27px);letter-spacing:-.025em;line-height:1;
  color:#16140f;text-decoration:none;white-space:nowrap
}
.vsh-logo em{font-style:normal;color:#f0c417}
.vsh-logo:hover,.vsh-logo:focus{color:#16140f;text-decoration:none}
.vsh-logo:focus-visible{outline:3px solid #f0c417;outline-offset:3px;border-radius:6px}
.ast-header-break-point .vsh-logo{font-size:20px}
#ast-mobile-header .vsh-logo{font-size:19px}
/* le fond sombre de certaines coquilles : le logo reste lisible */
.vsf .vsh-logo,[data-vs="pied"] .vsh-logo{color:#fff}