/* Personnages : « Dans les trailers » (style Jack) + visionneuse */
.trl{margin:56px 0 40px}
.trl-k{font:500 12px/1 Kanit,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#D7E2EA;opacity:.7;margin:0 0 10px}
.trl h2{margin-top:0}
.trl-l{color:#D7E2EA;opacity:.8;max-width:560px}
.trl-h{margin:28px 0 12px;font:700 15px/1 Kanit,sans-serif!important;text-transform:uppercase;letter-spacing:.14em!important}
.trl-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.trl-i{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#151515;text-decoration:none;color:#fff;outline:2px solid transparent;outline-offset:-2px;transition:transform .35s cubic-bezier(.2,.75,.15,1),outline-color .2s}
.trl-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.trl-i:hover img,.trl-i:focus-visible img{transform:scale(1.05)}
.trl-i:hover,.trl-i:focus-visible{outline-color:#B600A8}
.trl-c{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));display:flex;flex-direction:column;gap:3px}
.trl-c b{font:600 14px/1.2 Kanit,sans-serif}.trl-c small{font:300 11.5px/1.2 Kanit,sans-serif;opacity:.8}
.trl-cr{margin-top:14px;font-size:12px;opacity:.6}
@media(max-width:640px){.trl-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 0 6px;scrollbar-width:none}.trl-row::-webkit-scrollbar{display:none}.trl-i{flex:0 0 82%;scroll-snap-align:start;border-radius:14px}}
html[data-theme=light] .trl-k,html[data-theme=light] .trl-l{color:#333}
#trl-lb{position:fixed;inset:0;margin:0;z-index:9999;background:rgba(5,5,5,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
#trl-lb.open{display:flex}
#trl-lb img{max-width:min(96vw,1600px);max-height:calc(100dvh - 190px);width:auto;height:auto;border-radius:14px;image-rendering:auto}
#trl-lb figcaption{color:#D7E2EA;text-align:center;margin-top:14px;font:300 14px/1.4 Kanit,sans-serif}#trl-lb figcaption b{display:block;font-weight:600;font-size:17px;color:#fff}
#trl-lb button{position:absolute;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:999px;width:46px;height:46px;font-size:22px;line-height:1;cursor:pointer}
#trl-lb .x{top:calc(12px + env(safe-area-inset-top));right:14px}#trl-lb .pv{left:14px;top:50%}#trl-lb .nx{right:14px;top:50%}
@media(max-width:640px){#trl-lb .pv,#trl-lb .nx{top:auto;bottom:calc(16px + env(safe-area-inset-bottom))}}