/* 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; }
.player-menu { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-width: calc(100% - 2rem); }
.player-menu > summary { min-height: 2.5rem; padding: 0.5rem 1rem; color: #fff; background: rgb(0 0 0 / 0.5); border: 1px solid #fff; border-radius: 0.25rem; cursor: pointer; user-select: none; }
.player-menu > summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; max-width: 22rem; padding: 0.5rem; background: rgb(0 0 0 / 0.5); border-radius: 0.25rem; }
.player-controls label { color: #fff; }
.player-status { position: fixed; left: 1rem; top: 1rem; max-width: calc(100% - 9rem); margin: 0; padding: 0.5rem; color: #fff; background: rgb(0 0 0 / 0.5); border-radius: 0.25rem; }
.player-status:empty { top: auto; right: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.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; }
.player-controls input { min-height: 1.5rem; min-width: 1.5rem; }
.player-controls button { min-width: 6rem; min-height: 2.5rem; padding: 0 1rem; color: #fff; background: rgb(0 0 0 / 0.7); border: 1px solid #fff; border-radius: 0.25rem; }
.player-controls button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.player-controls .player-hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }