/* Footer navigation (sectioned CMS link map). Loaded globally from base.html. */
#footer .footer-nav { display: flex; flex-wrap: wrap; gap: 30px 24px; }
#footer .footer-col { flex: 1 1 190px; min-width: 160px; }
#footer .footer-col .ft-title { color: #FF8E4F; font-weight: 600; font-size: 16px; margin: 0 0 14px; }
#footer .footer-col ul { list-style: none; margin: 0; padding: 0; background: transparent; }
#footer .footer-col li { margin: 0 0 9px; border-bottom: unset; }
#footer .footer-col a { color: #fff; font-size: 15px; text-decoration: none; }
#footer .footer-col a:hover { color: #FF8E4F; text-decoration: underline; }
#footer .footer-bottom { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
#footer .footer-bottom .logo { width: 260px; height: auto; }
#footer .footer-bottom .cert { width: 92px; height: auto; }

/* Highlight CTA card for Mickaël's free filmed intervention. Sits at the top
   of the dark footer (#0d0400); an orange-tinted panel + orange CTA make it
   pop while staying in the footer's own orange/near-black palette. */
#footer .footer-intervention {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  /* Span the full footer width so the entire card (not just the left part)
     is the link and reacts on hover, whatever the parent layout. */
  width: 100%; box-sizing: border-box; align-self: stretch;
  margin: 0 0 28px; padding: 16px 20px;
  background: rgba(255, 142, 79, .1);
  border: 1px solid rgba(255, 142, 79, .38);
  border-radius: 14px;
  color: #fff; text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* The whole card is one link and reacts as a whole on hover. */
#footer .footer-intervention:hover {
  background: rgba(255, 142, 79, .18);
  border-color: rgba(255, 142, 79, .85);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px rgba(255, 142, 79, .7);
}
#footer .footer-intervention .fi-icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 142, 79, .2); color: #ff8e4f;
}
#footer .footer-intervention .fi-icon svg { width: 24px; height: 24px; }
#footer .footer-intervention .fi-text { flex: 1 1 320px; line-height: 1.35; }
#footer .footer-intervention .fi-text strong { display: block; font-size: 17px; font-weight: 700; }
#footer .footer-intervention .fi-text > span { font-size: 14px; color: rgba(255, 255, 255, .82); }
#footer .footer-intervention .fi-free {
  background: #ff8e4f; color: #0d0400; border-radius: 4px; padding: 0 6px; font-weight: 800;
}
#footer .footer-intervention .fi-cta {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: #ff8e4f; color: #0d0400; font-weight: 700; font-size: 15px;
  border-radius: 999px; padding: 10px 22px; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
#footer .footer-intervention .fi-cta svg { width: 18px; height: 18px; }
#footer .footer-intervention:hover .fi-cta { background: #fff; color: #0d0400; }

@media (max-width: 760px) {
  #footer .footer-nav { gap: 26px; }
  #footer .footer-col { flex: 1 1 140px; text-align: center; }
  #footer .footer-bottom { flex-direction: column; gap: 18px; }
  #footer .footer-intervention { flex-direction: column; text-align: center; gap: 12px; }
}