/* Lecteur (page d'accueil). Aucun style en ligne : la CSP n'aura pas besoin de 'unsafe-inline'. */
body { margin: 0; }
#landscape { display: block; width: 100%; height: 100dvh; }
/* Image de repli (sans JS, robots, LCP) : sous le canvas, effacée dès la première frame rendue. */
.player-poster { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; }
main[data-rendered-count] .player-poster { visibility: hidden; }
/* Menu : verre fumé, sobre. Fond assez opaque pour garder 4,5:1 sur un ciel clair. */
.player-menu { --glass: rgb(16 20 24 / 0.62); --line: rgb(255 255 255 / 0.2); --ink: #f5f1ea; position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: calc(100% - 2rem); color: var(--ink); }
.player-menu > summary { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.5rem; padding: 0 1.125rem; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); cursor: pointer; user-select: none; list-style: none; }
.player-menu > summary::-webkit-details-marker { display: none; }
.player-menu > summary::before { content: ""; width: 1rem; height: 0.5rem; border-block: 1.5px solid currentcolor; transition: height 0.2s ease; }
.player-menu[open] > summary::before { height: 0; border-bottom-width: 0; }
.player-menu > summary:hover { background: rgb(16 20 24 / 0.75); }
.player-menu > summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-panel { box-sizing: border-box; width: 19rem; max-width: 100%; max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; background: var(--glass); border: 1px solid var(--line); border-radius: 0.875rem; box-shadow: 0 12px 32px rgb(0 0 0 / 0.25); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.player-intro { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.45; }
.player-intro a { color: inherit; text-decoration: underline; }
.player-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.player-controls label { grid-column: 1 / -1; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.player-controls input, .player-controls select { grid-column: 1 / -1; box-sizing: border-box; min-height: 2.5rem; min-width: 0; padding: 0 0.75rem; color: var(--ink); background: rgb(255 255 255 / 0.08); border: 1px solid var(--line); border-radius: 0.5rem; }
.player-controls input:focus-visible, .player-controls select:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-controls option { color: #1b1d1f; background: #fff; }
.player-controls button { min-height: 2.5rem; padding: 0 0.5rem; font-size: 0.875rem; color: var(--ink); background: rgb(255 255 255 / 0.08); border: 1px solid var(--line); border-radius: 0.5rem; transition: background 0.15s ease; }
.player-controls button:hover { background: rgb(255 255 255 / 0.18); }
.player-controls button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-controls .player-new { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.player-controls .player-hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.player-framing { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.5rem; font-weight: 600; color: #1b1d1f; background: var(--ink); border-radius: 0.5rem; text-decoration: none; }
.player-framing:hover { background: #fff; }
.player-framing:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-legal { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.player-legal nav { display: flex; flex-direction: column; gap: 0.375rem; }
.player-legal a { font-size: 0.75rem; color: var(--ink); text-decoration: none; }
.player-legal .lang-switch { align-self: flex-start; font-weight: 600; }
.player-legal a:hover, .player-legal a:focus-visible { text-decoration: underline; }
.player-legal a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-status { position: fixed; left: 1rem; top: 1rem; max-width: calc(100% - 9rem); margin: 0; padding: 0.5rem 0.875rem; font-size: 0.875rem; color: #f5f1ea; background: rgb(16 20 24 / 0.62); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.player-status:empty { top: auto; right: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.player-tagline { position: fixed; left: 1rem; bottom: 1rem; max-width: min(28rem, calc(100% - 2rem)); margin: 0; padding: 0.5rem 0.875rem; font-size: 0.875rem; line-height: 1.4; color: #f5f1ea; background: rgb(16 20 24 / 0.62); border-radius: 0.875rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* Sur téléphone, la phrase cache le paysage : lue au chargement, puis effacée. */
@media (max-width: 40rem) {
  .player-tagline { animation: tagline-out 0.8s ease 8s forwards; }
}
@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
  .player-tagline { animation-duration: 0.01s; }
}
@keyframes tagline-out { to { opacity: 0; visibility: hidden; } }
.player-frame-ms { position: fixed; right: 1rem; bottom: 1rem; padding: 0.25rem 0.5rem; color: #fff; background: rgb(0 0 0 / 0.5); border-radius: 0.25rem; font: 0.875rem monospace; }

/* Page de cadrage (/cadrer), mobile d'abord, sur le thème papier (paper.css). */
.framing { padding: 2rem 1rem 4rem; }
.framing-error { max-width: 40rem; margin: 0 auto 1rem; padding: 0.75rem 1rem; color: #fff; background: #8b1a1a; border-radius: 0.5rem; }
.framing-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 72rem; margin: 0 auto; }
.framing-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.framing-format { position: relative; }
.framing-format input { position: absolute; top: 50%; left: 0.9rem; width: 1rem; height: 1rem; margin: 0; border: 2px solid var(--ink); border-radius: 50%; transform: translateY(-50%); appearance: none; cursor: pointer; }
.framing-format label { display: block; padding: 0.6rem 1rem 0.6rem 2.4rem; border: 1px solid var(--rule); border-radius: 999px; background: rgb(255 255 255 / 0.5); cursor: pointer; }
.framing-format input:checked { border-color: var(--paper); background: radial-gradient(circle, var(--paper) 0 35%, transparent 40%); }
.framing-format input:checked + label { color: var(--paper); background: var(--ink); border-color: var(--ink); font-weight: 600; }
.framing-format input:focus-visible + label { outline: 3px solid #ffbf47; outline-offset: 2px; }
.framing-stage { display: flex; justify-content: center; width: 100%; }
.framing-face { display: block; box-shadow: 0 0.75rem 2rem rgb(38 39 42 / 0.3), 0 0 0 1px rgb(38 39 42 / 0.08); cursor: grab; touch-action: none; }
.framing-hint { max-width: 32rem; margin: 0; color: var(--muted); text-align: center; }
.framing-strip { position: relative; max-width: 100%; overflow: hidden; border-radius: 0.375rem; cursor: pointer; touch-action: none; }
.framing-strip-canvas { display: block; }
.framing-frame { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.55); cursor: grab; }
.framing-frame:focus-visible { outline: 3px solid #ffbf47; outline-offset: -5px; }
.framing-face.is-dragging, .framing-strip.is-dragging, .framing-strip.is-dragging .framing-frame { cursor: grabbing; }
.framing-form button { width: 100%; max-width: 24rem; min-height: 3rem; padding: 0 1.5rem; color: var(--paper); font-weight: 600; background: var(--ink); border: 0; border-radius: 0.5rem; }
.framing-form button:hover { background: #000; }
.framing-form button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.snapshot-preview, .checkout-preview { display: block; max-width: 100%; height: auto; }