/* Base: type scale (the mockup's typography.css, "Compact"), page frame under the fixed header.
   Colours, fonts and sizes also exist as theme.json presets (--wp--preset--*); the --tth-* names
   below are what the section stylesheets use. */
:root {
  --tth-font-head: var(--wp--preset--font-family--montserrat);
  --tth-font-body: var(--wp--preset--font-family--inter);

  --tth-fs-h1: clamp(30px, 3.2vw, 44px);     /* page title */
  --tth-fs-h2: clamp(24px, 2.1vw, 30px);     /* section title */
  --tth-fs-h3: clamp(16px, 1.2vw, 17px);     /* card title */
  --tth-fs-num: clamp(30px, 2.7vw, 38px);    /* key figure */
  --tth-fs-lead: clamp(15.5px, 1.2vw, 17px); /* introduction */
  --tth-fs-body: clamp(15px, 1.1vw, 16px);   /* body text */
  --tth-fs-card: 14px;                       /* card text */
  --tth-fs-ui: 14px;                         /* buttons, menu */
  --tth-fs-more: 15px;                       /* "see more" links beside section titles */
  --tth-fs-label: clamp(11px, .85vw, 12px);  /* eyebrow labels */

  /* Height of the fixed header (utility bar + main bar), for content that starts below it */
  --tth-header-h: 122px;
}
@media (max-width: 767px) { :root { --tth-header-h: 82px; } }
@media (max-width: 520px) { :root { --tth-header-h: 64px; } }

body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--wp--preset--color--navy-2); outline-offset: 2px; }

/* Content starts below the fixed header; section templates that bleed under it opt out with .tth-main--flush */
.tth-main { padding-top: var(--tth-header-h); }
.tth-main--flush { padding-top: 0; }

/* Type scale over the section stylesheets (which load after this one): "html body:not(#tth)"
   outranks their class selectors, as in the mockup's typography.css.
   Footer reading text in Inter; titles and buttons in Montserrat. */
html body:not(#tth) .tth-f { font-family: var(--tth-font-body); }
html body:not(#tth) .tth-f :is(h2, h3, .tth-f__don, .tth-f__vol, .tth-f__h) { font-family: var(--tth-font-head); }
html body:not(#tth) .tth-f__mission { font-size: var(--tth-fs-body); line-height: 1.7; }
html body:not(#tth) :is(.tth-f__don, .tth-f__vol, .tth-h__donate, .tth-h__ghost) { font-size: var(--tth-fs-ui); }

/* Generic page head (eyebrow, centred title, lead): same look as the redesigned inner pages */
.tth-head { max-width: 760px; margin: 0 auto; padding: 64px 0 40px; text-align: center; }
.tth-head__eyebrow { display: inline-block; margin: 0 0 12px; color: var(--wp--preset--color--red); font: 700 var(--tth-fs-label) var(--tth-font-head); letter-spacing: .1em; text-transform: uppercase; }
.tth-head__title { margin: 0; }
.tth-head__lead { margin: 16px auto 0; color: var(--wp--preset--color--muted); font-size: var(--tth-fs-lead); line-height: 1.6; }

/* Screen-reader-only text */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed !important; top: 8px; left: 8px; z-index: 10000; width: auto; height: auto; margin: 0; padding: 12px 16px; overflow: visible; clip: auto; background: #fff; color: var(--wp--preset--color--navy); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Section pages (homepage…): sections follow each other with no gap; each one sets its own spacing */
.tth-sections > * { margin-block: 0; }
.tth-sections > * + * { margin-block-start: 0; }

/* Redesigned sections: reading text in Inter; titles, labels, figures and buttons in Montserrat;
   one size scale (from the mockup's typography.css). */
html body:not(#tth) :is(.tth-hero, .tth-stats, .tth-actions, .tth-news, .tth-cag, .tth-gal, .tth-social, .tth-ab) { font-family: var(--tth-font-body); }
html body:not(#tth) :is(.tth-hero, .tth-stats, .tth-actions, .tth-news, .tth-cag, .tth-gal, .tth-social, .tth-ab) :is(h1, h2, h3, h4),
html body:not(#tth) :is(
  .tth-hero__kicker, .tth-hero__btn, .tth-hero__tab,
  .tth-stats__eyebrow, .tth-stats__link, .tth-stats__num, .tth-stats__when,
  .tth-actions__eyebrow, .tth-actions__more, .tth-actions__join, .tth-actions__cal, .tth-actions__info strong,
  .tth-news__eyebrow, .tth-news__all, .tth-news__read,
  .tth-cag__eyebrow, .tth-cag__give, .tth-cag__raised b, .tth-cag__ex, .tth-cag__more a, .tth-cag__people b,
  .tth-gal__eyebrow, .tth-gal__insta, .tth-lb__count,
  .tth-social__eyebrow, .tth-social__link, .tth-social__vtitle, .tth-social__partners,
  .tth-ab__eyebrow, .tth-ab__crumb, .tth-ab__chips span, .tth-ab__vt, .tth-ab__badge, .tth-ab__time b,
  .tth-ab__role, .tth-ab__more, .tth-ab__fr a, .tth-ab__trio b, .tth-ab__trio span
) { font-family: var(--tth-font-head); }
html body:not(#tth) :is(.tth-ab__h1, .tth-hero__title) { font-size: var(--tth-fs-h1); line-height: 1.06; }
html body:not(#tth) :is(.tth-pg__title, .tth-act__title, .tth-na__title, .tth-cat__title, .tth-bul__title, .tth-news--page .tth-news__title) { font-size: var(--tth-fs-h1); line-height: 1.06; }
html body:not(#tth) :is(.tth-pg__lead, .tth-act__lead, .tth-na__lead, .tth-cat__lead, .tth-bul__lead, .tth-news--page .tth-news__intro) { font-size: var(--tth-fs-lead); line-height: 1.6; }
html body:not(#tth) :is(.tth-pg__eyebrow, .tth-na__eyebrow, .tth-cat__eyebrow, .tth-bul__eyebrow, .tth-news--page .tth-news__eyebrow) { font-size: var(--tth-fs-label); }
html body:not(#tth) :is(.tth-actions__more, .tth-news__all, .tth-stats__link, .tth-gal__insta) { font-size: var(--tth-fs-more); }
html body:not(#tth) :is(.tth-stats__title, .tth-actions__title, .tth-news__title, .tth-cag__title, .tth-gal__title, .tth-social__title, .tth-ab__h2) { font-size: var(--tth-fs-h2); line-height: 1.12; }
html body:not(#tth) :is(.tth-actions__name, .tth-news__name, .tth-cag__name, .tth-ab__val h3, .tth-ab__m h3, .tth-ab__act h3) { font-size: var(--tth-fs-h3); line-height: 1.3; }
html body:not(#tth) .tth-stats__num { font-size: var(--tth-fs-num); }
html body:not(#tth) :is(.tth-hero__lead, .tth-ab__lead, .tth-stats__lead, .tth-actions__sub) { font-size: var(--tth-fs-lead); line-height: 1.6; }
html body:not(#tth) :is(.tth-ab__p, .tth-social__lead) { font-size: var(--tth-fs-body); line-height: 1.7; }
html body:not(#tth) :is(.tth-news__text, .tth-stats__label, .tth-ab__val p, .tth-ab__bio, .tth-ab__act p, .tth-ab__trio p, .tth-actions__info) { font-size: var(--tth-fs-card); line-height: 1.55; }
html body:not(#tth) .tth-actions__info { font-size: 13.5px; }
html body:not(#tth) :is(.tth-hero__btn, .tth-actions__join, .tth-cag__give) { font-size: var(--tth-fs-ui); }
html body:not(#tth) :is(.tth-hero__kicker, .tth-stats__eyebrow, .tth-actions__eyebrow, .tth-news__eyebrow, .tth-cag__eyebrow, .tth-gal__eyebrow, .tth-social__eyebrow, .tth-ab__eyebrow) { font-size: var(--tth-fs-label); }
/* The mockup's sections inherited the old theme's base text (18px / 32px). Elements without their own
   size (eyebrows, links, chips, buttons) take their height from it, so keep it for matching spacing. */
html body:not(#tth) :is(.tth-hero, .tth-stats, .tth-actions, .tth-cag, .tth-gal, .tth-social, .tth-na, .tth-cat, .tth-news, .tth-act, .tth-bv, .tth-ct, .tth-ab, .tth-bul) { font-size: 18px; line-height: 32px; }
html body:not(#tth) .tth-social__partners { line-height: 52px; }

/* Header, main and footer touch: no default block gap between the top-level parts */
.wp-site-blocks > * { margin-block-start: 0; }

/* Buttons: one shape everywhere, the header's "Faire un don" / "Devenir bénévole" (header.css):
   44px high, 8px corners, 18px sides, 14px bold Montserrat. Each place keeps its colours (red, white on
   dark or photo backgrounds); outline buttons on light backgrounds take the header's "Devenir bénévole"
   look. "html body:not(#tth)" outranks the section stylesheets, which load after this one. */
html body:not(#tth) :is(
  .tth-hero__btn, .tth-actions__join, .tth-cag__give, .tth-cat__btn, .tth-pg__btn, .tth-act__btn,
  .tth-act__body .wp-block-button__link, .tth-news__more :is(button, a), .tth-f__don, .tth-f__vol,
  .fluentform .ff-btn-submit, .tth-404 .wp-block-button__link
) {
  align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 44px; padding: 0 18px; border-radius: 8px;
  font-family: var(--tth-font-head); font-size: var(--tth-fs-ui); font-weight: 700; line-height: 1.2;
}
html body:not(#tth) :is(.tth-news__more :is(button, a), .tth-404 .wp-block-button__link) { display: inline-flex; }
html body:not(#tth) :is(.tth-cat__btn--line, .tth-pg__btn--line, .tth-news__more :is(button, a):not(.tth-news__newer), .tth-404 .is-style-outline > .wp-block-button__link) {
  border: 1.5px solid #C9D3DF; box-shadow: none; background: transparent; color: #183B56;
}
html body:not(#tth) :is(.tth-cat__btn--line, .tth-pg__btn--line, .tth-news__more :is(button, a):not(.tth-news__newer), .tth-404 .is-style-outline > .wp-block-button__link):is(:hover, :focus-visible) {
  border-color: #1F538A; box-shadow: none; background: #F3F6FA; color: #1F538A;
}

/* Donate icon on every "Faire un don" button (tth_hands()): the header's logo hands and dot, drawn in
   the button's text colour; on light buttons the dot takes the logo's red. */
.tth-hands { position: relative; flex: none; width: 20px; height: 22px; }
.tth-hands::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("../img/hands.png") center / contain no-repeat; mask: url("../img/hands.png") center / contain no-repeat; }
.tth-hands b { position: absolute; left: 51%; top: 50.6%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s; }
:is(.tth-cat__btn--line, .tth-act__btn--white, .tth-f__don) .tth-hands b { background: #D9230F; }
a:is(:hover, :focus-visible) > .tth-hands b { transform: translate(-50%, -50%) scale(1.35); }
@media (prefers-reduced-motion: reduce) { .tth-hands b { transition: none; } }