/* ════════════════════════════════════════════════════════════════════════════
   Site footer — ONE footer for every page (landing, blog + articles, app pages,
   legal/guide/changelog and the worker-rendered /balade/ + /r/ pages).
   Same markup everywhere:

     <footer class="site-footer">
       <div class="site-footer-inner"> brand · links · copyright </div>
     </footer>

   js/rating.js drops its "★ 4,8 · Donner mon avis" block into
   .site-footer-inner, so that hook must stay.

   Sticky footer: on a short page (Messagerie, Mes sorties, Actualités…) the
   footer used to stop right under the content and float mid-screen with an
   empty band below it. The body becomes a full-height flex column and the
   footer takes `margin-top: auto`, so it is always pinned to the bottom.
   ════════════════════════════════════════════════════════════════════════════ */

body:has(> .site-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Flex children must never be squeezed to make room — the page just scrolls. */
body:has(> .site-footer) > * { flex-shrink: 0; }
/* In a flex column, a block centred with `max-width + margin: 0 auto` no longer
   stretches: it shrinks to fit its content. That made the Communauté tab bar
   narrow on the Forum tab, the Messagerie title drift off-centre, empty states
   collapse… Give every in-flow page section its full width back (max-width
   still caps it and the auto margins still centre it). Overlays, drawers and
   toasts are positioned elements and are deliberately not listed here. */
body:has(> .site-footer) > :is(main, section, article, header, .filters-bar, .news-filters, .wrap) {
  width: 100%;
  box-sizing: border-box;  /* blog/guide/legal don't load style.css's global reset */
}

.site-footer {
  margin-top: auto;
  background: var(--forest-900);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1.6;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.site-footer-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1 1 auto;
}
.site-footer-logo {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--lime-500);
  text-decoration: none;
}
.site-footer-tagline {
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.site-footer-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer-links a:hover { color: #fff; }

/* The rating block (injected by rating.js) sits on its own row, above the ©. */
.site-footer-inner > .footer-rating { order: 1; width: 100%; margin-top: 0; }

.site-footer-copy {
  order: 2;
  width: 100%;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);  /* was 0.35 — 2.6:1, below WCAG AA */
  font-size: var(--fs-xs);
}
.site-footer-copy a { color: inherit; text-decoration: none; }

@media (max-width: 600px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 16px 24px;
    gap: 14px;
  }
  .site-footer-links { gap: 0 18px; }
}

/* Pages with the fixed mobile tab bar: the footer runs down *behind* it (its
   own padding keeps the text clear) instead of the body padding leaving a band
   of page background between the footer and the bar. */
@media (max-width: 768px) {
  body:has(> .site-footer):has(> .bottom-nav) .site-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}