/* =====================================================================
   Braillard — Footer (site-footer)
   Alignements maquette (1728px) : piliers @ 56 ; logo + liens @ 490.
   ===================================================================== */
.br-footer{
  background: var(--br-white); color: var(--br-black);
  padding: clamp(48px, 5vw, 80px) clamp(20px, 3.24vw, 56px) clamp(40px, 4vw, 64px) 0;
}
/* Logo ENTIER dans le footer (issue #32, nouvelle tactique) : même asset et même
   taille que le header (448px / 62vw), calé sur le même retrait gauche que le logo
   du header (clamp 20-56px) → quand le footer entre dans le viewport, le monogramme
   du header s'efface (header.js) et ce logo prend le relais, sans overlap. */
.br-footer__logo{ display: block; padding-left: clamp(20px, 4vw, 56px); }
.br-footer__logo img{ width: 448px; max-width: 62vw; height: auto; display: block; }

.br-footer__cols{
  display: grid;
  grid-template-columns: min(468px, 27.08vw) 1fr auto;
  align-items: end; column-gap: 0;
  margin-top: clamp(56px, 7vw, 110px);
}

.br-footer__pillars{ padding-left: min(56px, 3.24vw); }
.br-footer__pillars-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.16vw, 20px); } /* Figma : gap 20px entre piliers */
.br-footer__pillars-list a{
  font-family: var(--br-font-display); font-style: italic; font-weight: 300;
  font-size: clamp(24px, 1.97vw, 34px); line-height: 1.2; letter-spacing: -.01em; /* Figma : PP Eiko italic 34px, ls -1% */
  color: var(--br-black); text-decoration: none; display: block; transition: color .25s ease;
}
.br-footer__pillars-list li:nth-child(1) a:hover{ color: var(--br-origines); }
.br-footer__pillars-list li:nth-child(2) a:hover{ color: var(--br-dialogues); }
.br-footer__pillars-list li:nth-child(3) a:hover{ color: var(--br-transmissions); }
.br-footer__pillars-list li:nth-child(4) a:hover{ color: var(--br-expertises); }

.br-footer__links-list{ list-style: none; margin: 0; padding: 0; }
.br-footer__links-list a{
  font-family: var(--br-font-body); font-size: 16px; line-height: 2;
  color: var(--br-black); text-decoration: none; display: block;
}
.br-footer__links-list a:hover{ text-decoration: underline; }

.br-footer__contact{ display: flex; align-items: flex-end; gap: clamp(24px, 3vw, 56px); white-space: nowrap; }
.br-footer__social{ display: flex; gap: 12px; font-size: 22px; }
.br-footer__social a{ color: var(--br-black); display: inline-flex; }
.br-footer__addr{ font-style: normal; font-family: var(--br-font-body); font-size: 16px; line-height: 1.55; } /* Figma : 16px */
.br-footer__contactinfo{ font-family: var(--br-font-body); font-size: 16px; line-height: 1.55; }
.br-footer__contactinfo a{ color: var(--br-black); text-decoration: none; }
.br-footer__contactinfo a:hover{ text-decoration: underline; }

@media (max-width: 900px){
  .br-footer{ padding: clamp(40px, 8vw, 64px) 20px clamp(40px, 4vw, 64px); }
  .br-footer__logo{ padding-left: 0; }
  .br-footer__logo img{ width: 100%; max-width: 340px; }
  .br-footer__cols{ grid-template-columns: 1fr; gap: 36px; margin-top: clamp(40px, 8vw, 64px); }
  .br-footer__pillars{ padding-left: 0; }
  .br-footer__contact{ flex-direction: column; align-items: flex-start; gap: 18px; white-space: normal; }
}