/*
Theme Name: Cooperation Canada — ATLAS
Theme URI: https://github.com/anthodesro/atlas-stack
Description: Lightweight, mobile-first theme for the ATLAS dashboard, matching the Cooperation Canada brand (Quicksand, navy/blue/green palette). Original code — pairs with the metabase-embed plugin for the interactive dashboard components.
Author: Cooperation Canada / ATLAS
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: cc-atlas
*/

/* =========================================================================
   1. Brand tokens (from the Cooperation Canada Website Style Guide)
   ========================================================================= */
:root {
  --cc-navy:        #0a1d3c;   /* Dark Blue  */
  --cc-medium-blue: #2e5c9e;   /* Medium Blue */
  --cc-blue:        #009cde;   /* Bright Blue */
  --cc-green:       #84cc62;   /* Green */
  --cc-mint:        #f4fcf9;   /* light section bg */
  --cc-black:       #16191c;
  --cc-dark-grey:   #58595b;
  --cc-grey:        #5a6c80;
  --cc-light-grey:  #eef2f6;
  --cc-border:      rgba(10, 33, 60, 0.10);
  --cc-white:       #ffffff;

  --cc-text:        var(--cc-navy);
  --cc-link:        var(--cc-blue);
  --cc-link-hover:  var(--cc-medium-blue);

  --cc-font: "Quicksand", "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --cc-wrap:    1280px;   /* content container */
  --cc-wrap-wide: 1480px; /* wide (dashboards) */
  --cc-gap:     clamp(16px, 4vw, 32px);
  --cc-radius:  10px;
  --cc-shadow:  0 4px 24px rgba(10, 33, 60, 0.08);
}

/* =========================================================================
   2. Reset + base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cc-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cc-text);
  background: var(--cc-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cc-link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--cc-link-hover); }
strong, b { font-weight: 700; }

/* =========================================================================
   3. Typography (Quicksand)
   ========================================================================= */
h1, h2, h3, h4, h5, h6 { font-family: var(--cc-font); color: var(--cc-navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 700; }
h5 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }
.cc-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .8rem; color: var(--cc-medium-blue); }
/* Acronyms found in body text (wrapped by the footer-glossary tooltip script):
   discreet dotted underline + a branded hover tooltip (full name). */
abbr.cc-acronym { text-decoration: none; border-bottom: 1px dotted var(--cc-medium-blue, #2e5c9e); cursor: help; }
abbr.cc-acronym:hover { border-bottom-color: var(--cc-blue, #009cde); color: var(--cc-medium-blue, #2e5c9e); }
.cc-acronym-tip {
  position: fixed; z-index: 2147483647; top: 0; left: 0; max-width: 260px;
  background: var(--cc-navy, #0a1d3c); color: #fff;
  font: 500 13px/1.45 var(--cc-font, "Quicksand", "Helvetica Neue", Arial, sans-serif);
  padding: 8px 11px; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 33, 60, .30);
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.cc-acronym-tip.is-on { opacity: 1; transform: translateY(0); }
.cc-acronym-tip::after { content: ""; position: absolute; left: var(--arrow, 50%); margin-left: -5px; border: 5px solid transparent; }
.cc-acronym-tip[data-pos="above"]::after { top: 100%; border-top-color: var(--cc-navy, #0a1d3c); }
.cc-acronym-tip[data-pos="below"]::after { bottom: 100%; border-bottom-color: var(--cc-navy, #0a1d3c); }

/* =========================================================================
   4. Layout
   ========================================================================= */
.cc-wrap   { width: 100%; max-width: var(--cc-wrap); margin: 0 auto; padding-inline: var(--cc-gap); }
.cc-wrap--wide { max-width: var(--cc-wrap-wide); }
.cc-main   { min-height: 60vh; padding-block: clamp(28px, 6vw, 56px); }
.cc-section--mint { background: var(--cc-mint); }
.cc-section { padding-block: clamp(32px, 7vw, 72px); }

/* =========================================================================
   5. Header — two tier: navy utility bar + white main nav
   ========================================================================= */
/* display:contents so the topbar + mainbar lay out as direct children of body
   — that lets the mainbar's sticky stick to the viewport (instead of being
   trapped inside the short header box) while the navy topbar scrolls away. */
.cc-header { display: contents; }
.cc-mainbar { position: sticky; top: 0; z-index: 1000; background: var(--cc-white); box-shadow: 0 2px 14px rgba(10,33,60,.06); }
/* Tier 1 — navy utility bar */
.cc-topbar { background: #214b8b; color: rgba(255,255,255,.85); }
.cc-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; font-size: .82rem; }
.cc-topbar__back { display: inline-flex; align-items: center; gap: 7px; }
.cc-topbar__back svg { width: 14px; height: 14px; }
.cc-topbar__link { color: rgba(255,255,255,.88); font-weight: 700; letter-spacing: .02em; }
.cc-topbar__link:hover { color: var(--cc-blue); }
.cc-social--top { display: inline-flex; gap: 13px; margin-right: 4px; }
.cc-social--top a { display: inline-flex; }
.cc-social--top svg { width: 15px; height: 15px; fill: rgba(255,255,255,.82); }
.cc-social--top a:hover svg { fill: var(--cc-blue); }
.cc-lang { letter-spacing: .04em; }
/* Tier 2 — white main bar */
.cc-mainbar__inner { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.cc-mainbar__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
/* The ATLAS wordmark SVG carries internal whitespace in its 960x540
   viewBox — 62px box ≈ 42px of visible mark, same optical size as the
   old Cooperation Canada logo. */
.cc-mainbar__logo img { height: 76px; width: auto; }
.cc-header__nav { margin-left: auto; display: flex; align-items: center; }
.cc-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cc-header__menu a { color: var(--cc-navy); font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.cc-header__menu a:hover { color: var(--cc-blue); }
.cc-header__menu .current-menu-item > a, .cc-header__menu .current_page_item > a, .cc-header__menu .current-menu-item-active > a { color: var(--cc-blue); border-bottom-color: var(--cc-blue); }
.cc-search-toggle { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: transparent; color: var(--cc-navy); cursor: pointer; padding: 9px; }
.cc-search-toggle:hover { color: var(--cc-blue); }
.cc-header__toggle { display: none; flex: 0 0 auto; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.cc-header__toggle span { display: block; height: 2px; background: var(--cc-navy); border-radius: 2px; transition: .2s; }
.cc-header__toggle span + span { margin-top: 5px; }
.cc-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cc-font); font-weight: 700; font-size: .9rem; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--cc-navy); background: var(--cc-navy); color: var(--cc-white); cursor: pointer; transition: background .15s, border-color .15s; }
.cc-btn:hover { background: var(--cc-blue); border-color: var(--cc-blue); color: var(--cc-white); }

/* Dropdown sub-menus — mirror the dashboard page sections */
.cc-header__menu .cc-has-sub { position: relative; }
.cc-caret { display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; vertical-align: middle; opacity: .55; }
.cc-submenu { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: -14px; min-width: 252px; background: #fff; border: 1px solid var(--cc-border); border-radius: 10px; box-shadow: 0 14px 34px rgba(10,33,60,.15); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.cc-header__menu .cc-has-sub:hover > .cc-submenu, .cc-header__menu .cc-has-sub:focus-within > .cc-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-submenu li { margin: 0; }
.cc-submenu a { display: block; padding: 9px 18px; color: var(--cc-navy); font-weight: 500; font-size: .88rem; border-bottom: 0; white-space: normal; }
.cc-submenu a:hover { background: var(--cc-mint); color: var(--cc-blue); }
/* Current location inside a sub-menu (selected year, current History page, or
   — via scroll-spy — the section currently in view): bright blue, mirroring
   the main-nav current-page state. */
.cc-submenu li.is-current > a,
.cc-submenu a[aria-current="true"],
.cc-submenu a.is-current { color: var(--cc-blue); font-weight: 700; }

/* Atlas AI — sober outlined tab */
.cc-ai-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; padding: 7px 14px; margin-left: 10px; border-radius: 8px; color: var(--cc-navy); background: transparent; border: 1px solid rgba(10,33,60,.16); white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.cc-ai-btn:hover { color: var(--cc-blue); border-color: var(--cc-blue); background: rgba(0,156,222,.05); }
.cc-ai-btn svg { width: 15px; height: 15px; opacity: .8; }

/* =========================================================================
   6. Footer (navy — link columns + newsletter + social)
   ========================================================================= */
.cc-footer { background: linear-gradient(180deg, #214b8b 0%, #0a1d3c 100%); color: rgba(255,255,255,0.82); padding-block: clamp(44px, 7vw, 68px) 0; margin-top: 56px; }
.cc-footer a { color: rgba(255,255,255,0.82); }
.cc-footer a:hover { color: var(--cc-blue); }
.cc-footer__top { display: grid; grid-template-columns: 1.4fr 1.1fr 1.8fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cc-footer__logo { height: 52px; width: auto; margin-bottom: 20px; }
/* Email + phone with line icons — mirrors cooperation.ca */
.cc-footer__contacts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; font-size: .94rem; }
.cc-footer__contacts li { display: flex; align-items: center; gap: 11px; }
.cc-footer__contacts svg { width: 18px; height: 18px; flex: 0 0 auto; color: rgba(255,255,255,0.85); }
.cc-footer__contacts a { color: #fff; }
/* CONTACT US column — heading, "Ottawa Office" with its trailing rule, address */
.cc-footer__heading { color: #fff; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 18px; }
.cc-footer__office { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: #fff; font-weight: 700; font-size: .95rem; }
.cc-footer__office::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,0.45); }
.cc-footer__address { font-style: normal; font-size: .94rem; line-height: 1.75; color: rgba(255,255,255,0.85); }
.cc-footer__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.cc-footer__col h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.cc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
/* Partnership row — Canada wordmark + land acknowledgment, like cooperation.ca */
.cc-footer__partnership { display: flex; align-items: center; gap: clamp(24px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,0.12); margin-top: 40px; padding-top: 34px; }
.cc-footer__canada { height: 64px; width: auto; flex: 0 0 auto; }
.cc-footer__partnership p { margin: 0; font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,0.8); }
.cc-footer__partnership strong { color: #fff; }
.cc-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-block: 22px; font-size: .82rem; color: rgba(255,255,255,0.55); }
/* Round white social buttons with navy glyphs — mirrors cooperation.ca */
.cc-social { display: flex; gap: 13px; }
.cc-social a { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.cc-social a:hover { background: var(--cc-blue); transform: translateY(-1px); }
.cc-social a:hover svg { fill: #fff; }
.cc-social svg { width: 17px; height: 17px; fill: #0a1d3c; transition: fill .15s; }
@media (max-width: 860px) {
  .cc-footer__top { grid-template-columns: 1fr; }
  .cc-footer__partnership { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   7. Mobile (the big improvement — mobile-first nav drawer + fluid layout)
   Breakpoint raised 900 → 1120: the 7-item nav needs ~1070px to stay on ONE
   line (FR labels are long), so it wrapped to two rows on iPad Pro portrait
   (1032px). Below 1120 we switch to the hamburger drawer instead of letting the
   bar wrap. iPad landscape (1366) and laptops/desktops keep the full nav.
   ========================================================================= */
@media (max-width: 1120px) {
  .cc-header__toggle { display: block; }
  .cc-search-toggle { display: none; }
  /* Keep "Exit the dashboard" on the LEFT (and the EN/FR toggle on the right)
     on tablet/phone — space-between, like desktop. (Was flex-end, which pushed
     the Exit link to the right next to the language toggle.) */
  .cc-topbar__inner { justify-content: space-between; gap: 14px; }
  /* drawer drops below the whole header (sticky header is the positioning context) */
  .cc-header__nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cc-navy); margin: 0; padding: 0; max-height: 0; overflow: hidden;
    transition: max-height .28s ease; box-shadow: 0 14px 26px rgba(0,0,0,.28);
  }
  .cc-header[data-open="true"] .cc-header__nav { max-height: 80vh; overflow: auto; padding: 6px 0 18px; }
  .cc-header[data-open="true"] .cc-header__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .cc-header[data-open="true"] .cc-header__toggle span:nth-child(2){ opacity: 0; }
  .cc-header[data-open="true"] .cc-header__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .cc-header__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .cc-header__menu li { border-top: 1px solid rgba(255,255,255,0.08); }
  .cc-header__menu a { display: block; padding: 14px var(--cc-gap); font-size: 1rem; color: rgba(255,255,255,.92); border-bottom: 0; }
  .cc-header__menu a:hover, .cc-header__menu .current-menu-item > a, .cc-header__menu .current_page_item > a { color: var(--cc-blue); border-bottom: 0; }
  /* sub-menus expand inline inside the drawer */
  .cc-caret { display: none; }
  .cc-submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: rgba(0,0,0,.18); padding: 0; min-width: 0; }
  .cc-submenu a { color: rgba(255,255,255,.74); padding: 11px var(--cc-gap) 11px calc(var(--cc-gap) + 18px); font-size: .9rem; }
  .cc-submenu a:hover { background: rgba(0,0,0,.25); color: var(--cc-blue); }
  .cc-ai-btn { margin: 16px var(--cc-gap) 4px; justify-content: center; color: #fff; border-color: rgba(255,255,255,.32); }
  .cc-ai-btn:hover { color: var(--cc-blue); border-color: var(--cc-blue); background: rgba(255,255,255,.06); }
}

/* ════════════════════════════════════════════════════════════════
   Dashboard body width = VPS (.mbe-main: 1400px / 48px pad) + full-bleed
   overview + tighter nav sub-menus.  (Appended overrides.)
   ════════════════════════════════════════════════════════════════ */
.cc-page { max-width: 1400px; padding-inline: clamp(20px, 4vw, 48px); }

/* Match the VPS dashboard typography: body text justifies by default
   (raw text nodes included — the VPS does this on .mbe-main), headings
   stay naturally left-aligned. Blocks with their own explicit alignment
   (hero, centered captions) keep it: inheritance only fills the gaps. */
.cc-main { text-align: justify; hyphens: auto; }
.cc-main h1, .cc-main h2, .cc-main h3, .cc-main h4, .cc-main h5, .cc-main h6 { text-align: left; }

/* Overview (ov2) is an edge-to-edge editorial layout: let its sections
   bleed to the viewport instead of being boxed inside the body width. */
.cc-main:has(.mbe-ov2) { padding-block: 0; }
.cc-page:has(.mbe-ov2) { max-width: none; padding-inline: 0; }
.cc-page:has(.mbe-ov2) .cc-article__body { max-width: none; }
/* Hero fills the space under the header on first paint so the next
   section''s top peeks at the fold and invites scrolling. */
.cc-page:has(.mbe-ov2) .mbe-ov2-hero { min-height: calc(100dvh - 116px); }

/* Nav sub-menus size to content (year list stays narrow) but never wrap.
   max-width fits the longest FR label ("Des sources de revenus diversifiées
   et changeantes") on a single line; max-content keeps short menus narrow. */
.cc-submenu { min-width: 0; width: max-content; max-width: 440px; }
.cc-submenu a { white-space: nowrap; }
/* Footer acronyms glossary (replaces the newsletter block). */
/* Footer acronyms — full-width collapsible glossary (all VPS terms). */
.cc-footer__acronyms { margin: 34px 0 4px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
.cc-footer__acronyms > summary { cursor: pointer; list-style: none; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.cc-footer__acronyms > summary::-webkit-details-marker { display: none; }
.cc-footer__acronyms > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 700; line-height: 1; }
.cc-footer__acronyms[open] > summary::before { content: "\2212"; }
.cc-footer__acronyms dl { margin: 16px 0 0; columns: 2; column-gap: 44px; }
.cc-footer__acronyms dt { font-weight: 800; color: #fff; font-size: .78rem; letter-spacing: .02em; margin-top: 11px; break-after: avoid; }
.cc-footer__acronyms dd { margin: 2px 0 0; font-size: .76rem; color: rgba(255,255,255,.66); line-height: 1.4; break-inside: avoid; }
.cc-footer__credit { margin: 20px 0 0; font-size: .78rem; color: rgba(255,255,255,.6); font-style: italic; }
/* "Developed by L&D Strategies inc." — final fine-print line under the footer bottom bar. */
.cc-footer__dev { text-align: center; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0 4px; font-size: .78rem; color: rgba(255,255,255,.45); }
.cc-footer__dev a { color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 2px; }
.cc-footer__dev a:hover { color: var(--cc-blue); }
@media (max-width: 760px) { .cc-footer__acronyms dl { columns: 1; } }
/* No white gap between the overview's full-bleed sections and the footer. */
.cc-main:has(.mbe-ov2) ~ .cc-footer { margin-top: 0; }
/* ════════════════════════════════════════════════════════════════
   Overview hero — typography & spacing refinement (cc-atlas overrides).
   Bigger wordmark, tighter type hierarchy, more present CTAs, and a
   gentle staggered entrance. (Logo size left WITHOUT !important so the
   short-viewport @media rule in the ov2 module still wins on low screens.)
   ════════════════════════════════════════════════════════════════ */
.mbe-ov2-hero-logo { height: clamp(84px, min(15vw, 17vh), 190px); margin-bottom: clamp(0.9rem, 2.6vh, 1.9rem); }
.mbe-ov2-hero-title { letter-spacing: -0.035em !important; line-height: 0.98 !important; }
.mbe-ov2-hero-sub { max-width: 600px; margin-left: auto !important; margin-right: auto !important; }
.mbe-ov2-hero-ctas { gap: 16px !important; margin-top: 0.4rem; }

/* CTAs more present: larger hit area + a soft lift on the primary. */
.mbe-ov2-hero .mbe-ov2-btn { padding: 15px 34px !important; font-size: clamp(15px, 1.1vw, 17px) !important; font-weight: 700 !important; transition: transform .18s ease, box-shadow .18s ease !important; }
.mbe-ov2-hero .mbe-ov2-btn--primary { box-shadow: 0 12px 30px rgba(0,156,222,.30); }
.mbe-ov2-hero .mbe-ov2-btn:hover { transform: translateY(-2px); }
.mbe-ov2-hero .mbe-ov2-btn--primary:hover { box-shadow: 0 16px 38px rgba(0,156,222,.40); }

/* ── Fit-to-fold ─────────────────────────────────────────────────
   The hero is min-height: calc(100dvh - 116px), but its vertical air
   was all FIXED margins/paddings (60px paddings, 1.9-3rem margins,
   190px logo): on a 1080p laptop the browser chrome eats ~140px and
   the CTAs slipped below the fold. Every vertical gap now scales with
   the viewport HEIGHT (clamp + vh): full airy layout on tall screens,
   tight around the logo on short ones, content always above the fold.
   The ov2 module's own margins carry !important at (0,1,0) specificity
   and are printed AFTER this stylesheet — the .mbe-ov2 descendant
   selectors (0,2,0) + !important win regardless of order. */
.mbe-ov2 .mbe-ov2-hero { padding-top: clamp(14px, 3.5vh, 60px); padding-bottom: clamp(12px, 2.2vh, 28px); }
.mbe-ov2 .mbe-ov2-hero-inner { padding-bottom: clamp(10px, 3vh, 60px); }
.mbe-ov2 .mbe-ov2-hero-supporter { margin-bottom: clamp(0.8rem, 2.4vh, 2.5rem) !important; }
.mbe-ov2 .mbe-ov2-hero-title { margin-bottom: clamp(0.7rem, 1.8vh, 1.5rem) !important; }
.mbe-ov2 .mbe-ov2-hero-sub { margin-bottom: clamp(1.1rem, 3vh, 3rem) !important; }

/* Gentle staggered entrance on first paint. */
@keyframes cc-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .mbe-ov2-hero-logo,
  .mbe-ov2-hero-supporter,
  .mbe-ov2-hero-title,
  .mbe-ov2-hero-sub,
  .mbe-ov2-hero-ctas { animation: cc-hero-rise .72s cubic-bezier(.22,.61,.36,1) both; }
  .mbe-ov2-hero-supporter { animation-delay: .08s; }
  .mbe-ov2-hero-title { animation-delay: .16s; }
  .mbe-ov2-hero-sub { animation-delay: .28s; }
  .mbe-ov2-hero-ctas { animation-delay: .40s; }
}
/* ── Audio-assistance toggle (accessibility) in the top utility bar ───────── */
.cc-topbar__back { margin-right: auto; } /* keep lang + assist grouped on the right */
.cc-assist-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; font: inherit; line-height: 1;
}
.cc-assist-toggle svg { width: 16px; height: 16px; }
.cc-assist-toggle[aria-pressed="true"] { color: #84cc62; } /* vert ATLAS = activé */
.cc-assist-toggle:focus-visible { outline: 2px solid #009cde; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 520px) { .cc-assist-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }