/* ===================================================================
   Sagesses Modernes — styles.css
   Brand v2.2 (25 avril 2026 · verrouillé Keita Karamo)
   Palette 60-30-10 : Off-white #ffffff / Navy #0a2a4d / Forest Green #2d7a4a / Or filets #2d7a4a
   Typo : Source Serif Pro headlines + Source Sans Pro body
   =================================================================== */

/* ───── @font-face self-host (v2.2.4 — subset Latin, ~66 KB total) ───── */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-pro-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-pro-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───── Variables ───── */
:root {
  /* Palette v2.2 */
  --off-white: #ffffff;
  --white: #ffffff;
  --navy: #0a2a4d;
  --navy-dark: #061a30;
  --forest: #2d7a4a;
  --forest-dark: #235e39;
  --or: #2d7a4a;
  --or-light: #e0b94d;
  --border: #ebe8e0;
  --text: #0a2a4d;
  --text-secondary: #5a6573;
  --text-muted: #8a93a0;
  --bg-dark: #1a1a2e;
  --error: #c0392b;

  /* Typo */
  --font-serif: "Source Serif Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans Pro", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;

  /* Spacing scale (8 px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --container-text: 720px;
  --radius: 6px;
  --radius-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.3s;
  --t-slow: 0.6s;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 42, 77, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 42, 77, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 42, 77, 0.12);
  --shadow-xl: 0 24px 56px rgba(10, 42, 77, 0.16);
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ───── Base ───── */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
}
::selection { background: var(--forest); color: var(--white); }

/* ───── Typography ───── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.18; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; }
p { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
p.lead { font-size: 1.18rem; line-height: 1.65; color: var(--text); }
p + p { margin-top: var(--s-4); }
a:hover { color: var(--forest); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: var(--s-4);
}
.eyebrow--muted { color: var(--text-secondary); }
.eyebrow--or { color: var(--forest); }

.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(45, 122, 74,0.1);
  border: 1px solid rgba(45, 122, 74,0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--navy);
  border-left: 3px solid var(--or);
  padding-left: var(--s-6);
  margin: var(--s-8) 0;
}
blockquote cite { display: block; margin-top: var(--s-3); font-size: 0.95rem; font-style: normal; color: var(--text-secondary); }

code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--border); padding: 1px 6px; border-radius: 4px; }

hr.rule { border: 0; height: 1px; background: var(--border); margin: var(--s-12) 0; }
hr.rule--gold { background: linear-gradient(90deg, transparent, var(--or), transparent); height: 2px; }

/* ───── Layout ───── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }
.section { padding-block: var(--s-20); }
.section--sm { padding-block: var(--s-12); }
.section--lg { padding-block: var(--s-24); }
.section--dark { background: var(--navy); color: var(--white); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(255,255,255,0.85); }
.section--white { background: var(--white); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.flex { display: flex; gap: var(--s-4); }
.flex--center { align-items: center; justify-content: center; }
.flex--wrap { flex-wrap: wrap; }
.flex--col { flex-direction: column; }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.muted { color: var(--text-secondary); }

/* ───── Header ───── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--border); background: rgba(255, 255, 255, 0.95); }

/* Pages with hero bg image: header navy semi-transparent + white text (readable both on hero bg and breadcrumb white) */
body.has-hero-bg .site-header {
  background: rgba(10, 42, 77, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.has-hero-bg .breadcrumbs {
  color: var(--text-secondary);
}
body.has-hero-bg .site-header .brand,
body.has-hero-bg .site-header .nav a,
body.has-hero-bg .site-header .nav-toggle {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.40);
}
body.has-hero-bg .site-header .btn-primary {
  background: var(--forest);
  color: #ffffff !important;
  text-shadow: none;
}
/* On scroll-down: navy semi-transparent backdrop */
body.has-hero-bg .site-header.is-scrolled {
  background: rgba(10, 42, 77, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.has-hero-bg .site-header.is-scrolled .brand,
body.has-hero-bg .site-header.is-scrolled .nav a {
  color: #ffffff !important;
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SUR IMAGE DE FOND — sous-pages — TEXTE BLANC GARANTI (P0 fix)
   Sélecteur universel : matche les inline styles + classes
   ═══════════════════════════════════════════════════════════════════ */
section.hero[style*="background-image"],
.hero-with-bg,
.page-hero[data-bg],
.page-hero.has-bg {
  position: relative;
  isolation: isolate;
}
section.hero[style*="background-image"]::before,
.hero-with-bg::before,
.page-hero[data-bg]::before,
.page-hero.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(11,37,69,0.55) 100%);
  z-index: 0;
  pointer-events: none;
}
section.hero[style*="background-image"] > *,
.hero-with-bg > *,
.page-hero[data-bg] > *,
.page-hero.has-bg > * {
  position: relative;
  z-index: 1;
}
section.hero[style*="background-image"] h1,
section.hero[style*="background-image"] h2,
section.hero[style*="background-image"] .eyebrow,
section.hero[style*="background-image"] p,
section.hero[style*="background-image"] .lead,
section.hero[style*="background-image"] .fine-print,
section.hero[style*="background-image"] li,
section.hero[style*="background-image"] strong,
.hero-with-bg h1, .hero-with-bg h2, .hero-with-bg .eyebrow, .hero-with-bg p, .hero-with-bg .lead,
.page-hero[data-bg] h1, .page-hero[data-bg] h2, .page-hero[data-bg] .eyebrow, .page-hero[data-bg] p, .page-hero[data-bg] .lead,
.page-hero.has-bg h1, .page-hero.has-bg h2, .page-hero.has-bg .eyebrow, .page-hero.has-bg p, .page-hero.has-bg .lead {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,1);
}
section.hero[style*="background-image"] .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  text-shadow: none;
}
section.hero[style*="background-image"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
}
section.hero[style*="background-image"] .btn-primary { text-shadow: none; }
section.hero[style*="background-image"] .hero-icon,
section.hero[style*="background-image"] .hero-icon svg,
section.hero[style*="background-image"] .hero-icon * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FALLBACK reveal animation — empêche H1 de rester invisible si JS échoue
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
html.no-js .reveal,
html.no-js [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-4); }
.brand { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: -0.01em; color: var(--navy); }
.brand-sagesses { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.03em; }
.brand-modernes { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.brand:hover { color: var(--forest); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--forest);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.nav-toggle { display: none; }
@media (max-width: 1023px) {
  .nav { display: none; flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-4) 0; flex-basis: 100%; }
  .nav.is-open { display: flex; }
  .nav-toggle { display: inline-flex; padding: 8px; }
  .header-inner { flex-wrap: wrap; }
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.btn-primary {
  background: var(--forest);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(45, 122, 74, 0.25);
}
.btn-primary:hover { background: var(--forest-dark); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(45, 122, 74, 0.35); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-ghost { color: var(--navy); padding: 8px 0; font-weight: 600; }
.btn-ghost:hover { color: var(--forest); }
.btn-or { background: var(--or); color: var(--navy); }
.btn-or:hover { background: var(--or-light); }
.btn-on-dark { color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-on-dark:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-block { width: 100%; }
.fine-print { font-size: 0.83rem; color: var(--text-secondary); margin-top: var(--s-3); }
.fine-print--center { text-align: center; }

/* ───── Hero ───── */
.hero { padding-top: var(--s-16); padding-bottom: var(--s-12); background: var(--off-white); }
.hero h1 { max-width: 18ch; margin-bottom: var(--s-5); }
.hero .lead { max-width: 50ch; color: var(--text); margin-bottom: var(--s-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-meta { margin-top: var(--s-3); }

/* ───── Cards ───── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--forest); }
.card h3 { font-size: 1.18rem; }
.card p { font-size: 0.98rem; line-height: 1.65; color: var(--text-secondary); }
.card-num { font-family: var(--font-serif); font-size: 0.85rem; font-weight: 700; color: var(--navy); letter-spacing: 0.1em; }
.card--navy .card-num { color: var(--or); }
.card--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.card--navy h3 { color: var(--white); }
.card--navy p { color: rgba(255,255,255,0.82); }
.card--navy:hover { border-color: var(--or); }
.card--featured {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  border: 0;
  position: relative;
}
.card--featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--or), var(--forest));
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
}
.card--featured h3 { color: var(--white); }
.card--featured p { color: rgba(255,255,255,0.85); }
.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--forest); border: 1px solid var(--forest); padding: 3px 9px; border-radius: 999px; align-self: flex-start;
}
.card--navy .badge { color: var(--or); border-color: var(--or); }
.card--small { padding: var(--s-6); gap: var(--s-3); }
.card-meta { font-size: 0.85rem; color: var(--text-secondary); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ───── Trust bar ───── */
.trust-bar { background: var(--white); padding-block: var(--s-10); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-eyebrow { text-align: center; color: var(--text-secondary); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--s-7); }
.trust-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-8); align-items: center; }
.trust-logo {
  display: flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 8px;
  font-family: var(--font-serif); font-weight: 600; font-size: 1rem;
  color: var(--text-secondary); letter-spacing: 0.02em;
  text-align: center; line-height: 1.1;
  filter: grayscale(100%); opacity: 0.55;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.trust-logo:hover { opacity: 0.85; color: var(--navy); }
.trust-logo img { max-height: 28px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: filter 0.25s ease, opacity 0.25s ease; }
.trust-logo:hover img { filter: grayscale(0%); opacity: 1; }
@media (max-width: 1023px) { .trust-logos { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
@media (max-width: 639px) { .trust-logos { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } .trust-logo { font-size: 0.9rem; } }

/* ───── Diagram Compound ───── */
.compound-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-12) auto;
  max-width: 920px;
}
.compound-step {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5);
  text-align: center;
  position: relative;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.compound-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.compound-step .step-num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 0.85rem; color: var(--or); margin-bottom: 6px; letter-spacing: 0.08em; }
.compound-step h4,
.compound-step h3 { color: var(--white); font-size: 1.12rem; margin-bottom: 4px; }
.compound-step .step-duration { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.compound-arrow { font-size: 1.4rem; color: var(--forest); font-weight: 700; }
@media (max-width: 767px) {
  .compound-diagram { grid-template-columns: 1fr; }
  .compound-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ───── Founder spotlight ───── */
.founder {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-12);
  align-items: center;
  background: var(--white);
  padding: var(--s-12);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.founder-photo {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--navy), var(--navy-dark));
  aspect-ratio: 4/5;
  display: flex; align-items: flex-end; justify-content: center;
  color: var(--or); font-family: var(--font-serif); font-size: 1.1rem; padding: var(--s-4);
  background-size: cover; background-position: center;
}
.founder blockquote { margin: 0; }
@media (max-width: 767px) {
  .founder { grid-template-columns: 1fr; padding: var(--s-8); gap: var(--s-6); }
  .founder-photo { max-width: 220px; margin-inline: auto; }
}

/* ───── Article cards ───── */
.article-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.article-cover {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy), var(--forest));
  position: relative;
  overflow: hidden;
}
.article-cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(45, 122, 74,0.18), transparent 50%);
}
.article-cover-label {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.92); color: var(--navy);
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.article-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; gap: var(--s-3); }
.article-body h3 { font-size: 1.15rem; line-height: 1.3; }
.article-body p { color: var(--text-secondary); font-size: 0.95rem; flex: 1; }
.article-meta { font-size: 0.8rem; color: var(--text-secondary); display: flex; gap: 14px; }

/* ───── Forms ───── */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form-row { display: grid; gap: var(--s-3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.field input, .field textarea, .field select {
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.97rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(45,122,74,0.18);
}
.field--error input, .field--error textarea { border-color: var(--error); }
.field-error-msg { font-size: 0.83rem; color: var(--error); }
.field textarea { min-height: 110px; resize: vertical; }
.field--inline { flex-direction: row; align-items: center; gap: var(--s-3); }
.field--inline label { font-weight: 400; }

.form-on-dark .field input, .form-on-dark .field textarea, .form-on-dark .field select {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.22);
}
.form-on-dark .field input::placeholder { color: rgba(255,255,255,0.55); }
.form-on-dark .field label { color: rgba(255,255,255,0.85); }
.form-on-dark .field input:focus, .form-on-dark .field textarea:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(45, 122, 74,0.25); }

/* ───── Newsletter section ───── */
.newsletter-block {
  background: var(--navy);
  color: var(--white);
  padding: var(--s-12);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.newsletter-block::before {
  content: ""; position: absolute; inset: -50% -10% auto auto; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(45, 122, 74,0.18), transparent 70%);
  pointer-events: none;
}
.newsletter-block h2, .newsletter-block h3 { color: var(--white); position: relative; }
.newsletter-block p { color: rgba(255,255,255,0.85); position: relative; }
.newsletter-block .form { position: relative; max-width: 460px; }

/* ───── Final CTA ───── */
.cta-final { text-align: center; padding-block: var(--s-20); }
.cta-final h2 { max-width: 22ch; margin: 0 auto var(--s-4); }
.cta-final p { max-width: 50ch; margin: 0 auto var(--s-8); color: var(--text-secondary); }

/* ───── Footer ───── */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,0.78); padding-block: var(--s-16); margin-top: var(--s-20); }
.site-footer h4,
.site-footer .footer-h { color: var(--white); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--s-4); }
.site-footer a { color: rgba(255,255,255,0.78); transition: color var(--t-fast); display: inline-block; padding: 4px 0; font-size: 0.92rem; }
.site-footer a:hover { color: var(--or); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s-10); margin-bottom: var(--s-12); }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.95rem; max-width: 36ch; margin-top: var(--s-3); }
.footer-bottom { padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: 0.85rem; color: rgba(255,255,255,0.55); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; } }

/* ───── Lists & FAQ ───── */
.list-check { display: flex; flex-direction: column; gap: var(--s-3); }
.list-check li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.55; }
.list-check li::before { content: "→"; color: var(--forest); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.list-cross li::before { content: "✗"; color: var(--text-secondary); }

.faq-item { border-bottom: 1px solid var(--border); padding-block: var(--s-5); }
.faq-q { width: 100%; text-align: left; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 4px 0; cursor: pointer; }
.faq-q::after { content: "+"; font-family: var(--font-sans); font-weight: 400; font-size: 1.4rem; color: var(--forest); transition: transform var(--t-base); }
.faq-item.is-open .faq-q::after { content: "−"; }
.faq-a { font-size: 0.97rem; line-height: 1.7; color: var(--text); padding-top: var(--s-3); display: none; }
.faq-item.is-open .faq-a { display: block; }

/* ───── Breadcrumbs ───── */
.breadcrumbs { font-size: 0.85rem; color: var(--text-secondary); padding-block: var(--s-4); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--forest); }
.breadcrumbs .sep { margin: 0 6px; color: var(--text-secondary); }

/* ───── Tables ───── */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th, .tbl td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.tbl th { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.tbl tbody tr:hover { background: rgba(45,122,74,0.04); }

/* ───── Reveal & Animations ───── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.count-target { font-family: var(--font-serif); font-weight: 700; color: var(--navy); }

/* ───── Article reading view ───── */
.article-reader { max-width: var(--container-text); margin: var(--s-12) auto; padding-inline: var(--s-6); }
.article-reader h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: var(--s-4); }
.article-reader .article-meta-top { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: 0.88rem; color: var(--text-secondary); margin-bottom: var(--s-8); }
.article-reader p { font-size: 1.085rem; line-height: 1.78; }
.article-reader h2 { margin-top: var(--s-12); margin-bottom: var(--s-4); font-size: 1.55rem; }
.article-reader h3 { margin-top: var(--s-8); margin-bottom: var(--s-3); font-size: 1.2rem; }
.article-reader ul, .article-reader ol { margin-block: var(--s-4); padding-left: var(--s-5); }
.article-reader ul li, .article-reader ol li { margin-block: var(--s-2); list-style: disc; }
.article-reader ol li { list-style: decimal; }
.article-reader ul.list-check li, .article-reader .list-check li { list-style: none; }
.article-reader ul.list-check { padding-left: 0; }
.inline-cta {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-8) 0;
}
.inline-cta strong { display: block; font-family: var(--font-serif); color: var(--navy); margin-bottom: 4px; font-size: 1.05rem; }
.inline-cta a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.author-box { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-6); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-block: var(--s-12); }
.author-photo { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--forest)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--or); font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; }
.author-info p { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.author-info strong { color: var(--navy); }

/* ───── Assessment specifics ───── */
.assess-progress { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: var(--s-8); }
.assess-progress-bar { height: 100%; background: linear-gradient(90deg, var(--forest), var(--or)); transition: width var(--t-base) var(--ease); width: 6%; }
.assess-question { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5) var(--s-8); margin-bottom: var(--s-4); }
.assess-question h3 { font-size: 1.15rem; margin-bottom: var(--s-3); }
.assess-options { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.assess-options--grid { grid-template-columns: 1fr 1fr; }
.assess-option {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  background: var(--white);
  min-height: 44px;
}
.assess-option:hover { border-color: var(--forest); background: rgba(45,122,74,0.04); }
.assess-option input { accent-color: var(--forest); }
.assess-option.is-selected { border-color: var(--forest); background: rgba(45,122,74,0.06); }
.assess-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.assess-warning {
  background: rgba(45, 122, 74,0.07);
  border: 1px solid rgba(45, 122, 74,0.4);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-8);
}
.assess-warning::before { content: "⚠️"; margin-right: 8px; }
.assess-anchor {
  background: var(--navy);
  color: var(--white);
  padding: var(--s-8);
  border-radius: var(--radius-lg);
  margin-block: var(--s-6);
}
.assess-anchor h4 { color: var(--or); font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s-3); }
.assess-anchor p { color: rgba(255,255,255,0.88); margin-bottom: var(--s-3); }
.assess-anchor strong { color: var(--or); }

.score-band { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.score-band--red { background: rgba(192,57,43,0.12); color: #c0392b; }
.score-band--orange { background: rgba(45, 122, 74,0.15); color: #b8800f; }
.score-band--green { background: rgba(45,122,74,0.13); color: var(--forest); }

/* ───── Misc helpers ───── */
.divider { display: flex; align-items: center; gap: var(--s-3); color: var(--or); margin-block: var(--s-6); font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: lowercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--or); opacity: 0.4; }

.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); background: rgba(45,122,74,0.08); padding: 3px 9px; border-radius: 4px; }

.chip { display: inline-flex; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.chip:hover, .chip.is-active { border-color: var(--forest); background: rgba(45,122,74,0.06); color: var(--forest); }

/* ───── Card icons (v2.2.5) ───── */
.card-icon {
  display: inline-flex; width: 40px; height: 40px; padding: 8px;
  border-radius: 8px; background: rgba(45,122,74,0.08); color: var(--forest);
  margin-bottom: var(--s-4);
}
.card-icon svg { width: 100%; height: 100%; stroke-width: 1.75; }
.card--navy .card-icon { background: rgba(45, 122, 74,0.15); color: var(--or); }

.hero-icon {
  display: inline-flex; width: 96px; height: 96px; padding: 18px;
  border-radius: 16px; background: rgba(45,122,74,0.08); color: var(--forest);
  margin-bottom: var(--s-6);
}
.hero-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }

/* ───── Sticky CTA mobile (v2.2.3) ───── */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--forest); color: #fff;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -8px 24px rgba(10,42,77,0.18);
}
.sticky-cta-mobile.is-visible { transform: translateY(0); }
.sticky-cta-mobile.is-hidden { transform: translateY(100%); }
.sticky-cta-mobile:hover { color: #fff; background: #256a3e; }
@media (max-width: 768px) { .sticky-cta-mobile { display: block; } }

/* ───── Founder video placeholder (v2.2.3) ───── */
.founder-video {
  display: block; width: 100%; max-width: 640px; margin: var(--s-8) auto 0;
  border-radius: 12px; overflow: hidden;
  background: #1a1a2e;
}
.founder-video video,
.founder-video .video-placeholder {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
}
.founder-video .video-placeholder {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  color: rgba(255,255,255,0.85); font-family: var(--font-serif); font-style: italic;
  text-align: center; padding: var(--s-6); gap: var(--s-3); background: linear-gradient(135deg, #0a2a4d 0%, #1a1a2e 100%);
}
.founder-video .video-placeholder span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; font-style: normal; font-family: var(--font-sans); font-weight: 600; }
.founder-video .video-placeholder strong { font-size: 1.1rem; font-weight: 600; }

/* ───── Disabled state CTA (v2.2.3 UX fix) ───── */
.btn:disabled, .btn[disabled],
button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ───── Print ───── */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .sticky-cta-mobile { display: none; }
  body { background: white; color: black; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — reserved for future implementation
   [data-theme="dark"] rules will go here
   ═══════════════════════════════════════════════════════════════════ */


/* Language switcher removed — browser handles locale automatically */


/* ═══════════════════════════════════════════════════════════════════
   P0.1 NUCLÉAIRE — surclassement maximum, défense-en-profondeur
   ═══════════════════════════════════════════════════════════════════ */
section.hero[style*="background-image"] h1,
section.hero[style*="background-image"] h2,
section.hero[style*="background-image"] .hero-title,
section.hero[style*="background-image"] .hero__title,
section.hero[style*="background-image"] .eyebrow,
section.hero[style*="background-image"] p,
section.hero[style*="background-image"] li,
section.hero[style*="background-image"] strong,
section.hero[style*="background-image"] em,
section.hero[style*="background-image"] span:not(.btn-primary):not(.badge) {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}


/* P0.4 — Eyebrow Founder CEO lisible sur bg sombre */
.founder-section .eyebrow,
.founder-home .eyebrow,
.founder-spotlight .eyebrow,
.about-founder .eyebrow {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  letter-spacing: 0.15em;
  font-weight: 600;
}
/* But keep eyebrow gold/forest when on white sections (.about-founder hero has white bg) */
section.hero:not([style*="background-image"]).founder-hero .eyebrow,
.about-founder:not(.is-dark) .eyebrow {
  color: var(--or) !important;
  text-shadow: none;
}


/* P0.5 about-founder responsive — 2-cols on desktop, stacked on mobile */
@media (max-width: 768px) {
  .about-founder .grid-2col { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .about-founder .founder-hero__photo { max-width: 100% !important; margin: 0 auto; }
}


/* P1.1 footer-cta per section backgrounds */
.cta-final { position: relative; isolation: isolate; overflow: hidden; color: #ffffff; }
.cta-final::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('/assets/images/footer-cta-home.webp');
  background-size: cover; background-position: center;
  z-index: -2;
}
.cta-final::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,42,77,0.55) 0%, rgba(10,42,77,0.75) 100%);
  z-index: -1;
}
.cta-final h2,
.cta-final .eyebrow {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cta-final p {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
body[data-section="expertises"] .cta-final::before { background-image: url('/assets/images/footer-cta-expertises.webp'); }
body[data-section="secteurs"] .cta-final::before { background-image: url('/assets/images/footer-cta-secteurs.webp'); }
body[data-section="insights"] .cta-final::before { background-image: url('/assets/images/footer-cta-insights.webp'); }
body[data-section="apropos"] .cta-final::before { background-image: url('/assets/images/footer-cta-apropos.webp'); }
body[data-section="programmes"] .cta-final::before { background-image: url('/assets/images/footer-cta-programmes.webp'); }
body[data-section="contact"] .cta-final::before { background-image: url('/assets/images/footer-cta-contact.webp'); }


/* P1.2 Ken Burns — homepage hero only (animate bg of section directly) */
@keyframes sm-kenburns {
  0% { background-size: 105%; background-position: 50% 50%; }
  100% { background-size: 118%; background-position: 48% 47%; }
}
body[data-section="home"] section.hero[style*="background-image"],
body[data-section="programmes"] section.hero[style*="background-image"],
body[data-section="contact"] section.hero[style*="background-image"] {
  background-size: 110%;
  background-position: center;
  animation: sm-kenburns 24s ease-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  body[data-section="home"] section.hero[style*="background-image"],
  body[data-section="programmes"] section.hero[style*="background-image"],
  body[data-section="contact"] section.hero[style*="background-image"] { animation: none; background-size: cover; }
}


/* P1 FIX compound-step — p/span/li héritaient color:var(--text)=navy → invisible sur fond navy.
   Cause : la règle globale p{color:var(--text)} l'emporte sur l'héritage de .compound-step{color:white}. */
.compound-step,
.compound-step *,
.compound-step p,
.compound-step span,
.compound-step strong,
.compound-step li {
  color: var(--white) !important;
}
.compound-step .compound-step-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--or) !important;
  margin-bottom: var(--s-2);
  letter-spacing: 0.05em;
}
.compound-step .compound-step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.compound-step .compound-step-content strong {
  font-size: 1.05rem;
  font-weight: 700;
}
.compound-step .compound-step-content span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7) !important;
}
.compound-step .compound-step-content p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 6px;
}


/* ============================================================
   ROUND 9 — interactivity layer
   ============================================================ */

/* R9.1 — Founder photo LQIP placeholder (kills the navy flash before
   the priority image paints). Pulse stops once img onload removes .is-loading. */
@keyframes sm-photo-pulse {
  0%, 100% { background-color: #f5f1ea; }
  50%      { background-color: #ece5d8; }
}
.founder-hero__photo.is-loading {
  animation: sm-photo-pulse 1.4s ease-in-out infinite;
}

/* R9.2 — Card lift + scale on hover (pure CSS, premium feel).
   Real card vocab here: .card (anchor wrapper), .exp-card, .article-card,
   .sector-card. Lift the outer .card when present; otherwise the card itself. */
.card, .exp-card, .article-card, .sector-card {
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .card:hover, .exp-card:hover, .article-card:hover, .sector-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 28px 50px -24px rgba(10, 42, 77, 0.45);
  }
  /* avoid double-lift when a card is nested inside an anchor .card */
  .card:hover .exp-card, .card:hover .article-card, .card:hover .sector-card {
    transform: none; box-shadow: none;
  }
}

/* R9.3 — Grid cascade: stagger the existing .reveal transition by position so
   grouped cards rise in sequence. Cooperative with the IntersectionObserver
   (animations-v221.js) — no GSAP fight, no flash. */
.grid > .reveal:nth-child(1) { transition-delay: 0s; }
.grid > .reveal:nth-child(2) { transition-delay: .08s; }
.grid > .reveal:nth-child(3) { transition-delay: .16s; }
.grid > .reveal:nth-child(4) { transition-delay: .24s; }
.grid > .reveal:nth-child(5) { transition-delay: .32s; }
.grid > .reveal:nth-child(6) { transition-delay: .40s; }

/* R9.4 — Headline word-by-word reveal mask (GSAP fills the motion) */
.word-wrap { display: inline-block; overflow: hidden; vertical-align: top; }
.word      { display: inline-block; }

/* R9 — strict reduced-motion: neutralise the new motion layers */
@media (prefers-reduced-motion: reduce) {
  .founder-hero__photo.is-loading { animation: none; }
  .card, .exp-card, .article-card, .sector-card { transition: none; }
  .card:hover, .exp-card:hover, .article-card:hover, .sector-card:hover { transform: none; }
  .grid > .reveal { transition-delay: 0s !important; }
}


/* ============================================================
   ROUND 10 — premium UX polish (A1/A2/A3/B4/B5)
   Brand vars: gold=--or, green=--forest, navy=--navy
   ============================================================ */

/* A1 — italic gold accent in headlines */
.accent-gold { font-style: italic; color: var(--or, #2d7a4a); }

/* A2 — primary-nav counter badges */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px;
  background: var(--or, #2d7a4a); color: var(--navy, #0a2a4d);
  font-size: 11px; font-weight: 700;
  font-family: "Source Sans Pro", system-ui, sans-serif;
  vertical-align: middle; line-height: 1;
  animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* A3 — pill CTA with SM monogram avatar */
.btn-pill-monogram {
  display: inline-flex; align-items: stretch;
  border-radius: 999px; overflow: hidden;
  background: var(--forest, #2d7a4a);
  box-shadow: 0 4px 12px rgba(45, 122, 74, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none; line-height: 1.1;
}
.btn-pill-monogram .pill-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy, #0a2a4d); color: var(--or, #2d7a4a);
  font-family: "Source Serif Pro", Georgia, serif;
  font-weight: 700; font-style: italic;
  padding: 12px 16px; min-width: 44px; letter-spacing: 0.02em;
}
.btn-pill-monogram .pill-label {
  display: inline-flex; align-items: center;
  padding: 12px 22px; color: #fff; font-weight: 600;
  font-family: "Source Sans Pro", system-ui, sans-serif;
}
.btn-pill-monogram:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45, 122, 74, 0.4); }
.btn-pill-monogram:hover .pill-avatar { background: #0a3a5d; }
/* compact variant for the sticky header */
.site-header .btn-pill-monogram .pill-avatar { padding: 8px 12px; min-width: 38px; font-size: 0.95rem; }
.site-header .btn-pill-monogram .pill-label  { padding: 8px 16px; font-size: 0.9rem; }

/* B4 — Compound rings stroke-draw on scroll */
.compound-rings { display: block; line-height: 0; }
.compound-rings svg { filter: drop-shadow(0 0 8px rgba(45, 122, 74, 0.4)); width: 100%; height: auto; }
.compound-rings .ring {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.compound-rings .ring-1 { stroke-dasharray: 503; stroke-dashoffset: 503; }
.compound-rings .ring-2 { stroke-dasharray: 346; stroke-dashoffset: 346; }
.compound-rings .ring-3 { stroke-dasharray: 189; stroke-dashoffset: 189; }
.compound-rings.is-drawn .ring-1 { stroke-dashoffset: 0; transition-delay: 0s;   }
.compound-rings.is-drawn .ring-2 { stroke-dashoffset: 0; transition-delay: 0.3s; }
.compound-rings.is-drawn .ring-3 { stroke-dashoffset: 0; transition-delay: 0.6s; }

/* B5 — big-number anchor */
.big-number-anchor { padding: clamp(3rem, 7vw, 6rem) 0; text-align: center; background: #f5f1ea; }
.bna-number {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: clamp(4rem, 12vw, 9rem); font-weight: 700;
  color: var(--navy, #0a2a4d); line-height: 1;
}
.bna-number::before { content: '+'; color: var(--or, #2d7a4a); margin-right: 0.06em; }
.bna-label {
  font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--text-secondary, #5a6573);
  margin-top: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.bna-sub { margin-top: 1.2rem; font-size: 1rem; color: var(--text-secondary, #5a6573); }

/* R10 — reduced-motion: neutralise new motion */
@media (prefers-reduced-motion: reduce) {
  .nav-badge { animation: none; }
  .btn-pill-monogram { transition: none; }
  .btn-pill-monogram:hover { transform: none; }
  .compound-rings .ring { transition: none; stroke-dashoffset: 0 !important; }
}


/* ============================================================
   ROUND 11 — Partie A : P0 mobile UX (corrections critiques)
   ============================================================ */

/* A1 — kill page-level horizontal scroll on mobile.
   `clip` (not `hidden`) prevents the scroll WITHOUT breaking the sticky header
   or future ScrollTrigger pins. No blanket `* { max-width }` (it would freeze
   the trust ticker / mega-menu); real culprits are constrained individually. */
html, body { overflow-x: clip; max-width: 100vw; }

/* A2 — hero bg de-zoom so the executive's face is visible.
   Inline styles hard-set `background-position:center`, so override with
   !important. On mobile we also kill the Ken Burns zoom (it worsened the crop)
   and recadre higher to reveal the face. */
section.hero[style*="background-image"] { background-position: center 30%; }
@media (max-width: 768px) {
  section.hero[style*="background-image"] {
    background-position: center 22% !important;
    background-size: cover !important;
    min-height: 68vh;
  }
  body[data-section] section.hero[style*="background-image"] { animation: none !important; }
}

/* A3 — founder photos: full face, capped height, stay landscape-friendly */
.founder-section img { max-height: 480px; object-fit: cover; }
.founder-hero__photo { max-height: 480px; }
@media (max-width: 880px) {
  .founder-section img { max-height: 420px; width: 100%; }
  .founder-hero__photo { max-height: 320px; aspect-ratio: 16 / 9; width: 100%; }
}

/* A6 — restyle the EXISTING .sticky-cta-mobile as a premium inset pill
   (no duplicate element; keeps the show-after-30%-scroll / hide-in-footer JS).
   Gold left accent evokes the SM monogram without restructuring 61 files. */
@media (max-width: 768px) {
  .sticky-cta-mobile {
    left: 14px; right: 14px; bottom: 14px;
    border-radius: 999px;
    padding: 14px 22px;
    border-left: 5px solid var(--or);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  }
  .sticky-cta-mobile.is-hidden,
  .sticky-cta-mobile:not(.is-visible) { transform: translateY(160%); }
}


/* ============================================================
   ROUND 11B — marquee (inline), horizontal scroll, overlay reduit
   ============================================================ */

/* B2 — horizontal scroll section (prototype: homepage "problèmes") */
.horizontal-scroll-section { position: relative; overflow: hidden; }
.horizontal-scroll-section .pin-track {
  display: flex; gap: 2rem; padding: 0 5vw; will-change: transform;
}
.horizontal-scroll-section .pin-track > .card { flex: 0 0 380px; }
@media (max-width: 768px) {
  /* mobile: SAME pin scroll-jacking as desktop (R11C-1.2 Patch F) */
  .horizontal-scroll-section .pin-track { padding-block: 1rem; }
  .horizontal-scroll-section .pin-track > .card { flex: 0 0 280px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no pin + no native overflow trap: fall back to a wrapping grid */
  .horizontal-scroll-section .pin-track { flex-wrap: wrap; overflow: visible; padding-inline: var(--s-6); }
  .horizontal-scroll-section .pin-track > .card { flex: 0 1 320px; }
}

/* B3 — reduce hero overlay (image ~75% visible) + stronger text-shadow.
   Overrides the Round 9 ::before gradient (later rule, same specificity). */
section.hero[style*="background-image"]::before,
.hero-with-bg::before,
.page-hero[data-bg]::before,
.page-hero.has-bg::before {
  background: linear-gradient(
    to bottom,
    rgba(11,37,69,0.08) 0%,
    rgba(11,37,69,0.16) 50%,
    rgba(11,37,69,0.40) 100%
  ) !important;
}
section.hero[style*="background-image"] h1,
section.hero[style*="background-image"] h2,
section.hero[style*="background-image"] .eyebrow,
section.hero[style*="background-image"] p,
section.hero[style*="background-image"] .lead,
section.hero[style*="background-image"] .fine-print,
section.hero[style*="background-image"] li,
section.hero[style*="background-image"] strong {
  text-shadow:
    0 2px 8px rgba(11,37,69,1),
    0 4px 16px rgba(11,37,69,0.95),
    0 0 24px rgba(0,0,0,0.7),
    0 0 2px rgba(0,0,0,1) !important;
}


/* ============================================================
   ROUND 11C-1 — dark band immersive + overlay étendu
   ============================================================ */

.dark-band-immersive { background: #060606; padding-block: clamp(4rem, 8vw, 7rem); color: #fff; position: relative; }
.dbi-bignumber { text-align: center; margin-bottom: 4rem; }
.dbi-bignumber .bna-number { color: #fff; font-family: "Source Serif Pro", Georgia, serif; font-size: clamp(4rem, 12vw, 9rem); font-weight: 700; line-height: 1; }
.dbi-bignumber .bna-number::before { content: '+'; color: var(--or, #2d7a4a); margin-right: 0.06em; }
.dbi-bignumber .bna-label { color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(1rem, 1.5vw, 1.25rem); margin-top: 0.5rem; }
.dbi-bignumber .bna-sub { color: rgba(255,255,255,0.85); margin-top: 1.2rem; }
.dbi-bignumber .accent-gold { color: var(--or, #2d7a4a); font-style: italic; }

.dbi-methodologies { margin-bottom: 4rem; }
.dbi-label { text-align: center; color: var(--or, #2d7a4a); font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 2.5rem; font-weight: 600; }

.logos-marquee { overflow: hidden; position: relative; isolation: isolate; }
.logos-marquee::before, .logos-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.logos-marquee::before { left: 0; background: linear-gradient(to right, #060606, transparent); }
.logos-marquee::after { right: 0; background: linear-gradient(to left, #060606, transparent); }
.logos-track { display: inline-flex; align-items: center; gap: 56px; white-space: nowrap; width: max-content; will-change: transform; animation: logosSlide 50s linear infinite; }
@keyframes logosSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item { display: inline-flex; align-items: center; gap: 14px; color: rgba(255,255,255,0.95); opacity: 1; transition: opacity 0.3s; }
.logo-item:hover { opacity: 1; }
.logo-item img { height: 32px; width: auto; max-width: 64px; object-fit: contain; filter: brightness(0) invert(1) brightness(1.1); opacity: 1; }
.logo-item .logo-name { font-family: "Source Sans Pro", system-ui, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; }
.logo-sep { color: rgba(255,255,255,0.3); align-self: center; }

.dbi-stats { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; max-width: 900px; margin-inline: auto; padding: 0 1rem; }
.stat-cinematic { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 0.5rem; width: 100%; opacity: 0; transform: translateY(30px); text-decoration: none; cursor: pointer; transition: transform 0.3s ease; }
.stat-cinematic .num { font-family: "Source Serif Pro", Georgia, serif; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: 1; color: #fff; }
.stat-cinematic.gold .num { color: var(--or, #2d7a4a) !important; text-shadow: 0 0 16px rgba(45, 122, 74,0.5), 0 0 32px rgba(45, 122, 74,0.3), 0 2px 8px rgba(0,0,0,0.4); }
.stat-cinematic .lbl { font-family: "Source Sans Pro", system-ui, sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); color: rgba(255,255,255,0.85); font-weight: 400; }
.stat-cinematic.is-visible { opacity: 0.85; transform: translateY(0); animation: statPopFade 1.1s ease-out; }
@keyframes statPopFade { 0% { opacity: 0; transform: translateY(30px) scale(0.95); } 55% { opacity: 1; transform: translateY(0) scale(1.03); } 100% { opacity: 0.85; transform: translateY(0) scale(1); } }
@media (max-width: 768px) {
  .stat-cinematic { flex-direction: column; gap: 0.25rem; }
  .logo-item img { height: 24px; max-width: 50px; }
  .logo-item .logo-name { font-size: 0.85rem; }
  .logos-marquee::before, .logos-marquee::after { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; transform: translateX(-15%); }
  .stat-cinematic { opacity: 1; transform: none; animation: none; }
}

/* C-1.C — overlay réduit + text-shadow étendu à toutes sections bg-image */
section.cta-final[style*="background-image"],
section.mid-bg[style*="background-image"],
section[class*="bg-image"][style*="background-image"] { position: relative; isolation: isolate; }
section.cta-final[style*="background-image"]::before,
section.mid-bg[style*="background-image"]::before,
section[class*="bg-image"][style*="background-image"]::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,37,69,0.15) 0%, rgba(11,37,69,0.25) 50%, rgba(11,37,69,0.45) 100%);
  pointer-events: none; z-index: 1;
}
section.cta-final[style*="background-image"] > *,
section.mid-bg[style*="background-image"] > *,
section[class*="bg-image"][style*="background-image"] > * { position: relative; z-index: 2; }
section.mid-bg[style*="background-image"] h1, section.mid-bg[style*="background-image"] h2,
section.mid-bg[style*="background-image"] h3, section.mid-bg[style*="background-image"] .eyebrow,
section.mid-bg[style*="background-image"] p, section.mid-bg[style*="background-image"] blockquote,
section.cta-final[style*="background-image"] h2, section.cta-final[style*="background-image"] p {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(11,37,69,1), 0 4px 16px rgba(11,37,69,0.95), 0 0 24px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,1);
}

/* R11C-1 patch — clickable stat-cinematic hover */
.stat-cinematic:hover { transform: translateY(-4px); }
.stat-cinematic:not(.gold):hover .num { color: var(--or, #2d7a4a); }
/* (removed) gold hover inverse — gold stays gold */
@media (prefers-reduced-motion: reduce) { .stat-cinematic:hover { transform: none; } }

/* R11C-1.2 Patch B — strict centered stats */
.stat-cinematic .num { display: block; text-align: center; }
.stat-cinematic .lbl { display: block; text-align: center; max-width: 600px; }


/* ============================================================
   ROUND 11C-1.3 — overlay-off heroes/CTA, bigger logos, smooth pin
   ============================================================ */

/* Patch A — heroes: remove the overlay entirely (image ~fully visible); text legible via extreme text-shadow */
section.hero[style*="background-image"]::before,
section.mid-bg[style*="background-image"]::before { background: transparent !important; }
/* footer CTA: heavily lighten the navy overlay (image almost fully visible, text still readable) */
.cta-final::after { background: linear-gradient(180deg, rgba(10,42,77,0.18) 0%, rgba(10,42,77,0.40) 100%) !important; }
section.hero[style*="background-image"] h1,
section.hero[style*="background-image"] h2,
section.hero[style*="background-image"] h3,
section.hero[style*="background-image"] .eyebrow,
section.hero[style*="background-image"] p,
section.hero[style*="background-image"] .lead,
section.hero[style*="background-image"] .fine-print,
.cta-final h1, .cta-final h2, .cta-final .eyebrow, .cta-final p {
  color: #ffffff !important;
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 2px 8px rgba(11,37,69,1),
    0 4px 16px rgba(0,0,0,0.9),
    0 0 32px rgba(0,0,0,0.7),
    0 0 1px rgba(0,0,0,1) !important;
  font-weight: 700;
}
@media (max-width: 768px) {
  section.hero[style*="background-image"] h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.15; }
  section.hero[style*="background-image"] { padding-block: clamp(2rem, 6vh, 4rem); }
}

/* Patch B — bigger logos (toward stat-number scale) */
.logos-track { gap: 80px; }
.logo-item { gap: 18px; }
.logo-item img { height: clamp(48px, 8vw, 80px); max-width: clamp(96px, 14vw, 160px); object-fit: contain; filter: brightness(0) invert(1) brightness(1.15); }
.logo-item .logo-name { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.logos-marquee::before, .logos-marquee::after { width: 160px; }
@media (max-width: 768px) {
  .logo-item img { height: 44px; max-width: 80px; }
  .logo-item .logo-name { font-size: 1rem; }
  .logos-track { gap: 56px; }
  .logos-marquee::before, .logos-marquee::after { width: 64px; }
}

/* Patch D — pin scroll: keep header visible, smoother (sticky header on mobile during pin) */
.horizontal-scroll-section .hss-header { padding-block: 2rem 1rem; position: relative; z-index: 2; }
.horizontal-scroll-section .pin-track { padding-top: 1rem; }
@media (max-width: 768px) {
  .horizontal-scroll-section { padding-top: 1rem; }
  .horizontal-scroll-section .hss-header {
    position: sticky; top: 0; background: #f8f7f5; padding: 1rem; z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
}


/* ============================================================
   ROUND 11C-2 — Part 1 iPhone patches + mid-bg + masonry
   ============================================================ */

/* P1.A — stop logos flickering/darkening during marquee (force compositing) */
.logos-track { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.logo-item { opacity: 1 !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.logo-item img {
  filter: brightness(0) invert(1) brightness(1.15) !important;
  -webkit-filter: brightness(0) invert(1) brightness(1.15) !important;
  opacity: 1 !important; backface-visibility: hidden; transform: translateZ(0);
}

/* P1.B — logos a touch bigger */
.logo-item img { height: clamp(56px, 10vw, 96px); max-width: clamp(112px, 18vw, 200px); }
.logo-item .logo-name { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
@media (max-width: 768px) {
  .logo-item img { height: 52px; max-width: 100px; }
  .logo-item .logo-name { font-size: 1.1rem; }
}

/* P1.C — pin cards compact on mobile (less blank space) */
@media (max-width: 768px) {
  .horizontal-scroll-section .card { padding: 1.25rem 1rem !important; }
  .horizontal-scroll-section .card h3 { font-size: 1.15rem !important; margin-bottom: 0.5rem !important; line-height: 1.25 !important; }
  .horizontal-scroll-section .card p { font-size: 0.9rem !important; line-height: 1.4 !important; margin: 0 !important; }
  .horizontal-scroll-section .card .card-photo,
  .horizontal-scroll-section .card .card-num { margin-bottom: 0.5rem !important; }
  .horizontal-scroll-section .pin-track > .card { flex: 0 0 260px; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Part 2 — mid-page bg sections */
.mid-bg {
  min-height: clamp(280px, 45vh, 520px); position: relative;
  display: flex; align-items: center; justify-content: center;
  background-attachment: fixed;
}
.mid-bg-label {
  color: #fff; font-family: "Source Serif Pro", Georgia, serif; font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem); text-align: center; max-width: 800px; padding: 0 1.5rem;
  text-shadow: 0 0 4px rgba(0,0,0,1), 0 2px 12px rgba(11,37,69,1), 0 4px 24px rgba(0,0,0,0.7);
  position: relative; z-index: 2;
}
@media (max-width: 768px) { .mid-bg { background-attachment: scroll; min-height: 320px; } }

/* Part 5 — compact masonry listings */
.listing-compact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; padding: 2rem clamp(1rem, 5vw, 4rem); max-width: 1400px; margin-inline: auto;
}
.listing-compact .card-compact {
  position: relative; display: block; height: 180px; overflow: hidden; border-radius: 12px;
  cursor: pointer; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.listing-compact .card-compact img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-compact .card-compact .card-title {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem; color: #fff;
  background: linear-gradient(to top, rgba(11,37,69,0.95), rgba(11,37,69,0.45) 70%, transparent);
  font-family: "Source Serif Pro", Georgia, serif; font-size: 1rem; font-weight: 600; line-height: 1.2;
}
.listing-compact .card-compact:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
@media (max-width: 768px) {
  .listing-compact { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 1rem; }
  .listing-compact .card-compact { height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .listing-compact .card-compact { opacity: 1 !important; } }


/* ============================================================
   ROUND 11C-2.1 — pin cards mobile compact (text not cut) + smoother
   ============================================================ */
@media (max-width: 768px) {
  .horizontal-scroll-section .pin-track > .card {
    flex: 0 0 260px;
    max-height: none !important;   /* override R11C-2 max-height:72vh scroll */
    overflow: visible !important;
    padding: 1rem 0.875rem !important;
  }
  .horizontal-scroll-section .card .card-photo,
  .horizontal-scroll-section .card .card-photo img,
  .horizontal-scroll-section .card img {
    height: 130px !important; max-height: 130px !important;
    object-fit: cover !important; margin-bottom: 0.5rem !important;
  }
  .horizontal-scroll-section .card .card-num,
  .horizontal-scroll-section .card .num,
  .horizontal-scroll-section .card [class*="step-num"] {
    font-size: 0.75rem !important; margin-bottom: 0.25rem !important; color: var(--or, #2d7a4a) !important;
  }
  .horizontal-scroll-section .card h3 {
    font-size: 1.05rem !important; line-height: 1.2 !important; margin: 0.25rem 0 0.5rem !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .horizontal-scroll-section .card p {
    font-size: 0.85rem !important; line-height: 1.4 !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
}


/* ============================================================
   ROUND 11C-2.2 — desktop pin cards fit viewport
   ============================================================ */
@media (min-width: 769px) {
  .horizontal-scroll-section .pin-track > .card {
    flex: 0 0 360px;
    padding: 1.5rem 1.25rem !important;
    max-height: none !important;
  }
  .horizontal-scroll-section .card .card-photo,
  .horizontal-scroll-section .card .card-photo img,
  .horizontal-scroll-section .card > img,
  .horizontal-scroll-section .card picture img {
    height: 180px !important; max-height: 180px !important;
    object-fit: cover !important; margin-bottom: 0.75rem !important;
  }
  .horizontal-scroll-section .card .card-num,
  .horizontal-scroll-section .card [class*="step-num"] {
    font-size: 0.875rem !important; color: var(--or, #2d7a4a) !important; margin-bottom: 0.25rem !important;
  }
  .horizontal-scroll-section .card h3 {
    font-size: 1.25rem !important; line-height: 1.25 !important; margin: 0.25rem 0 0.5rem !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .horizontal-scroll-section .card p {
    font-size: 0.95rem !important; line-height: 1.5 !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 5 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .horizontal-scroll-section { padding-top: 2rem !important; }
  .horizontal-scroll-section .hss-header,
  .horizontal-scroll-section > .container:first-child { padding-block: 1rem 1.5rem !important; }
  .horizontal-scroll-section .hss-header h2,
  .horizontal-scroll-section > .container:first-child h2 { font-size: clamp(1.25rem, 2.2vw, 1.85rem) !important; margin: 0.25rem 0 0.5rem !important; }
}


/* ============================================================
   ROUND 11C-2.3 — desktop H2 genuinely smaller + mobile card image clip
   ============================================================ */

/* PATCH 1 — desktop: shrink pin section header so cards fit the fold */
@media (min-width: 769px) {
  section.horizontal-scroll-section { padding-block: 1.5rem !important; }
  .horizontal-scroll-section > .container,
  .horizontal-scroll-section > .hss-header,
  .horizontal-scroll-section .hss-header {
    padding-block: 0.5rem 1rem !important;
    margin-block: 0 !important;
    margin-bottom: 0 !important;            /* kills inline margin-bottom:var(--s-12) */
  }
  .horizontal-scroll-section .eyebrow { font-size: 0.75rem !important; margin-bottom: 0.25rem !important; }
  section.horizontal-scroll-section .hss-header h2,
  section.horizontal-scroll-section > .container h2,
  section.horizontal-scroll-section h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.85rem) !important;
    line-height: 1.2 !important;
    margin: 0.25rem 0 0.5rem !important;
    max-width: 820px;
  }
  .horizontal-scroll-section > .container > p,
  .horizontal-scroll-section .hss-header > p { font-size: 1rem !important; margin: 0 !important; }
}

/* PATCH 2 — mobile: clip the bleeding card image to the rounded card */
@media (max-width: 768px) {
  .horizontal-scroll-section .pin-track > .card {
    overflow: hidden !important;
    border-radius: 12px !important;
    padding: 0 0 0.75rem 0 !important;       /* image flush to edges; text padded below */
  }
  .horizontal-scroll-section .card .card-photo {
    margin: 0 0 0.5rem 0 !important;
    border-radius: 0 !important;
    height: 130px !important;
  }
  .horizontal-scroll-section .card .card-photo img,
  .horizontal-scroll-section .card > img,
  .horizontal-scroll-section .card picture img {
    width: 100% !important; height: 100% !important; border-radius: 0 !important; display: block !important;
  }
  .horizontal-scroll-section .card .card-num,
  .horizontal-scroll-section .card h3,
  .horizontal-scroll-section .card p { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .horizontal-scroll-section .card .card-num { padding-top: 0.25rem !important; }
}

/* ============================================================
   ROUND 11C-3 — Part 5 compact masonry listings (Option B: CSS columns, true masonry)
   ============================================================ */
.listing-grid {
  display: block;
  column-count: 3;
  column-gap: 20px;
}
.listing-grid > .card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (max-width: 1024px) { .listing-grid { column-count: 2; } }
@media (max-width: 768px)  { .listing-grid { column-count: 1; } }


/* ============================================================
   ROUND 11C-3.1 — swipe carousel + dots on .cards-track (pin only on Problèmes)
   ============================================================ */
.horizontal-scroll-section:has(.cards-track) { min-height: 0; padding: 44px 0; }
/* cap carousel card height so sections stay natural/compact (< viewport) */
@media (min-width: 769px) {
  .cards-track > .card, .cards-track > .article-card { align-self: flex-start; max-height: 470px; }
  .cards-track img, .cards-track .article-cover,
  .cards-track [class*="photo"] { max-height: 150px !important; }
  .cards-track > .card p, .cards-track .article-body p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .horizontal-scroll-section:has(.cards-track) .text-center { margin-bottom: 1.5rem !important; }
  .horizontal-scroll-section:has(.cards-track) .lead { display: none; }
}
.no-pin-section { min-height: 0; }   /* Safari < 15.4 :has() fallback (class added in JS) */

.cards-track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 24px 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cards-track::-webkit-scrollbar { display: none; }
.cards-track > .card, .cards-track > .article-card {
  flex: 0 0 auto; scroll-snap-align: center; width: clamp(280px, 30vw, 360px);
}
@media (max-width: 768px) {
  .cards-track > .card, .cards-track > .article-card { width: 80vw; max-width: 320px; }
}
.cards-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.cards-dots button {
  background: #D1D5DB; border: none; border-radius: 999px; width: 6px; height: 6px;
  padding: 0; cursor: pointer; transition: width 220ms ease, background 220ms ease;
}
.cards-dots button[aria-current="true"] { background: #0B2545; width: 24px; }
.cards-dots button:focus-visible { outline: 2px solid #0B2545; outline-offset: 2px; }

/* ============================================================
   ROUND 11C-3 — Part 4 fixes: pin section min-height + programmes mobile collapse
   ============================================================ */
/* Pinned sections fill the viewport on desktop (so each is >= 100vh) */
@media (min-width: 769px) {
  .horizontal-scroll-section { min-height: 100vh; }
}
/* Pre-existing: homepage Programmes custom inline grid (1.4fr 1fr 1fr) didn't
   collapse on mobile → horizontal overflow. Force single column on small screens. */
@media (max-width: 768px) {
  .grid[style*="1.4fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ROUND 11C-3.4 — card image clip (all viewports) + kill pin on Problèmes
   ============================================================ */
.cards-track > .card, .cards-track > .article-card { overflow: hidden; border-radius: 12px; }
.cards-track > .card > img, .cards-track > .card > picture > img,
.cards-track > .article-card > img, .cards-track > .article-card > picture > img {
  display: block; width: 100%; border-radius: 0;
}