/* The site footer, in one place.
 *
 * Every page on this site carries its own inline <style>, hand-copied from the
 * page before it. That is how 78 pages ended up with 28 different headers and
 * 45 different footers: the copyright year said 2024-2026 on 24 pages and 2026
 * on the rest, /compare/ was missing from the nav on 42, the signup CTA had no
 * data-umami-event on 20, and 26 had no language link at all.
 *
 * The header needed no new CSS — every page already styles .site-header and
 * its children identically. The rich four-column footer did: its rules existed
 * on 8 pages out of 76. Rather than paste twenty rules into sixty-eight files
 * and start the drift over, they live here and every page links this file.
 *
 * Written against the tokens each page defines in :root, with fallbacks,
 * because four pages never declared --brand.
 */

.site-footer {
  border-top: 1px solid var(--line, #e7e5e0);
  background: var(--paper-soft, #f6f6f4);
  padding: 56px 0 28px;
  margin-top: 64px;
}

.site-footer .foot-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 40px 28px;
}

.site-footer .foot-brand .foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink, #0f1113);
  font-weight: 800;
  font-size: 17px;
}

.site-footer .foot-brand .foot-logo img { display: block; }

.site-footer .foot-addr {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-muted, #6a7280);
  font-style: normal;
}

.site-footer .foot-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.site-footer .foot-h {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink, #0f1113);
}

.site-footer .foot-col a {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-muted, #6a7280);
  text-decoration: none;
}

.site-footer .foot-col a:hover { color: var(--ink, #0f1113); }

.site-footer .foot-bottom {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e7e5e0);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted, #6a7280);
}

.site-footer .foot-bottom a {
  color: var(--ink-muted, #6a7280);
  text-decoration: none;
}

.site-footer .foot-bottom a:hover { color: var(--ink, #0f1113); }

@media (max-width: 900px) {
  .site-footer .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .site-footer .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 40px 0 24px;
    margin-top: 44px;
  }
  .site-footer .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer .foot-bottom { margin-top: 32px; }
}

/* ---------------------------------------------------------------------------
 * The site header.
 *
 * This was the other half of the same bug, and it shipped visibly broken.
 * The canonical header markup uses two labels for the CTA — .cta-long for
 * room, .cta-short for a phone — and a .nav-login that only appears on wide
 * screens. Those rules lived ONLY in index.html's inline <style>, so on the
 * other 75 pages neither existed: both labels rendered at once, producing a
 * button reading "Essayer gratuitementEssayer", "Se connecter" stayed on at
 * 390px, and the header pushed the document to 506px inside a 390px viewport.
 *
 * Measured on the live page before this file existed:
 *   docScroll 506 / viewport 390, ctaLongVisible AND ctaShortVisible true.
 *
 * So the header lives here too, media queries and all, and the per-page
 * copies are gone. Same reason as the footer: a rule that exists on one page
 * out of seventy-six is not a rule, it is an accident.
 * --------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 254, 247, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line, #e7e5e0);
}

.site-header .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header .brand-mark { display: flex; align-items: center; gap: 12px; }
.site-header .brand-mark img { width: 40px; height: 40px; }
.site-header .brand-mark .wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #0f1113);
}

.site-header .nav-links { display: none; gap: 26px; align-items: center; }
.site-header .nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft, #353a42);
  white-space: nowrap;
  transition: color .15s ease;
}
.site-header .nav-links a:hover { color: var(--ink, #0f1113); }

.site-header .locale-switch {
  font-size: 13px;
  color: var(--ink-muted, #6a7280);
  font-weight: 600;
  white-space: nowrap;
}
/* The active language, marked WITHOUT a line under it. Oli has had to ask
   for this more than once — see feedback-no-underline-on-links. Weight and
   full-strength ink carry the state instead. */
.site-header .locale-switch a.active {
  color: var(--ink, #0f1113);
  font-weight: 800;
  text-decoration: none;
}

.site-header .nav-login {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft, #353a42);
  white-space: nowrap;
  transition: color .15s ease;
  display: none;
}
.site-header .nav-login:hover { color: var(--ink, #0f1113); }

.site-header .cta-sm {
  background: var(--ink, #0f1113);
  color: var(--paper, #ffffff);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.site-header .cta-sm:hover {
  background: var(--ink-soft, #353a42);
  color: var(--paper, #ffffff);
  transform: translateY(-1px);
}

/* One label at a time. Without this pair the button reads
   "Essayer gratuitementEssayer" and overflows the phone. */
.site-header .cta-short { display: none; }
.site-header .cta-long { display: inline; }

@media (min-width: 1000px) {
  .site-header .nav-links { display: flex; }
  .site-header .nav-login { display: inline; }
}

@media (max-width: 560px) {
  .site-header .inner { padding: 10px 14px; gap: 8px; }
  .site-header .brand-mark img { width: 32px; height: 32px; }
  .site-header .brand-mark .wordmark { font-size: 19px; }
  .site-header .beta-pill {
    margin-left: 6px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }
  .site-header .locale-switch { font-size: 12px; }
  .site-header .cta-sm { padding: 8px 12px; font-size: 13px; }
}

@media (max-width: 460px) {
  .site-header .cta-long { display: none; }
  .site-header .cta-short { display: inline; }
}

@media (max-width: 400px) {
  .site-header .inner { padding: 10px 10px; gap: 6px; }
  .site-header .inner > * { min-width: 0; }
  .site-header .brand-mark { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .site-header .brand-mark .wordmark { font-size: 17px; }
  .site-header .beta-pill,
  .site-header .locale-switch,
  .site-header .cta-sm { flex: 0 0 auto; }
  .site-header .cta-sm { padding: 7px 10px; font-size: 12px; }
}

@media (max-width: 345px) {
  .site-header .brand-mark .wordmark { font-size: 15px; }
  .site-header .brand-mark img { width: 26px; height: 26px; }
  .site-header .locale-switch { display: none; }
  .site-header .cta-sm { padding: 7px 9px; font-size: 11px; }
}

/* ---------------------------------------------------------------------------
 * Links in running text.
 *
 * The site used to underline every <a> in brand yellow, wordmark and nav
 * included. Oli has asked for that to go more than once — see the memory
 * note feedback-no-underline-on-links — so it is gone everywhere, and it
 * does not come back.
 *
 * Removing it left one real problem: the global rule set link colour to
 * var(--ink), which is the body colour, so a citation inside a paragraph
 * became literally indistinguishable from the sentence around it. These
 * posts are built on their sources; invisible sources is not a style choice.
 *
 * Weight carries it instead. No line.
 * --------------------------------------------------------------------------- */

.article-body a,
.doc-body a,
.faq-answer a,
.answer a,
.sources a {
  color: var(--ink, #0f1113);
  font-weight: 600;
  text-decoration: none;
}

/* Cards inside an article are whole blocks, not words in a sentence; they
   already read as links and do not need the extra weight. */
.article-body a.related-card,
.article-body a.post-card,
.article-body a.cta-secondary {
  font-weight: inherit;
}