/* Articles du dossier Bouyon · affiche choisie par Terry, 02/10/2026.
   Source : previews/articles-affiche-2026-10-02/generer.mjs.
   Le même habillage couvre les 44 articles français et les 44 anglais.
   Les photographies restent entières ; les titres sont visibles sans JS.
   Cette feuille suit le bundle commun, sans toucher aux deux hubs D. */

@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

body[data-skin="affiche"] {
  --af-g: clamp(16px, 5vw, 56px);
  --af-col: min(680px, calc(100% - 2 * var(--af-g)));
  --af-rule: rgb(255 255 255 / 0.12);
  --af-text: var(--color-text, #f2f2f2);
  --af-soft: var(--color-text-soft, #bfbfc4);
  --af-surface: color-mix(in srgb, var(--af-bg) 94%, white);
  --af-head: var(--eb-h, 64px);
  --bg: var(--af-bg);
  --bg-2: var(--af-bg);
  --bg-3: var(--af-surface);
  --ink: var(--af-ink);
  --accent: var(--af-ink);
  --aqua: var(--af-ink);
  --coral: var(--af-ink);
  --text: var(--af-text);
  --muted: var(--af-soft);
  --faint: var(--af-soft);
  --border: var(--af-rule);
  --journey-font: var(--font-body);
  --journey-ink: var(--af-ink);
  --journey-ink-hover: var(--af-text);
  --journey-button-text: var(--af-bg);
  --journey-rule-light: var(--af-rule);
  margin: 0;
  background: var(--af-bg);
  color: var(--af-text);
  font: 400 18px/1.7 var(--font-body);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
html.eb-cache body[data-skin="affiche"] { --af-head: 0px; }
body[data-skin="affiche"]::after { content: ""; position: fixed; inset: 0; z-index: 90; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-skin="affiche"] :focus-visible { outline: 3px solid var(--af-ink); outline-offset: 4px; }
body[data-skin="affiche"] .bouyon-chapter {
  /* Les anciens composants définissaient --ink sur le main : la palette
     de la photo doit gagner ici, pas seulement sur son ancêtre body. */
  --ink: var(--af-ink);
  --bg: var(--af-bg);
  --bg-3: var(--af-surface);
  --text: var(--af-text);
  --muted: var(--af-soft);
  --accent: var(--af-ink);
  --aqua: var(--af-ink);
  --coral: var(--af-ink);
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--af-text);
}
body[data-skin="affiche"] .bouyon-chapter :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
body[data-skin="affiche"] .bouyon-chapter :where(h1, h2, h3, h4, p, li, a, span, em, strong, label, summary, button) { letter-spacing: 0; }
body[data-skin="affiche"] .bouyon-chapter :where(a) { color: var(--af-ink); text-underline-offset: 3px; }
body[data-skin="affiche"] .bouyon-chapter :where(a):hover { color: var(--af-text); }
body[data-skin="affiche"] .bouyon-chapter img { display: block; max-width: 100%; height: auto; }
body[data-skin="affiche"] .bouyon-chapter :is(h1, h2) { font-family: var(--font-display); letter-spacing: 0; text-transform: none; }

/* Ouverture : le format original de la photographie, puis son titre.
   Sur ordinateur, le texte occupe le bas de la photo derrière un voile. */
body[data-skin="affiche"] .af-une { position: relative; isolation: isolate; display: grid; align-items: end; min-width: 0; padding: clamp(40px, 10vw, 120px) 0 0; background: var(--af-bg); }
body[data-skin="affiche"] .lx-une--image { min-height: 0; padding: 0; }
body[data-skin="affiche"] .af-une .bouyon-chapter__figure--hero { grid-area: 1 / 1; align-self: start; width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
body[data-skin="affiche"] .af-une .bouyon-chapter__figure--hero :is(picture, img) { display: block; width: 100%; height: auto; max-width: none; max-height: calc(100svh - var(--eb-h, 64px)); object-fit: contain; border-radius: 0; background: none; }
/* La légende complète reste dans le DOM de la photo et dans son générique. */
body[data-skin="affiche"] .af-une .bouyon-chapter__figure--hero figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-skin="affiche"] .lx-une--image::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(transparent 25%, color-mix(in srgb, var(--af-bg) 70%, transparent) 62%, var(--af-bg) 96%); }
body[data-skin="affiche"] .af-une .bouyon-chapter__hero { position: relative; isolation: isolate; grid-area: 1 / 1; z-index: 1; justify-self: center; align-self: end; box-sizing: border-box; width: min(1180px, 100%); max-width: none; min-height: 0; margin: 0; padding: 0 var(--af-g) clamp(28px, 5vw, 56px); background: none; border: 0; text-align: left; }
body[data-skin="affiche"] .lx-une--image .bouyon-chapter__hero::before { content: ""; position: absolute; inset: -24px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(transparent, color-mix(in srgb, var(--af-bg) 88%, transparent) 24px, color-mix(in srgb, var(--af-bg) 94%, transparent)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
body[data-skin="affiche"] .bouyon-chapter__eyebrow { margin: 0 0 8px; padding: 0; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); font-style: normal; letter-spacing: 0.28em; text-transform: uppercase; opacity: 1; }
body[data-skin="affiche"] .af-lockup { position: relative; }
body[data-skin="affiche"] .af-manuscrit { position: static; display: inline-block; margin: 0 0 6px; color: var(--af-text); font: 700 clamp(28px, 6vw, 46px)/1 "Caveat", cursive; transform: rotate(-4deg); transform-origin: left; }
body[data-skin="affiche"] .bouyon-chapter__title { max-width: 14ch; margin: 10px 0 0; padding: 0; color: var(--af-ink); font: 800 clamp(46px, 10.5vw, 124px)/0.92 var(--font-display); letter-spacing: 0; text-transform: none; text-shadow: none; text-wrap: balance; overflow-wrap: anywhere; hyphens: manual; opacity: 1; transform: none; animation: none; }
body[data-skin="affiche"] .bouyon-chapter__title em { color: var(--af-text); font: inherit; font-style: normal; letter-spacing: 0; text-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__disclaimer { max-width: 56em; margin: 18px 0 0; padding: 0; border: 0; color: var(--af-soft); font: 600 11px/1.7 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; opacity: 1; }
body[data-skin="affiche"] .bouyon-chapter__disclaimer em { font: inherit; font-style: normal; }
body[data-skin="affiche"] .bouyon-chapter__disclaimer strong { color: var(--af-text); font-weight: 700; }
body[data-skin="affiche"] .bouyon-chapter__subtitle { max-width: 36em; margin: 16px 0 0; color: var(--af-text); font: 400 clamp(18px, 2.2vw, 21px)/1.55 var(--font-body); opacity: 1; transform: none; }
body[data-skin="affiche"] .af-generique { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; color: var(--af-soft); font: 600 10px/1.7 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; }
body[data-skin="affiche"] .af-giant { position: absolute; z-index: 0; right: 0; top: clamp(10px, 3vw, 40px); color: transparent; font: 800 clamp(160px, 46vw, 560px)/0.8 var(--font-display); -webkit-text-stroke: 1.5px var(--af-ink-deep); opacity: 0.35; pointer-events: none; }
body[data-skin="affiche"] .bouyon-chapter__filet { display: none; }

/* Un seul en-tête commun ; le rappel discret et la ligne le suivent. */
body[data-skin="affiche"] .af-rappel { position: fixed; top: var(--af-head); left: 0; right: 0; z-index: 899; box-sizing: border-box; padding: 8px var(--af-g); background: color-mix(in srgb, var(--af-bg) 94%, transparent); color: var(--af-soft); font: 700 14px/1.3 var(--font-display); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 160ms linear; }
body[data-skin="affiche"] .af-rappel.est-la { visibility: visible; opacity: 1; }
body[data-skin="affiche"] .af-progress { position: fixed; top: var(--af-head); left: 0; right: 0; z-index: 900; height: 2px; pointer-events: none; background: transparent; }
body[data-skin="affiche"] .af-progress i { display: block; width: 100%; height: 100%; background: var(--af-ink); transform: scaleX(var(--af-progress, 0)); transform-origin: left; }

/* Lecture : le même axe de 680 px jusqu'aux références et commentaires. */
body[data-skin="affiche"] .lx-corps { display: block; width: var(--af-col); max-width: none; margin: 0 auto; padding: 0; }
body[data-skin="affiche"] .lx-colonne { min-width: 0; }
body[data-skin="affiche"] .bouyon-chapter__article { display: block; max-width: none; margin: 0; padding: 0; background: none; border: 0; color: var(--af-text); }
/* Retirer les anciens états cachés, sans changer le mode Rapide (.deep-only). */
body[data-skin="affiche"] .bouyon-chapter__article :is(p, h2, h3, blockquote, .bouyon-chapter__data, .bouyon-chapter__cliffhanger, .bouyon-chapter__stat-callout, .bouyon-chapter__figure, .bouyon-chapter__cover),
body[data-skin="affiche"] :is(.bouyon-chapter__cliffhanger, .bouyon-chapter__tldr, .bouyon-chapter__cover, .bouyon-chapter__retenir-item) { opacity: 1; transform: none; transition: none; animation: none; }
body[data-skin="affiche"] .bouyon-chapter__article :where(p, li) { max-width: 36em; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__article .bouyon-chapter__p:not(.af-enbref) { line-height: 1.7 !important; }
body[data-skin="affiche"] .bouyon-chapter__article p { margin: 1.15em 0 0; }
body[data-skin="affiche"] .bouyon-chapter__article :where(strong) { color: inherit; font-weight: 700; }
body[data-skin="affiche"] .bouyon-chapter__article :where(em) { color: inherit; font-family: inherit; }
body[data-skin="affiche"] .bouyon-chapter__article :where(ul, ol) { display: grid; gap: 8px; margin: 1.15em 0 0; padding-left: 1.2em; }
body[data-skin="affiche"] .bouyon-chapter__article hr { display: block; height: 1px; margin: 56px 0 0; border: 0; background: var(--af-rule); }
body[data-skin="affiche"] .af-enbref { font-size: 21px; line-height: 1.55 !important; }
body[data-skin="affiche"] .af-preambule { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--af-rule); }
body[data-skin="affiche"] .af-preambule p { color: var(--af-soft); font-size: 15px; line-height: 1.55; }

/* Sommaire accessible au même endroit avec et sans JavaScript. */
body[data-skin="affiche"] .af-sommaire { width: 100%; max-width: 680px; margin: 44px auto 8px; padding: 16px 0; border-top: 1px solid var(--af-rule); border-bottom: 1px solid var(--af-rule); }
body[data-skin="affiche"] .af-sommaire > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; list-style: none; }
body[data-skin="affiche"] .af-sommaire > summary::-webkit-details-marker { display: none; }
body[data-skin="affiche"] .af-sommaire > summary::after { content: "+"; color: var(--af-ink); font-size: 24px; letter-spacing: 0; }
body[data-skin="affiche"] .af-sommaire[open] > summary::after { content: "−"; }
body[data-skin="affiche"] .af-sommaire ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
body[data-skin="affiche"] .af-sommaire a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--af-text); font: 600 16px/1.5 var(--font-body); text-decoration-color: var(--af-rule); }
body[data-skin="affiche"] .af-sommaire a:hover { color: var(--af-ink); }

/* Résumé natif : le bord et le texte, sans ajouter de carte. */
body[data-skin="affiche"] .bouyon-chapter__tldr { margin: 44px 0 8px; padding: 22px 0; border: 0; border-top: 1px solid var(--af-rule); border-bottom: 1px solid var(--af-rule); border-radius: 0; background: none; box-shadow: none; color: var(--af-text); }
body[data-skin="affiche"] .bouyon-chapter__tldr-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 0; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; list-style: none; }
body[data-skin="affiche"] .bouyon-chapter__tldr-eyebrow::-webkit-details-marker { display: none; }
body[data-skin="affiche"] .bouyon-chapter__tldr-body { display: grid; gap: 12px; padding: 12px 0 0; font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__tldr-body p { margin: 0; color: var(--af-text); font: inherit; }
body[data-skin="affiche"] .bouyon-chapter__tldr-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body[data-skin="affiche"] .bouyon-chapter__tldr-facts li { position: relative; margin: 0; padding: 0 0 0 22px; border: 0; border-radius: 0; background: none; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__tldr-facts li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 2px; background: var(--af-ink); }
body[data-skin="affiche"] .bouyon-chapter__tldr-full { justify-self: start; min-height: 44px; padding: 0 18px; border: 1px solid var(--af-ink); border-radius: 0; background: var(--af-ink); color: var(--af-bg); font: 700 15px/1.3 var(--font-body); cursor: pointer; }

/* Intertitres : chiffre creux à l'extérieur du vrai titre, avec son ID. */
body[data-skin="affiche"] .af-partie { display: block; min-width: 0; margin: 0; }
body[data-skin="affiche"] .af-tete { position: relative; margin: clamp(72px, 12vw, 120px) 0 6px; padding-top: 28px; border-top: 1px solid var(--af-rule); }
body[data-skin="affiche"] .af-num { display: block; margin-bottom: 10px; color: transparent; font: 800 clamp(64px, 15vw, 140px)/0.8 var(--font-display); -webkit-text-stroke: 1.5px var(--af-ink); }
body[data-skin="affiche"] .bouyon-chapter__h2 { position: relative; display: block; max-width: none; margin: 0; padding: 0; border: 0; background: none; color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); letter-spacing: 0; text-transform: none; text-shadow: none; text-wrap: balance; overflow-wrap: anywhere; clip-path: none; scroll-margin-top: 52px; }
body[data-skin="affiche"] .bouyon-chapter__h2 :is(em, span, strong) { color: inherit; font: inherit; letter-spacing: 0; text-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__h2::after { content: none; }
body[data-skin="affiche"] .bouyon-chapter__h3 { margin: 40px 0 0; padding: 0; color: var(--af-text); font: 800 clamp(24px, 4vw, 32px)/1.15 var(--font-display); letter-spacing: 0; text-transform: none; }
body[data-skin="affiche"] .bouyon-chapter__h3 em { color: inherit; font: inherit; }

/* Les images quittent la colonne, sans recadrage ni rayon de carte. */
body[data-skin="affiche"] .bouyon-chapter__article .bouyon-chapter__figure { width: 100vw; max-width: none; margin: 44px calc(50% - 50vw) 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__article .bouyon-chapter__figure :is(picture, img) { display: block; width: 100%; height: auto; max-width: none; max-height: 82svh; object-fit: contain; border-radius: 0; background: none; }
body[data-skin="affiche"] .bouyon-chapter__article .bouyon-chapter__figure-caption { box-sizing: border-box; width: min(calc(680px + 2 * var(--af-g)), 100%); margin: 0 auto; padding: 12px var(--af-g) 0; color: var(--af-soft); background: none; font: 600 10px/1.7 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; text-align: left; }
body[data-skin="affiche"] .bouyon-chapter__cover { margin: 44px 0 0; }
body[data-skin="affiche"] .bouyon-chapter__cover img { border-radius: 0; }
body[data-skin="affiche"] .bouyon-chapter__cover figcaption { margin-top: 12px; color: var(--af-soft); font: 500 13px/1.5 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__embed { margin: 44px 0 0; border-radius: 0; overflow: hidden; }

/* La playlist se construit au clic (audit du 05/10/2026) : un verbe souligné,
   comme le bouton d'écoute des fiches, et le lecteur apparaît dessous. */
body[data-skin="affiche"] .bouyon-chapter__embed--spotify { overflow: visible; }
body[data-skin="affiche"] .bouyon-chapter__ecoute { position: relative; display: inline-block; min-height: 44px; margin: 0; padding: 8px 0 12px; border: 0; border-radius: 0; background: none; color: var(--af-text); font: 800 22px/1.2 var(--font-display); text-align: left; cursor: pointer; }
body[data-skin="affiche"] .bouyon-chapter__ecoute::after { content: ""; position: absolute; left: 0; bottom: 0; width: 89px; height: 2px; background: var(--af-ink); }
body[data-skin="affiche"] .bouyon-chapter__ecoute:hover { color: var(--af-ink); }
body[data-skin="affiche"] .bouyon-chapter__ecoute:focus-visible { outline: 2px solid var(--af-ink); outline-offset: 4px; }
body[data-skin="affiche"] .bouyon-chapter__ecoute[disabled] { color: var(--af-soft); cursor: default; }
body[data-skin="affiche"] .bouyon-chapter__ecoute-lecteur { margin-top: 17px; }
body[data-skin="affiche"] .bouyon-chapter__ecoute-lecteur iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 12px; }

/* Citations, chiffres et notes : leur taille donne le rythme de lecture. */
body[data-skin="affiche"] .bouyon-chapter__pullquote { margin: 56px 0 0; padding: 0 0 0 22px; border: 0; border-left: 2px solid var(--af-ink); border-radius: 0; background: none; text-align: left; }
body[data-skin="affiche"] .bouyon-chapter__pullquote p { margin: 0; color: var(--af-ink); font: 800 clamp(28px, 5.2vw, 46px)/1.12 var(--font-display); }
body[data-skin="affiche"] .bouyon-chapter__pullquote::before,
body[data-skin="affiche"] .bouyon-chapter__pullquote::after { content: none; }
body[data-skin="affiche"] .bouyon-chapter__pullquote :is(cite, footer) { display: block; margin-top: 12px; color: var(--af-text); font: 700 26px/1 "Caveat", cursive; }
body[data-skin="affiche"] .bouyon-chapter__data { display: flex; flex-wrap: wrap; gap: 22px 40px; margin: 40px 0 0; padding: 0; border: 0; background: none; }
body[data-skin="affiche"] .bouyon-chapter__data-item { flex: 1 1 160px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
body[data-skin="affiche"] .bouyon-chapter__data-item .value { display: block; color: var(--af-ink); font: 800 clamp(34px, 7vw, 56px)/1 var(--font-display); white-space: normal; overflow-wrap: anywhere; }
body[data-skin="affiche"] .bouyon-chapter__data-item .label { display: block; margin-top: 8px; color: var(--af-soft); font: 400 15px/1.5 var(--font-body); text-transform: none; }
body[data-skin="affiche"] .bouyon-chapter__stat-callout { display: block; margin: 48px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
body[data-skin="affiche"] .bouyon-chapter__stat-num { display: block; color: var(--af-ink); font: 800 clamp(64px, 16vw, 150px)/0.85 var(--font-display); overflow-wrap: anywhere; }
body[data-skin="affiche"] .bouyon-chapter__stat-label { margin: 8px 0 0; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__cliffhanger { display: block; margin: 44px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__cliffhanger p { margin: 0; color: var(--af-ink); font: 700 clamp(26px, 5vw, 36px)/1.15 "Caveat", cursive; }
body[data-skin="affiche"] .bouyon-chapter__cliffhanger .bouyon-chapter__cliffhanger-tag { margin-bottom: 12px; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; }
body[data-skin="affiche"] .bouyon-chapter__polemic { display: grid; gap: 12px; margin: 48px 0 0; padding: 0 0 0 22px; border: 0; border-left: 1px solid var(--af-rule); border-radius: 0; background: none; box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__polemic p { margin: 0; color: var(--af-soft); font-style: italic; }
body[data-skin="affiche"] .bouyon-chapter__polemic .bouyon-chapter__polemic-tag { color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; }
body[data-skin="affiche"] .bouyon-chapter__article [data-term] { color: inherit; background: none; border: 0; text-decoration: underline dotted var(--af-ink); text-underline-offset: 4px; }
body[data-skin="affiche"] .af-partie--faq > p { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--af-rule); }

/* Classements mensuels : une liste typographique façon « générique » du hub
   artistes. Rang, nom en display, flèche de mouvement, auditeurs. Sur grand
   écran, un panneau photo suit le survol ; sur téléphone, une vignette ronde. */
body[data-skin="affiche"] .topchart { margin: 40px 0 0; }
body[data-skin="affiche"] .topchart .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body[data-skin="affiche"] .bouyon-chapter__topchart { margin: 0; padding: 0; border-top: 1px solid var(--af-rule); }
/* Les listes de l'article ont un retrait et une largeur maximale : pas ici. */
body[data-skin="affiche"] .topchart .bouyon-chapter__topchart-row { max-width: none; margin: 0; }
body[data-skin="affiche"] .bouyon-chapter__topchart-row { grid-template-columns: 2.6ch 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--af-rule); }
body[data-skin="affiche"] .bouyon-chapter__topchart-row::before { color: var(--af-ink); font: 800 clamp(20px, 2.6vw, 28px)/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
body[data-skin="affiche"] .bouyon-chapter__topchart-name { justify-self: start; min-width: 0; border: 0; color: var(--af-text); font: 800 clamp(20px, 3vw, 30px)/1.08 var(--font-display); letter-spacing: -0.015em; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
body[data-skin="affiche"] .bouyon-chapter__topchart-name:hover,
body[data-skin="affiche"] .bouyon-chapter__topchart-name:focus-visible,
body[data-skin="affiche"] .bouyon-chapter__topchart-name.is-active { color: var(--tc-ink, var(--af-ink)); }
body[data-skin="affiche"] .bouyon-chapter__topchart-name:focus-visible { outline: 2px solid var(--tc-ink, var(--af-ink)); outline-offset: 4px; }
body[data-skin="affiche"] .bouyon-chapter__topchart-metric { color: var(--af-text); font: 700 15px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
body[data-skin="affiche"] .bouyon-chapter__topchart-metric small { color: var(--af-soft); font: 500 11px/1.3 var(--font-body); opacity: 1; }
body[data-skin="affiche"] .topchart-thumb { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tc-bg, var(--af-surface)); }
body[data-skin="affiche"] .topchart-move { justify-self: end; min-width: 4ch; font: 800 14px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-align: right; white-space: nowrap; }
body[data-skin="affiche"] .topchart-move--up { color: var(--trend-up); }
body[data-skin="affiche"] .topchart-move--down { color: var(--trend-down); }
body[data-skin="affiche"] .topchart-move--same { color: var(--af-soft); }
body[data-skin="affiche"] .topchart-move--new { color: var(--af-ink); font: 700 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; }
body[data-skin="affiche"] .topchart-poster { display: none; }
/* Le classement au format téléphone : la vidéo (ou l'image) et ses deux liens. */
body[data-skin="affiche"] .topchart-partage { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: end; margin: 48px 0 0; }
body[data-skin="affiche"] .topchart-partage__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--af-surface); }
body[data-skin="affiche"] .topchart-partage__titre { margin: 0; color: var(--af-ink); font: 800 clamp(24px, 3vw, 32px)/1.05 var(--font-display); letter-spacing: -0.015em; }
body[data-skin="affiche"] .topchart-partage__note { margin: 8px 0 0; color: var(--af-soft); font: 500 14px/1.5 var(--font-body); }
body[data-skin="affiche"] .topchart-partage__liens { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; }
body[data-skin="affiche"] .topchart-partage__liens a { align-self: flex-start; border: 0; box-shadow: none; color: var(--af-text); font: 700 15px/1.3 var(--font-body); text-decoration: underline; text-decoration-color: var(--af-ink); text-underline-offset: 5px; }
body[data-skin="affiche"] .topchart-partage__liens a:hover,
body[data-skin="affiche"] .topchart-partage__liens a:focus-visible { color: var(--af-ink); }
@media (max-width: 599px) {
  body[data-skin="affiche"] .topchart-partage { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 599px) {
  body[data-skin="affiche"] .bouyon-chapter__topchart-row { grid-template-columns: 2.2ch 40px minmax(0, 1fr) auto auto; gap: 10px; }
  body[data-skin="affiche"] .topchart-thumb { width: 40px; height: 40px; }
  body[data-skin="affiche"] .bouyon-chapter__topchart-name { font-size: clamp(17px, 5vw, 21px); }
  body[data-skin="affiche"] .bouyon-chapter__topchart-metric { font-size: 14px; }
  body[data-skin="affiche"] .bouyon-chapter__topchart-metric small { font-size: 9px; letter-spacing: 0.04em; }
  body[data-skin="affiche"] .topchart-move { min-width: 3ch; font-size: 13px; }
}

@media (min-width: 1000px) {
  body[data-skin="affiche"] .topchart--poster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 56px; align-items: start; margin-inline: calc(50% - min(560px, 50vw - var(--af-g))); }
  body[data-skin="affiche"] .topchart--poster .topchart-thumb { display: none; }
  body[data-skin="affiche"] .topchart--poster .bouyon-chapter__topchart-row { grid-template-columns: 2.6ch minmax(0, 1fr) auto auto; gap: 20px; padding: 14px 0; }
  body[data-skin="affiche"] .topchart-poster { position: sticky; top: calc(var(--af-head) + 24px); display: grid; gap: 8px; margin: 0; padding: 0 0 20px; background: var(--tc-bg, var(--af-surface)); transition: background-color var(--duration-base) var(--ease-out); }
  body[data-skin="affiche"] .topchart-poster__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--tc-bg, var(--af-surface)); }
  body[data-skin="affiche"] .topchart-poster__photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity var(--duration-base) var(--ease-out); }
  body[data-skin="affiche"] .topchart-poster__photo img[hidden] { display: block; visibility: hidden; opacity: 0; }
  body[data-skin="affiche"] .topchart-poster p { margin: 0; padding: 0 20px; }
  body[data-skin="affiche"] .topchart-poster__rank { padding-top: 14px !important; color: var(--tc-ink, var(--af-ink)); font: 800 15px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
  body[data-skin="affiche"] .topchart-poster__name { color: var(--tc-ink, var(--af-ink)); font: 800 clamp(30px, 3.2vw, 44px)/1 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
  body[data-skin="affiche"] .topchart-poster__metric { color: var(--af-soft); font: 600 13px/1.4 var(--font-body); }
  body[data-skin="affiche"] .topchart-poster__metric .topchart-move { margin-left: 8px; }
  body[data-skin="affiche"] .topchart-poster__go { justify-self: start; margin: 6px 20px 0; color: var(--af-text); font: 700 13px/1 var(--font-body); text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin="affiche"] .topchart-poster,
  body[data-skin="affiche"] .topchart-poster__photo img,
  body[data-skin="affiche"] .bouyon-chapter__topchart-name { transition: none; }
}
/* Le Radar choisit une carte via hidden : le display:grid de son ancien
   composant ne doit pas montrer les quatre autres cartes. */
body[data-skin="affiche"] .bouyon-radar__item[hidden] { display: none; }
body[data-skin="affiche"] .bouyon-radar__actions .bouyon-radar__label { color: inherit; }
/* Radar, direction « Pochettes » (choix de Terry sur prototype, 06/10/2026) :
   la pochette est le bouton d'écoute, un rond ▶ posé dessus ; Choisir et
   Partager deviennent des ronds à icône (leur nom reste dans aria-label). Le
   bouton « Écouter » en double disparaît : la pochette porte le même lien, le
   même libellé accessible et le même repère de mesure (radar_listen). Remplace
   la rangée de trois boutons, dont le texte avait la couleur du fond (L954). */
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__item { display: block !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork { position: relative; display: block; width: 100%; max-width: 360px; margin: 0 auto 16px; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork:focus-visible { outline: 2px solid var(--af-ink); outline-offset: 4px; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 8px !important; transition: transform .2s var(--ease-out); }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork:active img { transform: scale(.98); }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork::after { content: "▶" !important; position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 60px; height: 60px; padding-left: 4px; border-radius: 50%; background: var(--af-ink); color: var(--af-bg); font: 800 22px/1 var(--font-display); box-shadow: 0 8px 22px rgb(0 0 0 / .45); transition: transform .2s var(--ease-out); }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artwork:is(:hover, :focus-visible)::after { transform: scale(1.06); }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__release { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; text-align: left !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__release > :not(.bouyon-radar__actions) { grid-column: 1; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__title { font: 800 clamp(24px, 6vw, 34px)/1 var(--font-display) !important; letter-spacing: -.03em !important; text-align: left; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__artist { text-align: left; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__actions { grid-column: 2; grid-row: 1 / 3; display: flex !important; gap: 10px; max-width: none !important; margin: 0 !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__actions .bouyon-radar__listen { display: none !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__actions :is(.bouyon-radar__vote, .bouyon-radar__share) { display: grid !important; place-items: center; width: 52px; height: 52px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: color-mix(in srgb, var(--af-ink) 16%, var(--af-bg)) !important; color: var(--af-text) !important; box-shadow: none !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__actions :is(.bouyon-radar__vote, .bouyon-radar__share) .bouyon-radar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__icon { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; background: none !important; color: inherit !important; }
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__vote[aria-pressed="true"] { background: var(--af-ink) !important; color: var(--af-bg) !important; }
/* le halo cyan de l'ancien thème, derrière les icônes, les flèches et la carte */
body[data-skin="affiche"] .bouyon-radar .bouyon-radar__icon::before, body[data-skin="affiche"] .bouyon-radar .bouyon-radar__icon::after,
body[data-skin="affiche"] .bouyon-radar.is-deck .bouyon-radar__stage::before,
body[data-skin="affiche"] .bouyon-radar__navigation :is(button, span)::before, body[data-skin="affiche"] .bouyon-radar__navigation :is(button, span)::after { content: none !important; }
body[data-skin="affiche"] .bouyon-radar__navigation button { width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; box-shadow: inset 0 0 0 1px var(--af-rule) !important; color: var(--af-text) !important; justify-content: center; filter: none !important; }
body[data-skin="affiche"] .bouyon-radar__navigation .bouyon-radar__nav-icon { width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; filter: none !important; }
body[data-skin="affiche"] .bouyon-radar__navigation button > span:not(.bouyon-radar__nav-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-skin="affiche"] .bouyon-radar__navigation button:disabled { opacity: .35; }
body[data-skin="affiche"] .bouyon-radar__navigation button { pointer-events: auto; }

/* Fin : même colonne, chiffres creux, invitation à lire en grand. */
body[data-skin="affiche"] .bouyon-chapter__endcard { box-sizing: border-box; width: var(--af-col); max-width: none; margin: 96px auto 120px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--af-text); }
/* Pied : sans règle, il collait aux deux bords du téléphone (0 px, mesure du
   08/10). Même colonne que le texte ; le bas reste réglé par bouyon-chapter.css
   (au-dessus des onglets sur téléphone). */
body[data-skin="affiche"] .bouyon-chapter__footer { box-sizing: border-box; width: var(--af-col); margin: 0 auto; padding-top: var(--phi-3); border-top: 1px solid var(--af-rule); color: var(--af-soft); font: 400 13px/1.8 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__footer p { margin: 0 0 var(--phi-1); }
body[data-skin="affiche"] .bouyon-chapter__footer a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 768px) {
  body[data-skin="affiche"] .bouyon-chapter__footer { padding-bottom: var(--phi-5); }
}
body[data-skin="affiche"] .lx-fin { display: grid; gap: 96px; }
body[data-skin="affiche"] .lx-fin > * { margin: 0; }
body[data-skin="affiche"] .bouyon-chapter__endcard .eyebrow { margin: 0 0 12px; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; }
body[data-skin="affiche"] .bouyon-chapter__endcard :is(h2, h3) { margin: 8px 0 18px; color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); letter-spacing: 0; text-wrap: balance; }
body[data-skin="affiche"] .bouyon-chapter__retenir { padding: 28px 0 0; border: 0; border-top: 1px solid var(--af-rule); background: none; }
body[data-skin="affiche"] .bouyon-chapter__retenir > .eyebrow { color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); letter-spacing: 0; text-transform: none; }
body[data-skin="affiche"] .bouyon-chapter__retenir-list { display: block; margin-top: 18px; counter-reset: af-retenir; }
body[data-skin="affiche"] .bouyon-chapter__retenir-item { display: grid; grid-template-columns: clamp(54px, 12vw, 90px) minmax(0, 1fr); gap: 12px; margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--af-rule); border-radius: 0; background: none; counter-increment: af-retenir; }
body[data-skin="affiche"] .bouyon-chapter__retenir-item p { margin: 0; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__retenir-item .num { position: static; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0; }
body[data-skin="affiche"] .bouyon-chapter__retenir-item .num::before { content: counter(af-retenir, decimal-leading-zero); color: transparent; font: 800 clamp(40px, 9vw, 72px)/0.85 var(--font-display); -webkit-text-stroke: 1.2px var(--af-ink); }
body[data-skin="affiche"] .lx-fin .bouyon-chapter__retenir:not(:has(.bouyon-chapter__retenir-item)) { display: none; }
body[data-skin="affiche"] .lx-suite { position: relative; display: grid; gap: 10px; min-height: 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--af-rule); border-radius: 0; background: none; box-shadow: none; }
body[data-skin="affiche"] .lx-suite::before { content: none; }
body[data-skin="affiche"] .lx-suite .meta { margin: 0; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; }
body[data-skin="affiche"] .lx-suite .link { display: block; color: var(--af-text); font: 800 clamp(44px, 11vw, 110px)/0.9 var(--font-display); letter-spacing: 0; text-decoration: none; overflow-wrap: anywhere; }
body[data-skin="affiche"] .lx-suite .link em { color: inherit; font: inherit; }
body[data-skin="affiche"] .lx-suite .link::after { content: ""; position: absolute; inset: 0; }
body[data-skin="affiche"] .lx-suite .arrow { color: var(--af-ink); }
body[data-skin="affiche"] .lx-suite:hover .link { color: var(--af-ink); }
body[data-skin="affiche"] .lx-suite:has(.link:focus-visible) { outline: 3px solid var(--af-ink); outline-offset: 4px; }
body[data-skin="affiche"] .lx-suite .cliffhanger { margin: 0; color: var(--af-soft); font: 400 18px/1.7 var(--font-body); }

/* Single : pochette entière et toutes les plateformes déjà présentes. */
body[data-skin="affiche"] .bouyon-chapter__single { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__single::before,
body[data-skin="affiche"] .bouyon-chapter__single::after { content: none; }
body[data-skin="affiche"] .bouyon-chapter__single-fig { position: relative; margin: 0; }
body[data-skin="affiche"] .bouyon-chapter__single-cover img { display: block; width: 100%; height: auto; border-radius: 0; transform: rotate(-3deg); }
body[data-skin="affiche"] .bouyon-chapter__single-stamp { position: static; display: block; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--af-soft); font: 600 10px/1.5 var(--font-body); transform: none; }
body[data-skin="affiche"] .bouyon-chapter__single-body { display: grid; gap: 12px; justify-items: start; min-width: 0; }
body[data-skin="affiche"] .bouyon-chapter__single-eyebrow { color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; }
body[data-skin="affiche"] .bouyon-chapter__single .bouyon-chapter__single-title { margin: 0; color: var(--af-ink); font: 800 clamp(34px, 6.6vw, 60px)/1 var(--font-display); letter-spacing: 0; text-transform: none; text-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__single-title em { color: inherit; font: inherit; text-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__single-intro { margin: 0; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__single-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; }
body[data-skin="affiche"] :is(.bouyon-chapter__single-play, .bouyon-chapter__single-ghost, .bouyon-chapter__social-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; color: var(--af-text); font: 800 20px/1.1 var(--font-display); text-decoration: none; text-transform: none; letter-spacing: 0; box-shadow: none; transform: none; }
body[data-skin="affiche"] .bouyon-chapter__single-play svg { box-sizing: content-box; flex: none; width: 18px; height: 18px; padding: 14px; border-radius: 50%; background: var(--af-ink); color: var(--af-bg); }
body[data-skin="affiche"] :is(.bouyon-chapter__single-play, .bouyon-chapter__single-ghost, .bouyon-chapter__social-btn):hover { background: none; color: var(--af-ink); box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__single-lib { display: inline-flex; align-items: center; min-height: 44px; color: var(--af-soft); font: 600 15px/1.4 var(--font-body); }

/* Les compléments restent des volets natifs ; leurs liens ne disparaissent pas. */
body[data-skin="affiche"] :is(.bouyon-chapter__social-cta, .bouyon-chapter__partage-fin) { display: grid; gap: 12px; justify-items: start; margin: 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--af-rule); border-radius: 0; background: none; box-shadow: none; text-align: left; }
body[data-skin="affiche"] .bouyon-chapter__social-cta::before,
body[data-skin="affiche"] .bouyon-chapter__social-cta::after { content: none; }
body[data-skin="affiche"] :is(.bouyon-chapter__social-sub, .bouyon-chapter__partage-fin-txt) { margin: 0; color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__social-row { display: flex; flex-wrap: wrap; gap: 12px 20px; }
body[data-skin="affiche"] .lx-volets { display: grid; gap: 0; padding: 0; border: 0; }
body[data-skin="affiche"] .lx-volet { border-top: 1px solid var(--af-rule); border-radius: 0; background: none; }
body[data-skin="affiche"] .lx-volet:last-child { border-bottom: 1px solid var(--af-rule); }
body[data-skin="affiche"] .lx-volet > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; list-style: none; }
body[data-skin="affiche"] .lx-volet > summary::-webkit-details-marker { display: none; }
body[data-skin="affiche"] .lx-volet > summary::after { content: "+"; color: var(--af-ink); font-size: 24px; line-height: 1; }
body[data-skin="affiche"] .lx-volet[open] > summary::after { content: "−"; }
body[data-skin="affiche"] .lx-volet > section { display: grid; gap: 12px; margin: 0; padding: 0 0 24px; border: 0; background: none; color: var(--af-text); font: 400 16px/1.6 var(--font-body); }
body[data-skin="affiche"] .lx-volet :is(h2, h3) { color: var(--af-text); font-size: 22px; line-height: 1.2; }
body[data-skin="affiche"] .bouyon-chapter__sources :is(ul, ol) { margin: 12px 0 0; padding: 0; list-style: none; }
body[data-skin="affiche"] .bouyon-chapter__sources li { padding: 9px 0; border-bottom: 1px solid var(--af-rule); color: var(--af-soft); font: 400 13px/1.5 var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__author .bio { margin: 0; color: var(--af-soft); font: 400 15px/1.6 var(--font-body); }

/* Définition : conserver le parcours, remplacer son ancienne feuille claire. */
body[data-skin="affiche"] .ch-bande { margin: 0; padding: 0; overflow: visible; background: none; clip-path: none; }
body[data-skin="affiche"] .ch-bande::before,
body[data-skin="affiche"] .ch-bande::after { content: none; }
body[data-skin="affiche"] .ch-bande__dedans { max-width: none; margin: 0; padding: 0; }
body[data-skin="affiche"] .journey-eyebrow { margin: 0 0 8px; color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; }
body[data-skin="affiche"] :is(.journey-next, .journey-resources) { margin: 96px 0 0; padding: 28px 0 0; border-top: 1px solid var(--af-rule); background: none; color: var(--af-text); }
body[data-skin="affiche"] :is(.journey-next, .journey-resources) > h2 { margin: 8px 0 18px; color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); letter-spacing: 0; }
body[data-skin="affiche"] .journey-next-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--af-rule); border-bottom: 1px solid var(--af-rule); text-decoration: none; }
body[data-skin="affiche"] .journey-next-main > span:first-child { display: grid; gap: 12px; }
body[data-skin="affiche"] .journey-next-main strong { color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); }
body[data-skin="affiche"] .journey-next-main > span > span { color: var(--af-soft); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] .journey-arrow { color: var(--af-ink); font-size: 44px; }
body[data-skin="affiche"] .journey-next-other { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
body[data-skin="affiche"] .journey-next-other a { display: grid; gap: 12px; min-height: 44px; padding: 12px 0; text-decoration: none; }
body[data-skin="affiche"] .journey-next-other a > span { color: var(--af-soft); font: 400 14px/1.5 var(--font-body); }
body[data-skin="affiche"] .journey-next-other strong { color: var(--af-text); font: 700 22px/1.2 var(--font-display); }
body[data-skin="affiche"] .journey-next a:hover strong { color: var(--af-ink); }
body[data-skin="affiche"] .journey-resource { margin: 0; border: 0; border-top: 1px solid var(--af-rule); background: none; }
body[data-skin="affiche"] .journey-resource:last-child { border-bottom: 1px solid var(--af-rule); }
body[data-skin="affiche"] .journey-resource > summary { display: flex; align-items: center; min-height: 56px; padding: 12px 0; color: var(--af-soft); font: 600 15px/1.5 var(--font-body); cursor: pointer; }
body[data-skin="affiche"] .journey-resource > :not(summary) { padding-bottom: 24px; }
body[data-skin="affiche"] .journey-resource .af-tete { margin-top: 24px; }
body[data-skin="affiche"] .journey-resource .af-num { font-size: 64px; }
body[data-skin="affiche"] .journey-resource .bouyon-chapter__h2 { font-size: 34px; }
body[data-skin="affiche"] .journey-quiz { margin-top: 48px; padding: 0; border: 0; border-top: 1px solid var(--af-rule); background: none; }
body[data-skin="affiche"] .journey-quiz .bouyon-chapter__pari { margin: 0; padding: 24px 0; border: 0; background: none; }
body[data-skin="affiche"] .journey-return-link { color: var(--af-ink) !important; font-family: var(--font-body); }
body[data-skin="affiche"] .journey-platforms { margin-top: 20px; }
body[data-skin="affiche"] .journey-platforms summary { display: flex; align-items: center; min-height: 44px; color: var(--af-soft); font: 500 14px/1.5 var(--font-body); cursor: pointer; }
body[data-skin="affiche"] .journey-platform-links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; }
body[data-skin="affiche"] .journey-platform-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--af-ink); font: 600 15px/1.5 var(--font-body); }
body[data-skin="affiche"] .journey-return-note { margin-top: 12px; color: var(--af-soft); font: 400 14px/1.5 var(--font-body); }
body[data-skin="affiche"] .cta-discovery { color: var(--af-text); border-color: var(--af-rule); }
body[data-skin="affiche"] .cta-discovery__cover { height: auto; object-fit: contain; border-radius: 0; }
body[data-skin="affiche"] .cta-discovery .cta-discovery__copy { color: var(--af-soft); font-family: var(--font-body); }
/* Le bouton « Écouter » de la définition : la règle des liens du chapitre
   (ligne 62, plus spécifique) lui donnait la couleur de son propre fond, texte
   invisible, mesuré en prod le 05/10/2026 (241,169,126 sur 241,169,126). */
body[data-skin="affiche"] .cta-discovery .cta-discovery-btn,
body[data-skin="affiche"] .cta-discovery .cta-discovery-btn:hover { color: var(--journey-button-text); }

/* La Définition partage son ancien bundle avec les hubs. Les priorités de
   ce parcours sont neutralisées ici, uniquement sur les articles Affiche,
   pour garder les quatre hubs publiés strictement identiques. */
html body[data-skin="affiche"].journey-after { padding-bottom: 0 !important; }
html body[data-skin="affiche"].journey-after main.bouyon-chapter { padding-top: 0 !important; }
html body[data-skin="affiche"].journey-after .bouyon-chapter__hero { min-height: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: clamp(28px, 5vw, 56px) !important; }
html body[data-skin="affiche"].journey-after .bouyon-chapter__title { max-width: 14ch; font-size: clamp(46px, 10.5vw, 124px) !important; line-height: 0.92 !important; }
html body[data-skin="affiche"].journey-after .bouyon-chapter__subtitle { margin-top: 16px !important; font-size: clamp(18px, 2.2vw, 21px) !important; line-height: 1.55 !important; }
html body[data-skin="affiche"].journey-after .bouyon-chapter__eyebrow { font-size: 11px !important; }
html body[data-skin="affiche"].journey-after #journey-essential { padding-top: 0 !important; }
html body[data-skin="affiche"].journey-after #journey-essential > .ch-bande__dedans > p { font: 400 18px/1.7 var(--font-body) !important; }
html body[data-skin="affiche"].journey-after .journey-summary-details { margin: 44px 0 8px !important; padding: 22px 0; border-top: 1px solid var(--af-rule); border-bottom: 1px solid var(--af-rule); color: var(--af-text) !important; }
html body[data-skin="affiche"].journey-after .journey-summary-details summary { color: var(--af-soft) !important; font-size: 11px; }
html body[data-skin="affiche"].journey-after .journey-summary-details p { color: var(--af-text) !important; }
html body[data-skin="affiche"].journey-after .journey-eyebrow { margin: 0 0 8px !important; color: var(--af-soft) !important; font: 600 11px/1.5 var(--font-body) !important; letter-spacing: 0.24em; }
html body[data-skin="affiche"].journey-after .cta-discovery { margin: 32px 0; padding: 24px 0; }
html body[data-skin="affiche"].journey-after .cta-discovery__title { font-size: 25px !important; }
html body[data-skin="affiche"].journey-after .cta-discovery__copy { margin-bottom: 18px !important; font-size: 16px !important; }
html body[data-skin="affiche"].journey-after .journey-return-note { margin: 12px 0 0 !important; color: var(--af-soft) !important; font: 400 14px/1.5 var(--font-body) !important; }
html body[data-skin="affiche"].journey-after .journey-platforms { margin-top: 20px; color: var(--af-text); }
html body[data-skin="affiche"].journey-after .journey-platforms summary { display: flex; align-items: center; min-height: 44px; padding: 0; color: var(--af-soft); font: 500 14px/1.5 var(--font-body); }
html body[data-skin="affiche"].journey-after .journey-platform-links { gap: 8px 20px; padding: 12px 0 0; }
html body[data-skin="affiche"].journey-after .journey-platform-btn { min-height: 44px; color: var(--af-ink) !important; font: 600 15px/1.5 var(--font-body); }
html body[data-skin="affiche"].journey-after :is(.journey-next, .journey-resources, .journey-quiz) { width: 100%; margin: 96px 0 0; padding: 28px 0 0; border-top: 1px solid var(--af-rule); background: none; color: var(--af-text); }
html body[data-skin="affiche"].journey-after .journey-next h2 { margin: 8px 0 18px !important; color: var(--af-text) !important; font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display) !important; }
html body[data-skin="affiche"].journey-after .journey-next a { color: var(--af-ink) !important; }
html body[data-skin="affiche"].journey-after .journey-next-main { gap: 20px; padding: 24px 0; border-color: var(--af-rule); }
html body[data-skin="affiche"].journey-after .journey-next-main > span:first-child { gap: 12px; }
html body[data-skin="affiche"].journey-after .journey-next-main strong { color: var(--af-text); font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); }
html body[data-skin="affiche"].journey-after .journey-next-main > span > span { color: var(--af-soft); font: 400 18px/1.7 var(--font-body); }
html body[data-skin="affiche"].journey-after .journey-arrow { color: var(--af-ink); font-size: 44px; }
html body[data-skin="affiche"].journey-after .journey-next-other { gap: 24px; margin-top: 24px; }
html body[data-skin="affiche"].journey-after .journey-next-other a { gap: 12px; min-height: 44px; padding: 12px 0; }
html body[data-skin="affiche"].journey-after .journey-next-other a > span { color: var(--af-soft); font: 400 14px/1.5 var(--font-body); }
html body[data-skin="affiche"].journey-after .journey-next-other strong { color: var(--af-text); font: 700 22px/1.2 var(--font-display); }
html body[data-skin="affiche"].journey-after .journey-resources > h2,
html body[data-skin="affiche"].journey-after #journey-resources > h2 { margin: 8px 0 18px; color: var(--af-text) !important; font: 800 clamp(34px, 6.6vw, 64px)/1 var(--font-display); font-size: clamp(34px, 6.6vw, 64px) !important; }
html body[data-skin="affiche"].journey-after .journey-resource { border-color: var(--af-rule); }
html body[data-skin="affiche"].journey-after .journey-resource > summary { min-height: 56px; padding: 12px 0; color: var(--af-soft); font: 600 15px/1.5 var(--font-body); }
html body[data-skin="affiche"].journey-after .journey-resource-body { padding-bottom: 24px; }
html body[data-skin="affiche"].journey-after .journey-resource :is(p, li, h2, h3) { color: var(--af-text) !important; }
html body[data-skin="affiche"].journey-after .journey-resource-body p { font: 400 18px/1.7 var(--font-body) !important; }
html body[data-skin="affiche"].journey-after .journey-resource .journey-resource-content .bouyon-chapter__h2 { margin: 0 !important; font-size: 34px !important; }
html body[data-skin="affiche"].journey-after .journey-quiz { margin-top: 48px; padding: 0; }
html body[data-skin="affiche"].journey-after .journey-quiz .bouyon-chapter__pari { padding: 24px 0; color: var(--af-text); }
html body[data-skin="affiche"].journey-after .journey-quiz :is(.artist-pari__q, .bouyon-chapter__pari-hook) { color: var(--af-text) !important; }

/* Outils et invitations : positions conservées, palette de l'article. */
body[data-skin="affiche"] .bouyon-chapter__partage { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--af-rule); border-radius: 0; background: none; color: var(--af-text); font: 600 15px/1.3 var(--font-body); cursor: pointer; text-transform: none; letter-spacing: 0; }
body[data-skin="affiche"] .bouyon-chapter__partage--plein { border-color: var(--af-ink); background: var(--af-ink); color: var(--af-bg); }
body[data-skin="affiche"] .bouyon-chapter__partage--plein:hover { background: var(--af-text); color: var(--af-bg); }
body[data-skin="affiche"] .bouyon-mode-hint { background: var(--af-surface); color: var(--af-text); font-family: var(--font-body); }
body[data-skin="affiche"] .bouyon-mode-hint__text { font-family: var(--font-body); }
body[data-skin="affiche"] :is(.bouyon-mode-hint__bolt, .bouyon-chapter__player-cover, .bouyon-chapter__single-eq i, .bouyon-chapter__mode-toggle.is-cued button),
body[data-skin="affiche"] .jeu-hud.a-jouer::after { animation: none; }
body[data-skin="affiche"] #blog-capture { box-sizing: border-box; width: auto; margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--af-rule); border-radius: 0; background: none; }
body[data-skin="affiche"] #blog-capture .cap-eyebrow { color: var(--af-soft); font: 600 11px/1.5 var(--font-body); letter-spacing: 0.24em; }
body[data-skin="affiche"] #blog-capture .cap-text { color: var(--af-text); font: 400 18px/1.7 var(--font-body); }
body[data-skin="affiche"] #blog-capture input { min-height: 44px; background: var(--af-surface); color: var(--af-text); font: 400 16px/1.5 var(--font-body); }
body[data-skin="affiche"] #blog-capture button { min-height: 44px; background: var(--af-ink); color: var(--af-bg); font: 700 15px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }
body[data-skin="affiche"] #funnel-bar { background: color-mix(in srgb, var(--af-bg) 94%, white); color: var(--af-text); border-color: var(--af-rule); }
body[data-skin="affiche"] #funnel-bar .funnel-bar__eyebrow { color: var(--af-ink); font-family: var(--font-body); }
body[data-skin="affiche"] #funnel-bar .funnel-bar__label { color: var(--af-text); font-family: var(--font-body); }
body[data-skin="affiche"] #funnel-bar .funnel-bar__cta { min-height: 44px; background: var(--af-ink); color: var(--af-bg); font-family: var(--font-body); }
body[data-skin="affiche"] #funnel-bar .funnel-bar__close { min-width: 44px; min-height: 44px; color: var(--af-soft); }
body[data-skin="affiche"] :is(.chap-suite, .jeu-hud) { font-family: var(--font-body); }
body[data-skin="affiche"] .chap-suite[hidden] { display: none; }
body[data-skin="affiche"] .bouyon-chapter__player { bottom: calc(24px + var(--funnel-h, 0px)); background: color-mix(in srgb, var(--af-bg) 94%, white); color: var(--af-text); visibility: hidden; pointer-events: none; transform: translate(-50%, 160%); transition: transform 500ms var(--ease-out), visibility 0s 500ms; }
body[data-skin="affiche"] .bouyon-chapter__player.est-la { visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: transform 500ms var(--ease-out); }
body[data-skin="affiche"] .bouyon-chapter__player-title { color: var(--af-text); font-family: var(--font-display); }
body[data-skin="affiche"] .bouyon-chapter__player-artist { color: var(--af-soft); font-family: var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__player-go { min-height: 44px; background: var(--af-ink); color: var(--af-bg); font-family: var(--font-body); }
body[data-skin="affiche"] .bouyon-chapter__player-close { min-width: 44px; min-height: 44px; color: var(--af-soft); }

@media (min-width: 768px) {
  body[data-skin="affiche"] .bouyon-chapter__outils { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; width: var(--af-col); margin: 28px auto 0; padding: 0; background: none; border: 0; box-shadow: none; }
  body[data-skin="affiche"] .bouyon-chapter__outils .bouyon-chapter__mode-toggle { display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--af-rule); border-radius: 0; background: none; }
  /* Fond et texte s'inversent d'un coup : le fond en fondu sous un texte qui change
     aussitôt laissait chaque libellé à 1:1 sur son propre fond (06/10/2026). */
  body[data-skin="affiche"] .bouyon-chapter__outils .bouyon-chapter__mode-toggle button { display: inline-flex; align-items: center; gap: 8px; height: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: none; color: var(--af-soft); font: 600 14px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; box-shadow: none; transition: transform 0.15s ease; }
  body[data-skin="affiche"] .bouyon-chapter__outils .bouyon-chapter__mode-toggle button[aria-pressed="true"] { background: var(--af-ink); color: var(--af-bg); }
  body[data-skin="affiche"] .bouyon-chapter__mode-icon { display: none; }
  body[data-skin="affiche"] .bouyon-chapter__outils > .bouyon-chapter__partage { margin-left: auto; }
}
@media (max-width: 899px) {
  body[data-skin="affiche"] .lx-une--image .bouyon-chapter__hero { grid-area: 2 / 1; padding-top: 28px; }
  body[data-skin="affiche"] .lx-une--image::after,
  body[data-skin="affiche"] .lx-une--image .bouyon-chapter__hero::before { content: none; }
  html body[data-skin="affiche"].journey-after .lx-une--image .bouyon-chapter__hero { padding-top: 28px !important; }
}
@media (max-width: 767px) {
  body[data-skin="affiche"] { padding-bottom: calc(96px + var(--funnel-h, 0px) + env(safe-area-inset-bottom, 0px)); }
  body[data-skin="affiche"] .bouyon-chapter__outils { background: color-mix(in srgb, var(--af-bg) 96%, transparent); border-top: 1px solid var(--af-rule); box-shadow: none; }
  body[data-skin="affiche"] .bouyon-chapter__outils :is(.bouyon-chapter__mode-toggle button, .bouyon-chapter__partage, .bouyon-search-trigger, .bouyon-chapter__lang-switch) { font-family: var(--font-body); color: var(--af-soft) !important; }
  body[data-skin="affiche"] .bouyon-chapter__outils .bouyon-chapter__mode-toggle button[aria-pressed="true"] { color: var(--af-ink) !important; }
  body[data-skin="affiche"] .bouyon-chapter__single { grid-template-columns: minmax(0, 1fr); }
  body[data-skin="affiche"] .bouyon-chapter__single-fig { width: min(220px, 70%); }
  body[data-skin="affiche"] .journey-next-other { grid-template-columns: minmax(0, 1fr); }
  html body[data-skin="affiche"].journey-after { padding-bottom: calc(96px + var(--funnel-h, 0px) + env(safe-area-inset-bottom, 0px)) !important; }
  html body[data-skin="affiche"].journey-after .journey-next-other { grid-template-columns: minmax(0, 1fr); }
}
/* « La suite » à la charte de l'article (Terry, 06/10/2026 : la pastille bleu
   nuit, corail et turquoise n'avait pas suivi l'affiche). Une rangée plate :
   le fond et le filet de la barre du bas, la flèche dans un rond cerclé comme
   la pochette du single, la croix sans boîte. Au téléphone elle se pose bord à
   bord sur la barre du bas : les deux se lisent comme un seul bloc. */
body[data-skin="affiche"] .chap-suite { gap: 4px; align-items: center; padding: 6px 8px 6px 14px; border: 1px solid var(--af-rule); background: var(--af-bg); transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
body[data-skin="affiche"] .chap-suite__lien { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "f k" "f t"; column-gap: 12px; row-gap: 3px; align-items: center; min-height: 52px; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--af-text); }
body[data-skin="affiche"] .chap-suite__f { grid-area: f; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--af-ink); color: var(--af-ink); font: 800 20px/1 var(--font-display); transition: transform 0.2s var(--ease-out); }
body[data-skin="affiche"] .chap-suite__k { grid-area: k; align-self: end; color: var(--af-soft); font: 600 11px/1.3 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; }
body[data-skin="affiche"] .chap-suite__t { grid-area: t; align-self: start; color: var(--af-text); font: 800 18px/1.1 var(--font-display); letter-spacing: -0.02em; }
body[data-skin="affiche"] .chap-suite__x { display: grid; place-items: center; align-self: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--af-soft); font: 400 20px/1 var(--font-body); }
body[data-skin="affiche"] .chap-suite__lien:active .chap-suite__f { transform: scale(0.94); }
body[data-skin="affiche"] :is(.chap-suite__lien, .chap-suite__x):focus-visible { outline: 2px solid var(--af-ink); outline-offset: 2px; }
@media (hover: hover) {
  body[data-skin="affiche"] .chap-suite__lien:hover .chap-suite__f { background: var(--af-ink); color: var(--af-bg); }
  body[data-skin="affiche"] .chap-suite__x:hover { color: var(--af-text); }
}

/* Les deux voisins du bas suivent : le compteur de lecture et l'onglet du jeu
   gardaient la pastille bleu nuit, la mono et le turquoise d'avant l'affiche. */
body[data-skin="affiche"] .bouyon-chapter__time-remaining { padding: 8px 14px; border: 1px solid var(--af-rule); border-radius: 0; background: var(--af-bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--af-soft); font: 500 13px/1.3 var(--font-body); letter-spacing: 0; }
body[data-skin="affiche"] .bouyon-chapter__time-remaining strong { color: var(--af-text); font-weight: 700; font-style: normal; }
/* Au téléphone, le compteur restait posé sur le texte pendant toute la lecture
   (audit du 08/10) : Terry le retire, il reste sur tablette et ordinateur. */
@media (max-width: 767px) {
  body[data-skin="affiche"] .bouyon-chapter__time-remaining { display: none; }
}
body[data-skin="affiche"] .jeu-hud__grade { font-family: var(--font-body); letter-spacing: 0; }
@media (min-width: 768px) {
  body[data-skin="affiche"] .jeu-hud__grade { color: var(--af-text); }
  body[data-skin="affiche"] .jeu-hud__prog { color: var(--af-soft); }
}
body[data-skin="affiche"] .jeu-hud__pct { color: var(--af-ink); }
body[data-skin="affiche"] .jeu-hud.a-jouer::after { background: var(--af-ink); box-shadow: 0 0 0 2px var(--af-bg); }

/* Sur grand écran, le lecteur du single flotte à côté de « La suite » : il
   prend la même forme que la barre du téléphone, rangée plate, pochette
   cerclée, rond ▶. Le mot « Écouter » reste lu par les lecteurs d'écran. */
body[data-skin="affiche"] .bouyon-chapter__player { gap: 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--af-rule); border-radius: 0; background: var(--af-bg); box-shadow: none; }
body[data-skin="affiche"] .bouyon-chapter__player-cover { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--af-ink); }
body[data-skin="affiche"] .bouyon-chapter__player-title { font: 800 17px/1.1 var(--font-display); letter-spacing: -0.02em; }
body[data-skin="affiche"] .bouyon-chapter__player-artist { margin-top: 3px; font: 600 11px/1.3 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; }
body[data-skin="affiche"] .bouyon-chapter__player-go { justify-content: center; width: 46px; height: 46px; min-height: 0; margin-left: auto; padding: 0 0 0 3px; border-radius: 50%; font-size: 0; }
body[data-skin="affiche"] .bouyon-chapter__player-go svg { width: 17px; height: 17px; }
body[data-skin="affiche"] .bouyon-chapter__player-close { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; font: 400 20px/1 var(--font-body); }
/* Centré, le lecteur (332 px) recouvre « La suite » (430 px, à droite) sous
   1 248 px de large : il se pose alors juste au-dessus d'elle (66 px de haut). */
@media (min-width: 768px) and (max-width: 1247px) {
  body[data-skin="affiche"]:has(#chapSuite.est-la) .bouyon-chapter__player { bottom: calc(12px + 66px + 12px); }
}

/* « Chacun son tour » (Terry, 06/10/2026) : au téléphone, la barre d'outils
   pendant la lecture ; aux deux tiers de l'article le single du moment prend
   sa place, même hauteur, même fond. Une seule barre en bas, jamais deux.
   Logique : src/scripts/site/bouyon-funnel-bar.js. */
body[data-skin="affiche"] .tour-single { display: none; }
@media (max-width: 767px) {
  body[data-skin="affiche"] .chap-suite { left: 0; right: 0; bottom: var(--onglets-h, 64px) !important; border-width: 1px 0 0; }
  /* The slot is never left empty: the tools stay put and only hide once the
     single, laid over them on the same solid background, has faded in. */
  body[data-skin="affiche"] .bouyon-chapter__outils { transition: visibility 0s; }
  body[data-skin="affiche"] .bouyon-chapter__outils.is-cede { visibility: hidden; transition: visibility 0s 0.24s; }
  body[data-skin="affiche"] .tour-single { position: fixed; left: 0; right: 0; bottom: 0; z-index: 98; box-sizing: border-box; display: flex; align-items: center; gap: 4px; min-height: var(--onglets-h, 64px); margin: 0; padding: 5px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 14px; border-top: 1px solid var(--af-rule); background: var(--af-bg); font-family: var(--font-body); opacity: 0; visibility: hidden; transition: opacity 0.24s var(--ease-out), visibility 0s 0.24s; }
  body[data-skin="affiche"] .tour-single.is-la { opacity: 1; visibility: visible; transition: opacity 0.24s var(--ease-out), visibility 0s; }
  body[data-skin="affiche"] .tour-single__lien { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 52px; color: var(--af-text); text-decoration: none; }
  body[data-skin="affiche"] .tour-single__lien img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--af-ink); }
  body[data-skin="affiche"] .tour-single__txt { display: grid; gap: 3px; min-width: 0; }
  body[data-skin="affiche"] .tour-single__k { overflow: hidden; color: var(--af-soft); font: 600 11px/1.3 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
  body[data-skin="affiche"] .tour-single__txt b { overflow: hidden; color: var(--af-text); font: 800 18px/1.1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
  body[data-skin="affiche"] .tour-single__play { display: grid; flex: none; place-items: center; width: 46px; height: 46px; margin-left: auto; padding-left: 3px; border-radius: 50%; background: var(--af-ink); color: var(--af-bg); font: 800 17px/1 var(--font-display); transition: transform 0.2s var(--ease-out); }
  body[data-skin="affiche"] .tour-single__lien:active .tour-single__play { transform: scale(0.94); }
  body[data-skin="affiche"] .tour-single__fermer { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--af-soft); font: 400 20px/1 var(--font-body); cursor: pointer; }
  body[data-skin="affiche"] :is(.tour-single__lien, .tour-single__fermer):focus-visible { outline: 2px solid var(--af-ink); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="affiche"] *,
  body[data-skin="affiche"] *::before,
  body[data-skin="affiche"] *::after { animation: none !important; transition: none !important; }
}