*{box-sizing:border-box}body{margin:0;background:#faf9f7;color:#4a4a49;font:16px/1.5 system-ui,sans-serif}main{max-width:860px;margin:64px auto;padding:0 24px}h1{font-size:28px;line-height:1.2;margin:0 0 12px}p{margin:0 0 28px}.etiquette{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#8b8586;margin-bottom:12px}.lecteur{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;--alpha:.88}.lecteur video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%}.commandes{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:5px 12px;color:white;background:linear-gradient(100deg,rgba(255,103,72,var(--alpha)),rgba(255,68,71,var(--alpha)) 52%,rgba(255,33,70,var(--alpha)));min-height:48px}.lecteur button{border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;min-width:36px;min-height:36px;padding:6px}.lecteur button:hover{background:#ffffff24;border-radius:4px}button:focus-visible,input:focus-visible{outline:3px solid white;outline-offset:2px}.lecteur svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.centre{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.centre button{pointer-events:auto!important;width:68px;height:68px!important;border-radius:50%!important;background:linear-gradient(135deg,#ff6748e6,#ff2146e6)!important;color:white;box-shadow:0 3px 20px #0002}.centre svg{width:28px;height:28px}.lecteur.en-lecture .centre{display:none}.commandes input{accent-color:white;cursor:pointer;margin:0;min-width:0}.progression{flex:1;width:100%;height:26px}.volume{width:65px}.temps{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.reglage{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px;font-size:14px}.reglage input{accent-color:#ff4447}.note{font-size:13px;color:#8b8586;margin-top:16px}.lecteur:fullscreen{width:100%;height:100%;aspect-ratio:auto}.lecteur:fullscreen video{object-fit:contain}.erreur{color:#a72b34;font-size:14px;margin-top:12px}[hidden]{display:none!important}@media(max-width:520px){main{margin-top:28px;padding:0 12px}.commandes{gap:4px;padding:3px 6px}.volume{display:none}.temps{font-size:11px}.centre button{width:54px;height:54px!important}h1{font-size:24px}}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;border:0;box-shadow:none;height:28px;--rempli:0%;--piste:rgba(255,255,255,.3);--avance:#fff}
input[type=range]::-webkit-slider-runnable-track{height:3px;border:0;border-radius:2px;box-shadow:none;background:linear-gradient(to right,var(--avance) 0 var(--rempli),var(--piste) var(--rempli) 100%)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #b72c3a;margin-top:-4.5px}
input[type=range]::-moz-range-track{height:3px;border:0;border-radius:2px;background:var(--piste)}
input[type=range]::-moz-range-progress{height:3px;border:0;background:var(--avance)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #b72c3a}
.lecteur canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;pointer-events:none}.lecteur:fullscreen canvas{object-fit:contain}
#son .corps{fill:currentColor;stroke:none}
.reglage input[type=range]{--piste:rgba(74,74,73,.18);--avance:#ff4447;width:150px}
.commandes{min-height:36px;padding:4px 10px;gap:8px}.commandes button{min-width:28px;min-height:28px;padding:4px}.commandes svg{width:18px;height:18px}@media(pointer:coarse){.commandes{min-height:48px;padding:2px 6px}.commandes button{min-width:44px;min-height:44px}.commandes input[type=range]{height:44px}}

html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}.lecteur{width:100%;height:100%;aspect-ratio:auto}.erreur{position:absolute;top:0;left:0;right:0;margin:0;padding:10px;background:#fff;color:#9c2536;z-index:4}

.lecteur canvas{object-fit:contain}