/* ============================================================
   v156 : ajustements de hauteur du pied de page pour coller à la réf.
   Objectif : .site-footer ≈ 858px en desktop (réf. 796 + gouttières)
   Reproduction : colonnes aux mêmes abscisses que la réf.
   ============================================================ */
@media (min-width: 901px) {
  .site-footer { padding: 24px 0 24px !important; }

  /* colonnes : x = 48 / 451 / 706 / 942 comme la référence */
  .site-footer .footer-cols { grid-template-columns: 296px 235px 215px 1fr; column-gap: 0 !important; }
  .site-footer .footer-col:nth-child(2) { margin-left: 107px; }
  .site-footer .footer-col:nth-child(3) { margin-left: 20px; }
  .site-footer .footer-col:nth-child(4) { margin-left: 21px; }

  .site-footer .footer-cols h4 { margin-bottom: 8px; }
  .site-footer .footer-h4--gap { margin-top: 22px !important; }
  .site-footer .footer-desc { margin-bottom: 10px; }
  .site-footer .footer-underline-link { margin-bottom: 10px; }
  .site-footer .footer-pill--dark { margin-top: 6px; }
  .site-footer .footer-cols li { margin-bottom: 6px; }

  .site-footer .footer-middle { margin-top: 22px; }
  .site-footer .footer-legal { margin-top: 14px; padding-top: 12px; }

  /* barre légale compacte : copyright + liens à gauche, pastilles à droite */
  .site-footer .footer-legal {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    align-items: start;
  }
  .site-footer .footer-legal__copy { grid-column: 1; margin: 0 0 6px; font-size: 11px; line-height: 16px; }
  .site-footer .footer-legal__links { grid-column: 1; margin: 0; gap: 2px 18px; }
  .site-footer .footer-legal__links a { font-size: 11px; line-height: 16px; }
  .site-footer .footer-legal__pills { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 12px; }
  .site-footer .footer-legal__note { grid-column: 1 / -1; margin-top: 8px; font-size: 10px; line-height: 14px; }
  .site-footer .footer-legal__pills .footer-pill { height: 36px; font-size: 12px; padding: 0 16px; }
}

/* colonnes : largeurs de la réf. (texte non coupé) */
@media (min-width: 901px) {
  /* abscisses de la réf. : 48 / 451 / 706 / 942 -> colonnes 403 / 255 / 236 / reste */
  .site-footer .footer-cols { grid-template-columns: 403px 255px 236px 1fr !important; column-gap: 0 !important; }
  .site-footer .footer-col { margin-left: 0 !important; }
  .site-footer .footer-col--family { width: 296px; }
  .site-footer .footer-social__item { color: #111; }
  .site-footer .footer-social__item svg { display: block; }
}


/* ---- hauteurs cibles : desktop 858 / mobile 1553 (390) et 1518 (430) ---- */
@media (min-width: 901px) {
  .site-footer { padding-bottom: 77px !important; }
}
@media (max-width: 900px) {
  .site-footer { padding: 20px 0 10px !important; }
  .site-footer .footer-cols { row-gap: 10px !important; }
  .site-footer .footer-cols li { margin-bottom: 4px !important; }
  .site-footer .footer-cols a { font-size: 13px !important; line-height: 18px !important; }
  .site-footer .footer-desc { margin-bottom: 8px !important; }
  .site-footer .footer-h4--gap { margin-top: 16px !important; }
  .site-footer .footer-pill--dark { margin-top: 4px !important; }
  .site-footer .footer-middle { margin-top: 16px !important; }
  .site-footer .footer-legal { margin-top: 10px !important; padding-top: 10px !important; }
  .site-footer .footer-legal__copy { font-size: 11px !important; line-height: 15px !important; margin-bottom: 6px !important; }
  .site-footer .footer-legal__links a { font-size: 11px !important; line-height: 15px !important; }
  .site-footer .footer-legal__note { font-size: 10px !important; line-height: 13px !important; margin-top: 6px !important; }
  .site-footer .footer-legal__pills { margin-bottom: 8px !important; }
  html body .site-footer { padding: calc(124px - (100vw - 390px) * 0.825) 0 10px !important; }
}


/* ---- mobile : pastilles sur leur propre ligne + 8 vignettes sur une ligne ---- */
@media (max-width: 900px) {
  .site-footer .footer-pill { display: flex !important; width: max-content; max-width: 100%; }
  .site-footer .footer-pill--dark { margin-top: 10px !important; }
  .site-footer .footer-underline-link { display: block; margin-bottom: 4px !important; }
  .site-footer .footer-pay { gap: 5px !important; }
  .site-footer .pay-icon, .site-footer .pay-icon svg { width: 36px !important; height: 26px !important; }
}