/* @pmeweb/content/embeds -- the STRUCTURE of a player facade. The look is per site, through the
 * --pmw-embed-* variables. Written to dist/_embed/embed.css by the integration, linked only by pages that
 * hold a player.
 *
 * EVERY SELECTOR NAMES THE ELEMENT AND ITS CLASS (figure.pmw-embed img.pmw-embed__poster: two
 * classes, two elements). A site's article styles reach inside the facade -- Astro compiles
 * `.prose :global(img)` to `.prose[data-astro-cid-…] img` (two classes, one element), which beat
 * 2.3.0's `.pmw-embed__link img` and gave the poster the article's margin, border and
 * `height: auto`: a band above the poster and its bottom cut off (test-contenu, 2026-11-05). So
 * the poster and the link also reset every property an article style usually sets. */
figure.pmw-embed { margin: 1.5em 0; padding: 0; }
figure.pmw-embed a.pmw-embed__link { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: var(--pmw-embed-radius, 8px); background: #1f2328; color: #fff; text-decoration: none; }
figure.pmw-embed--video a.pmw-embed__link, figure.pmw-embed--video iframe.pmw-embed__frame { width: 100%; aspect-ratio: 16 / 9; }
figure.pmw-embed--audio iframe.pmw-embed__frame { width: 100%; height: 166px; }
figure.pmw-embed img.pmw-embed__poster { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
figure.pmw-embed span.pmw-embed__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
figure.pmw-embed span.pmw-embed__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6em 1em; background: rgba(0, 0, 0, 0.78); color: #fff; font-weight: 600; line-height: 1.35; text-decoration: none; }
/* White ring inside a dark one: visible on a light page and on a dark one, whatever the site's
 * link color. A site may set its own with --pmw-embed-focus. */
figure.pmw-embed a.pmw-embed__link:focus-visible { outline: 3px solid var(--pmw-embed-focus, #fff); outline-offset: 2px; box-shadow: 0 0 0 7px #1f2328; }
figure.pmw-embed--video a.pmw-embed__link:hover .pmw-embed__play path:first-child { fill: #c00; }

/* AUDIO: drawn in the page (facade.ts WAVE), so every color is the site's. Light by default, like
 * SoundCloud's own player, which is what the click turns it into:
 *   --pmw-embed-audio-bg      panel           (#f2f2f2)
 *   --pmw-embed-audio-line    panel border    (#dcdcdc)
 *   --pmw-embed-audio-wave    waveform bars   (#c4c4c4)
 *   --pmw-embed-audio-fg      title text      (#1f2328)
 *   --pmw-embed-audio-accent  play button     (#ff5500, SoundCloud's orange) */
/* Laid out like that player too, on a grid rather than over the poster: the button on the left,
 * the title on top, the waveform under it -- so a title wrapping to two lines on a phone pushes the
 * waveform down instead of running over it. The box is AT LEAST the player's 166px and grows with
 * the title (2.3.1 fixed it at 166px: a four-line title on a phone left the waveform a sliver,
 * aheartful 2026-11-05); the waveform keeps 48px whatever the title. */
figure.pmw-embed--audio a.pmw-embed__link { width: 100%; min-height: 166px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto minmax(48px, 1fr); column-gap: 1em; row-gap: 0.5em; padding: 1em; box-sizing: border-box; background: var(--pmw-embed-audio-bg, #f2f2f2); color: var(--pmw-embed-audio-fg, #1f2328); border: 1px solid var(--pmw-embed-audio-line, #dcdcdc); }
figure.pmw-embed--audio span.pmw-embed__play { position: static; grid-column: 1; grid-row: 1 / 3; align-self: center; }
figure.pmw-embed--audio span.pmw-embed__title { position: static; grid-column: 2; grid-row: 1; padding: 0; background: none; color: inherit; }
figure.pmw-embed--audio svg.pmw-embed__wave { grid-column: 2; grid-row: 2; display: block; width: 100%; height: 100%; min-height: 48px; }
figure.pmw-embed svg.pmw-embed__wave rect { fill: var(--pmw-embed-audio-wave, #c4c4c4); }
figure.pmw-embed span.pmw-embed__play--round circle { fill: var(--pmw-embed-audio-accent, #ff5500); }
figure.pmw-embed a.pmw-embed__link:hover span.pmw-embed__play--round svg { filter: brightness(0.9); }
figure.pmw-embed iframe.pmw-embed__frame { display: block; margin: 0; border: 0; border-radius: var(--pmw-embed-radius, 8px); }
figure.pmw-embed div.pmw-embed__blocked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;margin:0;padding:1em;box-sizing:border-box;border-radius:var(--pmw-embed-radius,8px);background:#1f2328;color:#fff;text-align:center}
figure.pmw-embed--video div.pmw-embed__blocked{aspect-ratio:16/9}
figure.pmw-embed--audio div.pmw-embed__blocked{min-height:166px;background:var(--pmw-embed-audio-bg,#f2f2f2);color:var(--pmw-embed-audio-fg,#1f2328);border:1px solid var(--pmw-embed-audio-line,#dcdcdc)}
figure.pmw-embed div.pmw-embed__blocked p{margin:0}
figure.pmw-embed div.pmw-embed__blocked a{color:inherit;text-decoration:underline;font-weight:600}