/* ═══════════════════════════════════════════════════════════════════
   BOUYON CHAPTER — SKIN « LAGON CARNAVAL » (D3, choix Terry 2026-07-03)
   Chargé en DERNIER, scopé sous body[data-skin="lagon"].

   Objectif Terry : sortir du noir pur « sombre et ennuyeux » → nuit
   tropicale électrique, lisible (Satoshi), titres qui claquent (Cabinet
   Grotesk), accents lagon (aqua/bleu) + coral réservé à la CONVERSION.

   POURQUOI le scope [data-skin="lagon"] : le zine (chargé avant) utilise
   des sélecteurs COMPOSÉS !important (`.bouyon-chapter__p.deep-only` = 0-2-0)
   qui battent des règles simples 0-1-0. Préfixer par l'attribut ajoute
   +0-1-0 de spécificité PARTOUT → lagon gagne systématiquement.
   Couleurs : bg #0A0F1E · aqua #38E1D4 · bleu #2E9BFF · coral #FF6B6B
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/satoshi.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

/* ─── Palette lagon (recolorie tout le variable-driven) ─── */
:root {
  --bg:        #0A0F1E;
  --bg-2:      #101830;
  --bg-3:      #182444;
  --text:      #EEF3FF;
  --muted:     rgba(199, 210, 232, 0.82);
  --faint:     rgba(199, 210, 232, 0.42);
  --border:    rgba(142, 168, 220, 0.16);
  --accent:    #2E9BFF;
  --accent-rgb: 46, 155, 255;
  --aqua:      #38E1D4;
  --aqua-rgb:  56, 225, 212;
  --coral:     #FF6B6B;
  --coral-rgb: 255, 107, 107;
  --zine-bg:    #0A0F1E;
  --zine-bg-2:  #101830;
  --zine-bg-3:  #182444;
  --zine-ink:   #EEF3FF;
  --zine-cyan:  #2E9BFF;
  --zine-coral: #38E1D4;
  --zine-coral-2: #6BF0E6;
  --zine-line:  rgba(142, 168, 220, 0.16);
  --zine-line-2: rgba(142, 168, 220, 0.34);
}

html { background: var(--bg) !important; }

/* ═══════════ LAYOUT AUTONOME (zine.css RETIRÉ — Terry 2026-07-03) ═══════════
   chapter.css tient la plupart des layouts ; lagon fournit ce que seul le zine
   avait (tailles titres, pullquote pleine, marquee masqué) → 100 % nouveau visuel,
   et surtout PLUS de `opacity:1 !important` du zine qui bloquait les transitions. */

/* Marquee : élément 100 % zine → masqué (le padding article de chapter.css
   = 132px n'en tient déjà pas compte, donc zéro décalage). */
body[data-skin="lagon"] .bouyon-chapter__marquee { display: none !important; }

/* Contenu VISIBLE par défaut : chapter.css met opacity:0 sur p/h2/h3 en attendant
   un reveal JS (le .is-visible n'est plus posé nulle part → sans le opacity:1 du
   zine, tout serait invisible). Défaut visible SANS !important → le reveal GSAP
   (styles inline) peut piloter l'entrée ; si GSAP tombe, tout reste lisible. */
body[data-skin="lagon"] .bouyon-chapter__article p,
body[data-skin="lagon"] .bouyon-chapter__article h2,
body[data-skin="lagon"] .bouyon-chapter__article h3,
body[data-skin="lagon"] .bouyon-chapter__article li,
body[data-skin="lagon"] .bouyon-chapter__article blockquote,
body[data-skin="lagon"] .bouyon-chapter__pullquote {
  opacity: 1;
  transform: none;
}

/* Titre chapitre */
body[data-skin="lagon"] .bouyon-chapter__title {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important;
  font-weight: 900 !important; font-style: normal !important;
  font-size: clamp(44px, 9vw, 92px) !important;
  line-height: 0.94 !important; letter-spacing: -0.015em !important;
  text-transform: uppercase; color: var(--text) !important;
  margin: 0 0 6px !important; transform: none !important;
}
body[data-skin="lagon"] .bouyon-chapter__title em {
  font-style: normal !important; color: var(--aqua) !important; display: inline-block;
  text-shadow: 0.04em 0.04em 0 rgba(46, 155, 255, 0.7); transform: none !important;
}
/* H2 de section */
body[data-skin="lagon"] .bouyon-chapter__h2 {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 800 !important;
  font-size: clamp(28px, 5vw, 46px) !important; line-height: 1.02 !important;
  letter-spacing: -0.01em !important; color: var(--text) !important; margin: 6vh 0 24px !important;
}
body[data-skin="lagon"] .bouyon-chapter__h2 em { font-style: normal !important; color: var(--aqua) !important; background: none !important; padding: 0 !important; }
/* H3 */
body[data-skin="lagon"] .bouyon-chapter__h3 {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 800 !important;
  font-size: clamp(21px, 3.4vw, 30px) !important; line-height: 1.1 !important; color: var(--text) !important; margin: 4vh 0 16px !important;
}
body[data-skin="lagon"] .bouyon-chapter__h3 em { font-style: normal !important; color: var(--aqua) !important; }

/* Pullquote : panneau aqua plein (layout complet, ex-zine) */
body[data-skin="lagon"] .bouyon-chapter__pullquote,
body[data-skin="lagon"] .bouyon-chapter__article .bouyon-chapter__pullquote,
body[data-skin="lagon"] .bouyon-pullquote,
body[data-skin="lagon"] .bouyon-chapter__quote-fullbleed {
  background: linear-gradient(115deg, var(--aqua), var(--accent) 62%, #6f86ff) !important;
  color: #06202A !important; border: none !important; border-radius: 10px !important;
  padding: clamp(26px, 4vw, 40px) !important; margin: 6vh 0 !important; transform: none !important;
  box-shadow: 0 24px 60px rgba(46, 155, 255, 0.2) !important; position: relative !important;
}
body[data-skin="lagon"] .bouyon-chapter__pullquote p,
body[data-skin="lagon"] .bouyon-chapter__article .bouyon-chapter__pullquote p {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 900 !important;
  font-size: clamp(21px, 2.6vw, 30px) !important; line-height: 1.2 !important;
  color: #06202A !important; margin: 0 0 8px !important; letter-spacing: -0.01em !important;
}
body[data-skin="lagon"] .bouyon-chapter__pullquote cite {
  display: block !important; font-family: 'JetBrains Mono', monospace !important; font-style: normal !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: rgba(6, 32, 42, 0.72) !important; margin-top: 10px !important;
}

/* ─── Fond vivant : nuit lagon + halos diffus (dans le shorthand `background`
   du body, jamais en ::before → pas de piège de z-index) ─── */
body[data-skin="lagon"] {
  background:
    radial-gradient(46vw 46vw at 82% -6%, rgba(56, 225, 212, 0.12), transparent 60%),
    radial-gradient(54vw 54vw at -10% 42%, rgba(46, 155, 255, 0.12), transparent 60%),
    radial-gradient(42vw 42vw at 108% 88%, rgba(255, 107, 107, 0.08), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: 17.5px;
  line-height: 1.75;
}
body[data-skin="lagon"]::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* container transparent → le body (halos) transparaît dans la colonne */
body[data-skin="lagon"] .bouyon-chapter__body,
body[data-skin="lagon"] .bouyon-chapter {
  background: transparent !important;
  color: var(--text) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
}

/* ─── Confort de lecture : corps clair, Satoshi, aéré ─── */
body[data-skin="lagon"] .bouyon-chapter__p,
body[data-skin="lagon"] .bouyon-chapter__p.deep-only,
body[data-skin="lagon"] .bouyon-chapter__article > p,
body[data-skin="lagon"] .bouyon-chapter__body p,
body[data-skin="lagon"] .bouyon-chapter__body li {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: 1.02rem !important;
  line-height: 1.78 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}
/* Le zine surligne TOUS les <strong> avec une box dégradé bleu (`.bouyon-chapter strong`,
   0-1-1 !important) → illisible sur le lagon (plainte Terry 2026-07-03). On retire le
   fond partout : emphase = gras blanc (em reste aqua italique → 2 niveaux distincts). */
body[data-skin="lagon"] .bouyon-chapter strong,
body[data-skin="lagon"] .bouyon-chapter__article strong,
body[data-skin="lagon"] .bouyon-chapter__p strong,
body[data-skin="lagon"] .bouyon-chapter__body strong {
  background: none !important;
  color: #fff !important;
  padding: 0 !important;
  font-weight: 800 !important;
}
body[data-skin="lagon"] .bouyon-chapter__p em,
body[data-skin="lagon"] .bouyon-chapter__body em { color: var(--aqua) !important; font-style: italic; }
body[data-skin="lagon"] .bouyon-chapter__body a,
body[data-skin="lagon"] .bouyon-chapter__p a { color: var(--aqua) !important; text-decoration-color: rgba(var(--aqua-rgb), 0.5) !important; }

/* ─── Titres : Cabinet Grotesk (claque + propre) ─── */
body[data-skin="lagon"] .bouyon-chapter__title,
body[data-skin="lagon"] .bouyon-chapter__h2,
body[data-skin="lagon"] .bouyon-chapter__h3,
body[data-skin="lagon"] .bouyon-chapter__stat__num,
body[data-skin="lagon"] .bouyon-chapter__cta-hub-title,
body[data-skin="lagon"] .bouyon-chapter__cta-library-hook,
body[data-skin="lagon"] .bouyon-chapter__cta-final h2,
body[data-skin="lagon"] .bouyon-chapter__position0 {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
body[data-skin="lagon"] .bouyon-chapter__title { color: var(--text) !important; text-shadow: none !important; }
body[data-skin="lagon"] .bouyon-chapter__title em {
  font-style: normal; color: var(--aqua) !important;
  text-shadow: 0.04em 0.04em 0 rgba(46, 155, 255, 0.7);
}
body[data-skin="lagon"] .bouyon-chapter__eyebrow {
  color: var(--aqua) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
body[data-skin="lagon"] .bouyon-chapter__subtitle {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  transform: none !important;
  color: var(--text) !important;
}
body[data-skin="lagon"] .bouyon-chapter__disclaimer em { color: var(--muted) !important; }
body[data-skin="lagon"] .bouyon-chapter__disclaimer strong { color: var(--aqua) !important; }
body[data-skin="lagon"] .bouyon-chapter__filet { background: linear-gradient(90deg, var(--aqua), transparent) !important; }
body[data-skin="lagon"] .bouyon-chapter__h2 { color: var(--text) !important; }
body[data-skin="lagon"] .bouyon-chapter__h2 em,
body[data-skin="lagon"] .bouyon-chapter__h3 em { color: var(--aqua) !important; font-style: normal; }
body[data-skin="lagon"] .bouyon-chapter__h3 { color: var(--text) !important; }

/* ─── Pullquote : panneau lagon pleine largeur, texte sombre lisible ─── */
body[data-skin="lagon"] .bouyon-chapter__pullquote,
body[data-skin="lagon"] .bouyon-chapter__pullquote.deep-only,
body[data-skin="lagon"] .bouyon-pullquote,
body[data-skin="lagon"] .bouyon-chapter__quote-fullbleed {
  background: linear-gradient(115deg, var(--aqua), var(--accent) 62%, #6f86ff) !important;
  color: #06202A !important;
  border: none !important;
  border-radius: 8px !important;
  transform: none !important;
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important;
  font-weight: 900 !important;
}
body[data-skin="lagon"] .bouyon-chapter__pullquote *,
body[data-skin="lagon"] .bouyon-chapter__quote-fullbleed * { color: #06202A !important; }
body[data-skin="lagon"] .bouyon-chapter__pullquote cite,
body[data-skin="lagon"] .bouyon-chapter__quote-fullbleed cite { color: rgba(6, 32, 42, 0.72) !important; }
/* Pas de guillemet décoratif géant (::before) sur les citations — retiré (Terry 2026-07-04). */
body[data-skin="lagon"] .bouyon-chapter__pullquote::before,
body[data-skin="lagon"] .bouyon-chapter__article blockquote::before { content: none !important; display: none !important; }

/* ─── Data (BPM) ─── */
body[data-skin="lagon"] .bouyon-chapter__data,
body[data-skin="lagon"] .bouyon-chapter__data-item,
body[data-skin="lagon"] .bouyon-data {
  background: rgba(20, 30, 56, 0.5) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body[data-skin="lagon"] .bouyon-chapter__data-item b,
body[data-skin="lagon"] .bouyon-chapter__data strong { color: var(--aqua) !important; }

/* ─── Stat callout ×2 ─── */
body[data-skin="lagon"] .bouyon-chapter__stat,
body[data-skin="lagon"] .bouyon-chapter__stat-callout {
  background: linear-gradient(120deg, rgba(46, 155, 255, 0.12), rgba(56, 225, 212, 0.08)) !important;
  border-color: rgba(var(--aqua-rgb), 0.28) !important;
  color: var(--text) !important;
}
body[data-skin="lagon"] .bouyon-chapter__stat__num { color: var(--aqua) !important; }

/* ─── Cliffhanger : tension coral ─── */
body[data-skin="lagon"] .bouyon-chapter__cliffhanger,
body[data-skin="lagon"] .bouyon-cliffhanger {
  background: rgba(20, 30, 56, 0.5) !important;
  border-left-color: var(--coral) !important;
  color: var(--text) !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
}
body[data-skin="lagon"] .bouyon-chapter__cliffhanger em { color: var(--aqua) !important; font-style: normal; }
body[data-skin="lagon"] .bouyon-chapter__cliffhanger-tag { color: var(--coral) !important; font-family: 'JetBrains Mono', monospace !important; }

/* ─── Polemic (2 versions) ─── */
body[data-skin="lagon"] .bouyon-chapter__polemic {
  background: rgba(20, 30, 56, 0.45) !important;
  border-color: rgba(var(--coral-rgb), 0.3) !important;
  color: var(--text) !important;
}

/* ─── TL;DR ─── */
body[data-skin="lagon"] .bouyon-chapter__tldr,
body[data-skin="lagon"] .bouyon-chapter__tldr-content {
  background: rgba(20, 30, 56, 0.5) !important;
  border-color: var(--border) !important;
}
body[data-skin="lagon"] .bouyon-chapter__tldr-eyebrow { color: var(--coral) !important; }
body[data-skin="lagon"] .bouyon-chapter__tldr-body { color: var(--text) !important; }

/* ─── Sticky stack ─── */
body[data-skin="lagon"] .bouyon-chapter__topbar {
  background: rgba(10, 15, 30, 0.82) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(12px) !important;
}
body[data-skin="lagon"] .bouyon-chapter__topbar-title,
body[data-skin="lagon"] .bouyon-chapter__topbar-back { color: var(--text) !important; }
body[data-skin="lagon"] .bouyon-chapter__progress { background: rgba(142, 168, 220, 0.12) !important; }
body[data-skin="lagon"] .bouyon-chapter__progress > *,
body[data-skin="lagon"] .bouyon-chapter__progress::after {
  background: linear-gradient(90deg, var(--accent), var(--aqua) 60%, var(--coral)) !important;
}
body[data-skin="lagon"] .bouyon-chapter__minimap { background: rgba(10, 15, 30, 0.7) !important; border-bottom-color: var(--border) !important; }
/* Le point visible = le ::before (petit rond) ; le bouton reste une cible tactile
   TRANSPARENTE. Mettre le fond sur le bouton affichait toute la cible de 44px →
   gros carrés pleins (fix Terry 2026-07-04). */
body[data-skin="lagon"] .bouyon-chapter__minimap-dot { background: transparent !important; }
body[data-skin="lagon"] .bouyon-chapter__minimap-dot::before {
  background: rgba(142, 168, 220, 0.3) !important; border-color: var(--border) !important;
}
body[data-skin="lagon"] .bouyon-chapter__minimap-dot.is-read::before { background: rgba(56, 225, 212, 0.5) !important; border-color: var(--aqua) !important; }
body[data-skin="lagon"] .bouyon-chapter__minimap-dot.is-active::before {
  background: var(--aqua) !important; border-color: var(--aqua) !important;
  box-shadow: 0 0 8px var(--aqua) !important; transform: scale(1.3);
}
body[data-skin="lagon"] .bouyon-chapter__minimap-current { background: var(--aqua) !important; box-shadow: 0 0 10px var(--aqua) !important; }
body[data-skin="lagon"] .bouyon-chapter__minimap-line { background: var(--border) !important; }
/* Barre compacte + optimisée sur mobile : cible tactile 34px (reste conforme WCAG
   2.5.8 AA ≥ 24px) → barre plus fine et les ~10 dots tiennent mieux (Terry 2026-07-04). */
@media (max-width: 760px) {
  body[data-skin="lagon"] .bouyon-chapter__minimap-dot {
    min-width: 34px !important; min-height: 34px !important; padding: 12px !important;
  }
  body[data-skin="lagon"] .bouyon-chapter__minimap-dot::before { width: 8px !important; height: 8px !important; }
}
body[data-skin="lagon"] .bouyon-chapter__marquee { color: var(--muted) !important; }

/* ─── Mode toggle ─── */
body[data-skin="lagon"] .bouyon-chapter__mode-toggle { border-color: var(--border) !important; }
body[data-skin="lagon"] .bouyon-chapter__mode-toggle [aria-pressed="true"],
body[data-skin="lagon"] .bouyon-chapter__mode-toggle .is-active {
  background: var(--aqua) !important; color: #06202A !important;
}

/* ─── Onboarding + time-remaining : glass lagon ─── */
body[data-skin="lagon"] .bouyon-chapter__onboarding,
body[data-skin="lagon"] .bouyon-chapter__time-remaining {
  background: rgba(13, 20, 40, 0.88) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(14px) !important;
}
body[data-skin="lagon"] .bouyon-chapter__onboarding-link { color: var(--aqua) !important; }

/* ─── Sources / Related / Glossary / Comments ─── */
body[data-skin="lagon"] .bouyon-chapter__sources,
body[data-skin="lagon"] .bouyon-chapter__related,
body[data-skin="lagon"] .bouyon-chapter__faq,
body[data-skin="lagon"] .bouyon-chapter__comments { border-color: var(--border) !important; }
body[data-skin="lagon"] .bouyon-chapter__sources a,
body[data-skin="lagon"] .bouyon-chapter__related a,
body[data-skin="lagon"] .bouyon-chapter__faq a { color: var(--aqua) !important; }
body[data-skin="lagon"] .bouyon-chapter__form-submit {
  background: linear-gradient(120deg, var(--coral), #ff5252) !important;
  color: #16060a !important; border: none !important;
}
/* Termes glossaire : le zine posait un FOND bleu #2E9BFF illisible sous le texte
   (plainte Terry 2026-07-03) → fond retiré, texte aqua sur fond sombre (lisible),
   soulignement pointillé discret pour signaler le terme cliquable. */
body[data-skin="lagon"] .term-glossary {
  background: transparent !important;
  color: var(--aqua) !important;
  border-bottom: 1px dotted rgba(var(--aqua-rgb), 0.6) !important;
  padding: 0 1px !important;
  font-weight: 600 !important;
}
body[data-skin="lagon"] .term-glossary:hover,
body[data-skin="lagon"] .term-glossary--active {
  background: rgba(var(--aqua-rgb), 0.14) !important;
  color: var(--aqua) !important;
  border-radius: 3px;
}

/* ─── Sources / Related / Comments : corps en Satoshi (lisible, plus de typewriter) ─── */
body[data-skin="lagon"] .bouyon-chapter__sources,
body[data-skin="lagon"] .bouyon-chapter__sources li,
body[data-skin="lagon"] .bouyon-chapter__sources p,
body[data-skin="lagon"] .bouyon-chapter__related,
body[data-skin="lagon"] .bouyon-chapter__related li,
body[data-skin="lagon"] .bouyon-chapter__faq,
body[data-skin="lagon"] .bouyon-chapter__faq p,
body[data-skin="lagon"] .bouyon-chapter__comments,
body[data-skin="lagon"] .bouyon-chapter__comments p {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  color: var(--text) !important;
}
/* tags de source : pastille aqua discrète (au lieu du bloc bleu vif zine) */
body[data-skin="lagon"] .bouyon-chapter__sources mark,
body[data-skin="lagon"] .bouyon-chapter__sources b {
  background: rgba(var(--aqua-rgb), 0.16) !important;
  color: var(--aqua) !important;
  border-radius: 3px;
}

/* ─── Figures / HR ─── */
body[data-skin="lagon"] .bouyon-chapter__figure figcaption { color: var(--muted) !important; }
body[data-skin="lagon"] .bouyon-chapter__hr { background: var(--border) !important; border: none !important; }

/* ═══════════ NEUTRALISATION DES EFFETS PUNK DU ZINE ═══════════
   Terry veut UNIQUEMENT le nouveau visuel (2026-07-03). Le zine laissait
   fuir : Special Elite (typewriter) sur captions/listes/meta/cliffhanger,
   bordures pointillées, marquee bleu vif. On neutralise tout ici. */

/* 1) tout le texte de lecture en Satoshi (titres = Cabinet, labels = mono, inchangés) */
body[data-skin="lagon"] .bouyon-chapter__article p,
body[data-skin="lagon"] .bouyon-chapter__article li,
body[data-skin="lagon"] .bouyon-chapter__article em,
body[data-skin="lagon"] .bouyon-chapter__article dd,
body[data-skin="lagon"] .bouyon-chapter__article dt,
body[data-skin="lagon"] .bouyon-chapter__article figcaption,
body[data-skin="lagon"] .bouyon-chapter__figure figcaption,
body[data-skin="lagon"] .bouyon-chapter__meta,
body[data-skin="lagon"] .bouyon-chapter__meta *,
body[data-skin="lagon"] .bouyon-chapter__cta-library-lead,
body[data-skin="lagon"] .bouyon-chapter__cliffhanger,
body[data-skin="lagon"] .bouyon-chapter__cliffhanger *,
body[data-skin="lagon"] .bouyon-chapter__retenir,
body[data-skin="lagon"] .bouyon-chapter__retenir *,
body[data-skin="lagon"] .bouyon-chapter__tldr-body,
body[data-skin="lagon"] .bouyon-chapter__tldr-body *,
body[data-skin="lagon"] .bouyon-chapter__sources,
body[data-skin="lagon"] .bouyon-chapter__sources *,
body[data-skin="lagon"] .bouyon-chapter__related,
body[data-skin="lagon"] .bouyon-chapter__related * {
  font-family: 'Satoshi', system-ui, sans-serif !important;
}

/* 2) bordures pointillées punk → filet solide discret lagon
   (PAS `.bouyon-chapter__data *` : ça encadrait chaque label — le bloc data
   est restylé proprement plus bas) */
body[data-skin="lagon"] .bouyon-chapter__retenir-item,
body[data-skin="lagon"] .bouyon-chapter__article li,
body[data-skin="lagon"] .bouyon-chapter__sources-list li,
body[data-skin="lagon"] .bouyon-chapter__sources li,
body[data-skin="lagon"] .bouyon-chapter__related li {
  border-style: solid !important;
  border-color: var(--border) !important;
}

/* Bloc data (:::data BPM) : carte propre, chiffres Cabinet Grotesk aqua,
   séparateurs de ligne discrets (fini le serif italique bleu + les boîtes) */
body[data-skin="lagon"] .bouyon-chapter__data {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: rgba(20, 30, 56, 0.5) !important;
  overflow: hidden;
}
body[data-skin="lagon"] .bouyon-chapter__data-item {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}
body[data-skin="lagon"] .bouyon-chapter__data-item:first-child { border-top: none !important; }
body[data-skin="lagon"] .bouyon-chapter__data-item .value {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important;
  font-style: normal !important; font-weight: 900 !important;
  color: var(--aqua) !important; border: none !important;
}
body[data-skin="lagon"] .bouyon-chapter__data-item .label {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  color: var(--muted) !important; border: none !important;
}

/* 3) marquee : bande sombre discrète au lieu du bleu punk vif */
body[data-skin="lagon"] .bouyon-chapter__marquee {
  background: rgba(10, 15, 30, 0.65) !important;
  border-color: var(--border) !important;
}
body[data-skin="lagon"] .bouyon-chapter__marquee,
body[data-skin="lagon"] .bouyon-chapter__marquee * {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* 4) topbar « back » : le zine mettait un fond coral vif + dashed → lagon glass */
body[data-skin="lagon"] .bouyon-chapter__topbar-back,
body[data-skin="lagon"] .bouyon-chapter__topbar-back--hub {
  background: rgba(20, 30, 56, 0.55) !important;
  border: 1px solid var(--border) !important;
  border-style: solid !important;
  color: var(--text) !important;
  transform: none !important;
}

/* ═══════════ CTA « CASINO » : effets voyants qui appellent le clic ═══════════
   Contrainte : le zine verrouille opacity:1 !important sur les éléments d'article.
   → tout est en TRANSFORM (JS) ou en PSEUDO-ÉLÉMENT (CSS, non touché par le lock). */

@property --lagon-spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lagonSpin { to { --lagon-spin: 360deg; } }
@keyframes lagonShine { 0%, 52% { left: -85%; } 72%, 100% { left: 135%; } }
@keyframes lagonThrob {
  0%, 100% { box-shadow: 0 10px 30px rgba(255, 107, 107, 0.35); }
  50% { box-shadow: 0 12px 48px rgba(255, 107, 107, 0.75), 0 0 0 6px rgba(255, 107, 107, 0.14); }
}

/* bordure lumineuse qui tourne autour des CTA (activée par .is-casino) */
body[data-skin="lagon"] .bouyon-chapter__cta.is-casino,
body[data-skin="lagon"] .bouyon-chapter__single.is-casino { position: relative; }
body[data-skin="lagon"] .is-casino::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--lagon-spin),
    transparent 0 0.28turn, rgba(56, 225, 212, 0.95) 0.38turn,
    rgba(255, 107, 107, 0.95) 0.46turn, rgba(255, 217, 142, 0.85) 0.52turn,
    transparent 0.62turn 1turn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: lagonSpin 3.6s linear infinite;
  pointer-events: none; z-index: 1;
}

/* couche d'étincelles injectée par JS (scale→0, jamais d'opacity) */
body[data-skin="lagon"] .bouyon-chapter__fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 2; }
body[data-skin="lagon"] .bouyon-chapter__spark { position: absolute; top: 46%; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  body[data-skin="lagon"] .is-casino::before { animation: none; }
}

/* ═══════════ SINGLE DU MOMENT (endcard universel) ═══════════ */
/* FLEXBOX robuste (ex-grid qui débordait sans le zine) : width 100% remplit
   l'endcard, min-width:0 sur le body empêche l'overflow, marge réduite (« trop
   éloigné »), pochette carrée non déformée (aspect-ratio + object-fit cover). */
body[data-skin="lagon"] .bouyon-chapter__single {
  display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 36px);
  width: 100%; box-sizing: border-box; border-radius: 12px; overflow: hidden;
  margin: 4.5vh 0 0 !important; padding: clamp(22px, 4vw, 36px);
  background:
    radial-gradient(120% 160% at 88% 0%, rgba(56, 225, 212, 0.14), transparent 55%),
    radial-gradient(130% 150% at 0% 100%, rgba(255, 107, 107, 0.12), transparent 55%),
    linear-gradient(160deg, #131d3a, #0d1428) !important;
  border: 1px solid rgba(142, 168, 220, 0.22) !important;
  text-align: left !important;
}
body[data-skin="lagon"] .bouyon-chapter__single-fig { position: relative; flex: 0 0 auto; align-self: center; width: clamp(130px, 26%, 190px); margin: 0; }
body[data-skin="lagon"] .bouyon-chapter__single-cover { display: block; border-radius: 6px; overflow: hidden; border: 7px solid #f2f6ff; box-shadow: 0 26px 60px rgba(46, 155, 255, 0.28); transform: rotate(-2.5deg); }
body[data-skin="lagon"] .bouyon-chapter__single-cover img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
body[data-skin="lagon"] .bouyon-chapter__single-body { flex: 1 1 0; min-width: 0; }
body[data-skin="lagon"] .bouyon-chapter__single-stamp {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%) rotate(1.5deg); white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; background: var(--coral); color: #2A0A0A; padding: 6px 12px;
}
body[data-skin="lagon"] .bouyon-chapter__single-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aqua);
}
body[data-skin="lagon"] .bouyon-chapter__single-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 13px; }
body[data-skin="lagon"] .bouyon-chapter__single-eq i { width: 3px; background: var(--aqua); border-radius: 2px; animation: lagonEq 1.1s ease-in-out infinite; }
body[data-skin="lagon"] .bouyon-chapter__single-eq i:nth-child(1) { height: 45%; }
body[data-skin="lagon"] .bouyon-chapter__single-eq i:nth-child(2) { height: 90%; animation-delay: .22s; }
body[data-skin="lagon"] .bouyon-chapter__single-eq i:nth-child(3) { height: 60%; animation-delay: .44s; }
body[data-skin="lagon"] .bouyon-chapter__single-eq i:nth-child(4) { height: 100%; animation-delay: .12s; }
@keyframes lagonEq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
body[data-skin="lagon"] .bouyon-chapter__single-title {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 900 !important;
  font-size: clamp(30px, 4.6vw, 46px) !important; line-height: 1 !important; color: var(--text) !important; margin: 0 !important;
}
body[data-skin="lagon"] .bouyon-chapter__single-title em { font-style: normal; color: var(--aqua) !important; text-shadow: 0.04em 0.04em 0 rgba(46, 155, 255, 0.7); }
body[data-skin="lagon"] .bouyon-chapter__single-intro { margin: 12px 0 0 !important; font-size: 1rem !important; color: var(--text) !important; font-family: 'Satoshi', system-ui, sans-serif !important; }
body[data-skin="lagon"] .bouyon-chapter__single-intro strong { color: var(--aqua) !important; background: none !important; padding: 0 !important; }
body[data-skin="lagon"] .bouyon-chapter__single-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
body[data-skin="lagon"] .bouyon-chapter__single-play {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Satoshi', system-ui, sans-serif; font-weight: 800; font-size: 16px; color: #16060a !important;
  background: linear-gradient(120deg, var(--coral), #ff5252); padding: 15px 26px; border-radius: 6px; text-decoration: none;
  animation: lagonThrob 2.1s ease-in-out infinite;
}
body[data-skin="lagon"] .bouyon-chapter__single-play::after {
  content: ''; position: absolute; top: -4px; bottom: -4px; left: -85%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg); animation: lagonShine 2.6s ease-in-out infinite; pointer-events: none;
}
body[data-skin="lagon"] .bouyon-chapter__single-ghost {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; color: var(--text) !important;
  text-decoration: none; padding: 13px 18px; border-radius: 6px; border: 1px solid var(--border);
}
body[data-skin="lagon"] .bouyon-chapter__single-ghost:hover { border-color: var(--aqua); background: rgba(56, 225, 212, 0.08); }
body[data-skin="lagon"] .bouyon-chapter__single-lib { display: inline-block; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--aqua) !important; text-decoration: none; border-bottom: 1px solid rgba(var(--aqua-rgb), 0.4); }
@media (prefers-reduced-motion: reduce) {
  body[data-skin="lagon"] .bouyon-chapter__single-eq i,
  body[data-skin="lagon"] .bouyon-chapter__single-play,
  body[data-skin="lagon"] .bouyon-chapter__single-play::after { animation: none; }
}
@media (max-width: 640px) {
  body[data-skin="lagon"] .bouyon-chapter__single { flex-direction: column; text-align: center !important; }
  body[data-skin="lagon"] .bouyon-chapter__single-fig { width: clamp(150px, 55%, 220px); margin: 0 auto; }
  body[data-skin="lagon"] .bouyon-chapter__single-actions { justify-content: center; }
}

/* ═══════════ CTA « BANDE-SON DE L'ARTICLE » (mid-article, vinyle single) ═══════════ */
body[data-skin="lagon"] .bouyon-chapter__bandeson {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 38px); align-items: center;
  margin: 7vh 0; padding: clamp(22px, 4vw, 38px); border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(120% 160% at 88% 0%, rgba(56, 225, 212, 0.14), transparent 55%),
    radial-gradient(130% 150% at 0% 100%, rgba(255, 107, 107, 0.12), transparent 55%),
    linear-gradient(160deg, #131d3a, #0d1428) !important;
  border: 1px solid rgba(142, 168, 220, 0.22) !important;
}
body[data-skin="lagon"] .bouyon-chapter__bandeson-disc { position: relative; width: clamp(130px, 20vw, 190px); height: clamp(130px, 20vw, 190px); flex: none; }
body[data-skin="lagon"] .bouyon-chapter__bandeson-vinyl {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 18px 50px rgba(4, 10, 26, 0.7), 0 0 0 8px rgba(8, 12, 26, 0.9), 0 0 0 9px rgba(142, 168, 220, 0.18);
  animation: lagonSpinCover 9s linear infinite;
}
body[data-skin="lagon"] .bouyon-chapter__bandeson-vinyl img { width: 100%; height: 100%; object-fit: cover; }
body[data-skin="lagon"] .bouyon-chapter__bandeson-vinyl::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 26%, rgba(0,0,0,0.28) 27%, transparent 33%, rgba(0,0,0,0.2) 46%, transparent 52%, rgba(0,0,0,0.22) 66%, transparent 72%);
}
body[data-skin="lagon"] .bouyon-chapter__bandeson-hole {
  position: absolute; top: 50%; left: 50%; width: 12%; height: 12%; transform: translate(-50%, -50%);
  border-radius: 50%; background: #0d1428; outline: 3px solid rgba(238, 243, 255, 0.35); z-index: 2;
}
body[data-skin="lagon"] .bouyon-chapter__bandeson-title {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 900 !important;
  font-size: clamp(26px, 4.2vw, 40px) !important; line-height: 1 !important; color: var(--text) !important; margin: 0 !important;
}
body[data-skin="lagon"] .bouyon-chapter__bandeson-title em { font-style: normal; color: var(--aqua) !important; }
body[data-skin="lagon"] .bouyon-chapter__bandeson-sub { margin: 10px 0 0 !important; font-size: 1rem !important; color: var(--text) !important; font-family: 'Satoshi', system-ui, sans-serif !important; }
body[data-skin="lagon"] .bouyon-chapter__bandeson-sub strong { color: #fff !important; }
body[data-skin="lagon"] .bouyon-chapter__bandeson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
@media (prefers-reduced-motion: reduce) { body[data-skin="lagon"] .bouyon-chapter__bandeson-vinyl { animation: none; } }
@media (max-width: 640px) {
  body[data-skin="lagon"] .bouyon-chapter__bandeson { grid-template-columns: 1fr; text-align: center; }
  body[data-skin="lagon"] .bouyon-chapter__bandeson-disc { margin: 0 auto; }
  body[data-skin="lagon"] .bouyon-chapter__bandeson-actions { justify-content: center; }
}

/* ═══════════ CTA SOCIAL À PART ENTIÈRE (« La vague continue. Suis-la. ») ═══════════ */
body[data-skin="lagon"] .bouyon-chapter__social-cta {
  margin: 7vh 0; padding: clamp(28px, 5vw, 44px); border-radius: 12px; overflow: hidden; text-align: center;
  background:
    radial-gradient(130% 160% at 88% 0%, rgba(255, 107, 107, 0.16), transparent 55%),
    radial-gradient(120% 150% at 0% 100%, rgba(231, 90, 124, 0.1), transparent 55%),
    linear-gradient(160deg, #1c1430, #131024) !important;
  border: 1px solid rgba(255, 140, 140, 0.28) !important; border-top: 3px solid var(--coral) !important;
}
body[data-skin="lagon"] .bouyon-chapter__social-eyebrow {
  display: inline-block; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--coral);
}
body[data-skin="lagon"] .bouyon-chapter__social-title {
  font-family: 'Cabinet Grotesk', system-ui, sans-serif !important; font-weight: 900 !important;
  font-size: clamp(28px, 4.4vw, 42px) !important; line-height: 1 !important; color: var(--text) !important; margin: 0 !important;
}
body[data-skin="lagon"] .bouyon-chapter__social-title em { font-style: normal; color: var(--coral) !important; }
body[data-skin="lagon"] .bouyon-chapter__social-sub { margin: 12px auto 0 !important; max-width: 440px; font-size: 1rem !important; color: var(--text) !important; font-family: 'Satoshi', system-ui, sans-serif !important; }
body[data-skin="lagon"] .bouyon-chapter__social-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
body[data-skin="lagon"] .bouyon-chapter__social-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--text) !important; text-decoration: none; padding: 13px 22px; border-radius: 99px;
  border: 1px solid var(--border); background: rgba(20, 30, 56, 0.45); transition: border-color .2s, background .2s, transform .2s;
}
body[data-skin="lagon"] .bouyon-chapter__social-btn:hover { border-color: var(--coral); background: rgba(255, 107, 107, 0.1); transform: translateY(-2px); }
body[data-skin="lagon"] .bouyon-chapter__social-ico { color: var(--coral); font-size: 13px; }

/* ═══════════ MINI-PLAYER STICKY (hors article → anime librement) ═══════════ */
.bouyon-chapter__player {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 96;
  display: flex; align-items: center; gap: 12px;
  background: rgba(13, 20, 40, 0.9); backdrop-filter: blur(16px);
  border: 1px solid rgba(142, 168, 220, 0.28); border-radius: 99px;
  padding: 9px 12px 9px 9px; box-shadow: 0 18px 50px rgba(3, 8, 20, 0.6);
  max-width: min(460px, calc(100vw - 24px));
}
.bouyon-chapter__player[hidden] { display: none; }
.bouyon-chapter__player-cover { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; animation: lagonSpinCover 10s linear infinite; }
@keyframes lagonSpinCover { to { transform: rotate(360deg); } }
.bouyon-chapter__player-cover img { width: 100%; height: 100%; object-fit: cover; }
.bouyon-chapter__player-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bouyon-chapter__player-title { font-family: 'Satoshi', system-ui, sans-serif; font-weight: 800; font-size: 13.5px; color: #EEF3FF; white-space: nowrap; }
.bouyon-chapter__player-artist { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(199, 210, 232, 0.72); white-space: nowrap; }
.bouyon-chapter__player-go { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: 'Satoshi', system-ui, sans-serif; font-weight: 800; font-size: 13px; color: #16060a; background: #FF6B6B; border-radius: 99px; padding: 10px 16px; text-decoration: none; }
.bouyon-chapter__player-close { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(142, 168, 220, 0.28); background: none; color: rgba(199, 210, 232, 0.72); font-size: 12px; cursor: pointer; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .bouyon-chapter__player-cover { animation: none; } }
/* mini-player DESKTOP-ONLY : sur mobile c'est bouyon-funnel-bar qui gère l'écoute
   (sinon doublon + collision des deux barres du bas) */
@media (max-width: 767px) {
  .bouyon-chapter__player { display: none !important; }
}