/* ============================================================ */
/* IMPORTS + TOKENS */
/* ============================================================ */
/* tokens.css already defines --color-* tokens.               */
/* We also define bouyon-chapter local tokens that match the   */
/* validated preview palette for dark-mode longform reading.   */

@import url('./tokens.css');

:root {
  /* Bouyon chapter palette — validated in preview files */
  --bg:     #050505;
  --bg-2:   #0a0a0e;
  --bg-3:   #14141a;
  --text:   #F2F2F2;
  --muted:  rgba(242, 242, 242, 0.55);
  --faint:  rgba(242, 242, 242, 0.32);
  --border: rgba(255, 255, 255, 0.10);
  --accent: #0887F8;
  --accent-rgb: 8, 135, 248;
  --coral:  #C8441A;
  --coral-rgb: 200, 68, 26;
  --green:  #4ADE80;
  --indigo: #4F6BFF;
  --violet: #7C3AED;
  --lavender: #A855F7;
  --magenta: #D946EF;
}

/* ============================================================ */
/* SKIP LINK (a11y) */
/* ============================================================ */
/* Hidden off-screen by default, visible on keyboard focus.    */
/* Lets screen-reader users jump directly to article content.  */
.bouyon-chapter__skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.bouyon-chapter__skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg);
  z-index: 1000;
  text-decoration: none;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ============================================================ */
/* TOPBAR + PROGRESS + MINIMAP — sticky stack                   */
/* ============================================================ */
/* Stack height = 60px topbar + 2px progress + 48px minimap    */
/* = 110px total. Body padding-top must equal 110px.           */

/* --- Topbar (60px) --- */
.bouyon-chapter__topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 100;
}

.bouyon-chapter__topbar-logo {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--accent);
  flex-shrink: 0;
  text-decoration: none;
}

.bouyon-chapter__topbar-title {
  flex: 1;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Progress bar (2px, directly under topbar) --- */
.bouyon-chapter__progress {
  position: fixed;
  top: 59px;
  left: 0;
  height: 2px;
  background: var(--accent);
  width: 0%;
  z-index: 99;
  transition: background 0.2s, width 0.05s linear;
  will-change: width;
}

/* --- Minimap (48px, under progress bar) --- */
.bouyon-chapter__minimap {
  position: fixed;
  top: 61px;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  z-index: 98;
  display: flex;
  align-items: center;
}

.bouyon-chapter__minimap-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.bouyon-chapter__minimap-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
}

.bouyon-chapter__minimap-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

/* --- Minimap dots (Q18 touch target 44×44px) --- */
/* The dot itself is 10px but the button wrapping it is 44×44px. */
.bouyon-chapter__minimap-dot {
  /* Touch target: 44×44px minimum (Q18 a11y) */
  min-width: 44px;
  min-height: 44px;
  padding: 17px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  /* Remove default button appearance */
  -webkit-appearance: none;
  appearance: none;
}

/* Inner visible dot rendered via ::before pseudo-element */
.bouyon-chapter__minimap-dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  margin: auto;
  transition: all 0.3s;
}

.bouyon-chapter__minimap-dot:hover::before {
  border-color: var(--accent);
  transform: scale(1.2);
}

.bouyon-chapter__minimap-dot.read::before {
  background: var(--accent);
  border-color: var(--accent);
}

.bouyon-chapter__minimap-dot.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 135, 248, 0.25);
  transform: scale(1.4);
}

/* Polemic indicator above dot */
.bouyon-chapter__minimap-dot.polemic::after {
  content: "🚨";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  pointer-events: none;
}

/* Connector lines between dots */
.bouyon-chapter__minimap-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  transition: background 0.3s;
}

.bouyon-chapter__minimap-line.read {
  background: var(--accent);
}

/* Current section label (right side of minimap) */
.bouyon-chapter__minimap-current {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 110px;
  text-align: right;
  font-weight: 500;
}

/* ============================================================ */
/* LAYOUT 3 COLS (≥1280px)                                      */
/* ============================================================ */
/* TOC sticky 200px left | article 700px center | sidebar 240px right */
/* Total: 200 + 700 + 240 + (2×32 gap) = 1204px max content    */

.bouyon-chapter {
  padding-top: 132px; /* 60 + 2 + 48 + 22 breathing room */
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* Optional 3-column grid layout (TOC + article + sidebar).
   Activates only when the chapter explicitly includes a TOC node.
   Today the chap I HTML ships header/figure/article/endcard in a
   single column flow — see structure in bouyon/le-terreau/index.html. */
.bouyon-chapter:has(> .bouyon-chapter__toc) {
  max-width: 1240px;
  display: grid;
  grid-template-columns: 200px 700px 240px;
  gap: 32px;
  align-items: start;
}

/* --- TOC (left sticky column) --- */
.bouyon-chapter__toc {
  position: sticky;
  top: 132px;
  max-height: calc(100vh - 132px - 32px);
  overflow-y: auto;
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.bouyon-chapter__toc::-webkit-scrollbar { width: 4px; }
.bouyon-chapter__toc::-webkit-scrollbar-track { background: transparent; }
.bouyon-chapter__toc::-webkit-scrollbar-thumb { background: var(--border); }

.bouyon-chapter__toc-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.bouyon-chapter__toc-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.bouyon-chapter__toc-item:hover .bouyon-chapter__toc-label {
  color: var(--text);
}

.bouyon-chapter__toc-roman {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}

.bouyon-chapter__toc-label {
  font-family: 'Source Serif 4', serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  transition: color 0.2s;
}

.bouyon-chapter__toc-item.active .bouyon-chapter__toc-label {
  color: var(--text);
  font-weight: 400;
}

/* --- Article (center column) --- */
.bouyon-chapter__article {
  min-width: 0; /* Prevents grid blowout */
}

/* --- Sidebar (right column) --- */
.bouyon-chapter__sidebar {
  position: sticky;
  top: 132px;
  max-height: calc(100vh - 132px - 32px);
  overflow-y: auto;
}

/* ============================================================ */
/* HERO                                                         */
/* ============================================================ */
/* eyebrow + disclaimer italic + H1 bicolore + subtitle + filet */

.bouyon-chapter__hero {
  margin-bottom: 64px;
}

.bouyon-chapter__eyebrow {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 18px;
  opacity: 0.92;
}

/* Override the global pill-style .eyebrow when used inside the
   chapter end card (À retenir, L'auteur, Sources, Pour aller plus
   loin, Glossaire, Commentaires…). The pill chrome conflicts with
   the editorial vocabulary of every other surface in the article. */
.bouyon-chapter .eyebrow {
  display: block;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--coral);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.92;
  margin: 0 0 14px;
}

/* Italic disclaimer (e.g. "Voix documentée, non militante") */
.bouyon-chapter__disclaimer {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: 560px;
  opacity: 0.7;
}

/* H1 bicolore — "Le Terreau" — main word normal, accent word in color */
.bouyon-chapter__h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--text);
}

.bouyon-chapter__h1 em {
  color: var(--accent);
  font-style: italic;
}

.bouyon-chapter__subtitle {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--text);
  max-width: 560px;
  margin-bottom: 40px;
}

/* Accent filet under hero */
.bouyon-chapter__filet {
  width: 80px;
  height: 2px;
  background: var(--accent);
  margin: 32px 0 48px;
}

/* ============================================================ */
/* ARTICLE BODY                                                  */
/* ============================================================ */
/* sections fade-in, lead drop cap, paragraphs, pull quotes,   */
/* data blocks, section markers, H2/H3 headings                */

/* Base paragraph */
.bouyon-chapter__article p {
  margin-bottom: 20px;
  color: rgba(242, 242, 242, 0.85);
  font-family: 'Source Serif 4', serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.78;
  /* Fade-in animation (overridden by reduced-motion) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__article p.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__article p strong { color: var(--text); font-weight: 600; }
.bouyon-chapter__article p em     { color: var(--text); font-style: italic; }

/* Lead paragraph with drop cap */
.bouyon-chapter__lead {
  font-size: 21px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 32px;
}

.bouyon-chapter__lead::first-letter {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 88px;
  float: left;
  line-height: 0.85;
  margin-right: 12px;
  margin-top: 8px;
  color: var(--accent);
}

/* Section marker (e.g. "[I] La cadence-lypso") */
.bouyon-chapter__section-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-top: 80px;
  margin-bottom: -56px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bouyon-chapter__section-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* H2 section headings */
.bouyon-chapter__article h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 80px 0 24px;
  scroll-margin-top: 120px;
  color: var(--text);
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__article h2.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__article h2 em { color: var(--accent); font-style: italic; }

/* H3 sub-headings */
.bouyon-chapter__article h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  color: var(--text);
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__article h3.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__article h3 em { color: var(--coral); font-style: italic; }

/* Horizontal rule — fine coral line, centered, generous breathing room */
.bouyon-chapter__article .bouyon-chapter__hr {
  border: none;
  height: 1px;
  width: 80px;
  margin: 56px auto;
  background: var(--coral);
  opacity: 0.4;
}

/* Internal H1 (rare — inside the body, e.g. article title before first H2) */
.bouyon-chapter__article .bouyon-chapter__h1-internal {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 32px 0 24px;
}

/* H3 sub-headings inside endcard sections (Sources, Pour aller plus loin, etc.).
   Smaller than h2, italicized, accent-colored to mark the sub-grouping. */
.bouyon-chapter__article .bouyon-chapter__h3 {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--accent);
  margin: 32px 0 12px;
}

/* Markdown-rendered links in chapter body — inherit accent on hover. */
.bouyon-chapter__article a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.32);
  transition: border-color 0.15s, color 0.15s;
}

.bouyon-chapter__article a:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.bouyon-chapter__article a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Pull quote / blockquote — magazine éditorial.
   Avant : double bordure horizontale + chevrons ASCII corail bold 900
   en fin de paragraphe + cite mono uppercase 10px. Trop console.
   Après : grand guillemet ouvrant décoratif (Playfair, 0.18 opacity) en
   pseudo-element absolu, texte italique Source Serif 4 (même famille
   que le body), cite italique serif corail subtle. Pas de close-quote,
   pas de bordures.
*/
.bouyon-chapter__article blockquote {
  position: relative;
  border: none;
  padding: 28px 0 8px 64px;
  margin: 64px 0;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--text);
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__article blockquote.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__article blockquote::before {
  content: "“";
  position: absolute;
  top: -28px;
  left: 0;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: var(--coral);
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

.bouyon-chapter__article blockquote::after {
  content: none;
}

.bouyon-chapter__article cite {
  display: block;
  margin-top: 18px;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--coral);
  opacity: 0.85;
}

/* Data / statistic block — sober editorial figure
   Drop the bg fill, keep the accent left rule for hierarchy. Numbers
   stay big and italic (Playfair) but pair with a serif italic label
   instead of mono uppercase tracking 9px.
*/
.bouyon-chapter__data {
  background: transparent;
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 32px;
  margin: 40px 0;
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__data.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__data-item {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 14px;
}

.bouyon-chapter__data-item:last-child { margin-bottom: 0; }

.bouyon-chapter__data-item .value,
.bouyon-chapter__data-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.bouyon-chapter__data-item .label,
.bouyon-chapter__data-label {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--text);
  opacity: 0.9;
}

/* Article end marker */
.bouyon-chapter__article-end-marker {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================================================ */
/* POLEMIC BLOCK — Medium reveal animation (Q4)                 */
/* ============================================================ */
/* Slide-in from left + coral glow + emoji pop élastique.      */
/* IntersectionObserver adds .in-view when 30% visible.        */

.bouyon-chapter__polemic {
  border-left: 2px solid rgba(200, 68, 26, 0.4);
  padding: 8px 0 8px 36px;
  margin: 56px 0;
  background: transparent;
  position: relative;
  will-change: transform, opacity, border-left-color;
  /* Initial hidden state */
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.6s cubic-bezier(.2, .7, .3, 1),
    transform 0.6s cubic-bezier(.2, .7, .3, 1),
    border-left-color 0.5s ease;
}

.bouyon-chapter__polemic.in-view {
  opacity: 1;
  transform: translateX(0);
  border-left-color: var(--coral);
}

/* Emoji pop animation triggered on in-view */
.bouyon-chapter__polemic.in-view .bouyon-chapter__polemic-emoji {
  animation: pop-emoji 0.6s cubic-bezier(.5, 1.6, .4, 1) 0.3s both;
}

@keyframes pop-emoji {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.bouyon-chapter__article .bouyon-chapter__polemic-tag {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--coral);
  margin: 0 0 14px;
  opacity: 0.92;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bouyon-chapter__polemic-emoji {
  font-size: 18px;
  display: inline-block;
  font-style: normal;
}

.bouyon-chapter__polemic p:not(.bouyon-chapter__polemic-tag) {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 12px;
  opacity: 1 !important; /* Polemic children do not fade separately */
  transform: none !important;
  transition: none !important;
}

.bouyon-chapter__polemic p strong {
  color: var(--coral);
  font-weight: 500;
  font-style: normal;
}

.bouyon-chapter__polemic cite {
  display: block;
  margin-top: 18px;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--coral);
  opacity: 0.85;
}

/* ============================================================ */
/* ONBOARDING BANNER (Q10)                                      */
/* ============================================================ */
/* First-visit banner explaining the chapter format.           */
/* Dismissed via JS, state stored in localStorage.             */

/* CRITICAL: respect HTML `hidden` attribute. Without this, the JS that
   sets `onboardingEl.hidden = true` to dismiss has zero visual effect
   because `display: flex` below would override the default `[hidden]`
   `display: none` from the user agent stylesheet. */
.bouyon-chapter__onboarding[hidden] {
  display: none !important;
}

.bouyon-chapter__onboarding {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(10, 10, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 18px 22px;
  max-width: min(640px, calc(100vw - 48px));
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s, transform 0.4s;
}

.bouyon-chapter__onboarding.dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  pointer-events: none;
}

.bouyon-chapter__onboarding-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bouyon-chapter__onboarding-body {
  flex: 1;
}

.bouyon-chapter__onboarding-title {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-transform: none;
  margin-bottom: 4px;
  opacity: 0.92;
}

.bouyon-chapter__onboarding-text {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9 !important;
  transform: none !important;
  transition: none !important;
}

/* Close button (a11y: min 44×44px touch target) */
.bouyon-chapter__onboarding-close {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--muted);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bouyon-chapter__onboarding-close:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================ */
/* END-OF-ARTICLE — 7 BLOCS (mosaïque asymétrique)             */
/* ============================================================ */
/* Grid 12 columns. Each bloc occupies an asymmetric span.     */
/* I Cliffhanger fullbleed / II Retenir 1/5 + III Auteur 6/12  */
/* IV Sources fullbleed / V Related / VI Comments / VII CTA    */

.bouyon-chapter__end {
  margin-top: 96px;
  border-top: 1px solid var(--border);
  padding-top: 0;
}

/* Shared grid container for blocs using 12-column asymmetry */
.bouyon-chapter__blocs-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* Individual bloc cells */
.bouyon-chapter__bloc {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px;
  position: relative;
  transition: background 0.3s;
}

.bouyon-chapter__bloc:hover { background: var(--bg-2); }

/* ---- BLOC I — Cliffhanger next chapter (fullbleed 12 cols) ---- */
.bouyon-chapter__bloc--cliffhanger {
  grid-column: 1 / -1;
  padding: 64px 48px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.bouyon-chapter__bloc--cliffhanger:hover { background: var(--bg-3); }

.bouyon-chapter__cliffhanger-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
}

.bouyon-chapter__cliffhanger-excerpt {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 640px;
  margin-bottom: 24px;
}

.bouyon-chapter__cliffhanger-excerpt em { color: var(--coral); font-style: italic; }

.bouyon-chapter__cliffhanger-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(8, 135, 248, 0.4);
  padding-bottom: 4px;
  transition: border-color 0.2s, color 0.2s;
  min-height: 44px; /* touch target */
}

.bouyon-chapter__cliffhanger-cta:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ---- BLOC II — À retenir (1/5 of mosaic → 4 cols) ---- */
.bouyon-chapter__bloc--retenir {
  grid-column: 1 / span 4;
}

/* ---- BLOC III — Auteur (6/12 → 8 cols) ---- */
.bouyon-chapter__bloc--auteur {
  grid-column: 5 / span 8;
}

/* ---- BLOC IV — Sources (fullbleed 12 cols) ---- */
.bouyon-chapter__bloc--sources {
  grid-column: 1 / -1;
  background: var(--bg-2);
}

.bouyon-chapter__bloc--sources:hover { background: var(--bg-3); }

/* ---- BLOC V — Related chapters (fullbleed or 7 cols) ---- */
.bouyon-chapter__bloc--related {
  grid-column: 1 / span 7;
}

/* ---- BLOC VI — Comments (5 cols) ---- */
.bouyon-chapter__bloc--comments {
  grid-column: 8 / span 5;
}

/* ---- BLOC VII — CTA Final (fullbleed) ---- */
.bouyon-chapter__bloc--cta-final {
  grid-column: 1 / -1;
  background: var(--accent);
  border-right: 1px solid var(--accent);
  padding: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.bouyon-chapter__bloc--cta-final:hover { background: var(--accent); filter: brightness(1.1); }

/* Shared bloc header */
.bouyon-chapter__bloc-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--coral);
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0.85;
}

.bouyon-chapter__bloc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--coral);
  margin-bottom: 16px;
}

.bouyon-chapter__bloc-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 80%;
  color: var(--text);
}

.bouyon-chapter__bloc-title em { color: var(--coral); font-style: italic; }

.bouyon-chapter__bloc-desc {
  font-family: 'Source Serif 4', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ---- Retenir — roman numeral + phrase ---- */
.bouyon-chapter__retenir-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed var(--border);
  align-items: baseline;
}

.bouyon-chapter__retenir-item:first-child { border-top: none; }

.bouyon-chapter__retenir-roman {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 48px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--coral);
}

.bouyon-chapter__retenir-text {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

/* ---- Auteur — bio prose style NYer ---- */
.bouyon-chapter__auteur-bio {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(242, 242, 242, 0.85);
  margin-bottom: 24px;
}

.bouyon-chapter__auteur-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bouyon-chapter__auteur-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 10px 16px; /* touch target */
  border: 1px solid rgba(8, 135, 248, 0.3);
  transition: border-color 0.2s, color 0.2s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bouyon-chapter__auteur-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ---- Sources inline (Bloc IV — Style A always visible) ---- */
.bouyon-chapter__sources-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.bouyon-chapter__sources-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(200, 68, 26, 0.4), transparent);
}

.bouyon-chapter__sources-count {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.bouyon-chapter__sources-list {
  list-style: none;
  border-left: 2px solid var(--coral);
  padding-left: 24px;
}

.bouyon-chapter__source-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed var(--border);
  align-items: baseline;
}

.bouyon-chapter__source-item:first-child { border-top: none; }

.bouyon-chapter__source-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--coral);
  font-weight: 500;
}

.bouyon-chapter__source-tag--scraped { color: var(--accent); }

.bouyon-chapter__source-text {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.bouyon-chapter__source-role {
  font-style: italic;
  color: var(--muted);
}

.bouyon-chapter__source-meta {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--faint);
  margin-top: 4px;
}

.bouyon-chapter__source-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Related chapters (Bloc V) ---- */
.bouyon-chapter__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.bouyon-chapter__related-card {
  text-decoration: none;
  display: block;
  padding: 16px;
  border: 1px solid var(--border);
  transition: border-color 0.2s, background 0.2s;
  min-height: 44px; /* touch target */
}

.bouyon-chapter__related-card:hover {
  border-color: var(--accent);
  background: var(--bg-3);
}

.bouyon-chapter__related-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.bouyon-chapter__related-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}

/* ---- CTA Final (Bloc VII) ---- */
.bouyon-chapter__cta-final-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bg);
  max-width: 560px;
}

.bouyon-chapter__cta-final-sub {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  color: rgba(5, 5, 5, 0.75);
  max-width: 480px;
}

.bouyon-chapter__cta-final-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.bouyon-chapter__cta-final-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bg);
  text-decoration: none;
  padding: 12px 24px;
  border: 2px solid var(--bg);
  transition: background 0.2s, color 0.2s;
  min-height: 44px; /* touch target */
  display: flex;
  align-items: center;
}

.bouyon-chapter__cta-final-link:hover {
  background: var(--bg);
  color: var(--accent);
}

/* ============================================================ */
/* COMMENTS FORM (Q24 — honeypot caché)                        */
/* ============================================================ */

.bouyon-chapter__comments-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--text);
}

.bouyon-chapter__comments-form {
  display: grid;
  gap: 16px;
}

/* Honeypot field: invisible to humans, traps bots */
.bouyon-chapter__comments-form input[name="website"] {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
}

.bouyon-chapter__form-field {
  display: grid;
  gap: 6px;
}

.bouyon-chapter__form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.bouyon-chapter__form-input,
.bouyon-chapter__form-textarea {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px; /* touch target */
}

.bouyon-chapter__form-input:focus,
.bouyon-chapter__form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.bouyon-chapter__form-textarea {
  min-height: 120px;
  resize: vertical;
}

.bouyon-chapter__form-submit {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s, transform 0.15s;
  min-height: 44px; /* touch target */
  min-width: 44px;
  -webkit-appearance: none;
  appearance: none;
  align-self: start;
}

.bouyon-chapter__form-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.bouyon-chapter__form-submit:hover { filter: brightness(1.1); }
.bouyon-chapter__form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.bouyon-chapter__form-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--faint);
  line-height: 1.5;
}

/* Comment list */
.bouyon-chapter__comment {
  padding: 16px 0;
  border-top: 1px dashed var(--border);
}

.bouyon-chapter__comment-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  gap: 16px;
}

.bouyon-chapter__comment-author { color: var(--accent); }

.bouyon-chapter__comment-body {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(242, 242, 242, 0.85);
}

/* ============================================================ */
/* RESPONSIVE                                                   */
/* ============================================================ */

/* 2 columns (768–1279px): TOC left + article; sidebar collapses */
@media (max-width: 1279px) {
  .bouyon-chapter {
    grid-template-columns: 200px 1fr;
    padding-top: 132px;
  }

  .bouyon-chapter__sidebar {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }

  /* Related blocs stack to 2 columns */
  .bouyon-chapter__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet (768–1023px): TOC hidden, single column article */
@media (max-width: 1023px) {
  .bouyon-chapter {
    grid-template-columns: 1fr;
  }

  .bouyon-chapter__toc {
    display: none; /* Hidden on tablet — accessible via minimap */
  }

  /* Cliffhanger bloc stacks vertically */
  .bouyon-chapter__bloc--cliffhanger {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }

  /* Mosaïque blocs collapse to single column */
  .bouyon-chapter__bloc--retenir,
  .bouyon-chapter__bloc--auteur,
  .bouyon-chapter__bloc--sources,
  .bouyon-chapter__bloc--related,
  .bouyon-chapter__bloc--comments,
  .bouyon-chapter__bloc--cta-final {
    grid-column: 1 / -1;
  }
}

/* Mobile (≤767px): single column, minimap sticky at top */
@media (max-width: 767px) {
  .bouyon-chapter {
    grid-template-columns: 1fr;
    padding-top: 132px;
    padding-inline: 16px;
  }

  .bouyon-chapter__toc {
    display: none;
  }

  /* H1 scales down for mobile */
  .bouyon-chapter__h1 {
    font-size: clamp(40px, 12vw, 72px);
  }

  .bouyon-chapter__subtitle {
    font-size: 18px;
  }

  /* Lead drop cap: smaller on mobile */
  .bouyon-chapter__lead::first-letter {
    font-size: 64px;
  }

  /* Article text: 17px on mobile */
  .bouyon-chapter__article p,
  .bouyon-chapter__lead {
    font-size: 17px;
  }

  /* Blockquote: single column */
  .bouyon-chapter__article blockquote {
    font-size: clamp(22px, 5vw, 28px);
  }

  /* Minimap: compact on mobile */
  .bouyon-chapter__minimap-inner {
    max-width: 100%;
    padding: 0;
  }

  .bouyon-chapter__minimap-current {
    display: none; /* Too narrow — label hidden on mobile */
  }

  /* End-of-article blocs: all fullbleed */
  .bouyon-chapter__blocs-mosaic {
    grid-template-columns: 1fr;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .bouyon-chapter__bloc,
  .bouyon-chapter__bloc--cliffhanger,
  .bouyon-chapter__bloc--retenir,
  .bouyon-chapter__bloc--auteur,
  .bouyon-chapter__bloc--sources,
  .bouyon-chapter__bloc--related,
  .bouyon-chapter__bloc--comments,
  .bouyon-chapter__bloc--cta-final {
    grid-column: 1 / -1;
    border-left: none;
    border-right: none;
  }

  .bouyon-chapter__related-grid {
    grid-template-columns: 1fr;
  }

  /* Onboarding banner: full width on mobile */
  .bouyon-chapter__onboarding {
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    bottom: 16px;
  }

  .bouyon-chapter__onboarding.dismissed {
    transform: translateY(24px);
  }

  /* CTA final: stack links */
  .bouyon-chapter__cta-final-links {
    flex-direction: column;
    align-items: center;
  }

  /* Topbar: tighter mobile layout — logo shrinks, chapter title hides
     under 480px so the mode toggle stays on screen. */
  .bouyon-chapter__topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .bouyon-chapter__topbar-logo {
    font-size: 14px;
  }

  .bouyon-chapter__topbar-title {
    font-size: 12px;
  }

  .bouyon-chapter__mode-toggle button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ≤480px: drop the chapter title from the topbar, hide the mode-toggle
   text label so the icon-only buttons fit even on iPhone SE (375px). */
@media (max-width: 480px) {
  .bouyon-chapter__topbar-title {
    display: none;
  }

  .bouyon-chapter__mode-toggle {
    margin-left: auto;
  }

  .bouyon-chapter__mode-toggle button {
    padding: 6px 8px;
    gap: 0;
  }

  .bouyon-chapter__mode-label {
    display: none;
  }

  .bouyon-chapter__mode-icon {
    font-size: 16px;
  }

  /* Onboarding close: drop the "Fermer" label, keep just the × glyph */
  .bouyon-chapter__onboarding-close-label {
    display: none;
  }

  .bouyon-chapter__onboarding {
    gap: 12px;
  }
}

/* ============================================================ */
/* PREFERS-REDUCED-MOTION                                       */
/* ============================================================ */
/* Disables ALL animations and transitions for users who prefer */
/* reduced motion (accessibility / vestibular disorders).      */

@media (prefers-reduced-motion: reduce) {
  /* Polemic block: show immediately, no slide */
  .bouyon-chapter__polemic,
  .bouyon-chapter__polemic.in-view {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: background 0.3s ease, border-left-color 0.3s ease !important;
    box-shadow: none !important;
  }

  /* Polemic emoji: no pop animation */
  .bouyon-chapter__polemic-emoji,
  .bouyon-chapter__polemic.in-view .bouyon-chapter__polemic-emoji {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Article content: visible immediately, no fade-in */
  .bouyon-chapter__article p,
  .bouyon-chapter__article h2,
  .bouyon-chapter__article h3,
  .bouyon-chapter__article blockquote,
  .bouyon-chapter__data,
  .bouyon-chapter__article p.is-visible,
  .bouyon-chapter__article h2.is-visible,
  .bouyon-chapter__article h3.is-visible,
  .bouyon-chapter__article blockquote.is-visible,
  .bouyon-chapter__data.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Progress bar: instant updates */
  .bouyon-chapter__progress {
    transition: none !important;
  }

  /* Minimap dots: instant updates */
  .bouyon-chapter__minimap-dot::before {
    transition: none !important;
  }

  /* Onboarding: no slide animation */
  .bouyon-chapter__onboarding,
  .bouyon-chapter__onboarding.dismissed {
    transition: none !important;
  }
}

/* ============================================================ */
/* FIGURES (hero + inline images) — Q8 Style A photoréaliste     */
/* ============================================================ */
.bouyon-chapter__figure {
  margin: 0 0 32px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bouyon-chapter__figure picture,
.bouyon-chapter__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.bouyon-chapter__figure img {
  background: var(--bg-3);
}
.bouyon-chapter__figure-caption {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  position: relative;
}
.bouyon-chapter__figure-caption::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--coral);
  margin-right: 12px;
  vertical-align: middle;
}

/* Hero image — full bleed under hero header */
.bouyon-chapter__figure--hero {
  margin: 0 calc(50% - 50vw) 48px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  aspect-ratio: 16 / 9;
}
.bouyon-chapter__figure--hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Inline images — keep within article column */
.bouyon-chapter__figure--inline {
  margin: 40px 0;
  aspect-ratio: 3 / 2;
}
.bouyon-chapter__figure--inline img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 767px) {
  .bouyon-chapter__figure--hero { margin: 0 -24px 32px; }
}

/* Quote image fullbleed (Q7 — moment apothéose, avant endcard) */
.bouyon-chapter__figure--quote {
  margin: 80px calc(50% - 50vw) 64px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  aspect-ratio: 16 / 9;
}
.bouyon-chapter__figure--quote img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bouyon-chapter__figure--quote .bouyon-chapter__figure-caption {
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  padding: 16px 24px 20px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.bouyon-chapter__figure--quote .bouyon-chapter__figure-caption::before {
  display: block;
  margin: 0 auto 8px;
}
@media (max-width: 767px) {
  .bouyon-chapter__figure--quote { margin: 56px -24px 48px; }
}

/* ============================================================ */
/* ENGAGEMENT BOOST — Phase 4                                   */
/* TL;DR · Stat callout · Cliffhanger · Time banner            */
/* Reading mode toggle · CTA print magazine (library/streaming/ */
/* social)                                                      */
/* ============================================================ */

/* --- TL;DR aside (top of article) --- */
/* TLDR (« Ce chapitre en 30 secondes ») — accent éditorial sobre.
   Avant : box-card avec gradient bleu, double bordure (top/bottom + left
   3px accent), eyebrow mono uppercase 10px tracking 0.32em, paragraphes
   Playfair italic 22px, em accent bold 700. Trop lourd, encadré à la
   façon d'un widget admin.
   Après : pas de fond ni de bordure box. Une fine règle accent à
   gauche, un eyebrow serif italique discret accent (pas mono uppercase),
   paragraphes Source Serif 4 italique 22px (cohérence body), em accent
   medium-weight, sans soulignement.
*/
.bouyon-chapter__tldr {
  background: transparent;
  border: none;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 32px;
  margin: 40px 0 56px;
  position: relative;
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__tldr.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__tldr .bouyon-chapter__tldr-eyebrow {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: 0.92;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bouyon-chapter__tldr p:not(.bouyon-chapter__tldr-eyebrow) {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--text);
  margin-bottom: 14px;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.bouyon-chapter__tldr p:last-child { margin-bottom: 0; }

.bouyon-chapter__tldr p em {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
}

/* --- Stat callout — sober editorial figure inline
   Drop the bg-2 fill, keep the accent left rule. Big italic Playfair
   number + serif italic label, no monospace anywhere.
*/
.bouyon-chapter__stat-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 8px 0 8px 32px;
  margin: 56px 0;
  background: transparent;
  border-left: 2px solid var(--accent);
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__stat-callout.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__stat-callout-num,
.bouyon-chapter__stat-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.bouyon-chapter__stat-callout-label,
.bouyon-chapter__stat-label {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--text);
}

.bouyon-chapter__stat-callout-label strong,
.bouyon-chapter__stat-label strong {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}

/* --- Cliffhanger (inline body)
   Pull-quote éditorial : pas de cadre brutal. Une fine règle coral à
   gauche signale la respiration narrative ; le tag en italique serif
   guide le lecteur ; le texte en Source Serif 4 italique suit la
   typographie de l'article. Plus de luxe, moins de console.
*/
.bouyon-chapter__cliffhanger {
  margin: 72px 0 72px;
  padding: 8px 0 8px 36px;
  border-left: 2px solid var(--coral);
  background: transparent;
  position: relative;
  /* Fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bouyon-chapter__cliffhanger.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bouyon-chapter__article .bouyon-chapter__cliffhanger-tag {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--coral);
  margin: 0 0 14px;
  opacity: 0.92;
}

.bouyon-chapter__cliffhanger p:not(.bouyon-chapter__cliffhanger-tag) {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  letter-spacing: 0.005em;
}

/* em dans cliffhanger = surbrillance corail subtile, sans soulignement */
.bouyon-chapter__cliffhanger p em {
  color: var(--coral);
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
}

/* --- Time-remaining banner (fixed bottom-left) ---
   Sober pill, serif italic, soft fill. No mono, no uppercase tracking.
*/
.bouyon-chapter__time-remaining {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--muted);
  z-index: 95;
  transition: opacity 0.3s;
}

.bouyon-chapter__time-remaining[hidden] {
  display: none;
}

.bouyon-chapter__time-remaining strong {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}

/* --- Reading mode toggle dans le topbar --- */
/* Groupe de 2 boutons ⚡ RAPIDE / COMPLETE.                   */
/* .is-active = accent bg, dark text.                           */
.bouyon-chapter__mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-shrink: 0;
}

.bouyon-chapter__mode-toggle button {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  min-height: 32px; /* touch-friendly */
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bouyon-chapter__mode-icon {
  font-style: normal;
  display: inline-block;
}

.bouyon-chapter__mode-toggle button:hover {
  color: var(--text);
}

.bouyon-chapter__mode-toggle button.is-active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
}

/* --- Reading mode: masque les paragraphes deep en mode rapide */
body[data-mode="rapide"] .deep-only {
  display: none;
}

/* --- CTA Library — superseded by refonte 2026-05-08 (line 2500+).
   Old asymmetric "two-column" composition removed.
   See `.bouyon-chapter__cta--library` redefinition below for the
   active blue press-kit panel. --- */

.bouyon-chapter__cta-word {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(110px, 18vw, 200px);
  line-height: 0.88;
  color: var(--accent);
  letter-spacing: -0.05em;
}

.bouyon-chapter__cta-word em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}

.bouyon-chapter__cta-content {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.bouyon-chapter__cta-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.bouyon-chapter__cta-meta strong { color: var(--accent); }

.bouyon-chapter__cta-lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  margin-bottom: 24px;
}

.bouyon-chapter__cta-lead em { color: var(--accent); }

.bouyon-chapter__cta-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.bouyon-chapter__cta-stats > div {
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.bouyon-chapter__cta-stats > div:first-child {
  border-left: none;
  padding-left: 0;
}

.bouyon-chapter__cta-stat-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
}

.bouyon-chapter__cta-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.bouyon-chapter__cta-action {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 4px;
  transition: color 0.2s;
  display: inline-block;
}

.bouyon-chapter__cta-action:hover { color: var(--accent); }

/* --- CTA Streaming (~60% scroll) — 5 plateformes liste --- */
/* Grid 0.9fr 1.6fr, aside sticky, items avec hover translate. */
.bouyon-chapter__cta--streaming {
  margin: 80px 0;
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 40px;
}

@media (max-width: 767px) {
  .bouyon-chapter__cta--streaming { grid-template-columns: 1fr; }
}

.bouyon-chapter__cta-streaming-aside {
  padding: 32px 0;
  border-right: 1px solid var(--border);
  padding-right: 32px;
  align-self: start;
  position: sticky;
  top: 84px;
}

@media (max-width: 767px) {
  .bouyon-chapter__cta-streaming-aside {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 24px;
    padding-right: 0;
    position: static;
  }
}

.bouyon-chapter__cta-eyebrow {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--violet);
  opacity: 0.92;
  margin-bottom: 16px;
}

.bouyon-chapter__cta-headline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.bouyon-chapter__cta-headline em { color: var(--violet); font-style: italic; }

.bouyon-chapter__cta-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--violet);
  padding-left: 12px;
}

.bouyon-chapter__cta-streaming-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.bouyon-chapter__cta-streaming-item {
  display: grid;
  grid-template-columns: 48px 32px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: padding-left 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.bouyon-chapter__cta-streaming-item:hover {
  padding-left: 16px;
}

.bouyon-chapter__cta-streaming-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--platform-color, var(--accent));
  transform: translateY(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bouyon-chapter__cta-streaming-item:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 100%;
}

.bouyon-chapter__cta-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.bouyon-chapter__cta-num {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.7;
}

.bouyon-chapter__cta-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}

.bouyon-chapter__cta-platform-meta {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

.bouyon-chapter__cta-platform-action {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--platform-color, var(--accent));
  font-weight: 500;
}

/* Platform color tokens (set via data-p attribute in HTML) */
.bouyon-chapter__cta-streaming-item[data-p="spotify"] { --platform-color: var(--spotify, #1DB954); }
.bouyon-chapter__cta-streaming-item[data-p="apple"]   { --platform-color: var(--apple-music, #FA243C); }
.bouyon-chapter__cta-streaming-item[data-p="deezer"]  { --platform-color: var(--deezer, #A238FF); }
.bouyon-chapter__cta-streaming-item[data-p="ytmusic"] { --platform-color: var(--ytmusic, #FF0000); }
.bouyon-chapter__cta-streaming-item[data-p="tidal"]   { --platform-color: var(--tidal, #00CFE3); }
.bouyon-chapter__cta-streaming-item:hover .bouyon-chapter__cta-name { color: var(--platform-color, var(--accent)); }

/* --- CTA Social (~85% scroll) — grid 12-col asymétrique --- */
/* Insta 5×2 / TikTok 7×1 / YouTube 4×1 / X 3×1.            */
/* Noms en gradient Instagram natif, TikTok cyan→pink, etc.   */
.bouyon-chapter__cta--social {
  margin: 80px 0;
  padding: 48px 0;
  border-top: 2px solid var(--magenta);
}

.bouyon-chapter__cta-social-header {
  margin-bottom: 32px;
}

/* Override eyebrow pour le CTA social : gradient Instagram */
.bouyon-chapter__cta--social .bouyon-chapter__cta-eyebrow {
  background: linear-gradient(90deg, #FCAF45, #E1306C, #5851DB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}

/* Override headline pour le CTA social : gradient Instagram sur em */
.bouyon-chapter__cta--social .bouyon-chapter__cta-headline {
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.bouyon-chapter__cta--social .bouyon-chapter__cta-headline em {
  font-style: italic;
  background: linear-gradient(90deg, #FCAF45 0%, #E1306C 50%, #5851DB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bouyon-chapter__cta-social-sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  max-width: 560px;
  color: var(--muted);
}

.bouyon-chapter__cta-social-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.bouyon-chapter__cta-social-item {
  padding: 24px 24px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s;
  position: relative;
  cursor: pointer;
  display: block;
  min-width: 0;
  overflow: hidden;
}

.bouyon-chapter__cta-social-item:hover { background: var(--bg-2); }

/* Grid asymétrique 12 colonnes — design 4 plateformes (insta + tiktok + youtube + x) */
.bouyon-chapter__cta-social-item.insta   { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.bouyon-chapter__cta-social-item.tiktok  { grid-column: 6 / span 7; grid-row: 1 / span 1; }
.bouyon-chapter__cta-social-item.youtube { grid-column: 6 / span 4; grid-row: 2 / span 1; }
.bouyon-chapter__cta-social-item.x       { grid-column: 10 / span 3; grid-row: 2 / span 1; }

/* Layout 3 plateformes (sans .x) — redistribue pour éviter cellules trop étroites */
.bouyon-chapter__cta-social-grid:not(:has(.x)) .bouyon-chapter__cta-social-item.insta {
  grid-column: 1 / span 7;
  grid-row: 1 / span 1;
}
.bouyon-chapter__cta-social-grid:not(:has(.x)) .bouyon-chapter__cta-social-item.tiktok {
  grid-column: 8 / span 5;
  grid-row: 1 / span 1;
}
.bouyon-chapter__cta-social-grid:not(:has(.x)) .bouyon-chapter__cta-social-item.youtube {
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

@media (max-width: 767px) {
  .bouyon-chapter__cta-social-item { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

.bouyon-chapter__cta-social-num {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 12px;
}

.bouyon-chapter__cta-social-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

/* Couleurs des noms par réseau */
.bouyon-chapter__cta-social-item.insta .bouyon-chapter__cta-social-name {
  background: linear-gradient(135deg, #FCAF45, #E1306C, #5851DB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bouyon-chapter__cta-social-item.tiktok .bouyon-chapter__cta-social-name {
  background: linear-gradient(135deg, #25F4EE, #FE2C55);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bouyon-chapter__cta-social-item.youtube .bouyon-chapter__cta-social-name { color: #FF0000; }
.bouyon-chapter__cta-social-item.x       .bouyon-chapter__cta-social-name { color: var(--text); }

.bouyon-chapter__cta-social-stat {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  margin-bottom: 4px;
}

.bouyon-chapter__cta-social-meta {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.bouyon-chapter__cta-social-action {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
}

/* ============================================================ */
/* PREFERS-REDUCED-MOTION — engagement elements                 */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bouyon-chapter__tldr,
  .bouyon-chapter__tldr.is-visible,
  .bouyon-chapter__stat-callout,
  .bouyon-chapter__stat-callout.is-visible,
  .bouyon-chapter__cliffhanger,
  .bouyon-chapter__cliffhanger.is-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .bouyon-chapter__time-remaining {
    transition: none !important;
  }
}

/* ============================================================ */
/* CTA #1 LIBRARY — PRESS-KIT PANNEAU PROMINENT (refonte 2026-05-08) */
/* ============================================================ */
.bouyon-chapter__cta--library {
  display: block;
  text-decoration: none;
  color: #fff;
  background: var(--blue-site, #0887F8);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 48px);
  margin: 80px 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), box-shadow 0.4s ease;
  border: none;
}
.bouyon-chapter__cta--library::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.bouyon-chapter__cta--library:hover { transform: scale(1.005); box-shadow: 0 24px 80px rgba(8, 135, 248, 0.35); }
.bouyon-chapter__cta--library:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.bouyon-chapter__cta-library-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 12px;
  margin-bottom: clamp(24px, 4vw, 40px);
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.bouyon-chapter__cta-library-eyebrow,
.bouyon-chapter__cta-library-credentials {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.85);
  margin: 0;
  opacity: 0.92;
}
.bouyon-chapter__cta-library-credentials {
  color: rgba(255,255,255,0.6);
  opacity: 0.85;
}

.bouyon-chapter__cta-library-massif {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(80px, 14vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
  position: relative;
  z-index: 2;
  transition: -webkit-text-stroke 0.4s ease, color 0.4s ease;
}
.bouyon-chapter__cta-library-massif span {
  font-style: italic;
  color: #fff;
  -webkit-text-stroke: 0;
}
.bouyon-chapter__cta--library:hover .bouyon-chapter__cta-library-massif {
  color: #fff;
  -webkit-text-stroke: 0;
}

.bouyon-chapter__cta-library-lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.3;
  color: #fff;
  max-width: 640px;
  margin: 0 0 clamp(28px, 4vw, 40px);
  position: relative;
  z-index: 2;
}
.bouyon-chapter__cta-library-lead em {
  font-style: italic;
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.bouyon-chapter__cta-library-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 16px 0;
  margin-bottom: clamp(28px, 4vw, 40px);
  position: relative;
  z-index: 2;
}
.bouyon-chapter__cta-library-stats > div {
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.bouyon-chapter__cta-library-stats > div:first-child { border-left: none; padding-left: 0; }
.bouyon-chapter__cta-library-stats .num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  color: #fff;
  display: block;
  line-height: 1;
}
.bouyon-chapter__cta-library-stats .label {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
  display: block;
}

.bouyon-chapter__cta-library-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.bouyon-chapter__cta-library-button {
  display: inline-block;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.005em;
  font-weight: 600;
  text-transform: none;
  background: #fff;
  color: var(--blue-site, #0887F8);
  padding: clamp(18px, 2.4vw, 26px) clamp(36px, 5vw, 56px);
  border-radius: 12px;
  transition: background 0.3s ease, color 0.3s ease, padding-right 0.3s cubic-bezier(.2,.7,.3,1), transform 0.18s ease;
  position: relative;
}
.bouyon-chapter__cta--library:hover .bouyon-chapter__cta-library-button {
  background: #050505;
  color: #fff;
  padding-right: clamp(56px, 8vw, 88px);
}
.bouyon-chapter__cta-library-sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 767px) {
  .bouyon-chapter__cta--library { margin: 56px -24px 56px; }
  .bouyon-chapter__cta-library-action { justify-content: stretch; }
  .bouyon-chapter__cta-library-button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bouyon-chapter__cta--library,
  .bouyon-chapter__cta--library:hover,
  .bouyon-chapter__cta-library-massif,
  .bouyon-chapter__cta-library-button { transition: none !important; transform: none !important; }
}