@import url("https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Permanent+Marker&family=JetBrains+Mono:wght@400;700;800&display=swap");

/* ═══════════════════════════════════════════════════════════════════
   BOUYON CHAPTER — DISPOSITION ZINE PUNK + PALETTE P1
   Chargé APRÈS bouyon-chapter.css → override esthétique + typographique.
   PALETTE P1 (choix Terry 2026-05-23) :
   - bg #101010 (fond uni noir, AUCUN pattern, AUCUN dégradé)
   - accent #0887F8 (bleu canonique TIITII)
   - text #F2F2F2 (off-white)
   FONTS ZINE PUNK :
   - Anton (titres, h1, h2, h3, marquees, stamps)
   - Special Elite (body, paragraphes, captions)
   - Permanent Marker (tags rotated, stickers, doodles)
   - JetBrains Mono (eyebrows, labels mono, codes)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Palette P1 — Charte TIITII NBA, fond uni sombre */
  --zine-bg:       #101010;
  --zine-bg-2:     #1a1a1a;
  --zine-bg-3:     #242424;
  --zine-ink:      #F2F2F2;
  --zine-paper:    #f4f1eb;
  --zine-cyan:     #0887F8;
  --zine-coral:    #0887F8;  /* coral remplacé par bleu — palette P1 mono-accent */
  --zine-coral-2:  #2A9DFF;  /* variante bleu plus clair pour hover */
  --zine-line:     rgba(255, 255, 255, 0.14);
  --zine-line-2:   rgba(255, 255, 255, 0.32);
  /* Override de la sous-charte coral (#C8441A, #ff6b6b) du CSS principal
     → tous les --coral utilisés par bouyon-chapter.css passent au bleu P1 */
  --coral:         #0887F8;
  --coral-rgb:     8, 135, 248;
}

/* ─── Body : fond UNI #101010 sans pattern, sans dégradé ─── */
body {
  background: var(--zine-bg) !important;
  color: var(--zine-ink) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-size: 16px;
}

/* Override --coral écrasé par bouyon-glossary.css (chargé après) — palette P1 mono-accent bleu */
body[data-chapter],
body[data-chapter] .bouyon-chapter,
body[data-chapter] .bouyon-chapter__article {
  --coral: #0887F8 !important;
  --coral-rgb: 8, 135, 248 !important;
  --accent: #0887F8 !important;
}
/* Force toutes les sous-classes qui utilisent encore #FF6B6B / coral hardcoded */
.bouyon-chapter__cliffhanger-tag,
.bouyon-chapter__cliffhanger em,
.bouyon-chapter__article cite {
  color: var(--zine-bg) !important;       /* sur fond bleu plein du cliffhanger → texte sombre */
}
.bouyon-chapter__article hr,
.bouyon-chapter__hr {
  background: var(--zine-cyan) !important;
  border-color: var(--zine-cyan) !important;
}

/* ─── Topbar : fond noir + boutons dashed cyan rotated ─── */
.bouyon-chapter__topbar {
  background: var(--zine-bg) !important;
  color: var(--zine-ink) !important;
  border-bottom: 4px solid var(--zine-cyan) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bouyon-chapter__topbar.is-scrolled {
  background: var(--zine-bg) !important;
  border-bottom: 3px solid var(--zine-cyan) !important;
}

.bouyon-chapter__topbar-back {
  color: var(--zine-ink) !important;
  border: 2px dashed var(--zine-ink) !important;
  font-family: 'Anton', sans-serif !important;
  letter-spacing: .08em !important;
  transform: rotate(-1deg);
  transition: transform .15s, background .15s !important;
}
.bouyon-chapter__topbar-back:hover,
.bouyon-chapter__topbar-back:focus-visible {
  background: var(--zine-coral) !important;
  border-color: var(--zine-coral) !important;
  color: var(--zine-ink) !important;
  transform: rotate(0) scale(1.05);
}
.bouyon-chapter__topbar-back--hub {
  transform: rotate(1deg);
}

.bouyon-chapter__topbar-back-arrow {
  font-family: 'Anton', sans-serif !important;
}

.bouyon-chapter__topbar-title {
  font-family: 'Anton', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--zine-ink) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

.bouyon-chapter__lang-switch {
  border: 2px solid var(--zine-ink) !important;
  background: transparent !important;
}
.bouyon-chapter__lang-switch-current {
  background: var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
}
.bouyon-chapter__lang-switch-alt {
  color: var(--zine-ink) !important;
}
.bouyon-chapter__lang-switch-alt:hover {
  background: var(--zine-coral) !important;
  color: var(--zine-ink) !important;
}

.bouyon-chapter__mode-toggle {
  border: 2px solid var(--zine-ink) !important;
  background: transparent !important;
}
.bouyon-chapter__mode-toggle button {
  color: var(--zine-ink) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-weight: 700 !important;
}
.bouyon-chapter__mode-toggle button[aria-pressed="true"] {
  background: var(--zine-cyan) !important;
  color: var(--zine-bg) !important;
}

/* ─── Progress bar ─── */
.bouyon-chapter__progress {
  background: var(--zine-coral) !important;
  height: 4px !important;
}

/* ─── Minimap : subtile mais efficace (ligne fine + dots discrets) ─── */
.bouyon-chapter__minimap {
  background: var(--zine-bg) !important;
  border-bottom: 1px solid rgba(8, 135, 248, 0.35) !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 36px !important;
  height: auto !important;
}
.bouyon-chapter__minimap.is-scrolled {
  background: var(--zine-bg) !important;
  border-bottom: 1px solid rgba(8, 135, 248, 0.35) !important;
}
.bouyon-chapter__minimap-label {
  color: var(--zine-cyan) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
.bouyon-chapter__minimap-track {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 !important;
  height: 20px !important;
  background: transparent !important;
}
/* Touch target reste 44x44px (a11y) mais TRANSPARENT — le visible vient du ::before */
.bouyon-chapter__minimap-dot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px 6px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  width: auto !important;
  height: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
/* Le dot visible : petit carré bleu tourné 45deg (losange) */
.bouyon-chapter__minimap-dot::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  background: rgba(242, 242, 242, 0.32) !important;
  border: none !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
  transition: background .2s, transform .2s !important;
  box-shadow: none !important;
}
.bouyon-chapter__minimap-dot:hover::before {
  background: var(--zine-cyan) !important;
  transform: rotate(45deg) scale(1.5) !important;
}
.bouyon-chapter__minimap-dot.is-active::before,
.bouyon-chapter__minimap-dot.active::before {
  background: var(--zine-cyan) !important;
  border: none !important;
  width: 10px !important;
  height: 10px !important;
  box-shadow: 0 0 0 2px rgba(8, 135, 248, 0.25) !important;
}
.bouyon-chapter__minimap-dot.is-polemic::before,
.bouyon-chapter__minimap-dot.polemic::before {
  background: rgba(8, 135, 248, 0.55) !important;
}
.bouyon-chapter__minimap-dot.read::before {
  background: var(--zine-cyan) !important;
}
/* Cacher le 🚨 polemic emoji */
.bouyon-chapter__minimap-dot.polemic::after {
  display: none !important;
}
.bouyon-chapter__minimap-line {
  background: rgba(242, 242, 242, 0.14) !important;
  height: 1px !important;
  flex: 1 !important;
  min-width: 8px !important;
  border: none !important;
}
.bouyon-chapter__minimap-current {
  color: var(--zine-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  opacity: .7 !important;
  flex-shrink: 0 !important;
}

/* ─── Hero ─── */
.bouyon-chapter__hero {
  background: var(--zine-bg) !important;
  border-bottom: 4px solid var(--zine-cyan) !important;
  padding: 40px 24px 64px;
}

.bouyon-chapter__eyebrow {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: var(--zine-coral) !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  border-bottom: 2px solid var(--zine-coral);
  padding-bottom: 4px;
  display: inline-block;
  text-transform: uppercase;
}

.bouyon-chapter__title {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--zine-ink) !important;
  text-transform: uppercase;
  line-height: 0.9 !important;
  letter-spacing: -.005em !important;
}
.bouyon-chapter__title em {
  font-style: normal !important;
  color: var(--zine-cyan) !important;        /* bleu canonique TIITII */
  text-shadow: none !important;              /* virer shadow — le rotate + shadow donnait un overlap flou illisible */
  display: inline-block;
  transform: none !important;
}

.bouyon-chapter__subtitle {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-style: normal !important;
  color: var(--zine-ink) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  background: rgba(26, 26, 26, 0.6);
  border-left: 3px solid var(--zine-cyan);
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding: 18px 22px;
  position: relative;
  box-shadow: none;
  transform: none;
  margin-top: 28px;
}
.bouyon-chapter__subtitle::before {
  display: none;
}

/* ─── Meta hero ─── */
.bouyon-chapter__meta,
.bouyon-chapter__byline {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: var(--zine-ink) !important;
}

/* ─── Position 0 / Hook ─── */
.bouyon-chapter__position0 {
  background: var(--zine-cyan) !important;
  color: var(--zine-bg) !important;
  border: 3px solid var(--zine-cyan) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-weight: 700 !important;
  box-shadow: 10px 10px 0 var(--zine-coral);
  transform: rotate(0.3deg);
}

/* ─── Body de l'article ─── */
.bouyon-chapter__body,
.bouyon-chapter {
  background: var(--zine-bg) !important;
  color: var(--zine-ink) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
}

.bouyon-chapter__p {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: var(--zine-ink) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.bouyon-chapter__h2 {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-ink) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .005em !important;
  line-height: 0.95 !important;
  margin-bottom: 28px !important;
}
/* H2 em : color bleu accent, pas de background plein */
.bouyon-chapter__h2 em {
  font-style: normal !important;
  color: var(--zine-cyan) !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline !important;
  transform: none !important;
}

.bouyon-chapter__h3 {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-cyan) !important;
  text-transform: uppercase;
}

/* ─── Liens body ─── */
.bouyon-chapter__p a,
.bouyon-chapter a {
  color: var(--zine-coral) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--zine-coral) !important;
}
.bouyon-chapter__p a:hover,
.bouyon-chapter a:hover {
  background: var(--zine-cyan);
  color: var(--zine-bg) !important;
  border-color: var(--zine-cyan) !important;
}

/* ─── Strong highlights — fond bleu dégradé + texte blanc ─── */
.bouyon-chapter__article p strong,
.bouyon-chapter__article p em strong,
.bouyon-chapter__article p em > strong,
.bouyon-chapter__p strong,
.bouyon-chapter strong {
  background: linear-gradient(135deg, #0887F8 0%, #0568C7 100%) !important;
  color: #FFFFFF !important;
  padding: 1px 8px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 0 !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Em italique : couleur cream */
.bouyon-chapter__article p em,
.bouyon-chapter__p em,
.bouyon-chapter em {
  color: var(--zine-ink) !important;
  font-style: italic !important;
  background: transparent !important;
}
.bouyon-chapter__article p em strong {
  font-style: italic !important;
}

/* ─── Pullquote ─── (discret : pas de border/shadow/rotation) */
.bouyon-chapter__article .bouyon-chapter__pullquote,
.bouyon-chapter__article blockquote,
.bouyon-chapter__pullquote,
.bouyon-pullquote {
  background: rgba(26, 26, 26, 0.6) !important;
  border: none !important;
  border-left: 3px solid var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 28px 28px 22px !important;
  position: relative !important;
  margin: 36px 0 !important;
}
.bouyon-chapter__article .bouyon-chapter__pullquote p,
.bouyon-chapter__article blockquote p,
.bouyon-chapter__pullquote p {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--zine-ink) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  margin: 0 0 12px !important;
}
.bouyon-chapter__article .bouyon-chapter__pullquote cite,
.bouyon-chapter__article blockquote cite,
.bouyon-chapter__pullquote cite {
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--zine-cyan) !important;
  margin-top: 10px !important;
  opacity: 1 !important;
}
.bouyon-chapter__article .bouyon-chapter__pullquote::before,
.bouyon-chapter__article blockquote::before,
.bouyon-chapter__pullquote::before,
.bouyon-pullquote::before {
  display: none !important;
}
.bouyon-chapter__article blockquote::after {
  content: none !important;
}

/* ─── Data bloc ─── */
.bouyon-chapter__data,
.bouyon-data {
  background: var(--zine-bg-3) !important;
  color: var(--zine-ink) !important;
  border: 3px dashed var(--zine-cyan) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
}
.bouyon-chapter__data b,
.bouyon-data b {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-coral) !important;
}

/* ─── Stat ─── */
.bouyon-chapter__stat {
  background: var(--zine-coral) !important;
  color: var(--zine-ink) !important;
  border: 3px solid var(--zine-cyan) !important;
  box-shadow: 6px 6px 0 var(--zine-cyan);
  transform: rotate(-1deg);
}
.bouyon-chapter__stat__num {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-ink) !important;
}
.bouyon-chapter__stat__label {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: var(--zine-ink) !important;
  font-weight: 700 !important;
}

/* ─── Cliffhanger mid-section : DISCRET — fond sombre + border-left fin ─── */
.bouyon-chapter__cliffhanger,
.bouyon-cliffhanger {
  background: rgba(26, 26, 26, 0.6) !important;
  color: var(--zine-ink) !important;
  border: none !important;
  border-left: 3px solid var(--zine-cyan) !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 22px 24px !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  margin: 32px 0 !important;
}
.bouyon-chapter__cliffhanger-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--zine-cyan) !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.bouyon-chapter__cliffhanger p {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-style: normal !important;
  color: var(--zine-ink) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.bouyon-chapter__cliffhanger em {
  color: var(--zine-ink) !important;
  font-style: italic !important;
  background: transparent !important;
  border-bottom: 1px solid var(--zine-cyan) !important;
}
.bouyon-chapter__cliffhanger a,
.bouyon-cliffhanger a {
  color: var(--zine-cyan) !important;
  border: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--zine-cyan) !important;
}

/* ─── CTAs ─── */
.bouyon-chapter__cta {
  background: var(--zine-bg-3) !important;
  border: 3px solid var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
  font-family: 'Anton', sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--zine-coral);
  transform: rotate(-0.5deg);
  transition: all .2s;
}
.bouyon-chapter__cta:hover {
  background: var(--zine-coral) !important;
  border-color: var(--zine-coral) !important;
  box-shadow: 8px 8px 0 var(--zine-cyan);
  transform: rotate(0) scale(1.02);
}

.bouyon-chapter__cta-card {
  background: var(--zine-bg-3) !important;
  border: 3px solid var(--zine-cyan) !important;
  box-shadow: 10px 10px 0 var(--zine-coral);
  transform: rotate(-0.3deg);
}
.bouyon-chapter__cta-card:hover {
  box-shadow: 10px 10px 0 var(--zine-cyan);
  transform: rotate(0) scale(1.02);
}

/* ─── FAQ ─── */
.bouyon-chapter__faq {
  background: var(--zine-bg) !important;
  border-top: 4px dashed var(--zine-cyan);
}
.bouyon-chapter__faq h2,
.bouyon-chapter__faq h3 {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-ink) !important;
  text-transform: uppercase;
}
.bouyon-chapter__faq details {
  border-bottom: 2px dashed var(--zine-line) !important;
}
.bouyon-chapter__faq summary {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-ink) !important;
  text-transform: uppercase;
}

/* ─── Sources ─── */
.bouyon-chapter__sources {
  background: var(--zine-bg-2) !important;
  color: var(--zine-ink) !important;
  border-top: 4px solid var(--zine-cyan);
}
.bouyon-chapter__sources a {
  color: var(--zine-cyan) !important;
}
.bouyon-chapter__sources li {
  border-bottom: 1px dashed var(--zine-line) !important;
}

/* ─── Inline images — pas de border bleu, juste l'image propre ─── */
.bouyon-chapter__figure,
.bouyon-chapter figure {
  border: none !important;
}
.bouyon-chapter__figure img,
.bouyon-chapter figure img {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.bouyon-chapter__figure img:hover,
.bouyon-chapter figure img:hover {
  transform: none !important;
}
.bouyon-chapter__figure figcaption,
.bouyon-chapter figcaption {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-style: italic !important;
  color: var(--zine-ink) !important;
  background: transparent !important;
  padding: 12px 0 0 !important;
  border: none !important;
  border-left: none !important;
  display: block !important;
  transform: none !important;
  margin-top: 0 !important;
  font-weight: 400 !important;
  opacity: .75;
}

/* ─── Search trigger (header) ─── */
.bouyon-search-trigger {
  background: var(--zine-coral) !important;
  color: var(--zine-ink) !important;
  border: 2px solid var(--zine-ink) !important;
  font-family: 'Anton', sans-serif !important;
  transform: rotate(-1deg);
}
.bouyon-search-trigger:hover {
  background: var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
  border-color: var(--zine-cyan) !important;
  transform: rotate(0);
}

/* ─── Listes (ul, ol) ─── */
.bouyon-chapter ul li,
.bouyon-chapter ol li {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: var(--zine-ink) !important;
}
.bouyon-chapter ul li::marker {
  color: var(--zine-coral);
}

/* ─── Glossary terms inline ─── */
.term-glossary {
  background: var(--zine-cyan) !important;
  color: var(--zine-bg) !important;
  border-bottom: 2px dashed var(--zine-bg) !important;
  padding: 0 4px !important;
  font-weight: 700;
}
.term-glossary:hover {
  background: var(--zine-coral) !important;
  color: var(--zine-ink) !important;
}

/* ─── Deep-only mode (lecture complète) ─── */
.bouyon-chapter__p.deep-only {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  color: rgba(242, 242, 242, 0.86) !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .bouyon-chapter__title em {
    transform: rotate(-1deg);
    text-shadow: 4px 4px 0 var(--zine-cyan);
  }
  .bouyon-chapter__subtitle {
    box-shadow: 5px 5px 0 var(--zine-coral);
    transform: rotate(0);
  }
  .bouyon-chapter__pullquote,
  .bouyon-pullquote {
    box-shadow: 6px 6px 0 var(--zine-cyan);
    transform: rotate(0);
  }
  .bouyon-chapter__cliffhanger,
  .bouyon-cliffhanger {
    box-shadow: 6px 6px 0 var(--zine-cyan);
    transform: rotate(0);
  }
}

/* ─── FORCE VISIBILITÉ : opacity 0 du fade-in JS désactivée ─── */
/* L'animation IntersectionObserver des paragraphes ne se déclenche pas
   toujours en preview/prod → on force opacity 1 pour que TOUT soit lisible
   dès le chargement, sans dépendre du scroll JS. */
.bouyon-chapter__article *,
.bouyon-chapter__body *,
.bouyon-chapter__p,
.bouyon-chapter__h2,
.bouyon-chapter__h3,
.bouyon-chapter__pullquote,
.bouyon-pullquote,
.bouyon-chapter__data,
.bouyon-chapter__figure,
.bouyon-chapter__quote-fullbleed,
.bouyon-chapter__section,
.bouyon-chapter__tldr,
.bouyon-chapter__faq,
.bouyon-chapter__cliffhanger,
.bouyon-chapter__sources,
.bouyon-chapter__related,
.bouyon-chapter__cta {
  opacity: 1 !important;
  transform: none;
  filter: none;
}
/* Sauf les rotations zine punk explicites qu'on veut garder (PAS le titre em — Terry signalé illisible) */
.bouyon-chapter__title em {
  transform: none !important;
}
.bouyon-chapter__subtitle {
  transform: rotate(-0.4deg) !important;
}
.bouyon-chapter__pullquote,
.bouyon-pullquote {
  transform: rotate(-0.5deg) !important;
}

/* ════════════════════════════════════════════════════════════════
   AJOUTS ZINE PUNK FIDÈLES AU MOCKUP zine-scroll-10-dark
   ════════════════════════════════════════════════════════════════ */

/* ─── MARQUEE défilant zine punk (fixe sous topbar, sans gap) ─── */
.bouyon-chapter__marquee {
  background: var(--zine-cyan);
  color: var(--zine-bg);
  border-top: none;
  border-bottom: 2px solid var(--zine-ink);
  overflow: hidden;
  height: 40px;
  display: flex;
  align-items: center;
  position: fixed !important;
  top: 60px !important;            /* topbar 60px = collé sans gap */
  left: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
}
/* En mode scroll (topbar shrinks 60→44px), le marquee remonte aussi */
body:has(.bouyon-chapter__topbar.is-scrolled) .bouyon-chapter__marquee {
  top: 44px !important;
}
/* Décaler la minimap pour qu'elle apparaisse sous le marquee */
.bouyon-chapter__minimap {
  top: 100px !important;
}
.bouyon-chapter__minimap.is-scrolled {
  top: 84px !important;
}
/* Compenser padding-top du body pour topbar(60) + marquee(40) + minimap(48) */
body[data-chapter] {
  padding-top: 148px !important;
}
.bouyon-chapter__marquee-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: bouyon-marquee 28s linear infinite;
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bouyon-chapter__marquee-track span {
  padding: 0 16px;
}
.bouyon-chapter__marquee-track span b {
  color: var(--zine-bg);
  background: var(--zine-ink);
  padding: 0 6px;
  font-weight: 400;
}
@keyframes bouyon-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── TLDR : box discret + border-left bleu fin ─── */
.bouyon-chapter__tldr {
  position: relative !important;
  background: rgba(26, 26, 26, 0.6) !important;
  border: none !important;
  border-left: 3px solid var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
  padding: 22px 24px !important;
  margin: 28px 0 !important;
  box-shadow: none !important;
  transform: none;
  font-family: 'Special Elite', 'Courier New', monospace !important;
}
.bouyon-chapter__tldr::before {
  display: none;
}
.bouyon-chapter__tldr-eyebrow {
  font-family: 'Anton', sans-serif !important;
  color: var(--zine-cyan) !important;
  font-size: 14px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.bouyon-chapter__tldr p,
.bouyon-chapter__tldr-content {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-style: normal !important;
  color: var(--zine-ink) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

/* ─── Sections H2 : séparateur discret (plus de stamps tampons bruyants) ─── */
.bouyon-chapter__h2 {
  position: relative !important;
  padding-top: 24px !important;
  margin-top: 48px !important;
  border-top: 1px solid rgba(8, 135, 248, 0.35);
}
.bouyon-chapter__h2::before {
  display: none !important;
}

/* ─── Disclaimer : style mono italique ─── */
.bouyon-chapter__disclaimer {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--zine-ink) !important;
  opacity: .7 !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  margin-top: 18px !important;
  padding: 8px 12px;
  border-left: 3px solid var(--zine-cyan);
}

/* ─── Position 0 / Hook : discret avec accent bleu fin ─── */
.bouyon-chapter__position0 {
  background: rgba(26, 26, 26, 0.6) !important;
  color: var(--zine-ink) !important;
  border: none !important;
  border-left: 3px solid var(--zine-cyan) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none;
  padding: 20px 24px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─── Reading badge (chip flottante) : DISCRET — fond sombre + texte cream ─── */
.bouyon-chapter__time-remaining {
  background: rgba(26, 26, 26, 0.92) !important;
  color: var(--zine-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(8, 135, 248, 0.35) !important;
  box-shadow: none !important;
  letter-spacing: .08em !important;
  padding: 8px 14px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bouyon-chapter__time-remaining strong {
  color: var(--zine-cyan) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ─── Onboarding bandeau : style zine ─── */
.bouyon-chapter__onboarding {
  background: var(--zine-bg-2) !important;
  border: 3px solid var(--zine-cyan) !important;
  color: var(--zine-ink) !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
}
.bouyon-chapter__onboarding-link {
  background: var(--zine-cyan) !important;
  color: var(--zine-bg) !important;
  font-family: 'Anton', sans-serif !important;
  border: 2px solid var(--zine-ink) !important;
  box-shadow: 4px 4px 0 var(--zine-ink);
}

/* ═══════════════════════════════════════════════════════════════════
   CTAs ZINE PUNK · PALETTE P1 + LOGOS COLORÉS + ALIGNEMENT PROPRE
   • Bibliothèque = style Netflix (hero card + bouton ▶ JOUER plein bleu)
   • Streaming = stack vertical logo coloré + nom Anton + meta + action
   • Social = grid 3 cards colorées Instagram/TikTok/YouTube
   • Final = cliffhanger plein bleu
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper commun — pas de border bleu (Terry 2026-05-23 : "enlaid le cta de base") */
.bouyon-chapter__cta,
.bouyon-chapter__cta--library,
.bouyon-chapter__cta--streaming,
.bouyon-chapter__cta--social,
.bouyon-chapter__cta--final {
  position: relative !important;
  background: var(--zine-bg-2) !important;
  color: var(--zine-ink) !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  transform: none !important;
  padding: 28px 24px !important;
  margin: 40px 0 !important;
  overflow: visible !important;
}
.bouyon-chapter__cta::before,
.bouyon-chapter__cta--library::before,
.bouyon-chapter__cta--streaming::before,
.bouyon-chapter__cta--social::before,
.bouyon-chapter__cta--final::before {
  content: none !important;          /* virer tout ::before défilant */
}

/* ─── CTA BIBLIOTHÈQUE — POLAROID STACK (choix Terry CTA 11) ─── */
.bouyon-chapter__cta--library {
  background: var(--zine-bg-2) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 36px 24px !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 20px !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--zine-ink) !important;
  margin: 40px 0 !important;
  overflow: visible !important;
}
.bouyon-chapter__cta-library-stack {
  position: relative;
  width: 140px;
  height: 170px;
  flex-shrink: 0;
}
.bouyon-chapter__cta-library-polo {
  position: absolute;
  width: 120px;
  background: #F8F5EE;
  padding: 8px 8px 14px;
  color: #1a1a1a;
  font-family: 'Permanent Marker', cursive !important;
  font-size: 12px !important;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.bouyon-chapter__cta-library-polo-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--zine-cyan), #0568C7);
  display: grid;
  place-items: center;
  position: relative;
  font-family: 'Anton', sans-serif !important;
  color: #FFFFFF !important;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: .02em;
  overflow: hidden;
}
.bouyon-chapter__cta-library-polo-img .polo-title {
  font-family: 'Anton', sans-serif !important;
  font-size: 22px !important;
  line-height: 0.95 !important;
  text-align: center;
  color: #FFFFFF !important;
  z-index: 2;
}
.bouyon-chapter__cta-library-polo-img .polo-year {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase;
}
.bouyon-chapter__cta-library-polo[data-cover="kitty"] .bouyon-chapter__cta-library-polo-img {
  background: linear-gradient(135deg, #0887F8 0%, #FF6B9D 80%, #FFFFFF 110%);
}
.bouyon-chapter__cta-library-polo[data-cover="oulala"] .bouyon-chapter__cta-library-polo-img {
  background: linear-gradient(225deg, #00C9FF 0%, #0568C7 60%, #06183F 100%);
}
.bouyon-chapter__cta-library-polo[data-cover="bounce"] .bouyon-chapter__cta-library-polo-img {
  background: radial-gradient(circle at 30% 30%, #0887F8 0%, #062444 70%);
}
.bouyon-chapter__cta-library-polo-label {
  display: block;
  line-height: 1.1;
}
.bouyon-chapter__cta-library-polo:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 1;
}
.bouyon-chapter__cta-library-polo:nth-child(2) {
  top: 8px;
  left: 14px;
  z-index: 2;
  background: #F2EEE2;
}
.bouyon-chapter__cta-library-polo:nth-child(3) {
  top: 16px;
  left: 8px;
  z-index: 3;
}

/* ANIMATION A1 — Spread cycle auto (étalement périodique en boucle) */
@keyframes lib-spread-1 { 0%, 40%, 100% { transform: rotate(-8deg) translate(0, 0); } 55%, 85% { transform: rotate(-18deg) translate(-20px, 4px); } }
@keyframes lib-spread-2 { 0%, 40%, 100% { transform: rotate(3deg) translate(0, 0); } 55%, 85% { transform: rotate(0deg) translate(0, -6px); } }
@keyframes lib-spread-3 { 0%, 40%, 100% { transform: rotate(-2deg) translate(0, 0); } 55%, 85% { transform: rotate(8deg) translate(20px, 4px); } }
.bouyon-chapter__cta-library-polo:nth-child(1) { animation: lib-spread-1 5s ease-in-out infinite; transform: rotate(-8deg); }
.bouyon-chapter__cta-library-polo:nth-child(2) { animation: lib-spread-2 5s ease-in-out infinite; transform: rotate(3deg); }
.bouyon-chapter__cta-library-polo:nth-child(3) { animation: lib-spread-3 5s ease-in-out infinite; transform: rotate(-2deg); }
.bouyon-chapter__cta-library-copy {
  min-width: 0;
}
.bouyon-chapter__cta-library-hook {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  color: var(--zine-ink) !important;
}
.bouyon-chapter__cta-library-hook em {
  font-style: normal !important;
  color: var(--zine-cyan) !important;
  background: transparent !important;
}
.bouyon-chapter__cta-library-lead {
  font-family: 'Special Elite', 'Courier New', monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--zine-ink) !important;
  opacity: .85 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.bouyon-chapter__cta-library-button {
  display: inline-block !important;
  background: var(--zine-cyan) !important;
  color: var(--zine-bg) !important;
  padding: 10px 18px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: none !important;
}
.bouyon-chapter__cta--library:hover .bouyon-chapter__cta-library-button {
  background: #0568C7 !important;
}

/* Mobile : stack passe au-dessus du copy */
@media (max-width: 540px) {
  .bouyon-chapter__cta--library {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    padding: 28px 20px !important;
  }
  .bouyon-chapter__cta-library-stack {
    margin: 0 auto 24px;
  }
  .bouyon-chapter__cta-library-copy {
    text-align: center;
  }
}

/* ─── CTA STREAMING — Stack vertical avec logos colorés ─── */
.bouyon-chapter__cta--streaming {
  padding: 0 !important;
}
.bouyon-chapter__cta-streaming-aside {
  background: var(--zine-bg-2);
  padding: 32px 28px 24px;
  border-bottom: none;
}
.bouyon-chapter__cta-streaming-aside .bouyon-chapter__cta-quote em,
.bouyon-chapter__cta-streaming-aside em {
  color: var(--zine-cyan) !important;
  font-style: normal !important;
}
.bouyon-chapter__cta-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--zine-cyan) !important;
  margin-bottom: 8px !important;
}
.bouyon-chapter__cta-headline {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(28px, 6vw, 42px) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--zine-ink) !important;
  margin: 0 0 8px !important;
}
.bouyon-chapter__cta-headline em {
  font-style: normal !important;
  color: var(--zine-cyan) !important;
  background: transparent !important;
  padding: 0 !important;
}
.bouyon-chapter__cta-quote {
  font-family: 'Special Elite', monospace !important;
  font-size: 14px !important;
  color: var(--zine-ink) !important;
  opacity: .8;
  margin: 0 !important;
}
.bouyon-chapter__cta-streaming-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bouyon-chapter__cta-streaming-item {
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "logo name action"
    "logo meta action" !important;
  gap: 4px 16px !important;
  align-items: center !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;   /* cream très subtil au lieu de bleu */
  text-decoration: none !important;
  background: var(--zine-bg-2) !important;
  transition: padding-left .2s !important;
  color: var(--zine-ink) !important;
}
.bouyon-chapter__cta-streaming-item:last-child {
  border-bottom: none !important;
}
.bouyon-chapter__cta-streaming-item:hover {
  background: var(--zine-bg-2) !important;  /* JAMAIS transparent — sinon parent peut leak du bleu */
  padding-left: 24px !important;
}
/* Désactiver la barre verticale bleue de bouyon-chapter.css::before qui apparaît au hover */
.bouyon-chapter__cta-streaming-item::before,
.bouyon-chapter__cta-streaming-item:hover::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  transform: none !important;
}
.bouyon-chapter__cta-streaming-item:hover .bouyon-chapter__cta-platform-action {
  text-shadow: 0 0 8px currentColor;
  letter-spacing: .12em !important;
}
.bouyon-chapter__cta-streaming-item:last-child {
  border-bottom: none !important;
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-logo {
  grid-area: logo !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0;
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-num {
  display: none !important;          /* virer numéro qui prenait place */
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-name {
  grid-area: name !important;
  font-family: 'Anton', sans-serif !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: var(--zine-ink) !important;
  margin: 0 !important;
}
.bouyon-chapter__cta-streaming-item:hover .bouyon-chapter__cta-name {
  color: var(--platform-color, var(--zine-cyan)) !important;
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-platform-meta {
  grid-area: meta !important;
  font-family: 'Special Elite', monospace !important;
  font-style: normal !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  color: var(--zine-ink) !important;
  opacity: .6 !important;
  text-align: left !important;
  margin: 0 !important;
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-platform-action {
  grid-area: action !important;
  font-family: 'Anton', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--platform-color, var(--zine-cyan)) !important;
  white-space: nowrap !important;
}

/* ─── CTA SOCIAL — Grid cards colorées ─── */
.bouyon-chapter__cta--social {
  padding: 0 !important;
}
.bouyon-chapter__cta-social-aside,
.bouyon-chapter__cta-social-header {
  padding: 32px 28px 24px !important;
  border-bottom: none;
  background: var(--zine-bg-2);
}
.bouyon-chapter__cta-social-aside em,
.bouyon-chapter__cta-social-header em,
.bouyon-chapter__cta-social-sub em {
  color: var(--zine-cyan) !important;
  font-style: normal !important;
  background: transparent !important;
}
.bouyon-chapter__cta-social-sub {
  font-family: 'Special Elite', monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--zine-ink) !important;
  opacity: .8 !important;
  margin: 6px 0 0 !important;
  max-width: 380px;
}
/* Grid items : 1 col mobile (pas de cellule vide visible), 3 cols tablet+ */
.bouyon-chapter__cta-social-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 600px) {
  .bouyon-chapter__cta-social-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
}
/* P2 layout — Logo top + texte centré + stat hero + action bottom (choix Terry) */
.bouyon-chapter__cta-social-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  padding: 28px 18px 24px !important;
  background: var(--zine-bg-2) !important;
  transition: all .25s ease !important;
  min-height: 220px !important;
}
.bouyon-chapter__cta-social-logo {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.bouyon-chapter__cta-social-num {
  display: none !important;        /* P2 cache le numéro pour rester épuré */
}
.bouyon-chapter__cta-social-name {
  font-family: 'Anton', sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: var(--zine-ink) !important;
  margin: 4px 0 0 !important;
}
.bouyon-chapter__cta-social-stat {
  font-family: 'Anton', sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: var(--zine-cyan) !important;
  margin: 0 !important;
  opacity: 1 !important;
}
.bouyon-chapter__cta-social-meta {
  font-family: 'Special Elite', monospace !important;
  font-size: 11px !important;
  color: var(--zine-ink) !important;
  opacity: .55 !important;
  margin: 0 !important;
  line-height: 1.3;
}
.bouyon-chapter__cta-social-action {
  font-family: 'Anton', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--zine-cyan) !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}
.bouyon-chapter__cta-social-item:hover {
  background: var(--zine-bg-2) !important;  /* JAMAIS transparent — sinon parent peut leak du bleu */
}
.bouyon-chapter__cta-social-item:hover .bouyon-chapter__cta-social-action {
  text-shadow: 0 0 8px currentColor;
  letter-spacing: .12em !important;
}
/* Couleurs plateformes sociales colorées sur hover */
.bouyon-chapter__cta-social-item.is-instagram:hover .bouyon-chapter__cta-social-name { color: #E1306C !important; }
.bouyon-chapter__cta-social-item.is-tiktok:hover .bouyon-chapter__cta-social-name { color: #25F4EE !important; }
.bouyon-chapter__cta-social-item.is-youtube:hover .bouyon-chapter__cta-social-name { color: #FF0000 !important; }
.bouyon-chapter__cta-social-item.is-spotify:hover .bouyon-chapter__cta-social-name { color: #1DB954 !important; }

/* ─── CTA FINAL — Cliffhanger plein bleu (sans border ni shadow) ─── */
.bouyon-chapter__cta--final {
  background: var(--zine-cyan) !important;
  color: var(--zine-paper) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 32px 28px !important;
}
.bouyon-chapter__cta--final * {
  color: var(--zine-paper) !important;
}
.bouyon-chapter__cta--final a,
.bouyon-chapter__cta--final .bouyon-chapter__cta-cta {
  background: var(--zine-ink) !important;
  color: var(--zine-cyan) !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  border: 2px solid var(--zine-bg) !important;
  box-shadow: 4px 4px 0 var(--zine-bg) !important;
  display: inline-block !important;
  margin-top: 14px !important;
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS AUTO-LOOP CTAs (choix Terry : A1, B3, C1, D1)
   ════════════════════════════════════════════════════════════════ */

/* B3 — STREAMING : Glass shine cascade (reflet traverse en séquence) */
.bouyon-chapter__cta-streaming-item {
  position: relative !important;
  overflow: hidden !important;
}
.bouyon-chapter__cta-streaming-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  animation: bouyon-cta-shine 5.4s ease-in-out infinite;
  pointer-events: none;
}
.bouyon-chapter__cta-streaming-item:nth-child(1)::after { animation-delay: 0s; }
.bouyon-chapter__cta-streaming-item:nth-child(2)::after { animation-delay: 1.8s; }
.bouyon-chapter__cta-streaming-item:nth-child(3)::after { animation-delay: 3.6s; }
@keyframes bouyon-cta-shine {
  0%, 80%, 100% { left: -100%; }
  30%, 55% { left: 140%; }
}

/* C1 — SOCIAL : Color flood cascade (couleur plateforme en séquence) */
@keyframes bouyon-flood-ig {
  0%, 80%, 100% { background-color: var(--zine-bg-2); }
  40%, 55% { background-color: rgba(245, 133, 41, 0.18); }
}
@keyframes bouyon-flood-tk {
  0%, 80%, 100% { background-color: var(--zine-bg-2); }
  40%, 55% { background-color: rgba(37, 244, 238, 0.15); }
}
@keyframes bouyon-flood-yt {
  0%, 80%, 100% { background-color: var(--zine-bg-2); }
  40%, 55% { background-color: rgba(255, 0, 0, 0.13); }
}
.bouyon-chapter__cta-social-item.is-instagram { animation: bouyon-flood-ig 5.4s ease-in-out infinite; }
.bouyon-chapter__cta-social-item.is-tiktok    { animation: bouyon-flood-tk 5.4s ease-in-out infinite 1.8s; }
.bouyon-chapter__cta-social-item.is-youtube   { animation: bouyon-flood-yt 5.4s ease-in-out infinite 3.6s; }

/* Logo pulse cascade (scale + glow) — comme dans le preview animations */
@keyframes bouyon-logo-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(8, 135, 248, 0.45)); }
}
.bouyon-chapter__cta-social-logo { animation: bouyon-logo-pulse 3.6s ease-in-out infinite; }
.bouyon-chapter__cta-social-item.is-instagram .bouyon-chapter__cta-social-logo { animation-delay: 0s; }
.bouyon-chapter__cta-social-item.is-tiktok    .bouyon-chapter__cta-social-logo { animation-delay: 1.2s; }
.bouyon-chapter__cta-social-item.is-youtube   .bouyon-chapter__cta-social-logo { animation-delay: 2.4s; }

/* Stat glow cascade sur les stats social (5,4K / 12K / 2,1K) */
@keyframes bouyon-stat-glow {
  0%, 80%, 100% { color: var(--zine-cyan); text-shadow: none; }
  40%, 55% { color: var(--zine-ink); text-shadow: 0 0 12px rgba(8, 135, 248, 0.6); }
}
.bouyon-chapter__cta-social-stat { animation: bouyon-stat-glow 5.4s ease-in-out infinite; }
.bouyon-chapter__cta-social-item.is-instagram .bouyon-chapter__cta-social-stat { animation-delay: 0s; }
.bouyon-chapter__cta-social-item.is-tiktok    .bouyon-chapter__cta-social-stat { animation-delay: 1.8s; }
.bouyon-chapter__cta-social-item.is-youtube   .bouyon-chapter__cta-social-stat { animation-delay: 3.6s; }

/* ─── Animations boutons d'action (arrow bounce + glow) ─── */

/* Bouton "VOIR LA PILE" (CTA bibliothèque) : pulse + breathe + shine traversant */
@keyframes bouyon-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(8, 135, 248, 0.6); transform: scale(1); }
  50% { box-shadow: 0 0 24px 8px rgba(8, 135, 248, 0.45); transform: scale(1.03); }
}
@keyframes bouyon-btn-shine {
  0%, 80%, 100% { left: -120%; }
  30%, 55% { left: 120%; }
}
.bouyon-chapter__cta-library-button {
  animation: bouyon-btn-pulse 2.4s ease-in-out infinite;
  position: relative !important;
  overflow: hidden !important;
  transform-origin: center;
}
.bouyon-chapter__cta-library-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  animation: bouyon-btn-shine 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Flèches "→" des streaming items (Écouter → / Ouvrir → / Lancer →) */
@keyframes bouyon-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.bouyon-chapter__cta-streaming-item .bouyon-chapter__cta-platform-action {
  display: inline-block;
  animation: bouyon-arrow-bounce 1.6s ease-in-out infinite;
}
.bouyon-chapter__cta-streaming-item:nth-child(1) .bouyon-chapter__cta-platform-action { animation-delay: 0s; }
.bouyon-chapter__cta-streaming-item:nth-child(2) .bouyon-chapter__cta-platform-action { animation-delay: .25s; }
.bouyon-chapter__cta-streaming-item:nth-child(3) .bouyon-chapter__cta-platform-action { animation-delay: .5s; }

/* Flèches "→" des social cards (Me suivre → / Me trouver → / S'abonner →) */
.bouyon-chapter__cta-social-action {
  display: inline-block;
  animation: bouyon-arrow-bounce 1.6s ease-in-out infinite;
}
.bouyon-chapter__cta-social-item.is-instagram .bouyon-chapter__cta-social-action { animation-delay: 0s; }
.bouyon-chapter__cta-social-item.is-tiktok    .bouyon-chapter__cta-social-action { animation-delay: .25s; }
.bouyon-chapter__cta-social-item.is-youtube   .bouyon-chapter__cta-social-action { animation-delay: .5s; }

/* D1 — CLIFFHANGER (mid + final) : Text reveal slide-up cascade en loop */
@keyframes bouyon-reveal-cascade {
  0%, 8% { transform: translateY(16px); opacity: 0; }
  20%, 88% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}
.bouyon-chapter__cliffhanger .bouyon-chapter__cliffhanger-tag,
.bouyon-chapter__cliffhanger p,
.bouyon-chapter__cliffhanger a,
.bouyon-cliffhanger .bouyon-chapter__cliffhanger-tag,
.bouyon-cliffhanger p,
.bouyon-cliffhanger a {
  animation: bouyon-reveal-cascade 8s ease-in-out infinite;
}
.bouyon-chapter__cliffhanger p,
.bouyon-cliffhanger p { animation-delay: 0.2s; }
.bouyon-chapter__cliffhanger a,
.bouyon-cliffhanger a { animation-delay: 0.4s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bouyon-chapter__cta-library-polo,
  .bouyon-chapter__cta-streaming-item::after,
  .bouyon-chapter__cta-social-item,
  .bouyon-chapter__cta--final * {
    animation: none !important;
  }
}

/* ─── Print fallback ─── */
@media print {
  body::before,
  body::after {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   DEFENSIVE OVERRIDE — Anti-bleu résiduel (Terry 2026-05-23)
   Lesson L13 : peu importe ce que fait le parent / CDN / cache,
   les wrappers CTAs et les items restent sombres SANS aucun bleu.
   Sélecteurs body+data-chapter pour spécificité max.
   ════════════════════════════════════════════════════════════════ */
body[data-chapter] .bouyon-chapter__cta--streaming,
body[data-chapter] .bouyon-chapter__cta--social,
body[data-chapter] .bouyon-chapter__cta--library {
  background: var(--zine-bg-2) !important;
  background-color: var(--zine-bg-2) !important;
  background-image: none !important;
}
body[data-chapter] .bouyon-chapter__cta--streaming:hover,
body[data-chapter] .bouyon-chapter__cta--social:hover,
body[data-chapter] .bouyon-chapter__cta--library:hover {
  background: var(--zine-bg-2) !important;
  background-color: var(--zine-bg-2) !important;
}
body[data-chapter] .bouyon-chapter__cta-streaming-item,
body[data-chapter] .bouyon-chapter__cta-streaming-item:hover,
body[data-chapter] .bouyon-chapter__cta-streaming-item:focus,
body[data-chapter] .bouyon-chapter__cta-social-item,
body[data-chapter] .bouyon-chapter__cta-social-item:hover,
body[data-chapter] .bouyon-chapter__cta-social-item:focus {
  background-color: var(--zine-bg-2) !important;
  background-image: none !important;
}