/* ============================================================================
   Accueil Bonneau — AB26 rebrand layer (child theme)
   Source of truth: docs/IDENTITY.md, colors confirmed 2026-09-01 against the
   client's full brand guide (1111_AB26_v4.pdf, "NORMES GRAPHIQUES" palette page —
   see the palette comment below). Superseded the old interim estimate (#d1103c).
   Brand: Akhand typeface + red / black / white. No em/en dashes here.
   ============================================================================ */

/* ---- Akhand (AB26 brand face, free on Fontshare; self-hosted). --------------
   The @font-face rules are emitted from functions.php ONLY for woff2 files that
   actually exist in ../fonts/, so there are no 404s / "font family not found"
   when the files are not installed yet. Drop the woff2 in and they activate.
   Until then the font-family fallback stack renders a clean system sans. ----- */

/* ---- Design tokens ----------------------------------------------------------
   Confirmed 2026-09-01 from 1111_AB26_v4.pdf's official palette swatches:
     Pantone 1935 C  #C9003C  (primary red — was the old estimate #d1103c)
     Pantone 1955 C  #8D1737  (secondary/darker red — text-safe, 9.1:1 on white)
     Pantone 426 C   #24282B  ("practical" near-black for body copy, 14.9:1 on
                                white — the deck keeps pure Noir #000000 for the
                                logo/wordmark itself, 426C for extensive text)
     Noir            #000000  (pure black, logo/wordmark only)
     Noir 15%        #DCDDDE  (light neutral grey — used for hairline dividers)
   --ab-red-800 (hover) and --ab-red-50 (tint wash) aren't in the deck; kept as
   computed derivatives of the confirmed reds, same as before. ----------------- */
:root{
  --ab-red:#C9003C; --ab-red-700:#8D1737; --ab-red-800:#73122D; --ab-red-50:#fbe9ec;
  --ab-ink:#24282B; --ab-ink-600:#4a4a4a;
  --ab-bg:#ffffff; --ab-surface:#f5f5f5; --ab-line:#DCDDDE; --ab-muted:#8a8a8a;
  --ab-on-dark:#ffffff;
  --ab-font-head:"Akhand",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ab-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ab-ease:.25s ease; --ab-radius:4px;
}

/* ---- Typography: replace the theme's Asap with Akhand ---------------------- */
body,p,li,td,th,input,select,textarea,button,
.qodef-grid,.qodef-content,.wpb_text_column,.vc_column_container{
  font-family:var(--ab-font-body) !important;
}
h1,h2,h3,h4,h5,h6,
.qodef-section-title .qodef-st-title,
.qodef-title .qodef-title-holder .qodef-page-title,
.qodef-main-menu>ul>li>a,
.qodef-top-bar .ab-lang-switch,
.qodef-btn,.vc_btn3,button,input[type=submit]{
  font-family:var(--ab-font-head) !important;
}

/* ---- Fondation page: card grids ("Impact concret d'un don" / "Comment soutenir
   notre mission?") use Qode's elements_holder, which renders as display:table with
   vertical-align:middle table-cells — cards with uneven content heights end up with
   staggered/misaligned headings. Force top alignment + tighten line-height/CTA
   padding per 2026-09-01 feedback. Scoped to this page only (page-id-13336). ------ */
.page-id-13336 .qodef-eh-item{ vertical-align:top !important; }
.page-id-13336 .qodef-eh-item h4{ line-height:25px; }
.page-id-13336 .qodef-eh-item p{ line-height:25px; }
.page-id-13336 .qodef-eh-item .qodef-btn{ padding:10px !important; }

/* ---- Fondation "Notre mission" intro (v9): the photo sits in the SAME right
   column as the short line, stacked in normal document flow right below it —
   no fixed negative margin. Earlier versions (see 0017-fondation-grey-box-
   intro.php history, v6-v8) copied prod's own two-row negative-margin trick
   (a photo in a separate row, pulled up with a hardcoded margin-top so it
   overlaps the grey box), but that technique is fragile to viewport width:
   a FIXED pixel margin only lines the photo up under the short text at the
   one width it was tuned for. At narrower desktop widths the grey box's two
   long paragraphs wrap onto more lines while the short one-line text barely
   wraps, so the row grows taller relative to it — visible as a large empty
   gap ("too much space" — confirmed reproducible around 1000-1024px wide).
   Prod's own -513px has the identical flaw, just less visible at their
   specific design width. Stacking the photo in-flow eliminates the fixed
   number entirely, so there is nothing to go stale at any width — still
   reads as an overlap since the grey box remains taller than the short text
   + photo combined. No CSS override needed for this section any more — the
   card-grid vertical-align/line-height fixes above are unrelated and stay. */

/* ---- Color: keep brand red (--ab-red, also set as Qode's first_color option) consistent --- */
body,p,li{ color:var(--ab-ink); }
/* Functional focus ring for accessibility (WCAG 2.2). */
a:focus-visible,button:focus-visible,input:focus-visible,
.qodef-btn:focus-visible,.qodef-main-menu>ul>li>a:focus-visible{
  outline:2px solid var(--ab-ink); outline-offset:2px;
}

/* ---- 150 ans d'action: the theme's 130px container top padding left too much white
   under the title banner. Tightened only where the page opens with the .ab-lead-box intro. ---- */
.qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner:has(.ab-lead-box){ padding-top:60px; }

/* ---- 150 ans d'action: vertical timeline (marker class .ab-timeline) -------
   One row per date: big red year on the left, a thin vertical line with a dot,
   headline + text on the right. Single-sided, no tabs, no JS. Below 768px the
   line moves to the left edge and the year sits above the text. ------------- */
.ab-timeline{ margin:10px 0 0; max-width:900px; }
.ab-timeline ol{ list-style:none; margin:0; padding:0; }
.ab-timeline li{ position:relative; margin:0; padding:0 0 46px 190px; min-height:60px; }
.ab-timeline li:last-child{ padding-bottom:0; }
.ab-timeline li::before{ /* the dot */
  content:""; position:absolute; left:142px; top:14px; width:16px; height:16px; box-sizing:border-box;
  border-radius:50%; background:var(--ab-red); border:3px solid var(--ab-bg); box-shadow:0 0 0 2px var(--ab-red);
}
.ab-timeline li::after{ /* the line, drawn per row so it starts and ends on a dot */
  content:""; position:absolute; left:149px; top:30px; bottom:-14px; width:2px; background:var(--ab-line);
}
.ab-timeline li:last-child::after{ display:none; }
.ab-timeline .ab-tl-year{
  position:absolute; left:0; top:0; width:120px; text-align:right;
  font-family:var(--ab-font-head); font-size:46px; line-height:44px; font-weight:600; color:var(--ab-red);
}
.ab-timeline .ab-tl-body h3{ margin:0 0 6px; font-size:26px; line-height:34px; color:var(--ab-ink); }
.ab-timeline .ab-tl-body p{ margin:0; font-size:17px; line-height:28px; }
@media (max-width:767px){
  .ab-timeline li{ padding:0 0 38px 36px; }
  .ab-timeline li::before{ left:0; top:8px; }
  .ab-timeline li::after{ left:7px; top:24px; bottom:-8px; }
  .ab-timeline .ab-tl-year{ position:static; display:block; width:auto; text-align:left; font-size:38px; line-height:40px; margin-bottom:4px; }
  .ab-timeline .ab-tl-body h3{ font-size:22px; line-height:28px; }
}

/* ---- 150 ans d'action: 8 key figures (marker class .ab-figures on the vc_row).
   The counter shortcode emits title, text, digit in that order; the optional
   "Près de" / "Plus de" title is pinned in a reserved band above the digit so
   all eight digits line up. Label + description follow in a column_text. ---- */
.ab-figures .qodef-counter-holder .qodef-counter-inner{ display:block; padding-top:24px; }
.ab-figures .qodef-counter-holder .qodef-counter-title{
  position:absolute; top:0; left:0; max-width:none; margin:0;
  font-family:var(--ab-font-head); font-size:15px; line-height:20px; letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink-600);
}
.ab-figures .qodef-counter-holder .qodef-counter{
  font-family:var(--ab-font-head) !important; font-size:72px; line-height:1em; font-weight:600; color:var(--ab-red); margin:0;
}
.ab-figures .wpb_text_column h3{ margin:6px 0 8px; font-size:21px; line-height:27px; color:var(--ab-ink); }
.ab-figures .wpb_text_column p{ margin:0; font-size:15px; line-height:24px; }
.ab-figures{ margin-bottom:34px; }
@media (max-width:767px){
  /* two figures per line on phones instead of eight stacked ones (flex, not floats,
     so a taller card cannot snag the next line) */
  .ab-figures{ display:flex; flex-wrap:wrap; margin-bottom:0; }
  .ab-figures::before,.ab-figures::after{ display:none; }
  .ab-figures .vc_column_container.vc_col-sm-3{ width:50%; float:none; margin-bottom:18px; }
  .ab-lead-box .qodef-eh-item-content{ padding:28px 22px 12px !important; }
  .ab-figures .qodef-counter-holder .qodef-counter{ font-size:52px; }
  .ab-figures .wpb_text_column h3{ font-size:17px; line-height:22px; }
  .ab-figures .wpb_text_column p{ font-size:14px; line-height:21px; }
}

/* ---- Campaign landing (La campagne en cours): opening split, story cards, red band ----
   Markers: .ab-photo-frame (photo column), .ab-stories (card grid), .ab-cta-band (stretch row).
   The band's photo comes from the row's own background image; the red wash is a ::before so the
   shortcode never needs a color-specific image. ------------------------------------------- */
.ab-photo-frame .vc_column-inner{ padding-right:18px !important; }
.ab-photo-frame img{ display:block; width:100%; height:auto; box-shadow:18px 18px 0 0 var(--ab-red); }

.ab-stories{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ab-story{ display:flex; align-items:center; gap:24px; padding:28px 32px; background:#f9f9f9; border-left:4px solid var(--ab-red); }
.ab-story p{ margin:0; font-size:18px; line-height:28px; }
.ab-story-pic{ flex:0 0 96px; width:96px; height:96px; border-radius:50%; overflow:hidden; background:var(--ab-red); }
.ab-story-pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.ab-story-icon{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:38px; }

.ab-cta-band{ position:relative; margin-top:70px; padding:100px 0 110px; background-size:cover; background-position:center 8%; }
.vc_row.ab-cta-band::before{ content:"" !important; display:block !important; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(rgba(201,0,60,.86),rgba(201,0,60,.72) 55%,rgba(201,0,60,.82)); z-index:0; }
.ab-cta-band .vc_column-inner{ position:relative; z-index:1; }
.ab-cta-band .wpb_wrapper{ text-align:center; }
.ab-cta-inner{ max-width:780px; margin:0 auto; }
.ab-cta-band .ab-cta-inner h3{ margin:0 0 18px; color:#fff !important; font-size:40px; line-height:46px; }
.ab-cta-band .ab-cta-inner p{ color:#fff; font-size:20px; line-height:32px; }
.ab-webinar{ display:flex; align-items:center; gap:24px; max-width:660px; margin:36px auto 0; padding:20px 26px; border:1px solid rgba(255,255,255,.6); text-align:left; }
.ab-webinar p{ margin:0 !important; font-size:18px !important; line-height:28px !important; }
.ab-webinar-date{ flex:0 0 auto; min-width:96px; padding:12px 14px; text-align:center; background:#fff; font-family:var(--ab-font-head); line-height:1; }
.ab-webinar-date b{ display:block; font-size:46px; font-weight:600; color:var(--ab-red); }
.ab-webinar-date i{ display:block; margin-top:4px; font-style:normal; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ab-ink); }
/* the band runs into the footer: drop the theme's 47px bottom padding on this page */
.qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner:has(.ab-cta-band){ padding-bottom:0; }
@media (max-width:767px){
  .ab-photo-frame{ margin-top:34px; }
  .ab-photo-frame img{ box-shadow:12px 12px 0 0 var(--ab-red); }
  .ab-photo-frame .vc_column-inner{ padding-right:12px !important; }
  .ab-stories{ grid-template-columns:1fr; }
  .ab-story{ padding:20px 18px; gap:16px; }
  .ab-story p{ font-size:17px; line-height:26px; }
  .ab-story-pic{ flex:0 0 68px; width:68px; height:68px; }
  .ab-story-icon{ font-size:28px; }
  .ab-cta-band{ margin-top:50px; padding:60px 0 70px; }
  .ab-cta-band .ab-cta-inner h3{ font-size:28px; line-height:34px; }
  .ab-cta-band .ab-cta-inner p{ font-size:18px; line-height:28px; }
  .ab-webinar{ flex-direction:column; text-align:center; gap:16px; }
}

/* ---- La campagne majeure: "15 M$ sur 3 ans" goal tile (decorative figure + the real sentence) ---- */
.ab-goal{ display:flex; align-items:center; gap:32px; padding:26px 34px 26px 26px; background:#f9f9f9; border-left:4px solid var(--ab-red); }
.ab-goal p{ margin:0; font-size:24px; line-height:34px; color:var(--ab-ink); }
.ab-goal-figure{ flex:0 0 auto; min-width:150px; padding:16px 18px; text-align:center; background:var(--ab-red); color:#fff; font-family:var(--ab-font-head); line-height:1; }
.ab-goal-figure b{ display:block; font-size:72px; font-weight:600; }
.ab-goal-figure i{ display:inline-block; margin:6px 3px 0; font-style:normal; font-size:16px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:767px){
  .ab-goal{ flex-direction:column; align-items:flex-start; gap:18px; padding:22px 20px; }
  .ab-goal p{ font-size:20px; line-height:28px; }
}

/* ---- 150 ans d'action: the 8 figures as cards (red top border), equal height per row ---- */
.ab-figures{ display:flex; flex-wrap:wrap; margin-bottom:0; }
.ab-figures::before,.ab-figures::after{ display:none; }
.ab-figures > .vc_column_container{ display:flex; margin-bottom:30px; }
.ab-figures > .vc_column_container > .vc_column-inner{ width:100%; height:100%; }
.ab-figures .vc_column-inner > .wpb_wrapper{ height:100%; padding:22px 26px 30px; background:#f9f9f9; border-top:4px solid var(--ab-red); }
@media (max-width:767px){
  .ab-figures > .vc_column_container > .vc_column-inner{ padding-left:6px !important; padding-right:6px !important; }
  .ab-figures .vc_column-inner > .wpb_wrapper{ padding:16px 14px 22px; }
}

/* ---- Dons en argent: heading left, stacked icon cards right (prod's two-column rhythm), tagline, mail link in the red band ---- */
.ab-stories-1{ grid-template-columns:1fr; gap:16px; }
.ab-stories-1 .ab-story{ padding:22px 28px; }
.ab-stories-1 .ab-story p{ font-size:18px; line-height:28px; }
h3.ab-offer-title{ margin:6px 0 0; font-size:38px; line-height:44px; color:var(--ab-ink); }
h3.ab-statement{ max-width:860px; margin:40px auto 0; text-align:center; font-size:30px; line-height:38px; color:var(--ab-ink); }
.ab-cta-inner a{ color:#fff; text-decoration:underline; }
.ab-cta-inner a:hover{ color:#fff; text-decoration:none; }
@media (max-width:767px){
  h3.ab-offer-title{ font-size:28px; line-height:34px; margin-bottom:18px; }
  .ab-stories-1 .ab-story{ padding:16px 14px; gap:14px; }
  .ab-stories-1 .ab-story-pic{ flex:0 0 52px; width:52px; height:52px; font-size:22px; }
  .ab-stories-1 .ab-story p{ font-size:17px; line-height:26px; }
  h3.ab-statement{ font-size:22px; line-height:30px; margin-top:28px; }
}

/* ---- Dons en argent: the mid-page band gets a lighter red wash than the other closing bands, so the photo carries more contrast ---- */
.vc_row.ab-cta-band-light::before{ background:linear-gradient(rgba(201,0,60,.7),rgba(201,0,60,.58)); }
.ab-cta-band .ab-cta-inner h3{ text-wrap:balance; }

/* ---- Buttons site-wide: the donation CTAs were 12px, too small to read as the main action.
   Solid buttons scale by size; the top-bar "Donner" button follows. Text links (qodef-btn-simple) are left alone. ---- */
.qodef-btn.qodef-btn-solid{ font-size:15px !important; }
.qodef-btn.qodef-btn-solid.qodef-btn-small{ font-size:14px !important; }
.qodef-btn.qodef-btn-solid.qodef-btn-large{ font-size:17px !important; }
.qodef-btn.qodef-btn-solid.qodef-btn-huge{ font-size:19px !important; }
.qodef-top-bar .ab-donate-btn,.qodef-top-bar .ab-donate-btn a{ font-size:15px !important; }

/* ---- Dons en nature: two-tone info strip, starred need lists, linked "autres façons" cards ---- */
.ab-info-red,.ab-info-red h3,.ab-info-red p,.ab-info-red strong{ color:#fff; }
.ab-info-grey h3,.ab-info-red h3{ margin:0 0 18px; font-size:34px; line-height:40px; }
.ab-info-grey p,.ab-info-red p{ font-size:18px; line-height:28px; }
.ab-info-red a{ color:#fff; text-decoration:underline; }
.ab-info-red a:hover{ text-decoration:none; }
.ab-needs{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ab-need{ padding:30px 32px 32px; background:#f9f9f9; border-top:4px solid var(--ab-red); }
.ab-need-head{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.ab-need-head h3{ margin:0; font-size:28px; line-height:34px; color:var(--ab-ink); }
.ab-need ul{ margin:0; padding:0; list-style:none; }
.ab-need li{ position:relative; margin:0; padding:7px 0 7px 34px; font-size:18px; line-height:28px; color:var(--ab-ink); }
.ab-need li i{ position:absolute; left:0; top:11px; color:var(--ab-red); font-size:18px; }
.ab-story .ab-story-text{ font-size:18px; line-height:28px; color:var(--ab-ink); }
a.ab-story{ text-decoration:none; color:inherit; transition:background .2s ease; }
a.ab-story:hover{ background:#f0f0f0; }
@media (max-width:767px){
  .ab-needs{ grid-template-columns:1fr; }
  .ab-need{ padding:22px 20px 24px; }
  .ab-need-head h3{ font-size:22px; line-height:28px; }
  .ab-need li{ font-size:17px; }
}
@media (max-width:767px){
  /* Dons en nature: the address / hours boxes keep their 44px side padding on desktop only */
  .qodef-eh-item-content:has(.ab-info-grey),.qodef-eh-item-content:has(.ab-info-red){ padding:28px 22px 32px !important; }
  .ab-info-grey h3,.ab-info-red h3{ font-size:28px; line-height:34px; }
}

/* ---- Qui sommes-nous?: value cards (term + description), plain starred list, people cards ---- */
.ab-story-body{ display:block; }
.ab-value-term{ display:block; margin-bottom:6px; font-family:var(--ab-font-head); font-size:26px; line-height:32px; font-weight:600; color:var(--ab-ink); }
.ab-story-body .ab-story-text{ display:block; }
.ab-need-plain{ padding:0; background:none; border-top:0; }
.ab-need-plain li{ padding-top:8px; padding-bottom:8px; }
.ab-people{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-person{ padding:20px 24px 22px; background:#f9f9f9; border-left:4px solid var(--ab-red); }
.ab-person-name{ display:block; font-family:var(--ab-font-head); font-size:24px; line-height:30px; font-weight:600; color:var(--ab-ink); }
.ab-person-role{ display:block; margin-top:4px; font-size:16px; line-height:24px; color:var(--ab-ink-600); }
@media (max-width:1024px){ .ab-people{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  .ab-people{ grid-template-columns:1fr; gap:12px; }
  .ab-person{ padding:16px 18px 18px; }
  .ab-person-name{ font-size:22px; line-height:28px; }
  .ab-value-term{ font-size:22px; line-height:28px; }
}

/* ---- Espace santé: six service cards (hours, services, reasons), cropped photo ---- */
.ab-photo-cover img{ height:340px; object-fit:cover; object-position:78% center; }
.ab-svc-grid{ align-items:start; }
.ab-svc .ab-svc-label{ margin:18px 0 4px; font-family:var(--ab-font-head); font-size:20px; line-height:26px; font-weight:600; color:var(--ab-red-700); }
.ab-svc .ab-svc-line{ margin:0 0 4px; font-size:18px; line-height:28px; color:var(--ab-ink); }
.ab-svc ul{ margin:0 0 6px; }
.ab-svc li{ padding-top:4px; padding-bottom:4px; font-size:17px; line-height:26px; }
.ab-svc li i{ top:8px; font-size:16px; }
@media (max-width:767px){
  .ab-photo-cover img{ height:240px; }
  .ab-svc .ab-svc-label{ font-size:18px; }
  .ab-svc .ab-svc-line{ font-size:17px; }
}

/* ---- Soutenez 150 ans d'action: wide opening statement, photo/poster carousel, illustrated story panels ---- */
.ab-lead-wide p{ font-size:22px; line-height:34px; color:var(--ab-ink); }
.ab-lead-wide p + p{ margin-top:14px; }
.ab-campaign-carousel .qodef-image-gallery{ margin:0; }
.ab-campaign-carousel .qodef-ig-image img{ display:block; width:100%; height:auto; }
.ab-campaign-carousel .owl-nav button{ background:#fff !important; color:var(--ab-red) !important; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.ab-campaign-carousel .owl-nav button:hover{ background:var(--ab-red) !important; color:#fff !important; }
/* The two stories (Sœur Nicole, Pierre M.): plain on white. Heading, three dated steps joined by a line with dots, closing quote. */
.ab-story-block + .ab-story-block{ margin-top:64px; }
.ab-committee-title{ margin:0 0 24px; font-size:26px; line-height:34px; color:var(--ab-ink); }
.ab-story-block h3{ margin:0 0 30px; font-size:26px; line-height:34px; color:var(--ab-ink); }
.ab-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.ab-steps li{ position:relative; margin:0; padding-top:34px; border-top:2px solid var(--ab-line); }
.ab-steps li::before{ content:""; position:absolute; left:0; top:-9px; width:16px; height:16px; box-sizing:border-box; border-radius:50%; background:var(--ab-red); border:3px solid var(--ab-bg); box-shadow:0 0 0 2px var(--ab-red); }
.ab-step-year{ display:block; margin-bottom:10px; font-family:var(--ab-font-head); font-size:44px; line-height:46px; font-weight:600; color:var(--ab-red); }
.ab-steps p{ margin:0 0 10px; font-size:17px; line-height:28px; }
.ab-quote{ margin:40px 0 0; padding:4px 0 4px 26px; border:0; border-left:4px solid var(--ab-red); background:none; }
.ab-quote::before,.ab-quote::after{ content:none !important; display:none !important; } /* the theme draws a big quote glyph on every blockquote */
.ab-quote p{ margin:0; font-size:21px; line-height:33px; font-style:italic; color:var(--ab-red); }
.ab-quote cite{ display:block; margin-top:10px; font-style:normal; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ab-ink); }
@media (max-width:767px){
  .ab-lead-wide p{ font-size:19px; line-height:29px; }
  .ab-committee-title{ font-size:22px; line-height:29px; margin-bottom:18px; }
  .ab-story-block h3{ font-size:22px; line-height:29px; margin-bottom:24px; }
  .ab-steps{ grid-template-columns:1fr; gap:30px; }
  .ab-steps li{ padding-top:28px; }
  .ab-step-year{ font-size:38px; line-height:40px; }
  .ab-quote p{ font-size:18px; line-height:28px; }
}